chore(design): admin redesign spec + task checklist

- design spec: aesthetic, color tokens, IA, phased plan - checklist: 7 phases, every task has notes column, revert cheatsheet - working branch: design/ui-revamp-2026-06
2026-06-17 00:07:04 -06:00
parent c8fa2e8b52
commit bd2dadd9ee
2 changed files with 255 additions and 0 deletions
@@ -0,0 +1,120 @@
+# 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)
@@ -0,0 +1,135 @@
+# Admin Redesign — 2026-06-17
+
+> Branch: `design/ui-revamp-2026-06`
+> Type: Hot take. Tomorrow deadline. Approved yolo.
+> Goal: polish the public side, reimagine the admin, fix the colors, make things findable.
+
+---
+
+## 1. Context
+
+- **Public side (`/`, `/tuxedo`, `/indian-river-direct`, pricing, blog, contact)** — "good, just needs polishing." The "Atelier des Récoltes" / "Field Almanac" editorial language is in place (cream + forest + gold + Fraunces + Manrope + Fragment Mono). Don't break it.
+- **Admin (`/admin/*`)** — the surface that needs the most work.
+  - 15+ admin sections are split across 4 dashboard tabs (Operations / Fulfillment / Management / Tools). **The user can't find things.**
+  - Color palette mixes forest + citrus + sage + gold + warmred + surface greys. **The colors fight each other and feel muddy.**
+  - Sidebar has 6 flat items. "Settings" sub-pages are reachable only by knowing they exist. **Discoverability is bad.**
+  - The "Harvest Almanac" design system (`.ha-*` classes) exists but is underused. Most admin pages fall back to defaults.
+
+## 2. Aesthetic direction (one paragraph, committed)
+
+> **Editorial operations.** The admin should feel like the back office of an almanac press, not a generic SaaS dashboard. Warm cream canvas, deep botanical green for primary action, amber gold for the *one* thing you should do next, ink-black for text, a single soft beige for borders. The same typeface family as the public side (Fraunces / Manrope / Fragment Mono). Generous use of numerals in Fragment Mono so prices and counts read like a ledger. **One primary, one accent, four neutrals. That's it.** No purple, no teal, no citrus orange as a primary.
+
+Commit to this and stop adding new colors.
+
+## 3. Color system (final, do not deviate)
+
+| Token | Hex | Use |
+|---|---|---|
+| `--admin-bg` | `#FAF7F0` | Page background (atelier cream) |
+| `--admin-surface` | `#FFFFFF` | Cards, modals, sheets |
+| `--admin-surface-sunken` | `#F4F1E8` | Inset wells, code blocks |
+| `--admin-ink` | `#1A1814` | Primary text |
+| `--admin-ink-muted` | `#73706B` | Secondary text |
+| `--admin-ink-faint` | `#A8A29E` | Tertiary / placeholders |
+| `--admin-line` | `#E8E4D7` | Borders, dividers |
+| `--admin-line-strong` | `#D4CFBE` | Emphasized borders |
+| `--admin-primary` | `#1F4D2A` | Primary action (deep botanical) |
+| `--admin-primary-hover` | `#163C20` | Primary hover |
+| `--admin-primary-soft` | `#E8F0E5` | Primary at 8% (selected rows, chips) |
+| `--admin-accent` | `#B8761E` | Amber — "the one thing to do" |
+| `--admin-accent-soft` | `#F7EBD5` | Amber at 12% |
+| `--admin-success` | `#1F4D2A` | (same as primary; semantic) |
+| `--admin-warning` | `#B8761E` | (same as accent; semantic) |
+| `--admin-danger` | `#A8321C` | Errors / destructive |
+| `--admin-danger-soft` | `#F7E3DE` | Danger at 12% |
+
+**Drop**: `--admin-warning: #aba278` (looks like dirt), the old `citrus` orange in the active state, the blue/purple stat icons. Replace with semantic use of the new palette.
+
+## 4. IA decision
+
+Sidebar groups, top to bottom, with section dividers:
+
+| Group | Items |
+|---|---|
+| **Workspace** | Dashboard · Command Center (platform_admin only) |
+| **Operations** | Orders · Stops & Routes · Products · Driver Pickup · Shipping |
+| **Communications** | Harvest Reach (campaigns, templates, contacts, segments, logs) |
+| **Growth** | Wholesale · Import Center · AI Intelligence |
+| **Tracking** | Time Tracking · Water Log · Route Trace |
+| **Insights** | Reports · Tax Dashboard |
+| **Settings** | General · Brand · Billing · Users & Permissions · Integrations · Payments · Shipping · Add-ons |
+
+The old "Workers & PINs" sidebar item is a tab on Time Tracking now. Settings is one click → secondary nav inside settings (tabs at the top of the page).
+
+**Cmd+K command palette** for global search across:
+- Pages (jumps to any admin route)
+- Recent orders / products / stops / customers (live search)
+- Quick actions ("Create order", "Add product", "Send blast")
+
+## 5. Component patterns (consistency pass)
+
+| Pattern | Owner | Status |
+|---|---|---|
+| `PageHeader` (eyebrow + title + subtitle + actions) | `src/components/admin/design-system/PageHeader.tsx` | exists, audit usage |
+| `EmptyState` (icon + title + body + CTA) | same dir, currently `EmptyState.tsx` exists for shared, admin needs its own | add `.ha-empty` |
+| `LoadingState` (skeleton + label) | `.ha-skeleton` exists in CSS, no component | wrap |
+| `ConfirmDialog` (destructive action) | `AdminDeleteConfirm.tsx` exists | audit usage |
+| `StatusPill` (success/warn/danger/info/neutral) | `AdminBadge.tsx` exists, variants are off | tighten variants |
+| `KPIStat` (label + value + trend) | inline in `DashboardClient` | extract to component |
+| `CommandPalette` (Cmd+K) | **new** | new component |
+| `SideNavGroup` (label + items) | **new** | replaces flat NAV_ITEMS |
+| `DataTable` (sortable, filterable, paginated) | `shared/DataTable.tsx` exists | tighten + use everywhere |
+
+## 6. Phased execution (yolo, one day)
+
+**Phase 1 — Foundation (commit per file)**
+- Update `src/styles/admin-design-system.css` color tokens
+- New `SideNavGroup` component
+- Replace `AdminSidebar` flat list with grouped nav
+- New `CommandPalette` component (mounted in admin layout)
+- Refactor `DashboardClient` to unified command center (drop 4 tabs, single column feed)
+
+**Phase 2 — Pattern extraction (commit per file)**
+- Extract `KPIStat` from dashboard
+- Refine `EmptyState` admin variant
+- `LoadingState` wrapper
+- `StatusPill` tighten variants
+
+**Phase 3 — Apply to highest-traffic pages**
+- `/admin/orders` + detail
+- `/admin/products` + new + edit
+- `/admin/stops` calendar
+- `/admin/communications` composer
+- `/admin/settings/*` tabs
+
+**Phase 4 — Frontend polish**
+- Public page spot-check: hero spacing, section rhythm
+- Verify TypeScript + build green
+
+## 7. Risk & revert
+
+- Working on branch `design/ui-revamp-2026-06` (already created off `main`).
+- **Every milestone is its own commit.** `git reset --hard <sha>` reverts to that point.
+- **One-click full revert:** `git checkout main && git branch -D design/ui-revamp-2026-06` — but only after a failed `git push`.
+- Type-check (`npx tsc --noEmit`) + `npm run build` are the gate at the end of each phase. Build green = milestone accepted.
+- If something breaks the admin layout at runtime, `git revert HEAD` unwinds the most recent commit without losing history.
+- **Do not delete or rename files in this branch.** Only add, only modify. Easier to revert.
+
+## 8. Out of scope (yolo tomorrow, not now)
+
+- Wholesale portal pages (`/wholesale/*`)
+- Water-log standalone pages
+- Public marketing pages (pricing, blog, changelog) — polish later
+- Wholesale auth migration (separate task per MEMORY.md)
+- Migrating remaining legacy `supabase.from()` calls (separate task per MEMORY.md)
+
+## 9. What "done" looks like
+
+- [ ] Color tokens unified, no muddy mix
+- [ ] Sidebar has 6 visible groups with section labels
+- [ ] Cmd+K opens a command palette that can navigate to any admin page
+- [ ] Dashboard is a single feed, no 4-tab structure
+- [ ] Top 6 admin pages use the new PageHeader / StatusPill / EmptyState consistently
+- [ ] `npx tsc --noEmit` clean
+- [ ] `npm run build` clean
+- [ ] Dev server boots, `/admin` renders, sidebar works, Cmd+K opens