feat: add CustomRegionSelection for the filters

app/(prowler)/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
     <>
       <Header title="Scan Overview" icon="solar:pie-chart-2-outline" />
       <Spacer y={4} />
-      <FilterControls />
+      <FilterControls date accounts regions mutedFindings />
       <Spacer y={10} />
       <div className="grid grid-cols-12 gap-4">
         <CustomBox

app/(prowler)/providers/page.tsx

@@ -23,7 +23,7 @@ export default async function Providers({
     <>
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
       <Spacer y={4} />
-      <FilterControls mutedFindings={false} />
+      <FilterControls search providers />
       <Spacer y={4} />
       <div className="flex flex-col items-end w-full">
         <div className="flex space-x-6">

components/filters/CustomCheckboxMutedFindings.tsx

@@ -1,20 +1,10 @@
 import { Checkbox } from "@nextui-org/react";
 import React from "react";
 
-interface CustomCheckboxMutedFindingsProps {
-  mutedFindings?: boolean;
-}
-
-export const CustomCheckboxMutedFindings: React.FC<
-  CustomCheckboxMutedFindingsProps
-> = ({ mutedFindings }) => {
+export const CustomCheckboxMutedFindings = () => {
   return (
-    <>
-      {mutedFindings && (
-        <Checkbox className="xl:-mt-8" size="md" color="danger">
-          Include Muted Findings
-        </Checkbox>
-      )}
-    </>
+    <Checkbox className="xl:-mt-8" size="md" color="danger">
+      Include Muted Findings
+    </Checkbox>
   );
 };

components/filters/CustomRegionSelection.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { Select, SelectItem } from "@nextui-org/react";
+
+const regions = [
+  { key: "af-south-1", label: "AF South 1" },
+  { key: "ap-east-1", label: "AP East 1" },
+  { key: "ap-northeast-1", label: "AP Northeast 1" },
+  { key: "ap-northeast-2", label: "AP Northeast 2" },
+  { key: "ap-northeast-3", label: "AP Northeast 3" },
+  { key: "ap-south-1", label: "AP South 1" },
+  { key: "ap-south-2", label: "AP South 2" },
+  { key: "ap-southeast-1", label: "AP Southeast 1" },
+  { key: "ap-southeast-2", label: "AP Southeast 2" },
+  { key: "ap-southeast-3", label: "AP Southeast 3" },
+  { key: "ap-southeast-4", label: "AP Southeast 4" },
+  { key: "ca-central-1", label: "CA Central 1" },
+  { key: "ca-west-1", label: "CA West 1" },
+  { key: "eu-central-1", label: "EU Central 1" },
+  { key: "eu-central-2", label: "EU Central 2" },
+  { key: "eu-north-1", label: "EU North 1" },
+  { key: "eu-south-1", label: "EU South 1" },
+  { key: "eu-south-2", label: "EU South 2" },
+  { key: "eu-west-1", label: "EU West 1" },
+  { key: "eu-west-2", label: "EU West 2" },
+  { key: "eu-west-3", label: "EU West 3" },
+  { key: "il-central-1", label: "IL Central 1" },
+  { key: "me-central-1", label: "ME Central 1" },
+  { key: "me-south-1", label: "ME South 1" },
+  { key: "sa-east-1", label: "SA East 1" },
+  { key: "us-east-1", label: "US East 1" },
+  { key: "us-east-2", label: "US East 2" },
+  { key: "us-west-1", label: "US West 1" },
+  { key: "us-west-2", label: "US West 2" },
+];
+
+export const CustomRegionSelection = () => {
+  return (
+    <Select
+      label="Region"
+      placeholder="Select a region"
+      selectionMode="multiple"
+      className="w-full"
+      size="sm"
+    >
+      {regions.map((acc) => (
+        <SelectItem key={acc.key}>{acc.label}</SelectItem>
+      ))}
+    </Select>
+  );
+};

components/filters/FilterControls.tsx

@@ -7,15 +7,26 @@ import React, { useCallback } from "react";
 import { CustomAccountSelection } from "./CustomAccountSelection";
 import { CustomCheckboxMutedFindings } from "./CustomCheckboxMutedFindings";
 import { CustomDatePicker } from "./CustomDatePicker";
+import { CustomRegionSelection } from "./CustomRegionSelection";
 import { CustomSearchInput } from "./CustomSearchInput";
 import { CustomSelectProvider } from "./CustomSelectProvider";
 
 interface FilterControlsProps {
+  search?: boolean;
+  providers?: boolean;
+  date?: boolean;
+  regions?: boolean;
+  accounts?: boolean;
   mutedFindings?: boolean;
 }
 
 export const FilterControls: React.FC<FilterControlsProps> = ({
-  mutedFindings = true,
+  search = false,
+  providers = false,
+  date = false,
+  regions = false,
+  accounts = false,
+  mutedFindings = false,
 }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -32,11 +43,12 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-4 items-center">
-      <CustomSearchInput />
-      <CustomSelectProvider />
-      <CustomDatePicker />
-      <CustomAccountSelection />
-      <CustomCheckboxMutedFindings mutedFindings={mutedFindings} />
+      {search && <CustomSearchInput />}
+      {providers && <CustomSelectProvider />}
+      {date && <CustomDatePicker />}
+      {regions && <CustomRegionSelection />}
+      {accounts && <CustomAccountSelection />}
+      {mutedFindings && <CustomCheckboxMutedFindings />}
       <Button
         className="w-full md:w-fit"
         onClick={clearAllFilters}

components/filters/index.ts

@@ -2,5 +2,6 @@ export * from "../filters/CustomAccountSelection";
 export * from "../filters/CustomCheckboxMutedFindings";
 export * from "../filters/CustomDatePicker";
 export * from "../filters/CustomProviderInputs";
+export * from "../filters/CustomRegionSelection";
 export * from "../filters/CustomSelectProvider";
 export * from "../filters/FilterControls";