Schleifen Chart von bis Kalendar

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-node scripts/incrementVersion.ts
+node incrementVersion.ts

components/modales/kueModal/ChartModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactModal from "react-modal";
-import TDRPopup from "./TDRPopup";
+import TDRPopup from "./LoopTDRChartActionBar";
 
 interface ChartModalProps {
   isOpen: boolean;

components/modales/kueModal/DateRangePicker.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+interface DateRangePickerProps {
+  setVonDatum: (date: Date) => void;
+  setBisDatum: (date: Date) => void;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  setVonDatum,
+  setBisDatum,
+}) => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(new Date());
+
+  return (
+    <div className="flex space-x-4">
+      <div>
+        <label className="block text-sm font-semibold">Von</label>
+        <DatePicker
+          selected={startDate}
+          onChange={(date) => {
+            setStartDate(date);
+            if (date) setVonDatum(date);
+          }}
+          selectsStart
+          startDate={startDate}
+          endDate={endDate}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-semibold">Bis</label>
+        <DatePicker
+          selected={endDate}
+          onChange={(date) => {
+            setEndDate(date);
+            if (date) setBisDatum(date);
+          }}
+          selectsEnd
+          startDate={startDate}
+          endDate={endDate}
+          minDate={startDate || undefined}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;

components/modales/kueModal/LoopTDRChartActionBar.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import DateRangePicker from "./DateRangePicker";
+
+const LoopTDRChartActionBar: React.FC = () => {
+  const [vonDatum, setVonDatum] = useState(new Date());
+  const [bisDatum, setBisDatum] = useState(new Date());
+
+  const handleAktualisieren = () => {
+    const von = vonDatum.toISOString().split("T")[0]; // Format: YYYY-MM-DD
+    const bis = bisDatum.toISOString().split("T")[0];
+
+    console.log(`Daten abrufen für Zeitraum: ${von} bis ${bis}`);
+    // API-Call hier mit den neuen Daten (z.B. location.href="...&DIA1=von;bis")
+  };
+
+  return (
+    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
+      <DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
+
+      <button
+        onClick={handleAktualisieren}
+        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
+      >
+        Aktualisieren
+      </button>
+    </div>
+  );
+};
+
+export default LoopTDRChartActionBar;

components/modales/kueModal/TDRPopup.tsx

@@ -1,208 +0,0 @@
-"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";
-import { useSelector } from "react-redux";
-import KueModal from "../../modales/kueModal/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;

components/modules/Kue705FO.tsx

@@ -12,7 +12,7 @@ import {
   setSelectedChartData,
   setSelectedFileName,
 } from "../../redux/slices/variablesSlice";
-import TDRPopup from "../modales/kueModal/TDRPopup";
+import TDRPopup from "../modales/kueModal/LoopTDRChartActionBar";
 import { createLoopChart, createTDRChart } from "../../utils/chartUtils";
 import { getAlarmDisplayText } from "../../utils/alarmUtils";
 import { goLoop } from "../../utils/goLoop";

config/webVersion.ts

@@ -5,5 +5,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.0.6.3";
+const webVersion = "1.0.6.5";
 export default webVersion;

incrementVersion.ts

@@ -1,24 +1,24 @@
 // /incrementVersion.ts
-import fs from "fs";
+const fs = require("fs");
-import path from "path";
+const path = require("path");
 
-const filePath = path.join(__dirname, "../config/webVersion.ts");
+const versionFilePath = path.join(process.cwd(), "config/webVersion.ts");
-const fileContent = fs.readFileSync(filePath, "utf8");
+const versionFile = fs.readFileSync(versionFilePath, "utf8");
 
-const versionRegex = /const webVersion = "(\d+)\.(\d+)\.(\d+)\.(\d+)";/;
+// Regex, um Versionsnummer zu finden
-const match = fileContent.match(versionRegex);
+const versionRegex = /(\d+)\.(\d+)\.(\d+)\.(\d+)/;
+const match = versionFile.match(versionRegex);
 
-if (!match) {
+if (match) {
-  console.error("Version format not found!");
+  let [major, minor, patch, build] = match.slice(1).map(Number);
+  build++; // Erhöhe die Build-Nummer automatisch
+
+  const newVersion = `${major}.${minor}.${patch}.${build}`;
+  const updatedFile = versionFile.replace(versionRegex, newVersion);
+
+  fs.writeFileSync(versionFilePath, updatedFile, "utf8");
+  console.log(`✅ Webversion aktualisiert auf: ${newVersion}`);
+} else {
+  console.error("❌ Konnte die Version nicht finden!");
   process.exit(1);
 }
-
-const [_, major, minor, build, patch] = match;
-const newVersion = `${major}.${minor}.${build}.${parseInt(patch, 10) + 1}`;
-const updatedContent = fileContent.replace(
-  versionRegex,
-  `const webVersion = "${newVersion}";`
-);
-
-fs.writeFileSync(filePath, updatedContent, "utf8");
-console.log(`Version updated to ${newVersion}`);

package-lock.json

@@ -19,11 +19,14 @@
         "chart.js": "^4.4.5",
         "chartjs-plugin-zoom": "^2.0.1",
         "crypto-js": "^4.2.0",
+        "date-fns": "^4.1.0",
         "idb": "^8.0.0",
         "jsonwebtoken": "^9.0.2",
         "jwt-decode": "^4.0.0",
         "next": "^14.2.23",
         "react": "^18.3.1",
+        "react-date-picker": "^11.0.0",
+        "react-datepicker": "^8.0.0",
         "react-dom": "^18.3.1",
         "react-modal": "^3.16.1",
         "react-redux": "^9.1.2",
@@ -650,6 +653,54 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.4.tgz",
+      "integrity": "sha512-05mXdkUiVh8NCEcYKQ2C9SV9IkZ9k/dFtYmaEIN2riLv80UHoXylgBM76cgPJYfLJM3dJz7UE5MOVH0FypMd2Q==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.9",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
+    },
     "node_modules/@fontsource/roboto": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.1.tgz",
@@ -1804,6 +1855,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@wojtekmaj/date-utils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz",
+      "integrity": "sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -3211,6 +3270,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
@@ -3281,6 +3349,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-element-overflow": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/detect-element-overflow/-/detect-element-overflow-1.4.2.tgz",
+      "integrity": "sha512-4m6cVOtvm/GJLjo7WFkPfwXoEIIbM7GQwIh4WEa4g7IsNi1YzwUsGL5ApNLrrHL29bHeNeQ+/iZhw+YHqgE2Fw==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/detect-element-overflow?sponsor=1"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -3994,6 +4070,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-user-locale": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-2.3.2.tgz",
+      "integrity": "sha512-O2GWvQkhnbDoWFUJfaBlDIKUEdND8ATpBXD6KXcbhxlfktyD/d8w6mkzM/IlQEqGZAMz/PW6j6Hv53BiigKLUQ==",
+      "dependencies": {
+        "mem": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/get-user-locale?sponsor=1"
+      }
+    },
     "node_modules/getos": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
