fix(FE): make text area debounce input for lag textarea input issue

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

@@ -47,6 +47,7 @@ import SalesOrderProductForm from './repeater/sales-order/SalesOrderProductForm'
 import DeliveryOrderProductTable from './table-view/DeliveryOrderProductTable';
 import DeliveryOrderProductForm from './repeater/delivery-order/DeliverOrderProduct';
 import { DeliveryOrderProductFormValues } from './repeater/delivery-order/DeliverOrderProduct.schema';
+import DebouncedTextArea from '@/components/input/DebouncedTextArea';
 
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
@@ -240,12 +241,6 @@ const MarketingForm = ({
   const selectedRowSOIds = Object.keys(rowSOSelection).map((item) =>
     parseInt(item)
   );
-  const [rowDOSelection, setRowDOSelection] = useState<Record<string, boolean>>(
-    {}
-  );
-  const selectedRowDOIds = Object.keys(rowDOSelection).map((item) =>
-    parseInt(item)
-  );
 
   // ================== FETCH OPTIONS ==================
   const {
@@ -353,13 +348,6 @@ const MarketingForm = ({
       afterSubmit?.();
     },
   });
-  const grandTotal = useMemo(() => {
-    return formik.values.sales_order.reduce(
-      (total, product) =>
-        total + parseFloat((product.total_price as string) || '0'),
-      0
-    );
-  }, [formik.values.sales_order]);
 
   // ================== FORM REPEATER HANDLER ==================
   const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
@@ -468,23 +456,20 @@ const MarketingForm = ({
       formik.setFieldValue('customer_id', (val as OptionType)?.value);
       formik.setFieldValue('customer', val as OptionType);
     },
-    [formik]
+    []
   );
   const handleDelete = useCallback(() => {
     deleteModal.openModal();
   }, [deleteModal]);
 
   // ================== SALES ORDER HANDLER ==================
-  const handleDeleteSO = useCallback(
-    (id: number) => {
-      const currentProducts = formik.values.sales_order;
-      formik.setFieldValue(
-        'sales_order',
-        currentProducts.filter((p) => p.id != id)
-      );
-    },
-    [formik]
-  );
+  const handleDeleteSO = useCallback((id: number) => {
+    const currentProducts = formik.values.sales_order;
+    formik.setFieldValue(
+      'sales_order',
+      currentProducts.filter((p) => p.id != id)
+    );
+  }, []);
   const handleBulkDeleteSO = useCallback(() => {
     const currentProducts = formik.values.sales_order;
     formik.setFieldValue(
@@ -494,7 +479,7 @@ const MarketingForm = ({
       )
     );
     setRowSOSelection({});
-  }, [formik, selectedRowSOIds]);
+  }, [selectedRowSOIds]);
   const handleAddSOClick = useCallback(() => {
     setSelectedMarketingProduct(null);
     addSOModal.openModal();
@@ -530,17 +515,10 @@ const MarketingForm = ({
 
       addSOModal.closeModal();
     },
-    [formik, addSOModal]
+    [addSOModal]
   );
 
   // ================== DELIVERY ORDER HANDLER ==================
-  const handleDeleteDO = useCallback(
-    (id: number) => {
-      const currentProducts = formik.values.delivery_order;
-      setDeliveryOrderValues((prev) => prev.filter((p) => p.id !== id));
-    },
-    [formik]
-  );
   const handleEditDO = useCallback(
     (id: number, values?: DeliveryOrderProductFormValues) => {
       setDeliveryFormState('edit');
@@ -550,22 +528,13 @@ const MarketingForm = ({
       setSelectedDeliveryProduct(values ?? currentProducts ?? null);
       addDOModal.openModal();
     },
-    [formik, addDOModal]
+    [addDOModal]
   );
-  const handleBulkDeleteDO = useCallback(() => {
-    setDeliveryOrderValues((prev) =>
-      prev.filter((product) => !selectedRowDOIds.includes(product.id ?? -1))
-    );
-
-    setRowDOSelection({});
-  }, [formik, selectedRowDOIds]);
-
   const handleAddDOClick = useCallback(() => {
     setDeliveryFormState('add');
     setSelectedDeliveryProduct(null);
     addDOModal.openModal();
   }, [addDOModal]);
-
   const handleAddSubmitDO = useCallback(
     async (values: DeliveryOrderProductFormValues) => {
       const newValues = {
@@ -577,20 +546,7 @@ const MarketingForm = ({
       addDOModal.closeModal();
       setSelectedDeliveryProduct(null);
     },
-    [formik, addDOModal]
-  );
-  const handleInputDate = useCallback(
-    (newData: DeliveryOrderProductFormValues) => {
-      setDeliveryOrderValues((prev) => {
-        return prev.map((item) => {
-          if (item.marketing_product_id == newData.marketing_product_id) {
-            return newData;
-          }
-          return item;
-        });
-      });
-    },
-    []
+    [addDOModal]
   );
   const handleUpdateDO = useCallback(
     async (id: number, values: DeliveryOrderProductFormValues) => {
@@ -602,7 +558,7 @@ const MarketingForm = ({
       addDOModal.closeModal();
       setSelectedDeliveryProduct(null);
     },
-    [formik, addDOModal]
+    [addDOModal]
   );
 
   const memoSalesOrder = formik.values.sales_order;
@@ -611,6 +567,14 @@ const MarketingForm = ({
     formik.setFieldValue('delivery_order', deliveryOrderValues);
   }, [deliveryOrderValues, initialValues]);
 
+  const grandTotal = useMemo(() => {
+    return memoSalesOrder.reduce(
+      (total, product) =>
+        total + parseFloat((product.total_price as string) || '0'),
+      0
+    );
+  }, [memoSalesOrder]);
+
   return (
     <>
       <form
@@ -705,7 +669,7 @@ const MarketingForm = ({
 
         {/* Input Notes */}
         <div className='grid grid-cols-2 gap-3'>
-          <TextArea
+          <DebouncedTextArea
             required
             name='notes'
             label='Catatan'