fix: set initial value to MarketingFilter

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}
       />
     </>
   );