From 670777474bdc18fec09faf33b0abffbf6aae9dcc Mon Sep 17 00:00:00 2001
From: Zhang Ziqing <zhangziqing9926@gmail.com>
Date: Sun, 9 Oct 2022 23:30:20 +0800
Subject: [PATCH] [offers][feat] add offer table and profile view

commit 3ad2f6bf3bafdd91072b21aac8c19f146594566e
Author: Zhang Ziqing <zhangziqing9926@gmail.com>
Date:   Sun Oct 9 23:22:38 2022 +0800

    [offers][feat] add offer table

commit 78e1eb81bdcc44dfd131e5379e6909b338ae9d80
Author: Zhang Ziqing <zhangziqing9926@gmail.com>
Date:   Sun Oct 9 17:17:46 2022 +0800

    [offers][feat] add offer profile tab and background tab component
---
 .../src/components/offers/OffersNavigation.ts |  17 +-
 .../src/components/offers/OffersTable.tsx     | 190 +++++++++++++
 .../offers/profile/EducationCard.tsx          |  60 ++++
 .../components/offers/profile/OfferCard.tsx   | 124 +++++++++
 .../offers/profile/ProfilePhotoHolder.tsx     |  12 +
 .../offers/util/currency/CurrencyEnum.tsx     | 172 ++++++++++++
 .../offers/util/currency/CurrencySelector.tsx |  30 ++
 .../src/components/offers/util/time/index.tsx |   7 +
 apps/portal/src/pages/offers/index.tsx        |   4 +-
 .../pages/offers/profile/[offerProfileId].tsx | 256 ++++++++++++++++++
 10 files changed, 857 insertions(+), 15 deletions(-)
 create mode 100644 apps/portal/src/components/offers/OffersTable.tsx
 create mode 100644 apps/portal/src/components/offers/profile/EducationCard.tsx
 create mode 100644 apps/portal/src/components/offers/profile/OfferCard.tsx
 create mode 100644 apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
 create mode 100644 apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx
 create mode 100644 apps/portal/src/components/offers/util/currency/CurrencySelector.tsx
 create mode 100644 apps/portal/src/components/offers/util/time/index.tsx
 create mode 100644 apps/portal/src/pages/offers/profile/[offerProfileId].tsx

diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
index c6d47806..8e020e4c 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: '/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 (
+      <div className="flex justify-center">
+        <div className="w-fit">
+          <Tabs
+            label="Table Navigation"
+            tabs={[
+              {
+                label: 'Fresh Grad (0-3 YOE)',
+                value: YOE_CATEGORY.ENTRY,
+              },
+              {
+                label: 'Mid (4-7 YOE)',
+                value: YOE_CATEGORY.MID,
+              },
+              {
+                label: 'Senior (8+ YOE)',
+                value: YOE_CATEGORY.SENIOR,
+              },
+              {
+                label: 'Internship',
+                value: YOE_CATEGORY.INTERN,
+              },
+            ]}
+            value={selectedTab}
+            onChange={(value) => setSelectedTab(value)}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  function renderFilters() {
+    return (
+      <div className="m-4 flex items-center justify-between">
+        <div className="justify-left flex items-center space-x-2">
+          <span>All offers in</span>
+          <CurrencySelector
+            handleCurrencyChange={(value: string) => setCurrency(value)}
+            selectedCurrency={currency}
+          />
+        </div>
+        <Select
+          disabled={true}
+          isLabelHidden={true}
+          label=""
+          options={[
+            {
+              label: 'Latest Submitted',
+              value: 'latest-submitted',
+            },
+          ]}
+          value="latest-submitted"
+        />
+      </div>
+    );
+  }
+
+  function renderHeader() {
+    return (
+      <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          {[
+            'Company',
+            'Title',
+            'YOE',
+            'TC/year',
+            'Date offered',
+            'Actions',
+          ].map((header) => (
+            <th key={header} className="py-3 px-6" scope="col">
+              {header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+    );
+  }
+
+  function renderRow({ company, title, yoe, salary, date }: TableRow) {
+    return (
+      <tr className="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
+        <th
+          className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white"
+          scope="row">
+          {company}
+        </th>
+        <td className="py-4 px-6">{title}</td>
+        <td className="py-4 px-6">{yoe}</td>
+        <td className="py-4 px-6">{salary}</td>
+        <td className="py-4 px-6">{date}</td>
+        <td className="space-x-4 py-4 px-6">
+          <a
+            className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"
+            href="#">
+            View Profile
+          </a>
+          <a
+            className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"
+            href="#">
+            Comment
+          </a>
+        </td>
+      </tr>
+    );
+  }
+
+  function renderPagination() {
+    return (
+      <nav
+        aria-label="Table navigation"
+        className="flex items-center justify-between p-4">
+        <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
+          Showing{' '}
+          <span className="font-semibold text-gray-900 dark:text-white">
+            1-10
+          </span>{' '}
+          of{' '}
+          <span className="font-semibold text-gray-900 dark:text-white">
+            1000
+          </span>
+        </span>
+        <Pagination
+          current={selectedPage}
+          end={10}
+          label="Pagination"
+          pagePadding={1}
+          start={1}
+          onSelect={(page) => setSelectedPage(page)}
+        />
+      </nav>
+    );
+  }
+
+  return (
+    <div className="w-5/6">
+      {renderTabs()}
+      <HorizontalDivider />
+      <div className="relative w-full overflow-x-auto shadow-md sm:rounded-lg">
+        {renderFilters()}
+        <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
+          {renderHeader()}
+          <tbody>
+            {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',
+            })}
+          </tbody>
+        </table>
+        {renderPagination()}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/profile/EducationCard.tsx b/apps/portal/src/components/offers/profile/EducationCard.tsx
new file mode 100644
index 00000000..603c74cd
--- /dev/null
+++ b/apps/portal/src/components/offers/profile/EducationCard.tsx
@@ -0,0 +1,60 @@
+import {
+  BuildingLibraryIcon,
+  LightBulbIcon,
+} from '@heroicons/react/24/outline';
+
+// To be replaced by form enums
+// eslint-disable-next-line no-shadow
+export enum EducationBackgroundType {
+  Bachelor = 'Bachelor',
+  Diploma = 'Diploma',
+  Masters = 'Masters',
+  PhD = 'PhD',
+  Professional = 'Professional',
+  Seconday = 'Secondary',
+  SelfTaught = 'Self-taught',
+}
+
+type EducationEntity = {
+  backgroundType?: EducationBackgroundType;
+  field?: string;
+  fromMonth?: string;
+  school?: string;
+  toMonth?: string;
+};
+
+type Props = Readonly<{
+  education: EducationEntity;
+}>;
+
+export default function EducationCard({
+  education: { backgroundType, field, fromMonth, school, toMonth },
+}: Props) {
+  return (
+    <div className="mx-8 my-4 block rounded-lg bg-white py-4 shadow-md">
+      <div className="flex justify-between px-8">
+        <div className="flex flex-col">
+          <div className="flex flex-row">
+            <LightBulbIcon className="mr-1 h-5" />
+            <span className="ml-1 font-bold">
+              {field
+                ? `${backgroundType ?? 'N/A'}, ${field}`
+                : backgroundType ?? `N/A`}
+            </span>
+          </div>
+          {school && (
+            <div className="flex flex-row">
+              <BuildingLibraryIcon className="mr-1 h-5" />
+              <span className="ml-1">{school}</span>
+            </div>
+          )}
+        </div>
+        {(fromMonth || toMonth) && (
+          <div className="font-light text-gray-400">
+            <p>{`${fromMonth ?? 'N/A'} - ${toMonth ?? 'N/A'}`}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
new file mode 100644
index 00000000..875c38db
--- /dev/null
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -0,0 +1,124 @@
+import {
+  BuildingOffice2Icon,
+  ChatBubbleBottomCenterTextIcon,
+  CurrencyDollarIcon,
+  ScaleIcon,
+} from '@heroicons/react/24/outline';
+import { HorizontalDivider } from '@tih/ui';
+
+type OfferEntity = {
+  base?: string;
+  bonus?: string;
+  companyName: string;
+  duration?: string; // For background
+  jobLevel?: string;
+  jobTitle: string;
+  location: string;
+  monthlySalary?: string;
+  negotiationStrategy?: string;
+  otherComment?: string;
+  receivedMonth: string;
+  stocks?: string;
+  totalCompensation?: string;
+};
+
+type Props = Readonly<{
+  offer: OfferEntity;
+}>;
+
+export default function OfferCard({
+  offer: {
+    companyName = 'Meta',
+    jobTitle = 'Senior Engineer',
+    jobLevel,
+    location = 'Singapore',
+    receivedMonth = 'Jun 2021',
+    totalCompensation = '350.1k',
+    base = '0k',
+    stocks = '0k',
+    bonus = '0k',
+    duration,
+    monthlySalary,
+    negotiationStrategy,
+    otherComment,
+  },
+}: Props) {
+  function UpperSection() {
+    return (
+      <div className="flex justify-between px-8">
+        <div className="flex flex-col">
+          <div className="flex flex-row">
+            <BuildingOffice2Icon className="mr-1 h-5" />
+            <span className="font-bold">
+              {location ? `${companyName}, ${location}` : companyName}
+            </span>
+          </div>
+          <div className="ml-6 flex flex-row">
+            <p>{jobLevel ? `${jobTitle}, ${jobLevel}` : jobTitle}</p>
+          </div>
+        </div>
+        {receivedMonth && (
+          <div className="font-light text-gray-400">
+            <p>{receivedMonth}</p>
+          </div>
+        )}
+        {duration && (
+          <div className="font-light text-gray-400">
+            <p>{duration}</p>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  function BottomSection() {
+    return (
+      <div className="px-8">
+        <div className="flex flex-col py-2">
+          <div className="flex flex-row">
+            <CurrencyDollarIcon className="mr-1 h-5" />
+            <p>
+              {totalCompensation
+                ? `TC: ${totalCompensation}`
+                : `Monthly Salary: ${monthlySalary}`}
+            </p>
+          </div>
+
+          {totalCompensation && (
+            <div className="ml-6 flex flex-row font-light text-gray-400">
+              <p>
+                Base / year: {base} ⋅ Stocks / year: {stocks} ⋅ Bonus / year:{' '}
+                {bonus}
+              </p>
+            </div>
+          )}
+        </div>
+        {negotiationStrategy && (
+          <div className="flex flex-col py-2">
+            <div className="flex flex-row">
+              <ScaleIcon className="h-5 w-5" />
+              <span className="overflow-wrap ml-2">
+                "{negotiationStrategy}"
+              </span>
+            </div>
+          </div>
+        )}
+        {otherComment && (
+          <div className="flex flex-col py-2">
+            <div className="flex flex-row">
+              <ChatBubbleBottomCenterTextIcon className="h-8 w-8" />
+              <span className="overflow-wrap ml-2">"{otherComment}"</span>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div className="mx-8 my-4 block rounded-lg bg-white py-4 shadow-md">
+      <UpperSection />
+      <HorizontalDivider />
+      <BottomSection />
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx b/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
new file mode 100644
index 00000000..bb079e5a
--- /dev/null
+++ b/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
@@ -0,0 +1,12 @@
+export default function ProfilePhotoHolder() {
+  return (
+    <span className="inline-block h-16 w-16 overflow-hidden rounded-full bg-gray-100">
+      <svg
+        className="h-full w-full text-gray-300"
+        fill="currentColor"
+        viewBox="0 0 24 24">
+        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+      </svg>
+    </span>
+  );
+}
diff --git a/apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx b/apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx
new file mode 100644
index 00000000..7cfbc0cb
--- /dev/null
+++ b/apps/portal/src/components/offers/util/currency/CurrencyEnum.tsx
@@ -0,0 +1,172 @@
+// eslint-disable-next-line no-shadow
+export enum Currency {
+  AED = 'AED', // United Arab Emirates Dirham
+  AFN = 'AFN', // Afghanistan Afghani
+  ALL = 'ALL', // Albania Lek
+  AMD = 'AMD', // Armenia Dram
+  ANG = 'ANG', // Netherlands Antilles Guilder
+  AOA = 'AOA', // Angola Kwanza
+  ARS = 'ARS', // Argentina Peso
+  AUD = 'AUD', // Australia Dollar
+  AWG = 'AWG', // Aruba Guilder
+  AZN = 'AZN', // Azerbaijan New Manat
+  BAM = 'BAM', // Bosnia and Herzegovina Convertible Marka
+  BBD = 'BBD', // Barbados Dollar
+  BDT = 'BDT', // Bangladesh Taka
+  BGN = 'BGN', // Bulgaria Lev
+  BHD = 'BHD', // Bahrain Dinar
+  BIF = 'BIF', // Burundi Franc
+  BMD = 'BMD', // Bermuda Dollar
+  BND = 'BND', // Brunei Darussalam Dollar
+  BOB = 'BOB', // Bolivia Bolíviano
+  BRL = 'BRL', // Brazil Real
+  BSD = 'BSD', // Bahamas Dollar
+  BTN = 'BTN', // Bhutan Ngultrum
+  BWP = 'BWP', // Botswana Pula
+  BYR = 'BYR', // Belarus Ruble
+  BZD = 'BZD', // Belize Dollar
+  CAD = 'CAD', // Canada Dollar
+  CDF = 'CDF', // Congo/Kinshasa Franc
+  CHF = 'CHF', // Switzerland Franc
+  CLP = 'CLP', // Chile Peso
+  CNY = 'CNY', // China Yuan Renminbi
+  COP = 'COP', // Colombia Peso
+  CRC = 'CRC', // Costa Rica Colon
+  CUC = 'CUC', // Cuba Convertible Peso
+  CUP = 'CUP', // Cuba Peso
+  CVE = 'CVE', // Cape Verde Escudo
+  CZK = 'CZK', // Czech Republic Koruna
+  DJF = 'DJF', // Djibouti Franc
+  DKK = 'DKK', // Denmark Krone
+  DOP = 'DOP', // Dominican Republic Peso
+  DZD = 'DZD', // Algeria Dinar
+  EGP = 'EGP', // Egypt Pound
+  ERN = 'ERN', // Eritrea Nakfa
+  ETB = 'ETB', // Ethiopia Birr
+  EUR = 'EUR', // Euro Member Countries
+  FJD = 'FJD', // Fiji Dollar
+  FKP = 'FKP', // Falkland Islands (Malvinas) Pound
+  GBP = 'GBP', // United Kingdom Pound
+  GEL = 'GEL', // Georgia Lari
+  GGP = 'GGP', // Guernsey Pound
+  GHS = 'GHS', // Ghana Cedi
+  GIP = 'GIP', // Gibraltar Pound
+  GMD = 'GMD', // Gambia Dalasi
+  GNF = 'GNF', // Guinea Franc
+  GTQ = 'GTQ', // Guatemala Quetzal
+  GYD = 'GYD', // Guyana Dollar
+  HKD = 'HKD', // Hong Kong Dollar
+  HNL = 'HNL', // Honduras Lempira
+  HRK = 'HRK', // Croatia Kuna
+  HTG = 'HTG', // Haiti Gourde
+  HUF = 'HUF', // Hungary Forint
+  IDR = 'IDR', // Indonesia Rupiah
+  ILS = 'ILS', // Israel Shekel
+  IMP = 'IMP', // Isle of Man Pound
+  INR = 'INR', // India Rupee
+  IQD = 'IQD', // Iraq Dinar
+  IRR = 'IRR', // Iran Rial
+  ISK = 'ISK', // Iceland Krona
+  JEP = 'JEP', // Jersey Pound
+  JMD = 'JMD', // Jamaica Dollar
+  JOD = 'JOD', // Jordan Dinar
+  JPY = 'JPY', // Japan Yen
+  KES = 'KES', // Kenya Shilling
+  KGS = 'KGS', // Kyrgyzstan Som
+  KHR = 'KHR', // Cambodia Riel
+  KMF = 'KMF', // Comoros Franc
+  KPW = 'KPW', // Korea (North) Won
+  KRW = 'KRW', // Korea (South) Won
+  KWD = 'KWD', // Kuwait Dinar
+  KYD = 'KYD', // Cayman Islands Dollar
+  KZT = 'KZT', // Kazakhstan Tenge
+  LAK = 'LAK', // Laos Kip
+  LBP = 'LBP', // Lebanon Pound
+  LKR = 'LKR', // Sri Lanka Rupee
+  LRD = 'LRD', // Liberia Dollar
+  LSL = 'LSL', // Lesotho Loti
+  LYD = 'LYD', // Libya Dinar
+  MAD = 'MAD', // Morocco Dirham
+  MDL = 'MDL', // Moldova Leu
+  MGA = 'MGA', // Madagascar Ariary
+  MKD = 'MKD', // Macedonia Denar
+  MMK = 'MMK', // Myanmar (Burma) Kyat
+  MNT = 'MNT', // Mongolia Tughrik
+  MOP = 'MOP', // Macau Pataca
+  MRO = 'MRO', // Mauritania Ouguiya
+  MUR = 'MUR', // Mauritius Rupee
+  MVR = 'MVR', // Maldives (Maldive Islands) Rufiyaa
+  MWK = 'MWK', // Malawi Kwacha
+  MXN = 'MXN', // Mexico Peso
+  MYR = 'MYR', // Malaysia Ringgit
+  MZN = 'MZN', // Mozambique Metical
+  NAD = 'NAD', // Namibia Dollar
+  NGN = 'NGN', // Nigeria Naira
+  NIO = 'NIO', // Nicaragua Cordoba
+  NOK = 'NOK', // Norway Krone
+  NPR = 'NPR', // Nepal Rupee
+  NZD = 'NZD', // New Zealand Dollar
+  OMR = 'OMR', // Oman Rial
+  PAB = 'PAB', // Panama Balboa
+  PEN = 'PEN', // Peru Sol
+  PGK = 'PGK', // Papua New Guinea Kina
+  PHP = 'PHP', // Philippines Peso
+  PKR = 'PKR', // Pakistan Rupee
+  PLN = 'PLN', // Poland Zloty
+  PYG = 'PYG', // Paraguay Guarani
+  QAR = 'QAR', // Qatar Riyal
+  RON = 'RON', // Romania New Leu
+  RSD = 'RSD', // Serbia Dinar
+  RUB = 'RUB', // Russia Ruble
+  RWF = 'RWF', // Rwanda Franc
+  SAR = 'SAR', // Saudi Arabia Riyal
+  SBD = 'SBD', // Solomon Islands Dollar
+  SCR = 'SCR', // Seychelles Rupee
+  SDG = 'SDG', // Sudan Pound
+  SEK = 'SEK', // Sweden Krona
+  SGD = 'SGD', // Singapore Dollar
+  SHP = 'SHP', // Saint Helena Pound
+  SLL = 'SLL', // Sierra Leone Leone
+  SOS = 'SOS', // Somalia Shilling
+  SPL = 'SPL', // Seborga Luigino
+  SRD = 'SRD', // Suriname Dollar
+  STD = 'STD', // São Tomé and Príncipe Dobra
+  SVC = 'SVC', // El Salvador Colon
+  SYP = 'SYP', // Syria Pound
+  SZL = 'SZL', // Swaziland Lilangeni
+  THB = 'THB', // Thailand Baht
+  TJS = 'TJS', // Tajikistan Somoni
+  TMT = 'TMT', // Turkmenistan Manat
+  TND = 'TND', // Tunisia Dinar
+  TOP = 'TOP', // Tonga Pa'anga
+  TRY = 'TRY', // Turkey Lira
+  TTD = 'TTD', // Trinidad and Tobago Dollar
+  TVD = 'TVD', // Tuvalu Dollar
+  TWD = 'TWD', // Taiwan New Dollar
+  TZS = 'TZS', // Tanzania Shilling
+  UAH = 'UAH', // Ukraine Hryvnia
+  UGX = 'UGX', // Uganda Shilling
+  USD = 'USD', // United States Dollar
+  UYU = 'UYU', // Uruguay Peso
+  UZS = 'UZS', // Uzbekistan Som
+  VEF = 'VEF', // Venezuela Bolivar
+  VND = 'VND', // Viet Nam Dong
+  VUV = 'VUV', // Vanuatu Vatu
+  WST = 'WST', // Samoa Tala
+  XAF = 'XAF', // Communauté Financière Africaine (BEAC) CFA Franc BEAC
+  XCD = 'XCD', // East Caribbean Dollar
+  XDR = 'XDR', // International Monetary Fund (IMF) Special Drawing Rights
+  XOF = 'XOF', // Communauté Financière Africaine (BCEAO) Franc
+  XPF = 'XPF', // Comptoirs Français du Pacifique (CFP) Franc
+  YER = 'YER', // Yemen Rial
+  ZAR = 'ZAR', // South Africa Rand
+  ZMW = 'ZMW', // Zambia Kwacha
+  ZWD = 'ZWD', // Zimbabwe Dollar
+}
+
+export const CURRENCY_OPTIONS = Object.entries(Currency).map(
+  ([key, value]) => ({
+    label: key,
+    value,
+  }),
+);
diff --git a/apps/portal/src/components/offers/util/currency/CurrencySelector.tsx b/apps/portal/src/components/offers/util/currency/CurrencySelector.tsx
new file mode 100644
index 00000000..2ebe5bd5
--- /dev/null
+++ b/apps/portal/src/components/offers/util/currency/CurrencySelector.tsx
@@ -0,0 +1,30 @@
+import { Select } from '@tih/ui';
+
+import { Currency } from '~/components/offers/util/currency/CurrencyEnum';
+
+const currencyOptions = Object.entries(Currency).map(([key, value]) => ({
+  label: key,
+  value,
+}));
+
+type Props = Readonly<{
+  handleCurrencyChange: (currency: string) => void;
+  selectedCurrency: string;
+}>;
+
+export default function CurrencySelector({
+  selectedCurrency,
+  handleCurrencyChange,
+}: Props) {
+  return (
+    <Select
+      display="inline"
+      isLabelHidden={true}
+      label="Select fruit"
+      name=""
+      options={currencyOptions}
+      value={selectedCurrency}
+      onChange={(currency: string) => handleCurrencyChange(currency)}
+    />
+  );
+}
diff --git a/apps/portal/src/components/offers/util/time/index.tsx b/apps/portal/src/components/offers/util/time/index.tsx
new file mode 100644
index 00000000..86f21ab9
--- /dev/null
+++ b/apps/portal/src/components/offers/util/time/index.tsx
@@ -0,0 +1,7 @@
+export function formatDate(value: Date | number | string) {
+  const date = new Date(value);
+  //   Const day = date.toLocaleString('default', { day: '2-digit' });
+  const month = date.toLocaleString('default', { month: 'short' });
+  const year = date.toLocaleString('default', { year: 'numeric' });
+  return `${month} ${year}`;
+}
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index 4fa89c65..9fdb6fbe 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -1,10 +1,10 @@
-import OffersTitle from '~/components/offers/OffersTitle';
+import OffersTable from '~/components/offers/OffersTable';
 
 export default function OffersHomePage() {
   return (
     <main className="flex-1 overflow-y-auto">
       <div className="flex h-full items-center justify-center">
-        <OffersTitle />
+        <OffersTable />
       </div>
     </main>
   );
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
new file mode 100644
index 00000000..487e3d3d
--- /dev/null
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -0,0 +1,256 @@
+import { useState } from 'react';
+import {
+  AcademicCapIcon,
+  BookmarkSquareIcon,
+  BriefcaseIcon,
+  BuildingOffice2Icon,
+  CalendarDaysIcon,
+  ClipboardDocumentIcon,
+  PencilSquareIcon,
+  ShareIcon,
+  TrashIcon,
+} from '@heroicons/react/24/outline';
+import { Button, Dialog, Tabs } from '@tih/ui';
+
+import { EducationBackgroundType } from '~/components/offers/profile/EducationCard';
+import EducationCard from '~/components/offers/profile/EducationCard';
+import OfferCard from '~/components/offers/profile/OfferCard';
+import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
+
+export default function OfferProfile() {
+  const [selectedTab, setSelectedTab] = useState('offers');
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  function renderActionList() {
+    return (
+      <div className="space-x-2">
+        <Button
+          icon={BookmarkSquareIcon}
+          isLabelHidden={true}
+          label="Save to user account"
+          size="md"
+          variant="tertiary"
+        />
+        <Button
+          icon={PencilSquareIcon}
+          isLabelHidden={true}
+          label="Edit"
+          size="md"
+          variant="tertiary"
+        />
+        <Button
+          icon={TrashIcon}
+          isLabelHidden={true}
+          label="Delete"
+          size="md"
+          variant="tertiary"
+          onClick={() => setIsDialogOpen(true)}
+        />
+        {isDialogOpen && (
+          <Dialog
+            isShown={isDialogOpen}
+            primaryButton={
+              <Button
+                display="block"
+                label="Delete"
+                variant="primary"
+                onClick={() => setIsDialogOpen(false)}
+              />
+            }
+            secondaryButton={
+              <Button
+                display="block"
+                label="Cancel"
+                variant="tertiary"
+                onClick={() => setIsDialogOpen(false)}
+              />
+            }
+            title="Are you sure you want to delete this offer profile?"
+            onClose={() => setIsDialogOpen(false)}>
+            <div>
+              All comments will gone. You will not be able to access or recover
+              it.
+            </div>
+          </Dialog>
+        )}
+      </div>
+    );
+  }
+  function ProfileHeader() {
+    return (
+      <div className="relative h-40 bg-white p-4">
+        <div className="justify-left flex h-1/2">
+          <div className="mx-4 mt-2">
+            <ProfilePhotoHolder />
+          </div>
+          <div className="w-full">
+            <div className="justify-left flex ">
+              <h2 className="flex w-4/5 text-2xl font-bold">anonymised-name</h2>
+              <div className="flex h-8 w-1/5 justify-end">
+                {renderActionList()}
+              </div>
+            </div>
+            <div className="flex flex-row">
+              <BuildingOffice2Icon className="mr-2.5 h-5" />
+              <span className="mr-2 font-bold">Current:</span>
+              <span>Level 4 Google</span>
+            </div>
+            <div className="flex flex-row">
+              <CalendarDaysIcon className="mr-2.5 h-5" />
+              <span className="mr-2 font-bold">YOE:</span>
+              <span>4</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="absolute left-8 bottom-1 content-center">
+          <Tabs
+            label="Profile Detail Navigation"
+            tabs={[
+              {
+                label: 'Offers',
+                value: 'offers',
+              },
+              {
+                label: 'Background',
+                value: 'background',
+              },
+              {
+                label: 'Offer Engine Analysis',
+                value: 'offerEngineAnalysis',
+              },
+            ]}
+            value={selectedTab}
+            onChange={(value) => setSelectedTab(value)}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  function ProfileDetails() {
+    if (selectedTab === 'offers') {
+      return (
+        <>
+          {[
+            {
+              base: undefined,
+              bonus: undefined,
+              companyName: 'Meta',
+              id: 1,
+              jobLevel: 'G5',
+              jobTitle: 'Software Engineer',
+              location: 'Singapore',
+              monthlySalary: undefined,
+              negotiationStrategy:
+                'Nostrud nulla aliqua deserunt commodo id aute.',
+              otherComment:
+                'Pariatur ut est voluptate incididunt consequat do veniam quis irure adipisicing. Deserunt laborum dolor quis voluptate enim.',
+              receivedMonth: 'Jun 2022',
+              stocks: undefined,
+              totalCompensation: undefined,
+            },
+            {
+              companyName: 'Meta',
+              id: 2,
+              jobLevel: 'G5',
+              jobTitle: 'Software Engineer',
+              location: 'Singapore',
+              receivedMonth: 'Jun 2022',
+            },
+            {
+              companyName: 'Meta',
+              id: 3,
+              jobLevel: 'G5',
+              jobTitle: 'Software Engineer',
+              location: 'Singapore',
+              receivedMonth: 'Jun 2022',
+            },
+          ].map((offer) => (
+            <OfferCard key={offer.id} offer={offer} />
+          ))}
+        </>
+      );
+    }
+    if (selectedTab === 'background') {
+      return (
+        <>
+          <div className="mx-8 my-4 flex flex-row">
+            <BriefcaseIcon className="mr-1 h-5" />
+            <span className="font-bold">Work Experience</span>
+          </div>
+          <OfferCard
+            offer={{
+              base: undefined,
+              bonus: undefined,
+              companyName: 'Prefer not to say',
+              jobLevel: 'G4',
+              jobTitle: 'N/A',
+              location: '',
+              monthlySalary: '1,400k',
+              receivedMonth: '',
+              stocks: undefined,
+              totalCompensation: undefined,
+            }}
+          />
+          <div className="mx-8 my-4 flex flex-row">
+            <AcademicCapIcon className="mr-1 h-5" />
+            <span className="font-bold">Education</span>
+          </div>
+          <EducationCard
+            education={{
+              backgroundType: EducationBackgroundType.Bachelor,
+              field: 'CS',
+              fromMonth: 'Aug 2019',
+              school: 'NUS',
+              toMonth: 'May 2021',
+            }}
+          />
+        </>
+      );
+    }
+    return <div>Detail page for {selectedTab}</div>;
+  }
+
+  function ProfileComments() {
+    return (
+      <div className="m-4">
+        <div className="flex-end flex justify-end space-x-4">
+          <Button
+            addonPosition="start"
+            icon={ClipboardDocumentIcon}
+            isLabelHidden={false}
+            label="Copy profile edit link"
+            size="sm"
+            variant="secondary"
+          />
+          <Button
+            addonPosition="start"
+            icon={ShareIcon}
+            isLabelHidden={false}
+            label="Copy public link"
+            size="sm"
+            variant="secondary"
+          />
+        </div>
+        <h2 className="mt-2 text-2xl font-bold">
+          Discussions feature coming soon
+        </h2>
+        {/* <TextArea label="Comment" placeholder="Type your comment here" /> */}
+      </div>
+    );
+  }
+
+  return (
+    <div className="mb-4 flex flex h-screen w-screen items-center justify-center divide-x">
+      <div className="h-full w-2/3 divide-y">
+        <ProfileHeader />
+        <div className="h-4/5 w-full overflow-y-scroll pb-32">
+          <ProfileDetails />
+        </div>
+      </div>
+      <div className="h-full w-1/3 bg-white">
+        <ProfileComments />
+      </div>
+    </div>
+  );
+}