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}
+    />
+  );
+};