feat(FE-208,212): implement table-based UI for Purchase Order acceptance and staff approval forms

src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx

@@ -9,6 +9,8 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+import * as TanStack from '@tanstack/react-table';
 
 import {
   PurchaseRequisitionsAcceptApprovalFormDefaultValues,
@@ -21,6 +23,7 @@ import {
   CreateAcceptApprovalRequisitionsPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
+import { PurchaseRequisitionsAcceptApprovalFormValues } from './PurchaseOrderForm.schema';
 import DateInput from '@/components/input/DateInput';
 
 interface PurchaseOrderAcceptApprovalFormProps {
@@ -67,7 +70,7 @@ const PurchaseOrderAcceptApprovalForm = ({
   }
 
   // ===== UTILITY FUNCTIONS =====
-  const getPurchaseItemError = (
+  const isRepeaterInputError = (
     idx: number,
     field:
       | 'purchase_item_id'
@@ -392,332 +395,445 @@ const PurchaseOrderAcceptApprovalForm = ({
     }
   };
 
+  // ===== TABLE COLUMNS DEFINITION =====
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: 'purchase_item',
+        header: () => (
+          <div>
+            Item
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <SelectInput
+              required
+              isClearable={true}
+              value={item?.purchase_item}
+              key={`purchase-item-${idx}`}
+              onChange={(val) => purchaseItemChangeHandler(idx, val)}
+              options={getPurchaseItemOptions()}
+              isError={
+                isRepeaterInputError(idx, 'purchase_item_id').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'purchase_item_id')
+                  .errorMessage
+              }
+              placeholder='Pilih Item...'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'warehouse_id',
+        header: () => (
+          <div>
+            Gudang Tujuan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <SelectInput
+              required
+              isClearable={true}
+              value={item?.warehouse}
+              key={`warehouse-${idx}`}
+              onChange={(val) => warehouseChangeHandler(idx, val)}
+              options={getWarehouseOptions()}
+              isError={
+                isRepeaterInputError(idx, 'warehouse_id').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'warehouse_id').errorMessage
+              }
+              placeholder='Pilih Gudang...'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'travel_number',
+        header: () => (
+          <div>
+            No. Surat Jalan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <TextInput
+              required
+              name={`items.${idx}.travel_number`}
+              type='text'
+              value={item?.travel_number || ''}
+              onChange={(e) =>
+                formik.setFieldValue(
+                  `items.${idx}.travel_number`,
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                isRepeaterInputError(idx, 'travel_number').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'travel_number')
+                  .errorMessage
+              }
+              placeholder='Masukkan no. surat jalan'
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'travel_document_path',
+        header: () => (
+          <div>
+            Dokumen Surat Jalan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <TextInput
+              required
+              name={`items.${idx}.travel_document_path`}
+              type='text'
+              value={item?.travel_document_path || ''}
+              onChange={(e) =>
+                formik.setFieldValue(
+                  `items.${idx}.travel_document_path`,
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                isRepeaterInputError(idx, 'travel_document_path')
+                  .isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'travel_document_path')
+                  .errorMessage
+              }
+              placeholder='Masukkan path dokumen'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'vehicle_number',
+        header: () => (
+          <div>
+            Nomor Kendaraan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <TextInput
+              required
+              name={`items.${idx}.vehicle_number`}
+              type='text'
+              value={item?.vehicle_number || ''}
+              onChange={(e) =>
+                formik.setFieldValue(
+                  `items.${idx}.vehicle_number`,
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                isRepeaterInputError(idx, 'vehicle_number').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'vehicle_number')
+                  .errorMessage
+              }
+              placeholder='Masukkan nomor kendaraan'
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'expedition_vendor_id',
+        header: () => (
+          <div>
+            Vendor Ekspedisi
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <SelectInput
+              required
+              isClearable={true}
+              value={item?.expedition_vendor}
+              key={`expedition-vendor-${idx}`}
+              onChange={(val) =>
+                expeditionVendorChangeHandler(idx, val)
+              }
+              options={getExpeditionVendorOptions()}
+              isError={
+                isRepeaterInputError(idx, 'expedition_vendor_id')
+                  .isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'expedition_vendor_id')
+                  .errorMessage
+              }
+              placeholder='Pilih Vendor...'
+              className={{
+                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'received_qty',
+        header: () => (
+          <div>
+            Jumlah Diterima
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.received_qty`}
+              value={item?.received_qty || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'received_qty',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan jumlah diterima'
+              allowNegative={false}
+              decimalScale={0}
+              thousandSeparator=','
+              decimalSeparator='.'
+              isError={
+                isRepeaterInputError(idx, 'received_qty').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'received_qty').errorMessage
+              }
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'transport_per_item',
+        header: () => (
+          <div>
+            Transport/Item
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.transport_per_item`}
+              value={item?.transport_per_item || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'transport_per_item',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan transport/item'
+              allowNegative={false}
+              decimalScale={2}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix={'Rp'}
+              isError={
+                isRepeaterInputError(idx, 'transport_per_item')
+                  .isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'transport_per_item')
+                  .errorMessage
+              }
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'transport_total',
+        header: () => (
+          <div>
+            Total Transport
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.transport_total`}
+              value={item?.transport_total || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'transport_total',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan total transport'
+              allowNegative={false}
+              decimalScale={2}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix={'Rp'}
+              isError={
+                isRepeaterInputError(idx, 'transport_total').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'transport_total')
+                  .errorMessage
+              }
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+    ],
+    [formik.values.items, formik.handleBlur, purchaseItemChangeHandler, warehouseChangeHandler, expeditionVendorChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, getWarehouseOptions, getExpeditionVendorOptions]
+  );
+
+  const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
+
   return (
     <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
       <div className='w-full'>
         <h2 className='text-lg font-semibold mb-4'>
           Konfirmasi Penerimaan Produk
         </h2>
-        <div className='overflow-x-auto'>
+
-          <table className='table'>
+        {/* Date Inputs Section - Above Table */}
-            <thead>
+        <div className='mb-4 space-y-3'>
-              <tr>
+          <h3 className='text-md font-semibold'>Tanggal Penerimaan Produk</h3>
-                <th>
+          {formik.values.items?.map((item, idx) => (
-                  Item
+            <div
-                  <span className='text-error'>*</span>
+              key={`received-date-${idx}`}
-                </th>
+              className='flex items-center gap-4'
-                <th>
+            >
-                  Tanggal Diterima
+              <div className='flex-1 max-w-sm'>
-                  <span className='text-error'>*</span>
+                <label className='block text-sm font-medium mb-1'>
-                </th>
+                  Item:{' '}
-                <th>
+                  {purchaseItems.find((p) => p.value === item.purchase_item_id)
-                  Gudang Tujuan
+                    ?.label || `Item ${idx + 1}`}
-                  <span className='text-error'>*</span>
+                </label>
-                </th>
+                <DateInput
-                <th>
+                  required
-                  No. Surat Jalan
+                  name={`items.${idx}.received_date`}
-                  <span className='text-error'>*</span>
+                  value={item.received_date || ''}
-                </th>
+                  onChange={(e) =>
-                <th>
+                    formik.setFieldValue(
-                  Dokumen Surat Jalan
+                      `items.${idx}.received_date`,
-                  <span className='text-error'>*</span>
+                      e.target.value
-                </th>
+                    )
-                <th>
+                  }
-                  Nomor Kendaraan
+                  onBlur={formik.handleBlur}
-                  <span className='text-error'>*</span>
+                  isError={isRepeaterInputError(idx, 'received_date').isError}
-                </th>
+                  errorMessage={
-                <th>
+                    isRepeaterInputError(idx, 'received_date').errorMessage
-                  Vendor Ekspedisi
+                  }
-                  <span className='text-error'>*</span>
+                  placeholder='Pilih tanggal diterima'
-                </th>
+                  className={{
-                <th>
+                    wrapper: 'w-full max-w-xs',
-                  Jumlah Diterima
+                  }}
-                  <span className='text-error'>*</span>
+                />
-                </th>
+              </div>
-                <th>
+            </div>
-                  Transport/Item
+          ))}
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Total Transport
-                  <span className='text-error'>*</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {formik.values.items?.map((item, idx) => {
-                const selectedPurchaseItem = purchaseItems.find(
-                  (p) => p.value === item.purchase_item_id
-                );
-                return (
-                  <tr key={`purchase-item-${idx}`}>
-                    <td>
-                      <SelectInput
-                        required
-                        isClearable={true}
-                        value={item.purchase_item}
-                        key={`purchase-item-${idx}`}
-                        onChange={(val) => purchaseItemChangeHandler(idx, val)}
-                        options={getPurchaseItemOptions()}
-                        isError={
-                          getPurchaseItemError(idx, 'purchase_item_id').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'purchase_item_id')
-                            .errorMessage
-                        }
-                        placeholder='Pilih Item...'
-                        className={{
-                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <DateInput
-                        required
-                        isNestedModal={true}
-                        name={`items.${idx}.received_date`}
-                        value={item.received_date || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.received_date`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          getPurchaseItemError(idx, 'received_date').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'received_date')
-                            .errorMessage
-                        }
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <SelectInput
-                        required
-                        isClearable={true}
-                        value={item.warehouse}
-                        key={`warehouse-${idx}`}
-                        onChange={(val) => warehouseChangeHandler(idx, val)}
-                        options={getWarehouseOptions()}
-                        isError={
-                          getPurchaseItemError(idx, 'warehouse_id').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'warehouse_id').errorMessage
-                        }
-                        placeholder='Pilih Gudang...'
-                        className={{
-                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        required
-                        name={`items.${idx}.travel_number`}
-                        type='text'
-                        value={item.travel_number || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.travel_number`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          getPurchaseItemError(idx, 'travel_number').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'travel_number')
-                            .errorMessage
-                        }
-                        placeholder='Masukkan no. surat jalan'
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        required
-                        name={`items.${idx}.travel_document_path`}
-                        type='text'
-                        value={item.travel_document_path || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.travel_document_path`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          getPurchaseItemError(idx, 'travel_document_path')
-                            .isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'travel_document_path')
-                            .errorMessage
-                        }
-                        placeholder='Masukkan path dokumen'
-                        className={{
-                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        required
-                        name={`items.${idx}.vehicle_number`}
-                        type='text'
-                        value={item.vehicle_number || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.vehicle_number`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          getPurchaseItemError(idx, 'vehicle_number').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'vehicle_number')
-                            .errorMessage
-                        }
-                        placeholder='Masukkan nomor kendaraan'
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <SelectInput
-                        required
-                        isClearable={true}
-                        value={item.expedition_vendor}
-                        key={`expedition-vendor-${idx}`}
-                        onChange={(val) =>
-                          expeditionVendorChangeHandler(idx, val)
-                        }
-                        options={getExpeditionVendorOptions()}
-                        isError={
-                          getPurchaseItemError(idx, 'expedition_vendor_id')
-                            .isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'expedition_vendor_id')
-                            .errorMessage
-                        }
-                        placeholder='Pilih Vendor...'
-                        className={{
-                          wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`items.${idx}.received_qty`}
-                        value={item.received_qty || ''}
-                        onChange={(e) =>
-                          handlePurchaseItemChange(
-                            idx,
-                            'received_qty',
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        placeholder='Masukkan jumlah diterima'
-                        allowNegative={false}
-                        decimalScale={0}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        isError={
-                          getPurchaseItemError(idx, 'received_qty').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'received_qty').errorMessage
-                        }
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`items.${idx}.transport_per_item`}
-                        value={item.transport_per_item || ''}
-                        onChange={(e) =>
-                          handlePurchaseItemChange(
-                            idx,
-                            'transport_per_item',
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        placeholder='Masukkan transport/item'
-                        allowNegative={false}
-                        decimalScale={2}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        inputPrefix={'Rp'}
-                        isError={
-                          getPurchaseItemError(idx, 'transport_per_item')
-                            .isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'transport_per_item')
-                            .errorMessage
-                        }
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`items.${idx}.transport_total`}
-                        value={item.transport_total || ''}
-                        onChange={(e) =>
-                          handlePurchaseItemChange(
-                            idx,
-                            'transport_total',
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        placeholder='Masukkan total transport'
-                        allowNegative={false}
-                        decimalScale={2}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        inputPrefix={'Rp'}
-                        isError={
-                          getPurchaseItemError(idx, 'transport_total').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'transport_total')
-                            .errorMessage
-                        }
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
         </div>
+
+        <Table
+          data={tableData}
+          columns={columns}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'table table-auto w-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-2 py-3 text-xs font-semibold text-gray-500',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-2 py-2',
+            paginationClassName: 'hidden',
+          }}
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Belum ada data item...
+              </span>
+            </div>
+          }
+        />
         <div className={'col-span-2'}>
           <TextInput
             label='Notes'

src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

@@ -5,11 +5,12 @@ import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
-import Link from 'next/link';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+import * as TanStack from '@tanstack/react-table';
 
 import {
   PurchaseRequisitionsStaffApprovalFormDefaultValues,
@@ -22,7 +23,7 @@ import {
   CreateStaffApprovalRequisitionsPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
-
+import { PurchaseRequisitionsStaffApprovalFormValues } from './PurchaseOrderForm.schema';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -56,7 +57,7 @@ const PurchaseOrderStaffApprovalForm = ({
   }
 
   // ===== UTILITY FUNCTIONS =====
-  const getPurchaseItemError = (
+  const isRepeaterInputError = (
     idx: number,
     field: 'purchase_item_id' | 'price' | 'total_price'
   ): { isError: boolean; errorMessage: string } => {
@@ -300,6 +301,268 @@ const PurchaseOrderStaffApprovalForm = ({
     }
   };
 
+  // ===== TABLE COLUMNS DEFINITION =====
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: 'purchase_item',
+        header: () => (
+          <div>
+            Item
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <SelectInput
+              required
+              isClearable={true}
+              value={item?.purchase_item}
+              key={`purchase-item-${idx}`}
+              onChange={(val) =>
+                purchaseItemChangeHandler(idx, val)
+              }
+              options={getPurchaseItemOptions()}
+              isError={
+                isRepeaterInputError(idx, 'purchase_item_id')
+                  .isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'purchase_item_id')
+                  .errorMessage
+              }
+              placeholder='Pilih Item...'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'warehouse',
+        header: 'Gudang',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.warehouse`}
+              type='text'
+              value={selectedItem?.warehouse?.name || ''}
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'product_name',
+        header: 'Produk',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.product_name`}
+              type='text'
+              value={selectedItem?.product?.name || ''}
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'product_category',
+        header: 'Jenis Produk',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.product_category`}
+              type='text'
+              value={
+                typeof selectedItem?.product?.product_category === 'string'
+                  ? selectedItem.product.product_category
+                  : selectedItem?.product?.product_category?.name || ''
+              }
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'quantity',
+        header: 'Jumlah',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.quantity`}
+              type='text'
+              value={
+                selectedItem?.quantity
+                  ? selectedItem.quantity.toLocaleString('id-ID')
+                  : ''
+              }
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-24',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'uom',
+        header: 'Satuan',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.uom`}
+              type='text'
+              value={selectedItem?.product?.uom?.name || ''}
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-24',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'price',
+        header: () => (
+          <div>
+            Harga Satuan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.price`}
+              value={item?.price || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'price',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan harga satuan'
+              allowNegative={false}
+              decimalScale={2}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix={'Rp'}
+              isError={isRepeaterInputError(idx, 'price').isError}
+              errorMessage={
+                isRepeaterInputError(idx, 'price').errorMessage
+              }
+              className={{
+                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'total_price',
+        header: () => (
+          <div>
+            Total (Rp.)
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.total_price`}
+              value={item?.total_price || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'total_price',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan total harga'
+              allowNegative={false}
+              decimalScale={2}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix={'Rp'}
+              isError={
+                isRepeaterInputError(idx, 'total_price').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'total_price')
+                  .errorMessage
+              }
+              className={{
+                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+              }}
+            />
+          );
+        },
+      },
+    ],
+    [formik.values.items, formik.handleBlur, purchaseItemChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, purchaseItems]
+  );
+
+  const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
+
   return (
     <>
       <form
@@ -307,241 +570,67 @@ const PurchaseOrderStaffApprovalForm = ({
         className='w-full flex flex-col gap-6'
       >
         <div className='w-full'>
-          <h2 className='text-lg font-semibold mb-4'>Konfirmasi Approve Pembelian</h2>
+          <h2 className='text-lg font-semibold mb-4'>
-            <div className='overflow-x-auto'>
+            Konfirmasi Approve Pembelian
-              <table className='table'>
+          </h2>
-                <thead>
+          <Table
-                  <tr>
+            data={tableData}
-                    <th>
+            columns={columns}
-                      Item
+            className={{
-                      <span className='text-error'>*</span>
+              tableWrapperClassName: 'overflow-x-auto min-h-full!',
-                    </th>
+              tableClassName: 'table table-auto w-full!',
-                    <th>Gudang</th>
+              headerRowClassName: 'border-b border-b-gray-200',
-                    <th>Produk</th>
+              headerColumnClassName:
-                    <th>Jenis Produk</th>
+                'px-2 py-3 text-xs font-semibold text-gray-500',
-                    <th>Jumlah</th>
+              bodyRowClassName: 'border-b border-b-gray-200',
-                    <th>Satuan</th>
+              bodyColumnClassName:
-                    <th>
+                'px-2 py-2',
-                      Harga Satuan
+              paginationClassName: 'hidden',
-                      <span className='text-error'>*</span>
+            }}
-                    </th>
+            emptyContent={
-                    <th>
+              <div className='w-full p-5 text-center'>
-                      Total (Rp.)
+                <span className='text-lg opacity-50'>
-                      <span className='text-error'>*</span>
+                  Belum ada data item...
-                    </th>
+                </span>
-                  </tr>
-                </thead>
-                <tbody>
-                  {formik.values.items?.map((item, idx) => {
-                    const selectedPurchaseItem = purchaseItems.find(
-                      (p) => p.value === item.purchase_item_id
-                    );
-                    return (
-                      <tr key={`purchase-item-${idx}`}>
-                        <td>
-                          <SelectInput
-                            required
-                            isClearable={true}
-                            value={item.purchase_item}
-                            key={`purchase-item-${idx}`}
-                            onChange={(val) =>
-                              purchaseItemChangeHandler(idx, val)
-                            }
-                            options={getPurchaseItemOptions()}
-                            isError={
-                              getPurchaseItemError(idx, 'purchase_item_id')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'purchase_item_id')
-                                .errorMessage
-                            }
-                            placeholder='Pilih Item...'
-                            className={{
-                              wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.warehouse`}
-                            type='text'
-                            value={selectedPurchaseItem?.warehouse?.name || ''}
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.product_name`}
-                            type='text'
-                            value={selectedPurchaseItem?.product?.name || ''}
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.product_category`}
-                            type='text'
-                            value={
-                              typeof selectedPurchaseItem?.product
-                                ?.product_category === 'string'
-                                ? selectedPurchaseItem.product.product_category
-                                : selectedPurchaseItem?.product
-                                    ?.product_category?.name || ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.quantity`}
-                            type='text'
-                            value={
-                              selectedPurchaseItem?.quantity
-                                ? selectedPurchaseItem.quantity.toLocaleString(
-                                    'id-ID'
-                                  )
-                                : ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-24',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.uom`}
-                            type='text'
-                            value={
-                              selectedPurchaseItem?.product?.uom?.name || ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-24',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.price`}
-                            value={item.price || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'price',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan harga satuan'
-                            allowNegative={false}
-                            decimalScale={2}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix={'Rp'}
-                            isError={getPurchaseItemError(idx, 'price').isError}
-                            errorMessage={
-                              getPurchaseItemError(idx, 'price').errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.total_price`}
-                            value={item.total_price || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'total_price',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan total harga'
-                            allowNegative={false}
-                            decimalScale={2}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix={'Rp'}
-                            isError={
-                              getPurchaseItemError(idx, 'total_price').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'total_price')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-                            }}
-                          />
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-            <div className={'col-span-2'}>
-              <TextInput
-                label='Notes'
-                name='notes'
-                value={formik.values.notes || ''}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={formik.touched.notes && Boolean(formik.errors.notes)}
-                errorMessage={formik.errors.notes as string}
-                placeholder='Masukkan catatan'
-              />
-            </div>
-
-            {/* Action buttons */}
-            <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
-              <div className='flex flex-row justify-end gap-2 w-full'>
-                <Button
-                  type='button'
-                  color='warning'
-                  className='px-4'
-                  onClick={onCancel}
-                >
-                  Cancel
-                </Button>
-
-                <Button
-                  type='submit'
-                  color='primary'
-                  className='px-4'
-                  isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
-                >
-                  Submit
-                </Button>
               </div>
+            }
+          />
+          <div className={'col-span-2'}>
+            <TextInput
+              label='Notes'
+              name='notes'
+              value={formik.values.notes || ''}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.notes && Boolean(formik.errors.notes)}
+              errorMessage={formik.errors.notes as string}
+              placeholder='Masukkan catatan'
+            />
+          </div>
+
+          {/* Action buttons */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
+            <div className='flex flex-row justify-end gap-2 w-full'>
+              <Button
+                type='button'
+                color='warning'
+                className='px-4'
+                onClick={onCancel}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type='submit'
+                color='primary'
+                className='px-4'
+                isLoading={formik.isSubmitting}
+                disabled={!formik.isValid || formik.isSubmitting}
+              >
+                Submit
+              </Button>
             </div>
+          </div>
 
           {purchaseOrderFormErrorMessage && (
             <div role='alert' className='alert alert-error'>