Struktur in components verbessert

components/main/modulesStatus/Access1Status.tsx

@@ -0,0 +1,15 @@
+// components/Access1Status.jsx
+import React from "react";
+
+const Access1Status = () => {
+  return (
+    <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
+      {/* Grüner Streifen auf der linken Seite */}
+      <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
+      {/* Blauer Hauptbereich */}
+      <div className="flex flex-row text-white text-xs ">Access 1</div>
+    </div>
+  );
+};
+
+export default Access1Status;

components/main/modulesStatus/Access2Status.tsx

@@ -0,0 +1,15 @@
+// components/Access2Status.jsx
+import React from "react";
+
+const Access2Status = () => {
+  return (
+    <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
+      {/* Grüner Streifen auf der linken Seite */}
+      <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
+      {/* Blauer Hauptbereich */}
+      <div className="flex flex-row text-white text-xs ">Access 2</div>
+    </div>
+  );
+};
+
+export default Access2Status;

components/main/modulesStatus/CPLStatus.tsx

@@ -0,0 +1,15 @@
+// components/CPLStatus.jsx
+import React from "react";
+
+const CPLStatus = () => {
+  return (
+    <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-littwin-blue">
+      {/* Grüner Streifen auf der linken Seite */}
+      <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
+      {/* Blauer Hauptbereich */}
+      <div className="text-white text-xs ">CPL</div>
+    </div>
+  );
+};
+
+export default CPLStatus;

components/main/modulesStatus/KabelModulStatus.tsx

@@ -0,0 +1,68 @@
+const KabelModulStatus: React.FC<KabelModulStatusProps> = ({
+  slot,
+  kueCableBreak,
+  kueAlarm1,
+  kueAlarm2,
+  kueGroundFault,
+  isOnline,
+  moduleVersion,
+}) => {
+  if (!isOnline) {
+    return (
+      <div className="border border-gray-400 w-10 h-20 flex items-center justify-center bg-gray-200">
+        <div className="text-xs text-gray-500">Leer</div>
+      </div>
+    );
+  }
+
+  // Modultyp basierend auf der Version bestimmen
+  let moduleName = "";
+  let moduleType = "";
+
+  if (moduleVersion === 419) {
+    moduleName = "KÜ705";
+    moduleType = "FO";
+  } else if (moduleVersion === 350) {
+    moduleName = "KÜ605";
+    moduleType = "µC";
+  } else if (moduleVersion === 1100) {
+    moduleName = "KÜSS";
+    moduleType = "___";
+  }
+
+  // Status nur prüfen, wenn der Slot aktiv ist (kueOnline für den Slot ist 1)
+  const isCableBreak = kueCableBreak[slot - 1] === 1;
+  const isAlarm1 = kueAlarm1[slot - 1] === 1;
+  const isAlarm2 = kueAlarm2[slot - 1] === 1;
+  const groundFault = kueGroundFault[slot - 1] === 1;
+
+  return (
+    <div className="border border-gray-400 w-10 h-20 flex flex-col scale-100 xl:scale-90">
+      <div className="bg-littwin-blue flex-grow flex flex-col items-center justify-center text-white text-[10px]">
+        <div className="flex w-full mb-1 items-start justify-start">{slot}</div>
+        <div className="text-[10px]">{moduleName}</div>
+        <div className="text-[10px]">{moduleType}</div>
+      </div>
+      <div
+        className={`w-full h-2/6 ${
+          isCableBreak || isAlarm1 || isAlarm2 || groundFault
+            ? "bg-red-500"
+            : "bg-green-500"
+        }`}
+      ></div>
+      <div className="bg-littwin-blue w-full h-1/6"></div>
+    </div>
+  );
+};
+
+export default KabelModulStatus;
+
+interface KabelModulStatusProps {
+  slot: number;
+  kueCableBreak: number[];
+  kueAlarm1: number[];
+  kueAlarm2: number[];
+  kueGroundFault: number[];
+  isOnline: boolean;
+  moduleVersion: number;
+}

components/main/modulesStatus/XioPM1Status.tsx

@@ -0,0 +1,15 @@
+// components/Access1Status.jsx
+import React from "react";
+
+const Access1Status = () => {
+  return (
+    <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
+      {/* Grüner Streifen auf der linken Seite */}
+      <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
+      {/* Blauer Hauptbereich */}
+      <div className="flex flex-row text-white text-xs ">XIOPM 1</div>
+    </div>
+  );
+};
+
+export default Access1Status;

components/main/modulesStatus/XioPM2Status.tsx

@@ -0,0 +1,15 @@
+// components/Access1Status.jsx
+import React from "react";
+
+const Access1Status = () => {
+  return (
+    <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
+      {/* Grüner Streifen auf der linken Seite */}
+      <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
+      {/* Blauer Hauptbereich */}
+      <div className="flex flex-row text-white text-xs ">XIOPM 2</div>
+    </div>
+  );
+};
+
+export default Access1Status;