web: redesign Dashboard around the Operations Desk direction

[mforce]

Approved design: Concept B — Operations Desk. The locked 1280×800 and 390×844 renders and selected refinements are attached here: #906 (comment)

Part of #674's Phase 3 follow-up redesign. Follow-up to completed slice #829 and its implementation PR #883; do not reopen #829. That issue correctly shipped the then-approved ledger-desktop direction. This is the first owner-directed redesign slice and records the later decision to replace it with the Operations Desk direction; the other converted screen groups receive their own follow-up slices rather than being bundled here.

Why

The converted Dashboard is functional, but its ruled-ledger presentation still feels generic and too close to stock MUI. The owner compared three new rendered compositions and selected Concept B — Operations Desk as the replacement direction.

The approved design study is authored at:

docs/designs/674-dashboard-redesign/dashboard-direction-lab.html

That artifact must be committed with the implementation so the decision remains reviewable in the repository.

Approved direction

Primary surface: Monitor, with Operate secondary. The page should answer, in this order:

1. What needs attention now?
2. Which houses have completed the morning collection?
3. How many eggs are available, and by grade?
4. What orders changed recently?
5. Is lay rate improving?

Use Concept B from the design study, including:

• The aubergine operations rail and warm-paper canvas.
• The farm-specific morning heading and farm-local date/time context.
• One high-priority morning brief combining the unresolved-house and low-stock facts with today's total.
• Morning Collection as a progress-led operational list with the missing house's action dominant.
• Available Stock as a compact composition plus a real Grade | Count | Share ledger.
• Full-row hover treatment on stock-grade rows; Cracked remains visibly tied to its floor warning.
• Recent Orders with customer/details on the left and amount/status consistently right-aligned.
• Lay Rate keeps Concept B's card and KPI, but uses Concept A's 14-day bar graph, not the line/area graph.
• Responsive 1280 and 390 compositions from the same information hierarchy.

Behaviour that must not change

• Preserve the current desktop sidebar and phone navigation exactly: navGroups() destinations, grouping, translations, role gates, current Lucide icons, current active-state semantics, and the role-derived four-tab priority plus More. The Operations Desk mockup does not authorize an IA or icon change.
  This is a visual and compositional rework, not a data-contract rewrite except where web: the Dashboard's Recent sales rows have no eggs-and-grade cell because the orders list carries no grade name #887 requires one.

• Preserve the existing six-read Dashboard pipeline and independent panel degradation.

• Preserve the farm-local captured date and all farm-locale number, money, date, and time formatting.

• Preserve the ReadOnly/Denied sales-panel gate exactly.

• Preserve missing/draft/submitted entry actions and their destinations.

• Preserve accessibility names, status meaning, keyboard focus, and reduced-motion handling.

• Preserve all three locales; no English-only strings.

• Preserve the existing Dashboard data helpers and their domain semantics unless an acceptance criterion requires otherwise.

Relationship to #887

The Recent Orders design shows egg quantity and grade. #887 already owns the missing grade-name data needed for that row. Do not implement two competing solutions. Either:

• land web: the Dashboard's Recent sales rows have no eggs-and-grade cell because the orders list carries no grade name #887 immediately before this slice and consume its contract here, or
• implement both in one PR and close both issues.

The implementation must record whether the API returns the row-owned grade name or the SPA performs a second grade lookup, including the historical-name and request-cost consequences.

Acceptance criteria

• Production Dashboard matches approved Concept B at 1280×800 and 390×844 in light and dark modes.
• Morning brief, collection progress, stock ledger, recent orders, and lay-rate bars use real existing Dashboard data; no decorative or invented metrics.
• Stock ledger renders Grade, Count, and Share columns with tabular numeric alignment.
• Hovering or keyboard-focusing a stock row highlights the full row without relying on colour for meaning.
• Recent-order customer/details, amount, status, and action stay aligned at supported desktop widths and reflow deliberately at 390px.
• Lay Rate renders the approved 14-day bars while retaining the current 84.6%-style KPI and period comparison semantics.
• Missing, partial, and complete production days remain distinguishable and accurately labelled to assistive technology.
• No horizontal viewport overflow at 1280 or 390.
• Every phone target is at least 44px.
• Existing Dashboard unit tests remain green and new tests cover the changed rendering and interactions.
• Relevant Playwright smoke, phone, and screenshot paths pass against a stack rebuilt at the implementation head.
• Before/after screenshots are attached at 1280×800 and 390×844, light and dark, at 1:1 scale.
• docs/designs/674-dashboard-redesign/dashboard-direction-lab.html is committed as the approved design record.
• The PR body contains Closes #NNN; if it absorbs web: the Dashboard's Recent sales rows have no eggs-and-grade cell because the orders list carries no grade name #887, it also contains Closes #887 and amends web: the Dashboard's Recent sales rows have no eggs-and-grade cell because the orders list carries no grade name #887 per AGENTS.md.

Out of scope

• Reopening or rewriting web: convert the Dashboard to MUI — ledger desktop, field-first phone #829's historical record.
• Changing Dashboard business calculations.
• Adding new metrics or API calls unrelated to web: the Dashboard's Recent sales rows have no eggs-and-grade cell because the orders list carries no grade name #887.
• Redesigning the other revamp screens in the same PR.

[mforce]

Approved direction — Concept B, Operations Desk

Owner-selected Dashboard direction for implementation in this issue.

Locked choices:

• Navigation is preserved, not redesigned. Keep the current navGroups() information architecture, group labels, role gates, destination set, and Lucide icons from web/src/routes/nav.tsx. Concept B changes the Dashboard composition and may restyle the rail surface, but it does not rename, remove, regroup, or replace navigation items.
• Phone keeps the current role-derived bottom tabs and icons from BottomNav.tsx — for the full Admin/Owner map: Daily entry, Stock, Sales, History, More — with the complete current menu under More.
• Concept B's operations-first composition, aubergine rail, warm-paper canvas, morning brief, collection progress, stock ledger, recent orders, and lay-rate KPI.
• Concept A's 14-day bar graph inside B's Lay Rate card; the line/area chart is rejected.
• Available Stock includes Grade, Count, and Share, with full-row hover/focus highlighting and the Cracked row tied to its floor warning.
• Recent Orders keeps customer/details left and amount/status consistently right-aligned.
• Desktop and phone use the same information priority, with deliberate responsive reflow rather than a squeezed desktop layout.

Source artifact to commit with the implementation:

docs/designs/674-dashboard-redesign/dashboard-direction-lab.html

Desktop — 1280×800

Phone — 390×844

[mforce]

The grade-name field this design's Recent Orders row depends on is specified on #887 (owner decision: the API returns it, per order line, one bulk read per page): #887 (comment). Implementation is on hold pending the owner's redesign work.

[mforce]

Follow-up filed for the low-stock elements this slice omits for lack of data: #911 (per-grade floors, the API flag, the brief and ledger warnings). #906 stays as answered: no floor warning, omission recorded in the PR body.