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

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";