feat(FE-321): create ClosingOutgoingSapronaksTable component

2026-05-20 13:32:00 +00:00 · 2025-12-06 16:54:27 +07:00
parent 1ae5c1bd64
commit 6f7627ac92
1 changed files with 209 additions and 0 deletions
@@ -0,0 +1,209 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ClosingApi } from '@/services/api/closing';
+import { ClosingOutgoingSapronak } from '@/types/api/closing';
+
+interface ClosingOutgoingSapronaksTableProps {
+  projectFlockId: number;
+}
+
+const ClosingOutgoingSapronaksTable = ({
+  projectFlockId,
+}: ClosingOutgoingSapronaksTableProps) => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
+    useSWR(
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak/outgoing${getTableFilterQueryString()}`,
+      ClosingApi.getAllOutgoingSapronakFetcher,
+      {
+        keepPreviousData: true,
+      }
+    );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const outgoingSapronaksColumns: ColumnDef<ClosingOutgoingSapronak>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'date',
+      header: 'Tanggal',
+      cell: (props) => formatDate(props.row.original.date, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'reference_number',
+      header: 'No. Referensi',
+    },
+    {
+      accessorKey: 'transaction_type',
+      header: 'Jenis Transaksi',
+    },
+    {
+      accessorKey: 'product_name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'product_category',
+      header: 'Kategori Produk',
+    },
+    {
+      accessorKey: 'source_warehouse',
+      header: 'Gudang Asal',
+    },
+    {
+      accessorKey: 'destination_warehouse',
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+      cell: (props) =>
+        `${formatNumber(props.row.original.quantity)} ${props.row.original.unit}`,
+    },
+    {
+      accessorKey: 'notes',
+      header: 'Keterangan',
+    },
+  ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(outgoingSapronaks)
+          ? outgoingSapronaks.data.length > 0
+          : false
+      );
+    }
+  }, [outgoingSapronaks, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Sapronak Keluar</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Sapronak Keluar'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<ClosingOutgoingSapronak>
+            data={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.data
+                : []
+            }
+            columns={outgoingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(outgoingSapronaks)
+                ? outgoingSapronaks?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingOutgoingSapronaks}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(outgoingSapronaks) &&
+                  outgoingSapronaks?.data?.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ClosingOutgoingSapronaksTable;