TDR-Chart findet die dateien, aber zeichnet die Chart noch nicht

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useRef } from "react";
+// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
-import { useSelector } from "react-redux";
+import React, { useEffect, useRef, useState } from "react";
-import { RootState } from "../../../../../../redux/store";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-date-fns";
 import { parseISO } from "date-fns";
@@ -9,15 +8,42 @@ const TDRChart: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
-  // Nutze entweder Redux-Daten oder Mock-Daten
+  // Zustand für die Chart-Daten
-  const chartData = useSelector((state: RootState) => state.chartData.data) || [
+  const [chartData, setChartData] = useState<
-    { timestamp: "2025-02-13T12:00:00", tdr: 2.1 },
+    { timestamp: string; tdr: number }[]
-    { timestamp: "2025-02-13T12:10:00", tdr: 2.3 },
+  >([]);
-    { timestamp: "2025-02-13T12:20:00", tdr: 2.6 },
-  ];
 
   useEffect(() => {
-    if (chartRef.current) {
+    // Aktuelles Jahr und Monat ermitteln
+    const currentYear = new Date().getFullYear();
+    const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
+
+    // Pfad zur directory.json-Datei erstellen
+    const yearFolder = `Year_${String(currentYear).slice(-2)}`;
+    const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
+    const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
+
+    // Daten abrufen
+    fetch(path)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `Fehler beim Laden der Datei: ${response.statusText}`
+          );
+        }
+        return response.json();
+      })
+      .then((data) => {
+        // Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
+        setChartData(data);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Abrufen der Daten:", error);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (chartRef.current && chartData.length > 0) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
       }
@@ -57,16 +83,13 @@ const TDRChart: React.FC = () => {
         });
       }
     }
-
-    return () => {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
   }, [chartData]);
 
-  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
+  return (
+    <div>
+      <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />
+    </div>
+  );
 };
 
 export default TDRChart;

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx

@@ -1,11 +1,135 @@
 // /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import DateRangePicker from "../DateRangePicker";
 import TDRChart from "../../../../kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart";
 import { useDispatch } from "react-redux";
 import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
+import { parseISO } from "date-fns";
 
 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
