L Ledger Timesheets UI mockup
EV · single user
Design direction · v1

Ledger Timesheets — clickable UI mockup

Static HTML, CSS and JavaScript with invented data, built to steer design and functional choices before any .NET or React code exists. Every number on every screen is mock data. Nothing here is a schema, an API contract, or a promise about implementation.

Open decisions this mockup deliberately takes a side on

Screens

The one state machine every screen is built around

One Monthly Timesheet, three states, one way out

domain-model.md §3
DraftEverything editable. Quick Fill lives here.
Exportneeds invoice reference
ExportedArtifact exists. Edits need a reason.
Lockexported only
LockedRead-only. Says nothing about delivery.
Amend (Exported → Draft) and Unlock (Locked → Draft) — both require an Amendment Reason, both mark the current artifact superseded. There is no generic “set status”, and no delete in any state.

Copy never says “final”, “sent” or “closed”: the source's Avoid list for Locked. There is no rate, subtotal or VAT anywhere either — totals are durations and day equivalents only.

Words the interface uses

FUNCTIONAL_PLAN.md glossary
SayNever say
Workspace, Workspace Preferencestenant, organization account
Client, Archived clientcustomer, account, deleted client
Monthly Timesheet · Draft / Exported / Lockeddraft copy, finalized, sent, closed month
Daily Entry · Work Summary · Overtime Recordrow, calendar cell, task line, calculated overtime
Recorded Duration · Clock Details · Standard Daydaily target, time clock, office hours
Day Equivalent · Timesheet Totalsattendance days, financial total
Invoice Reference · Amendment Reason · Timesheet Artifactreference, timesheet number, edit note, current PDF

What is interactive in this mockup

  • Calendar: click or arrow to a date, press D / H to Quick Fill, Enter to open the day editor.
  • Restricted dates: weekend, public-holiday and future dates all ask for one confirmation with no reason field; the confirmation then persists for that date only.
  • The full state machine: export an empty month, amend with a reason, lock, get refused, unlock.
  • Snapshot staleness: “simulate a company/client edit” makes the diff appear and the Refresh button show up.
  • Invoice reference uniqueness, standard-day validation and stale-version writes all answer with the real error codes.

Deliberately absent

  • No login, roles or user list (DEC-03: single user, localhost).
  • No delete button for a timesheet or a client — archive/restore only.
  • No amount, rate, subtotal or VAT column anywhere.
  • No “sent”, “delivered”, “invoiced” or “closed month” state or flag.
  • No automatic overtime: no code path infers it from an overrun day.
  • No second document language yet, though the label set is designed so one is a file, not a model change.