chore: table for launch scan is added to scan page

app/(prowler)/scans/page.tsx

@@ -3,7 +3,11 @@ import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
 import { FilterControls, filterScans } from "@/components/filters";
-import { ColumnScans, SkeletonTableScans } from "@/components/scans/table";
+import {
+  ColumnGetScans,
+  ColumnProviderScans,
+  SkeletonTableScans,
+} from "@/components/scans/table";
 import { Header } from "@/components/ui";
 import { DataTable } from "@/components/ui/table";
 import { SearchParamsProps } from "@/types";
@@ -23,8 +27,8 @@ export default async function Scans({
       <FilterControls search date providers />
       <Spacer y={4} />
 
-      <div className="grid grid-cols-12 items-end gap-4">
-        <div className="col-span-12 lg:col-span-4">
+      <div className="grid grid-cols-12 items-start gap-4">
+        <div className="col-span-12 lg:col-span-4 lg:mt-14">
           <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
             <SSRDataTableProviders searchParams={searchParams} />
           </Suspense>
@@ -59,10 +63,9 @@ const SSRDataTableProviders = async ({
 
   return (
     <DataTable
-      columns={ColumnScans}
+      columns={ColumnProviderScans}
       data={providersData?.data || []}
       metadata={providersData?.meta}
-      // customFilters={filterProviders}
     />
   );
 };
@@ -87,7 +90,7 @@ const SSRDataTableScans = async ({
 
   return (
     <DataTable
-      columns={ColumnScans}
+      columns={ColumnGetScans}
       data={providersData?.data || []}
       metadata={providersData?.meta}
       customFilters={filterScans}

components/providers/provider-info-short.tsx

@@ -41,8 +41,13 @@ export const ProviderInfoShort: React.FC<ProviderInfoProps> = ({
         <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} />
+            <span className="text-md max-w-24 overflow-hidden text-ellipsis font-semibold lg:max-w-36">
+              {providerAlias}
+            </span>
+            <SnippetIdProvider
+              className="h-5 max-w-44"
+              providerId={providerId}
+            />
           </div>
         </div>
       </div>

components/providers/provider-info.tsx

@@ -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>

components/providers/snippet-id-provider.tsx

@@ -25,7 +25,7 @@ export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
     >
       <p className="flex items-center space-x-2">
         <IdIcon size={16} />
-        <span className="no-scrollbar max-w-24 overflow-x-scroll text-sm">
+        <span className="no-scrollbar max-w-16 overflow-x-scroll text-sm">
           {providerId}
         </span>
       </p>

components/scans/table/column-get-scans.tsx

@@ -0,0 +1,122 @@
+"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 ColumnGetScans: 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} />;
+    },
+  },
+];

components/scans/table/column-provider-scans.tsx

@@ -11,7 +11,7 @@ const getProviderData = (row: { original: ProviderProps }) => {
   return row.original;
 };
 
-export const ColumnScans: ColumnDef<ProviderProps>[] = [
+export const ColumnProviderScans: ColumnDef<ProviderProps>[] = [
   {
     accessorKey: "provider",
     header: "Provider",

components/scans/table/index.ts

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