+  const [ausgewählteDatei, setAusgewählteDatei] = useState<string>(""); // Ausgewählte Datei
+
+  const getYearFolderName = (year: number): string => {
+    return `Year_${String(year).slice(-2)}`;
+  };
+
+  const [sortAscending, setSortAscending] = useState(true);
+
+  // Fetch directory.json basierend auf Jahr und Monat
+  useEffect(() => {
+    const loadDirectory = async () => {
+      const yearFolder = getYearFolderName(jahr);
+      const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+      const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
+
+      console.log("Verwendeter Pfad:", path);
+
+      try {
+        const response = await fetch(path);
+        if (!response.ok) {
+          console.error(
+            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
+          );
+          setDateiListe([]); // Setze eine leere Liste
+          return;
+        }
+
+        const data = await response.json();
+        const files = data.files.map(
+          (file: { filename: string }) => file.filename
+        );
+        setDateiListe(files);
+      } catch (error) {
+        console.error("Fehler beim Laden der Datei directory.json:", error);
+      }
+    };
+
+    loadDirectory();
+  }, [jahr, monat]);
+
+  const handleSortToggle = () => {
+    setSortAscending(!sortAscending);
+    setDateiListe((prevListe) =>
+      [...prevListe].sort((a, b) =>
+        sortAscending ? a.localeCompare(b) : b.localeCompare(a)
+      )
+    );
+  };
+
+  const handleAktualisieren = () => {
+    console.log("Daten werden aktualisiert für:", jahr, monat);
+  };
+  //----------------------------------
+  const loadAndStoreChartData = async (url: string) => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        console.error(
+          `Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
+        );
+        return;
+      }
+      const data = await response.json();
+
+      console.log("Daten erfolgreich in Redux gespeichert:", data);
+    } catch (error) {
+      console.error("Fehler beim Laden der JSON-Daten:", error);
+    }
+  };
+  const handleLoadData = (filename: string) => {
+    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
+    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
+    loadAndStoreChartData(filePath);
+  };
+  const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedFile = event.target.value;
+    setAusgewählteDatei(selectedFile);
+    console.log("Ausgewählte Datei:", selectedFile);
+
+    // Lade die Datei und speichere sie in Redux
+    handleLoadData(selectedFile);
+  };
+
+  const chartRef = useRef<HTMLCanvasElement>(null);
+
+  // Zustand für die Chart-Daten
+  const [chartData, setChartData] = useState<
+    { timestamp: string; tdr: number }[]
+  >([]);
+
+  useEffect(() => {
+    // Aktuelles Jahr und Monat ermitteln
+    const currentYear = new Date().getFullYear();
+    const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
+
+    // Pfad zur directory.json-Datei erstellen
+    const yearFolder = `Year_${String(currentYear).slice(-2)}`;
+    const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
+    const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
+
+    // Daten abrufen
+    fetch(path)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `Fehler beim Laden der Datei: ${response.statusText}`
+          );
+        }
+        return response.json();
+      })
+      .then((data) => {
+        // Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
+        setChartData(data);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Abrufen der Daten:", error);
+      });
+  }, []);
+
   const dispatch = useDispatch();
   const BASE_URL = "http://localhost:3002";
 
@@ -17,7 +141,7 @@ const TDRChartActionBar: React.FC = () => {
       if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
 
       const data = await response.json();
-      dispatch(setChartData(data));
+
       setShowChart(true);
     } catch (error) {
       console.error("Fehler beim Laden der Daten:", error);
@@ -25,15 +149,78 @@ const TDRChartActionBar: React.FC = () => {
   };
 
   return (
-    <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
+    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
-      <DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
+      <div className="flex items-center space-x-2">
+        <label htmlFor="jahrSelect" className="text-sm font-semibold">
+          Jahr
+        </label>
+        <select
+          id="jahrSelect"
+          className="border rounded px-2 py-1"
+          value={jahr}
+          onChange={(e) => setJahr(Number(e.target.value))}
+        >
+          {Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
+            <option key={year} value={year}>
+              {year}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label htmlFor="monatSelect" className="text-sm font-semibold">
+          Monat
+        </label>
+        <select
+          id="monatSelect"
+          className="border rounded px-2 py-1"
+          value={monat}
+          onChange={(e) => setMonat(Number(e.target.value))}
+        >
+          {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
+            <option key={month} value={month}>
+              {month.toString().padStart(2, "0")}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label htmlFor="dateiSelect" className="text-sm font-semibold">
+          Auswahl
+        </label>
+        <select
+          id="dateiSelect"
+          className="border rounded px-2 py-1"
+          value={ausgewählteDatei}
+          onChange={handleDateiAuswahl}
+        >
+          <option value="" disabled>
+            Bitte wählen...
+          </option>
+          {dateiListe.map((file, index) => (
+            <option key={index} value={file}>
+              {file}
+            </option>
+          ))}
+        </select>
+      </div>
+
       <button
-        onClick={handleFetchData}
+        onClick={handleSortToggle}
+        className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
+      >
+        <i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
+        <span className="ml-1">Sortieren</span>
+      </button>
+
+      <button
+        onClick={handleAktualisieren}
         className="px-3 py-1 bg-green-500 text-white rounded text-sm"
       >
         Aktualisieren
       </button>
-      {showChart && null}
     </div>
   );
 };

components/modales/KueModal.jsx

@@ -0,0 +1,232 @@
+"use client"; // components/modales/KueModal.jsx
+import ReactModal from "react-modal";
+import { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import handleChange from "./handlers/handleChange";
+import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
+import handleSave from "./handlers/handleSave";
+
+function KueModal({ showModal, onClose, slot, onModulNameChange }) {
+  const dispatch = useDispatch();
+  const [ids, setIds] = useState(Array(32).fill("---"));
+  const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
+  const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
+    Array(32).fill(10.0)
+  );
+  const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
+  const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
+    Array(32).fill(0.1)
+  );
+  const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
+    Array(32).fill(1.0)
+  );
+  const [schleifenintervall, setSchleifenintervall] = useState(
+    Array(32).fill(24)
+  );
+
+  const [originalValues, setOriginalValues] = useState({});
+
+  // Werte aus dem Redux-Store abrufen
+  const {
+    kueID,
+    kueLimit1,
+    kueDelay1,
+    kueLimit2Low,
+    kueLimit2High,
+    kueLoopInterval,
+  } = useSelector((state) => state.variables);
+
+  // Initiale Werte festlegen, nur einmal beim Öffnen des Modals
+  useEffect(() => {
+    if (showModal) {
+      setIds(kueID ? kueID.map((id) => id.trim() || "---") : ids);
+      setBezeichnungen(
+        kueID ? kueID.map((name) => name.trim() || "---") : bezeichnungen
+      );
+      setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
+      setVerzoegerung(kueDelay1 || verzoegerung);
+      setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
+      setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
+      setSchleifenintervall(kueLoopInterval || schleifenintervall);
+
+      setOriginalValues({
+        ids: [...ids],
+        bezeichnungen: [...bezeichnungen],
+        isolationsgrenzwerte: [...isolationsgrenzwerte],
+        verzoegerung: [...verzoegerung],
+        untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
+        obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
+        schleifenintervall: [...schleifenintervall],
+      });
+    }
+  }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
+
+  return (
+    <ReactModal
+      isOpen={showModal}
+      onRequestClose={onClose}
+      ariaHideApp={false}
+      style={{
+        overlay: {
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 100,
+          text: "black",
+        },
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          width: "90%",
+          maxWidth: "800px",
+          padding: "10px",
+          borderRadius: "8px",
+          border: "none",
+        },
+      }}
+    >
+      <div className="flex items-center justify-between bg-littwin-blue text-white p-1 rounded-t-lg">
+        <h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
+        <button
+          onClick={onClose}
+          style={{
+            position: "absolute",
+            top: "10px",
+            right: "20px",
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            fontSize: "24px",
+          }}
+        >
+          <i className="bi bi-x-circle-fill"></i>
+        </button>
+      </div>
+
+      <div className="p-2 mb-4 text-black">
+        <div className="mb-2 ">
+          <label className="font-bold ">Kabelbezeichnung:</label>
+          <input
+            type="text"
+            className="border rounded p-1 w-full text-sm"
+            value={ids[slot]}
+            onChange={(e) => handleChange(setIds, e, slot)}
+          />
+        </div>
+      </div>
+
+      <div className="p-2 text-black">
+        <h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
+        <table className="w-full text-left border-collapse mb-4">
+          <thead className="bg-gray-100">
+            <tr>
+              <th className="p-2 border text-sm text-center">
+                Grenzwert (MOhm)
+              </th>
+              <th className="p-2 border text-sm text-center">
+                Verzögerung (sek)
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="p-2 border text-center">
+                <input
+                  type="number"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={isolationsgrenzwerte[slot]}
+                  step="0.1"
+                  onChange={(e) =>
+                    handleChange(setIsolationsgrenzwerte, e, slot)
+                  }
+                />
+              </td>
+              <td className="p-2 border text-center">
+                <input
+                  type="number"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={verzoegerung[slot]}
+                  step="0.1"
+                  onChange={(e) => handleChange(setVerzoegerung, e, slot)}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h3 className="font-bold text-center mb-4">Schleifenmessung</h3>
+        <table className="w-full text-left border-collapse">
+          <thead className="bg-gray-100">
+            <tr>
+              <th className="p-2 border text-sm text-center">
+                Grenzwert (kOhm)
+              </th>
+              <th className="p-2 border text-sm text-center">
+                Schleifenintervall (h)
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="p-2 border text-center">
+                <input
+                  type="number"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={untereSchleifenGrenzwerte[slot]}
+                  step="0.1"
+                  onChange={(e) =>
+                    handleChange(setUntereSchleifenGrenzwerte, e, slot)
+                  }
+                />
+              </td>
+              <td className="p-2 border text-center">
+                <input
+                  type="number"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={schleifenintervall[slot]}
+                  step="1"
+                  onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
+        <button
+          onClick={() => handleDisplayEinschalten(slot)}
+          className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
+        >
+          <span className="mr-2">📺</span> Display einschalten
+        </button>
+        <button
+          onClick={() =>
+            handleSave({
+              slot,
+              ids,
+              bezeichnungen,
+              isolationsgrenzwerte,
+              verzoegerung,
+              untereSchleifenGrenzwerte,
+              obereSchleifenGrenzwerte,
+              schleifenintervall,
+              originalValues,
+              onModulNameChange,
+              dispatch,
+              onClose,
+            })
+          }
+          className="bg-littwin-blue text-white p-2 rounded flex items-center"
+        >
+          <span className="mr-2">💾</span> Speichern
+        </button>
+      </div>
+    </ReactModal>
+  );
+}
+
+export default KueModal;

components/modales/kueModal/TDRPopup.tsx

@@ -0,0 +1,208 @@
+"use client"; // components/modules/KueModal/TDRPopup.tsx
+import React, { useState, useEffect, useRef } from "react";
+import ReactModal from "react-modal";
+import Chart from "chart.js/auto";
+import { useSelector } from "react-redux";
+import KueModal from "../KueModal";
+import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import { RootState } from "../../../redux/store";
+import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
+import { useDispatch } from "react-redux";
+import {
+  setSelectedChartData,
+  setSelectedFileName,
+} from "../../../redux/slices/variablesSlice";
+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
+  const [ausgewählteDatei, setAusgewählteDatei] = useState<string>(""); // Ausgewählte Datei
+
+  const dispatch = useDispatch(); // Redux-Dispatch
+
+  const getYearFolderName = (year: number): string => {
+    return `Year_${String(year).slice(-2)}`;
+  };
+
+  const [sortAscending, setSortAscending] = useState(true);
+
+  // Fetch directory.json basierend auf Jahr und Monat
+  useEffect(() => {
+    const loadDirectory = async () => {
+      const yearFolder = getYearFolderName(jahr);
+      const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+      const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
+
+      console.log("Verwendeter Pfad:", path);
+
+      try {
+        const response = await fetch(path);
+        if (!response.ok) {
+          console.error(
+            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
+          );
+          setDateiListe([]); // Setze eine leere Liste
+          return;
+        }
+
+        const data = await response.json();
+        const files = data.files.map(
+          (file: { filename: string }) => file.filename
+        );
+        setDateiListe(files);
+      } catch (error) {
+        console.error("Fehler beim Laden der Datei directory.json:", error);
+      }
+    };
+
+    loadDirectory();
+  }, [jahr, monat]);
+
+  const handleSortToggle = () => {
+    setSortAscending(!sortAscending);
+    setDateiListe((prevListe) =>
+      [...prevListe].sort((a, b) =>
+        sortAscending ? a.localeCompare(b) : b.localeCompare(a)
+      )
+    );
+  };
+
+  const handleAktualisieren = () => {
+    console.log("Daten werden aktualisiert für:", jahr, monat);
+  };
+  //----------------------------------
+  const loadAndStoreChartData = async (url: string) => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        console.error(
+          `Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
+        );
+        return;
+      }
+      const data = await response.json();
+      dispatch(setSelectedChartData(data));
+      console.log("Daten erfolgreich in Redux gespeichert:", data);
+    } catch (error) {
+      console.error("Fehler beim Laden der JSON-Daten:", error);
+    }
+  };
+  const handleLoadData = (filename: string) => {
+    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
+    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
+    loadAndStoreChartData(filePath);
+  };
+  const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedFile = event.target.value;
+    setAusgewählteDatei(selectedFile);
+    console.log("Ausgewählte Datei:", selectedFile);
+
+    // Datei in Redux speichern
+    dispatch(setSelectedFileName(selectedFile));
+
+    // Lade die Datei und speichere sie in Redux
+    handleLoadData(selectedFile);
+  };
+
+  const loadSelectedFileData = async (filename: string) => {
+    const yearFolder = getYearFolderName(jahr);
+    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+
+    try {
+      const response = await fetch(
+        `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`
+      );
+
+      if (response.ok) {
+        const data: DataTDR[] = await response.json();
+        console.log("Geladene Daten:", data);
+
+        // Redux-Action zum Speichern der Daten aufrufen
+        dispatch(setSelectedChartData(data));
+      } else {
+        console.error("Fehler beim Laden der Datei:", filename);
+      }
+    } catch (error) {
+      console.error("Fehler beim Laden der Datei:", error);
+    }
+  };
+
+  return (
+    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
+      <div className="flex items-center space-x-2">
+        <label htmlFor="jahrSelect" className="text-sm font-semibold">
+          Jahr
+        </label>
+        <select
+          id="jahrSelect"
+          className="border rounded px-2 py-1"
+          value={jahr}
+          onChange={(e) => setJahr(Number(e.target.value))}
+        >
+          {Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
+            <option key={year} value={year}>
+              {year}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label htmlFor="monatSelect" className="text-sm font-semibold">
+          Monat
+        </label>
+        <select
+          id="monatSelect"
+          className="border rounded px-2 py-1"
+          value={monat}
+          onChange={(e) => setMonat(Number(e.target.value))}
+        >
+          {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
+            <option key={month} value={month}>
+              {month.toString().padStart(2, "0")}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label htmlFor="dateiSelect" className="text-sm font-semibold">
+          Auswahl
+        </label>
+        <select
+          id="dateiSelect"
+          className="border rounded px-2 py-1"
+          value={ausgewählteDatei}
+          onChange={handleDateiAuswahl}
+        >
+          <option value="" disabled>
+            Bitte wählen...
+          </option>
+          {dateiListe.map((file, index) => (
+            <option key={index} value={file}>
+              {file}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <button
+        onClick={handleSortToggle}
+        className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
+      >
+        <i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
+        <span className="ml-1">Sortieren</span>
+      </button>
+
+      <button
+        onClick={handleAktualisieren}
+        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
+      >
+        Aktualisieren
+      </button>
+    </div>
+  );
+};
+
+export default TDRChartActionBar;