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,78 +395,34 @@ const PurchaseOrderAcceptApprovalForm = ({
     }
   };
 
-  return (
+  // ===== TABLE COLUMNS DEFINITION =====
-    <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
+  const columns = useMemo(
-      <div className='w-full'>
+    () => [
-        <h2 className='text-lg font-semibold mb-4'>
+      {
-          Konfirmasi Penerimaan Produk
+        accessorKey: 'purchase_item',
-        </h2>
+        header: () => (
-        <div className='overflow-x-auto'>
+          <div>
-          <table className='table'>
-            <thead>
-              <tr>
-                <th>
             Item
             <span className='text-error'>*</span>
-                </th>
+          </div>
-                <th>
+        ),
-                  Tanggal Diterima
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
-                  <span className='text-error'>*</span>
+          const idx = props.row.index;
-                </th>
+          const item = formik.values.items?.[idx];
-                <th>
+
-                  Gudang Tujuan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  No. Surat Jalan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Dokumen Surat Jalan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Nomor Kendaraan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Vendor Ekspedisi
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Jumlah Diterima
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  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}
+              value={item?.purchase_item}
               key={`purchase-item-${idx}`}
               onChange={(val) => purchaseItemChangeHandler(idx, val)}
               options={getPurchaseItemOptions()}
               isError={
-                          getPurchaseItemError(idx, 'purchase_item_id').isError
+                isRepeaterInputError(idx, 'purchase_item_id').isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'purchase_item_id')
+                isRepeaterInputError(idx, 'purchase_item_id')
                   .errorMessage
               }
               placeholder='Pilih Item...'
@@ -471,58 +430,61 @@ const PurchaseOrderAcceptApprovalForm = ({
                 wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
               }}
             />
-                    </td>
+          );
-                    <td>
+        },
-                      <DateInput
+      },
-                        required
+      {
-                        isNestedModal={true}
+        accessorKey: 'warehouse_id',
-                        name={`items.${idx}.received_date`}
+        header: () => (
-                        value={item.received_date || ''}
+          <div>
-                        onChange={(e) =>
+            Gudang Tujuan
-                          formik.setFieldValue(
+            <span className='text-error'>*</span>
-                            `items.${idx}.received_date`,
+          </div>
-                            e.target.value
+        ),
-                          )
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
-                        }
+          const idx = props.row.index;
-                        onBlur={formik.handleBlur}
+          const item = formik.values.items?.[idx];
-                        isError={
+
-                          getPurchaseItemError(idx, 'received_date').isError
+          return (
-                        }
-                        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}
+              value={item?.warehouse}
               key={`warehouse-${idx}`}
               onChange={(val) => warehouseChangeHandler(idx, val)}
               options={getWarehouseOptions()}
               isError={
-                          getPurchaseItemError(idx, 'warehouse_id').isError
+                isRepeaterInputError(idx, 'warehouse_id').isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'warehouse_id').errorMessage
+                isRepeaterInputError(idx, 'warehouse_id').errorMessage
               }
               placeholder='Pilih Gudang...'
               className={{
                 wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
               }}
             />
