feat(DateTimePicker): integrate flatpickr for enhanced date/time selection and theming

package-lock.json

@@ -13,10 +13,10 @@
         "better-sqlite3": "^11.0.0",
         "concurrently": "^9.0.0",
         "cors": "^2.8.5",
-        "date-fns": "^4.1.0",
         "dotenv": "^16.4.0",
         "express": "^4.21.0",
         "express-rate-limit": "^7.5.1",
+        "flatpickr": "^4.6.13",
         "ioredis": "^5.10.0",
         "jsonwebtoken": "^9.0.0",
         "lucide-react": "^0.460.0",
@@ -25,7 +25,6 @@
         "pg": "^8.18.0",
         "rate-limit-redis": "^4.3.1",
         "react": "^18.3.0",
-        "react-datepicker": "^9.1.0",
         "react-dom": "^18.3.0",
         "react-hot-toast": "^2.4.0",
         "react-router-dom": "^6.28.0",
@@ -779,59 +778,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
-      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
-      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.7.5",
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/react": {
-      "version": "0.27.19",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.19.tgz",
-      "integrity": "sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.1.8",
-        "@floating-ui/utils": "^0.2.11",
-        "tabbable": "^6.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=17.0.0",
-        "react-dom": ">=17.0.0"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
-      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.7.6"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
-      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
-      "license": "MIT"
-    },
     "node_modules/@ioredis/commands": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.1.tgz",
