chore: refactor custom filters to be able to have two in the same page

app/(prowler)/providers/page.tsx

@@ -24,7 +24,7 @@ export default async function Providers({
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
 
       <Spacer y={4} />
-      <FilterControls search providers customFilters={filterProviders} />
+      <FilterControls search providers />
       <Spacer y={4} />
 
       <AddProvider />
@@ -60,6 +60,7 @@ const SSRDataTable = async ({
       columns={ColumnProviders}
       data={providersData?.data || []}
       metadata={providersData?.meta}
+      customFilters={filterProviders}
     />
   );
 };

app/(prowler)/scans/page.tsx

@@ -1,54 +1,100 @@
 import { Spacer } from "@nextui-org/react";
+import { Suspense } from "react";
 
-// import { Suspense } from "react";
-// import { getProviders } from "@/actions/providers";
-import { FilterControls, filterScans } from "@/components/filters";
-// import { ColumnScans, SkeletonTableScans } from "@/components/scans/table";
+import { getProviders } from "@/actions/providers";
+import {
+  FilterControls,
+  filterProviders,
+  filterScans,
+} from "@/components/filters";
+import { ColumnScans, SkeletonTableScans } from "@/components/scans/table";
 import { Header } from "@/components/ui";
-// import { DataTable } from "@/components/ui/table";
-// import { SearchParamsProps } from "@/types";
+import { DataTable } from "@/components/ui/table";
+import { SearchParamsProps } from "@/types";
 
-export default async function Scans() {
-  // const searchParamsKey = JSON.stringify(searchParams || {});
+export default async function Scans({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) {
+  const searchParamsKey = JSON.stringify(searchParams || {});
 
   return (
     <>
       <Header title="Scans" icon="lucide:scan-search" />
 
       <Spacer y={4} />
-      <FilterControls search date providers customFilters={filterScans} />
+      <FilterControls search date providers />
       <Spacer y={4} />
 
-      {/* <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
-        <SSRDataTable searchParams={searchParams} />
-      </Suspense> */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div className="w-full">
+          <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
+            <SSRDataTableProviders searchParams={searchParams} />
+          </Suspense>
+        </div>
+        <div className="w-full">
+          <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
+            <SSRDataTableScans searchParams={searchParams} />
+          </Suspense>
+        </div>
+      </div>
     </>
   );
 }
 
-// const SSRDataTable = async ({
-//   searchParams,
-// }: {
-//   searchParams: SearchParamsProps;
-// }) => {
-//   const page = parseInt(searchParams.page?.toString() || "1", 10);
-//   const sort = searchParams.sort?.toString();
+const SSRDataTableProviders = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const page = parseInt(searchParams.page?.toString() || "1", 10);
+  const sort = searchParams.sort?.toString();
 
-//   // Extract all filter parameters
-//   const filters = Object.fromEntries(
-//     Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
-//   );
+  // Extract all filter parameters
+  const filters = Object.fromEntries(
+    Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
+  );
 
-//   // Extract query from filters
-//   const query = (filters["filter[search]"] as string) || "";
+  // Extract query from filters
+  const query = (filters["filter[search]"] as string) || "";
 
-//   const providersData = await getProviders({ query, page, sort, filters });
+  const providersData = await getProviders({ query, page, sort, filters });
 
-//   return (
-//     <DataTable
-//       columns={ColumnScans}
-//       data={providersData?.data || []}
-//       metadata={providersData?.meta}
-//     />
-//   );
-// };
+  return (
+    <DataTable
+      columns={ColumnScans}
+      data={providersData?.data || []}
+      metadata={providersData?.meta}
+      customFilters={filterProviders}
+    />
+  );
+};
+
+const SSRDataTableScans = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const page = parseInt(searchParams.page?.toString() || "1", 10);
+  const sort = searchParams.sort?.toString();
+
+  // Extract all filter parameters
+  const filters = Object.fromEntries(
+    Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
+  );
+
+  // Extract query from filters
+  const query = (filters["filter[search]"] as string) || "";
+
+  const providersData = await getProviders({ query, page, sort, filters });
+
+  return (
+    <DataTable
+      columns={ColumnScans}
+      data={providersData?.data || []}
+      metadata={providersData?.meta}
+      customFilters={filterScans}
+    />
+  );
+};

components/filters/data-filters.ts

@@ -8,9 +8,21 @@ export const filterProviders = [
 ];
 
 export const filterScans = [
+  {
+    key: "state",
+    labelCheckboxGroup: "State",
+    values: [
+      "available",
+      "scheduled",
+      "executing",
+      "completed",
+      "failed",
+      "cancelled",
+    ],
+  },
   {
     key: "trigger",
-    labelCheckboxGroup: "Scan Schedule",
+    labelCheckboxGroup: "Schedule",
     values: ["scheduled", "manual"],
   },
   // Add more filter categories as needed

components/filters/filter-controls.tsx

@@ -6,8 +6,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import { FilterControlsProps } from "@/types";
 
 import { CrossIcon } from "../icons";
-import { DataTableFilterCustom } from "../providers/table";
 import { CustomButton } from "../ui/custom";
+import { DataTableFilterCustom } from "../ui/table";
 import { CustomCheckboxMutedFindings } from "./custo-checkbox-muted-findings";
 import { CustomAccountSelection } from "./custom-account-selection";
 import { CustomDatePicker } from "./custom-date-picker";
@@ -22,7 +22,7 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
   regions = false,
   accounts = false,
   mutedFindings = false,
-  customFilters = [],
+  customFilters,
 }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -69,7 +69,7 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
           </CustomButton>
         )}
       </div>
-      <DataTableFilterCustom filters={customFilters} />
+      {customFilters && <DataTableFilterCustom filters={customFilters} />}
     </div>
   );
 };

