refactoring: TypeScript migration, security fixes,

client/src/components/Vacay/VacayCalendar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback } from 'react'
+import { useMemo, useState, useCallback } from 'react'
 import { useVacayStore } from '../../store/vacayStore'
 import { useTranslation } from '../../i18n'
 import { isWeekend } from './holidays'

client/src/components/Vacay/VacayMonthCard.tsx

@@ -1,16 +1,29 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from '../../i18n'
 import { isWeekend } from './holidays'
+import type { HolidaysMap, VacayEntry } from '../../types'
 
 const WEEKDAYS_EN = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
 const WEEKDAYS_DE = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
 const MONTHS_EN = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
 const MONTHS_DE = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
 
+interface VacayMonthCardProps {
+  year: number
+  month: number
+  holidays: HolidaysMap
+  companyHolidaySet: Set<string>
+  companyHolidaysEnabled?: boolean
+  entryMap: Record<string, VacayEntry[]>
+  onCellClick: (date: string) => void
+  companyMode: boolean
+  blockWeekends: boolean
+}
+
 export default function VacayMonthCard({
   year, month, holidays, companyHolidaySet, companyHolidaysEnabled = true, entryMap,
   onCellClick, companyMode, blockWeekends
-}) {
+}: VacayMonthCardProps) {
   const { language } = useTranslation()
   const weekdays = language === 'de' ? WEEKDAYS_DE : WEEKDAYS_EN
   const monthNames = language === 'de' ? MONTHS_DE : MONTHS_EN

client/src/components/Vacay/VacayPersons.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom'
+import { useState, useEffect } from 'react'
+import DOM from 'react-dom'
 import { UserPlus, Unlink, Check, Loader2, Clock, X } from 'lucide-react'
 import { useVacayStore } from '../../store/vacayStore'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
+import { getApiErrorMessage } from '../../types'
 import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import apiClient from '../../api/client'
@@ -46,8 +48,8 @@ export default function VacayPersons() {
       toast.success(t('vacay.inviteSent'))
       setShowInvite(false)
       setSelectedInviteUser(null)
-    } catch (err) {
-      toast.error(err.response?.data?.error || t('vacay.inviteError'))
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('vacay.inviteError')))
     } finally {
       setInviting(false)
     }

client/src/components/Vacay/VacaySettings.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { MapPin, CalendarOff, AlertCircle, Building2, Unlink, ArrowRightLeft, Globe } from 'lucide-react'
 import { useVacayStore } from '../../store/vacayStore'
 import { useTranslation } from '../../i18n'
@@ -6,7 +6,11 @@ import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import apiClient from '../../api/client'
 
