refactor(FE): Add reference number column to ExpensesTable

src/components/pages/expense/ExpensesTable.tsx

@@ -276,6 +276,13 @@ const ExpensesTable = () => {
         );
       },
     },
+    {
+      accessorKey: 'reference_number',
+      header: 'Nomor Referensi',
+      cell: (props) => {
+        return props.row.original.reference_number ?? '-';
+      },
+    },
     {
       accessorKey: 'transaction_date',
       header: 'Tanggal Pengajuan',

src/components/pages/purchase/PurchaseTable.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { ChangeEventHandler, useCallback, useState } from 'react';
+import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
@@ -20,12 +21,16 @@ import StatusBadge from '@/components/helper/StatusBadge';
 
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
 
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Purchase } from '@/types/api/purchase/purchase';
 import { PurchaseApi } from '@/services/api/purchase';
+import { ExpenseApi } from '@/services/api/expense';
+import { Expense } from '@/types/api/expense';
 import { Color } from '@/types/theme';
+import Link from 'next/link';
 
 // ===== STATUS BADGE UTILITIES =====
 const statusTextMap: Record<string, string> = {
@@ -158,6 +163,33 @@ const PurchaseTable = () => {
     PurchaseApi.getAllFetcher
   );
 
+  const getKey = (
+    pageIndex: number,
+    previousPageData: BaseApiResponse<Expense>[] | null
+  ) => {
+    if (pageIndex > 0 && !previousPageData) return null;
+    return `${ExpenseApi.basePath}?page=${pageIndex + 1}&limit=100`;
+  };
+
+  const { data: expensesPages } = useSWRInfinite(
+    getKey,
+    ExpenseApi.getAllFetcher
+  );
+
+  const expenseMap = useMemo(() => {
+    const map = new Map<string, number>();
+    if (!expensesPages) return map;
+
+    expensesPages.forEach((page) => {
+      if (isResponseSuccess(page)) {
+        page.data.forEach((expense: Expense) => {
+          map.set(expense.reference_number, expense.id);
+        });
+      }
+    });
+    return map;
+  }, [expensesPages]);
+
   // ===== TABLE COLUMNS DEFINITION =====
   const purchaseColumns: ColumnDef<Purchase>[] = [
     {
@@ -167,6 +199,34 @@ const PurchaseTable = () => {
         return po_number ? po_number : pr_number;
       },
     },
+    {
+      accessorKey: 'po_expedition',
+      header: 'Ekspedisi PO',
+      cell: (props) => {
+        const poExpedition = props.row.original.po_expedition;
+        if (!poExpedition || poExpedition.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {poExpedition.map((exp, index) => {
+              const expenseId = expenseMap.get(exp.refrence);
+              if (expenseId) {
+                return (
+                  <li key={index}>
+                    <Link
+                      href={`/expense/detail/?expenseId=${expenseId}`}
+                      className='p-0 h-auto text-primary underline'
+                    >
+                      {exp.refrence}
+                    </Link>
+                  </li>
+                );
+              }
+              return <li key={index}>{exp.refrence}</li>;
+            })}
+          </ul>
+        );
+      },
+    },
     {
       accessorKey: 'supplier',
       header: 'Vendor',

src/types/api/purchase/purchase.d.ts

@@ -76,7 +76,7 @@ export type BasePurchase = {
   items?: PurchaseItem[];
   latest_approval?: BaseApproval;
   requester_name?: string;
-  po_expedition?: string[];
+  po_expedition?: { id: number; refrence: string }[];
   created_user?: CreatedUser;
   products?: PurchaseItemProduct[];
 };