feat(FE): Add support for grouped fields in ButtonFilter active count

calculation

src/components/helper/ButtonFilter.tsx

@@ -9,6 +9,7 @@ export type ButtonFilterProps = ButtonProps & {
   values: FormikValues;
   onClick: () => void;
   excludeFields?: string[];
+  fieldGroups?: 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
@@ -17,19 +18,36 @@ const ButtonFilter = ({
   values,
   onClick,
   excludeFields = [],
+  fieldGroups = [],
   ...props
 }: ButtonFilterProps) => {
-  const filteredValues = useMemo(() => {
-    const result: FormikValues = {};
+  const activeCount = useMemo(() => {
+    const filteredValues: FormikValues = {};
     Object.keys(values).forEach((key) => {
       if (!excludeFields.includes(key)) {
-        result[key] = values[key];
+        filteredValues[key] = values[key];
       }
     });
-    return result;
-  }, [values, excludeFields]);
 
-  const activeCount = getFilledFormikValuesCount(filteredValues);
+    let count = getFilledFormikValuesCount(filteredValues);
+
+    fieldGroups.forEach((group) => {
+      const groupFields = group.filter(
+        (field) => !excludeFields.includes(field)
+      );
+      const filledGroupFields = groupFields.filter(
+        (field) => filteredValues[field]
+      );
+      if (
+        filledGroupFields.length === groupFields.length &&
+        groupFields.length > 1
+      ) {
+        count -= groupFields.length - 1;
+      }
+    });
+
+    return count;
+  }, [values, excludeFields, fieldGroups]);
   return (
     <Button
       {...props}