chore: WIP

components/filters/FilterControls.tsx

@@ -4,6 +4,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useState } from "react";
 
 import { CrossIcon } from "../icons";
+import { DataTableFilterCustom } from "../providers/table";
 import { CustomButton } from "../ui/custom";
 import { CustomAccountSelection } from "./CustomAccountSelection";
 import { CustomCheckboxMutedFindings } from "./CustomCheckboxMutedFindings";
@@ -19,6 +20,7 @@ interface FilterControlsProps {
   regions?: boolean;
   accounts?: boolean;
   mutedFindings?: boolean;
+  customFilters?: { key: string; values: string[] }[];
 }
 
 export const FilterControls: React.FC<FilterControlsProps> = ({
@@ -28,6 +30,7 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
   regions = false,
   accounts = false,
   mutedFindings = false,
+  customFilters = [],
 }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -51,26 +54,29 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
   }, [router, searchParams]);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-4 items-center">
-      {search && <CustomSearchInput />}
-      {providers && <CustomSelectProvider />}
-      {date && <CustomDatePicker />}
-      {regions && <CustomRegionSelection />}
-      {accounts && <CustomAccountSelection />}
-      {mutedFindings && <CustomCheckboxMutedFindings />}
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-4 items-center">
+        {search && <CustomSearchInput />}
+        {providers && <CustomSelectProvider />}
+        {date && <CustomDatePicker />}
+        {regions && <CustomRegionSelection />}
+        {accounts && <CustomAccountSelection />}
+        {mutedFindings && <CustomCheckboxMutedFindings />}
 
-      {showClearButton && (
-        <CustomButton
-          className="w-fit"
-          onPress={clearAllFilters}
-          variant="dashed"
-          size="sm"
-          endContent={<CrossIcon size={24} />}
-          radius="sm"
-        >
-          Reset
-        </CustomButton>
-      )}
+        {showClearButton && (
+          <CustomButton
+            className="w-fit"
+            onPress={clearAllFilters}
+            variant="dashed"
+            size="sm"
+            endContent={<CrossIcon size={24} />}
+            radius="sm"
+          >
+            Reset
+          </CustomButton>
+        )}
+      </div>
+      <DataTableFilterCustom filters={customFilters} />
     </div>
   );
 };

components/filters/filters.ts

@@ -0,0 +1,13 @@
+export const filtersProviders = [
+  {
+    key: "provider",
+    labelCheckboxGroup: "Provider",
+    values: ["aws", "gcp", "azure"],
+  },
+  {
+    key: "connected",
+    labelCheckboxGroup: "Status provider",
+    values: ["false", "true"],
+  },
+  // Add more filter categories as needed
+];

components/filters/index.ts

@@ -5,3 +5,4 @@ export * from "../filters/CustomProviderInputs";
 export * from "../filters/CustomRegionSelection";
 export * from "../filters/CustomSelectProvider";
 export * from "../filters/FilterControls";
+export * from "../filters/filters";

components/providers/table/data-table-provider.tsx

@@ -23,7 +23,6 @@ import {
 } from "@/components/ui/table";
 import { MetaDataProps } from "@/types";
 
-import { DataTableFilterCustom } from "./data-table-filter-custom";
 import { DataTablePagination } from "./data-table-pagination";
 
 interface DataTableProviderProps<TData, TValue> {
@@ -55,20 +54,8 @@ export function DataTableProvider<TData, TValue>({
     },
   });
 
-  // This will be used to have "custom" filters in the table and will be
-  // passed to the DataTableFilterCustom component. This needs to be dynamic
-  // based on the columns that are available in the table.
-
-  const filters = [
-    { key: "provider", values: ["aws", "gcp", "azure"] },
-    { key: "connected", values: ["false", "true"] },
-    // Add more filter categories as needed
-  ];
-
   return (
     <>
-      <DataTableFilterCustom filters={filters} />
-
       <div className="p-4 z-0 flex flex-col relative justify-between gap-4 bg-content1 overflow-auto rounded-large shadow-small w-full  ">
         <Table>
           <TableHeader>

components/ui/custom/custom-dropdown-filter.tsx

@@ -20,10 +20,12 @@ interface FilterOption {
 
 interface CustomDropdownFilterProps {
   filter?: FilterOption;
+  onFilterChange?: (key: string, values: string[]) => void;
 }
 
 export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
   filter,
+  onFilterChange,
 }) => {
   // Early return if filter is undefined
   if (!filter) {
@@ -52,8 +54,15 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
       } else {
         setGroupSelected(newSelection);
       }
+
+      if (onFilterChange && filter) {
+        const selectedValues = Array.from(newSelection).filter(
+          (key) => key !== "all",
+        );
+        onFilterChange(filter.key, selectedValues);
+      }
     },
-    [allFilterKeys, groupSelected],
+    [allFilterKeys, groupSelected, onFilterChange, filter],
   );
 
   const handleSelectAllClick = useCallback(() => {
@@ -85,11 +94,7 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
               value={Array.from(groupSelected)}
               onValueChange={onSelectionChange}
             >
-              <Checkbox
-                value="all"
-                // isSelected={allSelected}
-                onValueChange={handleSelectAllClick}
-              >
+              <Checkbox value="all" onValueChange={handleSelectAllClick}>
                 Select All
               </Checkbox>
               {allFilterKeys.map((value) => (