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

component

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -34,6 +34,7 @@ import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Color } from '@/types/theme';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 
 const RowOptionsMenu = ({
   props,
@@ -159,30 +160,6 @@ const TransferToLayingsTable = () => {
     TransferToLayingApi.getAllFetcher
   );
 
-  const filterCount = useMemo(() => {
-    let count = 0;
-
-    if (tableFilterState.startDate && tableFilterState.endDate) {
-      count += 1;
-    }
-
-    if (tableFilterState.flockSource.length > 0) {
-      count += 1;
-    }
-
-    if (tableFilterState.flockDestination.length > 0) {
-      count += 1;
-    }
-
-    if (tableFilterState.status.length > 0) {
-      count += 1;
-    }
-
-    return count;
-  }, [tableFilterState]);
-
-  const isFilterActive = filterCount > 0;
-
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
     useState(false);
 
@@ -559,30 +536,19 @@ const TransferToLayingsTable = () => {
               }}
             />
 
-            <Button
-              variant='outline'
-              color='none'
+            <ButtonFilter
+              values={tableFilterState}
+              excludeFields={[
+                'page',
+                'pageSize',
+                'search',
+                'filter_by',
+                'sort_by',
+              ]}
+              fieldGroups={[['startDate', 'endDate']]}
               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': isFilterActive,
-                }
-              )}
-            >
-              <Icon icon='heroicons:funnel' width={20} height={20} />
-              Filter
-              {isFilterActive && (
-                <Badge
-                  className={{
-                    badge:
-                      'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
-                  }}
-                >
-                  {filterCount}
-                </Badge>
-              )}
-            </Button>
+              className='px-3 py-2.5'
+            />
 
             <Dropdown
               align='end'