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

component

src/components/pages/report/expense/tab/ReportExpenseTab.tsx

@@ -38,6 +38,7 @@ import { Nonstock } from '@/types/api/master-data/nonstock';
 import { ColumnDef } from '@tanstack/react-table';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 
 interface ReportExpenseTabProps {
   tabId: string;
@@ -169,20 +170,6 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
     [formik.values.category]
   );
 
-  // ===== ACTIVE FILTERS COUNT =====
-  const activeFiltersCount = useMemo(() => {
-    let count = 0;
-    if (filterParams.location_id) count += 1;
-    if (filterParams.supplier_id) count += 1;
-    if (filterParams.kandang_id) count += 1;
-    if (filterParams.nonstock_id) count += 1;
-    if (filterParams.realization_date) count += 1;
-    if (filterParams.category) count += 1;
-    return count;
-  }, [filterParams]);
-
-  const hasFilters = activeFiltersCount > 0;
-
   // ===== DATA FETCHING =====
   const { data: reportExpenseResponse, isLoading } = useSWR(
     isSubmitted
@@ -312,25 +299,12 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
     setTabActions(
       tabId,
       <div className='flex flex-row gap-3'>
-        <Button
-          variant='outline'
-          color='none'
+        <ButtonFilter
+          values={formik.values}
           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'
@@ -387,8 +361,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
     );
   }, [
     tabId,
-    hasFilters,
-    activeFiltersCount,
+    formik.values,
     isAnyExportLoading,
     handleExportExcel,
     handleExportPDF,