From b4353cf834249f35d307cc75a0784a4c1e404b4c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 5 Feb 2026 14:55:27 +0700
Subject: [PATCH] refactor(FE): Make filter type nullable and use applied
 filters

---
 .../report/finance/tab/CustomerPaymentTab.tsx | 49 ++++++++++++-------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index 7160a273..e26abceb 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -56,8 +56,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   //   typeof salesOptions
   // >([]);
   const [appliedFilterByType, setAppliedFilterByType] = useState<
-    (typeof dataTypeOptions)[0]
-  >({ value: 'trans_date', label: 'Tanggal Jual/Bayar' });
+    (typeof dataTypeOptions)[0] | null
+  >(null);
   const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
   const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
 
@@ -79,9 +79,9 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     []
   );
 
-  const [filterByType, setFilterByType] = useState<(typeof dataTypeOptions)[0]>(
-    dataTypeOptions[0]
-  );
+  const [filterByType, setFilterByType] = useState<
+    (typeof dataTypeOptions)[0] | null
+  >(null);
 
   const {
     options: customerOptions,
@@ -154,14 +154,14 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   const handleResetFilters = useCallback(() => {
     setIsSubmitted(false);
     setFilterCustomer([]);
-    setFilterByType(dataTypeOptions[0]);
+    setFilterByType(null);
     setFilterStartDate('');
     setFilterEndDate('');
     setAppliedFilterCustomer([]);
-    setAppliedFilterByType(dataTypeOptions[0]);
+    setAppliedFilterByType(null);
     setAppliedFilterStartDate('');
     setAppliedFilterEndDate('');
-  }, [dataTypeOptions]);
+  }, []);
 
   const handleApplyFilters = useCallback(() => {
     setAppliedFilterCustomer(filterCustomer);
@@ -184,23 +184,33 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     let count = 0;
 
     // Date filter (start_date + end_date = 1 filter)
-    if (filterStartDate || filterEndDate) {
+    if (appliedFilterStartDate || appliedFilterEndDate) {
       count += 1;
     }
 
     // Customer filter
-    if (filterCustomer.length > 0) {
+    if (appliedFilterCustomer.length > 0) {
+      count += 1;
+    }
+
+    // Filter by type filter (hanya dihitung jika ada nilai yang dipilih)
+    if (appliedFilterByType) {
       count += 1;
     }
 
     // TODO: Uncomment when BE is ready
     // // Sales filter
-    // if (filterSales.length > 0) {
+    // if (appliedFilterSales.length > 0) {
     //   count += 1;
     // }
 
     return count;
-  }, [appliedFilterStartDate, appliedFilterEndDate, appliedFilterCustomer]);
+  }, [
+    appliedFilterStartDate,
+    appliedFilterEndDate,
+    appliedFilterCustomer,
+    appliedFilterByType,
+  ]);
 
   const hasFilters = activeFiltersCount > 0;
 
@@ -218,9 +228,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             //   appliedFilterSales.length > 0
             //     ? appliedFilterSales.map((v) => String(v.value)).join(',')
             //     : undefined,
-            filter_by: appliedFilterByType.value as
+            filter_by: appliedFilterByType?.value as
               | 'trans_date'
-              | 'realization_date',
+              | 'realization_date'
+              | undefined,
             start_date: appliedFilterStartDate || undefined,
             end_date: appliedFilterEndDate || undefined,
             page: currentPage,
@@ -263,7 +274,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
       //   appliedFilterSales.length > 0
       //     ? appliedFilterSales.map((v) => String(v.value)).join(',')
       //     : undefined,
-      filter_by: appliedFilterByType.value as 'trans_date' | 'realization_date',
+      filter_by: appliedFilterByType?.value as
+        | 'trans_date'
+        | 'realization_date'
+        | undefined,
       start_date: appliedFilterStartDate || undefined,
       end_date: appliedFilterEndDate || undefined,
       limit: 100,
@@ -342,9 +356,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
           //     : undefined,
           start_date: appliedFilterStartDate || undefined,
           end_date: appliedFilterEndDate || undefined,
-          filter_by: appliedFilterByType.value as
+          filter_by: appliedFilterByType?.value as
             | 'trans_date'
-            | 'realization_date',
+            | 'realization_date'
+            | undefined,
         },
       });
       toast.success('PDF berhasil dibuat dan diunduh.');