From 8989a7893636e8011eadcd695a0d6e357561dce9 Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Sun, 29 Sep 2024 17:56:46 +0200
Subject: [PATCH] XIOPM 1 und 2 in dashboard

---
 app/dashboard/page.jsx                    | 13 ++++++++++++-
 components/modulesStatus/Kue705_FO.jsx    | 10 +++++-----
 components/modulesStatus/XioPM1Status.jsx | 15 +++++++++++++++
 components/modulesStatus/XioPM2Status.jsx | 15 +++++++++++++++
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 components/modulesStatus/XioPM1Status.jsx
 create mode 100644 components/modulesStatus/XioPM2Status.jsx

diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
index 2e0b962..b3f0c9f 100644
--- a/app/dashboard/page.jsx
+++ b/app/dashboard/page.jsx
@@ -8,6 +8,8 @@ import CPLStatus from "../../components/modulesStatus/CPLStatus";
 import Access1Status from "../../components/modulesStatus/Access1Status";
 import Access2Status from "../../components/modulesStatus/Access2Status";
 import Kue705_FO from "../../components/modulesStatus/Kue705_FO";
+import XioPM1Status from "../../components/modulesStatus/XioPM1Status";
+import XioPM2Status from "../../components/modulesStatus/XioPM2Status";
 import { Icon } from "@iconify/react";
 
 function Dashboard() {
@@ -209,7 +211,7 @@ function Dashboard() {
 
           {/* Beispiel für Geräteanzeige */}
           <div className="bg-gray-50  rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
-            <div className="flex flex-row item-center justify-between bg-red-600 p-1">
+            <div className="flex flex-row item-center justify-between  p-1">
               <CPLStatus />
               <Access1Status />
               <Access2Status />
@@ -227,6 +229,15 @@ function Dashboard() {
                 </div>
               </div>
             </div>
+            {/* Die Box für XIOPM1 und XIOPM2, jeweils unter CPL und Access 1 */}
+            <div className="grid grid-cols-3 gap-4 p-4">
+              <div className="flex justify-start items-center">
+                <XioPM1Status /> {/* Unter CPL */}
+              </div>
+              <div className="flex justify-center items-center">
+                <XioPM2Status /> {/* Unter Access 1 */}
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/modulesStatus/Kue705_FO.jsx b/components/modulesStatus/Kue705_FO.jsx
index 5c13682..5781b2e 100644
--- a/components/modulesStatus/Kue705_FO.jsx
+++ b/components/modulesStatus/Kue705_FO.jsx
@@ -5,15 +5,15 @@ const Kue705_FO = ({ slot }) => {
   return (
     <div className="border border-gray-400 w-10 h-20 flex flex-col">
       {/* Erstes Kind, nimmt den restlichen Platz ein */}
-      <div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs">
-        <div className="flex w-full p-1 mb-4 items-start justify-start">
+      <div className="bg-blue-500 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-xs">KÜ705</div>
-        <div className="text-xs">FO</div>
+        <div className="text-[10px]">KÜ705</div>
+        <div className="text-[10px]">FO</div>
       </div>
       {/* Die unteren Abschnitte behalten ihre festen Höhen */}
-      <div className="bg-green-500 w-full h-3/6"></div>
+      <div className="bg-green-500 w-full h-2/6"></div>
       <div className="bg-blue-500 w-full h-1/6"></div>
     </div>
   );
diff --git a/components/modulesStatus/XioPM1Status.jsx b/components/modulesStatus/XioPM1Status.jsx
new file mode 100644
index 0000000..192d699
--- /dev/null
+++ b/components/modulesStatus/XioPM1Status.jsx
@@ -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;
diff --git a/components/modulesStatus/XioPM2Status.jsx b/components/modulesStatus/XioPM2Status.jsx
new file mode 100644
index 0000000..243199a
--- /dev/null
+++ b/components/modulesStatus/XioPM2Status.jsx
@@ -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;