feat(web): convert Sales to MUI, retire .order-panel and tr.discounted

[mforce]

Summary

Closes #831. Stacked on #899 (merge that first) — converts the last ledger screen, Sales, and deletes the two CSS rules whose last consumer it was.

• Sales: title row (pair 10), both order-detail tables — line items (keeps the discount tint and the below-list chip's surface lift, now DISCOUNTED_ROW_SX/DISCOUNTED_BADGE_SX inline sx on the same --tint-warn/--surface tokens instead of tr.discounted CSS) and payments — the new-order/payment dialogs, the add-line form, the order-detail drill-down (pair 15, a named role="region" landmark replacing .order-panel), the orders filter row (status + customer + unpaid — no FilterBar, since Sales carries no date range), and the orders table.
• .order-panel and tr.discounted/tr.discounted .badge-warn retire from styles.css — Sales was the last consumer of both (Flocks feat(web): convert the CRUD lists to MUI #897, Inventory and Expenses in feat(web): convert Reports, Feed, Water, Stock, History, Expenses and Inventory to MUI, add FilterBar #899 already converted away).
• styles.discount.test.ts's cross-brand/mode contrast guard rewritten to assert directly against the --tint-warn/--surface token names instead of the deleted selectors — same invariant, same rigor.
• tools/simulation/ui/specs/phone.spec.ts's Sales draft-panel phone-stacking walk moves from .order-panel .actions to the new region landmark.
• docs/designs/822-mui-revamp.md amended in feat(web): convert Reports, Feed, Water, Stock, History, Expenses and Inventory to MUI, add FilterBar #899 already covers this PR's divergences (both halves of tr.discounted, the FilterBar caller count, the two-PR split).

Test rewrite table

SalesPage.test.tsx (237 tests, 3 files):

Selector	Rewritten to	Why
document.querySelector(".order-panel") (21 sites)	screen.queryByRole("region")/getByRole("region")	.order-panel retired; a named landmark is the accessible, role-based replacement. 17 of the 21 were silently VACUOUS after the markup changed (querying a nonexistent class returns null whether the panel is absent or just renamed) — found by grepping the whole file for the selector, not by trusting the 4 that surfaced as visible failures
.closest(".form-grid") on the add-line row	.closest(".MuiStack-root")	the retired row is now a bare Stack
toHaveClass("num")	toHaveStyle({textAlign:"right"})	same fix as PR #899's ReportsPage rewrite
toHaveClass("discounted") (8 sites)	toHaveStyle({backgroundColor:"var(--tint-warn)"})	tr.discounted retired; the tint is now an inline sx constant on the same token
(new)	toHaveStyle({backgroundColor:"var(--surface)"}) on the below-list chip	the retired tr.discounted .badge-warn CSS rule's surface-lift had no direct test before (only the class name was asserted); added since the lift is now an inline sx constant a JSX edit could silently drop with no CSS guard left to catch it

Mutation/defect checks

Ran the full Sales suite red-then-green at each rewrite step rather than trusting the diff; confirmed the 17 silently-vacuous .order-panel assertions by temporarily reverting the region-role addition and observing all 21 (not just 4) go genuinely red.

CSS deletion counts

.order-panel: 0 remaining consumers (git grep -n "order-panel" -- ':!web/src/styles.css' web/src tools/simulation returns none — the string matches inside SalesPage.tsx are an unrelated dialog-scope identifier, not a className). tr.discounted/tr.discounted .badge-warn: 0 remaining consumers. Both confirmed via whole-repo git grep before deleting.

Test plan

• npm run typecheck clean
• npm test (vitest) — full Sales suite 237/237; full web suite 3121/3122 (1 pre-existing flake, confirmed unrelated and green standalone)
• Guards green: styles.elevation.test.ts, styles.discount.test.ts, styles.declared-tokens.test.ts, styles.harness-selectors.test.ts, farmTheme.policy.test.ts
• dotnet test tests/Cluckwork.Application.Tests --filter "FullyQualifiedName~ImagePin|FullyQualifiedName~RealTree" — 14/14 (before the docs commit)
• Isolated-stack full quick Playwright suite (in progress — will report separately)
• Before/after 1:1 captures at 1280×800 and 390×844, light/dark, with a drill-down open (in progress — will attach separately)

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 4a08d137-3bef-408d-875b-2a68fc3e0069

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[mforce]

Before/after captures — Sales, 1280×800 + 390×844, light + dark

Isolated-stack captures at head 2c32d7b, before rebuilt from this PR's own base (feat/831-mui-ledgers, PR #899's tip). All 1:1 (deviceScaleFactor 1). Captured against default-farm (the simulation fixture) — DemoDataSeeder seeds no sales orders on readme-farm.

Both frames show the same drill-down state: an open Draft order (Sim Customer 1's seeded order) with the below-list discount chip visible on its Large Eggs line ($0.35 vs $0.45 list, "Below list" tag) — this is SimulationDataSeeder's own fixture order, not a fabricated one.

1280×800

Before:
After:
Before (dark):
After (dark):

390×844

Before:
After:
Before (dark):
After (dark):

[mforce]

Runtime verification (isolated stack, not cluckwork-sim)

Test plan checklist, closing out the two pending items:

• Isolated-stack full quick Playwright suite — first run 53 passed, 1 failed, 1 skipped (both projects, all 55 specs), against a stack built at this PR's original head. Re-run after the fix below: 54 passed, 1 skipped, 0 failed.
• Before/after 1:1 captures at 1280×800 and 390×844, light/dark, with a drill-down open — attached above.

One real regression found and fixed during this verification, not by me — same defect class as PR #899: phone.spec.ts's overflow-walk test still located /sales via content: "table.data", but this PR's MUI <Table> conversion drops that class. Root-caused, reported, and fixed live by another agent working the same issue — commit 62a3581 switches /sales to content: "role=table", mirroring #899's fix for /stock//history and #832's original fix for /customers//flocks.

DIRECTION.md compliance, checked against docs/designs/864-visual-language/DIRECTION.md, specifically the discount-tint requirement: the below-list line renders with the --tint-warn row tint and a "Below list" chip carrying the --surface lift — not a bordered white box drill-down, which direction A rejects. The order-detail drill-down itself is a plain ruled region (a named role="region" landmark replacing .order-panel), no card fill. Status/Customer filter selects render cleanly (floating label shrinks correctly, confirmed in both themes/viewports) — worth noting since PR #899's Expenses page had a visually similar-looking issue that turned out to be a stale-Docker-image artifact in my own testing, not a real bug; see the correction on that PR's thread. Sales' own Status-select shrink fix (e179793) was applied proactively by the same pass, before I'd even looked at Sales specifically.

Captured against the seeded simulation fixture's own draft order (Sim Customer 1, Large Eggs at $0.35 vs $0.45 list) — my first capture attempt had accidentally landed on an E2E-test-artifact order (absurd numbers) because I'd run the full suite immediately beforehand, which creates its own below-list orders; recaptured on a freshly-reseeded stack, before running the suite, to get the clean fixture order instead.

SHA note: verified at 62a3581 (this PR's current head, rebased onto #899's 2da532a) — confirmed via git log/git fetch after the fact that both branches' final SHAs match what's referenced here.

Isolated stack (cw900, its own compose project + ports, distinct from and never touching the shared cluckwork-sim stack), torn down after use.