chore: table for launch scan is added to scan page

app/(prowler)/scans/page.tsx

@@ -2,11 +2,7 @@ import { Spacer } from "@nextui-org/react";
 import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
-import {
-  FilterControls,
-  filterProviders,
-  filterScans,
-} from "@/components/filters";
+import { FilterControls, filterScans } from "@/components/filters";
 import { ColumnScans, SkeletonTableScans } from "@/components/scans/table";
 import { Header } from "@/components/ui";
 import { DataTable } from "@/components/ui/table";
@@ -27,13 +23,13 @@ export default async function Scans({
       <FilterControls search date providers />
       <Spacer y={4} />
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <div className="w-full">
+      <div className="grid grid-cols-12 items-end gap-4">
+        <div className="col-span-12 lg:col-span-4">
           <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
             <SSRDataTableProviders searchParams={searchParams} />
           </Suspense>
         </div>
-        <div className="w-full">
+        <div className="col-span-12 lg:col-span-8">
           <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
             <SSRDataTableScans searchParams={searchParams} />
           </Suspense>
@@ -66,7 +62,7 @@ const SSRDataTableProviders = async ({
       columns={ColumnScans}
       data={providersData?.data || []}
       metadata={providersData?.meta}
-      customFilters={filterProviders}
+      // customFilters={filterProviders}
     />
   );
 };

components/providers/index.ts

@@ -3,6 +3,7 @@ export * from "./CheckConnectionProvider";
 export * from "./date-with-time";
 export * from "./forms/delete-form";
 export * from "./provider-info";
+export * from "./provider-info-short";
 export * from "./radio-group-provider";
 export * from "./scan-status";
 export * from "./snippet-id-provider";

components/providers/provider-info-short.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import {
+  AWSProviderBadge,
+  AzureProviderBadge,
+  GCPProviderBadge,
+  KS8ProviderBadge,
+} from "../icons/providers-badge";
+import { SnippetIdProvider } from "./snippet-id-provider";
+
+interface ProviderInfoProps {
+  connected: boolean | null;
+  provider: "aws" | "azure" | "gcp" | "kubernetes";
+  providerAlias: string;
+  providerId: string;
+}
+
+export const ProviderInfoShort: React.FC<ProviderInfoProps> = ({
+  provider,
+  providerAlias,
+  providerId,
+}) => {
+  const getProviderLogo = () => {
+    switch (provider) {
+      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="max-w-full">
+      <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 flex-col">
+            <span className="text-md font-semibold">{providerAlias}</span>
+            <SnippetIdProvider className="h-5" providerId={providerId} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/providers/snippet-id-provider.tsx

@@ -5,9 +5,11 @@ import { CopyIcon, DoneIcon, IdIcon } from "../icons";
 
 interface SnippetIdProviderProps {
   providerId: string;
+  [key: string]: any;
 }
 export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
   providerId,
+  ...props
 }) => {
   return (
     <Snippet
@@ -19,6 +21,7 @@ export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
       hideSymbol
       copyIcon={<CopyIcon size={16} />}
       checkIcon={<DoneIcon size={16} />}
+      {...props}
     >
       <p className="flex items-center space-x-2">
         <IdIcon size={16} />

components/scans/table/column-scans.tsx

@@ -1,122 +1,56 @@
 "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 { AddIcon } from "@/components/icons/Icons";
+import { ProviderInfoShort } from "@/components/providers";
+import { CustomButton } from "@/components/ui/custom";
 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" />
-    ),
+    accessorKey: "provider",
+    header: "Provider",
     cell: ({ row }) => {
       const {
-        attributes: { connection, provider, alias },
+        attributes: { connection, provider, alias, uid },
       } = getProviderData(row);
       return (
-        <ProviderInfo
+        <ProviderInfoShort
           connected={connection.connected}
           provider={provider}
           providerAlias={alias}
+          providerId={uid}
         />
       );
     },
   },
   {
-    accessorKey: "uid",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"Id"} param="uid" />
-    ),
+    accessorKey: "launchScan",
+    header: "Launch Scan",
     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} />;
+      return (
+        <CustomButton
+          className="w-full"
+          ariaLabel="Start Scan"
+          variant="solid"
+          color="action"
+          size="md"
+          endContent={<AddIcon size={20} />}
+          onPress={() => {
+            console.log(uid);
+          }}
+        >
+          Start
+        </CustomButton>
+      );
     },
   },
 ];

components/ui/table/data-table.tsx

@@ -58,9 +58,11 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
-      <div className="mb-6">
-        <DataTableFilterCustom filters={customFilters || []} />
-      </div>
+      {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>