-                    </td>
+          );
-                    <td>
+        },
+      },
+      {
+        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 || ''}
+              value={item?.travel_number || ''}
               onChange={(e) =>
                 formik.setFieldValue(
                   `items.${idx}.travel_number`,
@@ -531,10 +493,10 @@ const PurchaseOrderAcceptApprovalForm = ({
               }
               onBlur={formik.handleBlur}
               isError={
-                          getPurchaseItemError(idx, 'travel_number').isError
+                isRepeaterInputError(idx, 'travel_number').isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'travel_number')
+                isRepeaterInputError(idx, 'travel_number')
                   .errorMessage
               }
               placeholder='Masukkan no. surat jalan'
@@ -542,13 +504,27 @@ const PurchaseOrderAcceptApprovalForm = ({
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
               }}
             />
-                    </td>
+          );
-                    <td>
+        },
+      },
+      {
+        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 || ''}
+              value={item?.travel_document_path || ''}
               onChange={(e) =>
                 formik.setFieldValue(
                   `items.${idx}.travel_document_path`,
@@ -557,11 +533,11 @@ const PurchaseOrderAcceptApprovalForm = ({
               }
               onBlur={formik.handleBlur}
               isError={
-                          getPurchaseItemError(idx, 'travel_document_path')
+                isRepeaterInputError(idx, 'travel_document_path')
                   .isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'travel_document_path')
+                isRepeaterInputError(idx, 'travel_document_path')
                   .errorMessage
               }
               placeholder='Masukkan path dokumen'
@@ -569,13 +545,27 @@ const PurchaseOrderAcceptApprovalForm = ({
                 wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
               }}
             />
-                    </td>
+          );
-                    <td>
+        },
+      },
+      {
+        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 || ''}
+              value={item?.vehicle_number || ''}
               onChange={(e) =>
                 formik.setFieldValue(
                   `items.${idx}.vehicle_number`,
@@ -584,10 +574,10 @@ const PurchaseOrderAcceptApprovalForm = ({
               }
               onBlur={formik.handleBlur}
               isError={
-                          getPurchaseItemError(idx, 'vehicle_number').isError
+                isRepeaterInputError(idx, 'vehicle_number').isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'vehicle_number')
+                isRepeaterInputError(idx, 'vehicle_number')
                   .errorMessage
               }
               placeholder='Masukkan nomor kendaraan'
@@ -595,23 +585,37 @@ const PurchaseOrderAcceptApprovalForm = ({
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
               }}
             />
-                    </td>
+          );
-                    <td>
+        },
+      },
+      {
+        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}
+              value={item?.expedition_vendor}
               key={`expedition-vendor-${idx}`}
               onChange={(val) =>
                 expeditionVendorChangeHandler(idx, val)
               }
               options={getExpeditionVendorOptions()}
               isError={
-                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                isRepeaterInputError(idx, 'expedition_vendor_id')
                   .isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                isRepeaterInputError(idx, 'expedition_vendor_id')
                   .errorMessage
               }
               placeholder='Pilih Vendor...'
@@ -619,12 +623,26 @@ const PurchaseOrderAcceptApprovalForm = ({
                 wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
               }}
             />
