feat: allow compliance data selection by choosing a scan

components/compliance/data-compliance/data-compliance.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+
+import { SelectScanComplianceData } from "@/components/compliance/data-compliance";
+
+interface DataComplianceProps {
+  scans: { id: string; name: string; state: string; progress: number }[];
+}
+
+export const DataCompliance = ({ scans }: DataComplianceProps) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const selectedScanId = searchParams.get("scanId") || scans[0]?.id;
+
+  const handleSelectionChange = (selectedKey: string) => {
+    router.push(`?scanId=${selectedKey}`);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-1 items-center gap-x-4 gap-y-4 md:grid-cols-2 xl:grid-cols-4">
+        <SelectScanComplianceData
+          scans={scans}
+          selectedScanId={selectedScanId}
+          onSelectionChange={handleSelectionChange}
+        />
+      </div>
+    </div>
+  );
+};

components/compliance/data-compliance/index.ts

@@ -0,0 +1,2 @@
+export * from "./data-compliance";
+export * from "./select-scan-compliance-data";

components/compliance/data-compliance/select-scan-compliance-data.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Select, SelectItem } from "@nextui-org/react";
+
+interface SelectScanComplianceDataProps {
+  scans: { id: string; name: string; state: string; progress: number }[];
+  selectedScanId: string;
+  onSelectionChange: (selectedKey: string) => void;
+}
+
+export const SelectScanComplianceData = ({
+  scans,
+  selectedScanId,
+  onSelectionChange,
+}: SelectScanComplianceDataProps) => {
+  return (
+    <Select
+      aria-label="Select a Scan"
+      placeholder="Select a scan"
+      labelPlacement="outside"
+      size="md"
+      selectedKeys={new Set([selectedScanId])}
+      onSelectionChange={(keys) =>
+        onSelectionChange(Array.from(keys)[0] as string)
+      }
+      renderValue={() => {
+        const selectedItem = scans.find((item) => item.id === selectedScanId);
+        return selectedItem ? (
+          <div className="flex flex-col">
+            <span className="font-bold">{selectedItem.name}</span>
+            <span className="text-sm text-gray-500">
+              State: {selectedItem.state}, Progress: {selectedItem.progress}%
+            </span>
+          </div>
+        ) : (
+          "Select a scan"
+        );
+      }}
+    >
+      {scans.map((scan) => (
+        <SelectItem key={scan.id} textValue={scan.name}>
+          <div className="flex flex-col">
+            <span className="font-bold">{scan.name}</span>
+            <span className="text-sm text-gray-500">
+              State: {scan.state}, Progress: {scan.progress}%
+            </span>
+          </div>
+        </SelectItem>
+      ))}
+    </Select>
+  );
+};

components/compliance/index.ts

@@ -1,2 +1,2 @@
-export * from "./ComplianceCard";
-export * from "./ComplianceSkeletonGrid";
+export * from "./compliance-card";
+export * from "./compliance-skeleton-grid";