feat(FE-208): enhance Purchase Order acceptance form with Card component and improved layout for received date inputs

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

@@ -10,6 +10,7 @@ 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 Card from '@/components/Card';
 import * as TanStack from '@tanstack/react-table';
 
 import {
@@ -406,7 +407,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -418,12 +424,9 @@ const PurchaseOrderAcceptApprovalForm = ({
               key={`purchase-item-${idx}`}
               onChange={(val) => purchaseItemChangeHandler(idx, val)}
               options={getPurchaseItemOptions()}
-              isError={
+              isError={isRepeaterInputError(idx, 'purchase_item_id').isError}
-                isRepeaterInputError(idx, 'purchase_item_id').isError
-              }
               errorMessage={
-                isRepeaterInputError(idx, 'purchase_item_id')
+                isRepeaterInputError(idx, 'purchase_item_id').errorMessage
-                  .errorMessage
               }
               placeholder='Pilih Item...'
               className={{
@@ -441,7 +444,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -453,9 +461,7 @@ const PurchaseOrderAcceptApprovalForm = ({
               key={`warehouse-${idx}`}
               onChange={(val) => warehouseChangeHandler(idx, val)}
               options={getWarehouseOptions()}
-              isError={
+              isError={isRepeaterInputError(idx, 'warehouse_id').isError}
-                isRepeaterInputError(idx, 'warehouse_id').isError
-              }
               errorMessage={
                 isRepeaterInputError(idx, 'warehouse_id').errorMessage
               }
@@ -475,7 +481,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -492,12 +503,9 @@ const PurchaseOrderAcceptApprovalForm = ({
                 )
               }
               onBlur={formik.handleBlur}
-              isError={
+              isError={isRepeaterInputError(idx, 'travel_number').isError}
-                isRepeaterInputError(idx, 'travel_number').isError
-              }
               errorMessage={
-                isRepeaterInputError(idx, 'travel_number')
+                isRepeaterInputError(idx, 'travel_number').errorMessage
-                  .errorMessage
               }
               placeholder='Masukkan no. surat jalan'
               className={{
@@ -515,7 +523,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -533,12 +546,10 @@ const PurchaseOrderAcceptApprovalForm = ({
               }
               onBlur={formik.handleBlur}
               isError={
-                isRepeaterInputError(idx, 'travel_document_path')
+                isRepeaterInputError(idx, 'travel_document_path').isError
-                  .isError
               }
               errorMessage={
-                isRepeaterInputError(idx, 'travel_document_path')
+                isRepeaterInputError(idx, 'travel_document_path').errorMessage
-                  .errorMessage
               }
               placeholder='Masukkan path dokumen'
               className={{
@@ -556,7 +567,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -573,12 +589,9 @@ const PurchaseOrderAcceptApprovalForm = ({
                 )
               }
               onBlur={formik.handleBlur}
-              isError={
+              isError={isRepeaterInputError(idx, 'vehicle_number').isError}
-                isRepeaterInputError(idx, 'vehicle_number').isError
-              }
               errorMessage={
-                isRepeaterInputError(idx, 'vehicle_number')
+                isRepeaterInputError(idx, 'vehicle_number').errorMessage
-                  .errorMessage
               }
               placeholder='Masukkan nomor kendaraan'
               className={{
@@ -596,7 +609,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -606,17 +624,13 @@ const PurchaseOrderAcceptApprovalForm = ({
               isClearable={true}
               value={item?.expedition_vendor}
               key={`expedition-vendor-${idx}`}
-              onChange={(val) =>
+              onChange={(val) => expeditionVendorChangeHandler(idx, val)}
-                expeditionVendorChangeHandler(idx, val)
-              }
               options={getExpeditionVendorOptions()}
               isError={
-                isRepeaterInputError(idx, 'expedition_vendor_id')
+                isRepeaterInputError(idx, 'expedition_vendor_id').isError
-                  .isError
               }
               errorMessage={
-                isRepeaterInputError(idx, 'expedition_vendor_id')
+                isRepeaterInputError(idx, 'expedition_vendor_id').errorMessage
-                  .errorMessage
               }
               placeholder='Pilih Vendor...'
               className={{
@@ -634,7 +648,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -644,11 +663,7 @@ const PurchaseOrderAcceptApprovalForm = ({
               name={`items.${idx}.received_qty`}
               value={item?.received_qty || ''}
               onChange={(e) =>
-                handlePurchaseItemChange(
+                handlePurchaseItemChange(idx, 'received_qty', e.target.value)
-                  idx,
-                  'received_qty',
-                  e.target.value
-                )
               }
               onBlur={formik.handleBlur}
               placeholder='Masukkan jumlah diterima'
@@ -656,9 +671,7 @@ const PurchaseOrderAcceptApprovalForm = ({
               decimalScale={0}
               thousandSeparator=','
               decimalSeparator='.'
-              isError={
+              isError={isRepeaterInputError(idx, 'received_qty').isError}
-                isRepeaterInputError(idx, 'received_qty').isError
-              }
               errorMessage={
                 isRepeaterInputError(idx, 'received_qty').errorMessage
               }
@@ -677,7 +690,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -700,13 +718,9 @@ const PurchaseOrderAcceptApprovalForm = ({
               thousandSeparator=','
               decimalSeparator='.'
               inputPrefix={'Rp'}
-              isError={
+              isError={isRepeaterInputError(idx, 'transport_per_item').isError}
-                isRepeaterInputError(idx, 'transport_per_item')
-                  .isError
-              }
               errorMessage={
-                isRepeaterInputError(idx, 'transport_per_item')
+                isRepeaterInputError(idx, 'transport_per_item').errorMessage
-                  .errorMessage
               }
               className={{
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
@@ -723,7 +737,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -733,11 +752,7 @@ const PurchaseOrderAcceptApprovalForm = ({
               name={`items.${idx}.transport_total`}
               value={item?.transport_total || ''}
               onChange={(e) =>
-                handlePurchaseItemChange(
+                handlePurchaseItemChange(idx, 'transport_total', e.target.value)
-                  idx,
-                  'transport_total',
-                  e.target.value
-                )
               }
               onBlur={formik.handleBlur}
               placeholder='Masukkan total transport'
@@ -746,12 +761,9 @@ const PurchaseOrderAcceptApprovalForm = ({
               thousandSeparator=','
               decimalSeparator='.'
               inputPrefix={'Rp'}
-              isError={
+              isError={isRepeaterInputError(idx, 'transport_total').isError}
-                isRepeaterInputError(idx, 'transport_total').isError
-              }
               errorMessage={
-                isRepeaterInputError(idx, 'transport_total')
+                isRepeaterInputError(idx, 'transport_total').errorMessage
-                  .errorMessage
               }
               className={{
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
@@ -761,10 +773,23 @@ const PurchaseOrderAcceptApprovalForm = ({
         },
       },
     ],
-    [formik.values.items, formik.handleBlur, purchaseItemChangeHandler, warehouseChangeHandler, expeditionVendorChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, getWarehouseOptions, getExpeditionVendorOptions]
+    [
+      formik.values.items,
+      formik.handleBlur,
+      purchaseItemChangeHandler,
+      warehouseChangeHandler,
+      expeditionVendorChangeHandler,
+      handlePurchaseItemChange,
+      getPurchaseItemOptions,
+      getWarehouseOptions,
+      getExpeditionVendorOptions,
+    ]
   );
 
-  const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
+  const tableData = useMemo(
+    () => formik.values.items || [],
+    [formik.values.items]
+  );
 
   return (
     <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
@@ -774,21 +799,20 @@ const PurchaseOrderAcceptApprovalForm = ({
         </h2>
 
         {/* Date Inputs Section - Above Table */}
-        <div className='mb-4 space-y-3'>
+        <Card
-          <h3 className='text-md font-semibold'>Tanggal Penerimaan Produk</h3>
+          variant='bordered'
-          {formik.values.items?.map((item, idx) => (
+          className={{
-            <div
+            wrapper: 'mb-6 w-full!',
-              key={`received-date-${idx}`}
+            body: 'p-4!',
-              className='flex items-center gap-4'
+            title: 'text-lg! font-semibold!',
-            >
+          }}
-              <div className='flex-1 max-w-sm'>
+        >
-                <label className='block text-sm font-medium mb-1'>
+          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
-                  Item:{' '}
+            {formik.values.items?.map((item, idx) => (
-                  {purchaseItems.find((p) => p.value === item.purchase_item_id)
+              <div key={`received-date-${idx}`} className='space-y-2'>
-                    ?.label || `Item ${idx + 1}`}
-                </label>
                 <DateInput
                   required
+                  label={'Tanggal Penerimaan Produk'}
                   name={`items.${idx}.received_date`}
                   value={item.received_date || ''}
                   onChange={(e) =>
@@ -804,13 +828,14 @@ const PurchaseOrderAcceptApprovalForm = ({
                   }
                   placeholder='Pilih tanggal diterima'
                   className={{
-                    wrapper: 'w-full max-w-xs',
+                    wrapper: 'w-full',
                   }}
+                  isNestedModal={true}
                 />
               </div>
-            </div>
+            ))}
-          ))}
+          </div>
-        </div>
+        </Card>
 
         <Table
           data={tableData}
@@ -822,15 +847,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             headerColumnClassName:
               'px-2 py-3 text-xs font-semibold text-gray-500',
             bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName:
+            bodyColumnClassName: 'px-2 py-2',
-              'px-2 py-2',
             paginationClassName: 'hidden',
           }}
           emptyContent={
             <div className='w-full p-5 text-center'>
-              <span className='text-lg opacity-50'>
+              <span className='text-lg opacity-50'>Belum ada data item...</span>
-                Belum ada data item...
-              </span>
             </div>
           }
         />