fix: set initial value to MarketingFilter

src/components/pages/marketing/MarketingFilter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { RefObject, useMemo } from 'react';
+import { RefObject, useCallback, useMemo } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import Modal from '@/components/Modal';
@@ -17,22 +17,31 @@ import {
 import { MarketingFilter } from '@/types/api/marketing/marketing';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import { MarketingApi } from '@/services/api/marketing/marketing';
-import { CustomerApi } from '@/services/api/master-data';
+import { CustomerApi, ProductApi } from '@/services/api/master-data';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { BaseMarketing, BaseSalesOrder } from '@/types/api/marketing/marketing';
 import { ProjectFlockApi } from '@/services/api/production';
 import { ProjectFlock } from '@/types/api/production/project-flock';
+import { Product } from '@/types/api/master-data/product';
 
 interface MarketingFilterModal {
   ref: RefObject<HTMLDialogElement | null>;
   onSubmit?: (values: MarketingFilter) => void;
   onReset?: () => void;
+  initialValues?: {
+    product_ids: OptionType<number>[];
+    status: OptionType<string> | null;
+    customer: OptionType<number> | null;
+    project_flock: OptionType<number> | null;
+    project_flock_kandang: OptionType<number> | null;
+  };
 }
 
 const MarketingFilterModal = ({
   ref,
   onSubmit,
   onReset,
+  initialValues,
 }: MarketingFilterModal) => {
   const closeModalHandler = () => {
     ref.current?.close();
@@ -40,36 +49,13 @@ const MarketingFilterModal = ({
 
   // ===== OPTIONS =====
   const {
-    rawData: productsRawData,
+    options: productsOptions,
     isLoadingOptions: isLoadingProductsOptions,
     setInputValue: setProductsInputValue,
     loadMore: loadMoreProducts,
-  } = useSelect<BaseMarketing>(
+  } = useSelect<Product>(ProductApi.basePath, 'id', 'name', 'search', {
-    MarketingApi.basePath,
+    include_all: 'true',
-    'id',
+  });
-    'so_number',
-    'search'
-  );
-
-  const productsOptions = useMemo(() => {
-    if (!productsRawData || !isResponseSuccess(productsRawData)) return [];
-
-    const productsMap = new Map<number, { value: number; label: string }>();
-
-    productsRawData.data.forEach((deliveryOrder: BaseMarketing) => {
-      deliveryOrder.sales_order?.forEach((so: BaseSalesOrder) => {
-        const product = so.product_warehouse?.product;
-        if (product?.id && product?.name) {
-          productsMap.set(product.id, {
-            value: product.id,
-            label: product.name,
-          });
-        }
-      });
-    });
-
-    return Array.from(productsMap.values());
-  }, [productsRawData]);
 
   const {
     options: customersOptions,
@@ -102,7 +88,7 @@ const MarketingFilterModal = ({
   ];
 
   const formik = useFormik<MarketingFilterFormValues>({
-    initialValues: {
+    initialValues: initialValues || {
       product_ids: [],
       status: null,
       customer: null,
@@ -114,11 +100,17 @@ const MarketingFilterModal = ({
     onSubmit: async (values) => {
       const formattedValues: MarketingFilter = {
         product_ids: values.product_ids.map((item) => Number(item.value)),
+        product_names: values.product_ids.map((item) => item.label),
         status: values.status?.value.toString() || '',
+        status_name: values.status?.label || '-',
         customer_id: Number(values.customer?.value),
-        project_flock_id: Number(values.project_flock?.value) || undefined,
+        customer_name: values.customer?.label || '-',
+        project_flock_id: values.project_flock?.value || undefined,
+        project_flock_name: values.project_flock?.label,
         project_flock_kandang_id:
           Number(values.project_flock_kandang?.value) || undefined,
+        project_flock_kandang_name:
+          values.project_flock_kandang?.label || undefined,
       };
 
       onSubmit?.(formattedValues);
@@ -131,6 +123,22 @@ const MarketingFilterModal = ({
     },
   });
 
+  const { resetForm } = formik;
+
+  const formikResetHandler = useCallback(() => {
+    resetForm({
+      values: {
+        product_ids: [],
+        status: null,
+        customer: null,
+        project_flock: null,
+        project_flock_kandang: null,
+      },
+    });
+    onReset?.();
+    closeModalHandler();
+  }, [resetForm, onReset, closeModalHandler]);
+
   const productChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldValue('product_ids', val as OptionType[]);
   };
@@ -176,7 +184,7 @@ const MarketingFilterModal = ({
     >
       <form
         onSubmit={formik.handleSubmit}
-        onReset={formik.handleReset}
+        onReset={formikResetHandler}
         className='w-full flex flex-col'
       >
         {/* Modal Header */}

src/components/pages/marketing/MarketingTable.tsx

@@ -189,10 +189,15 @@ const MarketingTable = () => {
     initial: {
       search: '',
       product_ids: '',
+      product_names: '',
       status: '',
+      status_name: '',
       customer_id: '',
+      customer_name: '',
       project_flock_id: '',
+      project_flock_name: '',
       project_flock_kandang_id: '',
+      project_flock_kandang_name: '',
     },
     paramMap: {
       page: 'page',
@@ -203,6 +208,13 @@ const MarketingTable = () => {
       project_flock_id: 'project_flock_id',
       project_flock_kandang_id: 'project_flock_kandang_id',
     },
+    excludeKeysFromUrl: [
+      'product_names',
+      'status_name',
+      'customer_name',
+      'project_flock_name',
+      'project_flock_kandang_name',
+    ],
 
     persist: true,
     storeName: 'marketing-table',
@@ -225,17 +237,21 @@ const MarketingTable = () => {
       values.product_ids?.map((item) => item.toString()).join(','),
       true
     );
+    updateFilter('product_names', values.product_names?.join(','));
     updateFilter('status', values.status ? values.status.toString() : '', true);
+    updateFilter('status_name', values.status_name, true);
     updateFilter(
       'customer_id',
       values.customer_id ? values.customer_id.toString() : '',
       true
     );
+    updateFilter('customer_name', values.customer_name, true);
     updateFilter(
       'project_flock_id',
       values.project_flock_id ? values.project_flock_id.toString() : '',
       true
     );
+    updateFilter('project_flock_name', values.project_flock_name ?? '', true);
     updateFilter(
       'project_flock_kandang_id',
       values.project_flock_kandang_id
@@ -243,6 +259,11 @@ const MarketingTable = () => {
         : '',
       true
     );
+    updateFilter(
+      'project_flock_kandang_name',
+      values.project_flock_kandang_name ?? '',
+      true
+    );
   };
 
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
@@ -250,10 +271,15 @@ const MarketingTable = () => {
 
   const filterResetHandler = () => {
     updateFilter('product_ids', '', true);
+    updateFilter('product_names', '', true);
     updateFilter('status', '', true);
+    updateFilter('status_name', '', true);
     updateFilter('customer_id', '', true);
+    updateFilter('customer_name', '', true);
     updateFilter('project_flock_id', '', true);
+    updateFilter('project_flock_name', '', true);
     updateFilter('project_flock_kandang_id', '', true);
+    updateFilter('project_flock_kandang_name', '', true);
   };
 
   const approveClickHandler = () => {
@@ -333,6 +359,56 @@ const MarketingTable = () => {
         ? 'DELIVERY_ORDER'
         : null;
 
+  const marketingFilterInitialValues = useMemo(() => {
+    const productIds = tableFilterState.product_ids
+      ? tableFilterState.product_ids
+          .split(',')
+          .map((item) => item.trim())
+          .filter(Boolean)
+      : [];
+
+    const productLabels = tableFilterState.product_names
+      ? tableFilterState.product_names
+          .split(',')
+          .map((item) => item.trim())
+          .filter(Boolean)
+      : [];
+
+    return {
+      product_ids: productIds.map((value, idx) => ({
+        value: Number(value),
+        label: productLabels[idx] || '-',
+      })),
+      status: tableFilterState.status
+        ? {
+            value: tableFilterState.status,
+            label: tableFilterState.status_name,
+          }
+        : null,
+
+      customer: tableFilterState.customer_id
+        ? {
+            value: Number(tableFilterState.customer_id),
+            label: tableFilterState.customer_name,
+          }
+        : null,
+
+      project_flock: tableFilterState.project_flock_id
+        ? {
+            value: Number(tableFilterState.project_flock_id),
+            label: tableFilterState.project_flock_name,
+          }
+        : null,
+
+      project_flock_kandang: tableFilterState.project_flock_kandang_id
+        ? {
+            value: Number(tableFilterState.project_flock_kandang_id),
+            label: tableFilterState.project_flock_kandang_name,
+          }
+        : null,
+    };
+  }, [tableFilterState]);
+
   const approveMarketingHandler = async (notes: string) => {
     if (idsToProcess.length === 0) {
       toast.error(`Tidak ada data yang valid untuk di ${approveAction}.`);
@@ -774,7 +850,16 @@ const MarketingTable = () => {
           <div className='flex flex-row gap-3'>
             <ButtonFilter
               values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
+              excludeFields={[
+                'page',
+                'pageSize',
+                'search',
+                'product_names',
+                'status_name',
+                'customer_name',
+                'project_flock_name',
+                'project_flock_kandang_name',
+              ]}
               onClick={() => {
                 filterModal.openModal();
               }}
@@ -1146,6 +1231,7 @@ const MarketingTable = () => {
         ref={filterModal.ref}
         onSubmit={filterSubmitHandler}
         onReset={filterResetHandler}
+        initialValues={marketingFilterInitialValues}
       />
     </>
   );