# 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