diff --git a/docs/superpowers/plans/2026-06-17-admin-redesign-checklist.md b/docs/superpowers/plans/2026-06-17-admin-redesign-checklist.md new file mode 100644 index 0000000..67c35db --- /dev/null +++ b/docs/superpowers/plans/2026-06-17-admin-redesign-checklist.md @@ -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 ` +- 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 # 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) diff --git a/docs/superpowers/specs/2026-06-17-admin-redesign.md b/docs/superpowers/specs/2026-06-17-admin-redesign.md new file mode 100644 index 0000000..f3df470 --- /dev/null +++ b/docs/superpowers/specs/2026-06-17-admin-redesign.md @@ -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 ` 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