From b541fcd11b2bd35cd05e9b0b608c795d1606a558 Mon Sep 17 00:00:00 2001
From: "T.Landgraf" <T.Landgraf@profi-ag.de>
Date: Fri, 14 Aug 2026 08:13:05 +0200
Subject: [PATCH] Add overtime calculation and display to the App component

---
 src/App.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6aa6cde..cd3672b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ function App() {
     const [workEnd, setWorkEnd] = React.useState<string>('');
     const [breakMins, setBreakMins] = React.useState<number>(0);
     const [workedHrs, setWorkedHrs] = React.useState<number>(0);
+    const [overtimeMinutes, setOvertimeMinutes] = React.useState<number>(0);
 
     const getHourDiff = () => {
         const start = toMinutes(workStart);
@@ -36,6 +37,12 @@ function App() {
         return fromMinutes(start + 8 * 60 + breakMins);
     }
 
+    const handleSave = () => {
+        const hours = getHourDiff();
+        setWorkedHrs(hours);
+        setOvertimeMinutes(Math.round((hours - 8) * 60));
+    }
+
     return (
         <Center>
             <Stack>
@@ -68,12 +75,21 @@ function App() {
                     onChange={(val) => setBreakMins(Number(val))}
                 />
 
-                <Button onClick={() => setWorkedHrs(getHourDiff())}>
+                <Button onClick={handleSave}>
                     Speichern
                 </Button>
 
                 <Text>Gearbeitete Stunden heute: {workedHrs.toFixed(2)}</Text>
                 <Text>Wann du gehen kannst für 8 Stunden: {getWorkEndTime()}</Text>
+                {overtimeMinutes === 0 && (
+                    <Text>Du hast genau 8 Stunden gearbeitet.</Text>
+                )}
+                {overtimeMinutes > 0 && (
+                    <Text c="yellow">Überstunden: {overtimeMinutes} Minuten</Text>
+                )}
+                {overtimeMinutes < 0 && (
+                    <Text>Fehlende Minuten für 8 Stunden: {-overtimeMinutes} Minuten</Text>
+                )}
             </Stack>
         </Center>
     );