From 42088e51a842beb408fdcc0c223c9e273a6fcdec Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 6 Feb 2026 13:13:57 +0700
Subject: [PATCH] refactor(FE): Refactor marketing filter to use unique
 customer options

---
 .../pages/marketing/MarketingFilter.tsx       | 45 ++++++++++++++++---
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/marketing/MarketingFilter.tsx b/src/components/pages/marketing/MarketingFilter.tsx
index 3c59e07e..eda3d9b2 100644
--- a/src/components/pages/marketing/MarketingFilter.tsx
+++ b/src/components/pages/marketing/MarketingFilter.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { RefObject } from 'react';
+import { RefObject, useMemo } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import Modal from '@/components/Modal';
@@ -9,10 +9,12 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import { CustomerApi, ProductApi } from '@/services/api/master-data';
 import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
 import { MarketingFilter } from '@/types/api/marketing/marketing';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseMarketing, BaseSalesOrder } from '@/types/api/marketing/marketing';
 
 interface MarketingFilterModal {
   ref: RefObject<HTMLDialogElement | null>;
@@ -31,21 +33,52 @@ const MarketingFilterModal = ({
 
   // ===== OPTIONS =====
   const {
-    options: productsOptions,
+    rawData: productsRawData,
     isLoadingOptions: isLoadingProductsOptions,
     setInputValue: setProductsInputValue,
     loadMore: loadMoreProducts,
-  } = useSelect(ProductApi.basePath, 'id', 'name', '', {
+  } = useSelect<BaseMarketing>(MarketingApi.basePath, 'id', 'so_number', '', {
     limit: 'limit',
   });
+
+  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,
     isLoadingOptions: isLoadingCustomersOptions,
     setInputValue: setCustomersInputValue,
     loadMore: loadMoreCustomers,
-  } = useSelect(CustomerApi.basePath, 'id', 'name', '', {
+  } = useSelect(MarketingApi.basePath, 'customer.id', 'customer.name', '', {
     limit: 'limit',
   });
+
+  const uniqueCustomersOptions = useMemo(() => {
+    const seen = new Set();
+    return customersOptions.filter((customer) => {
+      if (seen.has(customer.value)) return false;
+      seen.add(customer.value);
+      return true;
+    });
+  }, [customersOptions]);
+
   const statusOptions = MARKETING_APPROVAL_LINE.map((item) => ({
     value: item.step_name.split(' ').join('_').toUpperCase(),
     label: item.step_name,
@@ -151,7 +184,7 @@ const MarketingFilterModal = ({
             label='Customer'
             isClearable
             placeholder='Pilih customer'
-            options={customersOptions}
+            options={uniqueCustomersOptions}
             isLoading={isLoadingCustomersOptions}
             value={formik.values.customer_id}
             onChange={customerChangeHandler}