feat(FE-337): init slicing UI and define data types

2026-05-24 15:25:46 +00:00 · 2025-12-23 17:38:16 +07:00
parent a7267370a0
commit 36ff6d04ee
19 changed files with 3194 additions and 1 deletions
@@ -0,0 +1,97 @@
+import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';
+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 { Finance } from '@/types/api/finance/finance';
+import { Row } from '@tanstack/react-table';
+import { useMemo } from 'react';
+
+const FinanceTable = ({ finances }: { finances: Finance[] }) => {
+  const columns = useMemo(() => {
+    return [
+      {
+        header: 'ID',
+        accessorKey: 'id',
+      },
+      {
+        header: 'Alokasi',
+        accessorFn: (finance: Finance) => finance.references.length,
+        cell: ({ row }: { row: Row<Finance> }) => (
+          <Tooltip
+            content={row.original.references
+              .map((ref) => ref.references_number)
+              .join(', ')}
+          >
+            <span className='text-primary'>
+              {row.original.references.length}
+            </span>
+          </Tooltip>
+        ),
+      },
+      {
+        header: 'References Number',
+        accessorKey: 'references_number',
+      },
+      {
+        header: 'Jenis Transaksi',
+        accessorKey: 'transaction_type',
+      },
+      {
+        header: 'Pihak',
+        accessorFn: (finance: Finance) => finance.transaction_owner.name,
+      },
+      {
+        header: 'Tanggal',
+        accessorFn: (finance: Finance) =>
+          formatDate(finance.transaction_date, 'DD MMM YYYY'),
+      },
+      {
+        header: 'Metode Pembayaran',
+        accessorKey: 'payment_method',
+      },
+      {
+        header: 'Bank',
+        accessorFn: (finance: Finance) =>
+          `${finance.bank_account.alias} - ${finance.bank_account.account_number} - ${finance.bank_account.owner}`,
+      },
+      {
+        header: 'Pengeluaran (Rp)',
+        accessorFn: (finance: Finance) =>
+          formatCurrency(finance.balance_amount),
+      },
+      {
+        header: 'Pemasukan (Rp)',
+        accessorFn: (finance: Finance) =>
+          formatCurrency(finance.transaction_amount),
+      },
+      {
+        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>
+        ),
+      },
+    ];
+  }, []);
+  return (
+    <section className='size-full p-4'>
+      <Table<Finance> data={finances} columns={columns} />
+    </section>
+  );
+};
+
+export default FinanceTable;