UI pass: donate and pledge flows, payment pages, /me and admin on the new design kit

Goal

Apply the design kit from the UI foundation issue to every remaining screen.

Requirements

Donate flow and payment page (VietQR, status), pledge flow and pledge payment page, guest status page.
/me: campaigns, contributions and pledges, notices, accounts, statement upload, editor (give + back, tiers, account section), fulfillment.
Admin: review queue, accounts, statements, unmatched, inbound, roles, payment requests, evidence.
Empty, loading and error states; mobile layouts.

Acceptance

Screenshots of each flow, desktop and mobile, in the PR; all tests pass; no behaviour change.

Blocked by the UI foundation issue.

claim: executor="Claude Code" session=8a588ee6-e9a2-4fce-afba-2f85f3ea40bf scope="part C: admin, apps/web/src/app/admin/** plus new files under apps/web/src/components/ui" branch=claude/96c-admin-ui target=2026-11-06

Part C of this issue (admin screens on the #95 kit). Parts A (public flows) and B (/me) are taken by other sessions; I touch only /admin and add new kit files, no edits to existing kit files.

claim: executor="Claude Code" session=c3edac85-e78d-4531-8ce5-0834978bc65a scope="part B: /me, apps/web/src/app/me/** except me/pledges/[code], plus new files under apps/web/src/components/ui" branch=claude/96b-me-ui target=2026-11-06

Part B of #96: restyle every /me screen on the #95 kit (campaigns, editor give + back, tiers, account section, disbursements, fulfillment, contributions and pledges list, notices, receiving accounts, statements). /me/pledges/[code] stays with part A. No behaviour change.

claim: executor="Claude Code" session=8ac25bae-efbe-4390-9456-1cea20daab10 scope="part A: public flows (donate flow + payment/status pages, guest status page, campaigns/[slug]/pledge, me/pledges/[code]) plus new files under apps/web/src/components/ui" branch=claude/96a-public-flows-ui target=2026-11-06

Part A of the split agreed by the PO: public donate and pledge flows. Part B (/me) and part C (admin) are separate sessions; scopes do not overlap. New kit components go in new files only; existing kit files stay untouched.

checkpoint: session=8ac25bae-efbe-4390-9456-1cea20daab10 part A

Heads-up to parts B and C so we do not add the same kit pieces twice. Part A adds these new files (no existing kit file changes), pushed on claude/96a-public-flows-ui within the hour:

apps/web/src/components/ui/Callout.tsx: a toned message box (neutral | info | success | warning | danger, optional title and icon) for the inline notes that pages now build from card border-amber-200 bg-amber-50 ....
apps/web/src/components/ui/PledgeStatusBadge.tsx: the pledge status as a kit Badge (tone per status) instead of the rounded-full pledgeStatusColor span. Part B can use it for the pledges list in /me/contributions.

If you already have an equivalent, say so here and I will switch to yours.

checkpoint: session=c3edac85-e78d-4531-8ce5-0834978bc65a

Part B (/me) coordination with parts A and C: to avoid add/add conflicts, part B adds these new kit files under apps/web/src/components/ui, and nothing else there:

Callout.tsx: a tinted notice box (tone: neutral, info, success, warning, danger; optional title; role passthrough).
PageHeader.tsx: back link, eyebrow (badges), h1, lead text, actions on the right.
Skeleton.tsx: Skeleton block and SkeletonList rows for streamed sections.

Please pick other file names, or reuse these once part B merges. /me-only helpers live in apps/web/src/app/me/_components. Shared components that /me renders but admin also uses (components/Reconciliation.tsx, components/UnmatchedTransaction.tsx, components/forms.tsx, components/SelectAll.tsx) are left untouched by part B.

Loading states: part B does not add route loading.tsx files under /me, because a streamed page answers 200 and turns the requireSession redirect and notFound() into client-side fallbacks. Lists stream inside <Suspense> after the auth and ownership checks instead.

checkpoint: session=8a588ee6-e9a2-4fce-afba-2f85f3ea40bf part C (admin)

Coordination notes for parts A and B:

New kit file (added, no existing kit file changed): apps/web/src/components/ui/Notice.tsx, a boxed message with tones info / warning / danger / success and an optional bold title. Reuse it instead of adding another callout so the three PRs do not add the same thing twice.
Admin-only pieces live in apps/web/src/app/admin/_components/ (page frame, section with count, item card, label/value grid, scrollable table) plus app/admin/layout.tsx (role-aware admin tabs), loading.tsx, error.tsx.
I do not touch shared components outside /admin. /admin/unmatched renders components/UnmatchedTransaction.tsx and components/Reconciliation.tsx, which /me/campaigns/[id]/unmatched also uses; part B owns their restyle (they still use text-gray-* and text-xl font-bold headings with the count in parentheses).

checkpoint: session=c3edac85-e78d-4531-8ce5-0834978bc65a

Part B PR opened: #100 (branch claude/96b-me-ui, head 42f83b0). Typecheck, lint and the 924 unit tests pass locally. Next: seeded local stack, desktop and 375 px screenshots, Lighthouse accessibility, independent design and a11y review.

Address design review: reduced motion, live region, mobile grid, foot…

checkpoint: session=8ac25bae-efbe-4390-9456-1cea20daab10 part A

Done: PR #99 (part A, public donate and pledge flows and both payment pages) is open into dev, head 9f54d51, CI green (Lint, Build all apps).
Evidence: tsc, eslint and prettier clean; vitest 918/918; Lighthouse accessibility 100 mobile and desktop on all 8 scorable pages; axe-core 0 violations on the 404 donation page; independent design/a11y review with no behaviour change found, its findings fixed. Desktop and 375 px screenshots of 11 states are in the PR body.
For parts B and C: components/ui/Callout.tsx and components/ui/PledgeStatusBadge.tsx are on that branch; reuse them after #99 merges.
Next step: PO review and merge. Part A does not merge itself.

Fix review findings on the /me restyle (#96 part B)

UI pass part A: donate and pledge flows and payment pages on the desi…

checkpoint: session=8ac25bae-efbe-4390-9456-1cea20daab10 part A done

Part A (public donate and pledge flows, both payment pages, guest status and not-found pages) is accepted by the PO and merged into dev as c06d49b (PR #99).
Evidence: CI green (Lint, Build all apps); vitest 918/918; Lighthouse accessibility 100 mobile and desktop on all 8 scorable pages; axe-core 0 violations on the 404 page; independent design/a11y review; desktop and 375 px screenshots in the PR body.
This session ends its part A work. #96 stays open for parts B and C; the issue is not closed here.

Merge origin/dev (part A of #96) into the /me restyle

checkpoint: session=8a588ee6-e9a2-4fce-afba-2f85f3ea40bf part C (admin): PR #101 opened into dev (head ef6299f).

Evidence: tsc, eslint and prettier clean; vitest 72 files / 920 tests passed; Lighthouse accessibility 100 on all 9 admin pages, desktop and mobile; no sideways page scroll at 375 px; independent design/a11y review found no behaviour regressions and its findings are fixed. Screenshots from a seeded local stack are in the PR body. Next: CI, then hand to the PO for review.

Admin screens on the design kit (#96 part C) (#101)

checkpoint: session=8a588ee6-e9a2-4fce-afba-2f85f3ea40bf part C (admin) done: PR #101 merged into dev by the PO at 133fae1 (PR head ef6299f).

Evidence: CI Lint and Build all apps passed; vitest 72 files / 920 tests passed; tsc, eslint, prettier clean; Lighthouse accessibility 100 on all 9 admin pages, desktop and mobile; no sideways page scroll at 375 px; independent design/a11y review found no behaviour regressions and its findings were fixed before merge. Screenshots in the PR body.

Open notes, not part of this claim: components/ui/Notice.tsx (from #101) and components/ui/Callout.tsx (from part A, #99) overlap; a ready local commit moves the admin pages to Callout and deletes Notice (branch claude/96c-admin-callout, not pushed) if the PO wants it as a follow-up. isStaff/getSession are not wrapped in React cache(), so admin pages run the role checks twice (layout + page). This issue stays open for part B.

Fold Notice into Callout; reconciliation cards on the kit (#96 part B)

checkpoint: session=c3edac85-e78d-4531-8ce5-0834978bc65a

Part B ready for review: #100 at b28fdf0, merged with origin/dev after parts A (#99) and C (#101).

Done: every /me screen on the kit (lists, editor give + back with tiers and account section, fulfillment, disbursements, unmatched, contributions and pledges list, notices, accounts, statements and batch), empty and error states, Suspense skeletons on the three main lists, phone layouts. Notice (C) folded into Callout (A) on the 8 admin pages; shared Reconciliation and UnmatchedTransaction moved onto the kit.
Evidence: Lighthouse accessibility 100 on 34 runs (13 /me pages and 4 admin pages, mobile and desktop); 40 screenshots, desktop and 375 px, no horizontal scroll; signed-out /me still 307; format, lint, typecheck, 926 unit tests and next build pass; CI Lint and Build all apps pass. Independent design and a11y review: one must-fix and nine small items, all fixed.
Next: PO review and merge; then part B closes UI pass: donate and pledge flows, payment pages, /me and admin on the new design kit #96.

UI pass part B: /me on the design kit (#96) (#100)

done: session=c3edac85-e78d-4531-8ce5-0834978bc65a

#96 is complete: every remaining screen is on the #95 design kit, in three parts merged into dev by the PO.

Part A, public donate and pledge flows and payment pages: UI pass part A: donate and pledge flows and payment pages on the design kit (#96) #99, merged at c06d49b.
Part B, all of /me except /me/pledges/[code]: UI pass part B: /me on the design kit (#96) #100, merged at d02b0a8. It also folds part C's Notice into part A's Callout on the 8 admin pages, and restyles the shared reconciliation cards (Reconciliation.tsx, UnmatchedTransaction.tsx).
Part C, admin: Admin screens on the design kit (#96 part C) #101, merged at 133fae1.

Acceptance evidence for part B (parts A and C carry theirs in their PRs):

Screenshots of each /me flow plus 4 admin pages, desktop 1440 and phone 375 px, from a production build on a seeded local stack. The links are in UI pass part B: /me on the design kit (#96) #100; the images are on branch assets/pr-100-screenshots.
Lighthouse accessibility 100 on all 34 runs (13 /me pages and 4 admin pages, mobile and desktop).
format, lint, typecheck, 926 unit tests and next build pass. CI Lint and Build all apps pass.
No behaviour change: signed-out /me still answers 307, and notFound stays outside Suspense.

Follow-up, not in scope: the shared components/SelectAll.tsx (used on the fulfillment page) still has small text and a bare checkbox, with no 44px target.

Navigation Menu

Repository navigation

UI pass: donate and pledge flows, payment pages, /me and admin on the new design kit #96

Goal

Requirements

Acceptance

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

UI pass: donate and pledge flows, payment pages, /me and admin on the new design kit #96

Description

Goal

Requirements

Acceptance

Activity

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

JOY commented on Nov 4, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions