# Worklog Timesheet block

> Project delivery dashboard with tabbed header and weekly per-person worklog timesheet grid

Delivery workspace: tabbed header with breadcrumb and collaborator avatars, account summary cards, a filterable weekly worklog timesheet DataGrid with week navigation, integration cards and Empty tab states. ReUI Frame, DataGrid, Badge; shadcn Tabs.

- Type: Pro block
- Category: [Dashboard](https://web.dev.reui.io/blocks/application/dashboard.md)
- Page: https://web.dev.reui.io/blocks/application/dashboard/dashboard-3
- MCP: `get_block("dashboard-3")`
- Built with: Avatar, Badge, Breadcrumb, Button, Button Group, Calendar, Data Grid, Dialog, Dropdown Menu, Empty, Field, Frame, Icon Stack, Input, Input Group, Item, Popover, Select, Separator, Tabs, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Hours logged per person against a weekly target, with people search, team, target and billable filters, week stepping and a New Log form

## Agent notes

- Replace `TIMESHEET_PEOPLE`, the `people` seed in `Navbar`, and `DEFAULT_WEEK_START`, the Mar 23, 2026 week the grid opens on; unlogged days show `EMPTY_ENTRY`
- Nothing persists: `handleCreateLog` edits local `people` state, and `handleShare`, `handleNewBrief`, `handleDigestChange` and `useActivatedIds` fire a `toast`
- Files and Reports render `EMPTY_TAB_STATES` placeholders whose buttons fire a `toast`; mount your files and reports panels in `Navbar`

## When not to use

- Only the top bar with breadcrumb, line tabs and a collaborator avatar stack: use [Project Workspace](https://web.dev.reui.io/blocks/application/navbar/navbar-1.md) (`get_block("navbar-1")`)
- Capacity charts above an exception queue with selectable rows: use [Fulfillment Exceptions](https://web.dev.reui.io/blocks/application/dashboard/dashboard-1.md) (`get_block("dashboard-1")`)

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

```bash
npx shadcn@latest add @reui/dashboard-3
```

## About Dashboard blocks

### When to use

- A full page overview: a header, a row of summary tiles, then a trend chart, a work list or both
- A team home for fulfillment, product modules, timesheets, staffing, calls, security, revenue or payouts

### When not to use

- One trend panel to drop into a page layout you already have: use the [Area Chart blocks](https://web.dev.reui.io/blocks/chart/area-chart.md)
- A strip of KPI tiles on its own, with nothing under it: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)
- Product usage reporting on activation, cohorts, events or experiments: use the [Analytics blocks](https://web.dev.reui.io/blocks/solutions/analytics.md)

### Agent notes

- Each block sets its own `min-h-svh` wrapper, padding and max width in page.tsx, its root component or both; strip them inside an app shell

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.