Merge pull request #73 from prowler-cloud/PRWLR-4777-Create-Scan-page-integration-scan-endpoint-4

Create scan page integration scan endpoint
2026-07-22 20:11:53 +00:00 · 2024-10-14 17:43:49 +02:00
parent ba106ac8f3 7f73e26016
commit 91e7906a0b
57 changed files with 2075 additions and 581 deletions
@@ -4,7 +4,7 @@ import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";

 import { auth } from "@/auth.config";
-import { parseStringify } from "@/lib";
+import { getErrorMessage, parseStringify } from "@/lib";

 export const getProviders = async ({
  page = 1,
@@ -198,18 +198,3 @@ export const deleteProvider = async (formData: FormData) => {
    };
  }
 };
-
-export const getErrorMessage = async (error: unknown): Promise<string> => {
-  let message: string;
-
-  if (error instanceof Error) {
-    message = error.message;
-  } else if (error && typeof error === "object" && "message" in error) {
-    message = String(error.message);
-  } else if (typeof error === "string") {
-    message = error;
-  } else {
-    message = "Oops! Something went wrong.";
-  }
-  return message;
-};
@@ -0,0 +1 @@
+export * from "./scans";
@@ -0,0 +1,159 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+import { auth } from "@/auth.config";
+import { getErrorMessage, parseStringify } from "@/lib";
+
+export const getScans = async ({
+  page = 1,
+  query = "",
+  sort = "",
+  filters = {},
+}) => {
+  const session = await auth();
+
+  if (isNaN(Number(page)) || page < 1) redirect("/scans");
+
+  const keyServer = process.env.API_BASE_URL;
+  const url = new URL(`${keyServer}/scans`);
+
+  if (page) url.searchParams.append("page[number]", page.toString());
+  if (query) url.searchParams.append("filter[search]", query);
+  if (sort) url.searchParams.append("sort", sort);
+
+  // Handle multiple filters
+  Object.entries(filters).forEach(([key, value]) => {
+    if (key !== "filter[search]") {
+      url.searchParams.append(key, String(value));
+    }
+  });
+
+  try {
+    const scans = await fetch(url.toString(), {
+      headers: {
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+    });
+    const data = await scans.json();
+    const parsedData = parseStringify(data);
+    revalidatePath("/scans");
+    return parsedData;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Error fetching scans:", error);
+    return undefined;
+  }
+};
+
+export const getScan = async (scanId: string) => {
+  const session = await auth();
+
+  const keyServer = process.env.API_BASE_URL;
+  const url = new URL(`${keyServer}/scans/${scanId}`);
+
+  try {
+    const scan = await fetch(url.toString(), {
+      headers: {
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+    });
+    const data = await scan.json();
+    const parsedData = parseStringify(data);
+
+    return parsedData;
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
+export const scanOnDemand = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const providerId = formData.get("providerId");
+  const scanName = formData.get("scanName");
+
+  const url = new URL(`${keyServer}/scans`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/vnd.api+json",
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+      body: JSON.stringify({
+        data: {
+          type: "Scan",
+          attributes: {
+            name: scanName,
+            scanner_args: {
+              checks_to_execute: ["accessanalyzer_enabled"],
+            },
+          },
+          relationships: {
+            provider: {
+              data: {
+                type: "Provider",
+                id: providerId,
+              },
+            },
+          },
+        },
+      }),
+    });
+    const data = await response.json();
+    revalidatePath("/scans");
+    return parseStringify(data);
+  } catch (error) {
+    console.error(error);
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
+export const updateScan = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const scanId = formData.get("scanId");
+  const scanName = formData.get("scanName");
+
+  const url = new URL(`${keyServer}/scans/${scanId}`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/vnd.api+json",
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+      body: JSON.stringify({
+        data: {
+          type: "Scan",
+          id: scanId,
+          attributes: {
+            name: scanName,
+          },
+        },
+      }),
+    });
+    const data = await response.json();
+    revalidatePath("/scans");
+    return parseStringify(data);
+  } catch (error) {
+    console.error(error);
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
@@ -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}
    />
  );
 };
@@ -1,54 +1,133 @@
 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 { getScans } from "@/actions/scans";
+import {
+  FilterControls,
+  filterProviders,
+  filterScans,
+} from "@/components/filters";
+import { SkeletonTableScans } from "@/components/scans/table";
+import { ColumnProviderScans } from "@/components/scans/table/provider-scans";
+import { ColumnGetScans } from "@/components/scans/table/scans";
+import { ColumnGetScansSchedule } from "@/components/scans/table/schedule-scans";
 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} />
-      <Spacer y={4} />
+      <FilterControls search date providers />
+      <Spacer y={8} />

