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

component

src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx

@@ -7,6 +7,7 @@ import toast from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 import Dropdown from '@/components/dropdown/Dropdown';
 import SelectInput, { useSelect } from '@/components/input/SelectInput';
 import ProductionResultProjectFlockKandangTable from '@/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTable';
@@ -324,20 +325,6 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     [formik.values.kandang_id]
   );
 
-  // ===== ACTIVE FILTERS COUNT =====
-  const activeFiltersCount = useMemo(() => {
-    let count = 0;
-
-    if (filterParams.area_id) count += 1;
-    if (filterParams.location_id) count += 1;
-    if (filterParams.project_flock_id) count += 1;
-    if (filterParams.project_flock_kandang_id) count += 1;
-
-    return count;
-  }, [filterParams]);
-
-  const hasFilters = activeFiltersCount > 0;
-
   // ===== DATA FETCHING =====
   const { data: projectFlockKandangsData, isLoading } = useSWR<
     BaseApiResponse<ProjectFlockKandang[]>
@@ -539,25 +526,12 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     setTabActions(
       tabId,
       <div className='flex flex-row gap-3'>
-        <Button
-          variant='outline'
-          color='none'
+        <ButtonFilter
+          values={filterParams}
           onClick={() => filterModal.openModal()}
-          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'
@@ -614,8 +588,7 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     );
   }, [
     tabId,
-    hasFilters,
-    activeFiltersCount,
+    filterParams,
     isAnyExportLoading,
     exportToExcelHandler,
     exportToPdfHandler,