style: KVZ Modal optisch an die anderen angepasst

components/main/kabelueberwachung/kue705FO/Charts/KVZChart/KVZChartView.tsx

@@ -41,20 +41,24 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
     (state: RootState) => state.dateRangePicker
   );
 
-  // Beim Öffnen Slot setzen (damit konsistent zu anderen Modals)
+  // Beim Öffnen: Slot + Standard-Datumsbereich setzen (30 Tage) – analog zu anderen Modals
   useEffect(() => {
-    if (isOpen) {
-      dispatch(setSlotNumber(slotIndex));
-    }
-  }, [isOpen, slotIndex, dispatch]);
-
-  const handleClose = () => {
+    if (!isOpen) return;
+    dispatch(setSlotNumber(slotIndex));
     const today = new Date();
     const thirtyDaysAgo = new Date();
     thirtyDaysAgo.setDate(today.getDate() - 30);
     const toISO = (d: Date) => d.toLocaleDateString("sv-SE");
+    dispatch(setVonDatum(toISO(thirtyDaysAgo)));
+    dispatch(setBisDatum(toISO(today)));
+  }, [isOpen, slotIndex, dispatch]);
 
-    // Zurücksetzen – entspricht Verhalten der anderen Modals
+  const handleClose = () => {
+    // Reset auf Default (wie andere Modals es tun)
+    const today = new Date();
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(today.getDate() - 30);
+    const toISO = (d: Date) => d.toLocaleDateString("sv-SE");
     dispatch(setVonDatum(toISO(thirtyDaysAgo)));
     dispatch(setBisDatum(toISO(today)));
     dispatch(setSelectedMode("DIA1"));
@@ -62,7 +66,6 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
     dispatch(setChartOpen(false));
     dispatch(setFullScreen(false));
     dispatch(resetBrushRange());
-
     onClose();
   };
 
@@ -74,82 +77,72 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
     try {
       dispatch(setLoading(true));
       await dispatch(getMessagesThunk({ fromDate, toDate })).unwrap();
-    } catch (err) {
-      console.error("❌ Fehler beim Laden der Meldungen (KVZ)", err);
+    } catch (e) {
+      console.error("Fehler beim Laden der KVZ Meldungen", e);
     } finally {
       dispatch(setLoading(false));
     }
   };
-
   return (
     <ReactModal
       isOpen={isOpen}
       onRequestClose={handleClose}
       ariaHideApp={false}
       style={{
-        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        overlay: {
+          backgroundColor: "rgba(0,0,0,0.55)",
+          backdropFilter: "blur(2px)",
+        },
         content: {
-          top: "50%",
-          left: "50%",
-          bottom: "auto",
-          marginRight: "-50%",
+          inset: "50% auto auto 50%",
           transform: "translate(-50%, -50%)",
-          width: isFullScreen ? "90vw" : "60rem",
-          height: isFullScreen ? "90vh" : "32rem",
-          padding: "1rem",
-          transition: "all 0.3s ease-in-out",
+          width: isFullScreen ? "90vw" : "72rem",
+          height: isFullScreen ? "90vh" : "38rem",
+          padding: 0,
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          borderRadius: "14px",
           display: "flex",
           flexDirection: "column",
-          overflowX: "hidden",
+          overflow: "hidden",
         },
       }}
+      contentLabel="KVZ Zustände & Meldungen"
     >
-      {/* Action Buttons */}
-      <div
-        style={{
-          position: "absolute",
-          top: "0.625rem",
-          right: "0.625rem",
-          display: "flex",
-          gap: "0.75rem",
-        }}
-      >
-        <button
-          onClick={toggleFullScreen}
-          style={{
-            background: "transparent",
-            border: "none",
-            fontSize: "1.5rem",
-            cursor: "pointer",
-          }}
-        >
-          <i
-            className={
-              isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
-            }
-          ></i>
-        </button>
-        <button
-          onClick={handleClose}
-          style={{
-            background: "transparent",
-            border: "none",
-            fontSize: "1.5rem",
-            cursor: "pointer",
-          }}
-        >
-          <i className="bi bi-x-circle-fill"></i>
-        </button>
-      </div>
-
-      {/* Content */}
-      <div className="flex flex-col h-full">
-        <h3 className="text-lg font-semibold mb-1">KVz Zustände & Meldungen</h3>
-
-        {/* Toolbar mit KÜ + DateRangePicker + Sensoren (analog zu anderen Modalen) */}
-        <div className="w-full flex flex-wrap items-center gap-4 mb-4">
+      <header className="modal-header relative pr-32">
+        <h3 className="text-sm font-semibold tracking-wide">
+          KVZ Zustände & Meldungen
+        </h3>
+        <div className="absolute top-2 right-2 flex gap-2">
+          <button
+            onClick={toggleFullScreen}
+            className="icon-btn"
+            aria-label={isFullScreen ? "Vollbild verlassen" : "Vollbild"}
+            type="button"
+          >
+            <i
+              className={
+                isFullScreen
+                  ? "bi bi-fullscreen-exit"
+                  : "bi bi-arrows-fullscreen"
+              }
+            />
+          </button>
+          <button
+            onClick={handleClose}
+            className="icon-btn"
+            aria-label="Schließen"
+            type="button"
+          >
+            <i className="bi bi-x-lg" />
+          </button>
+        </div>
+      </header>
+      <div className="flex flex-col flex-1 p-3 gap-3">
+        {/* Toolbar */}
+        <div className="w-full flex flex-wrap items-center gap-4">
           <div className="flex items-center gap-2">
-            <span className="text-xs font-semibold opacity-80 select-none">
+            <span className="text-xs font-semibold opacity-80 select-none text-fg-secondary">
               KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
             </span>
           </div>
@@ -165,16 +158,14 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
               Anzeigen
             </button>
           </div>
-          <div
-            className="flex items-center justify-end"
-            style={{ width: "12rem" }}
-          >
+          <div className="flex items-center justify-end w-48">
             <FallSensors slotIndex={slotIndex} />
           </div>
         </div>
-        {/* Meldungen Bereich */}
-        <div className="flex-1 border rounded bg-white overflow-hidden">
-          <Report moduleType="KVZ" />
+        <div className="flex-1 relative border border-base rounded bg-[var(--color-surface-alt)] text-fg overflow-hidden p-2">
+          <div className="w-full h-full rounded bg-[var(--color-surface)] overflow-hidden">
+            <Report moduleType="KVZ" />
+          </div>
         </div>
       </div>
     </ReactModal>