Tyler
bd2dadd9ee
- 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
136 lines
7.2 KiB
Markdown
136 lines
7.2 KiB
Markdown
# 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
|