Refactor StatusBox component to improve end time calculations using server data. Update logic to handle elapsed time accurately, including pause states, and enhance display of currently worked hours. Adjust formatting for time outputs to ensure clarity in the user interface.

frontend/src/components/StatusBox.vue

@@ -252,15 +252,35 @@ const updateOpenTime = () => {
       // Ausgabe ohne zusätzlichen Pausen-Hinweis; Zeit stammt bereits inkl. Pausen aus Backend
       regularEndTime.value = `${endHours.toString().padStart(2, '0')}:${endMinutes.toString().padStart(2, '0')}:${endSeconds.toString().padStart(2, '0')} Uhr`
 
-      // Override: Berechne Normales Arbeitsende deterministisch aus Start + 8h + fehlende Pausen
+      // Override: Berechne Normales Arbeitsende aus Server "open" Zeit
-      if (workStartTime.value) {
+      // Nur überschreiben wenn wir Server-Daten haben
-        const baseDailyMinutes = 8 * 60 // Fallback auf 8h
+      if (serverOpenTime.value && serverTimestamp.value) {
-        const endTs = workStartTime.value + (baseDailyMinutes + (missingBreakMinutes.value || 0)) * 60 * 1000
+        // Parse Server-Offen-Zeit
+        const openParts = serverOpenTime.value.split(':')
+        const openSeconds = parseInt(openParts[0]) * 3600 + parseInt(openParts[1]) * 60 + parseInt(openParts[2] || 0)
+        
+        // Berechne vergangene Zeit seit Server-Timestamp
+        const now = Date.now()
+        const elapsedMs = now - serverTimestamp.value
+        let elapsedSeconds = Math.floor(elapsedMs / 1000)
+        
+        // Wenn in Pause, zähle die Zeit nicht
+        if (currentState.value === 'start pause') {
+          elapsedSeconds = 0
+        }
+        
+        const remainingSeconds = openSeconds - elapsedSeconds
+        
+        if (remainingSeconds > 0) {
+          const endTs = now + (remainingSeconds * 1000)
           const endDt = new Date(endTs)
           const eh = endDt.getHours()
           const em = endDt.getMinutes()
           const es = endDt.getSeconds()
           regularEndTime.value = `${eh.toString().padStart(2, '0')}:${em.toString().padStart(2, '0')}:${es.toString().padStart(2, '0')} Uhr`
+        } else {
+          regularEndTime.value = 'Erreicht'
+        }
       }
     } else {
       openTime.value = 'Arbeitsende erreicht'
@@ -381,9 +401,14 @@ onBeforeUnmount(() => {
 })
 
 const displayRows = computed(() => {
+  // Verwende Server-Wert für "Derzeit gearbeitet" wenn verfügbar (zeigt gesamte Tagesarbeitszeit)
+  const workedDisplay = (stats.value?.currentlyWorked && stats.value.currentlyWorked !== '—') 
+    ? stats.value.currentlyWorked + ' h'
+    : (currentlyWorkedTime.value === '—' ? currentlyWorkedTime.value : currentlyWorkedTime.value + ' h');
+  
   const rows = {
-    'Derzeit gearbeitet': currentlyWorkedTime.value === '—' ? currentlyWorkedTime.value : currentlyWorkedTime.value + ' h',
+    'Derzeit gearbeitet': workedDisplay,
-    'Offen': openTime.value === '—' ? openTime.value : openTime.value + ' h',
+    'Offen': openTime.value === '—' || openTime.value.includes('erreicht') ? openTime.value : openTime.value + ' h',
     'Normales Arbeitsende': regularEndTime.value // Verwende berechneten Wert (hat bereits "Uhr")
   }
   
@@ -421,8 +446,8 @@ const displayRows = computed(() => {
         const displayValue = isNegative ? val.substring(1) + ' h' : val + ' h'; // Entferne Minus-Zeichen, füge " h" hinzu
         rows[displayLabel] = displayValue;
       } else if (key === 'adjustedEndTodayGeneral' || key === 'adjustedEndTodayWeek') {
-        // Füge " Uhr" zu Uhrzeiten hinzu
+        // Füge " Uhr" zu Uhrzeiten hinzu (außer bei "Arbeitsende erreicht")
-        rows[label] = val + ' Uhr';
+        rows[label] = val.includes('erreicht') ? val : val + ' Uhr';
       } else if (key === 'weekWorktime' || key === 'openForWeek' || key === 'nonWorkingHours') {
         // Füge " h" zu Zeiten hinzu (außer bei "—")
         rows[label] = val === '—' ? val : val + ' h';