components/providers/table/index.ts

@@ -1,4 +1,3 @@
 export * from "./column-providers";
-export * from "./data-table-filter-custom";
 export * from "./data-table-row-actions";
 export * from "./skeleton-table-provider";

components/scans/table/data-table-filter-custom.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import React, { useState } from "react";
-import { useCallback } from "react";
-
-import { CustomFilterIcon } from "@/components/icons";
-import { CustomButton, CustomDropdownFilter } from "@/components/ui/custom";
-import { FilterOption } from "@/types";
-
-export interface DataTableFilterCustomProps {
-  filters: FilterOption[];
-}
-
-export const DataTableFilterCustom = ({
-  filters,
-}: DataTableFilterCustomProps) => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [showFilters, setShowFilters] = useState(false);
-
-  const pushDropdownFilter = useCallback(
-    (key: string, values: string[]) => {
-      const params = new URLSearchParams(searchParams);
-      const filterKey = `filter[${key}]`;
-
-      if (values.length === 0) {
-        params.delete(filterKey);
-      } else {
-        params.set(filterKey, values.join(","));
-      }
-
-      router.push(`?${params.toString()}`);
-    },
-    [router, searchParams],
-  );
-
-  return (
-    <div className="flex flex-col gap-4 md:flex-row md:items-start">
-      <CustomButton
-        ariaLabel={showFilters ? "Hide Filters" : "Show Filters"}
-        variant="flat"
-        color={showFilters ? "action" : "primary"}
-        size="sm"
-        startContent={<CustomFilterIcon size={16} />}
-        onPress={() => setShowFilters(!showFilters)}
-      >
-        <h3 className="text-small">
-          {showFilters ? "Hide Filters" : "Show Filters"}
-        </h3>
-      </CustomButton>
-
-      <div
-        className={`transition-all duration-700 ease-in-out ${
-          showFilters
-            ? "max-h-96 w-full translate-x-0 overflow-visible opacity-100 md:max-w-80"
-            : "max-h-0 -translate-x-full overflow-hidden opacity-0"
-        }`}
-      >
-        <div className="flex flex-col gap-4 md:flex-row">
-          {filters.map((filter) => (
-            <CustomDropdownFilter
-              key={filter.key}
-              filter={{
-                ...filter,
-                labelCheckboxGroup: filter.labelCheckboxGroup,
-              }}
-              onFilterChange={pushDropdownFilter}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};

components/scans/table/index.ts

@@ -1,4 +1,3 @@
 export * from "./column-scans";
-export * from "./data-table-filter-custom";
 export * from "./data-table-row-actions";
 export * from "./skeleton-table-scans";

components/ui/table/data-table.tsx

@@ -14,6 +14,7 @@ import {
 import { useState } from "react";
 
 import {
+  DataTableFilterCustom,
   Table,
   TableBody,
   TableCell,
@@ -22,18 +23,20 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { DataTablePagination } from "@/components/ui/table/data-table-pagination";
-import { MetaDataProps } from "@/types";
+import { FilterOption, MetaDataProps } from "@/types";
 
 interface DataTableProviderProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   metadata?: MetaDataProps;
+  customFilters?: FilterOption[];
 }
 
 export function DataTable<TData, TValue>({
   columns,
   data,
   metadata,
+  customFilters,
 }: DataTableProviderProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -55,6 +58,9 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
+      <div className="mb-6">
+        <DataTableFilterCustom filters={customFilters || []} />
+      </div>
       <div className="relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto rounded-large bg-content1 p-4 shadow-small">
         <Table>
           <TableHeader>

components/ui/table/index.ts

@@ -1,5 +1,6 @@
 export * from "./data-table";
 export * from "./data-table-column-header";
+export * from "./data-table-filter-custom";
 export * from "./data-table-pagination";
 export * from "./severity-badge";
 export * from "./status-badge";