-      {/* <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
-        <SSRDataTable searchParams={searchParams} />
-      </Suspense> */}
+      <div className="grid grid-cols-12 items-start gap-4">
+        <div className="col-span-12 lg:col-span-4">
+          <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
+            <SSRDataTableProviders />
+          </Suspense>
+        </div>
+        <div className="col-span-12 lg:col-span-6">
+          <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
+            <SSRDataTableScansSchedule searchParams={searchParams} />
+          </Suspense>
+        </div>
+        <div className="col-span-12">
+          <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 () => {
+  // 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({ page: 1 });

-//   return (
-//     <DataTable
-//       columns={ColumnScans}
-//       data={providersData?.data || []}
-//       metadata={providersData?.meta}
-//     />
-//   );
-// };
+  return (
+    <DataTable
+      columns={ColumnProviderScans}
+      data={providersData?.data || []}
+      metadata={providersData?.meta}
+      customFilters={filterProviders}
+    />
+  );
+};
+
+const SSRDataTableScansSchedule = 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 scansData = await getScans({ query, page, sort, filters });
+
+  return (
+    <DataTable
+      columns={ColumnGetScansSchedule}
+      data={scansData?.data || []}
+      metadata={scansData?.meta}
+      customFilters={filterScans}
+    />
+  );
+};
+
+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 scansData = await getScans({ query, page, sort, filters });
+
+  return (
+    <DataTable
+      columns={ColumnGetScans}
+      data={scansData?.data || []}
+      metadata={scansData?.meta}
+      customFilters={filterScans}
+    />
+  );
+};
@@ -71,7 +71,6 @@ export const AuthForm = ({ type }: { type: string }) => {
      if (newUser?.errors && newUser.errors.length > 0) {
        newUser.errors.forEach((error: ApiError) => {
          const errorMessage = error.detail;
-
          switch (error.source.pointer) {
            case "/data/attributes/name":
              form.setError("name", { type: "server", message: errorMessage });
@@ -79,6 +78,12 @@ export const AuthForm = ({ type }: { type: string }) => {
            case "/data/attributes/email":
              form.setError("email", { type: "server", message: errorMessage });
              break;
+            case "/data/attributes/company_name":
+              form.setError("company", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
            case "/data/attributes/password":
              form.setError("password", {
                type: "server",
@@ -234,7 +239,7 @@ export const AuthForm = ({ type }: { type: string }) => {
                size="md"
                radius="md"
                isLoading={isLoading}
-                disabled={isLoading}
+                isDisabled={isLoading}
              >
                {isLoading ? (
                  <span>Loading</span>
@@ -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
@@ -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>
  );
 };
@@ -10,7 +10,7 @@ import {
 import { ColumnDef } from "@tanstack/react-table";

 import { VerticalDotsIcon } from "@/components/icons";
-import { SeverityBadge, StatusBadge } from "@/components/ui/table";
+import { SeverityBadge } from "@/components/ui/table";
 import { FindingProps } from "@/types";

 const getFindingsAttributes = (row: { original: FindingProps }) => {
@@ -34,14 +34,7 @@ export const ColumnsFindings: ColumnDef<FindingProps>[] = [
      return <SeverityBadge severity={severity} />;
    },
  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => {
-      const { status } = getFindingsAttributes(row);
-      return <StatusBadge status={status} />;
-    },
-  },
+
  {
    accessorKey: "region",
    header: "Region",
@@ -475,16 +475,13 @@ export const IdIcon: React.FC<IconSvgProps> = ({
 }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
+    fill="currentColor"
    height={size || height || 24}
-    viewBox="0 0 16 16"
+    viewBox="0 0 24 24"
    width={size || width || 24}
    {...props}
  >
-    <path
-      fill="currentColor"
-      d="M11.854 2.146a.5.5 0 0 0-.708.708L13.293 5H9.5a2 2 0 0 0-2 2v2a1 1 0 0 1-1 1h-.55a2.5 2.5 0 1 0 0 1h.55a2 2 0 0 0 2-2V7a1 1 0 0 1 1-1h3.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708zM5 10.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0"
-    />
+    <path d="M18 4v16H6V8.8L10.8 4zm0-2h-8L4 8v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M9.5 19h-2v-2h2zm7 0h-2v-2h2zm-7-4h-2v-4h2zm3.5 4h-2v-4h2zm0-6h-2v-2h2zm3.5 2h-2v-4h2z" />
  </svg>
 );

@@ -578,6 +575,89 @@ export const ConnectionIcon: React.FC<IconSvgProps> = ({
  );
 };

+export const ConnectionTrue: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    height={size || height || 24}
+    viewBox="0 0 24 24"
+    width={size || width || 24}
+    {...props}
+  >
+    <path
+      d="M12 20h.012M8.25 17c2-2 5.5-2 7.5 0m2.75-3c-3.768-3.333-9-3.333-13 0M2 11c3.158-2.667 6.579-4 10-4m3 .5s1 0 2 2c0 0 2.477-3.9 5-5.5"
+      color="currentColor"
+    />
+  </svg>
+);
+
+export const ConnectionFalse: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    height={size || height || 24}
+    viewBox="0 0 24 24"
+    width={size || width || 24}
+    {...props}
+  >
+    <path
+      d="M12 18h.012M8.25 15c2-2 5.5-2 7.5 0m2.75-3a11 11 0 0 0-.231-.199M5.5 12c2.564-2.136 5.634-2.904 8.5-2.301M2 9c3.466-2.927 7.248-4.247 11-3.962M22 5l-6 6m6 0-6-6"
+      color="currentColor"
+    />
+  </svg>
+);
+
+export const ConnectionPending: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.05"
+    height={size || height || 24}
+    viewBox="0 0 24 24"
+    width={size || width || 24}
+    {...props}
+  >
+    <g fill="none" stroke="currentColor" strokeWidth="1.05">
+      <circle cx="12" cy="18" r="2" />
+      <path strokeOpacity=".2" d="M7.757 13.757a6 6 0 0 1 8.486 0" />
+      <path
+        strokeOpacity=".2"
+        d="M4.929 10.93c3.905-3.905 10.237-3.905 14.142 0"
+        opacity=".8"
+      />
+      <path
+        strokeOpacity=".2"
+        d="M2.101 8.1c5.467-5.468 14.331-5.468 19.798 0"
+        opacity=".8"
+      />
+    </g>
+  </svg>
+);
+
 export const SuccessIcon: React.FC<IconSvgProps> = ({
  size = 24,
  width,
@@ -103,7 +103,7 @@ export const AddForm = ({
            size="lg"
            radius="lg"
            onPress={() => setIsOpen(false)}
-            disabled={isLoading}
+            isDisabled={isLoading}
          >
            <span>Cancel</span>
          </CustomButton>
@@ -63,7 +63,7 @@ export const DeleteForm = ({
            size="lg"
            radius="lg"
            onPress={() => setIsOpen(false)}
-            disabled={isLoading}
+            isDisabled={isLoading}
          >
            <span>Cancel</span>
          </CustomButton>
@@ -77,7 +77,7 @@ export const EditForm = ({
            name="alias"
            type="text"
            label="Alias"
-            labelPlacement="inside"
+            labelPlacement="outside"
            placeholder={providerAlias}
            variant="bordered"
            isRequired={false}
@@ -95,7 +95,7 @@ export const EditForm = ({
            size="lg"
            radius="lg"
            onPress={() => setIsOpen(false)}
-            disabled={isLoading}
+            isDisabled={isLoading}
          >
            <span>Cancel</span>
          </CustomButton>
@@ -1,8 +1,5 @@
 export * from "./add-provider";
 export * from "./CheckConnectionProvider";
-export * from "./date-with-time";
 export * from "./forms/delete-form";
 export * from "./provider-info";
 export * from "./radio-group-provider";
-export * from "./scan-status";
-export * from "./snippet-id-provider";
@@ -1,6 +1,6 @@
 import React from "react";

-import { ConnectionIcon } from "../icons";
+import { ConnectionFalse, ConnectionPending, ConnectionTrue } from "../icons";
 import {
  AWSProviderBadge,
  AzureProviderBadge,
@@ -23,24 +23,24 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
    switch (connected) {
      case true:
        return (
-          <div className="flex items-center justify-center rounded-medium border border-system-success bg-system-success-lighter p-1">
-            <ConnectionIcon className="text-system-success" size={24} />
+          <div className="flex items-center justify-center rounded-medium border-2 border-system-success bg-system-success-lighter p-1">
+            <ConnectionTrue className="text-system-success" size={24} />
          </div>
        );
      case false:
        return (
-          <div className="flex items-center justify-center rounded-medium border border-danger bg-system-error-lighter p-1">
-            <ConnectionIcon className="text-danger" size={24} />
+          <div className="flex items-center justify-center rounded-medium border-2 border-danger bg-system-error-lighter p-1">
+            <ConnectionFalse className="text-danger" size={24} />
          </div>
        );
      case null:
        return (
          <div className="bg-info-lighter border-info-lighter flex items-center justify-center rounded-medium border p-1">
-            <ConnectionIcon className="text-info" size={24} />
+            <ConnectionPending className="text-info" size={24} />
          </div>
        );
      default:
-        return <ConnectionIcon size={24} />;
+        return <ConnectionPending size={24} />;
    }
  };

@@ -60,13 +60,15 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
  };

  return (
-    <div className="max-w-96">
+    <div className="max-w-48">
      <div className="flex items-center justify-between space-x-4">
        <div className="flex items-center space-x-4">
          <div className="flex-shrink-0">{getProviderLogo()}</div>
          <div className="flex-shrink-0">{getIcon()}</div>
          <div className="flex flex-col">
-            <span className="text-md font-semibold">{providerAlias}</span>
+            <span className="text-md max-w-24 overflow-hidden text-ellipsis font-semibold lg:max-w-36">
+              {providerAlias}
+            </span>
            {/* <CustomLoader size="small" /> */}
          </div>
        </div>
@@ -1,31 +0,0 @@
-import { Snippet } from "@nextui-org/react";
-import React from "react";
-
-import { CopyIcon, DoneIcon, IdIcon } from "../icons";
-
-interface SnippetIdProviderProps {
-  providerId: string;
-}
-export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
-  providerId,
-}) => {
-  return (
-    <Snippet
-      className="flex items-center py-0"
-      color="default"
-      size="sm"
-      variant="flat"
-      radius="lg"
-      hideSymbol
-      copyIcon={<CopyIcon size={16} />}
-      checkIcon={<DoneIcon size={16} />}
-    >
-      <p className="flex items-center space-x-2">
-        <IdIcon size={16} />
-        <span className="no-scrollbar max-w-24 overflow-x-scroll text-sm">
-          {providerId}
-        </span>
-      </p>
-    </Snippet>
-  );
-};
@@ -1,14 +1,12 @@
 "use client";

 import { ColumnDef } from "@tanstack/react-table";
-import { add } from "date-fns";

+import { DateWithTime, SnippetId } from "@/components/ui/entities";
 import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
 import { ProviderProps } from "@/types";

-import { DateWithTime } from "../date-with-time";
 import { ProviderInfo } from "../provider-info";
-import { SnippetIdProvider } from "../snippet-id-provider";
 import { DataTableRowActions } from "./data-table-row-actions";

 const getProviderData = (row: { original: ProviderProps }) => {
@@ -16,10 +14,10 @@ const getProviderData = (row: { original: ProviderProps }) => {
 };

 export const ColumnProviders: ColumnDef<ProviderProps>[] = [
-  {
-    header: " ",
-    cell: ({ row }) => <p className="text-medium">{row.index + 1}</p>,
-  },
+  // {
+  //   header: " ",
+  //   cell: ({ row }) => <p className="text-medium">{row.index + 1}</p>,
+  // },
  {
    accessorKey: "account",
    header: ({ column }) => (
@@ -47,7 +45,7 @@ export const ColumnProviders: ColumnDef<ProviderProps>[] = [
      const {
        attributes: { uid },
      } = getProviderData(row);
-      return <SnippetIdProvider providerId={uid} />;
+      return <SnippetId className="h-7 max-w-48" entityId={uid} />;
    },
  },
  {
@@ -74,27 +72,6 @@ export const ColumnProviders: ColumnDef<ProviderProps>[] = [
      return <DateWithTime dateTime={updated_at} />;
    },
  },
-  {
-    accessorKey: "nextScan",
-    header: "Next Scan",
-    cell: ({ row }) => {
-      const {
-        attributes: { updated_at },
-      } = getProviderData(row);
-      const nextDay = add(new Date(updated_at), {
-        hours: 24,
-      });
-      return <DateWithTime dateTime={nextDay.toISOString()} />;
-    },
-  },
-  {
-    accessorKey: "resources",
-    header: "Resources",
-    cell: () => {
-      // Temporarily overwriting the value until the API is functional.
-      return <p className="font-medium">{288}</p>;
-    },
-  },
  {
    accessorKey: "added",
    header: ({ column }) => (
@@ -77,7 +77,6 @@ export function DataTableRowActions<ProviderProps>({
              <DropdownItem
                key="new"
                description="Check the connection to the provider"
-                shortcut="⌘N"
                textValue="Check Connection"
                startContent={<AddNoteBulkIcon className={iconClasses} />}
              >
@@ -86,7 +85,6 @@ export function DataTableRowActions<ProviderProps>({
              <DropdownItem
                key="edit"
                description="Allows you to edit the provider"
-                shortcut="⌘⇧E"
                textValue="Edit Provider"
                startContent={<EditDocumentBulkIcon className={iconClasses} />}
                onClick={() => setIsEditOpen(true)}
@@ -101,7 +99,6 @@ export function DataTableRowActions<ProviderProps>({
                color="danger"
                description="Delete the provider permanently"
                textValue="Delete Provider"
-                shortcut="⌘⇧D"
                startContent={
                  <DeleteDocumentBulkIcon
                    className={clsx(iconClasses, "!text-danger")}
@@ -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";
@@ -0,0 +1,119 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { updateScan } from "@/actions/scans";
+import { SaveIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { editScanFormSchema } from "@/types";
+
+export const EditScanForm = ({
+  scanId,
+  scanName,
+  setIsOpen,
+}: {
+  scanId: string;
+  scanName: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const formSchema = editScanFormSchema(scanName);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      scanId: scanId,
+      scanName: scanName,
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+
+    const data = await updateScan(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The scan was updated successfully.",
+      });
+      setIsOpen(false); // Close the modal on success
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        <div className="text-md">
+          Current name: <span className="font-bold">{scanName}</span>
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="scanName"
+            type="text"
+            label="Name"
+            labelPlacement="outside"
+            placeholder={scanName}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.scanName}
+          />
+        </div>
+        <input type="hidden" name="scanId" value={scanId} />
+
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Save"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Save</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};
@@ -0,0 +1,3 @@
+export * from "./edit-scan-form";
+export * from "./scan-on-demand-form";
+export * from "./schedule-form";
@@ -0,0 +1,126 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { RocketIcon } from "lucide-react";
+import { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { scanOnDemand } from "@/actions/scans";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { onDemandScanFormSchema } from "@/types";
+
+export const ScanOnDemandForm = ({
+  providerId,
+  scanName,
+  scannerArgs,
+  setIsOpen,
+}: {
+  providerId: string;
+  scanName?: string;
+  scannerArgs?: { checksToExecute: string[] };
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const formSchema = onDemandScanFormSchema();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      providerId: providerId,
+      scanName: scanName,
+      scannerArgs: scannerArgs,
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    // Loop through form values and add to formData, converting objects to JSON strings
+    Object.entries(values).forEach(
+      ([key, value]) =>
+        value !== undefined &&
+        formData.append(
+          key,
+          typeof value === "object" ? JSON.stringify(value) : value,
+        ),
+    );
+
+    const data = await scanOnDemand(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The scan was launched successfully.",
+      });
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        <input type="hidden" name="providerId" value={providerId} />
+
+        <div>
+          <CustomInput
+            control={form.control}
+            name="scanName"
+            type="text"
+            label="Scan Name"
+            labelPlacement="outside"
+            placeholder={scanName}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.scanName}
+          />
+        </div>
+
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Start scan now"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <RocketIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Start now</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};
@@ -0,0 +1,113 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { updateProvider } from "@/actions/providers";
+import { SaveIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { scheduleScanFormSchema } from "@/types";
+
+export const ScheduleForm = ({
+  providerId,
+  scheduleDate,
+  setIsOpen,
+}: {
+  providerId: string;
+  scheduleDate: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const formSchema = scheduleScanFormSchema();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      providerId: providerId,
+      scheduleDate: scheduleDate,
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+    const data = await updateProvider(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The scan was scheduled successfully.",
+      });
+      setIsOpen(false); // Close the modal on success
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        <input type="hidden" name="providerId" value={providerId} />
+        <CustomInput
+          control={form.control}
+          name="scheduleDate"
+          type="date"
+          label="Schedule Date"
+          labelPlacement="inside"
+          variant="bordered"
+          isRequired={false}
+          isInvalid={!!form.formState.errors.scheduleDate}
+        />
+
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Save"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+            isDisabled={true}
+          >
+            {isLoading ? <>Loading</> : <span>Schedule</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};
@@ -1,122 +0,0 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
-import { add } from "date-fns";
-
-import {
-  DateWithTime,
-  ProviderInfo,
-  SnippetIdProvider,
-} from "@/components/providers";
-import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
-import { ProviderProps } from "@/types";
-
-import { DataTableRowActions } from "./data-table-row-actions";
-
-const getProviderData = (row: { original: ProviderProps }) => {
-  return row.original;
-};
-
-export const ColumnScans: ColumnDef<ProviderProps>[] = [
-  {
-    header: " ",
-    cell: ({ row }) => <p className="text-medium">{row.index + 1}</p>,
-  },
-  {
-    accessorKey: "account",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"Account"} param="alias" />
-    ),
-    cell: ({ row }) => {
-      const {
-        attributes: { connection, provider, alias },
-      } = getProviderData(row);
-      return (
-        <ProviderInfo
-          connected={connection.connected}
-          provider={provider}
-          providerAlias={alias}
-        />
-      );
-    },
-  },
-  {
-    accessorKey: "uid",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"Id"} param="uid" />
-    ),
-    cell: ({ row }) => {
-      const {
-        attributes: { uid },
-      } = getProviderData(row);
-      return <SnippetIdProvider providerId={uid} />;
-    },
-  },
-  {
-    accessorKey: "status",
-    header: "Scan Status",
-    cell: () => {
-      // Temporarily overwriting the value until the API is functional.
-      return <StatusBadge status={"completed"} />;
-    },
-  },
-  {
-    accessorKey: "lastScan",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title={"Last Scan"}
-        param="updated_at"
-      />
-    ),
-    cell: ({ row }) => {
-      const {
-        attributes: { updated_at },
-      } = getProviderData(row);
-      return <DateWithTime dateTime={updated_at} />;
-    },
-  },
-  {
-    accessorKey: "nextScan",
-    header: "Next Scan",
-    cell: ({ row }) => {
-      const {
-        attributes: { updated_at },
-      } = getProviderData(row);
-      const nextDay = add(new Date(updated_at), {
-        hours: 24,
-      });
-      return <DateWithTime dateTime={nextDay.toISOString()} />;
-    },
-  },
-  {
-    accessorKey: "resources",
-    header: "Resources",
-    cell: () => {
-      // Temporarily overwriting the value until the API is functional.
-      return <p className="font-medium">{288}</p>;
-    },
-  },
-  {
-    accessorKey: "added",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title={"Added"}
-        param="inserted_at"
-      />
-    ),
-    cell: ({ row }) => {
-      const {
-        attributes: { inserted_at },
-      } = getProviderData(row);
-      return <DateWithTime dateTime={inserted_at} showTime={false} />;
-    },
-  },
-  {
-    id: "actions",
-    cell: ({ row }) => {
-      return <DataTableRowActions row={row} />;
-    },
-  },
-];
@@ -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>
-  );
-};
@@ -1,122 +0,0 @@
-"use client";
-
-import {
-  Button,
-  Dropdown,
-  DropdownItem,
-  DropdownMenu,
-  DropdownSection,
-  DropdownTrigger,
-} from "@nextui-org/react";
-import {
-  AddNoteBulkIcon,
-  DeleteDocumentBulkIcon,
-  EditDocumentBulkIcon,
-} from "@nextui-org/shared-icons";
-import { Row } from "@tanstack/react-table";
-import clsx from "clsx";
-import { useState } from "react";
-
-import { VerticalDotsIcon } from "@/components/icons";
-import { CustomAlertModal } from "@/components/ui/custom";
-
-// import { EditForm } from "../forms";
-// import { DeleteForm } from "../forms/delete-form";
-
-interface DataTableRowActionsProps<ProviderProps> {
-  row: Row<ProviderProps>;
-}
-const iconClasses =
-  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
-
-export function DataTableRowActions<ProviderProps>({
-  row,
-}: DataTableRowActionsProps<ProviderProps>) {
-  const [isEditOpen, setIsEditOpen] = useState(false);
-  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
-  const providerId = (row.original as { id: string }).id;
-  // const providerAlias = (row.original as any).attributes?.alias;
-  return (
-    <>
-      <CustomAlertModal
-        isOpen={isEditOpen}
-        onOpenChange={setIsEditOpen}
-        title="Edit Provider"
-        description={"Edit the provider details"}
-      >
-        <p>Hello</p>
-        {/* <EditForm
-          providerId={providerId}
-          providerAlias={providerAlias}
-          setIsOpen={setIsEditOpen}
-        /> */}
-      </CustomAlertModal>
-      <CustomAlertModal
-        isOpen={isDeleteOpen}
-        onOpenChange={setIsDeleteOpen}
-        title="Are you absolutely sure?"
-        description="This action cannot be undone. This will permanently delete your provider account and remove your data from the server."
-      >
-        <p>Hello</p>
-        {/* <DeleteForm providerId={providerId} setIsOpen={setIsDeleteOpen} /> */}
-      </CustomAlertModal>
-
-      <div className="relative flex items-center justify-end gap-2">
-        <Dropdown className="shadow-xl" placement="bottom">
-          <DropdownTrigger>
-            <Button isIconOnly radius="full" size="sm" variant="light">
-              <VerticalDotsIcon className="text-default-400" />
-            </Button>
-          </DropdownTrigger>
-          <DropdownMenu
-            closeOnSelect
-            aria-label="Actions"
-            color="default"
-            variant="flat"
-          >
-            <DropdownSection title="Actions">
-              <DropdownItem
-                key="new"
-                description="Check the connection to the provider"
-                shortcut="⌘N"
-                textValue="Check Connection"
-                startContent={<AddNoteBulkIcon className={iconClasses} />}
-              >
-                <p>action here + {providerId}</p>
-                {/* <CheckConnectionProvider id={providerId} /> */}
-              </DropdownItem>
-              <DropdownItem
-                key="edit"
-                description="Allows you to edit the provider"
-                shortcut="⌘⇧E"
-                textValue="Edit Provider"
-                startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                onClick={() => setIsEditOpen(true)}
-              >
-                Edit Provider
-              </DropdownItem>
-            </DropdownSection>
-            <DropdownSection title="Danger zone">
-              <DropdownItem
-                key="delete"
-                className="text-danger"
-                color="danger"
-                description="Delete the provider permanently"
-                textValue="Delete Provider"
-                shortcut="⌘⇧D"
-                startContent={
-                  <DeleteDocumentBulkIcon
-                    className={clsx(iconClasses, "!text-danger")}
-                  />
-                }
-                onClick={() => setIsDeleteOpen(true)}
-              >
-                Delete Provider
-              </DropdownItem>
-            </DropdownSection>
-          </DropdownMenu>
-        </Dropdown>
-      </div>
-    </>
-  );
-}
@@ -1,4 +1,2 @@
-export * from "./column-scans";
-export * from "./data-table-filter-custom";
-export * from "./data-table-row-actions";
+export * from "./scan-detail";
 export * from "./skeleton-table-scans";
@@ -0,0 +1,39 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { EntityInfoShort } from "@/components/ui/entities";
+import { ProviderProps } from "@/types";
+
+import { DataTableRowActions } from "./data-table-row-actions";
+
+const getProviderData = (row: { original: ProviderProps }) => {
+  return row.original;
+};
+
+export const ColumnProviderScans: ColumnDef<ProviderProps>[] = [
+  {
+    accessorKey: "provider",
+    header: "Provider",
+    cell: ({ row }) => {
+      const {
+        attributes: { connection, provider, alias, uid },
+      } = getProviderData(row);
+      return (
+        <EntityInfoShort
+          connected={connection.connected}
+          cloudProvider={provider}
+          entityAlias={alias}
+          entityId={uid}
+        />
+      );
+    },
+  },
+  {
+    accessorKey: "launchScan",
+    header: "Launch Scan",
+    cell: ({ row }) => {
+      return <DataTableRowActions row={row} />;
+    },
+  },
+];
@@ -0,0 +1,110 @@
+"use client";
+
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import { Row } from "@tanstack/react-table";
+import { CalendarClockIcon, RocketIcon } from "lucide-react";
+import { useState } from "react";
+
+import { AddIcon } from "@/components/icons";
+import { CustomAlertModal, CustomButton } from "@/components/ui/custom";
+
+import { ScanOnDemandForm, ScheduleForm } from "../../forms";
+
+interface DataTableRowActionsProps<ProviderProps> {
+  row: Row<ProviderProps>;
+}
+const iconClasses =
+  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+
+export function DataTableRowActions<ProviderProps>({
+  row,
+}: DataTableRowActionsProps<ProviderProps>) {
+  const [isScanOnDemandOpen, setIsScanOnDemandOpen] = useState(false);
+  const [isScanScheduleOpen, setIsScanScheduleOpen] = useState(false);
+
+  const providerId = (row.original as { id: string }).id;
+  const scanName = (row.original as any).attributes?.name;
+  return (
+    <>
+      <CustomAlertModal
+        isOpen={isScanOnDemandOpen}
+        onOpenChange={setIsScanOnDemandOpen}
+        title="Start Scan On Demand"
+        description={"Start a scan on demand for this provider"}
+      >
+        <ScanOnDemandForm
+          providerId={providerId}
+          scanName={scanName}
+          setIsOpen={setIsScanOnDemandOpen}
+        />
+      </CustomAlertModal>
+
+      <CustomAlertModal
+        isOpen={isScanScheduleOpen}
+        onOpenChange={setIsScanScheduleOpen}
+        title="Schedule Scan"
+        description={"Schedule a scan for this provider"}
+      >
+        <ScheduleForm
+          providerId={providerId}
+          scheduleDate={""}
+          setIsOpen={setIsScanScheduleOpen}
+        />
+      </CustomAlertModal>
+
+      <div className="relative flex items-center justify-end gap-2">
+        <Dropdown className="shadow-xl" placement="bottom-start">
+          <DropdownTrigger>
+            <CustomButton
+              className="w-full"
+              ariaLabel="Start Scan"
+              variant="solid"
+              color="action"
+              size="md"
+              endContent={<AddIcon size={20} />}
+            >
+              Start
+            </CustomButton>
+          </DropdownTrigger>
+          <DropdownMenu
+            closeOnSelect
+            aria-label="Launch Scan"
+            color="default"
+            variant="flat"
+          >
+            <DropdownSection title="Start Scan On Demand">
+              <DropdownItem
+                key="scanNow"
+                color="primary"
+                description="Allows you to start a scan on demand"
+                textValue="Start now"
+                startContent={<RocketIcon className={iconClasses} />}
+                onClick={() => setIsScanOnDemandOpen(true)}
+              >
+                Start now
+              </DropdownItem>
+            </DropdownSection>
+            <DropdownSection title="Schedule Scan">
+              <DropdownItem
+                key="schedule"
+                color="primary"
+                description="Schedule a scan for this provider"
+                textValue="Schedule Scan"
+                startContent={<CalendarClockIcon className={iconClasses} />}
+                onClick={() => setIsScanScheduleOpen(true)}
+              >
+                Schedule Scan
+              </DropdownItem>
+            </DropdownSection>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,2 @@
+export * from "./column-provider-scans";
+export * from "./data-table-row-actions";
@@ -0,0 +1,142 @@
+"use client";
+
+import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
+
+import { DateWithTime, SnippetId } from "@/components/ui/entities";
+import { StatusBadge } from "@/components/ui/table/status-badge";
+import { ScanProps } from "@/types";
+
+export const ScanDetail = ({ scanDetails }: { scanDetails: ScanProps }) => {
+  const scanOnDemand = scanDetails.attributes;
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col items-baseline md:flex-row md:gap-x-4">
+          <h2 className="text-lg font-black uppercase">Scan Details - </h2>
+          <p>{scanOnDemand.name}</p>
+        </div>
+
+        <StatusBadge size="lg" status={scanOnDemand.state} />
+      </div>
+      <Divider />
+      <div className="relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto rounded-large bg-content1 p-4 shadow-small">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="space-y-4">
+            <DetailItem
+              label="ID"
+              value={<SnippetId label="Type" entityId={scanDetails.id} />}
+            />
+            <DetailItem label="Trigger" value={scanOnDemand.trigger} />
+            <DetailItem
+              label="Resource Count"
+              value={scanOnDemand.unique_resource_count.toString()}
+            />
+            <DetailItem label="Progress" value={`${scanOnDemand.progress}%`} />
+            <DetailItem
+              label="Duration"
+              value={`${scanOnDemand.duration} seconds`}
+            />
+          </div>
+          <div className="space-y-4">
+            <DateItem
+              label="Started At"
+              value={
+                scanOnDemand.started_at ? (
+                  <DateWithTime dateTime={scanOnDemand.started_at.toString()} />
+                ) : (
+                  "Not Started"
+                )
+              }
+            />
+            <DateItem
+              label="Completed At"
+              value={
+                scanOnDemand.completed_at ? (
+                  <DateWithTime
+                    dateTime={scanOnDemand.completed_at.toString()}
+                  />
+                ) : (
+                  "Not Started"
+                )
+              }
+            />
+            <DateItem
+              label="Scheduled At"
+              value={
+                scanOnDemand.scheduled_at ? (
+                  <DateWithTime
+                    dateTime={scanOnDemand.scheduled_at.toString()}
+                  />
+                ) : (
+                  "Not Scheduled"
+                )
+              }
+            />
+            <DetailItem
+              label="Provider ID"
+              value={
+                <SnippetId
+                  label="Provider ID"
+                  entityId={scanDetails.relationships.provider.data.id}
+                />
+              }
+            />
+            <DetailItem
+              label="Task ID"
+              value={
+                <SnippetId
+                  label="Task ID"
+                  entityId={scanDetails.relationships.task.data.id}
+                />
+              }
+            />
+          </div>
+        </div>
+      </div>
+      <Card className="relative w-full border-small border-default-100 p-3 shadow-lg">
+        <CardHeader className="py-2">
+          <h2 className="text-2xl font-bold">Scan Arguments</h2>
+        </CardHeader>
+
+        <Divider />
+
+        <CardBody className="p-4">
+          <DetailItem
+            label="Checks"
+            value={
+              (scanOnDemand.scanner_args as any)?.checks_to_execute?.join(
+                ", ",
+              ) || "N/A"
+            }
+          />
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+const DateItem = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: React.ReactNode;
+}) => (
+  <div className="flex items-center justify-between">
+    <span className="font-semibold text-default-500">{label}:</span>
+    <span className="text-default-700">{value}</span>
+  </div>
+);
+
+const DetailItem = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: React.ReactNode;
+}) => (
+  <div className="flex items-center justify-between">
+    <span className="font-semibold text-default-500">{label}:</span>
+    <span className="text-default-700">{value}</span>
+  </div>
+);
@@ -0,0 +1,128 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
+import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
+import { ScanProps } from "@/types";
+
+import { DataTableRowActions } from "./data-table-row-actions";
+
+const getScanData = (row: { original: ScanProps }) => {
+  return row.original;
+};
+
+export const ColumnGetScans: ColumnDef<ScanProps>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Name"} param="name" />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { name },
+      } = getScanData(row);
+      return <EntityInfoShort entityAlias={name} entityId={row.original.id} />;
+    },
+  },
+  {
+    accessorKey: "trigger",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Type"} param="trigger" />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { trigger },
+      } = getScanData(row);
+      return <p>{trigger}</p>;
+    },
+  },
+
+  {
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Status"} param="state" />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { state },
+      } = getScanData(row);
+      return <StatusBadge status={state} />;
+    },
+  },
+  {
+    accessorKey: "scheduled_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Scheduled at"}
+        param="scheduled_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { scheduled_at },
+      } = getScanData(row);
+      return <DateWithTime dateTime={scheduled_at} />;
+    },
+  },
+  {
+    accessorKey: "started_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Started at"}
+        param="started_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { started_at },
+      } = getScanData(row);
+      return <DateWithTime dateTime={started_at} />;
+    },
+  },
+  {
+    accessorKey: "completed_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Completed at"}
+        param="completed_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { completed_at },
+      } = getScanData(row);
+      return <DateWithTime dateTime={completed_at} />;
+    },
+  },
+  {
+    accessorKey: "scanner_args",
+    header: "Scanner Args",
+    cell: ({ row }) => {
+      const {
+        attributes: { scanner_args },
+      } = getScanData(row);
+      return <p className="font-medium">{scanner_args?.only_logs}</p>;
+    },
+  },
+  {
+    accessorKey: "resources",
+    header: "Resources",
+    cell: ({ row }) => {
+      const {
+        attributes: { unique_resource_count },
+      } = getScanData(row);
+      return <p className="font-medium">{unique_resource_count}</p>;
+    },
+  },
+
+  {
+    id: "actions",
+    cell: ({ row }) => {
+      return <DataTableRowActions row={row} />;
+    },
+  },
+];
@@ -0,0 +1,80 @@
+"use client";
+
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import {
+  // DeleteDocumentBulkIcon,
+  EditDocumentBulkIcon,
+} from "@nextui-org/shared-icons";
+import { Row } from "@tanstack/react-table";
+// import clsx from "clsx";
+import { useState } from "react";
+
+import { VerticalDotsIcon } from "@/components/icons";
+import { CustomAlertModal } from "@/components/ui/custom";
+
+import { EditScanForm } from "../../forms";
+
+interface DataTableRowActionsProps<ScanProps> {
+  row: Row<ScanProps>;
+}
+const iconClasses =
+  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+
+export function DataTableRowActions<ScanProps>({
+  row,
+}: DataTableRowActionsProps<ScanProps>) {
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const scanId = (row.original as { id: string }).id;
+  const scanName = (row.original as any).attributes?.name;
+  return (
+    <>
+      <CustomAlertModal
+        isOpen={isEditOpen}
+        onOpenChange={setIsEditOpen}
+        title="Edit Scan"
+        description={"Edit the scan details"}
+      >
+        <EditScanForm
+          scanId={scanId}
+          scanName={scanName}
+          setIsOpen={setIsEditOpen}
+        />
+      </CustomAlertModal>
+
+      <div className="relative flex items-center justify-end gap-2">
+        <Dropdown className="shadow-xl" placement="bottom">
+          <DropdownTrigger>
+            <Button isIconOnly radius="full" size="sm" variant="light">
+              <VerticalDotsIcon className="text-default-400" />
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu
+            closeOnSelect
+            aria-label="Actions"
+            color="default"
+            variant="flat"
+          >
+            <DropdownSection title="Actions">
+              <DropdownItem
+                key="edit"
+                description="Allows you to edit the scan"
+                textValue="Edit Scan"
+                startContent={<EditDocumentBulkIcon className={iconClasses} />}
+                onClick={() => setIsEditOpen(true)}
+              >
+                Edit Scan
+              </DropdownItem>
+            </DropdownSection>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,2 @@
+export * from "./column-get-scans";
+export * from "./data-table-row-actions";
@@ -0,0 +1,83 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { PlusIcon } from "@/components/icons";
+import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
+import { TriggerSheet } from "@/components/ui/sheet";
+import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
+import { ScanProps } from "@/types";
+
+import { DataTableRowActions } from "../scans/data-table-row-actions";
+import { DataTableRowDetails } from ".";
+
+const getScanData = (row: { original: ScanProps }) => {
+  return row.original;
+};
+
+export const ColumnGetScansSchedule: ColumnDef<ScanProps>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Name"} param="name" />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { name },
+      } = getScanData(row);
+      return <EntityInfoShort entityAlias={name} entityId={row.original.id} />;
+    },
+  },
+
+  {
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Status"} param="state" />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { state },
+      } = getScanData(row);
+      return <StatusBadge status={state} />;
+    },
+  },
+  {
+    accessorKey: "scheduled_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Scheduled at"}
+        param="scheduled_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { scheduled_at },
+      } = getScanData(row);
+      return <DateWithTime dateTime={scheduled_at} />;
+    },
+  },
+
+  {
+    id: "moreInfo",
+    header: "Details",
+    cell: ({ row }) => {
+      return (
+        <TriggerSheet
+          triggerComponent={<PlusIcon />}
+          title="Scan Details"
+          description="View the scan details"
+        >
+          <DataTableRowDetails entityId={row.original.id} />
+        </TriggerSheet>
+      );
+    },
+  },
+
+  {
+    id: "actions",
+    cell: ({ row }) => {
+      return <DataTableRowActions row={row} />;
+    },
+  },
+];
@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { getScan } from "@/actions/scans";
+import { ScanDetail, SkeletonTableScans } from "@/components/scans/table";
+import { ScanProps } from "@/types";
+
+export const DataTableRowDetails = ({ entityId }: { entityId: string }) => {
+  const [scanDetails, setScanDetails] = useState<ScanProps | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchScanDetails = async () => {
+      try {
+        const result = await getScan(entityId);
+        setScanDetails(result?.data);
+      } catch (error) {
+        console.error("Error fetching scan details:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchScanDetails();
+  }, [entityId]);
+
+  if (isLoading) {
+    return <SkeletonTableScans />;
+  }
+
+  if (!scanDetails) {
+    return <div>No scan details available</div>;
+  }
+
+  return <ScanDetail scanDetails={scanDetails} />;
+};
@@ -0,0 +1,2 @@
+export * from "./column-get-scans-schedule";
+export * from "./data-table-row-details";
@@ -1,6 +1,7 @@
 import { Button, CircularProgress } from "@nextui-org/react";
 import type { PressEvent } from "@react-types/shared";
 import clsx from "clsx";
+import React from "react";

 import { NextUIColors, NextUIVariants } from "@/types";

@@ -16,7 +17,7 @@ export const buttonClasses = {
  hover: "hover:shadow-md",
 };

-interface ButtonProps {
+interface CustomButtonProps {
  type?: "button" | "submit" | "reset";
  ariaLabel: string;
  ariaDisabled?: boolean;
@@ -45,67 +46,80 @@ interface ButtonProps {
  size?: "sm" | "md" | "lg";
  radius?: "none" | "sm" | "md" | "lg" | "full";
  dashed?: boolean;
-  disabled?: boolean;
+  isDisabled?: boolean;
  isLoading?: boolean;
  isIconOnly?: boolean;
+  ref?: React.RefObject<HTMLButtonElement>;
 }

-export const CustomButton = ({
-  type = "button",
-  ariaLabel,
-  ariaDisabled,
-  className,
-  variant = "solid",
-  color = "primary",
-  onPress,
-  children,
-  startContent,
-  endContent,
-  size = "md",
-  radius = "sm",
-  disabled = false,
-  isLoading = false,
-  isIconOnly,
-  ...props
-}: ButtonProps) => (
-  <Button
-    type={type}
-    aria-label={ariaLabel}
-    aria-disabled={ariaDisabled}
-    onPress={onPress}
-    variant={variant as NextUIVariants}
-    color={color as NextUIColors}
-    className={clsx(
-      buttonClasses.base,
-      {
-        [buttonClasses.primary]: color === "primary",
-        [buttonClasses.secondary]: color === "secondary",
-        [buttonClasses.action]: color === "action",
-        [buttonClasses.dashed]: variant === "dashed",
-        [buttonClasses.transparent]: color === "transparent",
-        [buttonClasses.disabled]: disabled,
-        [buttonClasses.hover]: color !== "transparent" && !disabled,
-      },
+export const CustomButton = React.forwardRef<
+  HTMLButtonElement,
+  CustomButtonProps
+>(
+  (
+    {
+      type = "button",
+      ariaLabel,
+      ariaDisabled,
      className,
-    )}
-    startContent={startContent}
-    endContent={endContent}
-    size={size}
-    radius={radius}
-    spinner={
-      <CircularProgress
-        classNames={{
-          svg: "w-6 h-6 drop-shadow-md",
-          indicator: "stroke-white",
-          track: "stroke-white/10",
-        }}
-        aria-label="Loading..."
-      />
-    }
-    isLoading={isLoading}
-    isIconOnly={isIconOnly}
-    {...props}
-  >
-    {children}
-  </Button>
+      variant = "solid",
+      color = "primary",
+      onPress,
+      children,
+      startContent,
+      endContent,
+      size = "md",
+      radius = "sm",
+      isDisabled = false,
+      isLoading = false,
+      isIconOnly,
+      ...props
+    },
+    ref,
+  ) => (
+    <Button
+      type={type}
+      aria-label={ariaLabel}
+      aria-disabled={ariaDisabled}
+      onPress={onPress}
+      variant={variant as NextUIVariants}
+      color={color as NextUIColors}
+      className={clsx(
+        buttonClasses.base,
+        {
+          [buttonClasses.primary]: color === "primary",
+          [buttonClasses.secondary]: color === "secondary",
+          [buttonClasses.action]: color === "action",
+          [buttonClasses.dashed]: variant === "dashed",
+          [buttonClasses.transparent]: color === "transparent",
+          [buttonClasses.disabled]: isDisabled,
+          [buttonClasses.hover]: color !== "transparent" && !isDisabled,
+        },
+        className,
+      )}
+      startContent={startContent}
+      endContent={endContent}
+      size={size}
+      radius={radius}
+      spinner={
+        <CircularProgress
+          classNames={{
+            svg: "w-6 h-6 drop-shadow-md",
+            indicator: "stroke-white",
+            track: "stroke-white/10",
+          }}
+          aria-label="Loading..."
+        />
+      }
+      ref={ref}
+      isDisabled={isDisabled}
+      isLoading={isLoading}
+      isIconOnly={isIconOnly}
+      {...props}
+    >
+      {children}
+    </Button>
+  ),
 );
+
+CustomButton.displayName = "CustomButton";
@@ -2,7 +2,7 @@ import { format, parseISO } from "date-fns";
 import React from "react";

 interface DateWithTimeProps {
-  dateTime: string; // e.g., "2024-07-17T09:55:14.191475Z"
+  dateTime: string | null; // e.g., "2024-07-17T09:55:14.191475Z"
  showTime?: boolean;
 }

@@ -10,6 +10,7 @@ export const DateWithTime: React.FC<DateWithTimeProps> = ({
  dateTime,
  showTime = true,
 }) => {
+  if (!dateTime) return <span>--</span>;
  const date = parseISO(dateTime);
  const formattedDate = format(date, "MMM dd, yyyy");
  const formattedTime = format(date, "p 'UTC'");
@@ -0,0 +1,50 @@
+import React from "react";
+
+import {
+  AWSProviderBadge,
+  AzureProviderBadge,
+  GCPProviderBadge,
+  KS8ProviderBadge,
+} from "../../icons/providers-badge";
+import { SnippetId } from "./snippet-id";
+import { SnippetLabel } from "./snippet-label";
+
+interface EntityInfoProps {
+  connected?: boolean | null;
+  cloudProvider?: "aws" | "azure" | "gcp" | "kubernetes";
+  entityAlias?: string;
+  entityId?: string;
+}
+
+export const EntityInfoShort: React.FC<EntityInfoProps> = ({
+  cloudProvider,
+  entityAlias,
+  entityId,
+}) => {
+  const getProviderLogo = () => {
+    switch (cloudProvider) {
+      case "aws":
+        return <AWSProviderBadge width={35} height={35} />;
+      case "azure":
+        return <AzureProviderBadge width={35} height={35} />;
+      case "gcp":
+        return <GCPProviderBadge width={35} height={35} />;
+      case "kubernetes":
+        return <KS8ProviderBadge width={35} height={35} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="flex w-full items-center justify-between space-x-4">
+      <div className="flex items-center gap-x-4">
+        <div className="flex-shrink-0">{getProviderLogo()}</div>
+        <div className="flex flex-col">
+          <SnippetLabel label={entityAlias ?? ""} />
+          <SnippetId entityId={entityId ?? ""} />
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,5 @@
+export * from "./date-with-time";
+export * from "./entity-info-short";
+export * from "./scan-status";
+export * from "./snippet-id";
+export * from "./snippet-label";
@@ -0,0 +1,31 @@
+import { Snippet } from "@nextui-org/react";
+import React from "react";
+
+import { CopyIcon, DoneIcon, IdIcon } from "@/components/icons";
+
+interface SnippetIdProps {
+  entityId: string;
+  [key: string]: any;
+}
+export const SnippetId: React.FC<SnippetIdProps> = ({ entityId, ...props }) => {
+  return (
+    <Snippet
+      className="flex h-6 items-center py-0"
+      color="default"
+      size="sm"
+      variant="flat"
+      radius="lg"
+      hideSymbol
+      copyIcon={<CopyIcon size={16} />}
+      checkIcon={<DoneIcon size={16} />}
+      {...props}
+    >
+      <p className="flex items-center space-x-2">
+        <IdIcon size={18} />
+        <span className="no-scrollbar text-md w-28 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm">
+          {entityId}
+        </span>
+      </p>
+    </Snippet>
+  );
+};
@@ -0,0 +1,32 @@
+import { Snippet } from "@nextui-org/react";
+import React from "react";
+
+import { CopyIcon, DoneIcon } from "@/components/icons";
+
+interface SnippetLabelProps {
+  label: string;
+  [key: string]: any;
+}
+export const SnippetLabel: React.FC<SnippetLabelProps> = ({
+  label,
+  ...props
+}) => {
+  return (
+    label !== "" && (
+      <Snippet
+        className="m-0 flex items-center bg-transparent py-0"
+        color="default"
+        size="sm"
+        radius="lg"
+        hideSymbol
+        copyIcon={<CopyIcon size={16} />}
+        checkIcon={<DoneIcon size={16} />}
+        {...props}
+      >
+        <p className="no-scrollbar text-md mb-1 w-32 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm font-semibold">
+          {label}
+        </p>
+      </Snippet>
+    )
+  );
+};
@@ -0,0 +1,2 @@
+export * from "./sheet";
+export * from "./trigger-sheet";
@@ -0,0 +1,143 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-neutral-950",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold text-neutral-950 dark:text-neutral-50",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
@@ -0,0 +1,35 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+
+interface TriggerSheetProps {
+  triggerComponent: React.ReactNode;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}
+
+export function TriggerSheet({
+  triggerComponent,
+  title,
+  description,
+  children,
+}: TriggerSheetProps) {
+  return (
+    <Sheet>
+      <SheetTrigger>{triggerComponent}</SheetTrigger>
+      <SheetContent className="max-w-[95vw] pt-10 md:max-w-[45vw]">
+        <SheetHeader>
+          <SheetTitle className="sr-only">{title}</SheetTitle>
+          <SheetDescription className="sr-only">{description}</SheetDescription>
+        </SheetHeader>
+        {children}
+      </SheetContent>
+    </Sheet>
+  );
+}
@@ -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,11 @@ export function DataTable<TData, TValue>({

  return (
    <>
+      {customFilters && (
+        <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>
@@ -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";
@@ -2,38 +2,42 @@ import { Chip } from "@nextui-org/react";
 import React from "react";

 type Status =
+  | "available"
+  | "scheduled"
+  | "executing"
  | "completed"
-  | "pending"
-  | "cancelled"
-  | "fail"
-  | "success"
-  | "muted"
-  | "active"
-  | "inactive";
+  | "failed"
+  | "cancelled";

 const statusColorMap: Record<
  Status,
  "danger" | "warning" | "success" | "default"
 > = {
+  available: "default",
+  scheduled: "warning",
+  executing: "default",
  completed: "success",
-  pending: "warning",
+  failed: "danger",
  cancelled: "danger",
-  fail: "danger",
-  success: "success",
-  muted: "default",
-  active: "success",
-  inactive: "default",
 };

-export const StatusBadge = ({ status }: { status: Status }) => {
+export const StatusBadge = ({
+  status,
+  size = "sm",
+  ...props
+}: {
+  status: Status;
+  size?: "sm" | "md" | "lg";
+}) => {
  const color = statusColorMap[status as keyof typeof statusColorMap];

  return (
    <Chip
      className="gap-1 border-none capitalize text-default-600"
-      size="sm"
+      size={size}
      variant="flat"
      color={color}
+      {...props}
    >
      {status}
    </Chip>
@@ -2,8 +2,7 @@

 import { ColumnDef } from "@tanstack/react-table";

-import { DateWithTime } from "@/components/providers";
-import { StatusBadge } from "@/components/ui/table";
+import { DateWithTime } from "@/components/ui/entities";
 import { UserActions } from "@/components/users";
 import { UserProps } from "@/types";

@@ -44,14 +43,7 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
      return <DateWithTime dateTime={dateAdded} showTime={false} />;
    },
  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => {
-      const { status } = getUserData(row);
-      return <StatusBadge status={status} />;
-    },
-  },
+
  {
    accessorKey: "actions",
    header: () => <div className="text-right">Actions</div>,
@@ -19,3 +19,18 @@ export function encryptKey(passkey: string) {
 export function decryptKey(passkey: string) {
  return atob(passkey);
 }
+
+export const getErrorMessage = async (error: unknown): Promise<string> => {
+  let message: string;
+
+  if (error instanceof Error) {
+    message = error.message;
+  } else if (error && typeof error === "object" && "message" in error) {
+    message = String(error.message);
+  } else if (typeof error === "string") {
+    message = error;
+  } else {
+    message = "Oops! Something went wrong.";
+  }
+  return message;
+};
@@ -13,7 +13,7 @@
        "@nextui-org/system": "2.2.1",
        "@nextui-org/theme": "2.2.5",
        "@radix-ui/react-alert-dialog": "^1.1.1",
-        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.2",
        "@radix-ui/react-dropdown-menu": "^2.1.1",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.1.0",
@@ -44,7 +44,7 @@
        "recharts": "^2.13.0-alpha.4",
        "server-only": "^0.0.1",
        "shadcn-ui": "^0.2.3",
-        "tailwind-merge": "^2.5.2",
+        "tailwind-merge": "^2.5.3",
        "tailwindcss-animate": "^1.0.7",
        "uuid": "^10.0.0",
        "zod": "^3.23.8",
@@ -2748,6 +2748,67 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
+      "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-arrow": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
@@ -2824,24 +2885,130 @@
      }
    },
    "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
-      "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "license": "MIT",
      "dependencies": {
        "@radix-ui/primitive": "1.1.0",
        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-dismissable-layer": "1.1.0",
-        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
        "@radix-ui/react-focus-scope": "1.1.0",
        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-portal": "1.1.1",
-        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
        "@radix-ui/react-primitive": "2.0.0",
        "@radix-ui/react-slot": "1.1.0",
        "@radix-ui/react-use-controllable-state": "1.1.0",
        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.7"
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
      },
      "peerDependencies": {
        "@types/react": "*",
@@ -2859,11 +3026,12 @@
      }
    },
    "node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll": {
-      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
-      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "license": "MIT",
      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.4",
+        "react-remove-scroll-bar": "^2.3.6",
        "react-style-singleton": "^2.2.1",
        "tslib": "^2.1.0",
        "use-callback-ref": "^1.3.0",
@@ -12211,9 +12379,9 @@
      }
    },
    "node_modules/tailwind-merge": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
-      "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.3.tgz",
+      "integrity": "sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==",
      "license": "MIT",
      "funding": {
        "type": "github",
@@ -5,7 +5,7 @@
    "@nextui-org/system": "2.2.1",
    "@nextui-org/theme": "2.2.5",
    "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
@@ -36,7 +36,7 @@
    "recharts": "^2.13.0-alpha.4",
    "server-only": "^0.0.1",
    "shadcn-ui": "^0.2.3",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.3",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^10.0.0",
    "zod": "^3.23.8",
@@ -66,6 +66,47 @@ export interface ProviderProps {
  };
 }

+export interface ScanProps {
+  type: "Scan";
+  id: string;
+  attributes: {
+    name: string;
+    trigger: "scheduled" | "manual";
+    state:
+      | "available"
+      | "scheduled"
+      | "executing"
+      | "completed"
+      | "failed"
+      | "cancelled";
+    unique_resource_count: number;
+    progress: number;
+    scanner_args: {
+      only_logs?: boolean;
+      excluded_checks?: string[];
+      aws_retries_max_attempts?: number;
+    } | null;
+    duration: number;
+    started_at: string;
+    completed_at: string;
+    scheduled_at: string;
+  };
+  relationships: {
+    provider: {
+      data: {
+        id: string;
+        type: "Provider";
+      };
+    };
+    task: {
+      data: {
+        id: string;
+        type: "Task";
+      };
+    };
+  };
+}
+
 export interface FindingProps {
  id: string;
  attributes: {
@@ -1,5 +1,36 @@
 import { z } from "zod";

+export const editScanFormSchema = (currentName: string) =>
+  z.object({
+    scanName: z
+      .string()
+      .refine((val) => val === "" || val.length >= 3, {
+        message: "The alias must be empty or have at least 3 characters.",
+      })
+      .refine((val) => val !== currentName, {
+        message: "The new name must be different from the current one.",
+      })
+      .optional(),
+    scanId: z.string(),
+  });
+
+export const onDemandScanFormSchema = () =>
+  z.object({
+    providerId: z.string(),
+    scanName: z.string().optional(),
+    scannerArgs: z
+      .object({
+        checksToExecute: z.array(z.string()),
+      })
+      .optional(),
+  });
+
+export const scheduleScanFormSchema = () =>
+  z.object({
+    providerId: z.string(),
+    scheduleDate: z.string(),
+  });
+
 export const addProviderFormSchema = z.object({
  providerType: z.string(),
  providerAlias: z.string(),