@@ -1895,15 +1841,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/cluster-key-slot": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
@@ -2071,16 +2008,6 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
-    "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==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
-      }
-    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2542,6 +2469,12 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+      "license": "MIT"
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -3955,27 +3888,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-datepicker": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-9.1.0.tgz",
-      "integrity": "sha512-lOp+m5bc+ttgtB5MHEjwiVu4nlp4CvJLS/PG1OiOe5pmg9kV73pEqO8H0Geqvg2E8gjqTaL9eRhSe+ZpeKP3nA==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react": "^0.27.15",
-        "clsx": "^2.1.1",
-        "date-fns": "^4.1.0"
-      },
-      "peerDependencies": {
-        "date-fns-tz": "^3.0.0",
-        "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "date-fns-tz": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -4605,12 +4517,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tabbable": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
-      "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
-      "license": "MIT"
-    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",

package.json

@@ -17,10 +17,10 @@
     "better-sqlite3": "^11.0.0",
     "concurrently": "^9.0.0",
     "cors": "^2.8.5",
-    "date-fns": "^4.1.0",
     "dotenv": "^16.4.0",
     "express": "^4.21.0",
     "express-rate-limit": "^7.5.1",
+    "flatpickr": "^4.6.13",
     "ioredis": "^5.10.0",
     "jsonwebtoken": "^9.0.0",
     "lucide-react": "^0.460.0",
@@ -29,7 +29,6 @@
     "pg": "^8.18.0",
     "rate-limit-redis": "^4.3.1",
     "react": "^18.3.0",
-    "react-datepicker": "^9.1.0",
     "react-dom": "^18.3.0",
     "react-hot-toast": "^2.4.0",
     "react-router-dom": "^6.28.0",

src/components/DateTimePicker.jsx

@@ -1,16 +1,22 @@
+import { useEffect, useRef } from 'react';
+import flatpickr from 'flatpickr';
+import { German } from 'flatpickr/dist/l10n/de.js';
 import { Calendar as CalendarIcon, Clock } from 'lucide-react';
 
+// Register German as default locale
+flatpickr.localize(German);
+
 /**
- * Themed DateTimePicker using native <input type="date"> + <input type="time">.
+ * Themed DateTimePicker using flatpickr.
- * No popups, no Popper.js, no scroll issues — the browser-native date/time
+ * flatpickr uses position:fixed for its calendar dropdown — no overflow,
- * pickers handle everything and respect the OS dark/light mode via color-scheme.
+ * no scroll issues, no Popper.js needed. CSS variables drive all theming.
  *
  * Props:
  *   value      – local datetime string 'YYYY-MM-DDTHH:mm' (or '')
  *   onChange   – (localDatetimeString) => void
  *   label      – string
  *   required   – bool
- *   minDate    – Date | null  (only the date part is enforced)
+ *   minDate    – Date | null
  *   icon       – 'calendar' (default) | 'clock'
  */
 export default function DateTimePicker({
@@ -21,28 +27,57 @@ export default function DateTimePicker({
   minDate = null,
   icon = 'calendar',
 }) {
-  // Split 'YYYY-MM-DDTHH:mm' into date and time parts
+  const inputRef = useRef(null);
-  const [datePart, timePart] = value ? value.split('T') : ['', ''];
+  const fpRef = useRef(null);
 
-  const handleDateChange = (e) => {
+  useEffect(() => {
-    const d = e.target.value; // YYYY-MM-DD
+    if (!inputRef.current) return;
-    const t = timePart || '09:00';
-    onChange(d ? `${d}T${t}` : '');
-  };
 
-  const handleTimeChange = (e) => {
+    fpRef.current = flatpickr(inputRef.current, {
-    const t = e.target.value; // HH:mm
+      enableTime: true,
-    const d = datePart || new Date().toISOString().slice(0, 10);
+      time_24hr: true,
-    onChange(t ? `${d}T${t}` : '');
+      dateFormat: 'd.m.Y  H:i',
-  };
+      minuteIncrement: 15,
+      minDate: minDate || undefined,
+      defaultDate: value || undefined,
+      appendTo: document.body,       // portal to body → never clipped
+      static: false,
+      onChange: (selectedDates) => {
+        if (selectedDates.length === 0) { onChange(''); return; }
+        const d = selectedDates[0];
+        const y = d.getFullYear();
+        const mo = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        const h = String(d.getHours()).padStart(2, '0');
+        const mi = String(d.getMinutes()).padStart(2, '0');
+        onChange(`${y}-${mo}-${day}T${h}:${mi}`);
+      },
+    });
+
+    return () => fpRef.current?.destroy();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Sync value from outside
+  useEffect(() => {
+    if (!fpRef.current) return;
+    const current = fpRef.current.selectedDates[0];
+    const incoming = value ? new Date(value) : null;
+    // Only setDate if actually different (avoid loops)
+    if (incoming && (!current || Math.abs(incoming - current) > 60000)) {
+      fpRef.current.setDate(incoming, false);
+    } else if (!incoming && current) {
+      fpRef.current.clear(false);
+    }
+  }, [value]);
+
+  // Sync minDate
+  useEffect(() => {
+    if (!fpRef.current) return;
+    fpRef.current.set('minDate', minDate || undefined);
+  }, [minDate]);
 
   const Icon = icon === 'clock' ? Clock : CalendarIcon;
 
-  // Format minDate to YYYY-MM-DD for the native input
-  const minDateStr = minDate
-    ? `${minDate.getFullYear()}-${String(minDate.getMonth() + 1).padStart(2, '0')}-${String(minDate.getDate()).padStart(2, '0')}`
-    : undefined;
-
   return (
     <div>
       {label && (
@@ -50,28 +85,16 @@ export default function DateTimePicker({
           {label}{required && ' *'}
         </label>
       )}
-      <div className="flex gap-2">
+      <div className="relative">
-        <div className="relative flex-1">
+        <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-[1]" />
-          <CalendarIcon size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none" />
+        <input
-          <input
+          ref={inputRef}
-            type="date"
+          type="text"
-            value={datePart}
+          required={required}
-            onChange={handleDateChange}
+          readOnly
-            min={minDateStr}
+          placeholder="Datum & Uhrzeit wählen…"
-            required={required}
+          className="input-field pl-9 text-sm w-full cursor-pointer"
-            className="input-field pl-8 text-sm w-full"
+        />
-          />
-        </div>
-        <div className="relative w-[7rem]">
-          <Clock size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none" />
-          <input
-            type="time"
-            value={timePart}
-            onChange={handleTimeChange}
-            required={required}
-            className="input-field pl-8 text-sm w-full"
-          />
-        </div>
       </div>
     </div>
   );

src/index.css

@@ -741,10 +741,219 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════
-   NATIVE DATE/TIME INPUTS  —  themed via CSS variables + color-scheme
+   FLATPICKR THEMED OVERRIDES  —  fully driven by CSS variables
    ═══════════════════════════════════════════════════════════════ */
-input[type="date"],
+
-input[type="time"] {
+/* Calendar container — appended to body */
-  font-variant-numeric: tabular-nums;
+.flatpickr-calendar {
+  background: var(--card-bg) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 0.75rem !important;
+  box-shadow: 0 10px 25px -5px var(--shadow-color), 0 4px 10px -6px var(--shadow-color) !important;
+  font-family: inherit !important;
+  color: var(--text-primary) !important;
+  z-index: 9999 !important;
+  overflow: hidden;
+}
+
+.flatpickr-calendar::before,
+.flatpickr-calendar::after {
+  display: none !important;  /* hide arrow */
+}
+
+/* ── Month navigation ─────────────────────────────────────────── */
+.flatpickr-months {
+  background: var(--bg-secondary) !important;
+  border-bottom: 1px solid var(--border) !important;
+  padding: 0.25rem 0 !important;
+}
+
+.flatpickr-months .flatpickr-month {
+  background: transparent !important;
+  color: var(--text-primary) !important;
+  height: 2.25rem !important;
+}
+
+.flatpickr-current-month {
+  font-size: 0.875rem !important;
+  font-weight: 600 !important;
+  color: var(--text-primary) !important;
+  padding-top: 0.375rem !important;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  background: var(--bg-secondary) !important;
+  color: var(--text-primary) !important;
+  border: none !important;
+  font-weight: 600 !important;
+  font-size: 0.875rem !important;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months option {
+  background: var(--card-bg) !important;
+  color: var(--text-primary) !important;
+}
+
+.flatpickr-current-month input.cur-year {
+  color: var(--text-primary) !important;
+  font-weight: 600 !important;
+  font-size: 0.875rem !important;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  color: var(--text-secondary) !important;
+  fill: var(--text-secondary) !important;
+  padding: 0.375rem 0.625rem !important;
+  transition: color 0.15s !important;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: var(--text-primary) !important;
+  fill: var(--text-primary) !important;
+}
+
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  fill: inherit !important;
+  width: 12px !important;
+  height: 12px !important;
+}
+
+/* ── Day names row ────────────────────────────────────────────── */
+.flatpickr-weekdays {
+  background: var(--bg-secondary) !important;
+  border-bottom: 1px solid var(--border) !important;
+  padding: 0.125rem 0 !important;
+}
+
+span.flatpickr-weekday {
+  color: var(--text-secondary) !important;
+  font-size: 0.6875rem !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+}
+
+/* ── Days grid ────────────────────────────────────────────────── */
+.flatpickr-days {
+  border: none !important;
+}
+
+.dayContainer {
+  padding: 0.25rem !important;
+  min-width: 15.5rem !important;
+  max-width: 15.5rem !important;
+}
+
+.flatpickr-day {
+  color: var(--text-primary) !important;
+  border: none !important;
+  border-radius: 0.375rem !important;
+  font-size: 0.8125rem !important;
+  line-height: 2.25rem !important;
+  height: 2.25rem !important;
+  max-width: 2.25rem !important;
+  transition: background 0.12s, color 0.12s !important;
+}
+
+.flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
+  background: var(--hover-bg) !important;
+  border: none !important;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.selected:hover {
+  background: var(--accent) !important;
+  color: var(--accent-text) !important;
+  border: none !important;
+  font-weight: 600 !important;
+}
+
+.flatpickr-day.today:not(.selected) {
+  font-weight: 700 !important;
+  color: var(--accent) !important;
+  border: none !important;
+  position: relative !important;
+}
+
+.flatpickr-day.today:not(.selected)::after {
+  content: '';
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+  color: var(--text-secondary) !important;
+  opacity: 0.4 !important;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  color: var(--text-secondary) !important;
+  opacity: 0.3 !important;
+  cursor: not-allowed !important;
+}
+
+/* ── Time picker ──────────────────────────────────────────────── */
+.flatpickr-time {
+  border-top: 1px solid var(--border) !important;
+  background: var(--bg-secondary) !important;
+  max-height: none !important;
+  height: auto !important;
+}
+
+.flatpickr-time input {
+  color: var(--text-primary) !important;
+  background: transparent !important;
+  font-size: 0.9375rem !important;
+  font-weight: 600 !important;
+  font-variant-numeric: tabular-nums !important;
+}
+
+.flatpickr-time input:hover,
+.flatpickr-time input:focus {
+  background: var(--hover-bg) !important;
+  border-radius: 0.375rem !important;
+}
+
+.flatpickr-time .flatpickr-time-separator {
+  color: var(--text-secondary) !important;
+  font-weight: 600 !important;
+}
+
+.flatpickr-time .flatpickr-am-pm {
+  color: var(--text-primary) !important;
+  background: transparent !important;
+}
+
+.flatpickr-time .numInputWrapper span {
+  border: none !important;
+}
+
+.flatpickr-time .numInputWrapper span.arrowUp::after {
+  border-bottom-color: var(--text-secondary) !important;
+}
+
+.flatpickr-time .numInputWrapper span.arrowDown::after {
+  border-top-color: var(--text-secondary) !important;
+}
+
+.flatpickr-time .numInputWrapper:hover span.arrowUp::after {
+  border-bottom-color: var(--text-primary) !important;
+}
+
+.flatpickr-time .numInputWrapper:hover span.arrowDown::after {
+  border-top-color: var(--text-primary) !important;
 }