chore: main filters are working and tweaks styles

app/(prowler)/providers/page.tsx

@@ -2,6 +2,7 @@ import { Spacer } from "@nextui-org/react";
 import { Suspense } from "react";
 
 import { getProvider } from "@/actions";
+import { FilterControls } from "@/components/filters";
 import {
   AddProviderModal,
   ColumnsProvider,
@@ -22,6 +23,8 @@ export default async function Providers({
     <>
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
       <Spacer y={4} />
+      <FilterControls mutedFindings={false} />
+      <Spacer y={4} />
       <div className="flex flex-col items-end w-full">
         <div className="flex space-x-6">
           <AddProviderModal />

components/filters/CustomDatePicker.tsx

@@ -7,21 +7,41 @@ import {
   today,
 } from "@internationalized/date";
 import { Button, ButtonGroup, DatePicker } from "@nextui-org/react";
-import { useDateFormatter, useLocale } from "@react-aria/i18n";
-import React from "react";
+import { useLocale } from "@react-aria/i18n";
+import { useRouter, useSearchParams } from "next/navigation";
+import React, { useCallback } from "react";
 
 export const CustomDatePicker = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const defaultDate = today(getLocalTimeZone());
 
   const [value, setValue] = React.useState(defaultDate);
 
   const { locale } = useLocale();
-  const formatter = useDateFormatter({ dateStyle: "full" });
 
   const now = today(getLocalTimeZone());
   const nextWeek = startOfWeek(now.add({ weeks: 1 }), locale);
   const nextMonth = startOfMonth(now.add({ months: 1 }));
 
+  const applyDateFilter = useCallback(
+    (date: any) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (date) {
+        params.set("filter[updated_at__lte]", date.toString());
+      } else {
+        params.delete("filter[updated_at__lte]");
+      }
+      router.push(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams],
+  );
+
+  const handleDateChange = (newValue: any) => {
+    setValue(newValue);
+    applyDateFilter(newValue);
+  };
+
   return (
     <div className="flex flex-col md:gap-2 w-full">
       <DatePicker
@@ -34,9 +54,13 @@ export const CustomDatePicker = () => {
             size="sm"
             variant="bordered"
           >
-            <Button onPress={() => setValue(now)}>Today</Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+            <Button onPress={() => handleDateChange(now)}>Today</Button>
+            <Button onPress={() => handleDateChange(nextWeek)}>
+              Next week
+            </Button>
+            <Button onPress={() => handleDateChange(nextMonth)}>
+              Next month
+            </Button>
           </ButtonGroup>
         }
         calendarProps={{
@@ -50,15 +74,11 @@ export const CustomDatePicker = () => {
           },
         }}
         value={value}
-        onChange={setValue}
+        onChange={handleDateChange}
         label="Scan date"
         size="sm"
         variant="flat"
       />
-      <p className="hidden md:flex text-default-500 text-sm">
-        Selected date:{" "}
-        {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-      </p>
     </div>
   );
 };

components/filters/CustomProviderInputs.tsx

@@ -4,12 +4,13 @@ import {
   AWSProviderBadge,
   AzureProviderBadge,
   GCPProviderBadge,
+  KS8ProviderBadge,
 } from "../icons/providers-badge";
 
 export const CustomProviderInputAWS = () => {
   return (
     <div className="flex gap-x-2 items-center">
-      <AWSProviderBadge width={30} height={30} />
+      <AWSProviderBadge width={25} height={25} />
       <p className="text-sm">Amazon Web Services</p>
     </div>
   );
@@ -18,7 +19,7 @@ export const CustomProviderInputAWS = () => {
 export const CustomProviderInputAzure = () => {
   return (
     <div className="flex gap-x-2 items-center">
-      <AzureProviderBadge width={30} height={30} />
+      <AzureProviderBadge width={25} height={25} />
       <p className="text-sm">Azure</p>
     </div>
   );
@@ -27,8 +28,17 @@ export const CustomProviderInputAzure = () => {
 export const CustomProviderInputGCP = () => {
   return (
     <div className="flex gap-x-2 items-center">
-      <GCPProviderBadge width={30} height={30} />
+      <GCPProviderBadge width={25} height={25} />
       <p className="text-sm">Google Cloud Platform</p>
     </div>
   );
 };
+
+export const CustomProviderInputKubernetes = () => {
+  return (
+    <div className="flex gap-x-2 items-center">
+      <KS8ProviderBadge width={25} height={25} />
+      <p className="text-sm">Kubernetes</p>
+    </div>
+  );
+};

components/filters/CustomSelectProvider.tsx

@@ -1,11 +1,14 @@
 "use client";
 
 import { Select, SelectItem } from "@nextui-org/react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
 
 import {
   CustomProviderInputAWS,
   CustomProviderInputAzure,
   CustomProviderInputGCP,
+  CustomProviderInputKubernetes,
 } from "./CustomProviderInputs";
 
 const dataInputsProvider = [
@@ -27,11 +30,33 @@ const dataInputsProvider = [
   {
     key: "kubernetes",
     label: "Kubernetes",
-    value: <CustomProviderInputGCP />,
+    value: <CustomProviderInputKubernetes />,
   },
 ];
 
 export const CustomSelectProvider = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [selectedProvider, setSelectedProvider] = useState("");
+
+  const applyProviderFilter = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value) {
+        params.set("filter[provider]", value);
+      } else {
+        params.delete("filter[provider]");
+      }
+      router.push(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams],
+  );
+
+  useEffect(() => {
+    const providerFromUrl = searchParams.get("filter[provider]") || "";
+    setSelectedProvider(providerFromUrl);
+  }, [searchParams]);
+
   return (
     <Select
       items={dataInputsProvider}
@@ -43,6 +68,12 @@ export const CustomSelectProvider = () => {
         base: "w-full",
         trigger: "h-12",
       }}
+      onChange={(e) => {
+        const value = e.target.value;
+        setSelectedProvider(value);
+        applyProviderFilter(value);
+      }}
+      selectedKeys={selectedProvider ? [selectedProvider] : []}
       renderValue={(items) => {
         return items.map((item) => {
           return (

components/filters/FilterControls.tsx

@@ -1,5 +1,11 @@
-import React from "react";
+"use client";
 
+import { Button } from "@nextui-org/react";
+import { useRouter, useSearchParams } from "next/navigation";
+import React from "react";
+import { useCallback } from "react";
+
+// import { SearchParamsProps } from "../../types/components";
 import { CustomAccountSelection } from "./CustomAccountSelection";
 import { CustomCheckboxMutedFindings } from "./CustomCheckboxMutedFindings";
 import { CustomDatePicker } from "./CustomDatePicker";
@@ -7,17 +13,41 @@ import { CustomSelectProvider } from "./CustomSelectProvider";
 
 interface FilterControlsProps {
   mutedFindings?: boolean;
+  // searchParams: SearchParamsProps;
 }
 
 export const FilterControls: React.FC<FilterControlsProps> = ({
   mutedFindings = true,
+  // searchParams,
 }) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const clearAllFilters = useCallback(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    // Remove all filter parameters
+    Array.from(params.keys()).forEach((key) => {
+      if (key.startsWith("filter[")) {
+        params.delete(key);
+      }
+    });
+    router.push(`?${params.toString()}`, { scroll: false });
+  }, [router, searchParams]);
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-4">
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 gap-y-4 items-center">
       <CustomSelectProvider />
       <CustomDatePicker />
       <CustomAccountSelection />
       <CustomCheckboxMutedFindings mutedFindings={mutedFindings} />
+      <Button
+        className="w-fit"
+        onClick={clearAllFilters}
+        variant="flat"
+        color="default"
+        size="sm"
+      >
+        Clear all
+      </Button>
     </div>
   );
 };