@@ -5856,6 +5943,14 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
+    "node_modules/make-event-props": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.6.2.tgz",
+      "integrity": "sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
+      }
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -5865,6 +5960,17 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "dependencies": {
+        "p-defer": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5874,6 +5980,29 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mem": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
+      "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
+      "dependencies": {
+        "map-age-cleaner": "^0.1.3",
+        "mimic-fn": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/mem?sponsor=1"
+      }
+    },
+    "node_modules/mem/node_modules/mimic-fn": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -6194,6 +6323,14 @@
       "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
       "dev": true
     },
+    "node_modules/p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -6731,6 +6868,71 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-calendar": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-5.1.0.tgz",
+      "integrity": "sha512-09o/rQHPZGEi658IXAJtWfra1N69D1eFnuJ3FQm9qUVzlzNnos1+GWgGiUeSs22QOpNm32aoVFOimq0p3Ug9Eg==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.1.3",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-date-picker": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/react-date-picker/-/react-date-picker-11.0.0.tgz",
+      "integrity": "sha512-l+siu5HSZ/ciGL1293KCAHl4o9aD5rw16V4tB0C43h7QbMv2dWGgj7Dxgt8iztLaPVtEfOt/+sxNiTYw4WVq6A==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.1.3",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1",
+        "make-event-props": "^1.6.0",
+        "react-calendar": "^5.0.0",
+        "react-fit": "^2.0.0",
+        "update-input-width": "^1.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-date-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-datepicker": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.0.0.tgz",
+      "integrity": "sha512-OmWkFx3BGPXQhBdhFCZyfqR6n2Z5T3WaEXQxz0tdTY6zNntklnIDkaDSYsbKwy7TcyBgeoneG5f4sCwmFPJ4eA==",
+      "dependencies": {
+        "@floating-ui/react": "^0.27.3",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -6743,6 +6945,31 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fit": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-fit/-/react-fit-2.0.1.tgz",
+      "integrity": "sha512-Eip6ALs/+6Jv82Si0I9UnfysdwVlAhkkZRycgmMdnj7jwUg69SVFp84ICxwB8zszkfvJJ2MGAAo9KAYM8ZUykQ==",
+      "dependencies": {
+        "detect-element-overflow": "^1.4.0",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-fit?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7574,6 +7801,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
@@ -7949,6 +8181,14 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/update-input-width": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/update-input-width/-/update-input-width-1.4.2.tgz",
+      "integrity": "sha512-/p0XLhrQQQ4bMWD7bL9duYObwYCO1qGr8R19xcMmoMSmXuQ7/1//veUnCObQ7/iW6E2pGS6rFkS4TfH4ur7e/g==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/update-input-width?sponsor=1"
+      }
+    },
     "node_modules/url-parse": {
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",

package.json

@@ -24,11 +24,14 @@
     "chart.js": "^4.4.5",
     "chartjs-plugin-zoom": "^2.0.1",
     "crypto-js": "^4.2.0",
+    "date-fns": "^4.1.0",
     "idb": "^8.0.0",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
     "next": "^14.2.23",
     "react": "^18.3.1",
+    "react-date-picker": "^11.0.0",
+    "react-datepicker": "^8.0.0",
     "react-dom": "^18.3.1",
     "react-modal": "^3.16.1",
     "react-redux": "^9.1.2",