[offers][fix] fix list some offer frontend

apps/portal/src/components/offers/table/OffersRow.tsx

@@ -1,11 +1,13 @@
 import Link from 'next/link';
 
-import type { OfferTableRowData } from '~/components/offers/table/types';
+import type { DashboardOffer } from '../../../types/offers';
+import { convertCurrencyToString } from '../../../utils/offers/currency';
+import { formatDate } from '../../../utils/offers/time';
 
-export type OfferTableRowProps = Readonly<{ row: OfferTableRowData }>;
+export type OfferTableRowProps = Readonly<{ row: DashboardOffer }>;
 
 export default function OfferTableRow({
-  row: { company, date, id, profileId, salary, title, yoe },
+  row: { company, id, income, monthYearReceived, profileId, title, totalYoe },
 }: OfferTableRowProps) {
   return (
     <tr
@@ -14,12 +16,12 @@ export default function OfferTableRow({
       <th
         className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white"
         scope="row">
-        {company}
+        {company.name}
       </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="py-4 px-6">{totalYoe}</td>
+      <td className="py-4 px-6">{convertCurrencyToString(income)}</td>
+      <td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
       <td className="space-x-4 py-4 px-6">
         <Link
           className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"

apps/portal/src/components/offers/table/OffersTable.tsx

@@ -2,18 +2,15 @@ import { useEffect, useState } from 'react';
 import { HorizontalDivider, Select, Spinner, Tabs } from '@tih/ui';
 
 import OffersTablePagination from '~/components/offers/table/OffersTablePagination';
-import type {
-  OfferTableRowData,
-  PaginationType,
-} from '~/components/offers/table/types';
 import { YOE_CATEGORY } from '~/components/offers/table/types';
 
 import CurrencySelector from '~/utils/offers/currency/CurrencySelector';
-import { formatDate } from '~/utils/offers/time';
 import { trpc } from '~/utils/trpc';
 
 import OffersRow from './OffersRow';
 
+import type { DashboardOffer, Paging } from '~/types/offers';
+
 const NUMBER_OF_OFFERS_IN_PAGE = 10;
 export type OffersTableProps = Readonly<{
   companyFilter: string;
@@ -25,18 +22,18 @@ export default function OffersTable({
 }: OffersTableProps) {
   const [currency, setCurrency] = useState('SGD'); // TODO: Detect location
   const [selectedTab, setSelectedTab] = useState(YOE_CATEGORY.ENTRY);
-  const [pagination, setPagination] = useState<PaginationType>({
-    currentPage: 1,
-    numOfItems: 1,
+  const [pagination, setPagination] = useState<Paging>({
+    currentPage: 0,
+    numOfItems: 0,
     numOfPages: 0,
     totalItems: 0,
   });
-  const [offers, setOffers] = useState<Array<OfferTableRowData>>([]);
+  const [offers, setOffers] = useState<Array<DashboardOffer>>([]);
 
   useEffect(() => {
     setPagination({
-      currentPage: 1,
-      numOfItems: 1,
+      currentPage: 0,
+      numOfItems: 0,
       numOfPages: 0,
       totalItems: 0,
     });
@@ -48,7 +45,7 @@ export default function OffersTable({
         companyId: companyFilter,
         limit: NUMBER_OF_OFFERS_IN_PAGE,
         location: 'Singapore, Singapore', // TODO: Geolocation
-        offset: pagination.currentPage - 1,
+        offset: 0,
         sortBy: '-monthYearReceived',
         title: jobTitleFilter,
         yoeCategory: selectedTab,
@@ -56,28 +53,19 @@ export default function OffersTable({
     ],
     {
       onSuccess: (response) => {
-        const filteredData = response.data.map((res) => {
-          return {
-            company: res.company.name,
-            date: formatDate(res.monthYearReceived),
-            id: res.OffersFullTime
-              ? res.OffersFullTime!.id
-              : res.OffersIntern!.id,
-            profileId: res.profileId,
-            salary: res.OffersFullTime
-              ? res.OffersFullTime?.totalCompensation.value
-              : res.OffersIntern?.monthlySalary.value,
-            title: res.OffersFullTime ? res.OffersFullTime?.level : '',
-            yoe: 100,
-          };
-        });
-        setOffers(filteredData);
-        setPagination({
-          currentPage: response.paging.currentPage + 1,
-          numOfItems: response.paging.numOfItems,
-          numOfPages: response.paging.numOfPages,
-          totalItems: response.paging.totalItems,
-        });
+        // Const filteredData = response.data.map((res) => {
+        //   return {
+        //     company: res.company.name,
+        //     date: res.monthYearReceived,
+        //     id: res.id,
+        //     profileId: res.profileId,
+        //     income: res.income,
+        //     title: res.title,
+        //     yoe: res.totalYoe,
+        //   };
+        // });
+        setOffers(response.data);
+        setPagination(response.paging);
       },
     },
   );
@@ -90,15 +78,15 @@ export default function OffersTable({
             label="Table Navigation"
             tabs={[
               {
-                label: 'Fresh Grad (0-3 YOE)',
+                label: 'Fresh Grad (0-2 YOE)',
                 value: YOE_CATEGORY.ENTRY,
               },
               {
-                label: 'Mid (4-7 YOE)',
+                label: 'Mid (3-5 YOE)',
                 value: YOE_CATEGORY.MID,
               },
               {
-                label: 'Senior (8+ YOE)',
+                label: 'Senior (6+ YOE)',
                 value: YOE_CATEGORY.SENIOR,
               },
               {
@@ -187,14 +175,11 @@ export default function OffersTable({
         )}
         <OffersTablePagination
           endNumber={
-            (pagination.currentPage - 1) * NUMBER_OF_OFFERS_IN_PAGE +
-            offers.length
+            pagination.currentPage * NUMBER_OF_OFFERS_IN_PAGE + offers.length
           }
           handlePageChange={handlePageChange}
           pagination={pagination}
-          startNumber={
-            (pagination.currentPage - 1) * NUMBER_OF_OFFERS_IN_PAGE + 1
-          }
+          startNumber={pagination.currentPage * NUMBER_OF_OFFERS_IN_PAGE + 1}
         />
       </div>
     </div>

apps/portal/src/components/offers/table/OffersTablePagination.tsx

@@ -1,11 +1,11 @@
 import { Pagination } from '@tih/ui';
 
-import type { PaginationType } from '~/components/offers/table/types';
+import type { Paging } from '~/types/offers';
 
 type OffersTablePaginationProps = Readonly<{
   endNumber: number;
   handlePageChange: (page: number) => void;
-  pagination: PaginationType;
+  pagination: Paging;
   startNumber: number;
 }>;
 
@@ -30,13 +30,13 @@ export default function OffersTablePagination({
         </span>
       </span>
       <Pagination
-        current={pagination.currentPage}
+        current={pagination.currentPage + 1}
         end={pagination.numOfPages}
         label="Pagination"
         pagePadding={1}
         start={1}
         onSelect={(currPage) => {
-          handlePageChange(currPage);
+          handlePageChange(currPage - 1);
         }}
       />
     </nav>

apps/portal/src/components/offers/table/types.ts

@@ -1,13 +1,3 @@
-export type OfferTableRowData = {
-  company: string;
-  date: string;
-  id: string;
-  profileId: string;
-  salary: number | undefined;
-  title: string;
-  yoe: number;
-};
-
 // eslint-disable-next-line no-shadow
 export enum YOE_CATEGORY {
   INTERN = 0,