-export default function VacaySettings({ onClose }) {
+interface VacaySettingsProps {
+  onClose: () => void
+}
+
+export default function VacaySettings({ onClose }: VacaySettingsProps) {
   const { t } = useTranslation()
   const toast = useToast()
   const { plan, updatePlan, isFused, dissolve, users } = useVacayStore()
@@ -192,7 +196,15 @@ export default function VacaySettings({ onClose }) {
   )
 }
 
-function SettingToggle({ icon: Icon, label, hint, value, onChange }) {
+interface SettingToggleProps {
+  icon: React.ComponentType<{ size?: number; className?: string; style?: React.CSSProperties }>
+  label: string
+  hint: string
+  value: boolean
+  onChange: (value: boolean) => void
+}
+
+function SettingToggle({ icon: Icon, label, hint, value, onChange }: SettingToggleProps) {
   return (
     <div className="flex items-center justify-between gap-3">
       <div className="flex items-center gap-2 min-w-0">

client/src/components/Vacay/VacayStats.tsx

@@ -1,8 +1,16 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Briefcase, Pencil } from 'lucide-react'
 import { useVacayStore } from '../../store/vacayStore'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
+import type { VacayStat } from '../../types'
+
+interface VacayStatExtended extends VacayStat {
+  username: string
+  avatar_url: string | null
+  color: string | null
+  total_available: number
+}
 
 export default function VacayStats() {
   const { t } = useTranslation()
@@ -41,7 +49,16 @@ export default function VacayStats() {
   )
 }
 
-function StatCard({ stat: s, isMe, canEdit, selectedYear, onSave, t }) {
+interface StatCardProps {
+  stat: VacayStatExtended
+  isMe: boolean
+  canEdit: boolean
+  selectedYear: number
+  onSave: (userId: number, year: number, days: number) => Promise<void>
+  t: (key: string) => string
+}
+
+function StatCard({ stat: s, isMe, canEdit, selectedYear, onSave, t }: StatCardProps) {
   const [editing, setEditing] = useState(false)
   const [localDays, setLocalDays] = useState(s.vacation_days)
   const pct = s.total_available > 0 ? Math.min(100, (s.used / s.total_available) * 100) : 0

client/src/components/Vacay/holidays.js

@@ -1,146 +0,0 @@
-// German public holidays (Feiertage) calculation per Bundesland
-// Includes fixed and Easter-dependent movable holidays
-
-const BUNDESLAENDER = {
-  BW: 'Baden-Württemberg',
-  BY: 'Bayern',
-  BE: 'Berlin',
-  BB: 'Brandenburg',
-  HB: 'Bremen',
-  HH: 'Hamburg',
-  HE: 'Hessen',
-  MV: 'Mecklenburg-Vorpommern',
-  NI: 'Niedersachsen',
-  NW: 'Nordrhein-Westfalen',
-  RP: 'Rheinland-Pfalz',
-  SL: 'Saarland',
-  SN: 'Sachsen',
-  ST: 'Sachsen-Anhalt',
-  SH: 'Schleswig-Holstein',
-  TH: 'Thüringen',
-};
-
-// Gauss Easter algorithm
-function easterSunday(year) {
-  const a = year % 19;
-  const b = Math.floor(year / 100);
-  const c = year % 100;
-  const d = Math.floor(b / 4);
-  const e = b % 4;
-  const f = Math.floor((b + 8) / 25);
-  const g = Math.floor((b - f + 1) / 3);
-  const h = (19 * a + b - d - g + 15) % 30;
-  const i = Math.floor(c / 4);
-  const k = c % 4;
-  const l = (32 + 2 * e + 2 * i - h - k) % 7;
-  const m = Math.floor((a + 11 * h + 22 * l) / 451);
-  const month = Math.floor((h + l - 7 * m + 114) / 31);
-  const day = ((h + l - 7 * m + 114) % 31) + 1;
-  return new Date(year, month - 1, day);
-}
-
-function addDays(date, days) {
-  const d = new Date(date);
-  d.setDate(d.getDate() + days);
-  return d;
-}
-
-function fmt(date) {
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, '0');
-  const d = String(date.getDate()).padStart(2, '0');
-  return `${y}-${m}-${d}`;
-}
-
-export function getHolidays(year, bundesland = 'NW') {
-  const easter = easterSunday(year);
-  const holidays = {};
-
-  // Fixed holidays (nationwide)
-  holidays[`${year}-01-01`] = 'Neujahr';
-  holidays[`${year}-05-01`] = 'Tag der Arbeit';
-  holidays[`${year}-10-03`] = 'Tag der Deutschen Einheit';
-  holidays[`${year}-12-25`] = '1. Weihnachtsfeiertag';
-  holidays[`${year}-12-26`] = '2. Weihnachtsfeiertag';
-
-  // Easter-dependent (nationwide)
-  holidays[fmt(addDays(easter, -2))] = 'Karfreitag';
-  holidays[fmt(addDays(easter, 1))] = 'Ostermontag';
-  holidays[fmt(addDays(easter, 39))] = 'Christi Himmelfahrt';
-  holidays[fmt(addDays(easter, 50))] = 'Pfingstmontag';
-
-  // State-specific
-  const bl = bundesland.toUpperCase();
-
-  // Heilige Drei Könige (6. Jan) — BW, BY, ST
-  if (['BW', 'BY', 'ST'].includes(bl)) {
-    holidays[`${year}-01-06`] = 'Heilige Drei Könige';
-  }
-
-  // Internationaler Frauentag (8. März) — BE, MV
-  if (['BE', 'MV'].includes(bl)) {
-    holidays[`${year}-03-08`] = 'Internationaler Frauentag';
-  }
-
-  // Fronleichnam — BW, BY, HE, NW, RP, SL, SN (teilweise), TH (teilweise)
-  if (['BW', 'BY', 'HE', 'NW', 'RP', 'SL'].includes(bl)) {
-    holidays[fmt(addDays(easter, 60))] = 'Fronleichnam';
-  }
-
-  // Mariä Himmelfahrt (15. Aug) — SL, BY (teilweise)
-  if (['SL'].includes(bl)) {
-    holidays[`${year}-08-15`] = 'Mariä Himmelfahrt';
-  }
-
-  // Weltkindertag (20. Sep) — TH
-  if (bl === 'TH') {
-    holidays[`${year}-09-20`] = 'Weltkindertag';
-  }
-
-  // Reformationstag (31. Okt) — BB, HB, HH, MV, NI, SN, ST, SH, TH
-  if (['BB', 'HB', 'HH', 'MV', 'NI', 'SN', 'ST', 'SH', 'TH'].includes(bl)) {
-    holidays[`${year}-10-31`] = 'Reformationstag';
-  }
-
-  // Allerheiligen (1. Nov) — BW, BY, NW, RP, SL
-  if (['BW', 'BY', 'NW', 'RP', 'SL'].includes(bl)) {
-    holidays[`${year}-11-01`] = 'Allerheiligen';
-  }
-
-  // Buß- und Bettag — SN (Mittwoch vor dem 23. November)
-  if (bl === 'SN') {
-    const nov23 = new Date(year, 10, 23);
-    let bbt = new Date(nov23);
-    while (bbt.getDay() !== 3) bbt.setDate(bbt.getDate() - 1);
-    holidays[fmt(bbt)] = 'Buß- und Bettag';
-  }
-
-  return holidays;
-}
-
-export function isWeekend(dateStr) {
-  const d = new Date(dateStr + 'T00:00:00');
-  const day = d.getDay();
-  return day === 0 || day === 6;
-}
-
-export function getWeekday(dateStr) {
-  const d = new Date(dateStr + 'T00:00:00');
-  return ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][d.getDay()];
-}
-
-export function getWeekdayFull(dateStr) {
-  const d = new Date(dateStr + 'T00:00:00');
-  return ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'][d.getDay()];
-}
-
-export function daysInMonth(year, month) {
-  return new Date(year, month, 0).getDate();
-}
-
-export function formatDate(dateStr) {
-  const d = new Date(dateStr + 'T00:00:00');
-  return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' });
-}
-
-export { BUNDESLAENDER };

client/src/components/Vacay/holidays.ts

@@ -0,0 +1,131 @@
+const BUNDESLAENDER: Record<string, string> = {
+  BW: 'Baden-Württemberg',
+  BY: 'Bayern',
+  BE: 'Berlin',
+  BB: 'Brandenburg',
+  HB: 'Bremen',
+  HH: 'Hamburg',
+  HE: 'Hessen',
+  MV: 'Mecklenburg-Vorpommern',
+  NI: 'Niedersachsen',
+  NW: 'Nordrhein-Westfalen',
+  RP: 'Rheinland-Pfalz',
+  SL: 'Saarland',
+  SN: 'Sachsen',
+  ST: 'Sachsen-Anhalt',
+  SH: 'Schleswig-Holstein',
+  TH: 'Thüringen',
+}
+
+function easterSunday(year: number): Date {
+  const a = year % 19
+  const b = Math.floor(year / 100)
+  const c = year % 100
+  const d = Math.floor(b / 4)
+  const e = b % 4
+  const f = Math.floor((b + 8) / 25)
+  const g = Math.floor((b - f + 1) / 3)
+  const h = (19 * a + b - d - g + 15) % 30
+  const i = Math.floor(c / 4)
+  const k = c % 4
+  const l = (32 + 2 * e + 2 * i - h - k) % 7
+  const m = Math.floor((a + 11 * h + 22 * l) / 451)
+  const month = Math.floor((h + l - 7 * m + 114) / 31)
+  const day = ((h + l - 7 * m + 114) % 31) + 1
+  return new Date(year, month - 1, day)
+}
+
+function addDays(date: Date, days: number): Date {
+  const d = new Date(date)
+  d.setDate(d.getDate() + days)
+  return d
+}
+
+function fmt(date: Date): string {
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+export function getHolidays(year: number, bundesland: string = 'NW'): Record<string, string> {
+  const easter = easterSunday(year)
+  const holidays: Record<string, string> = {}
+
+  holidays[`${year}-01-01`] = 'Neujahr'
+  holidays[`${year}-05-01`] = 'Tag der Arbeit'
+  holidays[`${year}-10-03`] = 'Tag der Deutschen Einheit'
+  holidays[`${year}-12-25`] = '1. Weihnachtsfeiertag'
+  holidays[`${year}-12-26`] = '2. Weihnachtsfeiertag'
+
+  holidays[fmt(addDays(easter, -2))] = 'Karfreitag'
+  holidays[fmt(addDays(easter, 1))] = 'Ostermontag'
+  holidays[fmt(addDays(easter, 39))] = 'Christi Himmelfahrt'
+  holidays[fmt(addDays(easter, 50))] = 'Pfingstmontag'
+
+  const bl = bundesland.toUpperCase()
+
+  if (['BW', 'BY', 'ST'].includes(bl)) {
+    holidays[`${year}-01-06`] = 'Heilige Drei Könige'
+  }
+
+  if (['BE', 'MV'].includes(bl)) {
+    holidays[`${year}-03-08`] = 'Internationaler Frauentag'
+  }
+
+  if (['BW', 'BY', 'HE', 'NW', 'RP', 'SL'].includes(bl)) {
+    holidays[fmt(addDays(easter, 60))] = 'Fronleichnam'
+  }
+
+  if (['SL'].includes(bl)) {
+    holidays[`${year}-08-15`] = 'Mariä Himmelfahrt'
+  }
+
+  if (bl === 'TH') {
+    holidays[`${year}-09-20`] = 'Weltkindertag'
+  }
+
+  if (['BB', 'HB', 'HH', 'MV', 'NI', 'SN', 'ST', 'SH', 'TH'].includes(bl)) {
+    holidays[`${year}-10-31`] = 'Reformationstag'
+  }
+
+  if (['BW', 'BY', 'NW', 'RP', 'SL'].includes(bl)) {
+    holidays[`${year}-11-01`] = 'Allerheiligen'
+  }
+
+  if (bl === 'SN') {
+    const nov23 = new Date(year, 10, 23)
+    const bbt = new Date(nov23)
+    while (bbt.getDay() !== 3) bbt.setDate(bbt.getDate() - 1)
+    holidays[fmt(bbt)] = 'Buß- und Bettag'
+  }
+
+  return holidays
+}
+
+export function isWeekend(dateStr: string): boolean {
+  const d = new Date(dateStr + 'T00:00:00')
+  const day = d.getDay()
+  return day === 0 || day === 6
+}
+
+export function getWeekday(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00')
+  return ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][d.getDay()]
+}
+
+export function getWeekdayFull(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00')
+  return ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'][d.getDay()]
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(year, month, 0).getDate()
+}
+
+export function formatDate(dateStr: string): string {
+  const d = new Date(dateStr + 'T00:00:00')
+  return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+export { BUNDESLAENDER }