# XWUITimesheet

A week of hours by item. Items run down the grid, seven days run across it, and every working day has an hour box (type `2.5`, `2,5` or `1:30`; the value snaps to a quarter hour and stops at 24). A day off, from the `workCalendar`, is hatched, shows a dash and takes no hours. Row totals, a totals row and a grand total follow every edit, the week's state shows as a pill (Draft, Submitted, Approved, Sent back) with a Submit week button, a `mode: 'both'` switch adds an Approvals queue with Approve and Send back, and a billing card shows what the approved hours become. `XWUITimeTracker` stays the per-task stopwatch; this is the grid you fill in and hand over.

It composes the shared work-management contracts: the status vocabulary, the work calendar (working week and holidays), `initialsOf` and `avatarTint` for people, Western digits unless `numberingSystem` says otherwise, and a second calendar line under each day with `secondaryCalendar`.

## Keyboard

Tab enters the grid once. Enter saves the box and drops to the next line, Escape puts the old value back, Up and Down move between lines, Left and Right move between days from the edge of the text (the order follows the grid's direction, so a mirrored grid goes the other way), and Ctrl+Home and Ctrl+End go to the first and last box. Days off and locked lines are skipped.

## Basic Usage

Three items over a Monday to Friday week. Without a `workCalendar` every day counts as worked and without `weekStart` the grid starts on the Monday of this week.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Three items, one week: an hour box per day, totals on both axes and Submit week.
```

## Work management timesheet

The plnx Timesheets screen: five items for the week of 27 Sep worked Sunday to Thursday (Friday and Saturday hatched), a draft with Submit week, the My week and Approvals switch with four people waiting, and the billing hand-off card. Under Arabic the days read in the Hijri calendar.

```example
file: examples/WorkManagement.ts
html: examples/WorkManagement.html
title: Work management timesheet
description: A week of hours by item with hatched days off, totals, draft and Submit week, an approvals queue and a billing card.
```

## Events

`data.onCellChange({ rowId, day, hours, previous })` runs when a box is committed; return `false` to refuse and the box goes back. `onSubmit()`, `onApprove(id)` and `onReject(id)` can refuse the same way. `onPeriodChange(direction, weekStart)` runs after `periodNavigation` moves the week, and `onViewChange(view)` when the switch changes. The same actions are public methods: `submit()`, `approve(id)`, `reject(id)`, `previousWeek()`, `nextWeek()`, `setView(view)`, `focusCell(rowId, dayIso)`, `getTotal()`.

```api
```