include the currently running time entry in the calendar header

Author: Onatcer

resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue

@@ -177,16 +177,23 @@ const events = computed(() => {
 // Daily totals used in day header
 const dailyTotals = computed(() => {
     const totals: Record<string, number> = {};
-    props.timeEntries
-        .filter((entry) => entry.end !== null)
-        .forEach((entry) => {
-            const date = getDayJsInstance()(entry.start).format('YYYY-MM-DD');
-            const duration = getDayJsInstance()(entry.end!).diff(
+    props.timeEntries.forEach((entry) => {
+        const date = getDayJsInstance()(entry.start).format('YYYY-MM-DD');
+        let duration: number;
+
+        if (entry.end !== null) {
+            // Completed entry
+            duration = getDayJsInstance()(entry.end).diff(
                 getDayJsInstance()(entry.start),
                 'minutes'
             );
-            totals[date] = (totals[date] || 0) + duration;
-        });
+        } else {
+            // Running entry - use current time
+            duration = currentTime.value.diff(getDayJsInstance()(entry.start), 'minutes');
+        }
+
+        totals[date] = (totals[date] || 0) + duration;
+    });
     return totals;
 });
 

resources/js/packages/ui/styles.css

@@ -183,7 +183,7 @@ body {
         --popover: var(--theme-color-card-background);
         --popover-foreground: var(--color-text-primary);
         --primary: var(--color-bg-primary);
-        --primary-foreground: var(--theme-color-button-primary-text);
+        --primary-foreground: var(--color-text-primary);
         --secondary: var(--color-bg-secondary);
         --secondary-foreground: var(--color-text-primary);
         --muted: var(--color-bg-tertiary);
@@ -210,7 +210,7 @@ body {
         --popover: var(--theme-color-card-background);
         --popover-foreground: var(--color-text-primary);
         --primary: var(--color-bg-primary);
-        --primary-foreground: var(--theme-color-button-primary-text);
+        --primary-foreground: var(--color-text-primary);
         --secondary: var(--color-bg-secondary);
         --secondary-foreground: var(--color-text-primary);
         --muted: var(--color-bg-tertiary);