## Timesheet (S—418)

A weekly timesheet grid: hours per project per day, row and day totals, billable split and a target bar.

- URL: https://sundaeui.dev/components/timesheet
- Category: Forms & inputs · 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/timesheet.json`
- Tags: hours, grid, time-tracking, billable, timesheet, week

Each cell takes hours or h:mm; arrow keys move around the grid like a spreadsheet. Totals recalculate as you type.
Projects can be marked billable, and the footer shows billable hours, the weekly total against target and overtime.

### Usage

```tsx
import { Timesheet } from '@/components/sundae/timesheet'

<Timesheet />
```

### Props

- `target` (`number`, default `40`): Weekly hours target.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Agency and freelancer tools, payroll prep, HR portals.

### When not to use

- Live timers: use a time tracker.

### Accessibility

- Each cell input is named by project and day.
- Arrow keys move between cells; totals sit in a live region.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Arrow keys: Move between cells
- Enter: Move down a row