feat(FE-181-179-220-271): adding SO export PDF and adjusting delivery form

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

@@ -13,11 +13,12 @@ import {
   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' | 'deliver';
+  formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
   rowSelection: Record<string, boolean>;
   setRowSelection: React.Dispatch<
     React.SetStateAction<Record<string, boolean>>
@@ -27,6 +28,7 @@ type DeliveryOrderProductTableProps = {
   onEdit: (id: number) => void;
   onBulkDelete: () => void;
   onAddProductClick: () => void;
+  onInputDate: (data: DeliveryOrderProductFormValues) => void;
 };
 
 const DeliveryOrderProductTable = ({
@@ -40,6 +42,7 @@ const DeliveryOrderProductTable = ({
   onEdit,
   onBulkDelete,
   onAddProductClick,
+  onInputDate,
 }: DeliveryOrderProductTableProps) => {
   const onDeleteRef = useRef(onDelete);
   const onEditRef = useRef(onDelete);
@@ -53,51 +56,86 @@ const DeliveryOrderProductTable = ({
     return acc && deliveredQty.length != salesOrder.length;
   }, true);
 
-  const columns = useMemo(
-    () => [
-      {
-        id: 'select',
-        header: ({
-          table,
-        }: {
-          table: TanStack.Table<DeliveryOrderProductFormValues>;
-        }) => (
-          <div className='w-full flex flex-row justify-center'>
-            <CheckboxInput
-              name='allRow'
-              checked={table.getIsAllRowsSelected()}
-              indeterminate={table.getIsSomeRowsSelected()}
-              onChange={table.getToggleAllRowsSelectedHandler()}
-            />
-          </div>
-        ),
-        cell: ({
-          row,
-        }: {
-          row: TanStack.Row<DeliveryOrderProductFormValues>;
-        }) => (
-          <div>
-            <CheckboxInput
-              name='row'
-              checked={row.getIsSelected()}
-              disabled={!row.getCanSelect()}
-              indeterminate={row.getIsSomeSelected()}
-              onChange={row.getToggleSelectedHandler()}
-            />
-          </div>
-        ),
-      },
+  const columns = useMemo(() => {
+    const cols = [
+      // {
+      //   id: 'select',
+      //   header: ({
+      //     table,
+      //   }: {
+      //     table: TanStack.Table<DeliveryOrderProductFormValues>;
+      //   }) => (
+      //     <div className='w-full flex flex-row justify-center'>
+      //       <CheckboxInput
+      //         name='allRow'
+      //         checked={table.getIsAllRowsSelected()}
+      //         indeterminate={table.getIsSomeRowsSelected()}
+      //         onChange={table.getToggleAllRowsSelectedHandler()}
+      //       />
+      //     </div>
+      //   ),
+      //   cell: ({
+      //     row,
+      //   }: {
+      //     row: TanStack.Row<DeliveryOrderProductFormValues>;
+      //   }) => (
+      //     <div>
+      //       <CheckboxInput
+      //         name='row'
+      //         checked={row.getIsSelected()}
+      //         disabled={!row.getCanSelect()}
+      //         indeterminate={row.getIsSomeSelected()}
+      //         onChange={row.getToggleSelectedHandler()}
+      //       />
+      //     </div>
+      //   ),
+      // },
       {
         accessorFn: (row: DeliveryOrderProductFormValues) => row.do_number,
         header: 'No. Pengiriman',
         cell: (
           props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) => props.row.original.do_number ?? '-',
+        ) => <div>{props.row.original.do_number}</div>,
       },
       {
         accessorFn: (row: DeliveryOrderProductFormValues) =>
-          formatDate(row.delivery_date as string, 'DD MMM YYYY'),
+          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'
+              )}
+          </>
+        ),
       },
       {
         accessorFn: (row: DeliveryOrderProductFormValues) =>
@@ -145,30 +183,39 @@ const DeliveryOrderProductTable = ({
           props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
         ) => (
           <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
-            <Button
-              color='success'
-              className='p-1'
-              onClick={() => onEditRef.current(props.row.original.id as number)}
-              type='button'
-            >
-              <Icon icon='mdi:edit' width={16} height={16} />
-            </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>
+            <>
+              <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> */}
+            </>
           </div>
         ),
       },
-    ],
-    []
-  );
+    ];
+    if (formType == 'add_deliver') {
+      return cols.filter(
+        (col) => col.header != 'Aksi' && col.header != 'No. Pengiriman'
+      );
+    }
+    return cols;
+  }, [formType, onInputDate, onEditRef]);
 
   return (
     <>
@@ -185,7 +232,7 @@ const DeliveryOrderProductTable = ({
             'px-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
           bodyRowClassName: 'border-b border-b-gray-200',
           bodyColumnClassName:
-            'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+            'px-2 py-2 last:flex last:flex-row last:justify-end',
           paginationClassName: 'hidden',
         }}
         emptyContent={
@@ -199,16 +246,16 @@ 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>
+        </Button> */}
         {selectedRowIds.length > 0 && (
           <Button
             type='button'