feat(FE-350): add filtering table

src/components/pages/finance/FinanceDetail.tsx

@@ -1,14 +1,15 @@
 import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Table from '@/components/Table';
-import { formatCurrency } from '@/lib/helper';
-import { Finance, FinanceReferences } from '@/types/api/finance/finance';
+import { formatCurrency, formatTitleCase } from '@/lib/helper';
+import { Finance } from '@/types/api/finance/finance';
 
 const FinanceDetail = ({ finance }: { finance: Finance }) => {
   const informasiUmum = [
     {
       label: 'ID',
-      value: finance.id,
+      value: finance.payment_code,
     },
     {
       label: 'Jenis Transaksi',
@@ -16,41 +17,47 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
     },
     {
       label: 'Pihak',
-      value: finance.transaction_owner.name,
+      value: finance.party.name,
     },
     {
       label: 'Tanggal',
-      value: finance.transaction_date,
+      value: finance.payment_date,
     },
     {
       label: 'Metode Pembayaran',
       value: finance.payment_method,
     },
+    {
+      label: 'Catatan',
+      value: finance.notes || '-',
+    },
   ];
   const informasiTransfer = [
     {
       label: 'No. Referensi',
-      value: finance.references_number,
+      value: finance.reference_number,
     },
     {
       label: 'Nomor Rekening',
-      value: `${finance.bank_account.alias} - ${finance.bank_account.account_number} - ${finance.bank_account.owner}`,
+      value: `${finance.bank.alias} - ${finance.bank.account_number} - ${finance.bank.owner}`,
     },
     {
-      label: 'Rekening Customer',
-      value: finance.transaction_account_number,
+      label: `Rekening ${formatTitleCase(finance.party.type)}`,
+      value: finance.party.account_number,
     },
     {
       label: 'Nominal',
-      value: formatCurrency(finance.transaction_amount),
+      value: formatCurrency(finance.expense_amount),
     },
     {
       label: 'Sisa',
-      value: formatCurrency(finance.balance_amount),
+      value: formatCurrency(finance.income_amount),
     },
   ];
   return (
-    <div className='flex flex-col gap-4'>
+    <div className='flex flex-col gap-6 p-6'>
+      <FormHeader title='' backUrl='/finance' />
+
       <Card
         title='Detail Keuangan'
         className={{
@@ -100,41 +107,6 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
             }}
           />
         </div>
-        <div className='flex flex-col gap-4'>
-          <div className='flex flex-row gap-4'>
-            <DebouncedTextInput
-              className={{
-                wrapper: 'max-w-1/4 ml-auto',
-              }}
-              name='cari'
-              placeholder='Cari'
-            />
-          </div>
-          <Table<FinanceReferences>
-            data={finance.references}
-            columns={[
-              {
-                header: 'No.',
-                id: 'index',
-                accessorFn: (row, index) => index + 1,
-              },
-              {
-                header: 'No. Referensi',
-                id: 'references_number',
-                accessorKey: 'references_number',
-              },
-              {
-                header: 'Nominal',
-                id: 'nominal',
-                accessorFn: (row) =>
-                  formatCurrency(Number(row.total_allocation)),
-              },
-            ]}
-            className={{
-              containerClassName: 'mb-6',
-            }}
-          />
-        </div>
       </Card>
     </div>
   );