refactor(FE): Refactor InventoryAdjustmentTable for improved readability

src/app/inventory/adjustment/page.tsx

@@ -2,7 +2,7 @@ import InventoryAdjustmentTable from '@/components/pages/inventory/adjustment/In
 
 const InventoryAdjustment = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full'>
       <InventoryAdjustmentTable />
     </section>
   );

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -1,20 +1,18 @@
 'use client';
 
-import Badge from '@/components/Badge';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+import { Icon } from '@iconify/react';
+import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
 import Button from '@/components/Button';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
 import RequirePermission from '@/components/helper/RequirePermission';
-import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
+import { cn, formatNumber, formatDate } from '@/lib/helper';
 import { InventoryAdjustmentApi } from '@/services/api/inventory';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
-import { Icon } from '@iconify/react';
-import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
-import { useCallback, useEffect, useState } from 'react';
-import useSWR from 'swr';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 const InventoryAdjustmentTable = () => {
   const {
@@ -41,80 +39,74 @@ const InventoryAdjustmentTable = () => {
     },
   });
 
-  // Fetch Data
   const { data: inventoryAdjustments, isLoading } = useSWR(
     `${InventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
     InventoryAdjustmentApi.getAllFetcher
   );
 
-  // State
   const [sorting, setSorting] = useState<SortingState>([]);
 
-  // Columns
-  const inventoryAdjustmentsColumns: ColumnDef<InventoryAdjustment>[] = [
-    {
-      header: '#',
-      cell: (props) =>
-        tableFilterState.pageSize * (tableFilterState.page - 1) +
-        props.row.index +
-        1,
-    },
-    {
-      id: 'product_name',
-      header: 'Nama Produk',
-      accessorFn: (row) => row.product_warehouse?.product?.name ?? '-',
-    },
-    {
-      id: 'warehouse_name',
-      header: 'Gudang',
-      accessorFn: (row) => row.product_warehouse?.warehouse?.name ?? '-',
-    },
-    {
-      id: 'created_at',
-      header: 'Tanggal',
-      accessorFn: (row) =>
-        new Date(row.created_at).toLocaleDateString('id-ID', {
-          day: '2-digit',
-          month: 'short',
-          year: 'numeric',
-        }),
-    },
-    {
-      id: 'quantity',
-      header: 'Kuantitas',
-      accessorFn: (row) => formatNumber(String(row.increase + row.decrease)),
-    },
-    {
-      id: 'transaction_type',
-      header: 'Tipe Transaksi',
-      accessorFn: (row) => {
-        if (row.increase > 0) return 'Peningkatan';
-        if (row.decrease > 0) return 'Penurunan';
-        return '-';
+  const inventoryAdjustmentsColumns: ColumnDef<InventoryAdjustment>[] = useMemo(
+    () => [
+      {
+        header: 'No',
+        cell: (props) =>
+          tableFilterState.pageSize * (tableFilterState.page - 1) +
+          props.row.index +
+          1,
       },
-      cell: (props) => {
-        const type = props.row.original.increase;
-        const label = type > 0 ? 'Peningkatan' : type <= 0 ? 'Penurunan' : '-';
-
-        return (
-          <Badge variant='soft' color={type > 0 ? 'success' : 'error'}>
-            {label}
-          </Badge>
-        );
+      {
+        id: 'product_name',
+        header: 'Nama Produk',
+        accessorFn: (row) => row.product_warehouse?.product?.name ?? '-',
       },
-    },
-    {
-      id: 'created_by',
-      header: 'Oleh',
-      accessorFn: (row) => row.created_user?.name ?? '-',
-    },
-  ];
+      {
+        id: 'warehouse_name',
+        header: 'Gudang',
+        accessorFn: (row) => row.product_warehouse?.warehouse?.name ?? '-',
+      },
+      {
+        id: 'created_at',
+        header: 'Tanggal',
+        accessorFn: (row) =>
+          row.created_at ? formatDate(row.created_at, 'DD MMM YYYY') : '-',
+      },
+      {
+        id: 'quantity',
+        header: 'Kuantitas',
+        cell: (props) => {
+          const value =
+            props.row.original.increase + props.row.original.decrease;
+          return <div className='text-center'>{formatNumber(value)}</div>;
+        },
+      },
+      {
+        id: 'transaction_type',
+        header: 'Tipe Transaksi',
+        cell: (props) => {
+          const type = props.row.original.increase;
+          const label =
+            type > 0 ? 'Peningkatan' : type <= 0 ? 'Penurunan' : '-';
 
-  // Handler
-  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const newVal = val as OptionType;
-    setPageSize(newVal.value as number);
-  };
+          return (
+            <StatusBadge
+              color={type > 0 ? 'success' : type <= 0 ? 'error' : 'neutral'}
+              text={label}
+              className={{
+                badge: 'whitespace-nowrap',
+              }}
+            />
+          );
+        },
+      },
+      {
+        id: 'created_by',
+        header: 'Oleh',
+        accessorFn: (row) => row.created_user?.name ?? '-',
+      },
+    ],
+    [tableFilterState.pageSize, tableFilterState.page]
+  );
 
   const updateSortingFilter = useCallback(
     (
@@ -130,7 +122,6 @@ const InventoryAdjustmentTable = () => {
     [updateFilter]
   );
 
-  // Effect
   useEffect(() => {
     const productCategorySortFilter = sorting.find(
       (sortItem) => sortItem.id === 'productCategory'
@@ -149,89 +140,60 @@ const InventoryAdjustmentTable = () => {
     updateSortingFilter('stockSort', stockSortFilter);
   }, [sorting, updateSortingFilter]);
 
-  // Utils Function
-  const formatNumber = (value: string) => {
-    const numericValue = value.replace(/[^0-9.]/g, '');
-    const [integer, decimal] = numericValue.split('.');
-    const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
-  };
-
-  // Render
   return (
-    <>
-      <div className='w-full p-0 sm:p-4'>
-        <div className='flex flex-col gap-2 mb-4'>
-          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='w-full flex flex-row'>
-              <RequirePermission permissions='lti.inventory.create'>
-                <Button
-                  href='/inventory/adjustment/add'
-                  variant='outline'
-                  color='primary'
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
-                </Button>
-              </RequirePermission>
-            </div>
-
-            <div className='flex flex-row justify-end'>
-              <SelectInput
-                label='Baris'
-                options={ROWS_OPTIONS}
-                value={{
-                  label: String(tableFilterState.pageSize),
-                  value: tableFilterState.pageSize,
-                }}
-                onChange={pageSizeChangeHandler}
-                className={{ wrapper: 'min-w-28' }}
-              />
-            </div>
-          </div>
-
-          <Table<InventoryAdjustment>
-            data={
-              isResponseSuccess(inventoryAdjustments)
-                ? inventoryAdjustments?.data
-                : []
-            }
-            columns={inventoryAdjustmentsColumns}
-            pageSize={tableFilterState.pageSize}
-            page={
-              isResponseSuccess(inventoryAdjustments)
-                ? inventoryAdjustments?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(inventoryAdjustments)
-                ? inventoryAdjustments?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            isLoading={isLoading}
-            sorting={sorting}
-            setSorting={setSorting}
-            className={{
-              containerClassName: cn({
-                'mb-20':
-                  isResponseSuccess(inventoryAdjustments) &&
-                  inventoryAdjustments?.data?.length === 0,
-              }),
-              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-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-              bodyRowClassName: 'border-b border-b-gray-200',
-              bodyColumnClassName:
-                'px-6 py-3 last:flex last:flex-row last:justify-end',
-            }}
-          />
+    <div className='w-full'>
+      {/* Header Section */}
+      <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
+        <div className='w-fit flex flex-row gap-3 flex-wrap'>
+          <RequirePermission permissions='lti.inventory.create'>
+            <Button
+              href='/inventory/adjustment/add'
+              color='primary'
+              className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+            >
+              <Icon icon='heroicons:plus' width={20} height={20} />
+              Add Adjustment
+            </Button>
+          </RequirePermission>
         </div>
       </div>
-    </>
+
+      {/* Table Section */}
+      <div className='flex flex-col mb-4'>
+        <Table<InventoryAdjustment>
+          data={
+            isResponseSuccess(inventoryAdjustments)
+              ? inventoryAdjustments?.data
+              : []
+          }
+          columns={inventoryAdjustmentsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(inventoryAdjustments)
+              ? inventoryAdjustments?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(inventoryAdjustments)
+              ? inventoryAdjustments?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          onPageSizeChange={setPageSize}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn('p-3 mb-0', {
+              'w-full':
+                isResponseSuccess(inventoryAdjustments) &&
+                inventoryAdjustments?.data?.length === 0,
+            }),
+            headerColumnClassName: 'text-nowrap',
+          }}
+        />
+      </div>
+    </div>
   );
 };