fix(FE): fixing delivery order ui

src/components/pages/marketing/DeliveryOrderFormModal.tsx

@@ -1,16 +1,10 @@
 'use client';
 
 import AlertErrorList from '@/components/helper/form/FormErrors';
-import { useSelect, OptionType } from '@/components/input/SelectInput';
+import { 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 {
@@ -18,16 +12,13 @@ import {
   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 { BaseApproval } 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';
@@ -47,6 +38,9 @@ import {
   DeliveryOrderSchema,
   getFilledMarketingFormInitialValues,
   SalesOrderFormValues,
+  mergeSOwithDO,
+  SalesProductToFieldValues,
+  DeliveryProductToFieldValues,
 } from '@/components/pages/marketing/form/MarketingForm.schema';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -116,13 +110,6 @@ const DeliveryOrderFormModal = ({
   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] =
@@ -505,6 +492,14 @@ const DeliveryOrderFormModal = ({
     formik.setFieldValue('delivery_order', deliveryOrderValues);
   }, [deliveryOrderValues]);
 
+  const grandTotal = useMemo(() => {
+    return deliveryOrderValues.reduce(
+      (total, product) =>
+        total + parseFloat((product.total_price as string) || '0'),
+      0
+    );
+  }, [deliveryOrderValues]);
+
   return (
     <>
       <Modal
@@ -663,26 +658,28 @@ const DeliveryOrderFormModal = ({
                     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'>
+                <div className='w-full gap-3 flex flex-col'>
+                  <h4 className='px-4 pt-4 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}
-                    />
+                    <div className='px-4'>
+                      <MemoizedDeliveryOrderProductTable
+                        marketing={marketing.data}
+                        formType={
+                          deliveryRejected
+                            ? 'rejected'
+                            : isPending
+                              ? 'pending'
+                              : modalAction
+                        }
+                        data={deliveryOrderValues}
+                        onEdit={handleEditDO}
+                        onDelete={handleDeleteDO}
+                        onAddProductClick={handleAddDOClick}
+                      />
+                    </div>
                   )}
                   {step === 2 && (
                     <MemoizedDeliveryOrderProductForm