refactor(FE): Replace active filter count logic with ButtonFilter

component

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -38,6 +38,7 @@ import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
 import { OptionType } from '@/components/table/TableRowSizeSelector';
 import { Color } from '@/types/theme';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 
 interface CustomerPaymentTabProps {
   tabId: string;
@@ -213,30 +214,6 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     );
   }, [formik.values.filter_by]);
 
-  // ===== ACTIVE FILTERS COUNT =====
-  const activeFiltersCount = useMemo(() => {
-    let count = 0;
-
-    // Date filter (start_date + end_date = 1 filter)
-    if (filterParams.start_date || filterParams.end_date) {
-      count += 1;
-    }
-
-    // Customer filter
-    if (filterParams.customer_ids) {
-      count += 1;
-    }
-
-    // Filter by type filter (hanya dihitung jika ada nilai yang dipilih)
-    if (filterParams.filter_by) {
-      count += 1;
-    }
-
-    return count;
-  }, [filterParams]);
-
-  const hasFilters = activeFiltersCount > 0;
-
   // ===== DATA FETCHING =====
   const { data: customerPayment, isLoading } = useSWR(
     isSubmitted
@@ -380,25 +357,13 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     setTabActions(
       tabId,
       <div className='flex flex-row gap-3'>
-        <Button
-          variant='outline'
-          color='none'
+        <ButtonFilter
+          values={formik.values}
+          fieldGroups={[['start_date', 'end_date']]}
           onClick={handleFilterModalOpen}
-          className={cn(
-            'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
-            {
-              'border-primary-gradient text-primary': hasFilters,
-            }
-          )}
-        >
-          <Icon icon='heroicons:funnel' width={20} height={20} />
-          Filter
-          {hasFilters && (
-            <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-              {activeFiltersCount}
-            </span>
-          )}
-        </Button>
+          variant='outline'
+          className='px-3 py-2.5'
+        />
 
         <Dropdown
           align='end'
@@ -455,8 +420,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     );
   }, [
     tabId,
-    hasFilters,
-    activeFiltersCount,
+    formik.values,
     isAnyExportLoading,
     handleExportExcel,
     handleExportPdf,

src/components/pages/report/finance/tab/DebtSupplierTab.tsx

@@ -274,6 +274,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
       <div className='flex flex-row gap-3'>
         <ButtonFilter
           values={formik.values}
+          fieldGroups={[['startDate', 'endDate']]}
           onClick={handleFilterModalOpen}
           variant='outline'
           className='px-3 py-2.5'