route-commerce/docs/superpowers/plans/2026-06-17-admin-redesign-checklist.md

Admin Redesign — Task Checklist

Working branch: design/ui-revamp-2026-06 Spec: docs/superpowers/specs/2026-06-17-admin-redesign.md Started: 2026-06-17 Deadline: tomorrow

How to use this file

• [ ] unchecked → not done · [x] checked → done
• Tick a box by changing [ ] to [x]
• Add free-form notes in the Notes column
• One commit per task (or per cluster of related tasks)
• Revert a task with git reset --hard <commit-before-task>
• Full revert: git checkout main && git branch -D design/ui-revamp-2026-06

Revert cheatsheet

git status                           # what's dirty
git stash                            # save uncommitted, discard
git diff                             # see what's staged
git log --oneline -10                # see recent commits
git reset --hard <sha>               # nuke back to that commit
git checkout main                    # abandon branch, keep work
git branch -D design/ui-revamp-2026-06  # delete the branch

---

Phase 0 — Setup

Done	Task	Files	Notes	Commit
[x]	Create feature branch	—	design/ui-revamp-2026-06 off main	—
[x]	Write design spec	docs/superpowers/specs/2026-06-17-admin-redesign.md	aesthetic, color, IA, phases	—
[x]	Write this checklist	docs/superpowers/plans/2026-06-17-admin-redesign-checklist.md	—	—
[ ]	Commit baseline	both files above	chore: design spec + checklist	(will commit after writing this)

Phase 1 — Foundation (color + design tokens)

Done	Task	Files	Notes	Commit
[x]	Replace --admin-* color tokens in admin-design-system.css	src/styles/admin-design-system.css	use spec §3 table. Drop the muddy aba278 warning, the purple stat icons, the blue stat icons.	style(admin): unify color tokens (18fb44e)
[x]	Update globals.css if any admin colors live there	src/app/globals.css	grep for admin-accent, admin-bg	(same commit)
[x]	Remove inline #fef3c7 / #dbeafe / #f3e8ff from stat cards in DashboardClient	src/components/admin/DashboardClient.tsx	semantic colors only	(same commit)

Phase 2 — Discoverability (sidebar + command palette)

