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

2026-05-21 13:55:45 +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,143 @@
+import Card from '@/components/Card';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Table from '@/components/Table';
+import { formatCurrency } from '@/lib/helper';
+import { Finance, FinanceReferences } from '@/types/api/finance/finance';
+
+const FinanceDetail = ({ finance }: { finance: Finance }) => {
+  const informasiUmum = [
+    {
+      label: 'ID',
+      value: finance.id,
+    },
+    {
+      label: 'Jenis Transaksi',
+      value: finance.transaction_type,
+    },
+    {
+      label: 'Pihak',
+      value: finance.transaction_owner.name,
+    },
+    {
+      label: 'Tanggal',
+      value: finance.transaction_date,
+    },
+    {
+      label: 'Metode Pembayaran',
+      value: finance.payment_method,
+    },
+  ];
+  const informasiTransfer = [
+    {
+      label: 'No. Referensi',
+      value: finance.references_number,
+    },
+    {
+      label: 'Nomor Rekening',
+      value: `${finance.bank_account.alias} - ${finance.bank_account.account_number} - ${finance.bank_account.owner}`,
+    },
+    {
+      label: 'Rekening Customer',
+      value: finance.transaction_account_number,
+    },
+    {
+      label: 'Nominal',
+      value: formatCurrency(finance.transaction_amount),
+    },
+    {
+      label: 'Sisa',
+      value: formatCurrency(finance.balance_amount),
+    },
+  ];
+  return (
+    <div className='flex flex-col gap-4'>
+      <Card
+        title='Detail Keuangan'
+        className={{
+          wrapper: 'w-full',
+        }}
+        variant='bordered'
+      >
+        <div className='grid grid-cols-2 gap-4 mb-6'>
+          <Table
+            data={informasiUmum}
+            columns={[
+              {
+                header: '',
+                id: 'label',
+                accessorKey: 'label',
+              },
+              {
+                header: '',
+                id: 'value',
+                accessorKey: 'value',
+              },
+            ]}
+            className={{
+              headerRowClassName: 'hidden',
+              paginationClassName: 'hidden',
+              containerClassName: 'mb-0',
+            }}
+          />
+          <Table
+            data={informasiTransfer}
+            columns={[
+              {
+                header: '',
+                id: 'label',
+                accessorKey: 'label',
+              },
+              {
+                header: '',
+                id: 'value',
+                accessorKey: 'value',
+              },
+            ]}
+            className={{
+              headerRowClassName: 'hidden',
+              paginationClassName: 'hidden',
+              containerClassName: 'mb-0',
+            }}
+          />
+        </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>
+  );
+};
+
+export default FinanceDetail;
@@ -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;
@@ -0,0 +1,5 @@
+const FinanceAdjust = () => {
+  return <div>Finance Adjust</div>;
+};
+
+export default FinanceAdjust;