Dashbord Tabelle responsive mit flex-grow

components/modales/kueModal/TDRPopup.tsx

@@ -1,4 +1,4 @@
-"use client"; // components/modules/KueModal/TDRPopup.tsx
+"use client"; // components/modules/KueModal/TDRChartActionBar.tsx
 import React, { useState, useEffect, useRef } from "react";
 import ReactModal from "react-modal";
 import Chart from "chart.js/auto";
@@ -12,7 +12,7 @@ import {
   setSelectedChartData,
   setSelectedFileName,
 } from "../../../redux/store/variablesSlice";
-const TDRPopup: React.FC = () => {
+const TDRChartActionBar: React.FC = () => {
   const [jahr, setJahr] = useState(new Date().getFullYear());
   const [monat, setMonat] = useState(new Date().getMonth() + 1);
   const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
@@ -205,4 +205,4 @@ const TDRPopup: React.FC = () => {
   );
 };
 
-export default TDRPopup;
+export default TDRChartActionBar;

components/modules/AnalogeEingaengeComponent.tsx

@@ -1,48 +1,11 @@
 "use client"; // components/modules/AnalogeEingaengeComponent.tsx
 import React, { useState } from "react";
 import { Icon } from "@iconify/react";
-
-interface Input {
-  id: number;
-  value: number;
-  name: string;
-  uW: boolean;
-  uG: boolean;
-  oW: boolean;
-  oG: boolean;
-}
+import { analogInputs } from "../../data/mockdata/analogInputs";
 
 const AnalogeEingaengeComponent = () => {
   const [activeConfig, setActiveConfig] = useState<number | null>(null);
 
-  // Mock-Daten für die analogen Eingänge
-  const inputs = [
-    { id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    {
-      id: 2,
-      value: 22.91,
-      name: "Feuchtigkeit",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: false,
-    },
-    { id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    { id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    { id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    {
-      id: 6,
-      value: 21.0,
-      name: "Temperatur",
-      uW: true,
-      uG: true,
-      oW: false,
-      oG: false,
-    },
-    { id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
-    { id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-  ];
-
   return (
     <div className="border rounded-lg shadow-md p-6 bg-white flex flex-col h-full">
       <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
@@ -63,7 +26,7 @@ const AnalogeEingaengeComponent = () => {
             </tr>
           </thead>
           <tbody>
-            {inputs.map((input) => (
+            {analogInputs.map((input) => (
               <tr key={input.id} className="border-t">
                 <td className="px-2 py-1">{input.id}</td>
                 <td className="px-2 py-1">{input.value}</td>