style: LEDs style

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.662
+NEXT_PUBLIC_APP_VERSION=1.6.663
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.662
+NEXT_PUBLIC_APP_VERSION=1.6.663
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.663] – 2025-07-31
+
+- feat: KVZ API JSON Data
+
+---
 ## [1.6.662] – 2025-07-31
 
 - Feat: KVz Bereich in EinstellungsModal in KÜs Modal

components/main/fall-detection-sensors/FallSensors.tsx

@@ -22,28 +22,39 @@ const FallSensors: React.FC<FallSensorsProps> = ({ slotIndex }) => {
   });
 
   return (
-    <div className="flex justify-center items-center gap-2 p-3 border rounded-lg bg-gray-100 shadow-sm">
+    <div className="bg-gray-300 border border-gray-400 rounded p-1">
-      {leds.map((ledStatus, ledIndex) => {
+      {/* Überschrift mit KVZ-Labels */}
-        // LED Farben: grün (1), rot (0), grau (2)
+      <div className="flex justify-between items-center mb-2">
-        let bgColor = "bg-gray-400"; // Standard grau
+        <span className="text-[8px] font-medium text-gray-700">KVZ1</span>
-        let statusText = "Unbekannt";
+        <span className="text-[8px] font-medium text-gray-700">KVZ2</span>
+        <span className="text-[8px] font-medium text-gray-700">KVZ3</span>
+        <span className="text-[8px] font-medium text-gray-700">KVZ4</span>
+      </div>
 
-        if (ledStatus === "green") {
+      {/* LEDs */}
-          bgColor = "bg-green-500";
+      <div className="flex justify-between items-center">
-          statusText = "Ein";
+        {leds.map((ledStatus, ledIndex) => {
-        } else if (ledStatus === "red") {
+          // LED Farben: grün (1), rot (0), grau (2)
-          bgColor = "bg-red-500";
+          let bgColor = "bg-gray-400"; // Standard grau
-          statusText = "Aus";
+          let statusText = "Unbekannt";
-        }
 
-        return (
+          if (ledStatus === "green") {
-          <div
+            bgColor = "bg-green-500";
-            key={ledIndex}
+            statusText = "Ein";
-            className={`w-3 h-3 rounded-full border-2 border-gray-300 shadow-sm ${bgColor} transition-all duration-200 hover:scale-110 flex-shrink-0`}
+          } else if (ledStatus === "red") {
-            title={`Slot ${slotIndex} LED${ledIndex + 1}: ${statusText}`}
+            bgColor = "bg-red-500";
-          />
+            statusText = "Aus";
-        );
+          }
-      })}
+
+          return (
+            <div
+              key={ledIndex}
+              className={`w-4 h-4 rounded-full border border-gray-500 ${bgColor} flex-shrink-0`}
+              title={`Slot ${slotIndex} LED${ledIndex + 1}: ${statusText}`}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 };

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.662",
+  "version": "1.6.663",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.662",
+      "version": "1.6.663",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.662",
+  "version": "1.6.663",
   "private": true,
   "scripts": {
     "dev": "next dev",