refactor(FE): Refactor ButtonFilter to support excluded fields with

useMemo

src/components/helper/ButtonFilter.tsx

@@ -3,15 +3,33 @@ import { getFilledFormikValuesCount } from '@/lib/formik-helper';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 import { FormikValues } from 'formik';
+import { useMemo } from 'react';
 
 export type ButtonFilterProps = ButtonProps & {
   values: FormikValues;
   onClick: () => void;
+  excludeFields?: string[];
 };
 
 // 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200
 
-const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
+const ButtonFilter = ({
+  values,
+  onClick,
+  excludeFields = [],
+  ...props
+}: ButtonFilterProps) => {
+  const filteredValues = useMemo(() => {
+    const result: FormikValues = {};
+    Object.keys(values).forEach((key) => {
+      if (!excludeFields.includes(key)) {
+        result[key] = values[key];
+      }
+    });
+    return result;
+  }, [values, excludeFields]);
+
+  const activeCount = getFilledFormikValuesCount(filteredValues);
   return (
     <Button
       {...props}
@@ -21,7 +39,7 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
       className={cn(
         'rounded-lg max-h-10 font-semibold text-sm gap-1.5',
         'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
-        getFilledFormikValuesCount(values) > 0
+        activeCount > 0
           ? 'border-primary-gradient text-primary rounded-lg!'
           : 'rounded-lg',
         props.className
@@ -31,14 +49,12 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
         icon='heroicons:funnel'
         width={20}
         height={20}
-        className={
+        className={activeCount > 0 ? 'text-blue-600' : ''}
-          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
-        }
       />
       Filter
-      {getFilledFormikValuesCount(values) > 0 && (
+      {activeCount > 0 && (
         <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-          {getFilledFormikValuesCount(values)}
+          {activeCount}
         </span>
       )}
     </Button>