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

```bash
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 |
|---|---|---|---|---|
| [ ] | 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` |
| [ ] | Update `globals.css` if any admin colors live there | `src/app/globals.css` | grep for `admin-accent`, `admin-bg` | (same commit) |
| [ ] | Remove inline `#fef3c7` / `#dbeafe` / `#f3e8ff` from stat cards in DashboardClient | `src/components/admin/DashboardClient.tsx` | semantic colors only | `style(admin): semantic stat colors` |

## Phase 2 — Discoverability (sidebar + command palette)

| Done | Task | Files | Notes | Commit |
|---|---|---|---|---|
| [ ] | Create `SideNavGroup` component (label + items + active highlight) | `src/components/admin/SideNavGroup.tsx` (new) | matches new IA: Workspace / Operations / Communications / Growth / Tracking / Insights / Settings | `feat(admin): SideNavGroup component` |
| [ ] | 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` |
| [ ] | 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` |
| [ ] | Mount `CommandPalette` in admin layout | `src/app/admin/layout.tsx` | wraps children, listens for `Cmd/Ctrl+K` | (same commit) |
| [ ] | 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 |
|---|---|---|---|---|
| [ ] | Extract `KPIStat` from DashboardClient | `src/components/admin/KPIStat.tsx` (new) | label + value + optional trend | `feat(admin): KPIStat component` |
| [ ] | Tighten `AdminBadge` variants (status / tier / addon) | `src/components/admin/design-system/AdminBadge.tsx` | semantic: success / warning / danger / info / neutral | `style(admin): badge variants` |
| [ ] | Add `EmptyState` admin variant | `src/components/admin/EmptyState.tsx` (new) | icon + title + body + CTA; matches color tokens | `feat(admin): EmptyState component` |
| [ ] | Add `LoadingState` admin variant | `src/components/admin/LoadingState.tsx` (new) | uses `.ha-skeleton` | `feat(admin): LoadingState component` |
| [ ] | 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)