feat(FE-195): set expense table column header and cell

src/components/pages/expense/ExpensesTable.tsx

@@ -14,10 +14,11 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
-import { cn } from '@/lib/helper';
+import { cn, formatCurrency } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -32,53 +33,42 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   return (
-    <div
+    <RowOptionsMenuWrapper type={type}>
-      tabIndex={type === 'dropdown' ? 0 : undefined}
+      <Button
-      className={cn(
+        href={`/expense/detail/?expenseId=${props.row.original.id}`}
-        {
+        variant='ghost'
-          'dropdown-content': type === 'dropdown',
+        color='primary'
-          'mt-2': type === 'collapse',
+        className='justify-start text-sm'
-        },
+      >
-        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
-      )}
+        Detail
-    >
+      </Button>
-      <div className='flex flex-col gap-1'>
-        <Button
-          href={`/expense/detail/?expenseId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
 
-        <Button
+      <Button
-          href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+        href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
-          variant='ghost'
+        variant='ghost'
-          color='warning'
+        color='warning'
-          className='justify-start text-sm'
+        className='justify-start text-sm'
-        >
+      >
-          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-          Edit
+        Edit
-        </Button>
+      </Button>
 
-        <Button
+      <Button
-          onClick={deleteClickHandler}
+        onClick={deleteClickHandler}
-          variant='ghost'
+        variant='ghost'
-          color='error'
+        color='error'
-          className='text-error hover:text-inherit'
+        className='text-error hover:text-inherit'
-        >
+      >
-          <Icon
+        <Icon
-            icon='material-symbols:delete-outline-rounded'
+          icon='material-symbols:delete-outline-rounded'
-            width={16}
+          width={16}
-            height={16}
+          height={16}
-            className='justify-start text-sm'
+          className='justify-start text-sm'
-          />
+        />
-          Delete
+        Delete
-        </Button>
+      </Button>
-      </div>
+    </RowOptionsMenuWrapper>
-    </div>
   );
 };
 
@@ -121,8 +111,64 @@ const ExpensesTable = () => {
         1,
     },
     {
-      accessorKey: 'name',
+      accessorKey: 'transaction_date',
-      header: 'Nama',
+      header: 'Tanggal Pengajuan',
+    },
+    {
+      accessorKey: 'realization_date',
+      header: 'Tanggal Realisasi',
+      cell: (props) => props.getValue() ?? '-',
+    },
+    {
+      accessorKey: 'location',
+      header: 'Lokasi',
+      cell: (props) => props.row.original.location.name ?? '-',
+    },
+    {
+      accessorFn: (row) => row.created_user.name ?? '-',
+      header: 'Nama Pengaju',
+    },
+    {
+      accessorFn: (row) => row.vendor.name ?? '-',
+      header: 'Vendor',
+    },
+    {
+      accessorKey: 'nominal',
+      header: 'Nominal',
+      cell: (props) =>
+        props.row.original.nominal
+          ? `Rp${formatCurrency(props.row.original.nominal)}`
+          : '-',
+    },
+    {
+      accessorKey: 'paid',
+      header: 'Sudah Bayar',
+      cell: (props) =>
+        props.row.original.paid
+          ? `Rp${formatCurrency(props.row.original.paid)}`
+          : '-',
+    },
+    {
+      accessorKey: 'remaining_cost',
+      header: 'Sisa Bayar',
+      cell: (props) =>
+        props.row.original.remaining_cost
+          ? `Rp${formatCurrency(props.row.original.remaining_cost)}`
+          : '-',
+    },
+    {
+      header: 'Status Pencairan',
+      cell: (props) => {
+        // TODO: integrate this to API
+        return 'test';
+      },
+    },
+    {
+      header: 'Status BOP',
+      cell: (props) => {
+        // TODO: integrate this to API
+        return 'test';
+      },
     },
     {
       header: 'Aksi',
@@ -203,10 +249,15 @@ const ExpensesTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
+            <div className='w-full flex flex-row'>
-              <Button href='/expense/add' color='primary'>
+              <Button
+                href='/expense/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Biaya Operasional
+                Tambah
               </Button>
             </div>
 
@@ -265,7 +316,7 @@ const ExpensesTable = () => {
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data biaya operasional ini (${selectedExpense?.name})?`}
+        text='Apakah anda yakin ingin menghapus data biaya operasional ini?'
         secondaryButton={{
           text: 'Tidak',
         }}