fix: Bei System: Detailansicht: Zeitraum von bis fehlt. Ganzseitenansicht fehlt noch. gelöst mit zoom und pan

components/main/system/DetailModal.tsx

@@ -1,9 +1,11 @@
 "use client";
-import React, { useEffect, useRef } from "react";
+// /components/main/system/DetailModal.tsx
+import React, { useEffect, useRef, useState } from "react";
 import { Line } from "react-chartjs-2";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "@/redux/store";
 import { Listbox } from "@headlessui/react";
+import { setFullScreen } from "@/redux/slices/kabelueberwachungChartSlice";
 
 import {
   Chart as ChartJS,
@@ -144,6 +146,27 @@ export const DetailModal = ({
     }
   });
 
+  const isFullScreen = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
+  );
+  const dispatch = useDispatch();
+
+  // **Vollbildmodus umschalten**
+  const toggleFullScreen = () => {
+    dispatch(setFullScreen(!isFullScreen));
+    setTimeout(() => {
+      chartRef.current?.resize();
+    }, 50);
+  };
+
+  const handleClose = () => {
+    dispatch({
+      type: "kabelueberwachungChartSlice/setFullScreen",
+      payload: false,
+    }); // Beim Schließen zurücksetzen
+    onClose();
+  };
+
   useEffect(() => {
     const loadZoomPlugin = async () => {
       if (typeof window !== "undefined") {
@@ -183,14 +206,40 @@ export const DetailModal = ({
 
   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-[50%] h-[60%] overflow-auto shadow-2xl">
-        <div className="flex justify-between items-center mb-4">
+      <div
+        className={`bg-white p-6 rounded-xl overflow-auto shadow-2xl transition-all duration-300 ${
+          isFullScreen ? "w-[95vw] h-[90vh]" : "w-[50%] h-[60%]"
+        }`}
+      >
+        <div className="relative">
           <h2 className="text-xl font-semibold">
             Detailansicht: {selectedKey}
           </h2>
-          <button onClick={onClose} className="text-2xl hover:text-gray-200">
-            <i className="bi bi-x-circle-fill"></i>
-          </button>
+
+          {/* Action-Buttons */}
+          <div className="absolute top-0 right-0 flex gap-3">
+            {/* Fullscreen-Button */}
+            <button
+              onClick={toggleFullScreen}
+              className="text-2xl text-gray-600 hover:text-gray-800"
+            >
+              <i
+                className={
+                  isFullScreen
+                    ? "bi bi-fullscreen-exit"
+                    : "bi bi-arrows-fullscreen"
+                }
+              ></i>
+            </button>
+
+            {/* Schließen-Button */}
+            <button
+              onClick={handleClose}
+              className="text-2xl text-gray-600 hover:text-gray-800"
+            >
+              <i className="bi bi-x-circle-fill"></i>
+            </button>
+          </div>
         </div>
 
         <div className="flex items-center space-x-2 mb-4">