feat: API für Systemspannung +5V erfolgreich implementiert

- API-Handler `getSystemspannung5VplusHandler.ts` erstellt
- JSON-Daten werden aus dem Verzeichnis `mocks/device-cgi-simulator/chartsData/systemspannung5Vplus/` geladen
- unterstützt die Parameter DIA0, DIA1, DIA2 für unterschiedliche Datenfrequenzen
- Fehlerbehandlung bei ungültigen Typen und fehlenden Dateien eingebaut
- API getestet unter `/api/cpl/getSystemspannung5VplusHandler?typ=DIA0`

components/main/system/DetailModal.tsx

@@ -0,0 +1,96 @@
+// components/main/system/DetailModal.tsx
+"use client";
+import React from "react";
+import { Line } from "react-chartjs-2";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+
+type Props = {
+  isOpen: boolean;
+  selectedKey: string | null;
+  onClose: () => void;
+};
+
+export const DetailModal = ({ isOpen, selectedKey, onClose }: Props) => {
+  // Mapping: Welcher Redux-Zweig zu welchem selectedKey gehört
+  const typMap: Record<string, "DIA0" | "DIA1" | "DIA2"> = {
+    "+5V": "DIA1",
+    "+15V": "DIA1",
+    "-15V": "DIA1",
+    "-98V": "DIA1",
+  };
+
+  const typ = selectedKey ? typMap[selectedKey] : null;
+
+  // Redux State abrufen
+  const reduxData = useSelector((state: RootState) =>
+    typ ? state.systemspannung5Vplus[typ] : []
+  );
+
+  // Zeitstempel und Werte extrahieren
+  const labels = reduxData.map((e: any) => e.t);
+  const values = reduxData.map((e: any) => e.i);
+
+  const baseOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        beginAtZero: false,
+        grid: { color: "rgba(200,200,200,0.2)" },
+        title: { display: true, text: "Wert" },
+      },
+      x: {
+        grid: { color: "rgba(200,200,200,0.2)" },
+        title: { display: true, text: "Zeit" },
+      },
+    },
+    plugins: {
+      legend: { position: "bottom" as const },
+      title: { display: true, text: `Verlauf – ${selectedKey}` },
+    },
+  };
+
+  if (!isOpen || !selectedKey) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+      <div className="bg-white p-6 rounded-xl w-[90%] max-w-[1200px] h-[80vh] overflow-auto shadow-2xl">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold">
+            Detailansicht: {selectedKey}
+          </h2>
+          <button onClick={onClose} className="text-red-500 hover:text-red-700">
+            ✕
+          </button>
+        </div>
+
+        <div className="mb-4">
+          <label className="mr-2 font-medium">Zeitraum:</label>
+          <select className="border px-2 py-1 rounded">
+            <option>Letzte 24 Stunden</option>
+            {/* Optional: dynamische Filter */}
+          </select>
+        </div>
+
+        <div className="h-[500px]">
+          <Line
+            data={{
+              labels,
+              datasets: [
+                {
+                  label: selectedKey,
+                  data: values,
+                  borderColor: "rgba(59,130,246,1)",
+                  backgroundColor: "rgba(59,130,246,0.2)",
+                  fill: false,
+                },
+              ],
+            }}
+            options={baseOptions}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};