refactor(FE-177-166-167): separate table repeater component and adjust data types with new API Payload

2026-05-24 15:25:46 +00:00 · 2025-11-16 23:19:28 +07:00
parent 3fdb10ec7f
commit d3c4706d87
16 changed files with 593 additions and 496 deletions
@@ -0,0 +1,200 @@
+'use client';
+
+import Button from '@/components/Button';
+import Table from '@/components/Table';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import { cn, formatCurrency, formatNumber } from '@/lib/helper';
+import { Icon } from '@iconify/react';
+import { useMemo, useState } from 'react';
+import * as TanStack from '@tanstack/react-table';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+// Hapus import Modal, useModal, dan MarketingProductForm
+
+// Tentukan Tipe Props baru yang diterima dari SalesForm
+type SalesOrderProductTableProps = {
+  data: SalesOrderProductFormValues[];
+  onDelete: (product_warehouse_id: number, kandang_id: number) => void;
+  onBulkDelete: (selectedIds: number[]) => void;
+  onAddProductClick: () => void; // Prop baru untuk memanggil modal di parent
+};
+
+const SalesOrderProductTable = ({
+  data,
+  onDelete,
+  onBulkDelete,
+  onAddProductClick,
+}: SalesOrderProductTableProps) => {
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const handleBulkDeleteClick = () => {
+    onBulkDelete(selectedRowIds);
+    setRowSelection({});
+  };
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({
+          table,
+        }: {
+          table: TanStack.Table<SalesOrderProductFormValues>;
+        }) => (
+          <div className='w-full flex flex-row justify-center'>
+            <CheckboxInput
+              name='allRow'
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          </div>
+        ),
+        cell: ({ row }: { row: TanStack.Row<SalesOrderProductFormValues> }) => (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+              value={`${row.original.product_warehouse_id}${row.original.kandang_id}`}
+            />
+          </div>
+        ),
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) => row.kandang?.label,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          row.product_warehouse?.label,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatCurrency(parseFloat(row.unit_price as string)),
+        header: 'Harga Satuan (Rp)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.total_weight as string)),
+        header: 'Total Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.qty as string)),
+        header: 'Kuantitas',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.avg_weight as string)),
+        header: 'Avg. Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatCurrency(parseFloat(row.total_price as string)),
+        header: 'Total Penjualan (Rp)',
+      },
+      {
+        header: 'Aksi',
+        cell: (
+          props: TanStack.CellContext<SalesOrderProductFormValues, unknown>
+        ) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='error'
+              className='p-1'
+              disabled={
+                !props.row.original.product_warehouse_id ||
+                !props.row.original.kandang_id
+              }
+              onClick={() => {
+                // PANGGIL CALLBACK PARENT (onDelete)
+                if (
+                  props.row.original.product_warehouse_id &&
+                  props.row.original.kandang_id
+                ) {
+                  onDelete(
+                    props.row.original.product_warehouse_id,
+                    props.row.original.kandang_id
+                  );
+                }
+              }}
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [onDelete]
+  );
+
+  return (
+    <>
+      <Table<SalesOrderProductFormValues>
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+        data={data}
+        columns={columns}
+        className={{
+          tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          tableClassName: 'font-inter w-full table-auto min-h-full!',
+          headerRowClassName: 'border-b border-b-gray-200',
+          headerColumnClassName:
+            'px-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          bodyRowClassName: 'border-b border-b-gray-200',
+          bodyColumnClassName:
+            'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          paginationClassName: 'hidden',
+        }}
+        emptyContent={
+          <div
+            className={cn(
+              'w-full h-16 flex flex-col justify-center items-center gap-2'
+            )}
+          >
+            <span className='text-gray-500'>Belum ada data penjualan</span>
+          </div>
+        }
+      />
+      <div className='flex flex-row gap-3 mt-3'>
+        <Button
+          type='button'
+          variant='outline'
+          className='justify-start w-fit py-1 text-sm'
+          onClick={onAddProductClick}
+        >
+          <Icon icon='mdi:plus' width={16} height={16} />
+          Tambah Produk
+        </Button>
+        {selectedRowIds.length > 0 && (
+          <Button
+            type='button'
+            variant='outline'
+            color='error'
+            className='justify-start w-fit py-1 text-sm'
+            onClick={handleBulkDeleteClick}
+          >
+            <Icon icon='mdi:trash' width={16} height={16} />
+            Hapus
+            {selectedRowIds.length > 0
+              ? ` (${selectedRowIds.length})`
+              : ''}{' '}
+            Produk
+          </Button>
+        )}
+      </div>
+
+      {/* Modal dan Form dihapus dari sini */}
+    </>
+  );
+};
+
+export default SalesOrderProductTable;