feat(FE-337): slicing ui form finance and API integration

src/components/pages/finance/FinanceTable.tsx

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, useMemo, useState } from 'react';
-import { Row } from '@tanstack/react-table';
+import { CellContext, Row } from '@tanstack/react-table';
 import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
@@ -16,14 +16,118 @@ import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Table from '@/components/Table';
 import Tooltip from '@/components/Tooltip';
-import { formatCurrency, formatDate } from '@/lib/helper';
+import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Finance } from '@/types/api/finance/finance';
-import { ROWS_OPTIONS } from '@/config/constant';
+import {
+  FINANCE_INITIAL_BALANCE_STATUS,
+  FINANCE_INJECTION_STATUS,
+  FINANCE_TRANSACTION_STATUS,
+  ROWS_OPTIONS,
+} from '@/config/constant';
 import { FinanceApi } from '@/services/api/finance';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
 import { Bank } from '@/types/api/master-data/bank';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
+import { Icon } from '@iconify/react';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Finance, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.finance.transaction.detail'>
+        <Button
+          href={`/finance/detail?financeId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+
+      {FINANCE_TRANSACTION_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.payments.update'>
+          <Button
+            href={`/finance/detail/edit?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      {FINANCE_INITIAL_BALANCE_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.initial_balances.update'>
+          <Button
+            href={`/finance/detail/edit/initial-balance?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      {FINANCE_INJECTION_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.injections.update'>
+          <Button
+            href={`/finance/detail/edit/injection?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
+
+      <RequirePermission permissions='lti.finance.transaction.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
+  );
+};
 
 const FinanceTable = () => {
   const {
@@ -56,6 +160,7 @@ const FinanceTable = () => {
 
   // ===== State =====
   const [searchParams, setSearchParams] = useSearchParams();
+  const deleteModal = useModal();
   const [pendingFilters, setPendingFilters] = useState({
     search: '',
     transactionType: '',
@@ -72,6 +177,8 @@ const FinanceTable = () => {
     null
   );
   const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
+  const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   // ===== Fetch Data =====
   const {
@@ -79,7 +186,7 @@ const FinanceTable = () => {
     isLoading,
     mutate: refreshFinances,
   } = useSWR(
-    `${FinanceApi.basePath}${getTableFilterQueryString()}`,
+    `${FinanceApi.basePath}/transactions${getTableFilterQueryString()}`,
     FinanceApi.getAllFetcher
   );
 
@@ -193,6 +300,16 @@ const FinanceTable = () => {
     updateFilter('startDate', '');
     updateFilter('endDate', '');
   };
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FinanceApi.delete(selectedFinance?.id as number);
+    refreshFinances();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Finance!');
+    setIsDeleteLoading(false);
+  };
 
   const columns = useMemo(() => {
     return [
@@ -203,14 +320,30 @@ const FinanceTable = () => {
       {
         header: 'References Number',
         accessorKey: 'reference_number',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.reference_number;
+          return <span>{value ?? '-'}</span>;
+        },
       },
       {
         header: 'Jenis Transaksi',
         accessorKey: 'transaction_type',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.transaction_type
+            .split('_')
+            .join(' ');
+          return <span>{formatTitleCase(value)}</span>;
+        },
       },
       {
         header: 'Pihak',
         accessorFn: (finance: Finance) => finance.party.name,
+        cell: (props: CellContext<Finance, unknown>) => {
+          if (props.row.original.party.id) {
+            return <span>{props.row.original.party.name}</span>;
+          }
+          return <span>{'-'}</span>;
+        },
       },
       {
         header: 'Tanggal',
@@ -220,6 +353,10 @@ const FinanceTable = () => {
       {
         header: 'Metode Pembayaran',
         accessorKey: 'payment_method',
+        cell: (props: CellContext<Finance, unknown>) => {
+          const value = props.row.original.payment_method.split('_').join(' ');
+          return <span>{formatTitleCase(value)}</span>;
+        },
       },
       {
         header: 'Bank',
@@ -237,36 +374,73 @@ const FinanceTable = () => {
       },
       {
         header: 'Aksi',
-        cell: ({ row }: { row: Row<Finance> }) => (
-          <Dropdown
-            trigger={<Button variant='ghost'>...</Button>}
-            direction='bottom'
-            align='end'
-          >
-            <Menu>
-              <MenuItem
-                title='Detail'
-                href={`/finance/detail?financeId=${row.original.id}`}
-                className='hover:bg-primary hover:text-primary-content'
-              />
-            </Menu>
-          </Dropdown>
-        ),
+        cell: (props: CellContext<Finance, unknown>) => {
+          const currentPageSize =
+            props.table.getPaginationRowModel().rows.length;
+          const currentPageRows = props.table.getPaginationRowModel().flatRows;
+          const currentRowRelativeIndex =
+            currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+          const deleteClickHandler = () => {
+            setSelectedFinance(props.row.original);
+            deleteModal.openModal();
+          };
+
+          return (
+            <>
+              {currentPageSize > 2 && (
+                <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                  <RowOptionsMenu
+                    type='dropdown'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowDropdownOptions>
+              )}
+
+              {currentPageSize <= 2 && (
+                <RowCollapseOptions>
+                  <RowOptionsMenu
+                    type='collapse'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowCollapseOptions>
+              )}
+            </>
+          );
+        },
       },
     ];
   }, []);
   return (
     <section className='size-full p-6 flex flex-col gap-6'>
       <div className='flex justify-end gap-2'>
-        <Button color='warning' className='min-w-24'>
-          Injection Saldo Bank
-        </Button>
-        <Button color='info' className='text-white min-w-24'>
-          Saldo Awal
-        </Button>
-        <Button color='primary' className='min-w-24' href='/finance/add'>
-          Tambah
-        </Button>
+        <RequirePermission permissions='lti.finance.injections.create'>
+          <Button
+            color='warning'
+            className='min-w-24'
+            href='/finance/add/injection'
+          >
+            Injection Saldo Bank
+          </Button>
+        </RequirePermission>
+        <RequirePermission permissions='lti.finance.initial_balances.create'>
+          <Button
+            color='info'
+            className='text-white min-w-24'
+            href='/finance/add/initial-balance'
+          >
+            Saldo Awal
+          </Button>
+        </RequirePermission>
+        <RequirePermission permissions='lti.finance.payments.create'>
+          <Button color='primary' className='min-w-24' href='/finance/add'>
+            Tambah
+          </Button>
+        </RequirePermission>
       </div>
       <Card
         variant='bordered'
@@ -363,8 +537,26 @@ const FinanceTable = () => {
         pageSize={tableFilterState.pageSize}
         page={tableFilterState.page}
         onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        totalItems={
+          isResponseSuccess(finances) ? finances.meta?.total_results : 0
+        }
         isLoading={isLoading}
       />
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Finance ini (${selectedFinance?.payment_code})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
     </section>
   );
 };