feat: integrate Sheet component with ScanDetail view via getScan

app/(prowler)/scans/page.tsx

@@ -8,12 +8,10 @@ import {
   filterProviders,
   filterScans,
 } from "@/components/filters";
-import {
-  ColumnGetScansSchedule,
-  SkeletonTableScans,
-} from "@/components/scans/table";
+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";

components/scans/table/index.ts

@@ -1,3 +1,2 @@
-export * from "./column-get-scans-schedule";
 export * from "./scan-detail";
 export * from "./skeleton-table-scans";

components/scans/table/scan-detail.tsx

@@ -6,62 +6,105 @@ import { ScanProps } from "@/types";
 
 export const ScanDetail = ({ scanDetails }: { scanDetails: ScanProps }) => {
   return (
-    <Card className="mx-auto max-w-xl">
-      <CardHeader className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">Scan Details</h2>
-        <Chip
-          color={
-            scanDetails.attributes.state === "failed" ? "danger" : "success"
-          }
-        >
-          {scanDetails.attributes.state}
-        </Chip>
-      </CardHeader>
-      <Divider />
-      <CardBody>
-        <div className="space-y-4">
-          <DetailItem label="ID" value={scanDetails.id} />
-          <DetailItem label="Type" value={scanDetails.type} />
-          <DetailItem label="Trigger" value={scanDetails.attributes.trigger} />
-          <DetailItem
-            label="Resource Count"
-            value={scanDetails.attributes.unique_resource_count.toString()}
-          />
-          <DetailItem
-            label="Progress"
-            value={`${scanDetails.attributes.progress}%`}
-          />
-          <DetailItem
-            label="Duration"
-            value={`${scanDetails.attributes.duration} seconds`}
-          />
-          <DetailItem
-            label="Started At"
-            value={new Date(scanDetails.attributes.started_at).toLocaleString()}
-          />
-          <DetailItem
-            label="Completed At"
-            value={new Date(
-              scanDetails.attributes.completed_at,
-            ).toLocaleString()}
-          />
+    <div className="space-y-4">
+      <Card className="relative w-full border-small border-default-100 p-3 shadow-lg">
+        <CardHeader className="flex items-center justify-between py-2">
+          <h2 className="text-2xl font-bold">Scan Details</h2>
+          <Chip
+            color={
+              scanDetails.attributes.state === "failed" ? "danger" : "success"
+            }
+            variant="faded"
+          >
+            {scanDetails.attributes.state}
+          </Chip>
+        </CardHeader>
+
+        <Divider />
+
+        <CardBody className="p-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="space-y-4">
+              <DetailItem label="ID" value={scanDetails.id} />
+              <DetailItem label="Name" value={scanDetails.attributes.name} />
+              <DetailItem
+                label="Trigger"
+                value={scanDetails.attributes.trigger}
+              />
+              <DetailItem
+                label="Resource Count"
+                value={scanDetails.attributes.unique_resource_count.toString()}
+              />
+              <DetailItem
+                label="Progress"
+                value={`${scanDetails.attributes.progress}%`}
+              />
+              <DetailItem
+                label="Duration"
+                value={`${scanDetails.attributes.duration} seconds`}
+              />
+            </div>
+            <div className="space-y-4">
+              <DetailItem
+                label="Started At"
+                value={new Date(
+                  scanDetails.attributes.started_at,
+                ).toLocaleString()}
+              />
+              <DetailItem
+                label="Completed At"
+                value={new Date(
+                  scanDetails.attributes.completed_at,
+                ).toLocaleString()}
+              />
+              <DetailItem
+                label="Scheduled At"
+                value={
+                  scanDetails.attributes.scheduled_at
+                    ? new Date(
+                        scanDetails.attributes.scheduled_at,
+                      ).toLocaleString()
+                    : "Not Scheduled"
+                }
+              />
+              <DetailItem
+                label="Provider ID"
+                value={scanDetails.relationships.provider.data.id}
+              />
+              <DetailItem
+                label="Task ID"
+                value={scanDetails.relationships.task.data.id}
+              />
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      <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={
-              scanDetails.attributes.scanner_args?.excluded_checks?.join(
-                ", ",
-              ) || ""
+              (
+                scanDetails.attributes.scanner_args as any
+              )?.checks_to_execute?.join(", ") || "N/A"
             }
           />
-        </div>
-      </CardBody>
-    </Card>
+        </CardBody>
+      </Card>
+    </div>
   );
 };
 
 const DetailItem = ({ label, value }: { label: string; value: string }) => (
-  <div className="flex justify-between">
-    <span className="font-semibold">{label}:</span>
-    <span>{value}</span>
+  <div className="flex items-center justify-between">
+    <span className="font-semibold text-default-500">{label}:</span>
+    <span className="text-default-700">{value}</span>
   </div>
 );

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

@@ -5,14 +5,11 @@ 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,
-  DataTableRowDetails,
-  StatusBadge,
-} from "@/components/ui/table";
+import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
 import { ScanProps } from "@/types";
 
-import { DataTableRowActions } from "./scans/data-table-row-actions";
+import { DataTableRowActions } from "../scans/data-table-row-actions";
+import { DataTableRowDetails } from ".";
 
 const getScanData = (row: { original: ScanProps }) => {
   return row.original;

components/scans/table/schedule-scans/data-table-row-details.tsx

@@ -35,5 +35,3 @@ export const DataTableRowDetails = ({ entityId }: { entityId: string }) => {
 
   return <ScanDetail scanDetails={scanDetails} />;
 };
-
-// Remove the SSRDataRowDetails component as it's no longer needed

components/scans/table/schedule-scans/index.ts

@@ -0,0 +1,2 @@
+export * from "./column-get-scans-schedule";
+export * from "./data-table-row-details";

components/ui/sheet/sheet.tsx

@@ -38,9 +38,9 @@ const sheetVariants = cva(
         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 sm:max-w-sm",
+        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 sm:max-w-sm",
+          "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: {

components/ui/sheet/trigger-sheet.tsx

@@ -23,10 +23,10 @@ export function TriggerSheet({
   return (
     <Sheet>
       <SheetTrigger>{triggerComponent}</SheetTrigger>
-      <SheetContent className="w-[600px]">
+      <SheetContent className="max-w-[95vw] pt-10 md:max-w-[55vw]">
         <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-          <SheetDescription>{description}</SheetDescription>
+          <SheetTitle className="sr-only">{title}</SheetTitle>
+          <SheetDescription className="sr-only">{description}</SheetDescription>
         </SheetHeader>
         {children}
       </SheetContent>

components/ui/table/index.ts

@@ -2,7 +2,6 @@ export * from "./data-table";
 export * from "./data-table-column-header";
 export * from "./data-table-filter-custom";
 export * from "./data-table-pagination";
-export * from "./data-table-row-details";
 export * from "./severity-badge";
 export * from "./status-badge";
 export * from "./table";