-                    </td>
+          );
-                    <td>
+        },
+      },
+      {
+        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 || ''}
+              value={item?.received_qty || ''}
               onChange={(e) =>
                 handlePurchaseItemChange(
                   idx,
@@ -639,21 +657,35 @@ const PurchaseOrderAcceptApprovalForm = ({
               thousandSeparator=','
               decimalSeparator='.'
               isError={
-                          getPurchaseItemError(idx, 'received_qty').isError
+                isRepeaterInputError(idx, 'received_qty').isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'received_qty').errorMessage
+                isRepeaterInputError(idx, 'received_qty').errorMessage
               }
               className={{
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
               }}
             />
-                    </td>
+          );
-                    <td>
+        },
+      },
+      {
+        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 || ''}
+              value={item?.transport_per_item || ''}
               onChange={(e) =>
                 handlePurchaseItemChange(
                   idx,
@@ -669,23 +701,37 @@ const PurchaseOrderAcceptApprovalForm = ({
               decimalSeparator='.'
               inputPrefix={'Rp'}
               isError={
-                          getPurchaseItemError(idx, 'transport_per_item')
+                isRepeaterInputError(idx, 'transport_per_item')
                   .isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'transport_per_item')
+                isRepeaterInputError(idx, 'transport_per_item')
                   .errorMessage
               }
               className={{
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
               }}
             />
-                    </td>
+          );
-                    <td>
+        },
+      },
+      {
+        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 || ''}
+              value={item?.transport_total || ''}
               onChange={(e) =>
                 handlePurchaseItemChange(
                   idx,
@@ -701,23 +747,93 @@ const PurchaseOrderAcceptApprovalForm = ({
               decimalSeparator='.'
               inputPrefix={'Rp'}
               isError={
-                          getPurchaseItemError(idx, 'transport_total').isError
+                isRepeaterInputError(idx, 'transport_total').isError
               }
               errorMessage={
-                          getPurchaseItemError(idx, 'transport_total')
+                isRepeaterInputError(idx, 'transport_total')
                   .errorMessage
               }
               className={{
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
               }}
             />
-                    </td>
-                  </tr>
           );
-              })}
+        },
-            </tbody>
+      },
-          </table>
+    ],
+    [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>
+
+        {/* Date Inputs Section - Above Table */}
+        <div className='mb-4 space-y-3'>
+          <h3 className='text-md font-semibold'>Tanggal Penerimaan Produk</h3>
+          {formik.values.items?.map((item, idx) => (
+            <div
+              key={`received-date-${idx}`}
+              className='flex items-center gap-4'
+            >
+              <div className='flex-1 max-w-sm'>
+                <label className='block text-sm font-medium mb-1'>
+                  Item:{' '}
+                  {purchaseItems.find((p) => p.value === item.purchase_item_id)
+                    ?.label || `Item ${idx + 1}`}
+                </label>
+                <DateInput
+                  required
+                  name={`items.${idx}.received_date`}
+                  value={item.received_date || ''}
+                  onChange={(e) =>
+                    formik.setFieldValue(
+                      `items.${idx}.received_date`,
+                      e.target.value
+                    )
+                  }
+                  onBlur={formik.handleBlur}
+                  isError={isRepeaterInputError(idx, 'received_date').isError}
+                  errorMessage={
+                    isRepeaterInputError(idx, 'received_date').errorMessage
+                  }
+                  placeholder='Pilih tanggal diterima'
+                  className={{
+                    wrapper: 'w-full max-w-xs',
+                  }}
+                />
               </div>
+            </div>
+          ))}
+        </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,60 +301,37 @@ const PurchaseOrderStaffApprovalForm = ({
     }
   };
 
-  return (
+  // ===== TABLE COLUMNS DEFINITION =====
-    <>
+  const columns = useMemo(
-      <form
+    () => [
-        onSubmit={formik.handleSubmit}
+      {
-        className='w-full flex flex-col gap-6'
+        accessorKey: 'purchase_item',
-      >
+        header: () => (
-        <div className='w-full'>
+          <div>
-          <h2 className='text-lg font-semibold mb-4'>Konfirmasi Approve Pembelian</h2>
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                  <tr>
-                    <th>
             Item
             <span className='text-error'>*</span>
-                    </th>
+          </div>
-                    <th>Gudang</th>
+        ),
-                    <th>Produk</th>
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-                    <th>Jenis Produk</th>
+          const idx = props.row.index;
-                    <th>Jumlah</th>
+          const item = formik.values.items?.[idx];
-                    <th>Satuan</th>
+
-                    <th>
-                      Harga Satuan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Total (Rp.)
-                      <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}
+              value={item?.purchase_item}
               key={`purchase-item-${idx}`}
               onChange={(val) =>
                 purchaseItemChangeHandler(idx, val)
               }
               options={getPurchaseItemOptions()}
               isError={
-                              getPurchaseItemError(idx, 'purchase_item_id')
+                isRepeaterInputError(idx, 'purchase_item_id')
                   .isError
               }
               errorMessage={
-                              getPurchaseItemError(idx, 'purchase_item_id')
+                isRepeaterInputError(idx, 'purchase_item_id')
                   .errorMessage
               }
               placeholder='Pilih Item...'
@@ -361,12 +339,23 @@ const PurchaseOrderStaffApprovalForm = ({
                 wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
               }}
             />
-                        </td>
+          );
-                        <td>
+        },
+      },
+      {
+        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={selectedPurchaseItem?.warehouse?.name || ''}
+              value={selectedItem?.warehouse?.name || ''}
               readOnly={true}
               placeholder='Pilih item terlebih dahulu'
               className={{
@@ -374,12 +363,23 @@ const PurchaseOrderStaffApprovalForm = ({
               }}
               disabled={true}
             />
-                        </td>
+          );
-                        <td>
+        },
+      },
+      {
+        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={selectedPurchaseItem?.product?.name || ''}
+              value={selectedItem?.product?.name || ''}
               readOnly={true}
               placeholder='Pilih item terlebih dahulu'
               className={{
@@ -387,17 +387,26 @@ const PurchaseOrderStaffApprovalForm = ({
               }}
               disabled={true}
             />
-                        </td>
+          );
-                        <td>
+        },
+      },
+      {
+        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 selectedPurchaseItem?.product
+                typeof selectedItem?.product?.product_category === 'string'
-                                ?.product_category === 'string'
+                  ? selectedItem.product.product_category
-                                ? selectedPurchaseItem.product.product_category
+                  : selectedItem?.product?.product_category?.name || ''
-                                : selectedPurchaseItem?.product
-                                    ?.product_category?.name || ''
               }
               readOnly={true}
               placeholder='Pilih item terlebih dahulu'
@@ -406,16 +415,25 @@ const PurchaseOrderStaffApprovalForm = ({
               }}
               disabled={true}
             />
-                        </td>
+          );
-                        <td>
+        },
+      },
+      {
+        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={
-                              selectedPurchaseItem?.quantity
+                selectedItem?.quantity
-                                ? selectedPurchaseItem.quantity.toLocaleString(
+                  ? selectedItem.quantity.toLocaleString('id-ID')
-                                    'id-ID'
-                                  )
                   : ''
               }
               readOnly={true}
@@ -425,14 +443,23 @@ const PurchaseOrderStaffApprovalForm = ({
               }}
               disabled={true}
             />
-                        </td>
+          );
-                        <td>
+        },
+      },
+      {
+        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={
+              value={selectedItem?.product?.uom?.name || ''}
-                              selectedPurchaseItem?.product?.uom?.name || ''
-                            }
               readOnly={true}
               placeholder='Pilih item terlebih dahulu'
               className={{
@@ -440,12 +467,26 @@ const PurchaseOrderStaffApprovalForm = ({
               }}
               disabled={true}
             />
-                        </td>
+          );
-                        <td>
+        },
+      },
+      {
+        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 || ''}
+              value={item?.price || ''}
               onChange={(e) =>
                 handlePurchaseItemChange(
                   idx,
@@ -460,20 +501,34 @@ const PurchaseOrderStaffApprovalForm = ({
               thousandSeparator=','
               decimalSeparator='.'
               inputPrefix={'Rp'}
-                            isError={getPurchaseItemError(idx, 'price').isError}
+              isError={isRepeaterInputError(idx, 'price').isError}
               errorMessage={
-                              getPurchaseItemError(idx, 'price').errorMessage
+                isRepeaterInputError(idx, 'price').errorMessage
               }
               className={{
                 wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
               }}
             />
-                        </td>
+          );
-                        <td>
+        },
+      },
+      {
+        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 || ''}
+              value={item?.total_price || ''}
               onChange={(e) =>
                 handlePurchaseItemChange(
                   idx,
@@ -489,23 +544,57 @@ const PurchaseOrderStaffApprovalForm = ({
               decimalSeparator='.'
               inputPrefix={'Rp'}
               isError={
-                              getPurchaseItemError(idx, 'total_price').isError
+                isRepeaterInputError(idx, 'total_price').isError
               }
               errorMessage={
-                              getPurchaseItemError(idx, 'total_price')
+                isRepeaterInputError(idx, 'total_price')
                   .errorMessage
               }
               className={{
                 wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
               }}
             />
-                        </td>
-                      </tr>
           );
-                  })}
+        },
-                </tbody>
+      },
-              </table>
+    ],
+    [formik.values.items, formik.handleBlur, purchaseItemChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, purchaseItems]
+  );
+
+  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 Approve Pembelian
+          </h2>
+          <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'