fix(FE-179-220): Adjust form add and edit delivery, add validation to prevent duplicate product

src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx

@@ -4,7 +4,6 @@ import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import * as TanStack from '@tanstack/react-table';
 import { useMemo, useRef } from 'react';
-import CheckboxInput from '@/components/input/CheckboxInput';
 import {
   cn,
   formatCurrency,
@@ -12,49 +11,24 @@ import {
   formatNumber,
   formatVechicleNumber,
 } from '@/lib/helper';
-import { SalesOrderProductFormValues } from '../repeater/sales-order/SalesOrderProduct.schema';
-import DateInput from '@/components/input/DateInput';
 
 type DeliveryOrderProductTableProps = {
   data: DeliveryOrderProductFormValues[];
-  salesOrder: SalesOrderProductFormValues[];
   formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
-  rowSelection: Record<string, boolean>;
-  setRowSelection: React.Dispatch<
-    React.SetStateAction<Record<string, boolean>>
-  >;
-  selectedRowIds: number[];
-  onDelete: (id: number) => void;
   onEdit: (id: number) => void;
-  onBulkDelete: () => void;
   onAddProductClick: () => void;
-  onInputDate: (data: DeliveryOrderProductFormValues) => void;
 };
 
 const DeliveryOrderProductTable = ({
   data,
-  salesOrder,
   formType,
-  rowSelection,
-  setRowSelection,
-  selectedRowIds,
-  onDelete,
   onEdit,
-  onBulkDelete,
   onAddProductClick,
-  onInputDate,
 }: DeliveryOrderProductTableProps) => {
-  const onDeleteRef = useRef(onDelete);
-  const onEditRef = useRef(onDelete);
-  onDeleteRef.current = onDelete;
+  const onEditRef = useRef(onEdit);
   onEditRef.current = onEdit;
 
-  const canAddData = salesOrder.reduce((acc, curr) => {
-    const deliveredQty = data.filter(
-      (deliveryItem) => deliveryItem.marketing_product_id == curr.id
-    );
-    return acc && deliveredQty.length != salesOrder.length;
-  }, true);
+  const canAddData = data.filter((item) => !Boolean(item.qty));
 
   const columns = useMemo(() => {
     const cols = [
@@ -93,54 +67,23 @@ const DeliveryOrderProductTable = ({
       {
         accessorFn: (row: DeliveryOrderProductFormValues) => row.do_number,
         header: 'No. Pengiriman',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) => <div>{props.row.original.do_number}</div>,
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          row.delivery_date
-            ? formatDate(row.delivery_date as string, 'DD MMM YYYY')
-            : '-',
-        header: 'Tanggal Delivery',
         cell: (
           props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
         ) => (
           <>
-            {formType == 'add_deliver' && (
-              <DateInput
-                name={`delivery_date_${props.row.original.marketing_product_id}`}
-                className={{
-                  input: 'p-0',
-                  inputWrapper: 'py-1 px-3  h-fit w-fit bg-white',
-                  wrapper: 'p-0',
-                }}
-                value={
-                  props.row.original.delivery_date
-                    ? formatDate(props.row.original.delivery_date, 'yyyy-MM-DD')
-                    : undefined
-                }
-                onChange={(val) => {
-                  onInputDate({
-                    ...props.row.original,
-                    delivery_date: val.target.value,
-                  });
-                }}
-              />
-            )}
-
-            {formType == 'edit_deliver' &&
-              formatDate(
-                props.row.original.delivery_date as string,
-                'DD MMM YYYY'
-              )}
+            {props.row.original.do_number ? props.row.original.do_number : '-'}
           </>
         ),
       },
       {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          formatVechicleNumber(row.vehicle_number as string),
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.vehicle_number,
         header: 'No. Polisi',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.vehicle_number
+            ? formatVechicleNumber(props.row.original.vehicle_number as string)
+            : '-',
       },
       {
         accessorFn: (row: DeliveryOrderProductFormValues) =>
@@ -154,29 +97,77 @@ const DeliveryOrderProductTable = ({
       },
       {
         accessorFn: (row: DeliveryOrderProductFormValues) =>
-          formatCurrency(parseFloat(row.unit_price as string)),
+          row.delivery_date
+            ? formatDate(row.delivery_date as string, 'DD MMM YYYY')
+            : '-',
+        header: 'Tanggal Delivery',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.delivery_date
+            ? formatDate(
+                props.row.original.delivery_date as string,
+                'DD MMM YYYY'
+              )
+            : '-',
+      },
+      {
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.unit_price,
         header: 'Harga Satuan (Rp)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.unit_price
+            ? formatCurrency(
+                parseFloat(props.row.original.unit_price as string)
+              )
+            : '-',
       },
       {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          formatNumber(parseFloat(row.total_weight as string)),
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.total_weight,
         header: 'Total Bobot (Kg)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.total_weight
+            ? formatNumber(
+                parseFloat(props.row.original.total_weight as string)
+              )
+            : '-',
       },
       {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          formatNumber(parseFloat(row.qty as string)),
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.qty,
         header: 'Kuantitas',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.qty
+            ? formatNumber(parseFloat(props.row.original.qty as string))
+            : '-',
       },
       {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          formatNumber(parseFloat(row.avg_weight as string)),
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.avg_weight,
         header: 'Avg. Bobot (Kg)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.avg_weight
+            ? formatNumber(parseFloat(props.row.original.avg_weight as string))
+            : '-',
       },
       {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          formatCurrency(parseFloat(row.total_price as string)),
+        accessorFn: (row: DeliveryOrderProductFormValues) => row.total_price,
         header: 'Total Penjualan (Rp)',
+        cell: (
+          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
+        ) =>
+          props.row.original.total_price
+            ? formatCurrency(
+                parseFloat(props.row.original.total_price as string)
+              )
+            : '-',
       },
+
       {
         header: 'Aksi',
         cell: (
@@ -184,44 +175,45 @@ const DeliveryOrderProductTable = ({
         ) => (
           <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
             <>
-              <Button
-                color='warning'
-                className='px-2 py-1 text-sm'
-                onClick={() =>
-                  onEditRef.current(props.row.original.id as number)
-                }
-                type='button'
-              >
-                <Icon icon='mdi:edit' width={16} height={16} /> Edit
-              </Button>
-              {/* <Button
-                color='error'
-                className='p-1'
-                onClick={() =>
-                  onDeleteRef.current(props.row.original.id as number)
-                }
-                type='button'
-              >
-                <Icon icon='mdi:trash' width={16} height={16} />
-              </Button> */}
+              {props.row.original.qty && (
+                <Button
+                  color='warning'
+                  className='px-2 py-1 text-sm'
+                  onClick={() =>
+                    onEditRef.current(props.row.original.id as number)
+                  }
+                  type='button'
+                >
+                  <Icon icon='mdi:edit' width={16} height={16} /> Edit
+                </Button>
+              )}
+              {!props.row.original.qty && '-'}
+              {/* {formType == 'add_deliver' && (
+                <Button
+                  color='error'
+                  className='p-1'
+                  onClick={() =>
+                    onDeleteRef.current(props.row.original.id as number)
+                  }
+                  type='button'
+                >
+                  <Icon icon='mdi:trash' width={16} height={16} />
+                </Button>
+              )} */}
             </>
           </div>
         ),
       },
     ];
     if (formType == 'add_deliver') {
-      return cols.filter(
-        (col) => col.header != 'Aksi' && col.header != 'No. Pengiriman'
-      );
+      return cols.filter((col) => col.header != 'No. Pengiriman');
     }
     return cols;
-  }, [formType, onInputDate, onEditRef]);
+  }, [formType, onEditRef]);
 
   return (
     <>
       <Table<DeliveryOrderProductFormValues>
-        rowSelection={rowSelection}
-        setRowSelection={setRowSelection}
         data={data}
         columns={columns}
         className={{
@@ -246,17 +238,17 @@ const DeliveryOrderProductTable = ({
         }
       />
       <div className='flex flex-row gap-3 mt-3'>
-        {/* <Button
+        <Button
           type='button'
           variant='outline'
           className='justify-start w-fit py-1 text-sm'
           onClick={onAddProductClick}
-          // disabled={!canAddData}
+          disabled={!canAddData}
         >
           <Icon icon='mdi:plus' width={16} height={16} />
           Tambah Pengiriman
-        </Button> */}
-        {selectedRowIds.length > 0 && (
+        </Button>
+        {/* {selectedRowIds.length > 0 && (
           <Button
             type='button'
             variant='outline'
@@ -271,7 +263,7 @@ const DeliveryOrderProductTable = ({
               : ''}{' '}
             Pengiriman
           </Button>
-        )}
+        )} */}
       </div>
     </>
   );

src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx

@@ -16,7 +16,7 @@ import CheckboxInput from '@/components/input/CheckboxInput';
 
 type SalesOrderProductTableProps = {
   data: SalesOrderProductFormValues[];
-  formType?: 'add' | 'edit' | 'deliver';
+  formType: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
   rowSelection: Record<string, boolean>;
   setRowSelection: React.Dispatch<
     React.SetStateAction<Record<string, boolean>>
@@ -140,7 +140,7 @@ const SalesOrderProductTable = ({
         setRowSelection={setRowSelection}
         data={data}
         columns={
-          formType == 'deliver'
+          formType == 'add_deliver' || formType == 'edit_deliver'
             ? columns.filter(
                 (col) => col.header != 'Aksi' && col.id != 'select'
               )
@@ -167,7 +167,7 @@ const SalesOrderProductTable = ({
           </div>
         }
       />
-      {formType != 'deliver' && (
+      {formType != 'add_deliver' && formType != 'edit_deliver' && (
         <div className='flex flex-row gap-3 mt-3'>
           <Button
             type='button'