## Time Tracker (S—317)

Track time per project: one running timer at a time, switch projects in a tap, today’s entries and a daily total.

- URL: https://sundaeui.dev/components/time-tracker
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/time-tracker.json`
- Tags: projects, timer, time-tracking, timesheet, billing, productivity

Starting a project stops whatever was running and logs it as an entry. The running row shows a live clock; the total bar splits the day by project.
Entries can be deleted; the daily goal line says how far you are from it.

### Usage

```tsx
import { TimeTracker } from '@/components/sundae/time-tracker'

<TimeTracker />
```

### Props

- `projects` (`{ id: string; name: string }[]`, required): Projects.
- `entries` (`{ project: string; secs: number }[]`): Logged today.
- `goal` (`number`, default `6`): Daily goal in hours.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Freelance and agency tools, personal productivity.

### When not to use

- Payroll time clocks with approvals.

### Accessibility

- Each project row has a start/stop button labelled with the project.
- The running time is a timer; totals are text.
- Reduced motion removes the movement and keeps every state change.