refactor(FE): refactor UI Sales Order and Delivery Order

src/app/marketing/page.tsx

@@ -1,3 +1,4 @@
+import DeliveryOrderFormModal from '@/components/pages/marketing/DeliveryOrderFormModal';
 import MarketingTable from '@/components/pages/marketing/MarketingTable';
 import SalesOrderFormModal from '@/components/pages/marketing/SalesOrderFormModal';
 
@@ -6,7 +7,8 @@ const Marketing = () => {
     <div className='w-full'>
       <MarketingTable />
 
-      <SalesOrderFormModal formType='add' />
+      <SalesOrderFormModal />
+      <DeliveryOrderFormModal />
     </div>
   );
 };

src/components/helper/form/FormErrors.tsx

@@ -13,6 +13,7 @@ const AlertErrorList = ({
   formErrorList,
   className,
   onClose,
+  title,
 }: {
   formErrorList: string[];
   className?: {
@@ -26,6 +27,7 @@ const AlertErrorList = ({
     li?: string;
   };
   onClose: () => void;
+  title?: string;
 }) => {
   if (formErrorList.length === 0) return null;
 
@@ -51,7 +53,7 @@ const AlertErrorList = ({
             height={20}
           />
           <span className={cn('font-semibold text-sm', className?.headerText)}>
-            Terdapat {formErrorList.length} error pada form:
+            {title || `Terdapat ${formErrorList.length} error pada form:`}
           </span>
         </div>
         <Button

src/components/pages/ApprovalSteps.tsx

@@ -309,9 +309,10 @@ const useApprovalSteps = ({
   moduleId: string;
   params?: {
     page?: number;
-    limit: number | string;
+    limit?: number | string;
     search?: string;
     group_step_number?: boolean;
+    order_by_date?: 'ASC' | 'DESC';
   };
 }) => {
   // Membuat URL Parameters
@@ -319,6 +320,8 @@ const useApprovalSteps = ({
     page: params?.page?.toString() || '',
     limit: params?.limit?.toString() || '',
     search: params?.search || '',
+    group_step_number: params?.group_step_number?.toString() || '',
+    order_by_date: params?.order_by_date || '',
   }).toString();
 
   // fetching data approvals

src/components/pages/marketing/DeliveryOrderFormModal.tsx

@@ -0,0 +1,809 @@
+'use client';
+
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useSelect, OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import {
+  mergeSOwithDO,
+  SalesProductToFieldValues,
+  DeliveryProductToFieldValues,
+} from '@/components/pages/marketing/form/MarketingForm';
+import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
+import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
+import {
+  DeliveryOrderApi,
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import { CustomerApi } from '@/services/api/master-data';
+import { UserApi } from '@/services/api/user';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import { BaseApproval, CreatedUser } from '@/types/api/api-general';
+import {
+  CreateDeliveryOrderPayload,
+  Marketing,
+  UpdateDeliveryOrderPayload,
+} from '@/types/api/marketing/marketing';
+import { Customer } from '@/types/api/master-data/customer';
+import { useFormik } from 'formik';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import toast from 'react-hot-toast';
+import useSWR, { useSWRConfig } from 'swr';
+import Button from '@/components/Button';
+import { memo } from 'react';
+import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
+import ApprovalStepsV2 from '@/components/helper/ApprovalStepsV2';
+import { useApprovalSteps } from '@/components/pages/ApprovalSteps';
+import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
+import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
+import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-view/DeliveryOrderProductTable';
+import {
+  DeliveryOrderFormValues,
+  DeliveryOrderSchema,
+  getFilledMarketingFormInitialValues,
+  SalesOrderFormValues,
+} from '@/components/pages/marketing/form/MarketingForm.schema';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import RequirePermission from '@/components/helper/RequirePermission';
+
+const MemoizedDeliveryOrderProductTable = memo(DeliveryOrderProductTable);
+const MemoizedDeliveryOrderProductForm = memo(DeliveryOrderProductForm);
+
+const DeliveryOrderFormModal = ({
+  initialValues,
+}: {
+  initialValues?: Marketing;
+}) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const modalAction = searchParams.get('action');
+  const marketingId = searchParams.get('id');
+
+  const isModalActionForForm =
+    modalAction === 'add_delivery' ||
+    modalAction === 'edit_delivery' ||
+    modalAction === 'detail';
+
+  const { mutate } = useSWRConfig();
+
+  const refreshMarketing = () => {
+    mutate(
+      (key) => typeof key === 'string' && key.includes(MarketingApi.basePath)
+    );
+  };
+
+  const { data: marketing, isLoading: isLoadingMarketing } = useSWR(
+    isModalActionForForm && marketingId
+      ? `detail-marketing-${marketingId}`
+      : undefined,
+    () => MarketingApi.getSingle(Number(marketingId))
+  );
+
+  const {
+    approvals,
+    rawDataApprovals,
+    isLoading: isLoadingApproval,
+    refresh: refreshApproval,
+  } = useApprovalSteps({
+    latestApproval: isResponseSuccess(marketing)
+      ? marketing?.data.latest_approval
+      : undefined,
+    approvalLines: MARKETING_APPROVAL_LINE,
+    moduleName: 'MARKETINGS',
+    moduleId: marketingId as string,
+    params: {
+      group_step_number: false,
+      order_by_date: 'ASC',
+    },
+  });
+
+  /**
+   * Step 1: View Details
+   * Step 2: Edit Delivery
+   */
+  const [step, setStep] = useState(1);
+
+  const formModal = useModal();
+  const successModal = useModal();
+  const rejectModal = useModal();
+  const deleteModal = useModal();
+  const formRef = useRef<HTMLFormElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const [grandTotal, setGrandTotal] = useState(
+    isResponseSuccess(marketing) &&
+      marketing?.data.sales_order
+        ?.map((item) => item.total_price)
+        .reduce((a, b) => a + b, 0)
+  );
+
+  const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedDeliveryProduct, setSelectedDeliveryProduct] =
+    useState<DeliveryOrderProductFormValues | null>(null);
+  const [deliveryOrderValues, setDeliveryOrderValues] = useState<
+    DeliveryOrderProductFormValues[]
+  >(
+    isResponseSuccess(marketing)
+      ? mergeSOwithDO(
+          marketing?.data.sales_order?.map(SalesProductToFieldValues) ?? [],
+          marketing?.data.delivery_order?.flatMap((delivery) =>
+            DeliveryProductToFieldValues(marketing.data.sales_order, delivery)
+          ) ?? [],
+          true
+        )
+      : []
+  );
+
+  // ================== SETUP FORMIK ==================
+  const formikInitialValues = useMemo<
+    SalesOrderFormValues & DeliveryOrderFormValues
+  >(() => {
+    if (!isResponseSuccess(marketing))
+      return {} as SalesOrderFormValues & DeliveryOrderFormValues;
+    const deliveryValues = mergeSOwithDO(
+      marketing?.data.sales_order?.map(SalesProductToFieldValues) ?? [],
+      marketing?.data.delivery_order?.flatMap((delivery) =>
+        DeliveryProductToFieldValues(marketing.data.sales_order, delivery)
+      ) ?? [],
+      true
+    );
+
+    setDeliveryOrderValues(deliveryValues);
+
+    return {
+      so_date: marketing?.data?.so_date || undefined,
+      notes: marketing?.data?.notes || undefined,
+      customer_id: marketing?.data?.customer?.id || undefined,
+      sales_person_id: marketing?.data?.sales_person?.id || undefined,
+      sales_person: marketing?.data?.sales_person
+        ? {
+            value: marketing?.data.sales_person.id,
+            label: marketing?.data.sales_person.name,
+          }
+        : null,
+      customer: marketing?.data?.customer
+        ? {
+            value: marketing?.data.customer.id,
+            label: marketing?.data.customer.name,
+          }
+        : null,
+      sales_order:
+        marketing?.data?.sales_order?.map((product) =>
+          SalesProductToFieldValues(product)
+        ) ?? [],
+      delivery_order: deliveryValues,
+    };
+  }, [marketing]);
+
+  const formik = useFormik<SalesOrderFormValues & DeliveryOrderFormValues>({
+    enableReinitialize: true,
+    initialValues: formikInitialValues,
+    validationSchema: DeliveryOrderSchema,
+    validateOnMount: true,
+    onSubmit: async (values) => {
+      const payload = {
+        marketing_id: Number(marketingId),
+        delivery_products: values.delivery_order
+          .map((product) => {
+            if (Boolean(product.delivery_date)) {
+              return {
+                marketing_product_id: product.marketing_product_id as number,
+                unit_price: parseFloat(product.unit_price as string),
+                total_weight: parseFloat(product.total_weight as string),
+                qty: parseFloat(product.qty as string),
+                avg_weight: parseFloat(product.avg_weight as string),
+                total_price: parseFloat(product.total_price as string),
+                delivery_date: formatDate(
+                  product.delivery_date as string,
+                  'yyyy-MM-DD'
+                ),
+                vehicle_number: product.vehicle_number,
+              };
+            }
+          })
+          .filter((item) => Boolean(item)),
+      } as UpdateDeliveryOrderPayload;
+      switch (modalAction) {
+        case 'add_delivery':
+          await createDeliveryHandler(payload as CreateDeliveryOrderPayload);
+          break;
+        case 'edit_delivery':
+          await updateDeliveryHandler(payload as UpdateDeliveryOrderPayload);
+          break;
+        case 'detail':
+          const dataMarketing = isResponseSuccess(marketing)
+            ? marketing.data
+            : null;
+          if (!dataMarketing) break;
+          if (
+            dataMarketing.delivery_order &&
+            dataMarketing.delivery_order.length > 0
+          ) {
+            await updateDeliveryHandler(payload as UpdateDeliveryOrderPayload);
+            break;
+          } else {
+            await createDeliveryHandler(payload as CreateDeliveryOrderPayload);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  // ===== Formik Error List =====
+  const { formErrorList, setFormErrorList, close, handleFormSubmit } =
+    useFormikErrorList(formik);
+
+  // ================== FORM HANDLER ==================
+  const createDeliveryHandler = async (values: CreateDeliveryOrderPayload) => {
+    setIsLoading(true);
+    const createDeliveryRes = await DeliveryOrderApi.create(values);
+    if (isResponseSuccess(createDeliveryRes)) {
+      toast.success(createDeliveryRes?.message as string);
+      setDeliveryOrderValues(
+        createDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
+          DeliveryProductToFieldValues(
+            createDeliveryRes.data?.sales_order,
+            delivery
+          )
+        ) ?? []
+      );
+      closeModalHandler(false);
+      successModal.openModal();
+    }
+    if (isResponseError(createDeliveryRes)) {
+      setFormErrorMessage(createDeliveryRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const updateDeliveryHandler = async (values: UpdateDeliveryOrderPayload) => {
+    setIsLoading(true);
+    const updateDeliveryRes = await DeliveryOrderApi.update(
+      Number(marketingId),
+      values
+    );
+    if (isResponseSuccess(updateDeliveryRes)) {
+      toast.success(updateDeliveryRes?.message as string);
+      setDeliveryOrderValues(
+        mergeSOwithDO(
+          formik.values.sales_order,
+          updateDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
+            DeliveryProductToFieldValues(
+              updateDeliveryRes.data?.sales_order,
+              delivery
+            )
+          ) ?? []
+        )
+      );
+      closeModalHandler(false);
+      successModal.openModal();
+    }
+    if (isResponseError(updateDeliveryRes)) {
+      setFormErrorMessage(updateDeliveryRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+
+  const memoSalesOrder = formik.values.sales_order;
+
+  // ================== HANDLER ==================
+  const nextButtonHandler = () => {
+    setStep(step + 1);
+  };
+  const prevButtonHandler = () => {
+    setStep(step - 1);
+  };
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    []
+  );
+  const handleChangeSalesPerson = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('sales_person_id', (val as OptionType)?.value);
+      formik.setFieldValue('sales_person', val as OptionType);
+    },
+    []
+  );
+  const rejectMarketingHandler = async (notes: string) => {
+    if (!marketingId) {
+      toast.error(`Tidak ada data yang valid untuk di reject.`);
+      rejectModal.closeModal();
+      return;
+    }
+
+    const rejectMarketingRes = await SalesOrderApi.singleApproval(
+      Number(marketingId),
+      'REJECTED',
+      notes
+    );
+
+    if (isResponseSuccess(rejectMarketingRes)) {
+      rejectModal.closeModal();
+      toast.success(rejectMarketingRes?.message as string);
+      closeModalHandler();
+      router.push('/marketing');
+    }
+    if (isResponseError(rejectMarketingRes)) {
+      rejectModal.closeModal();
+      toast.error(rejectMarketingRes?.message as string);
+    }
+    refreshMarketing();
+    refreshApproval();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    if (!marketingId) {
+      toast.error(`Tidak ada data yang valid untuk di hapus.`);
+      deleteModal.closeModal();
+      return;
+    }
+    setIsLoading(true);
+    const res = await MarketingApi.delete(Number(marketingId));
+    deleteModal.closeModal();
+    toast.success(res?.message as string);
+    setIsLoading(false);
+    router.replace('/marketing');
+  };
+
+  // ================== DELIVERY ORDER HANDLER ==================
+  const handleEditDO = useCallback(
+    (id: number, values?: DeliveryOrderProductFormValues) => {
+      const currentProducts = deliveryOrderValues?.find(
+        (product) => product.id == id
+      );
+      setSelectedDeliveryProduct(values ?? currentProducts ?? null);
+      if (id) {
+        setStep(2);
+      }
+    },
+    [deliveryOrderValues, setSelectedDeliveryProduct, setStep]
+  );
+  const handleAddDOClick = useCallback(() => {
+    setSelectedDeliveryProduct(null);
+  }, []);
+  const handleAddSubmitDO = useCallback(
+    async (values: DeliveryOrderProductFormValues) => {
+      const newValues = {
+        ...values,
+        id: values.id ?? Date.now(),
+      };
+
+      setDeliveryOrderValues((prev) => [...prev, newValues]);
+      setSelectedDeliveryProduct(null);
+      prevButtonHandler();
+    },
+    [prevButtonHandler]
+  );
+  const handleUpdateDO = useCallback(
+    async (id: number, values: DeliveryOrderProductFormValues) => {
+      setDeliveryOrderValues((prev) =>
+        prev.map((product) =>
+          product.id === id ? { ...product, ...values } : product
+        )
+      );
+      setSelectedDeliveryProduct(null);
+      prevButtonHandler();
+    },
+    [prevButtonHandler]
+  );
+  const handleDeleteDO = useCallback(async (id: number) => {
+    setDeliveryOrderValues((prev) =>
+      prev.map((product) =>
+        product.id === id
+          ? {
+              ...product,
+              ...{
+                delivery_date: '',
+              },
+            }
+          : product
+      )
+    );
+    setSelectedDeliveryProduct(null);
+  }, []);
+
+  // ================== MEMOIZED ==================
+  const isNextButtonDisabled = useMemo(() => {
+    if (step === 1) {
+      return Boolean(
+        !formik.values.customer_id ||
+          !formik.values.sales_person_id ||
+          !formik.values.so_date ||
+          !formik.values.notes
+      );
+    }
+
+    return true;
+  }, [step, formik.values]);
+  const deliveryRejected = useMemo(() => {
+    return (
+      isResponseSuccess(marketing) &&
+      ((marketing.data.latest_approval.step_number === 3 &&
+        marketing.data.latest_approval.action === 'REJECTED') ||
+        (marketing.data.latest_approval.step_number === 2 &&
+          marketing.data.latest_approval.action === 'REJECTED'))
+    );
+  }, [marketing]);
+
+  const isPending = useMemo(() => {
+    return (
+      isResponseSuccess(marketing) &&
+      marketing.data.latest_approval.step_number === 1
+    );
+  }, [marketing]);
+
+  // ================== EFFECT ==================
+  useEffect(() => {
+    if (
+      modalAction === 'add_delivery' ||
+      modalAction === 'edit_delivery' ||
+      modalAction === 'detail'
+    ) {
+      formModal.openModal();
+    }
+  }, [modalAction]);
+
+  const closeModalHandler = (shouldPushToRoute: boolean = true) => {
+    refreshMarketing();
+
+    if (shouldPushToRoute) {
+      formik.resetForm();
+      textareaRef.current?.setAttribute('value', '');
+      successModal.closeModal();
+      router.push('/marketing');
+    }
+
+    setStep(1);
+    setFormErrorMessage('');
+    formModal.closeModal();
+  };
+
+  useEffect(() => {
+    const getFilledInitialValues = async () => {
+      if (marketingId && isResponseSuccess(marketing)) {
+        const filledInitialValues = await getFilledMarketingFormInitialValues(
+          marketing.data
+        );
+
+        formik.setValues(filledInitialValues);
+        setStep(1);
+      }
+
+      if (isResponseError(marketing)) {
+        router.push('/marketing');
+        closeModalHandler();
+        toast.error(marketing.message);
+      }
+    };
+
+    getFilledInitialValues();
+  }, [marketingId, marketing]);
+
+  // Reset error message when step changes
+  useEffect(() => {
+    setFormErrorList([]);
+    setFormErrorMessage('');
+  }, [step]);
+
+  // sync delivery order values to formik
+  useEffect(() => {
+    formik.setFieldValue('delivery_order', deliveryOrderValues);
+  }, [deliveryOrderValues]);
+
+  return (
+    <>
+      <Modal
+        ref={formModal.ref}
+        position='end'
+        className={{
+          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+        }}
+      >
+        <div
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+          className='w-full min-h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-y-auto'
+        >
+          {step <= 2 && isResponseSuccess(marketing) && (
+            <>
+              <div className='w-full sm:w-[446px]'>
+                <div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    color='none'
+                    onClick={() => closeModalHandler()}
+                    className='p-0 text-black hover:text-base-content'
+                  >
+                    <Icon icon='heroicons:x-mark' width={20} height={20} />
+                  </Button>
+
+                  <div className='w-px border-none bg-base-content/10' />
+
+                  <h4 className='text-sm font-medium text-base-content/50'>
+                    View Details
+                  </h4>
+                </div>
+                <form
+                  className='w-full p-4 gap-3 flex flex-col border-b border-base-content/10'
+                  ref={formRef}
+                  onSubmit={handleFormSubmit}
+                >
+                  <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                    Informasi Penjualan
+                  </h4>
+                  <div className='rounded-lg border border-tools-table-outline border-base-content/5'>
+                    <table
+                      style={{
+                        borderRadius: '0.5rem',
+                      }}
+                      className='border-none w-full'
+                    >
+                      <tbody className='w-full'>
+                        <tr className='border-b border-tools-table-outline border-base-content/5'>
+                          <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
+                            Label
+                          </th>
+                          <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
+                            <div className='flex w-full flex-row gap-1 items-center justify-between h-full mt-2'>
+                              <div>Value</div>
+                            </div>
+                          </th>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>No. Sales Order</td>
+                          <td className='text-sm px-4 py-3'>
+                            {marketing.data.so_number}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>Nama Pelanggan</td>
+                          <td className='text-sm px-4 py-3'>
+                            {marketing.data.customer.name}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>Status</td>
+                          <td className='text-sm px-4 py-3'>
+                            {formatTitleCase(
+                              marketing.data.latest_approval.step_name
+                            )}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>
+                            Tanggal Penjualan
+                          </td>
+                          <td className='text-sm px-4 py-3'>
+                            {formatDate(marketing.data.so_date, 'DD MMM yyyy')}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>Total Penjualan</td>
+                          <td className='text-sm px-4 py-3'>
+                            {formatCurrency(grandTotal || 0)}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>
+                            Dokumen Penjualan
+                          </td>
+                          <td className='text-sm px-4 py-3'>
+                            <SalesOrderExport data={marketing.data} />
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </form>
+              </div>
+              <div className='w-full min-h-full flex flex-col sm:w-[446px] border-l border-base-content/10'>
+                <div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
+                  <div className='w-full flex flex-row items-stretch gap-3'>
+                    {step === 2 && (
+                      <>
+                        <Button
+                          type='button'
+                          variant='ghost'
+                          color='none'
+                          onClick={() => {
+                            setStep(1);
+                          }}
+                          className='p-0 text-black hover:text-base-content'
+                        >
+                          <Icon
+                            icon='heroicons:chevron-left'
+                            width={20}
+                            height={20}
+                          />
+                        </Button>
+
+                        <div className='w-px border-none bg-base-content/10' />
+                      </>
+                    )}
+                    <h4 className='text-sm font-medium text-base-content/50'>
+                      Informasi
+                    </h4>
+                  </div>
+                  {step === 1 && (
+                    <RequirePermission permissions='lti.marketing.sales_order.delete'>
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        color='none'
+                        onClick={() => {
+                          deleteClickHandler();
+                        }}
+                        className='p-0 text-error hover:text-base-content'
+                      >
+                        <Icon icon='heroicons:trash' width={20} height={20} />
+                      </Button>
+                    </RequirePermission>
+                  )}
+                </div>
+                {step === 1 && (
+                  <ApprovalStepsV2
+                    approvals={rawDataApprovals as BaseApproval[]}
+                    steps={MARKETING_APPROVAL_LINE}
+                  />
+                )}
+                <div className='w-full p-4 gap-3 flex flex-col'>
+                  <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                    {step == 2 && 'Ubah '} Informasi{' '}
+                    {step == 2 ? 'Delivery' : 'Produk'}
+                  </h4>
+                  {step === 1 && (
+                    <MemoizedDeliveryOrderProductTable
+                      marketing={marketing.data}
+                      formType={
+                        deliveryRejected
+                          ? 'rejected'
+                          : isPending
+                            ? 'pending'
+                            : modalAction
+                      }
+                      data={deliveryOrderValues}
+                      onEdit={handleEditDO}
+                      onDelete={handleDeleteDO}
+                      onAddProductClick={handleAddDOClick}
+                    />
+                  )}
+                  {step === 2 && (
+                    <MemoizedDeliveryOrderProductForm
+                      formState={'edit'}
+                      salesOrders={marketing?.data?.sales_order ?? []}
+                      exisitingValues={deliveryOrderValues}
+                      onSubmitForm={handleAddSubmitDO}
+                      initialValues={selectedDeliveryProduct ?? undefined}
+                      onUpdateForm={handleUpdateDO}
+                    />
+                  )}
+                </div>
+                {formErrorMessage && (
+                  <div className='px-4 pb-4'>
+                    <AlertErrorList
+                      className={{
+                        alert: 'w-full',
+                      }}
+                      formErrorList={[formErrorMessage]}
+                      onClose={() => setFormErrorMessage('')}
+                    />
+                  </div>
+                )}
+                {formErrorList && (
+                  <div className='px-4 pb-4 '>
+                    <AlertErrorList
+                      className={{
+                        alert: 'w-full',
+                      }}
+                      formErrorList={formErrorList}
+                      onClose={close}
+                      title={`Terdapat ${formErrorList.length} error pada ${formErrorMessage ? 'server' : 'form'}:`}
+                    />
+                  </div>
+                )}
+                {step === 1 && (
+                  <div className='w-full px-4 py-3 grid grid-cols-2 items-center justify-between gap-3 border-t border-base-content/10'>
+                    <Button
+                      type='button'
+                      variant='outline'
+                      color='none'
+                      onClick={() => rejectModal.openModal()}
+                      disabled={deliveryRejected || isPending}
+                      className='p-3 border-base-content/10 shadow-button-soft rounded-lg text-sm text-base-content/50 font-semibold'
+                    >
+                      Reject
+                    </Button>
+                    <Button
+                      type='button'
+                      color='primary'
+                      onClick={() => {
+                        formRef.current?.requestSubmit();
+                      }}
+                      className='p-3  shadow-button-soft text-base-100 rounded-lg text-sm font-semibold'
+                      disabled={deliveryRejected || isPending}
+                    >
+                      Approve
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </Modal>
+      <ConfirmationModal
+        ref={successModal.ref}
+        iconPosition='left'
+        type='success'
+        text={`${modalAction === 'add' ? 'Data Berhasil Disimpan' : 'Data Berhasil Diubah'}`}
+        subtitleText={`${modalAction === 'add' ? 'Data delivery order telah berhasil disimpan.' : 'Data delivery order telah berhasil diubah.'}`}
+        primaryButton={{
+          text: 'Oke',
+          color: 'primary',
+          className: 'rounded-lg',
+          onClick: (e) => {
+            closeModalHandler();
+          },
+        }}
+      >
+        <MemoizedDeliveryOrderProductTable
+          marketing={isResponseSuccess(marketing) ? marketing.data : undefined}
+          formType={'success'}
+          data={deliveryOrderValues}
+          onDelete={handleDeleteDO}
+          onEdit={handleEditDO}
+          onAddProductClick={handleAddDOClick}
+        />
+      </ConfirmationModal>
+
+      <ConfirmationModalWithNotes
+        ref={rejectModal.ref}
+        type={'error'}
+        text={`Apakah anda yakin ingin reject data penjualan?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: rejectModal.closeModal,
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: rejectMarketingHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default DeliveryOrderFormModal;

src/components/pages/marketing/MarketingDetail.tsx

@@ -0,0 +1,572 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import Table from '@/components/Table';
+import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
+import {
+  cn,
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatTitleCase,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import {
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import {
+  BaseDelivery,
+  BaseSalesOrder,
+  Marketing,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
+import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
+import RequirePermission from '@/components/helper/RequirePermission';
+import Badge from '@/components/Badge';
+
+const MarketingDetail = ({
+  initialValues,
+  refresh,
+}: {
+  initialValues?: Marketing;
+  refresh?: () => void;
+}) => {
+  const router = useRouter();
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    'APPROVED'
+  );
+  const [grandTotal, setGrandTotal] = useState(
+    initialValues?.sales_order
+      ?.map((item) => item.total_price)
+      .reduce((a, b) => a + b, 0)
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const deliveryModal = useModal();
+  const {
+    approvals,
+    isLoading: isLoadingApproval,
+    refresh: refreshApproval,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.latest_approval,
+    approvalLines: MARKETING_APPROVAL_LINE,
+    moduleName: 'MARKETINGS',
+    moduleId: initialValues?.id as number as unknown as string,
+  });
+
+  const approveClickHandler = () => {
+    setApprovalAction('APPROVED');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApprovalAction('REJECTED');
+    confirmationModal.openModal();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsLoading(true);
+    const res = await MarketingApi.delete(initialValues?.id as number);
+    deleteModal.closeModal();
+    router.push('/marketing');
+    toast.success(res?.message as string);
+    setIsLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsLoading(true);
+    const res = await SalesOrderApi.singleApproval(
+      initialValues?.id as number,
+      approvalAction,
+      notes
+    );
+    setIsLoading(false);
+    confirmationModal.closeModal();
+    toast.success(res?.message as string);
+    refresh?.();
+    refreshApproval?.();
+  };
+
+  const confirmationModalDeliveryClickHandler = async (notes: string) => {
+    setIsLoading(true);
+    const res = await SalesOrderApi.delivery(
+      initialValues?.id as number,
+      notes
+    );
+    setIsLoading(false);
+    deliveryModal.closeModal();
+    toast.success(res?.message as string);
+    refresh?.();
+    refreshApproval?.();
+    router.push(
+      `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+    );
+  };
+
+  const approval = initialValues?.latest_approval;
+  const isRejected = approval?.action == 'REJECTED';
+  const isApproved = approval?.action == 'APPROVED';
+
+  return (
+    <>
+      <div className='flex flex-col w-full gap-4'>
+        <FormHeader
+          title={`Detail ${Number(initialValues?.latest_approval?.step_number) > 2 ? 'Delivery Order' : 'Sales Order'}`}
+          backUrl='/marketing'
+        />
+        {!isLoadingApproval && approvals && (
+          <ApprovalSteps approvals={approvals} />
+        )}
+        <div className='flex-row flex gap-3'>
+          {initialValues?.latest_approval?.step_number == 1 && (
+            <>
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <Button
+                  color='success'
+                  onClick={approveClickHandler}
+                  disabled={
+                    initialValues?.latest_approval?.step_number == 1 &&
+                    initialValues?.latest_approval?.action == 'REJECTED'
+                  }
+                >
+                  <Icon icon='mdi:check' width={24} height={24} />
+                  Approve
+                </Button>
+              </RequirePermission>
+
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <Button
+                  color='error'
+                  onClick={rejectClickHandler}
+                  disabled={
+                    initialValues?.latest_approval?.step_number == 1 &&
+                    initialValues?.latest_approval?.action == 'REJECTED'
+                  }
+                >
+                  <Icon icon='mdi:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </RequirePermission>
+            </>
+          )}
+          {initialValues?.latest_approval?.step_number != 1 && (
+            <>
+              <RequirePermission
+                permissions={
+                  initialValues?.latest_approval?.step_number == 3
+                    ? 'lti.marketing.delivery_order.update'
+                    : 'lti.marketing.delivery_order.create'
+                }
+              >
+                <Button
+                  color='success'
+                  href={
+                    initialValues?.latest_approval?.step_number == 3
+                      ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+                      : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                  }
+                >
+                  <Icon icon='mdi:truck' width={24} height={24} />
+                  {initialValues?.latest_approval?.step_number == 3
+                    ? 'Edit '
+                    : 'Tambah '}
+                  Delivery Order
+                </Button>
+              </RequirePermission>
+            </>
+          )}
+        </div>
+
+        <Card
+          title='Informasi Penjualan'
+          className={{
+            wrapper: 'w-full bg-white',
+          }}
+        >
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td width='45%' className='font-semibold'>
+                    No. Sales Order
+                  </td>
+                  <td>:</td>
+                  <td width='50%' className='font-mono'>
+                    {initialValues?.so_number}
+                  </td>
+                </tr>
+                {Number(initialValues?.latest_approval?.step_number) > 2 && (
+                  <tr>
+                    <td width='45%' className='font-semibold'>
+                      No. Delivery Order
+                    </td>
+                    <td>:</td>
+                    <td width='50%' className='font-mono'>
+                      {initialValues?.delivery_order
+                        ?.map((item) => item.do_number)
+                        .join(', ')}
+                    </td>
+                  </tr>
+                )}
+                <tr>
+                  <td className='font-semibold'>Nama Pelanggan</td>
+                  <td>:</td>
+                  <td>{initialValues?.customer?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Status</td>
+                  <td>:</td>
+                  <td>
+                    <Badge
+                      variant='soft'
+                      className={{
+                        badge:
+                          'rounded-lg px-2 w-fit flex flex-row justify-start whitespace-nowrap',
+                      }}
+                      color={
+                        isRejected
+                          ? 'error'
+                          : isApproved
+                            ? approval?.step_number == 1
+                              ? 'neutral'
+                              : approval?.step_number == 2
+                                ? 'primary'
+                                : approval?.step_number == 3
+                                  ? 'success'
+                                  : 'neutral'
+                            : 'neutral'
+                      }
+                    >
+                      <Icon
+                        icon='mdi:circle'
+                        width={12}
+                        height={12}
+                        color={
+                          approval?.step_number == 1
+                            ? 'neutral'
+                            : approval?.step_number == 2
+                              ? 'primary'
+                              : approval?.step_number == 3
+                                ? 'success'
+                                : 'neutral'
+                        }
+                      />
+                      {isRejected
+                        ? 'Ditolak'
+                        : formatTitleCase(approval?.step_name || '')}
+                    </Badge>
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Tanggal Penjualan</td>
+                  <td>:</td>
+                  <td>{formatDate(initialValues?.so_date, 'DD MMM yyyy')}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Penjualan</td>
+                  <td>:</td>
+                  <td>{formatCurrency(grandTotal as number)}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Catatan</td>
+                  <td>:</td>
+                  <td>{initialValues?.notes ?? '-'}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Dokumen Penjualan</td>
+                  <td>:</td>
+                  <td>
+                    <SalesOrderExport data={initialValues} />
+                  </td>
+                </tr>
+                {Number(initialValues?.latest_approval?.step_number) > 2 && (
+                  <tr>
+                    <td className='font-semibold'>Dokumen Pengiriman</td>
+                    <td>:</td>
+                    <td className='flex flex-wrap gap-2'>
+                      {initialValues?.delivery_order?.map((item, index) => (
+                        <DeliveryOrderExport
+                          key={index}
+                          data={initialValues}
+                          deliveryOrder={item}
+                        />
+                      ))}
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+        {initialValues?.sales_order && (
+          <Card
+            title='Informasi Produk'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<BaseSalesOrder>
+              data={initialValues?.sales_order}
+              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);
+                  },
+                },
+                {
+                  header: 'Total Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.total_weight);
+                  },
+                },
+                {
+                  header: 'Kuantitas',
+                  accessorFn(row) {
+                    return formatNumber(row.qty);
+                  },
+                },
+                {
+                  header: 'Avg. Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.avg_weight);
+                  },
+                },
+                {
+                  header: 'Total Penjualan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.total_price);
+                  },
+                },
+              ]}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    initialValues?.sales_order &&
+                    initialValues?.sales_order?.length === 0,
+                }),
+                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',
+              }}
+            />
+          </Card>
+        )}
+        {initialValues?.delivery_order && (
+          <Card
+            title='Informasi Pengiriman'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            {initialValues?.delivery_order.map((delivery, index) => {
+              return (
+                <div key={index}>
+                  <Card
+                    className={{
+                      wrapper: 'w-full',
+                    }}
+                  >
+                    <div className='flex flex-row gap-3'>
+                      <div className='font-semibold'>
+                        Nomor DO : {delivery.do_number}
+                      </div>
+                    </div>
+                    <Table<BaseDelivery>
+                      data={delivery.deliveries}
+                      columns={[
+                        {
+                          header: 'Tanggal Pengiriman',
+                          accessorFn() {
+                            return formatDate(
+                              delivery.delivery_date,
+                              'DD MMM yyyy'
+                            );
+                          },
+                        },
+                        {
+                          header: 'No. Polisi',
+                          accessorFn(row) {
+                            return formatVechicleNumber(row.vehicle_number);
+                          },
+                        },
+                        {
+                          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);
+                          },
+                        },
+                        {
+                          header: 'Total Bobot (Kg)',
+                          accessorFn(row) {
+                            return formatNumber(row.total_weight);
+                          },
+                        },
+                        {
+                          header: 'Kuantitas',
+                          accessorFn(row) {
+                            return formatNumber(row.qty);
+                          },
+                        },
+                        {
+                          header: 'Avg. Bobot (Kg)',
+                          accessorFn(row) {
+                            return formatNumber(row.avg_weight);
+                          },
+                        },
+                        {
+                          header: 'Total Penjualan (Rp)',
+                          accessorFn(row) {
+                            return formatCurrency(row.total_price);
+                          },
+                        },
+                      ]}
+                      className={{
+                        containerClassName: cn({
+                          'mb-20':
+                            initialValues?.sales_order &&
+                            initialValues?.sales_order?.length === 0,
+                        }),
+                        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',
+                      }}
+                    />
+                  </Card>
+                  <div className='flex flex-row gap-3 my-3'>
+                    <DeliveryOrderExport
+                      data={initialValues}
+                      deliveryOrder={delivery}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </Card>
+        )}
+        <div className='flex flex-row gap-3'>
+          {initialValues?.latest_approval?.step_number != 3 && (
+            <>
+              <RequirePermission permissions='lti.marketing.sales_order.update'>
+                <Button
+                  color='warning'
+                  type='button'
+                  href={`/marketing/detail/${initialValues?.latest_approval?.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
+                >
+                  <Icon icon='mdi:pencil' width={24} height={24} />
+                  Edit
+                </Button>
+              </RequirePermission>
+            </>
+          )}
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
+            <Button color='error' onClick={deleteClickHandler}>
+              <Icon icon='mdi:delete' width={24} height={24} />
+              Hapus
+            </Button>
+          </RequirePermission>
+        </div>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={confirmationModal.ref}
+        type={approvalAction === 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction === 'APPROVED' ? 'success' : 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        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,
+        }}
+      />
+    </>
+  );
+};
+
+export default MarketingDetail;

src/components/pages/marketing/MarketingTable.tsx

@@ -2,19 +2,10 @@
 
 import Button from '@/components/Button';
 import CheckboxInput from '@/components/input/CheckboxInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import Table from '@/components/Table';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
-import { TableToolbar } from '@/components/table/TableToolbar';
-import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 import {
@@ -30,17 +21,12 @@ import {
 import { Icon } from '@iconify/react';
 import { CellContext, ColumnDef, Row } from '@tanstack/react-table';
 import { useRouter } from 'next/navigation';
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { useAuth } from '@/services/hooks/useAuth';
-import { CustomerApi, ProductApi } from '@/services/api/master-data';
-import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
-import Badge from '@/components/Badge';
 import ButtonFilter from '@/components/helper/ButtonFilter';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import Dropdown from '@/components/Dropdown';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
@@ -59,15 +45,13 @@ const RowsOptionsMenu = ({
   deliveryClickHandler?: () => void;
   popoverPosition?: 'top' | 'bottom';
 }) => {
-  const showEditButton =
-    props.row.original.latest_approval.action !== 'APPROVED' &&
-    props.row.original.latest_approval.action !== 'REJECTED';
-
-  const showDeleteButton = showEditButton;
-
   const popoverId = `marketing#${props.row.original.id}`;
   const popoverAnchorName = `--anchor-marketing#${props.row.original.id}`;
 
+  const isDeliveryRejected =
+    props.row.original.latest_approval.action === 'REJECTED' &&
+    props.row.original.latest_approval.step_number === 3;
+
   return (
     <div className='relative'>
       <PopoverButton
@@ -88,7 +72,7 @@ const RowsOptionsMenu = ({
         <div className='flex flex-col bg-base-100 rounded-xl'>
           <RequirePermission permissions='lti.marketing.delivery_order.detail'>
             <Button
-              href={`/marketing/detail?marketingId=${props.row.original.id}`}
+              href={`/marketing?action=detail&id=${props.row.original.id}`}
               variant='ghost'
               color='none'
               className='p-3 justify-start text-sm font-semibold w-full'
@@ -97,7 +81,8 @@ const RowsOptionsMenu = ({
               View Details
             </Button>
           </RequirePermission>
-          {props.row.original.latest_approval.step_number != 1 && (
+          {props.row.original.latest_approval.step_number != 1 &&
+            !isDeliveryRejected && (
               <>
                 <RequirePermission
                   permissions={
@@ -109,9 +94,9 @@ const RowsOptionsMenu = ({
                   <Button
                     href={
                       props.row.original.latest_approval.step_number == 3
-                      ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
+                        ? `/marketing?action=edit_delivery&id=${props.row.original.id}`
                         : props.row.original.latest_approval.step_number == 2
-                        ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
+                          ? `/marketing?action=add_delivery&id=${props.row.original.id}`
                           : undefined
                     }
                     onClick={() => {
@@ -133,7 +118,7 @@ const RowsOptionsMenu = ({
             <>
               <RequirePermission permissions='lti.marketing.sales_order.update'>
                 <Button
-                  href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
+                  href={`/marketing?action=edit&id=${props.row.original.id}`}
                   variant='ghost'
                   color='none'
                   className='p-3 justify-start text-sm font-semibold w-full'
@@ -328,7 +313,7 @@ const MarketingTable = () => {
     toast.success(res?.message as string);
     refreshMarketing?.();
     router.push(
-      `/marketing/detail/delivery-orders/edit?marketingId=${selectedItem?.id}`
+      `/marketing/detail/delivery-orders/edit?id=${selectedItem?.id}`
     );
   };
 
@@ -411,18 +396,19 @@ const MarketingTable = () => {
           const approval = props.row.original.latest_approval;
           const isRejected = approval?.action == 'REJECTED';
           const isApproved = approval?.action == 'APPROVED';
+          const isUpdated = approval?.action == 'UPDATED';
           return (
             <StatusBadge
               color={
                 isRejected
                   ? 'error'
-                  : isApproved
+                  : isApproved || isUpdated
                     ? approval?.step_number == 1
                       ? 'neutral'
                       : approval?.step_number == 2
-                        ? 'primary'
+                        ? 'info'
                         : approval?.step_number == 3
-                          ? 'success'
+                          ? 'warning'
                           : 'neutral'
                     : 'neutral'
               }
@@ -431,6 +417,9 @@ const MarketingTable = () => {
                   ? 'Ditolak'
                   : formatTitleCase(approval?.step_name || '')
               }
+              className={{
+                badge: 'whitespace-nowrap',
+              }}
             />
           );
         },
@@ -462,8 +451,7 @@ const MarketingTable = () => {
               return (
                 <Button
                   variant='link'
-                  color='success'
+                  className='p-0 text-none text-sm'
-                  className='p-0 text-none'
                   onClick={() => {
                     productsClickHandler(props?.row?.original);
                   }}
@@ -705,19 +693,23 @@ const MarketingTable = () => {
       <Modal
         ref={productsModal.ref}
         className={{
-          modalBox: 'xs:max-w-2/5 z-100',
+          modalBox: 'xs:max-w-2/5 z-100 rounded-lg p-0 flex flex-col',
+          modal: 'rounded-lg',
         }}
         closeOnBackdrop
       >
-        <div className='flex flex-row justify-between items-center mb-3'>
+        <div className='flex flex-row justify-between items-center border-b border-base-content/10 p-4'>
-          <h4 className='text-xl font-semibold'>Daftar Produk</h4>
+          <h4 className='flex items-center justify-center gap-2 text-sm font-medium text-base-content'>
+            <Icon icon='heroicons:information-circle' width={20} height={20} />{' '}
+            Daftar Produk
+          </h4>
           <Button
             variant='ghost'
-            color='error'
+            color='none'
             onClick={productsModal.closeModal}
-            className='justify-start text-sm rounded-full'
+            className='justify-start text-sm p-1'
           >
-            <Icon icon='mdi:close' width={16} height={16} />
+            <Icon icon='mdi:close' width={20} height={20} />
           </Button>
         </div>
         <Table<BaseSalesOrder>
@@ -747,15 +739,9 @@ const MarketingTable = () => {
             },
           ]}
           className={{
-            containerClassName: 'p-6',
+            containerClassName: 'p-4',
-            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            headerColumnClassName: 'whitespace-nowrap',
-            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            bodyColumnClassName: 'last:flex last:flex-row last:justify-end',
-            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',
           }}
           isLoading={isLoadingMarketing}

src/components/pages/marketing/SalesOrderFormModal.tsx

@@ -2,6 +2,7 @@
 
 import Button from '@/components/Button';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import RequirePermission from '@/components/helper/RequirePermission';
 import DateInput from '@/components/input/DateInput';
 import DebouncedTextArea from '@/components/input/DebouncedTextArea';
 import NumberInput from '@/components/input/NumberInput';
@@ -9,9 +10,15 @@ import { OptionType, useSelect } from '@/components/input/SelectInput';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import {
+  DeliveryProductToFieldValues,
+  mergeSOwithDO,
+  SalesProductToFieldValues,
+} from '@/components/pages/marketing/form/MarketingForm';
 import {
   DeliveryOrderFormValues,
   DeliveryOrderSchema,
+  getFilledMarketingFormInitialValues,
   SalesOrderFormValues,
   SalesOrderSchema,
 } from '@/components/pages/marketing/form/MarketingForm.schema';
@@ -20,7 +27,7 @@ import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/r
 import SalesOrderProductForm from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm';
 import SalesOrderProductTable from '@/components/pages/marketing/form/table-view/SalesOrderProductTable';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { formatCurrency, formatDate } from '@/lib/helper';
+import { formatDate } from '@/lib/helper';
 import {
   MarketingApi,
   SalesOrderApi,
@@ -30,8 +37,6 @@ import { UserApi } from '@/services/api/user';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { CreatedUser } from '@/types/api/api-general';
 import {
-  BaseDeliveryOrder,
-  BaseSalesOrder,
   CreateSalesOrderPayload,
   CreateSalesOrderProductPayload,
   Marketing,
@@ -49,112 +54,22 @@ import useSWR, { useSWRConfig } from 'swr';
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
 
-const SalesProductToFieldValues = (
-  product: BaseSalesOrder
-): SalesOrderProductFormValues => {
-  return {
-    id: product.id,
-    vehicle_number: product.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.id,
-      label: product.product_warehouse.product.name,
-    },
-    product_warehouse_id: product.product_warehouse.id,
-    unit_price: product.unit_price,
-    total_weight: product.total_weight,
-    qty: product.qty,
-    avg_weight: product.avg_weight,
-    total_price: product.total_price,
-  };
-};
-const DeliveryProductToFieldValues = (
-  salesOrders: BaseSalesOrder[],
-  delivery: BaseDeliveryOrder
-): DeliveryOrderProductFormValues[] => {
-  const data = delivery.deliveries.map((item) => {
-    const soId = salesOrders.find(
-      (so) => so.product_warehouse.id === item.product_warehouse.id
-    )?.id;
-    return {
-      id: soId,
-      unit_price: item.unit_price,
-      total_weight: item.total_weight,
-      qty: item.qty,
-      avg_weight: item.avg_weight,
-      total_price: item.total_price,
-      vehicle_number: item.vehicle_number,
-      delivery_date: formatDate(delivery.delivery_date, 'yyyy-MM-DD'),
-      do_number: delivery.do_number,
-      marketing_product_id: soId,
-      marketing_product: {
-        id: soId,
-        vehicle_number: item.vehicle_number,
-        kandang_id: item.product_warehouse.warehouse.id,
-        kandang: {
-          value: item.product_warehouse.warehouse.id,
-          label: item.product_warehouse.warehouse.name,
-        },
-        product_warehouse: {
-          value: item.product_warehouse.id,
-          label: item.product_warehouse.product.name,
-        },
-        product_warehouse_id: item.product_warehouse.id,
-        unit_price: item.unit_price,
-        total_weight: item.total_weight,
-        qty: item.qty,
-        avg_weight: item.avg_weight,
-        total_price: item.total_price,
-      },
-    } as DeliveryOrderProductFormValues;
-  });
-  return data;
-};
-const mergeSOwithDO = (
-  salesOrders: SalesOrderProductFormValues[],
-  deliveryOrders: DeliveryOrderProductFormValues[]
-): DeliveryOrderProductFormValues[] => {
-  return salesOrders.map((so) => {
-    const delivery = deliveryOrders.find(
-      (d) => d?.marketing_product_id === so.id
-    );
-
-    return {
-      ...so, // nilai dasar dari sales order
-      marketing_product_id: so.id,
-      delivery_date: delivery?.delivery_date || undefined,
-      do_number: delivery?.do_number || undefined,
-      vehicle_number: delivery?.vehicle_number || so.vehicle_number,
-      unit_price: delivery?.unit_price,
-      total_weight: delivery?.total_weight,
-      qty: delivery?.qty,
-      avg_weight: delivery?.avg_weight,
-      total_price: delivery?.total_price,
-      marketing_product: so, // jika ada, override
-    } as DeliveryOrderProductFormValues;
-  });
-};
-
 const SalesOrderFormModal = ({
   initialValues,
-  afterSubmit,
-  formType,
 }: {
   initialValues?: Marketing;
-  afterSubmit?: () => void;
-  formType: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
 }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
   const modalAction = searchParams.get('action');
-  const MarketingId = searchParams.get('id');
+  const marketingId = searchParams.get('id');
 
-  const isModalActionForForm = modalAction === 'add' || modalAction === 'edit';
+  const isModalActionForForm =
+    modalAction === 'add' ||
+    modalAction === 'edit' ||
+    modalAction === 'add_delivery' ||
+    modalAction === 'edit_delivery';
 
   const { mutate } = useSWRConfig();
 
@@ -164,11 +79,11 @@ const SalesOrderFormModal = ({
     );
   };
 
-  const { data: Marketing, isLoading: isLoadingMarketing } = useSWR(
+  const { data: marketing, isLoading: isLoadingMarketing } = useSWR(
-    isModalActionForForm && MarketingId
+    isModalActionForForm && marketingId
-      ? ['detail-marketing', MarketingId]
+      ? `detail-marketing-${marketingId}`
       : undefined,
-    ([, id]) => MarketingApi.getSingle(Number(id))
+    () => MarketingApi.getSingle(Number(marketingId))
   );
 
   // ================== FETCH OPTIONS ==================
@@ -194,6 +109,7 @@ const SalesOrderFormModal = ({
 
   const formModal = useModal();
   const successModal = useModal();
+  const deleteModal = useModal();
   const formRef = useRef<HTMLFormElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -257,13 +173,13 @@ const SalesOrderFormModal = ({
     enableReinitialize: true,
     initialValues: formikInitialValues,
     validationSchema:
-      formType == 'add_deliver' || formType == 'edit_deliver'
+      modalAction == 'add_deliver' || modalAction == 'edit_deliver'
         ? DeliveryOrderSchema
         : SalesOrderSchema,
     validateOnMount: true,
     onSubmit: async (values) => {
       const payload =
-        formType != 'add_deliver' && formType != 'edit_deliver'
+        modalAction != 'add_deliver' && modalAction != 'edit_deliver'
           ? ({
               customer_id: values.customer_id as number,
               sales_person_id: values.sales_person_id as number,
@@ -305,7 +221,7 @@ const SalesOrderFormModal = ({
                 })
                 .filter((item) => Boolean(item)),
             } as UpdateDeliveryOrderPayload);
-      switch (formType) {
+      switch (modalAction) {
         case 'add':
           await createMarketingHandler(payload as CreateSalesOrderPayload);
           break;
@@ -315,19 +231,16 @@ const SalesOrderFormModal = ({
         default:
           break;
       }
-      afterSubmit?.();
     },
   });
 
   // ===== Formik Error List =====
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
+  const { formErrorList, setFormErrorList, close, handleFormSubmit } =
-    formik,
+    useFormikErrorList(formik, {
-    {
       onAfterSubmit: () => {
         router.push('/marketing');
       },
-    }
+    });
-  );
 
   // ================== FORM REPEATER HANDLER ==================
   const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
@@ -336,6 +249,7 @@ const SalesOrderFormModal = ({
     if (isResponseSuccess(createMarketingRes)) {
       closeModalHandler(false);
       successModal.openModal();
+      refreshMarketing();
     }
     if (isResponseError(createMarketingRes)) {
       toast.error(createMarketingRes?.message as string);
@@ -344,13 +258,19 @@ const SalesOrderFormModal = ({
   };
   const updateMarketingHandler = async (values: UpdateSalesOrderPayload) => {
     setIsLoading(true);
+    if (!marketingId) {
+      toast.error('Marketing ID is required');
+      setIsLoading(false);
+      return;
+    }
     const updateMarketingRes = await SalesOrderApi.update(
-      initialValues?.id as number,
+      Number(marketingId),
       values
     );
     if (isResponseSuccess(updateMarketingRes)) {
       closeModalHandler(false);
       successModal.openModal();
+      refreshMarketing();
     }
     if (isResponseError(updateMarketingRes)) {
       toast.error(updateMarketingRes?.message as string);
@@ -382,6 +302,26 @@ const SalesOrderFormModal = ({
     []
   );
 
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    if (!marketingId) {
+      toast.error(`Tidak ada data yang valid untuk di hapus.`);
+      deleteModal.closeModal();
+      return;
+    }
+    setIsLoading(true);
+    const res = await MarketingApi.delete(Number(marketingId));
+    deleteModal.closeModal();
+    toast.success(res?.message as string);
+    setIsLoading(false);
+    refreshMarketing();
+    closeModalHandler();
+    router.replace('/marketing');
+  };
+
   // ================== SALES ORDER HANDLER ==================
   const handleDeleteSO = useCallback(
     (id: number) => {
@@ -393,11 +333,15 @@ const SalesOrderFormModal = ({
     },
     [memoSalesOrder]
   );
+  const handleDeleteAllSO = useCallback(() => {
+    formik.setFieldValue('sales_order', []);
+  }, [memoSalesOrder]);
   const handleEditSO = useCallback(
     (id: number) => {
       const currentProducts = formik.values.sales_order;
       const selectedProduct = currentProducts.find((p) => p.id == id);
       setSelectedMarketingProduct(selectedProduct ?? null);
+      setStep(2);
     },
     [memoSalesOrder]
   );
@@ -457,6 +401,7 @@ const SalesOrderFormModal = ({
   }, [modalAction]);
 
   const closeModalHandler = (shouldPushToRoute: boolean = true) => {
+    refreshMarketing();
     if (shouldPushToRoute) {
       formik.resetForm();
       textareaRef.current?.setAttribute('value', '');
@@ -477,6 +422,39 @@ const SalesOrderFormModal = ({
     );
   }, [memoSalesOrder]);
 
+  useEffect(() => {
+    const getFilledInitialValues = async () => {
+      if (marketingId && isResponseSuccess(marketing)) {
+        const filledInitialValues = await getFilledMarketingFormInitialValues(
+          marketing.data
+        );
+
+        formik.setValues(filledInitialValues);
+        setStep(3);
+      }
+
+      if (isResponseError(marketing)) {
+        router.push('/marketing');
+        closeModalHandler();
+        toast.error(marketing.message);
+      }
+    };
+
+    getFilledInitialValues();
+  }, [marketingId, marketing]);
+
+  // Reset error message when step changes
+  useEffect(() => {
+    setFormErrorList([]);
+    setFormErrorMessage('');
+  }, [step]);
+
+  useEffect(() => {
+    if (memoSalesOrder.length === 0) {
+      setStep(1);
+    }
+  }, [memoSalesOrder]);
+
   return (
     <>
       <Modal
@@ -492,6 +470,7 @@ const SalesOrderFormModal = ({
           }}
           className='w-full min-h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-y-auto'
         >
+          {step <= 3 && (
             <div className='w-full sm:w-[446px]'>
               <div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
                 <Button
@@ -516,7 +495,7 @@ const SalesOrderFormModal = ({
                 onSubmit={handleFormSubmit}
               >
                 <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-                Informasi Umum
+                  Informasi Order
                 </h4>
 
                 <SelectInputRadio
@@ -536,9 +515,9 @@ const SalesOrderFormModal = ({
                   isClearable
                   placeholder='Pilih Pelanggan'
                   isDisabled={
-                  formType === 'add_deliver' ||
+                    modalAction === 'add_deliver' ||
-                  formType === 'edit_deliver' ||
+                    modalAction === 'edit_deliver' ||
-                  formType === 'edit'
+                    modalAction === 'edit'
                   }
                 />
                 <DateInput
@@ -553,7 +532,8 @@ const SalesOrderFormModal = ({
                   errorMessage={formik.errors.so_date}
                   placeholder='Pilih Tanggal'
                   readOnly={
-                  formType == 'add_deliver' || formType == 'edit_deliver'
+                    modalAction == 'add_deliver' ||
+                    modalAction == 'edit_deliver'
                   }
                 />
                 <SelectInputRadio
@@ -573,7 +553,8 @@ const SalesOrderFormModal = ({
                   isClearable
                   placeholder='Pilih Sales'
                   isDisabled={
-                  formType === 'add_deliver' || formType === 'edit_deliver'
+                    modalAction === 'add_deliver' ||
+                    modalAction === 'edit_deliver'
                   }
                 />
                 <DebouncedTextArea
@@ -588,14 +569,17 @@ const SalesOrderFormModal = ({
                   isError={formik.touched.notes && Boolean(formik.errors.notes)}
                   errorMessage={formik.errors.notes}
                   disabled={
-                  formType === 'add_deliver' || formType === 'edit_deliver'
+                    modalAction === 'add_deliver' ||
+                    modalAction === 'edit_deliver'
                   }
                 />
                 <NumberInput
                   name='total_price'
                   label='Total Penjualan'
-                placeholder='Tambah produk terlebih dahulu'
+                  value={grandTotal}
-                value={grandTotal || ''}
+                  disabled={
+                    grandTotal === 0 && formik.values.sales_order.length === 0
+                  }
                   readOnly
                   startAdornment={
                     <span className='font-semibold py-1 text-xs'>Rp</span>
@@ -616,13 +600,14 @@ const SalesOrderFormModal = ({
                     type='button'
                     onClick={nextButtonHandler}
                     disabled={isNextButtonDisabled}
-                  className='w-full p-3 rounded-lg text-sm text-base-100'
+                    className='w-full rounded-lg text-sm text-base-100'
                   >
                     Tambah Produk
                   </Button>
                 )}
               </div>
             </div>
+          )}
           {step === 2 && (
             <div className='w-full min-h-full flex flex-col sm:w-[446px] border-l border-base-content/10'>
               <div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
@@ -639,7 +624,7 @@ const SalesOrderFormModal = ({
                         className='p-0 text-black hover:text-base-content'
                       >
                         <Icon
-                          icon='heroicons:arrow-left'
+                          icon='heroicons:chevron-left'
                           width={20}
                           height={20}
                         />
@@ -650,20 +635,22 @@ const SalesOrderFormModal = ({
                   )}
 
                   <h4 className='text-sm font-medium text-base-content/50'>
-                    Tambah Produk
+                    {selectedMarketingProduct?.id ? 'Ubah' : 'Tambah'} Produk
                   </h4>
                 </div>
+                <RequirePermission permissions='lti.marketing.sales_order.delete'>
                   <Button
                     type='button'
                     variant='ghost'
                     color='none'
-                  onClick={() => closeModalHandler()}
+                    onClick={deleteClickHandler}
                     className='p-0 text-error hover:text-base-content'
                   >
                     <Icon icon='heroicons:trash' width={20} height={20} />
                   </Button>
+                </RequirePermission>
               </div>
-              <div className='flex flex-1 flex-col'>
+              <div className='flex flex-1 flex-col p-4'>
                 <MemoizedSalesOrderProductForm
                   onSubmitForm={handleAddSubmitSO}
                   initialValues={selectedMarketingProduct ?? undefined}
@@ -678,21 +665,23 @@ const SalesOrderFormModal = ({
                 <h4 className='text-sm font-medium text-base-content/50'>
                   Informasi Produk
                 </h4>
+                <RequirePermission permissions='lti.marketing.sales_order.delete'>
                   <Button
                     type='button'
                     variant='ghost'
                     color='none'
-                  onClick={() => closeModalHandler()}
+                    onClick={deleteClickHandler}
                     className='p-0 text-error hover:text-base-content'
                   >
                     <Icon icon='heroicons:trash' width={20} height={20} />
                   </Button>
+                </RequirePermission>
               </div>
               <div className='flex flex-1 flex-col'>
                 {memoSalesOrder.length > 0 && (
-                  <div className='p-4'>
+                  <div className='px-4 pt-4'>
                     <MemoizedSalesOrderProductTable
-                      formType={formType}
+                      formType={(modalAction || 'add') as 'add' | 'edit'}
                       data={memoSalesOrder}
                       onDelete={handleDeleteSO}
                       onEdit={handleEditSO}
@@ -703,7 +692,7 @@ const SalesOrderFormModal = ({
                 <div className='p-4 w-full'>
                   <Button
                     type='button'
-                    className='justify-center w-full rounded-lg text-center text-sm text-base-100'
+                    className='justify-center w-full p-3 rounded-lg text-center text-sm text-base-100'
                     onClick={() => formRef.current?.requestSubmit()}
                   >
                     Submit
@@ -718,8 +707,8 @@ const SalesOrderFormModal = ({
         ref={successModal.ref}
         iconPosition='left'
         type='success'
-        text='Data Berhasil Ditambahkan'
+        text={`${modalAction === 'add' ? 'Data Berhasil Ditambahkan' : 'Data Berhasil Diubah'}`}
-        subtitleText='Data sales order telah berhasil disimpan.'
+        subtitleText={`${modalAction === 'add' ? 'Data sales order telah berhasil disimpan.' : 'Data sales order telah berhasil diubah.'}`}
         primaryButton={{
           text: 'Oke',
           color: 'primary',
@@ -737,6 +726,21 @@ const SalesOrderFormModal = ({
           onAddProductClick={handleAddSOClick}
         />
       </ConfirmationModal>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
     </>
   );
 };

src/components/pages/marketing/form/MarketingForm.schema.ts

@@ -7,6 +7,12 @@ import {
   DeliveryOrderProductFormValues,
   DeliveryOrderProductSchema,
 } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import {
+  BaseDeliveryOrder,
+  BaseSalesOrder,
+  Marketing,
+} from '@/types/api/marketing/marketing';
+import { formatDate } from '@/lib/helper';
 
 type MarketingSchemaType = {
   customer_id: number | undefined;
@@ -64,7 +70,7 @@ export const DeliveryOrderSchema: Yup.ObjectSchema<DeliveryOrderSchemaType> =
       .required('Pengiriman wajib diisi!')
       .test(
         'at-least-one-valid-row',
-        'Minimal ada satu baris pengiriman yang valid!',
+        'Minimal harus  ada satu baris pengiriman yang lengkap diisi!',
         function (items) {
           if (!items || items.length === 0) return false;
 
@@ -86,3 +92,124 @@ export const UpdateSalesOrderSchema = SalesOrderSchema;
 export type SalesOrderFormValues = Yup.InferType<typeof SalesOrderSchema>;
 
 export type DeliveryOrderFormValues = Yup.InferType<typeof DeliveryOrderSchema>;
+
+// ================ Helper Function ================
+const SalesProductToFieldValues = (
+  product: BaseSalesOrder
+): SalesOrderProductFormValues => {
+  return {
+    id: product.id,
+    vehicle_number: product.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.id,
+      label: product.product_warehouse.product.name,
+    },
+    product_warehouse_id: product.product_warehouse.id,
+    unit_price: product.unit_price,
+    total_weight: product.total_weight,
+    qty: product.qty,
+    avg_weight: product.avg_weight,
+    total_price: product.total_price,
+  };
+};
+const DeliveryProductToFieldValues = (
+  salesOrders: BaseSalesOrder[],
+  delivery: BaseDeliveryOrder
+): DeliveryOrderProductFormValues[] => {
+  const data = delivery.deliveries.map((item) => {
+    const soId = salesOrders.find(
+      (so) => so.product_warehouse.id === item.product_warehouse.id
+    )?.id;
+    return {
+      id: soId,
+      unit_price: item.unit_price,
+      total_weight: item.total_weight,
+      qty: item.qty,
+      avg_weight: item.avg_weight,
+      total_price: item.total_price,
+      vehicle_number: item.vehicle_number,
+      delivery_date: formatDate(delivery.delivery_date, 'yyyy-MM-DD'),
+      do_number: delivery.do_number,
+      marketing_product_id: soId,
+      marketing_product: {
+        id: soId,
+        vehicle_number: item.vehicle_number,
+        kandang_id: item.product_warehouse.warehouse.id,
+        kandang: {
+          value: item.product_warehouse.warehouse.id,
+          label: item.product_warehouse.warehouse.name,
+        },
+        product_warehouse: {
+          value: item.product_warehouse.id,
+          label: item.product_warehouse.product.name,
+        },
+        product_warehouse_id: item.product_warehouse.id,
+        unit_price: item.unit_price,
+        total_weight: item.total_weight,
+        qty: item.qty,
+        avg_weight: item.avg_weight,
+        total_price: item.total_price,
+      },
+    } as DeliveryOrderProductFormValues;
+  });
+  return data;
+};
+export const mergeSOwithDO = (
+  salesOrders: SalesOrderProductFormValues[],
+  deliveryOrders: DeliveryOrderProductFormValues[],
+  autofill?: boolean
+): DeliveryOrderProductFormValues[] => {
+  return salesOrders.map((so) => {
+    const delivery = deliveryOrders.find(
+      (d) => d?.marketing_product_id === so.id
+    );
+
+    return {
+      ...so, // nilai dasar dari sales order
+      marketing_product_id: so.id,
+      delivery_date: delivery?.delivery_date || undefined,
+      do_number: delivery?.do_number || undefined,
+      vehicle_number: delivery?.vehicle_number || so.vehicle_number,
+      unit_price: autofill ? so.unit_price : delivery?.unit_price,
+      total_weight: autofill ? so.total_weight : delivery?.total_weight,
+      qty: autofill ? so.qty : delivery?.qty,
+      avg_weight: autofill ? so.avg_weight : delivery?.avg_weight,
+      total_price: autofill ? so.total_price : delivery?.total_price,
+      marketing_product: so, // jika ada, override
+    } as DeliveryOrderProductFormValues;
+  });
+};
+
+export const getFilledMarketingFormInitialValues = (
+  marketing: Marketing
+): SalesOrderFormValues & DeliveryOrderFormValues => {
+  return {
+    customer_id: marketing.customer.id,
+    sales_person_id: marketing.sales_person.id,
+    sales_person: {
+      value: marketing.sales_person.id,
+      label: marketing.sales_person.name,
+    },
+    customer: {
+      value: marketing.customer.id,
+      label: marketing.customer.name,
+    },
+    so_date: formatDate(marketing.so_date, 'yyyy-MM-DD'),
+    notes: marketing.notes,
+    sales_order: marketing.sales_order.map((so) =>
+      SalesProductToFieldValues(so)
+    ),
+    delivery_order: mergeSOwithDO(
+      marketing.sales_order?.map(SalesProductToFieldValues) ?? [],
+      marketing.delivery_order?.flatMap((delivery) =>
+        DeliveryProductToFieldValues(marketing.sales_order, delivery)
+      ) ?? [],
+      marketing.latest_approval.step_number > 1
+    ),
+  };
+};

src/components/pages/marketing/form/MarketingForm.tsx

@@ -41,7 +41,6 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
 import DebouncedTextArea from '@/components/input/DebouncedTextArea';
-import SalesOrderProductTable from '@/components/pages/marketing/form/table-view/SalesOrderProductTable';
 import SalesOrderProductForm from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm';
 import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-view/DeliveryOrderProductTable';
 import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
@@ -53,7 +52,6 @@ import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { CreatedUser } from '@/types/api/api-general';
 import { UserApi } from '@/services/api/user';
 
-const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
 const MemoizedDeliveryOrderProductTable = memo(DeliveryOrderProductTable);
 const MemoizedDeliveryOrderProductForm = memo(DeliveryOrderProductForm);
@@ -134,7 +132,8 @@ export const DeliveryProductToFieldValues = (
 };
 export const mergeSOwithDO = (
   salesOrders: SalesOrderProductFormValues[],
-  deliveryOrders: DeliveryOrderProductFormValues[]
+  deliveryOrders: DeliveryOrderProductFormValues[],
+  autofill?: boolean
 ): DeliveryOrderProductFormValues[] => {
   return salesOrders.map((so) => {
     const delivery = deliveryOrders.find(
@@ -147,11 +146,11 @@ export const mergeSOwithDO = (
       delivery_date: delivery?.delivery_date || undefined,
       do_number: delivery?.do_number || undefined,
       vehicle_number: delivery?.vehicle_number || so.vehicle_number,
-      unit_price: delivery?.unit_price,
+      unit_price: autofill ? so.unit_price : delivery?.unit_price,
-      total_weight: delivery?.total_weight,
+      total_weight: autofill ? so.total_weight : delivery?.total_weight,
-      qty: delivery?.qty,
+      qty: autofill ? so.qty : delivery?.qty,
-      avg_weight: delivery?.avg_weight,
+      avg_weight: autofill ? so.avg_weight : delivery?.avg_weight,
-      total_price: delivery?.total_price,
+      total_price: autofill ? so.total_price : delivery?.total_price,
       marketing_product: so, // jika ada, override
     } as DeliveryOrderProductFormValues;
   });
@@ -701,6 +700,7 @@ const MarketingForm = ({
               }}
             >
               <MemoizedDeliveryOrderProductTable
+                marketing={initialValues}
                 formType={formType}
                 data={deliveryOrderValues}
                 onEdit={handleEditDO}

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -10,9 +10,7 @@ import NumberInput from '@/components/input/NumberInput';
 import PatternInput from '@/components/input/PatternInput';
 import { formatVechicleNumber } from '@/lib/helper';
 import DateInput from '@/components/input/DateInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { BaseSalesOrder } from '@/types/api/marketing/marketing';
-import Badge from '@/components/Badge';
 import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
 import * as Yup from 'yup';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -20,6 +18,9 @@ import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import useSWR from 'swr';
 import { ProductApi } from '@/services/api/master-data';
+import StatusBadge from '@/components/helper/StatusBadge';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { OptionType } from '@/components/input/SelectInput';
 
 const roundWeight = (value: number) => Number(value.toFixed(2));
 const roundPrice = (value: number) => Math.round(value);
@@ -247,7 +248,7 @@ const DeliveryOrderProductForm = ({
   return (
     <>
       <form
-        className='size-full'
+        className='size-full flex flex-col relative gap-1.5'
         onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
@@ -256,13 +257,27 @@ const DeliveryOrderProductForm = ({
             <Alert color='error'>{formikErrorMessage}</Alert>
           </div>
         )}
-
+        <DateInput
-        <div className='grid sm:grid-cols-3 gap-4'>
+          name='delivery_date'
-          <SelectInput
+          label='Tanggal'
+          value={formik.values.delivery_date ?? undefined}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          isError={
+            formik.touched.delivery_date && Boolean(formik.errors.delivery_date)
+          }
+          errorMessage={formik.errors.delivery_date}
+          placeholder='Pilih Tanggal'
+          className={{
+            inputWrapper: 'bg-white',
+          }}
+          required
+        />
+        <SelectInputRadio
           options={options}
           label='Produk'
           placeholder='Pilih Produk'
-            isDisabled={formState == 'edit'}
+          readOnly={formState == 'edit'}
           value={
             selectedProduct
               ? ({
@@ -277,9 +292,7 @@ const DeliveryOrderProductForm = ({
             const selected = value as OptionType;
             setSelectedProduct(selected);
 
-              const so = salesOrders?.find(
+            const so = salesOrders?.find((item) => item.id === selected?.value);
-                (item) => item.id === selected?.value
-              );
             if (!so) {
               formik.setValues({
                 ...formik.values,
@@ -309,18 +322,17 @@ const DeliveryOrderProductForm = ({
           }}
           startAdornment={
             selectedProduct && (
-                <Badge
+              <StatusBadge
-                  variant='soft'
+                text={
-                  color='success'
-                  size='sm'
-                  className={{ badge: 'whitespace-nowrap font-semibold' }}
-                >
-                  {
                   exisitingValues?.find(
                     (item) => item.id === selectedProduct?.value
-                    )?.marketing_product?.kandang?.label
+                  )?.marketing_product?.kandang?.label ?? ''
                 }
-                </Badge>
+                color='success'
+                className={{
+                  badge: 'whitespace-nowrap w-fit font-semibold',
+                }}
+              />
             )
           }
           isClearable
@@ -328,23 +340,6 @@ const DeliveryOrderProductForm = ({
           errorMessage={formik.errors.marketing_product_id}
           required
         />
-          <DateInput
-            name='delivery_date'
-            label='Tanggal'
-            value={formik.values.delivery_date ?? undefined}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            isError={
-              formik.touched.delivery_date &&
-              Boolean(formik.errors.delivery_date)
-            }
-            errorMessage={formik.errors.delivery_date}
-            placeholder='Pilih Tanggal'
-            className={{
-              inputWrapper: 'bg-white',
-            }}
-            required
-          />
 
         <PatternInput
           name='vehicle_number'
@@ -361,9 +356,6 @@ const DeliveryOrderProductForm = ({
           isError={Boolean(formik.errors.vehicle_number)}
           errorMessage={formik.errors.vehicle_number}
         />
-        </div>
-        <div className='divider my-6'></div>
-        <div className='grid sm:grid-cols-3 gap-4'>
         <NumberInput
           required
           label='Kuantitas'
@@ -456,18 +448,23 @@ const DeliveryOrderProductForm = ({
           errorMessage={formik.errors.total_price}
           placeholder='Masukan Total Penjualan'
         />
-        </div>
 
-        <AlertErrorList formErrorList={formErrorList} onClose={close} />
+        <AlertErrorList
+          className={{
+            alert: 'w-full my-4',
+          }}
+          formErrorList={formErrorList}
+          onClose={close}
+        />
 
-        <div className='flex flex-row justify-end gap-3 mt-4'>
+        <div className='h-18' />
-          <Button type='reset' color='warning'>
+
-            Reset
+        <div className='absolute sm:w-full bottom-0 right-0'>
-          </Button>
           <Button
             type='submit'
             isLoading={formik.isSubmitting}
             disabled={formik.isSubmitting}
+            className='w-full p-3 rounded-lg text-base-100 text-sm font-semibold'
           >
             Submit
           </Button>

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -6,27 +6,20 @@ import {
   SalesOrderProductSchema,
 } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import { RefObject, useMemo, useState } from 'react';
-import SelectInput, {
+import { OptionType, useSelect } from '@/components/input/SelectInput';
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProductApi, UomApi, WarehouseApi } from '@/services/api/master-data';
+import { WarehouseApi } from '@/services/api/master-data';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import NumberInput from '@/components/input/NumberInput';
 import Button from '@/components/Button';
 import { isResponseSuccess } from '@/lib/api-helper';
-import {
+import { formatNumber, formatVechicleNumber } from '@/lib/helper';
-  formatCurrency,
-  formatNumber,
-  formatVechicleNumber,
-} from '@/lib/helper';
 import PatternInput from '@/components/input/PatternInput';
 import Alert from '@/components/Alert';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
-import useSWR from 'swr';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
 
 const roundWeight = (value: number) => Number(value.toFixed(2));
 const roundPrice = (value: number) => Math.round(value);
@@ -282,7 +275,7 @@ const SalesOrderProductForm = ({
   return (
     <>
       <form
-        className='size-full flex flex-col p-4 relative overflow-x-hidden'
+        className='size-full flex flex-col gap-1.5 relative'
         onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
@@ -311,7 +304,7 @@ const SalesOrderProductForm = ({
           }
           errorMessage={formik.errors.vehicle_number}
         />
-        <SelectInput
+        <SelectInputRadio
           required
           label='Kandang'
           options={kandangSourceOptions}
@@ -327,7 +320,7 @@ const SalesOrderProductForm = ({
           errorMessage={formik.errors.kandang_id}
           placeholder='Pilih Kandang'
         />
-        <SelectInput
+        <SelectInputRadio
           required
           label='Produk'
           options={productOptionsFiltered}
@@ -453,12 +446,12 @@ const SalesOrderProductForm = ({
 
         <div className='h-18' />
 
-        <div className='absolute p-4 sm:w-[446px] bottom-0 right-0'>
+        <div className='absolute w-full bottom-0 right-0'>
           <Button
             type='submit'
             isLoading={formik.isSubmitting}
             disabled={formik.isSubmitting}
-            className='w-full rounded-lg'
+            className='w-full p-3 rounded-lg text-base-100'
           >
             Submit
           </Button>

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

@@ -1,21 +1,27 @@
-import Table from '@/components/Table';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
-import * as TanStack from '@tanstack/react-table';
+import { useRef } from 'react';
-import { useMemo, useRef } from 'react';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
-import {
+import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
-  cn,
+import { Marketing } from '@/types/api/marketing/marketing';
-  formatCurrency,
-  formatDate,
-  formatNumber,
-  formatVechicleNumber,
-} from '@/lib/helper';
 
 type DeliveryOrderProductTableProps = {
   data: DeliveryOrderProductFormValues[];
-  formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
+  formType?:
-  onEdit: (id: number) => void;
+    | 'add'
+    | 'edit'
+    | 'add_deliver'
+    | 'edit_deliver'
+    | 'add_delivery'
+    | 'edit_delivery'
+    | 'detail'
+    | 'rejected'
+    | 'pending'
+    | string
+    | null;
+  marketing?: Marketing;
+  onEdit: (id: number, values: DeliveryOrderProductFormValues) => void;
   onDelete: (id: number) => void;
   onAddProductClick: () => void;
 };
@@ -26,201 +32,168 @@ const DeliveryOrderProductTable = ({
   onEdit,
   onDelete,
   onAddProductClick,
+  marketing,
 }: DeliveryOrderProductTableProps) => {
   const onEditRef = useRef(onEdit);
   onEditRef.current = onEdit;
   const onDeleteRef = useRef(onDelete);
   onDeleteRef.current = onDelete;
 
-  const canAddData = data.filter((item) => !Boolean(item.qty));
-
-  const columns = useMemo(() => {
-    const cols = [
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) => row.do_number,
-        header: 'No. Pengiriman',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) => (
-          <>
-            {props.row.original.do_number ? props.row.original.do_number : '-'}
-          </>
-        ),
-      },
-      {
-        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) =>
-          row.marketing_product?.kandang?.label,
-        header: 'Kandang',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          row.marketing_product?.product_warehouse?.label,
-        header: 'Produk',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          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) => 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) => 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) => 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) => 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: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) => (
-          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
-            <>
-              {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>
-                  <Button
-                    color='error'
-                    className='px-2 py-1 text-sm'
-                    onClick={() =>
-                      onDeleteRef.current(props.row.original.id as number)
-                    }
-                    type='button'
-                    disabled={!!props.row.original.do_number}
-                  >
-                    <Icon icon='mdi:delete' width={16} height={16} /> Hapus
-                  </Button>
-                </>
-              )}
-              {!props.row.original.qty && '-'}
-            </>
-          </div>
-        ),
-      },
-    ];
-    if (formType == 'add_deliver') {
-      return cols.filter((col) => col.header != 'No. Pengiriman');
-    }
-    return cols;
-  }, [formType, onEditRef]);
-
   return (
     <>
-      <Table<DeliveryOrderProductFormValues>
+      <div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
-        data={data}
+        {data.map((item) => {
-        columns={columns}
+          const doItem = marketing?.delivery_order?.find(
-        className={{
+            (doItem) => doItem.do_number === item.do_number
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          );
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
+          return (
-          headerRowClassName: 'border-b border-b-gray-200',
-          headerColumnClassName:
-            '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',
-          paginationClassName: 'hidden',
-        }}
-        emptyContent={
             <div
-            className={cn(
+              className='rounded-lg border border-tools-table-outline border-base-content/5'
-              'w-full h-16 flex flex-col justify-center items-center gap-2'
+              key={`table-${item.id}`}
-            )}
             >
-            <span className='text-gray-500'>Belum ada data pengiriman</span>
+              <table
-          </div>
+                style={{
-        }
+                  borderRadius: '0.5rem',
-      />
+                }}
-      <div className='flex flex-row gap-3 mt-3'>
+                className='border-none w-full'
+              >
+                <tbody className='w-full'>
+                  <tr className='border-b border-tools-table-outline border-base-content/5'>
+                    <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
+                      Label
+                    </th>
+                    <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
+                      <div className='flex w-full flex-row gap-1 items-center justify-between h-full mt-2'>
+                        <div>Value</div>
+                        {(formType === 'add_delivery' ||
+                          formType === 'edit_delivery' ||
+                          formType === 'detail') && (
+                          <div className='flex flex-row gap-1.5 items-center'>
                             <Button
                               type='button'
-          variant='outline'
+                              variant='ghost'
-          className='justify-start w-fit py-1 text-sm'
+                              color='none'
-          onClick={onAddProductClick}
+                              onClick={() => {
-          disabled={!canAddData}
+                                onEditRef.current(item.id as number, item);
+                              }}
+                              className='p-0 hover:text-base-content'
                             >
-          <Icon icon='mdi:plus' width={16} height={16} />
+                              <Icon
-          Tambah Pengiriman
+                                icon='heroicons:pencil'
+                                width={20}
+                                height={20}
+                              />
                             </Button>
+                            <Button
+                              type='button'
+                              variant='ghost'
+                              color='none'
+                              onClick={() => {
+                                onDeleteRef.current(item.id as number);
+                              }}
+                              className='p-0 text-error hover:text-base-content'
+                            >
+                              <Icon
+                                icon='heroicons:trash'
+                                width={20}
+                                height={20}
+                              />
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    </th>
+                  </tr>
+                  <>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Tanggal Pengiriman</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.delivery_date ? (
+                          formatDate(item.delivery_date, 'DD MMM YYYY')
+                        ) : (
+                          <span className='text-error'>Belum diisi</span>
+                        )}
+                      </td>
+                    </tr>
+                    {item.do_number && (
+                      <tr>
+                        <td className='text-sm px-4 py-3'>No. Pengiriman</td>
+                        <td className='text-sm px-4 py-3'>{item.do_number}</td>
+                      </tr>
+                    )}
+                    <tr>
+                      <td className='text-sm px-4 py-3'>No. Polisi</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.vehicle_number}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Gudang</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.marketing_product?.product_warehouse?.label}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Produk</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.marketing_product?.product_warehouse?.label}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Qty</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.qty
+                          ? `${formatNumber(parseFloat(item.qty as string))} ${item.marketing_product?.uom ?? ''}`
+                          : '-'}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Avg Bobot</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.avg_weight
+                          ? formatNumber(
+                              parseFloat(item.avg_weight as string)
+                            ) + ' Kg'
+                          : '-'}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Total Bobot</td>
+                      <td className='text-sm px-4 py-3'>
+                        {formatNumber(parseFloat(item.total_weight as string))}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Total Harga Satuan</td>
+                      <td className='text-sm px-4 py-3'>
+                        {formatCurrency(parseFloat(item.unit_price as string))}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Total Penjualan</td>
+                      <td className='text-sm px-4 py-3'>
+                        {formatCurrency(parseFloat(item.total_price as string))}
+                      </td>
+                    </tr>
+                    {doItem && (
+                      <tr>
+                        <td className='text-sm px-4 py-3'>
+                          Dokumen Pengiriman
+                        </td>
+                        <td className='text-sm px-4 py-3'>
+                          <DeliveryOrderExport
+                            data={marketing}
+                            deliveryOrder={doItem}
+                          />
+                        </td>
+                      </tr>
+                    )}
+                  </>
+                </tbody>
+              </table>
+            </div>
+          );
+        })}
       </div>
     </>
   );

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

@@ -1,16 +1,14 @@
 'use client';
 
 import Button from '@/components/Button';
-import Table from '@/components/Table';
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import {
-  cn,
   formatCurrency,
   formatNumber,
   formatVechicleNumber,
 } from '@/lib/helper';
 import { Icon } from '@iconify/react';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
 import * as TanStack from '@tanstack/react-table';
 import CheckboxInput from '@/components/input/CheckboxInput';
 
@@ -156,15 +154,51 @@ const SalesOrderProductTable = ({
               style={{
                 borderRadius: '0.5rem',
               }}
-              className='border-none'
+              className='border-none w-full'
             >
-              <tbody>
+              <tbody className='w-full'>
                 <tr className='border-b border-tools-table-outline border-base-content/5'>
-                  <th className='text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
+                  <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
                     Label
                   </th>
                   <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
-                    Value
+                    <div className='flex w-full flex-row gap-1 items-center justify-between h-full mt-2'>
+                      <div>Value</div>
+                      {formType !== 'success' && (
+                        <div className='flex flex-row gap-1.5 items-center'>
+                          <Button
+                            type='button'
+                            variant='ghost'
+                            color='none'
+                            onClick={() => {
+                              onEditRef.current(item.id as number);
+                            }}
+                            className='p-0 hover:text-base-content'
+                          >
+                            <Icon
+                              icon='heroicons:pencil'
+                              width={20}
+                              height={20}
+                            />
+                          </Button>
+                          <Button
+                            type='button'
+                            variant='ghost'
+                            color='none'
+                            onClick={() => {
+                              onDeleteRef.current(item.id as number);
+                            }}
+                            className='p-0 text-error hover:text-base-content'
+                          >
+                            <Icon
+                              icon='heroicons:trash'
+                              width={20}
+                              height={20}
+                            />
+                          </Button>
+                        </div>
+                      )}
+                    </div>
                   </th>
                 </tr>
                 <>
@@ -178,48 +212,47 @@ const SalesOrderProductTable = ({
                       {item.product_warehouse?.label}
                     </td>
                   </tr>
-                  <tr>
-                    <td className='text-sm px-4 py-3'>Kategori</td>
-                    <td className='text-sm px-4 py-3'>Telur</td>
-                  </tr>
                   <tr>
                     <td className='text-sm px-4 py-3'>Produk</td>
                     <td className='text-sm px-4 py-3'>
                       {item.product_warehouse?.label}
                     </td>
                   </tr>
-                  <tr>
-                    <td className='text-sm px-4 py-3'>Tipe Konversi</td>
-                    <td className='text-sm px-4 py-3'>Peti 15Kg</td>
-                  </tr>
-                  <tr>
-                    <td className='text-sm px-4 py-3'>Total Peti</td>
-                    <td className='text-sm px-4 py-3'>
-                      {formatNumber(parseFloat(item.qty as string))}
-                    </td>
-                  </tr>
                   <tr>
                     <td className='text-sm px-4 py-3'>Total Bobot</td>
                     <td className='text-sm px-4 py-3'>
-                      {formatNumber(parseFloat(item.total_weight as string))}
+                      {item.total_weight
+                        ? formatNumber(
+                            parseFloat(item.total_weight as string)
+                          ) + ' Kg'
+                        : '-'}
                     </td>
                   </tr>
                   <tr>
-                    <td className='text-sm px-4 py-3'>Total Butir Telur</td>
+                    <td className='text-sm px-4 py-3'>Avg Bobot</td>
                     <td className='text-sm px-4 py-3'>
-                      {formatNumber(parseFloat(item.qty as string))}
+                      {item.avg_weight
+                        ? formatNumber(parseFloat(item.avg_weight as string)) +
+                          ' Kg'
+                        : '-'}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>Qty</td>
+                    <td className='text-sm px-4 py-3'>
+                      {`${formatNumber(parseFloat(item.qty as string))} ${item.uom || ''}`}
                     </td>
                   </tr>
                   <tr>
                     <td className='text-sm px-4 py-3'>Total Harga Satuan</td>
                     <td className='text-sm px-4 py-3'>
-                      {formatNumber(parseFloat(item.unit_price as string))}
+                      {formatCurrency(parseFloat(item.unit_price as string))}
                     </td>
                   </tr>
                   <tr>
                     <td className='text-sm px-4 py-3'>Total Penjualan</td>
                     <td className='text-sm px-4 py-3'>
-                      {formatNumber(parseFloat(item.total_price as string))}
+                      {formatCurrency(parseFloat(item.total_price as string))}
                     </td>
                   </tr>
                 </>
@@ -233,7 +266,7 @@ const SalesOrderProductTable = ({
             <Button
               type='button'
               variant='outline'
-              className='justify-center w-full rounded-lg text-center text-sm mt-5'
+              className='justify-center p-3 w-full rounded-lg text-center text-sm mt-3'
               onClick={onAddProductClick}
             >
               Tambah Produk

src/components/pages/marketing/pdf/DeliveryOrderExport.tsx

@@ -4,10 +4,9 @@ import { Icon } from '@iconify/react';
 import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
 import { useMemo, useState } from 'react';
 import { formatDate, formatNumber, formatVechicleNumber } from '@/lib/helper';
-import { format } from 'path';
-import { date } from 'yup';
 import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
 import toast from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
 
 interface DeliveryOrderExportProps {
   data?: Marketing;
@@ -21,6 +20,9 @@ const DeliveryOrderExport = ({
 }: DeliveryOrderExportProps) => {
   const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
   const salesData = data;
+  const searchParams = useSearchParams();
+  const action = searchParams.get('action');
+  const id = searchParams.get('id');
 
   const handleDownloadPDF = async () => {
     if (!salesData) {
@@ -32,37 +34,47 @@ const DeliveryOrderExport = ({
       const blob = await pdf(
         <PDFDocument data={salesData} deliveryOrder={deliveryOrder} />
       ).toBlob();
-      const url = URL.createObjectURL(blob);
+      const url = window.URL.createObjectURL(blob);
       const link = document.createElement('a');
+      link.style.display = 'none';
       link.href = url;
       link.download = `${deliveryOrder?.do_number || 'delivery-order'}.pdf`;
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
       document.body.appendChild(link);
       link.click();
+
+      // Delay cleanup to ensure download starts
+      setTimeout(() => {
         document.body.removeChild(link);
-      URL.revokeObjectURL(url);
+        window.URL.revokeObjectURL(url);
+      }, 150);
     } catch (error) {
       toast.error('Failed to generate PDF. Please try again.');
     } finally {
       setIsGeneratingPDF(false);
+      window.location.href = `/marketing?action=${action}&id=${id}`;
     }
   };
 
   if (!salesData) {
     return (
-      <div className='flex items-center justify-center min-h-screen'>
+      <div className='flex items-start justify-start'>
         <div className='text-gray-500'>No sales order data available</div>
       </div>
     );
   }
 
-  return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
+  return deliveryOrder?.do_number ? (
     <Button
-      color='primary'
+      variant='outline'
-      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      color='none'
+      className='w-fit text-sm px-3 py-2.5 rounded-lg border-base-content/10 text-base-content/50'
       onClick={handleDownloadPDF}
       isLoading={isGeneratingPDF}
+      type='button'
     >
-      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      <Icon icon='heroicons:document-text' width={20} height={20} />
       {deliveryOrder.do_number}
     </Button>
   ) : null;
@@ -87,11 +99,6 @@ const PDFDocument = ({
       <Page size='A4' style={pdfStyles.page}>
         {/* Header Section */}
         <View style={pdfStyles.header}>
-          <Image
-            src={'https://placehold.co/120x30/png'}
-            style={pdfStyles.logo}
-            id={'mbu-logo'}
-          />
           <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
           <Text style={pdfStyles.address}>
             SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.

src/components/pages/marketing/pdf/SalesOrderExport.tsx

@@ -6,6 +6,7 @@ import { useMemo, useState } from 'react';
 import { formatDate, formatNumber } from '@/lib/helper';
 import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
 import toast from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
 
 interface SalesOrderExportProps {
   data?: Marketing;
@@ -15,6 +16,9 @@ interface SalesOrderExportProps {
 const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
   const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
   const salesData = data;
+  const searchParams = useSearchParams();
+  const action = searchParams.get('action');
+  const id = searchParams.get('id');
 
   const handleDownloadPDF = async () => {
     if (!salesData) {
@@ -24,24 +28,32 @@ const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
     setIsGeneratingPDF(true);
     try {
       const blob = await pdf(<PDFDocument data={salesData} />).toBlob();
-      const url = URL.createObjectURL(blob);
+      const url = window.URL.createObjectURL(blob);
       const link = document.createElement('a');
+      link.style.display = 'none';
       link.href = url;
       link.download = `${salesData?.so_number || 'sales-order'}.pdf`;
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
       document.body.appendChild(link);
       link.click();
+
+      // Delay cleanup to ensure download starts
+      setTimeout(() => {
         document.body.removeChild(link);
-      URL.revokeObjectURL(url);
+        window.URL.revokeObjectURL(url);
+      }, 150);
     } catch (error) {
       toast.error('Failed to generate PDF. Please try again.');
     } finally {
       setIsGeneratingPDF(false);
+      window.location.href = `/marketing?action=${action}&id=${id}`;
     }
   };
 
   if (!salesData) {
     return (
-      <div className='flex items-center justify-center min-h-screen'>
+      <div className='flex items-start justify-start'>
         <div className='text-gray-500'>No sales order data available</div>
       </div>
     );
@@ -49,12 +61,14 @@ const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
 
   return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
     <Button
-      color='primary'
+      variant='outline'
-      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      color='none'
+      className='w-fit text-sm px-3 py-2.5 rounded-lg border-base-content/10 text-base-content/50'
       onClick={handleDownloadPDF}
       isLoading={isGeneratingPDF}
+      type='button'
     >
-      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      <Icon icon='heroicons:document-text' width={20} height={20} />
       {salesData.so_number}
     </Button>
   ) : null;
@@ -71,11 +85,6 @@ const PDFDocument = ({ data }: { data: Marketing }) => {
       <Page size='A4' style={pdfStyles.page}>
         {/* Header Section */}
         <View style={pdfStyles.header}>
-          <Image
-            src={'https://placehold.co/120x30/png'}
-            style={pdfStyles.logo}
-            id={'mbu-logo'}
-          />
           <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
           <Text style={pdfStyles.address}>
             SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.