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

component

src/components/pages/report/marketing/tab/DailyMarketingTab.tsx

@@ -47,6 +47,7 @@ import {
   MARKETING_TYPE_OPTIONS,
 } from '@/config/constant';
 import Badge from '@/components/Badge';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 
 interface DailyMarketingTabProps {
   tabId: string;
@@ -202,47 +203,6 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
     );
   }, [formik.values.marketing_type]);
 
-  // ===== ACTIVE FILTERS COUNT =====
-  const activeFiltersCount = useMemo(() => {
-    let count = 0;
-
-    if (filterParams.area_id) {
-      count += 1;
-    }
-
-    if (filterParams.location_id) {
-      count += 1;
-    }
-
-    if (filterParams.warehouse_id) {
-      count += 1;
-    }
-
-    if (filterParams.customer_id) {
-      count += 1;
-    }
-
-    if (filterParams.start_date || filterParams.end_date) {
-      count += 1;
-    }
-
-    if (filterParams.filter_by) {
-      count += 1;
-    }
-
-    if (filterParams.marketing_type) {
-      count += 1;
-    }
-
-    if (filterParams.sort_by) {
-      count += 1;
-    }
-
-    return count;
-  }, [filterParams]);
-
-  const hasFilters = activeFiltersCount > 0;
-
   // ===== DATA FETCHING =====
   const { data: dailyMarketings, isLoading } = useSWR(
     isSubmitted
@@ -412,30 +372,13 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
           }}
         />
 
-        <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 && (
-            <Badge
-              className={{
-                badge:
-                  'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
-              }}
-            >
-              {activeFiltersCount}
-            </Badge>
-          )}
-        </Button>
+          variant='outline'
+          className='px-3 py-2.5'
+        />
 
         <Dropdown
           align='end'
@@ -493,8 +436,7 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   }, [
     tabId,
     searchValue,
-    hasFilters,
-    activeFiltersCount,
+    formik.values,
     isAnyExportLoading,
     filterModal.open,
     setTabActions,

src/components/pages/report/marketing/tab/HppPerKandangTab.tsx

@@ -17,6 +17,7 @@ import {
 } from '@/types/api/report/hpp-per-kandang';
 import { isResponseSuccess } from '@/lib/api-helper';
 import Button from '@/components/Button';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 import Dropdown from '@/components/Dropdown';
 import { generateHppPerKandangPDF } from '@/components/pages/report/marketing/export/HppPerkandangExportPDF';
 import { generateHppPerKandangExcel } from '@/components/pages/report/marketing/export/HppPerkandangExportXLSX';
@@ -233,42 +234,6 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
     );
   }, [formik.values.show_unrecorded, showUnrecordedOptions]);
 
-  // ===== ACTIVE FILTERS COUNT =====
-  const activeFiltersCount = useMemo(() => {
-    let count = 0;
-
-    if (filterParams.period) {
-      count += 1;
-    }
-
-    if (filterParams.area_id) {
-      count += 1;
-    }
-
-    if (filterParams.location_id) {
-      count += 1;
-    }
-
-    if (filterParams.kandang_id) {
-      count += 1;
-    }
-
-    if (filterParams.weight_min || filterParams.weight_max) {
-      count += 1;
-    }
-
-    if (filterParams.show_unrecorded !== undefined) {
-      count += 1;
-    }
-
-    if (filterParams.sort_by) {
-      count += 1;
-    }
-
-    return count;
-  }, [filterParams]);
-
-  const hasFilters = activeFiltersCount > 0;
 
   // ===== DATA FETCHING =====
   const { data: hppPerKandang, isLoading } = useSWR(
@@ -486,25 +451,12 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
     setTabActions(
       tabId,
       <div className='flex flex-row gap-3'>
-        <Button
-          variant='outline'
-          color='none'
+        <ButtonFilter
+          values={formik.values}
           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'
@@ -561,8 +513,7 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
     );
   }, [
     tabId,
-    hasFilters,
-    activeFiltersCount,
+    formik.values,
     isAnyExportLoading,
     filterModal.open,
     setTabActions,