diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
index c6d47806..e3746453 100644
--- a/apps/portal/src/components/offers/OffersNavigation.ts
+++ b/apps/portal/src/components/offers/OffersNavigation.ts
@@ -1,23 +1,14 @@
import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
const navigation: ProductNavigationItems = [
- {
- children: [
- { href: '#', name: 'Technical Support' },
- { href: '#', name: 'Sales' },
- { href: '#', name: 'General' },
- ],
- href: '#',
- name: 'Inboxes',
- },
- { children: [], href: '#', name: 'Reporting' },
- { children: [], href: '#', name: 'Settings' },
+ { href: '/offers', name: 'Home' },
+ { href: '/offers/submit', name: 'Benchmark your offer' },
];
const config = {
navigation,
- showGlobalNav: true,
- title: 'Offers',
+ showGlobalNav: false,
+ title: 'Tech Offers Repo',
};
export default config;
diff --git a/apps/portal/src/components/offers/OffersTable.tsx b/apps/portal/src/components/offers/OffersTable.tsx
new file mode 100644
index 00000000..ded79547
--- /dev/null
+++ b/apps/portal/src/components/offers/OffersTable.tsx
@@ -0,0 +1,190 @@
+import { useState } from 'react';
+import { HorizontalDivider, Pagination, Select, Tabs } from '@tih/ui';
+
+import CurrencySelector from '~/components/offers/util/currency/CurrencySelector';
+
+type TableRow = {
+ company: string;
+ date: string;
+ salary: string;
+ title: string;
+ yoe: string;
+};
+
+// eslint-disable-next-line no-shadow
+enum YOE_CATEGORY {
+ INTERN = 0,
+ ENTRY = 1,
+ MID = 2,
+ SENIOR = 3,
+}
+
+export default function OffersTable() {
+ const [currency, setCurrency] = useState('SGD');
+ const [selectedTab, setSelectedTab] = useState(YOE_CATEGORY.ENTRY);
+ const [selectedPage, setSelectedPage] = useState(1);
+
+ function renderTabs() {
+ return (
+
+
+ setSelectedTab(value)}
+ />
+
+
+
+ All offers in
+ setCurrency(value)}
+ selectedCurrency={currency}
+ />
+
+
+
+ {[
+ 'Company',
+ 'Title',
+ 'YOE',
+ 'TC/year',
+ 'Date offered',
+ 'Actions',
+ ].map((header) => (
+ |
+ {header}
+ |
+ ))}
+
+
+ );
+ }
+
+ function renderRow({ company, title, yoe, salary, date }: TableRow) {
+ return (
+
+ |
+ {company}
+ |
+ {title} |
+ {yoe} |
+ {salary} |
+ {date} |
+
+
+ View Profile
+
+
+ Comment
+
+ |
+
+ );
+ }
+
+ function renderPagination() {
+ return (
+
+ );
+ }
+
+ return (
+
+ {renderTabs()}
+
+
+ {renderFilters()}
+
+ {renderHeader()}
+
+ {renderRow({
+ company: 'Shopee',
+ date: 'May 2022',
+ salary: 'TC/yr',
+ title: 'SWE',
+ yoe: '5',
+ })}
+ {renderRow({
+ company: 'Shopee',
+ date: 'May 2022',
+ salary: 'TC/yr',
+ title: 'SWE',
+ yoe: '5',
+ })}
+
+
+ {renderPagination()}
+
+
Offers Research
;
+ return (
+ <>
+
+
+ Tech Handbook Offers Repo
+
+
+
+ Reveal profile stories behind offers
+
+
+ Benchmark your offers and profiles, learn from other's offer profile,
+ and discuss with the community
+
+
+ );
}
diff --git a/apps/portal/src/components/offers/constants.ts b/apps/portal/src/components/offers/constants.ts
new file mode 100644
index 00000000..2a09e9b5
--- /dev/null
+++ b/apps/portal/src/components/offers/constants.ts
@@ -0,0 +1,136 @@
+import { EducationBackgroundType } from './types';
+
+const emptyOption = {
+ label: '----',
+ value: '',
+};
+
+// TODO: use enums
+export const titleOptions = [
+ emptyOption,
+ {
+ label: 'Software engineer',
+ value: 'Software engineer',
+ },
+ {
+ label: 'Frontend engineer',
+ value: 'Frontend engineer',
+ },
+ {
+ label: 'Backend engineer',
+ value: 'Backend engineer',
+ },
+ {
+ label: 'Full-stack engineer',
+ value: 'Full-stack engineer',
+ },
+];
+
+export const companyOptions = [
+ emptyOption,
+ {
+ label: 'Bytedance',
+ value: 'id-abc123',
+ },
+ {
+ label: 'Google',
+ value: 'id-abc567',
+ },
+ {
+ label: 'Meta',
+ value: 'id-abc456',
+ },
+ {
+ label: 'Shopee',
+ value: 'id-abc345',
+ },
+ {
+ label: 'Tik Tok',
+ value: 'id-abc678',
+ },
+];
+
+export const locationOptions = [
+ emptyOption,
+ {
+ label: 'Singapore, Singapore',
+ value: 'Singapore, Singapore',
+ },
+ {
+ label: 'New York, US',
+ value: 'New York, US',
+ },
+ {
+ label: 'San Francisco, US',
+ value: 'San Francisco, US',
+ },
+];
+
+export const internshipCycleOptions = [
+ emptyOption,
+ {
+ label: 'Summer',
+ value: 'Summer',
+ },
+ {
+ label: 'Winter',
+ value: 'Winter',
+ },
+ {
+ label: 'Spring',
+ value: 'Spring',
+ },
+ {
+ label: 'Fall',
+ value: 'Fall',
+ },
+ {
+ label: 'Full year',
+ value: 'Full year',
+ },
+];
+
+export const yearOptions = [
+ emptyOption,
+ {
+ label: '2021',
+ value: '2021',
+ },
+ {
+ label: '2022',
+ value: '2022',
+ },
+ {
+ label: '2023',
+ value: '2023',
+ },
+ {
+ label: '2024',
+ value: '2024',
+ },
+];
+
+const educationBackgroundTypes = Object.entries(EducationBackgroundType).map(
+ ([key, value]) => ({
+ label: key,
+ value,
+ }),
+);
+
+export const educationLevelOptions = [emptyOption, ...educationBackgroundTypes];
+
+export const educationFieldOptions = [
+ emptyOption,
+ {
+ label: 'Computer Science',
+ value: 'Computer Science',
+ },
+ {
+ label: 'Information Security',
+ value: 'Information Security',
+ },
+ {
+ label: 'Business Analytics',
+ value: 'Business Analytics',
+ },
+];
diff --git a/apps/portal/src/components/offers/forms/BackgroundForm.tsx b/apps/portal/src/components/offers/forms/BackgroundForm.tsx
new file mode 100644
index 00000000..0acbbe69
--- /dev/null
+++ b/apps/portal/src/components/offers/forms/BackgroundForm.tsx
@@ -0,0 +1,288 @@
+import { useFormContext, useWatch } from 'react-hook-form';
+import { Collapsible, RadioList } from '@tih/ui';
+
+import FormRadioList from './FormRadioList';
+import FormSelect from './FormSelect';
+import FormTextInput from './FormTextInput';
+import {
+ companyOptions,
+ educationFieldOptions,
+ educationLevelOptions,
+ locationOptions,
+ titleOptions,
+} from '../constants';
+import { JobType } from '../types';
+import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum';
+
+function YoeSection() {
+ const { register } = useFormContext();
+ return (
+ <>
+
+ Years of Experience (YOE)
+
+
+
+
+ );
+}
+
+function FullTimeJobFields() {
+ const { register } = useFormContext();
+ return (
+ <>
+
+
+
+
+
+
+ }
+ endAddOnType="element"
+ label="Total Compensation (Annual)"
+ placeholder="0.00"
+ startAddOn="$"
+ startAddOnType="label"
+ type="number"
+ {...register(`background.experience.totalCompensation.value`)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function InternshipJobFields() {
+ const { register } = useFormContext();
+ return (
+ <>
+
+
+
+
+
+
+ }
+ endAddOnType="element"
+ label="Salary (Monthly)"
+ placeholder="0.00"
+ startAddOn="$"
+ startAddOnType="label"
+ type="number"
+ {...register(`background.experience.monthlySalary.value`)}
+ />
+
+
+
+
+
+
+
+
+ );
+}
+
+function CurrentJobSection() {
+ const { register } = useFormContext();
+ const watchJobType = useWatch({
+ defaultValue: JobType.FullTime,
+ name: 'background.experience.jobType',
+ });
+
+ return (
+ <>
+
+ Current / Previous Job
+
+
+
+
+
+
+
+
+ {watchJobType === JobType.FullTime ? (
+
+ ) : (
+
+ )}
+
+ Education
+
+
+
+ );
+}
+
+export default function BackgroundForm() {
+ return (
+
+
+ Help us better gauge your offers
+
+
+ This section is optional, but your background information helps us
+ benchmark your offers.
+
+
+
+
+
+
+