Move components inside folders

Signed-off-by: Andrea Pavone <info@andreapavone.com>

resources/js/Components/Dashboard/Vulnerabilities/VulnerabilitiesActiveCard.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useMemo } from 'react';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/Components/ui/card";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/Components/ui/select";
+import {SecuritySummaryReportResultType} from "@/types/security-summary";
+import VulnerabilityPieChart from "@/Components/VulnerabilityPieChart";
+
+export default function VulnerabilitiesActiveCard({reportData}: { reportData: SecuritySummaryReportResultType }) {
+    const vulnerabilityData = useMemo(() => [
+        { name: 'Critical', value: reportData.n_vulns.active.critical, fill: 'hsl(var(--chart-1))' },
+        { name: 'High', value: reportData.n_vulns.active.high, fill: 'hsl(var(--chart-2))' },
+        { name: 'Medium', value: reportData.n_vulns.active.medium, fill: 'hsl(var(--chart-3))' },
+    ], [reportData]);
+
+    const [activeMetric, setActiveMetric] = useState(vulnerabilityData[0].name);
+
+    const activeIndex = useMemo(
+        () => vulnerabilityData.findIndex((item) => item.name === activeMetric),
+        [activeMetric, vulnerabilityData]
+    );
+
+    const metrics = useMemo(() => vulnerabilityData.map((item) => item.name), [vulnerabilityData]);
+
+    const chartConfig: any = {
+        'Critical': {
+            label: "Critical",
+            color: 'hsl(var(--chart-1))'
+        },
+        'High': {
+            label: "High",
+            color: 'hsl(var(--chart-2))'
+        },
+        'Medium': {
+            label: "Medium",
+            color: 'hsl(var(--chart-3))'
+        },
+    };
+
+    return (
+        <Card>
+            <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-0">
+                <div className="grid gap-1">
+                    <CardTitle>Active Vulnerabilities</CardTitle>
+                    <CardDescription>Number of Active Vulnerabilities</CardDescription>
+                </div>
+                <Select value={activeMetric} onValueChange={setActiveMetric}>
+                    <SelectTrigger
+                        className="ml-auto h-8 w-[180px] rounded-lg"
+                        aria-label="Select security metric"
+                    >
+                        <SelectValue placeholder="Select metric" />
+                    </SelectTrigger>
+                    <SelectContent align="end" className="rounded-lg">
+                        {metrics.map((metric) => (
+                            <SelectItem
+                                key={metric}
+                                value={metric}
+                                className="rounded-lg [&_span]:flex"
+                            >
+                                <div className="flex items-center gap-2 text-xs">
+                                    <span
+                                        className="h-3 w-3 rounded-sm"
+                                        style={{
+                                            backgroundColor: chartConfig[metric]?.color
+                                        }}
+                                    />
+                                    {chartConfig[metric].label}
+                                </div>
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </CardHeader>
+            <CardContent className="flex flex-1 justify-center pb-0">
+                <VulnerabilityPieChart vulnerabilityData={vulnerabilityData} activeIndex={activeIndex} />
+            </CardContent>
+        </Card>
+    );
+}