diff --git a/apps/web/src/components/time/TimelineSection.tsx b/apps/web/src/components/time/TimelineSection.tsx index 7fc81a9..a791800 100644 --- a/apps/web/src/components/time/TimelineSection.tsx +++ b/apps/web/src/components/time/TimelineSection.tsx @@ -7,6 +7,7 @@ import { Card } from '../ui/Card'; import { Button } from '../ui/Button'; import { Modal } from '../ui/Modal'; import { formatDuration, formatDurationCompact } from '../../lib/format-duration'; +import { usePresenceSeconds } from '../../lib/use-presence-seconds'; import { TIME_CATEGORIES, type TimeCategory } from '../../lib/time-categories'; const CATEGORY_LABEL: Record = Object.fromEntries( @@ -30,6 +31,10 @@ export function TimelineSection() { const todayQuery = trpc.dayEntry.today.useQuery(); const [manualOpen, setManualOpen] = useState(false); const [editing, setEditing] = useState(null); + const presenceSeconds = usePresenceSeconds( + todayQuery.data?.entry?.checkedInAt, + todayQuery.data?.entry?.checkedOutAt, + ); if (listQuery.isPending) return null; // Aufsteigend sortieren: Vormittag oben, Abend unten. @@ -45,7 +50,13 @@ export function TimelineSection() {

Zeit heute

- Gesamt: {formatDurationCompact(totalSeconds)} + Getrackt: {formatDurationCompact(totalSeconds)} + {presenceSeconds !== null && ( + <> + {' · '}Anwesend:{' '} + {formatDurationCompact(presenceSeconds)} + + )}

+ <> + {presenceSeconds !== null && ( + + · anwesend seit{' '} + {formatDurationCompact(presenceSeconds)} + + )} + + )}