refactor(FE-87-106): refactor api integration untuk project flock dan project flock kandang

src/components/pages/marketing/sales-orders/SalesOrderTable.tsx

@@ -3,7 +3,7 @@
 import Button from '@/components/Button';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import { OptionType } from '@/components/input/SelectInput';
-import { useModal } from '@/components/Modal';
+import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
@@ -12,7 +12,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
+import { cn, formatCurrency, formatVechicleNumber } from '@/lib/helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
@@ -83,6 +83,7 @@ const SalesOrderTable = () => {
   const [approveAction, setApproveAction] = useState<
     'approve' | 'reject' | null
   >(null);
+  const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection).filter(
     (id) => rowSelection[id]
@@ -96,6 +97,7 @@ const SalesOrderTable = () => {
 
   const deleteModal = useModal();
   const confirmationModal = useModal();
+  const productsModal = useModal();
 
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -123,6 +125,11 @@ const SalesOrderTable = () => {
     confirmationModal.openModal();
   };
 
+  const productsClickHandler = (item: Marketing) => {
+    setSelectedItem(item);
+    productsModal.openModal();
+  };
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -162,6 +169,7 @@ const SalesOrderTable = () => {
               color='success'
               onClick={approveClickHandler}
               className='justify-start text-sm'
+              disabled={!selectedRowIds.length}
             >
               <Icon icon='material-symbols:check' width={24} height={24} />
               Approve
@@ -171,6 +179,7 @@ const SalesOrderTable = () => {
               color='error'
               onClick={rejectClickHandler}
               className='justify-start text-sm'
+              disabled={!selectedRowIds.length}
             >
               <Icon icon='material-symbols:close' width={24} height={24} />
               Reject
@@ -229,16 +238,28 @@ const SalesOrderTable = () => {
             {
               accessorKey: 'marketing_products.length',
               header: 'Product Details',
-              cell: (props) => (
-                <ul className='list-disc list-inside'>
-                  {props.row.original.marketing_products?.map((product) => (
-                    <li key={product.id}>
-                      {product.product_warehouse.product.name} - Qty:{' '}
-                      {product.qty}
-                    </li>
-                  ))}
-                </ul>
-              ),
+              cell: (props) => {
+                if (props?.row?.original?.marketing_products?.length) {
+                  if (props?.row?.original?.marketing_products?.length > 1) {
+                    return (
+                      <Button
+                        variant='link'
+                        color='success'
+                        className='p-0 text-none'
+                        onClick={() => {
+                          productsClickHandler(props?.row?.original);
+                        }}
+                      >
+                        Lihat {props?.row?.original?.marketing_products?.length}{' '}
+                        Produk
+                      </Button>
+                    );
+                  } else {
+                    const product = props?.row?.original?.marketing_products[0];
+                    return <>{product?.product_warehouse?.product?.name}</>;
+                  }
+                }
+              },
             },
             {
               header: 'Aksi',
@@ -321,6 +342,64 @@ const SalesOrderTable = () => {
           color: approveAction === 'approve' ? 'success' : 'error',
         }}
       />
+
+      <Modal
+        ref={productsModal.ref}
+        className={{
+          modalBox: 'max-w-2/5 z-100',
+        }}
+        closeOnBackdrop
+      >
+        <div className='flex flex-row justify-between items-center mb-3'>
+          <h4 className='text-xl font-semibold'>Daftar Produk</h4>
+          <Button
+            variant='ghost'
+            color='error'
+            onClick={productsModal.closeModal}
+            className='justify-start text-sm rounded-full'
+          >
+            <Icon icon='mdi:close' width={16} height={16} />
+          </Button>
+        </div>
+        <Table<MarketingProduct>
+          data={
+            isResponseSuccess(marketing) && selectedItem
+              ? (selectedItem?.marketing_products ?? [])
+              : []
+          }
+          columns={[
+            {
+              header: 'Kandang',
+              accessorFn(row) {
+                return row.product_warehouse.warehouse.name;
+              },
+            },
+            {
+              header: 'Produk',
+              accessorFn(row) {
+                return row.product_warehouse.product.name;
+              },
+            },
+            {
+              header: 'Harga Satuan (Rp)',
+              accessorFn(row) {
+                return formatCurrency(row.unit_price);
+              },
+            },
+          ]}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Modal>
     </>
   );
 };

src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx

@@ -6,7 +6,6 @@ import { FormHeader } from '@/components/helper/form/FormHeader';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
-import { isResponseSuccess } from '@/lib/api-helper';
 import {
   cn,
   formatCurrency,
@@ -33,6 +32,7 @@ const SalesOrderDetail = ({
 
   const deleteModal = useModal();
   const confirmationModal = useModal();
+  const deliveryModal = useModal();
 
   const approveClickHandler = () => {
     setApprovalAction('approve');
@@ -44,6 +44,10 @@ const SalesOrderDetail = ({
     confirmationModal.openModal();
   };
 
+  const deliveryClickHandler = () => {
+    deliveryModal.openModal();
+  };
+
   const deleteClickHandler = () => {
     deleteModal.openModal();
   };
@@ -59,16 +63,25 @@ const SalesOrderDetail = ({
 
   const confirmationModalApproveClickHandler = async () => {
     setIsLoading(true);
-    await MarketingApi.singleApproval(
-      initialValues?.id as number,
-      approvalAction
-    );
+    // await MarketingApi.singleApproval(
+    //   initialValues?.id as number,
+    //   approvalAction
+    // );
     setIsLoading(false);
     confirmationModal.closeModal();
     toast.success('Successfully approved Sales Order!');
     refreshValues?.();
   };
 
+  const confirmationModalDeliveryClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.delivery(initialValues?.id as number);
+    setIsLoading(false);
+    deliveryModal.closeModal();
+    toast.success('Successfully delivered Sales Order!');
+    refreshValues?.();
+  };
+
   return (
     <>
       <div className='flex flex-col w-full gap-4'>
@@ -77,14 +90,32 @@ const SalesOrderDetail = ({
           backUrl='/marketing/sales-orders'
         />
         <div className='flex-row flex gap-3'>
-          <Button color='success' onClick={approveClickHandler}>
-            <Icon icon='mdi:check' width={24} height={24} />
-            Approve
-          </Button>
-          <Button color='error' onClick={rejectClickHandler}>
-            <Icon icon='mdi:close' width={24} height={24} />
-            Reject
-          </Button>
+          {initialValues?.approval?.step_number != 3 && (
+            <>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                disabled={initialValues?.approval?.step_number != 1}
+              >
+                <Icon icon='mdi:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                disabled={initialValues?.approval?.step_number != 2}
+              >
+                <Icon icon='mdi:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+          {initialValues?.approval?.step_number == 2 && (
+            <Button color='success' onClick={deliveryClickHandler}>
+              <Icon icon='mdi:check' width={24} height={24} />
+              Delivery Order
+            </Button>
+          )}
         </div>
         <Card
           title='Informasi Sales Order'
@@ -110,7 +141,7 @@ const SalesOrderDetail = ({
                 <tr>
                   <td className='font-semibold'>Status</td>
                   <td>:</td>
-                  <td>{initialValues?.status}</td>
+                  <td>{initialValues?.approval?.step_name}</td>
                 </tr>
                 <tr>
                   <td className='font-semibold'>Tanggal Penjualan</td>
@@ -214,7 +245,11 @@ const SalesOrderDetail = ({
           </Card>
         )}
         <div className='flex flex-row gap-3'>
-          <Button color='warning'>
+          <Button
+            color='warning'
+            type='button'
+            href={`/marketing/sales-orders/detail/edit?salesOrderId=${initialValues?.id}`}
+          >
             <Icon icon='mdi:pencil' width={24} height={24} />
             Edit
           </Button>
@@ -235,12 +270,13 @@ const SalesOrderDetail = ({
           text: 'Ya',
           color: 'error',
           isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
         }}
       />
       <ConfirmationModal
         ref={confirmationModal.ref}
         type={approvalAction === 'approve' ? 'success' : 'error'}
-        text={`Apakah anda yakin ingin ${approvalAction} data penjualan (${initialValues?.id})?`}
+        text={`Apakah anda yakin ingin ${approvalAction} data penjualan ini?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -251,6 +287,20 @@ const SalesOrderDetail = ({
           onClick: confirmationModalApproveClickHandler,
         }}
       />
+      <ConfirmationModal
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isLoading,
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
     </>
   );
 };

src/components/pages/marketing/sales-orders/form/SalesForm.tsx

@@ -10,7 +10,8 @@ import SelectInput, {
 } from '@/components/input/SelectInput';
 import TextArea from '@/components/input/TextArea';
 import Modal, { useModal } from '@/components/Modal';
-import Table from '@/components/Table';
+import * as TanStack from '@tanstack/react-table';
+import Table from '@/components/Table'; // Keep this import
 import { cn, formatCurrency, formatNumber } from '@/lib/helper';
 import {
   CreateMarketingPayload,
@@ -19,7 +20,7 @@ import {
   MarketingProduct,
 } from '@/types/api/marketing/marketing';
 import { Icon } from '@iconify/react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import MarketingProductForm from './repeater/MarketingProductForm';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import { Customer } from '@/types/api/master-data/customer';
@@ -29,6 +30,9 @@ import { MarketingFormValues, MarketingSchema } from './SalesForm.schema';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
 import { MarketingProductFormValues } from './repeater/MarketingProduct.schema';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
 
 const SalesForm = ({
   formType = 'add',
@@ -37,11 +41,14 @@ const SalesForm = ({
   formType?: 'add' | 'edit';
   initialValues?: Marketing;
 }) => {
+  const router = useRouter();
   const addProductModal = useModal();
+  const deleteModal = useModal();
 
+  const [isLoading, setIsLoading] = useState(false);
   const [selectedMarketingProduct, setSelectedMarketingProduct] =
     useState<MarketingProduct | null>(null);
-  const [marketingProducts, setMarketingProducts] = useState<
+  const [rawMarketingProducts, setRawMarketingProducts] = useState<
     MarketingProduct[]
   >(initialValues?.marketing_products || []);
   const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
@@ -53,7 +60,13 @@ const SalesForm = ({
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
     parseInt(item)
   );
-  const [grandTotal, setGrandTotal] = useState<number>(0);
+  const [grandTotal, setGrandTotal] = useState<number>(
+    initialValues?.grand_total ?? 0
+  );
+  const marketingProducts = useMemo(
+    () => rawMarketingProducts,
+    [rawMarketingProducts]
+  );
 
   const {
     options: customerOptions,
@@ -61,55 +74,66 @@ const SalesForm = ({
     isLoadingOptions: isLoadingCustomerOptions,
   } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
 
-  const handleAddProduct = () => {
+  const handleAddProduct = useCallback(() => {
     addProductModal.openModal();
-  };
-  const handleDeleteProduct = (id: number) => {
-    setMarketingProducts((prev) => prev.filter((product) => product.id !== id));
-  };
+  }, [addProductModal]);
+  const handleDeleteProduct = useCallback((id: number) => {
+    setRawMarketingProducts((prev) => prev.filter((p) => p.id !== id));
+  }, []);
   const handleBulkDeleteProduct = () => {
-    setMarketingProducts((prev) =>
+    setRawMarketingProducts((prev) =>
       prev.filter((product) => !selectedRowIds.includes(product.id))
     );
   };
-  const handleAddSubmitProduct = async (
-    tableValue: CreateMarketingProductPayload,
-    fieldValues: MarketingProductFormValues
-  ) => {
-    const newMarketingProduct: MarketingProduct = {
-      id: marketingProducts.length + 1,
-      product_warehouse: tableValue.product_warehouse!,
-      unit_price: tableValue.unit_price as number,
-      total_weight: tableValue.total_weight as number,
-      qty: tableValue.qty as number,
-      avg_weight: tableValue.avg_weight as number,
-      total_price: tableValue.total_price as number,
-      marketing_delivery_products: {
-        id: marketingProducts.length + 1,
-        vehicle_number: tableValue.vehicle_number as string,
-        delivery_date: tableValue.delivery_date as string,
+  const handleDelete = () => {
+    deleteModal.openModal();
+  };
+
+  const handleAddSubmitProduct = useCallback(
+    async (
+      tableValue: CreateMarketingProductPayload,
+      fieldValues: MarketingProductFormValues
+    ) => {
+      const newMarketingProduct: MarketingProduct = {
+        id: rawMarketingProducts.length + 1,
+        product_warehouse: tableValue.product_warehouse!,
         unit_price: tableValue.unit_price as number,
         total_weight: tableValue.total_weight as number,
         qty: tableValue.qty as number,
         avg_weight: tableValue.avg_weight as number,
         total_price: tableValue.total_price as number,
-      },
-    };
+        marketing_delivery_products: {
+          id: rawMarketingProducts.length + 1,
+          vehicle_number: tableValue.vehicle_number as string,
+          delivery_date: tableValue.delivery_date as string,
+          unit_price: tableValue.unit_price as number,
+          total_weight: tableValue.total_weight as number,
+          qty: tableValue.qty as number,
+          avg_weight: tableValue.avg_weight as number,
+          total_price: tableValue.total_price as number,
+        },
+      };
 
-    setMarketingProducts((prev) => [...prev, newMarketingProduct]);
-    formik.setValues({
-      ...formik.values,
-      marketing_products: [...formik.values.marketing_products, fieldValues],
-    });
-    setGrandTotal((prev) => prev + (tableValue.total_price as number));
-    addProductModal.closeModal();
-  };
-  const handleChangeCustomer = (val: OptionType | OptionType[] | null) => {
-    setSelectedCustomer(val as OptionType);
-    formik.setFieldValue('customer_id', (val as OptionType)?.value);
-  };
+      setRawMarketingProducts((prev) => [...prev, newMarketingProduct]);
+      formik.setValues({
+        ...formik.values,
+        marketing_products: [...formik.values.marketing_products, fieldValues],
+      });
+      setGrandTotal((prev) => prev + (tableValue.total_price as number));
+      addProductModal.closeModal();
+    },
+    [rawMarketingProducts.length, addProductModal]
+  );
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      setSelectedCustomer(val as OptionType);
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    [selectedCustomer, setSelectedCustomer]
+  );
 
-  const createProjectFlockHandler = async (values: CreateMarketingPayload) => {
+  const createMarketingHandler = async (values: CreateMarketingPayload) => {
     console.log(values);
     const createMarketingRes = await MarketingApi.create(values);
     if (isResponseSuccess(createMarketingRes)) {
@@ -118,8 +142,10 @@ const SalesForm = ({
     if (isResponseError(createMarketingRes)) {
       console.log(createMarketingRes);
     }
+    toast.success('Successfully created Sales Order!');
+    router.push('/marketing/sales-orders');
   };
-  const updateProjectFlockHandler = async (values: CreateMarketingPayload) => {
+  const updateMarketingHandler = async (values: CreateMarketingPayload) => {
     console.log(values);
     const createMarketingRes = await MarketingApi.update(
       initialValues?.id as number,
@@ -131,6 +157,50 @@ const SalesForm = ({
     if (isResponseError(createMarketingRes)) {
       console.log(createMarketingRes);
     }
+    toast.success('Successfully updated Sales Order!');
+    router.push('/marketing/sales-orders');
+  };
+  const deleteMarketingHandler = async () => {
+    setIsLoading(true);
+    console.log(initialValues?.id);
+    const deleteMarketingRes = await MarketingApi.delete(
+      initialValues?.id as number
+    );
+    if (isResponseSuccess(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+    }
+    if (isResponseError(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+    }
+    toast.success('Successfully deleted Sales Order!');
+    setIsLoading(false);
+    deleteModal.closeModal();
+    router.push('/marketing/sales-orders');
+  };
+
+  const MarketingProductToFieldValues = (
+    product: MarketingProduct
+  ): MarketingProductFormValues => {
+    return {
+      vehicle_number: product.marketing_delivery_products?.vehicle_number,
+      kandang_id: product.product_warehouse.warehouse.id,
+      kandang: {
+        value: product.product_warehouse.warehouse.id,
+        label: product.product_warehouse.warehouse.name,
+      },
+      product_warehouse: {
+        value: product.product_warehouse.product.id,
+        label: product.product_warehouse.product.name,
+      },
+      product_warehouse_id: product.product_warehouse.product.id,
+      unit_price: product.unit_price,
+      total_weight: product.total_weight,
+      qty: product.qty,
+      uom: product.product_warehouse?.product?.uom?.name,
+      avg_weight: product.avg_weight,
+      total_price: product.total_price,
+      delivery_date: product.marketing_delivery_products?.delivery_date,
+    };
   };
 
   const formik = useFormik<MarketingFormValues>({
@@ -143,7 +213,10 @@ const SalesForm = ({
         value: initialValues?.customer?.id as number,
         label: initialValues?.customer?.name as string,
       },
-      marketing_products: [],
+      marketing_products:
+        initialValues?.marketing_products?.map((product) =>
+          MarketingProductToFieldValues(product)
+        ) ?? [],
     },
     validationSchema: MarketingSchema,
     onSubmit: async (values) => {
@@ -155,10 +228,10 @@ const SalesForm = ({
       } as CreateMarketingPayload;
       switch (formType) {
         case 'add':
-          createProjectFlockHandler(payload);
+          createMarketingHandler(payload);
           break;
         case 'edit':
-          updateProjectFlockHandler(payload);
+          updateMarketingHandler(payload);
           break;
         default:
           break;
@@ -172,6 +245,85 @@ const SalesForm = ({
     formikSetValues(formik.initialValues);
   }, [formikSetValues, formik.initialValues]);
 
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }: { table: TanStack.Table<MarketingProduct> }) => (
+          <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<MarketingProduct> }) => (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        ),
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.marketing_delivery_products?.vehicle_number,
+        header: 'No. Polisi',
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.product_warehouse.warehouse.name,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.product_warehouse.product.name,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatCurrency(row.unit_price),
+        header: 'Harga Satuan (Rp)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.total_weight),
+        header: 'Total Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.qty),
+        header: 'Kuantitas',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.avg_weight),
+        header: 'Avg. Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatCurrency(row.total_price),
+        header: 'Total Penjualan (Rp)',
+      },
+      {
+        header: 'Aksi',
+        cell: (props: TanStack.CellContext<MarketingProduct, unknown>) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='error'
+              className='p-1'
+              onClick={() => handleDeleteProduct(props.row.original.id)}
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [handleDeleteProduct] // dependensi tunggal
+  );
+
   return (
     <>
       <form
@@ -224,98 +376,7 @@ const SalesForm = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             data={marketingProducts}
-            columns={[
-              {
-                id: 'select',
-                header: ({ table }) => (
-                  <div className='w-full flex flex-row justify-center'>
-                    <CheckboxInput
-                      name='allRow'
-                      checked={table.getIsAllRowsSelected()}
-                      indeterminate={table.getIsSomeRowsSelected()}
-                      onChange={table.getToggleAllRowsSelectedHandler()}
-                    />
-                  </div>
-                ),
-                cell: ({ row }) => (
-                  <div>
-                    <CheckboxInput
-                      name='row'
-                      checked={row.getIsSelected()}
-                      disabled={!row.getCanSelect()}
-                      indeterminate={row.getIsSomeSelected()}
-                      onChange={row.getToggleSelectedHandler()}
-                    />
-                  </div>
-                ),
-              },
-              {
-                accessorFn(row) {
-                  return row.marketing_delivery_products?.vehicle_number;
-                },
-                header: 'No. Polisi',
-              },
-              {
-                accessorFn(row) {
-                  return row.product_warehouse.warehouse.name;
-                },
-                header: 'Kandang',
-              },
-              {
-                accessorFn(row) {
-                  return row.product_warehouse.product.name;
-                },
-                header: 'Produk',
-              },
-              {
-                accessorFn(row) {
-                  return formatCurrency(row.unit_price);
-                },
-                header: 'Harga Satuan (Rp)',
-              },
-              {
-                accessorFn(row) {
-                  return formatNumber(row.total_weight);
-                },
-                header: 'Total Bobot (Kg)',
-              },
-              {
-                accessorFn(row) {
-                  return formatNumber(row.qty);
-                },
-                header: 'Kuantitas',
-              },
-              {
-                accessorFn(row) {
-                  return formatNumber(row.avg_weight);
-                },
-                header: 'Avg. Bobot (Kg)',
-              },
-              {
-                accessorFn(row) {
-                  return formatCurrency(row.total_price);
-                },
-                header: 'Total Penjualan (Rp)',
-              },
-              {
-                header: 'Aksi',
-                cell: (props) => {
-                  return (
-                    <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
-                      <Button
-                        color='error'
-                        className='p-1'
-                        onClick={() => {
-                          handleDeleteProduct(props.row.original.id);
-                        }}
-                      >
-                        <Icon icon='mdi:trash' width={16} height={16} />
-                      </Button>
-                    </div>
-                  );
-                },
-              },
-            ]}
+            columns={columns}
             className={{
               tableWrapperClassName: 'overflow-x-auto min-h-full!',
               tableClassName: 'font-inter w-full table-auto  min-h-full!',
@@ -395,7 +456,16 @@ const SalesForm = ({
             Submit
           </Button>
         </div>
+        {JSON.stringify(formik.errors)}
       </form>
+      {formType == 'edit' && (
+        <div className='flex flex-row justify-start'>
+          <Button type='button' color='error' onClick={handleDelete}>
+            <Icon icon='mdi:trash' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      )}
       <Modal
         ref={addProductModal.ref}
         closeOnBackdrop
@@ -420,12 +490,25 @@ const SalesForm = ({
             <MarketingProductForm
               onSubmitForm={handleAddSubmitProduct}
               modalRef={addProductModal.ref}
-              data={marketingProducts}
+              data={rawMarketingProducts}
               initialValues={selectedMarketingProduct ?? undefined}
             />
           </div>
         </div>
       </Modal>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: deleteMarketingHandler,
+        }}
+      />
     </>
   );
 };