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

component

src/components/pages/closing/ClosingsTable.tsx

@@ -31,6 +31,7 @@ import {
   ClosingFilterType,
 } from '@/components/pages/closing/filter/ClosingFilter';
 import ClosingTableSkeleton from '@/components/pages/closing/skeleton/ClosingTableSkeleton';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 
 const RowOptionsMenu = ({
   props,
@@ -287,23 +288,6 @@ const ClosingsTable = () => {
     );
   }, [formik.values.project_status, projectStatusOptions]);
 
-  // ===== ACTIVE FILTERS COUNT =====
-  const activeFiltersCount = useMemo(() => {
-    let count = 0;
-
-    if (tableFilterState.location_id) {
-      count += 1;
-    }
-
-    if (tableFilterState.project_status) {
-      count += 1;
-    }
-
-    return count;
-  }, [tableFilterState.location_id, tableFilterState.project_status]);
-
-  const hasFilters = activeFiltersCount > 0;
-
   // ===== SEARCH CHANGE HANDLER =====
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
@@ -352,25 +336,12 @@ const ClosingsTable = () => {
                 }}
               />
 
-              <Button
-                variant='outline'
-                color='none'
+              <ButtonFilter
+                values={tableFilterState}
+                excludeFields={['page', 'pageSize', 'search']}
                 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>
+                className='px-3 py-2.5'
+              />
             </div>
           </div>