Repository navigation
feat(web): clearing-ledger tokens, app shell and status system (1/4) - #9
Merged
Merged
Conversation
Slice 1 of the dashboard revamp (T1, apps/web only; no API or business logic change). - Rewrite globals.css as readable token, base, shell and component sections: colour, type scale (11-28px, nothing smaller), spacing, radius and motion tokens; flat ruled panes; reduced-motion turns transitions off. - Load IBM Plex Sans/Mono with next/font; add a skip link and a focusable main. - Mark the current section with aria-current via a small client NavLink; mobile nav becomes one scrolling row. - One status system (lib/status.ts): glyph + label + hue per tone. Settlement and payout SUCCEEDED render as settled / paid out so they never look like a capture; in-flight provider attempts read "processing - outcome unknown". Covered by node:test unit tests wired into the web test script. - Fix duplicate React keys in DataTable rows whose id is an element. - Ledger business types render as labels, not statuses; drop the decorative pulsing live dot; generic loading skeleton; global error loads tokens. - docs/ui-signature.md now owns the clearing-ledger conventions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This was referenced Oct 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What and why
Slice 1 of the
apps/webrevamp (direction "Clearing ledger", approved in session): design tokens, app shell and one status system. The dashboard had no current-page indicator, 8–9px labels, two status colours under WCAG AA, and settled batches and paid-out payouts that rendered exactly like a captured payment. No API, schema or business-logic change.globals.cssrewritten as readable token / base / shell / component sections (colour, 11–28px type scale, spacing and motion tokens).next/font/google(self-hosted at build time; no runtime request to Google), a skip link,aria-currenton the current section, and one scrolling nav row on phones.lib/status.ts: glyph + label + hue per tone. Settlement and payoutSUCCEEDEDrender as settled / paid out; in-flight provider attempts read processing · outcome unknown. Covered bynode:test, now wired into the webtestscript.DataTablerows whoseidwas an element.Screenshots were captured locally at 1440px and 390px (
.tmp/web-ui-revamp/screens/beforeandslice1). They are not attached because the CLI cannot upload images.Review guide
apps/web/lib/status.ts. It decides how every state looks (captured ≠ settled ≠ paid out; unknown never shown as success or failure).apps/web/app/globals.css(full rewrite, mostly mechanical) and the one-lineof=additions in five pages.testscript relies on Node's built-in TypeScript stripping (Node ≥ 22.18 or 24). CI'snode-version: 22resolves to the latest 22.x.testscript previously only printed a notice.Task size
T1 (
apps/webUI only; no T2 area touched).Checks
pnpm --filter @fintech-lab/web lintpnpm --filter @fintech-lab/web buildpnpm --filter @fintech-lab/web typecheckpnpm --filter @fintech-lab/web testgit diff --checkaria-current; every text token ≥ 6.2:1pnpm lint/test/build/typecheck(repo-wide) at this headUnverified boundaries
No automated browser tests exist. Visual and keyboard checks were manual, against a disposable local PostgreSQL with seed data plus local
confirm:falseintents. An offline build fails becausenext/font/googlefetches fonts at build time.Review
T1 self-review (
ponytail-review). Findings and disposition:lib/status.tswithnode:testcoverage.◌fell back to a font where it looked like authorized○→ changed to….Docs and temporary files
docs/ui-signature.mdrewritten as the owner of the new conventions; one line indocs/verification.mdupdated for the web test script. Kept until the stack is merged or rejected:.tmp/web-ui-revamp/screens/(before/after screenshots) and local server logs.🤖 Generated with Claude Code