feat(web): convert Reports, Feed, Water, Stock, History, Expenses and Inventory to MUI, add FilterBar

[mforce]

Summary

Part of #831. Converts seven of the eight ledger/support screens (Sales ships separately, see below) from hand-rolled CSS to MUI, plus the new shared FilterBar component (pair 7) every filter-row screen here uses.

• New: web/src/components/FilterBar.tsx — Paper variant="outlined" + Stack (row, wrap, useFlexGap) holding a caller-supplied filter row, plus FilterDateField carrying SPA: table layout — provenance column to one line, date-range filters into a bounded toolbar #653's 12rem bounded date width from md up and widening to one control per line below it.
• Reports, Feed, Water, Stock, History, Expenses: title row (pair 10), FilterBar (pair 7), Table/TableContainer (pair 9), forms and dialogs (pair 11). Feed/Water/History/Stock/Expenses's filter rows go through FilterBar; Reports's date-only bar does too.
• Inventory: pairs 9/10/11/15 — Inventory carries no list-level filter row, so it does not call FilterBar. Its .order-panel item panel converts to pair 15's ruled region (Box between two Dividers).
• Expenses: its .order-panel categories-management panel converts to the same pair-15 shape.
• Theme: FarmThemeProvider.tsx's MuiTableContainer phone override gains the Mobile data tables scroll sideways with no cue — the last column is silently clipped #150 scroll-shadow gradient (a verbatim port of table.data's own edge-fade cue, which web: convert the CRUD list screens to MUI — Customers, Products, Grades, Flocks, Users #832 never carried over) — applies to every MUI table app-wide, web: convert the CRUD list screens to MUI — Customers, Products, Grades, Flocks, Users #832's five CRUD lists included.
• Refactor: EntryRow/STEPPER_SX extracted from DailyEntryPage.tsx into web/src/components/EntryRow.tsx, ahead of touching History (whose adjust dialog mirrors Daily entry's two-step grading grid and needs the identical layout to convert without duplicating the alignment-critical grid).
• docs/designs/822-mui-revamp.md amended for six divergences from its row 9 (see the "Amendment (web: convert the ledger screens to MUI — Sales, Stock, Inventory, History, Expenses #831)" section) — the full CSS-deletion picture (both halves of tr.discounted, the FilterBar caller count, the two-PR split) is finished in the follow-up PR since Sales is the last consumer of .order-panel/tr.discounted.

Not in this PR: Sales (own PR, ~1,860 lines + 4,110 test lines, per the slice brief). .order-panel, tr.discounted, .toolbar, table.data, .page-head, .muted stay declared in styles.css — Sales and/or Audit (#833) are still live consumers.

Test rewrite table

File	Before → after	Why
ReportsPage.test.tsx	toHaveClass("num") → toHaveStyle({textAlign:"right"})	MUI owns the class name now; textAlign is the real observable effect
StockPage.test.tsx	table.data/div.toolbar → .MuiTableContainer-root/.MuiPaper-outlined	retired classes replaced with the new markup's structural hooks
HistoryPage.test.tsx	.entry-readout/.entry-row → role-scoped (role="status"/"alert", role="group" named)	matches the identical pattern DailyEntryPage.test.tsx already established for the same EntryRow component
ExpensesPage.test.tsx	div.toolbar → .MuiPaper-outlined	same retired-class fix as Stock's

Mutation/defect checks

• Caught and fixed before commit: PICKER_SX (the 15rem filter-row width cap) had leaked onto Expenses' edit-dialog FlockPicker, which the retired CSS explicitly gave full width inside a dialog — separate fix commit, verified against the original .dialog .form-grid .named-picker override.
• Caught and fixed before commit: an unnecessary .actions→Box swap on Inventory's item-panel close button, reverted (.actions carries a real phone-stacking rule).

CSS deletion counts

None in this PR. .order-panel (Sales/Inventory/Expenses were its remaining three consumers; Inventory and Expenses converted here, Sales converts in the follow-up PR, which deletes the rule) and tr.discounted/tr.discounted .badge-warn (Sales-only) are deleted in the follow-up PR. .toolbar, table.data, tr.inactive td, .page-head, .muted/.error/.success/.warn stay declared — Audit (#833) and/or #832's CRUD lists are still live consumers, confirmed by grep before touching each class.

Test plan

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

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 83bb97c9-516b-4728-977f-4d2872275564

---

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 — 1280×800, light + dark (1/2)

Isolated-stack captures at head f2722e9, before rebuilt from origin/main. All 1:1 (deviceScaleFactor 1), readme-farm's demo profile has no operational data, so these are captured against default-farm (the simulation fixture) instead — DemoDataSeeder seeds no feed/water/expense/inventory data, only flocks/entries for the Dashboard.

History shows the adjust dialog open; Expenses shows the categories panel open; Inventory shows an item panel open — per the screenshot rule.

Reports

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

Feed

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

Water

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

Stock

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

History (adjust dialog open)

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

Expenses (categories panel open)

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

Inventory (item panel open)

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

390×844 frames in the next comment.

[mforce]

Before/after captures — 390×844, light + dark (2/2)

Same stacks/commit as the 1280×800 comment above (f2722e9 after, origin/main before). Same interactive states: History's adjust dialog open, Expenses' categories panel open, Inventory's item panel open.

Reports

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

Feed

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

Water

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

Stock

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

History (adjust dialog open)

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

Expenses (categories panel open)

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

Inventory (item panel open)

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 — 54 passed, 1 skipped (deliberately off by default: session-refresh.spec.ts's slow real-token-lifetime test), 0 failed, both projects (chromium + chromium-phone, all 55 specs), against a stack built at this PR's head.
• Before/after 1:1 captures at 1280×800 and 390×844, light/dark — attached above (two comments, split by viewport to stay under the attachment-count limit).

One real regression found and fixed during this verification, not by me — tools/simulation/ui/specs/phone.spec.ts's "no walked screen overflows the viewport horizontally" test still located /stock and /history via content: "table.data". This PR's MUI <Table> conversion drops that class (same shape as #832's /customers//flocks conversion), so the first suite run came back 53/55. Root-caused, reported, and fixed live by another agent working the same issue — commit 83eb5c4 switches both routes to content: "role=table" (the exact fix #832 already established). Re-ran the full suite after the fix: 54/55 (see above).

One false alarm, stated plainly rather than left standing: my first capture round showed the Expenses page's two Category <select> fields with their floating label overlapping the value/placeholder text. I initially reported this as a real defect, since the fix code (slotProps.inputLabel.shrink=true) was already present with a comment citing the #897/#833 precedent. It turned out to be AGENTS.md's own warning applying to my own isolated stack: my Docker image was built before a slightly earlier version of that fix, and the running container served stale bytes. Rebuilt the image from current source and recaptured — clean, no overlap, in both viewports and both themes. Correcting the record here since the first-round screenshots (now superseded) would otherwise have implied a bug that isn't there.

DIRECTION.md compliance, checked against docs/designs/864-visual-language/DIRECTION.md: ruled rows and the --rule-strong total rule are present on every table; numerals are right-aligned and tabular throughout (Reports' money/count columns, Stock's Available/Restricted, History's totals); FilterBar's outlined border is visible in every frame that carries one; the History adjust dialog, Expenses categories panel, and Inventory item panel are all plain ruled regions with no card-fill background, matching the "no card fills on the drill-down regions" rule. Radii read as the documented 4/8/12px tiers (controls/cards/dialogs) by eye across both themes.

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

[mforce]

SHA note: the captures/suite above were verified at f2722e9. The branch has since moved to 2da532a (one more fix: FilterDateField's sx merge, { ...sx } → an array, so a function/array-form sx isn't silently dropped — flagged by CodeRabbit on #901 which cherry-picked this component). Checked independently rather than taking that on faith: none of the seven screens captured here (grep -n "FilterDateField" web/src/routes/*.tsx) pass an sx prop to FilterDateField at all, so this fix has zero visual effect on any of the attached frames — no recapture needed. Suite result and captures above remain valid for 2da532a.