chore: add scan details for demo purposes

components/scans/table/scan-detail.tsx

@@ -84,10 +84,14 @@ export const ScanDetail = ({ scanDetails }: { scanDetails: ScanProps }) => {
             <DetailItem
               label="Task ID"
               value={
-                <SnippetId
-                  label="Task ID"
-                  entityId={scanDetails.relationships.task.data.id}
-                />
+                scanDetails.relationships.task?.data?.id ? (
+                  <SnippetId
+                    label="Task ID"
+                    entityId={scanDetails.relationships.task.data.id}
+                  />
+                ) : (
+                  "N/A"
+                )
               }
             />
           </div>
@@ -101,14 +105,14 @@ export const ScanDetail = ({ scanDetails }: { scanDetails: ScanProps }) => {
         <Divider />
 
         <CardBody className="p-4">
-          <DetailItem
-            label="Checks"
-            value={
-              (scanOnDemand.scanner_args as any)?.checks_to_execute?.join(
+          <div className="flex flex-col gap-2">
+            <span className="font-semibold text-default-500">Checks</span>
+            <span className="text-default-700">
+              {(scanOnDemand.scanner_args as any)?.checks_to_execute?.join(
                 ", ",
-              ) || "N/A"
-            }
-          />
+              ) || "N/A"}
+            </span>
+          </div>
         </CardBody>
       </Card>
     </div>

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

@@ -2,11 +2,14 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 
+import { InfoIcon, 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 "./data-table-row-actions";
+import { DataTableRowDetails } from "./data-table-row-details";
 
 const getScanData = (row: { original: ScanProps }) => {
   return row.original;
@@ -118,6 +121,21 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
       return <p className="font-medium">{unique_resource_count}</p>;
     },
   },
+  {
+    id: "moreInfo",
+    header: "Details",
+    cell: ({ row }) => {
+      return (
+        <TriggerSheet
+          triggerComponent={<InfoIcon className="text-primary" size={16} />}
+          title="Scan Details"
+          description="View the scan details"
+        >
+          <DataTableRowDetails entityId={row.original.id} />
+        </TriggerSheet>
+      );
+    },
+  },
 
   {
     id: "actions",

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

@@ -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} />;
+};

components/scans/table/scans/index.ts

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