Done	Task	Files	Notes	Commit
[x]	Create SideNavGroup component (label + items + active highlight)	src/components/admin/SideNavGroup.tsx (new)	matches new IA: Workspace / Operations / Communications / Growth / Tracking / Insights / Settings	(4ded68c)
[x]	Refactor AdminSidebar to use grouped nav	src/components/admin/AdminSidebar.tsx	replace flat NAV_ITEMS with groups; keep role-gating, brand selector, sign-out	feat(admin): grouped sidebar IA (4ded68c)
[x]	Create CommandPalette (Cmd+K)	src/components/admin/CommandPalette.tsx (new)	global search across pages + recent items + quick actions; mounts in admin layout	feat(admin): command palette (750efdd)
[x]	Mount CommandPalette in admin layout	src/app/admin/layout.tsx	wraps children, listens for Cmd/Ctrl+K	(442c16d)
[x]	Plumb enabledAddons to sidebar (gates Water Log / Route Trace)	src/app/admin/layout.tsx	getEnabledAddons(activeBrandId) from actions/billing/stripe-portal	(442c16d)
[ ]	Settings pages get a top tab bar (no more hidden sub-nav)	src/app/admin/settings/*/page.tsx	General / Brand / Billing / Users / Integrations / Payments / Shipping / Add-ons	feat(admin): settings top tabs

Phase 3 — Component patterns

Done	Task	Files	Notes	Commit
[x]	Extract KPIStat from DashboardClient	src/components/admin/KPIStat.tsx (new)	label + value + optional trend	feat(admin): KPIStat component (8e93734)
[x]	Tighten AdminBadge variants (status / tier / addon)	src/components/admin/design-system/AdminBadge.tsx	semantic: success / warning / danger / info / neutral	(8e93734)
[x]	Add EmptyState admin variant	src/components/admin/EmptyState.tsx (new)	icon + title + body + CTA; matches color tokens	(8e93734)
[x]	Add LoadingState admin variant	src/components/admin/LoadingState.tsx (new)	uses .ha-skeleton	(8e93734)
[ ]	Audit PageHeader usage; fix inconsistencies	src/components/admin/design-system/PageHeader.tsx + callers	eyebrow + title + subtitle + actions; consistent across all pages	chore(admin): PageHeader audit

Phase 4 — Dashboard (unified command center)

Done	Task	Files	Notes	Commit
[ ]	Redesign DashboardClient as single feed (no 4 tabs)	src/components/admin/DashboardClient.tsx	top: KPI strip · middle: "Needs attention" feed · bottom: section grid	feat(admin): unified dashboard
[ ]	Add a "What needs attention" feed (orders pending, stops today, low stock, unanswered contacts)	same file	data from existing actions	(same commit)

Phase 5 — Apply patterns to top pages

Done	Task	Files	Notes	Commit
[ ]	/admin/orders list + detail	src/app/admin/orders/page.tsx, [id]/page.tsx, AdminOrdersPanel.tsx	new PageHeader, StatusPill, EmptyState	style(admin): orders page
[ ]	/admin/products list + new + edit	src/app/admin/products/page.tsx, new/page.tsx, [id]/page.tsx, ProductsClient.tsx	same	style(admin): products page
[ ]	/admin/stops calendar	src/app/admin/stops/page.tsx, StopsCalendarClient.tsx	same	style(admin): stops page
[ ]	/admin/communications composer	src/components/admin/HarvestReach/CampaignComposerPage.tsx	same	style(admin): comms composer
[ ]	/admin/settings index + tab bar	src/app/admin/settings/page.tsx	overview of all settings w/ quick links	style(admin): settings index

Phase 6 — Frontend polish (public side)

Done	Task	Files	Notes	Commit
[ ]	Tuxedo home polish	src/app/tuxedo/page.tsx + tuxedo/ components	rhythm, spacing, mobile	style(storefront): tuxedo polish
[ ]	Indian River Direct home polish	src/app/indian-river-direct/page.tsx + components	rhythm, spacing, mobile	style(storefront): IRD polish
[ ]	Pricing page polish	src/app/pricing/page.tsx	tier card spacing	style(public): pricing polish

Phase 7 — Verify (gate before merge)

Done	Task	Command	Notes	Commit
[ ]	Type-check clean	npx tsc --noEmit	0 errors	(no commit, gate)
[ ]	Build clean	npm run build	green	(no commit, gate)
[ ]	Dev server boots	npm run dev	/admin renders, sidebar works, Cmd+K opens	(no commit, gate)
[ ]	Manual smoke: dashboard	localhost:4000/admin	layout intact, no console errors	(no commit, gate)
[ ]	Manual smoke: command palette	Cmd+K	opens, type, jump	(no commit, gate)
[ ]	Manual smoke: orders list	/admin/orders	loads, page header consistent	(no commit, gate)

---

Live notes (free-form)

Add anything you want to remember as we go.

• The existing .ha-* (Harvest Almanac) class system is good. Build on it; don't replace it.
• The sidebar is in src/components/admin/AdminSidebar.tsx (~520 lines). Don't rewrite from scratch — refactor the data structure to groups and let the JSX mostly stand.
• lucide-react is already a dependency. New icons should use lucide, not inline SVGs.
• The Atelier des Récoltes CSS classes (.atelier-* in globals.css) are public-side only. Don't mix them into admin.
• Per MEMORY.md: spawn sub-agents sequentially if TPM rate limit hits. If parallel works, fine; if not, fall back.

Decisions log

Record any calls you make mid-flight that change the spec.

• (none yet)