diff --git a/src/App.tsx b/src/App.tsx index 40a3656..aaa2216 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,8 @@ -import { SegmentedControl, Center, Stack, Button, Text, NumberInput } from '@mantine/core'; +import { SegmentedControl, Center, Stack, Button, Text, NumberInput, Space } from '@mantine/core'; import { TimePicker } from '@mantine/dates'; import * as React from 'react'; -type Workday = 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday'; +type Workday = 'Montag' | 'Dienstag' | 'Mittwoch' | 'Donnerstag' | 'Freitag'; interface DayRecord { start: string; @@ -15,9 +15,12 @@ interface DayRecord { type Records = Partial>; const STORAGE_KEY = 'workTrackerRecords'; +const CARRYOVER_KEY = 'workTrackerCarryover'; const DEFAULT_RECORD: DayRecord = { start: '', end: '', breakMins: 0, workedHrs: 0, overtimeMinutes: 0 }; +const WEEKDAYS: Workday[] = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag']; + const loadRecords = (): Records => { try { const raw = localStorage.getItem(STORAGE_KEY); @@ -27,6 +30,15 @@ const loadRecords = (): Records => { } }; +const loadCarryover = (): number => { + try { + const val = Number(localStorage.getItem(CARRYOVER_KEY)); + return Number.isFinite(val) ? val : 0; + } catch { + return 0; + } +}; + const toMinutes = (time: string): number | null => { const match = /^(\d{2}):(\d{2})$/.exec(time); if (!match) return null; @@ -42,6 +54,7 @@ const fromMinutes = (mins: number): string => { function App() { const [selectedDay, setSelectedDay] = React.useState('Monday'); const [records, setRecords] = React.useState(loadRecords); + const [carryoverMinutes, setCarryoverMinutes] = React.useState(loadCarryover); const record = records[selectedDay] ?? DEFAULT_RECORD; @@ -49,6 +62,10 @@ function App() { localStorage.setItem(STORAGE_KEY, JSON.stringify(records)); }, [records]); + React.useEffect(() => { + localStorage.setItem(CARRYOVER_KEY, String(carryoverMinutes)); + }, [carryoverMinutes]); + const updateRecord = (patch: Partial) => { setRecords((prev) => ({ ...prev, @@ -64,14 +81,14 @@ function App() { } const getWeeklyBalance = () => { - const days: Workday[] = ['Monday', 'Tuesday', 'Wednesday', 'Thursday']; - return days.reduce((sum, day) => sum + (records[day]?.overtimeMinutes ?? 0), 0); + const days: Workday[] = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag']; + return days.reduce((sum, day) => sum + (records[day]?.overtimeMinutes ?? 0), 0) + carryoverMinutes; } const getWorkEndTime = () => { const start = toMinutes(record.start); - if (start === null) return '—'; - const balance = selectedDay === 'Friday' ? getWeeklyBalance() : 0; + if (start === null) return '-'; + const balance = selectedDay === 'Freitag' ? getWeeklyBalance() : 0; return fromMinutes(start + 8 * 60 - balance + record.breakMins); } @@ -80,16 +97,21 @@ function App() { updateRecord({ workedHrs: hours, overtimeMinutes: Math.round((hours - 8) * 60) }); } - const handleReset = () => { - localStorage.removeItem(STORAGE_KEY); + const handleResetWorkdays = () => { + const totalOvertime = WEEKDAYS.reduce((sum, day) => sum + (records[day]?.overtimeMinutes ?? 0), 0) + carryoverMinutes; + setCarryoverMinutes(totalOvertime); setRecords({}); } + const handleResetOvertime = () => { + setCarryoverMinutes(0); + } + return ( -
+
setSelectedDay(value as Workday)} className={"mt-2"} /> @@ -117,26 +139,33 @@ function App() { /> Gearbeitete Stunden heute: {record.workedHrs.toFixed(2)} - {selectedDay === 'Friday' && ( - Übertragen aus Montag bis Donnerstag: {getWeeklyBalance()} Minuten + {carryoverMinutes !== 0 && ( + Übernommene Überstunden aus Vorwoche: {carryoverMinutes} Minuten + )} + {selectedDay === 'Freitag' && ( + Übertragen aus Montag bis Donnerstag (inkl. Vorwoche): {getWeeklyBalance()} Minuten )} Wann du gehen kannst für 8 Stunden: {getWorkEndTime()} - {record.overtimeMinutes === 0 && ( + {record.start && record.end && record.overtimeMinutes === 0 && ( Du hast genau 8 Stunden gearbeitet. )} - {record.overtimeMinutes > 0 && ( + {record.start && record.end && record.overtimeMinutes > 0 && ( Überstunden: {record.overtimeMinutes} Minuten )} - {record.overtimeMinutes < 0 && ( + {record.start && record.end && record.overtimeMinutes < 0 && ( Fehlende Minuten für 8 Stunden: {-record.overtimeMinutes} Minuten )} - +
diff --git a/src/main.tsx b/src/main.tsx index b8aa7f1..58bce79 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,4 @@ import '@mantine/core/styles.css'; -import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx'