From 093bdcc7a6a54fd4d108145050823e94c2dcfd02 Mon Sep 17 00:00:00 2001 From: jamey Date: Wed, 11 Feb 2026 16:51:42 +0000 Subject: [PATCH] add admin redesign plan and update progress roadmap Co-Authored-By: Claude Opus 4.6 --- PROGRESS.md | 17 +- docs/plans/admin-redesign.md | 430 +++++++++++++++++++++++++++++++++++ 2 files changed, 442 insertions(+), 5 deletions(-) create mode 100644 docs/plans/admin-redesign.md diff --git a/PROGRESS.md b/PROGRESS.md index 97d4707..e7be366 100644 --- a/PROGRESS.md +++ b/PROGRESS.md @@ -22,13 +22,20 @@ **Tier 1 MVP complete.** CI pipeline done. Hosting & deployment done (including observability). PageSpeed CI done (99-100 mobile, 97+ desktop). Usability fixes mostly done (15/18). Next up: setup wizard, then real product data, then shipping costs. -## Next Up: Setup Wizard → Real Products → Shipping +## Next Up -Three linked tasks to make the shop fully functional for real orders: +Two parallel tracks to make the shop fully functional: -1. **Setup wizard & go-live gate** — coming soon page for public visitors, admin setup checklist, go-live toggle. See [docs/plans/setup-wizard.md](docs/plans/setup-wizard.md) -2. **Wire real product data** — replace PreviewData with Products context on shop pages (depends on setup wizard being done so there's a gate while testing) -3. **Shipping costs at checkout** — Printify shipping rates or Stripe shipping options (depends on real products being connected) +**Track A — Admin redesign** (can start now): +1. **Admin shell & dashboard** — sidebar nav, admin root layout, dashboard landing page. See [docs/plans/admin-redesign.md](docs/plans/admin-redesign.md) +2. **Custom admin CSS** — replace DaisyUI with lean admin stylesheet (phase 2 of admin redesign) + +**Track B — Real orders** (setup wizard first, then sequential): +1. **Setup wizard & go-live gate** — admin account creation, coming soon page, setup checklist, go-live toggle. See [docs/plans/setup-wizard.md](docs/plans/setup-wizard.md) +2. **Wire real product data** — replace PreviewData with Products context on shop pages +3. **Shipping costs at checkout** — Printify shipping rates or Stripe shipping options + +The admin dashboard (A1) and setup wizard (B1) converge: the dashboard IS the setup wizard for new installs. ## Usability Issues (from user testing, Feb 2025) diff --git a/docs/plans/admin-redesign.md b/docs/plans/admin-redesign.md new file mode 100644 index 0000000..15adce0 --- /dev/null +++ b/docs/plans/admin-redesign.md @@ -0,0 +1,430 @@ +# Plan: Admin area redesign + +Status: Pending + +## Overview + +The admin area is currently a collection of separate pages with no shared layout, inconsistent navigation, and no cohesive feel. This plan redesigns it into a proper admin shell with sidebar navigation, a dashboard landing page, and eventually custom CSS to replace DaisyUI. + +## Current state + +**6 admin pages across 3 LiveView directories:** +- `/admin/theme` → `ThemeLive.Index` — full-screen two-pane theme editor (custom layout) +- `/admin/orders` → `AdminLive.Orders` — order list with status filter tabs +- `/admin/orders/:id` → `AdminLive.OrderShow` — order detail +- `/admin/settings` → `AdminLive.Settings` — Stripe credentials +- `/admin/providers` → `ProviderLive.Index` — Printify connection list +- `/admin/providers/new|:id/edit` → `ProviderLive.Form` — add/edit Printify connection +- Plus: `/admin/dashboard` (LiveDashboard), `/admin/errors` (ErrorTracker) + +**Problems:** +1. No shared admin layout — each page uses the generic `Layouts.app` wrapper +2. Navigation is just text links in `root.html.heex` — no sidebar, no active states, no hierarchy +3. No admin bar on shop pages — admin has no indication they're logged in while browsing +4. No dashboard/landing page — `/admin` just redirects to `/admin/theme` +5. Settings are split: Stripe at `/admin/settings`, Printify at `/admin/providers`, user account at `/users/settings` +6. Theme editor has its own custom layout unrelated to other admin pages +7. Admin uses DaisyUI + core_components, shop uses custom theme CSS — two different design systems +8. No mobile-friendly admin navigation + +**Current CSS setup:** +- `app.css` — Tailwind + DaisyUI + heroicons + theme layers (admin pages) +- `app-shop.css` — Tailwind + heroicons + theme layers, no DaisyUI (shop pages) +- `root.html.heex` loads `app.css` (admin root layout) +- `shop_root.html.heex` loads `app-shop.css` (shop root layout) + +## Design goals + +- **One admin, one shop** — clear visual distinction between admin and storefront +- **Consistent navigation** — sidebar on desktop, bottom sheet or hamburger on mobile +- **Dashboard-first** — landing page shows setup status, recent orders, quick stats +- **Theme editor stays special** — it needs its full-screen two-pane layout, but should still feel connected to the admin +- **Custom CSS** — eventually replace DaisyUI with a lean admin stylesheet +- **Progressive** — phase 1 uses existing components, phase 2 swaps the CSS + +## Phase 0: Filesystem restructure + +The admin LiveViews are scattered across three directories. Consolidate before building the new layout. + +**Current:** +``` +live/ + admin_live/ → orders.ex, order_show.ex, settings.ex + theme_live/ → index.ex, index.html.heex + provider_live/ → index.ex, form.ex + user_live/ → login.ex, registration.ex, settings.ex, confirmation.ex + shop_live/ → home.ex, collection.ex, product.ex, content.ex, coming_soon.ex +``` + +**Target:** +``` +live/ + admin/ → all admin LiveViews + dashboard.ex + orders.ex + order_show.ex + settings.ex (absorbs user settings + Stripe + Printify) + theme/ + index.ex + index.html.heex + providers/ + index.ex + form.ex + shop/ → all shop LiveViews + home.ex + collection.ex + product.ex + content.ex + coming_soon.ex + auth/ → authentication only (no "users" concept) + login.ex + confirmation.ex +``` + +Note: `registration.ex` is deleted (replaced by setup wizard `/setup` page). `user_live/settings.ex` is absorbed into `admin/settings.ex`. + +**Module rename mapping:** +- `AdminLive.Orders` → `Admin.Orders` +- `AdminLive.OrderShow` → `Admin.OrderShow` +- `AdminLive.Settings` → `Admin.Settings` +- `ThemeLive.Index` → `Admin.Theme.Index` +- `ProviderLive.Index` → `Admin.Providers.Index` +- `ProviderLive.Form` → `Admin.Providers.Form` +- `ShopLive.Home` → `Shop.Home` (etc.) +- `UserLive.Login` → `Auth.Login` +- `UserLive.Confirmation` → `Auth.Confirmation` +- `UserLive.Registration` → deleted (replaced by setup wizard) +- `UserLive.Settings` → deleted (absorbed into `Admin.Settings`) + +**What needs updating per rename:** +- Module `defmodule` declaration +- Router references +- Test file paths and module names +- Any cross-module aliases or references +- `embed_templates` paths (theme editor) + +This is a mechanical refactor — best done as one atomic commit. Run `mix test` after to verify nothing's broken. + +**Estimate:** 1.5-2 hours + +## Phase 1: Admin layout and navigation + +Build the structural pieces first, using existing DaisyUI components. No CSS changes yet. + +### 1.1 Admin shell layout + +**New file:** `lib/simpleshop_theme_web/components/admin_components.ex` + +A shared admin layout component that wraps all admin pages: + +``` +┌─────────────────────────────────────────────┐ +│ Admin header bar [← Shop]│ +├──────────┬──────────────────────────────────┤ +│ Sidebar │ │ +│ │ Page content │ +│ Dashboard│ │ +│ Orders │ │ +│ Theme │ │ +│ Products*│ │ +│ Settings │ │ +│ │ │ +│ │ │ +│ ──────── │ │ +│ System │ │ +│ Log out │ │ +├──────────┴──────────────────────────────────┤ +│ (mobile: bottom nav or hamburger) │ +└─────────────────────────────────────────────┘ +``` + +*Products is future — for now it links to `/admin/providers` + +The shell provides: +- **Sidebar nav** (desktop) with icon + label for each section, active state highlighting +- **Header bar** with "← View shop" link and admin email +- **Mobile nav** — collapsible sidebar or bottom sheet (match the shop's mobile-first approach) +- **Content area** — where each admin page renders + +**Implementation:** +- `admin_shell` function component in `admin_components.ex` +- Takes `current_path` and `current_scope` as attrs +- Renders sidebar + content slot +- Each admin LiveView wraps its render in `<.admin_shell>` + +**Estimate:** 2-3 hours + +### 1.2 Admin root layout + +**File:** `lib/simpleshop_theme_web/components/layouts/admin_root.html.heex` (new) + +A dedicated root layout for admin pages that: +- Loads `app.css` (or later `app-admin.css`) +- Sets appropriate meta tags +- Doesn't include the shop nav/footer chrome +- Replaces the current generic `root.html.heex` for admin routes + +**File:** `lib/simpleshop_theme_web/components/layouts/admin.html.heex` (new) + +The admin child layout (equivalent of `shop.html.heex`): +- Renders flash messages +- Wraps `@inner_content` + +**Router change:** Admin routes get their own `root_layout: {Layouts, :admin_root}` + +**Estimate:** 1 hour + +### 1.3 Dashboard page + +**File:** `lib/simpleshop_theme_web/live/admin_live/dashboard.ex` (new) + +Replace the current `/admin` → redirect-to-theme with a proper dashboard: + +- **Setup status card** — reuses `Setup.setup_status/0` from the setup wizard plan. Shows checklist progress when not live, or "Shop is live" when live. +- **Recent orders card** — last 5 orders with status badges, link to full orders page +- **Quick stats** — total orders, total revenue, products count (simple queries) +- **Quick links** — edit theme, view shop, manage products + +When the shop isn't live yet, the dashboard IS the setup wizard (from [setup-wizard.md](setup-wizard.md)). This replaces the separate `/admin/setup` page from that plan — the dashboard absorbs its role. + +**Route:** `/admin` → `AdminLive.Dashboard` + +**Estimate:** 2 hours + +### 1.4 Consolidate settings + +Currently settings are split across three pages. Consolidate into one settings page with sections: + +**File:** `lib/simpleshop_theme_web/live/admin_live/settings.ex` (refactor) + +Sections: +- **Payments** — Stripe API key, webhook config (current `/admin/settings` content) +- **Products** — Printify connection, sync status (current `/admin/providers` content) +- **Account** — email, password change (current `/users/settings` content) +- **Advanced** — LiveDashboard link, ErrorTracker link, log out + +Each section is a collapsible card or tab. The existing `/admin/providers` and `/users/settings` routes can redirect here. + +**Estimate:** 2-3 hours + +### 1.5 Admin bar on shop pages + +**File:** `lib/simpleshop_theme_web/components/shop_components/layout.ex` + +When the admin is browsing the shop (authenticated), show a thin bar at the top: + +``` +┌──────────────────────────────────────────────┐ +│ Admin: [Dashboard] [Orders] [Theme] [← Back] │ +└──────────────────────────────────────────────┘ +``` + +- Fixed at top, minimal height (~32px) +- Distinct from the shop header (darker background, smaller text) +- Links to key admin pages +- "Not live" indicator when shop isn't live yet +- Can be dismissed/hidden per session if the admin wants a clean view + +**Implementation:** Add to `shop_layout` in layout.ex, conditional on `assigns[:current_scope]` + +**Estimate:** 1 hour + +### 1.6 Theme editor integration + +The theme editor has its own full-screen layout (sidebar controls + preview pane) that doesn't fit a standard sidebar nav. Options: + +**Approach: Overlay navigation** +- Theme editor keeps its full-screen layout +- A small "← Admin" button in the top-left corner returns to the admin shell +- The admin sidebar is hidden while in the theme editor +- This is similar to how Shopify's theme editor works — it's a separate "mode" + +No structural changes to the theme editor itself — just add the back-to-admin link. + +**Estimate:** 30 mins + +### 1.7 Navigation structure + +Final nav items for the sidebar: + +| Item | Route | Icon | Notes | +|------|-------|------|-------| +| Dashboard | `/admin` | home/grid | Landing page, setup wizard when not live | +| Orders | `/admin/orders` | shopping-bag | Order list with filters | +| Theme | `/admin/theme` | paintbrush | Opens full-screen editor | +| Settings | `/admin/settings` | cog | Consolidated settings page | + +Future additions (keep the nav extensible): +- Products — product management, when we have editable product data +- Pages — page editor (Tier 4) +- Analytics — when we add analytics (Tier 3) + +## Phase 2: Custom admin CSS + +Replace DaisyUI with a lean, purpose-built admin stylesheet. The shop already does this — `app-shop.css` has no DaisyUI. + +### 2.1 Design tokens + +**New file:** `assets/css/admin-tokens.css` + +A small set of CSS custom properties for the admin: + +```css +:root { + /* Admin colour palette — neutral, professional */ + --a-bg: #ffffff; + --a-bg-subtle: #f9fafb; + --a-bg-muted: #f3f4f6; + --a-border: #e5e7eb; + --a-border-subtle: #f0f0f0; + --a-text: #111827; + --a-text-secondary: #6b7280; + --a-text-muted: #9ca3af; + --a-accent: #4f46e5; /* indigo — distinct from shop accent */ + --a-accent-hover: #4338ca; + --a-success: #059669; + --a-warning: #d97706; + --a-error: #dc2626; + + /* Spacing scale (matches Tailwind) */ + --a-space-1: 0.25rem; + --a-space-2: 0.5rem; + /* ... etc */ + + /* Typography */ + --a-font: system-ui, -apple-system, sans-serif; + --a-font-mono: ui-monospace, monospace; + --a-radius: 0.375rem; + --a-radius-lg: 0.5rem; +} +``` + +Simple and fixed — no theming needed for admin. System font stack for speed. + +**Estimate:** 30 mins + +### 2.2 Admin component styles + +**New file:** `assets/css/app-admin.css` + +Replaces DaisyUI for admin pages. Structure: + +```css +@import "tailwindcss" source(none); +@source "../css"; +@source "../js"; +@source "../../lib/simpleshop_theme_web/live/admin"; +@source "../../lib/simpleshop_theme_web/live/user"; +@source "../../lib/simpleshop_theme_web/components/admin_components.ex"; +@source "../../lib/simpleshop_theme_web/components/core_components.ex"; +@source "../../lib/simpleshop_theme_web/components/layouts/admin_root.html.heex"; +@source "../../lib/simpleshop_theme_web/components/layouts/admin.html.heex"; + +@plugin "../vendor/heroicons"; + +/* NO daisyUI */ + +@import "./admin-tokens.css"; + +/* LiveView variants */ +@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &); +@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &); +@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &); + +/* LiveView wrapper transparency */ +[data-phx-session], [data-phx-teleported-src] { display: contents } +``` + +Component styles to build (minimal — just what core_components.ex needs): + +| Component | Current DaisyUI classes | Custom replacement | +|-----------|----------------------|-------------------| +| Button | `btn btn-primary` | `.admin-btn`, `.admin-btn-primary` | +| Input | `input input-bordered` | `.admin-input` | +| Table | `table` | `.admin-table` | +| Card | `card` | `.admin-card` | +| Badge | `badge badge-success` | `.admin-badge`, `.admin-badge-success` | +| Alert/Flash | `alert alert-info` | `.admin-alert` | +| Navbar | `navbar`, `menu menu-horizontal` | Custom sidebar styles | + +Each is ~5-15 lines of CSS. No need for DaisyUI's full component library. + +**Estimate:** 3-4 hours + +### 2.3 Migrate core_components.ex + +**File:** `lib/simpleshop_theme_web/components/core_components.ex` + +Replace DaisyUI class references with the new admin classes. This is a find-and-replace job: +- `btn btn-primary` → `admin-btn admin-btn-primary` +- `input input-bordered` → `admin-input` +- etc. + +Or better: keep using Tailwind utilities where possible and only use the custom classes for complex components. Most of core_components can stay as Tailwind-only. + +**Estimate:** 2 hours + +### 2.4 Remove DaisyUI + +Once all admin pages are migrated: +- Remove `@plugin "../vendor/daisyui"` from `app.css` (or delete `app.css` entirely if it's replaced by `app-admin.css`) +- Delete `vendor/daisyui.js` and `vendor/daisyui-theme.js` +- Update `admin_root.html.heex` to load `app-admin.css` +- Verify all admin pages still look correct + +**Estimate:** 1 hour + +## Task breakdown + +### Phase 0 — Filesystem restructure (~2 hours, 1 session) + +| # | Task | Estimate | +|---|------|----------| +| 0.1 | Rename admin LiveView directories and modules | 1 hour | +| 0.2 | Rename shop and user LiveView directories and modules | 30 mins | +| 0.3 | Update router, tests, aliases, embed_templates paths | 30 mins | + +### Phase 1 — Layout and navigation (~10-12 hours, 4-5 sessions) + +| # | Task | Estimate | +|---|------|----------| +| 1.1 | Admin shell component (`admin_components.ex`) | 2-3 hours | +| 1.2 | Admin root + child layout templates | 1 hour | +| 1.3 | Dashboard page (with setup wizard integration) | 2 hours | +| 1.4 | Consolidate settings page | 2-3 hours | +| 1.5 | Admin bar on shop pages | 1 hour | +| 1.6 | Theme editor back-to-admin link | 30 mins | +| 1.7 | Tests | 1.5 hours | + +### Phase 2 — Custom CSS (~7-8 hours, 3 sessions) + +| # | Task | Estimate | +|---|------|----------| +| 2.1 | Admin design tokens (`admin-tokens.css`) | 30 mins | +| 2.2 | Admin component styles (`app-admin.css`) | 3-4 hours | +| 2.3 | Migrate core_components.ex | 2 hours | +| 2.4 | Remove DaisyUI | 1 hour | +| 2.5 | Tests and visual QA | 1 hour | + +**Total: ~20-22 hours across 8-9 sessions** + +## Sequencing with other plans + +``` +Phase 0 (filesystem restructure) ← do first, one atomic commit +Phase 1.1-1.2 (admin shell) ← immediately after phase 0 +Phase 1.3 (dashboard) ← depends on setup wizard plan (Setup.setup_status/0) +Phase 1.4 (settings) ← independent +Phase 1.5 (admin bar) ← independent +Setup wizard ← uses dashboard as its home (1.3) +Phase 2 (custom CSS) ← after phase 1 is stable +``` + +Phase 1 and the setup wizard plan should be done together — the dashboard IS the setup wizard for new installs. + +## Open questions + +- Should the admin sidebar be collapsible (icon-only mode)? Probably yes for laptop screens, but not essential for MVP. +- Dark mode for admin? The shop has theme-controlled colours, but admin could support system dark mode via `prefers-color-scheme`. Nice-to-have, not blocking. +- Should the admin be responsive at all? The shop owner is likely managing from a laptop, but phone access for checking orders on the go would be useful. Leaning towards responsive sidebar (collapses to hamburger on mobile). +- Admin font: system font stack (fastest) or match the shop's heading font? System font keeps admin feeling distinct and loads instantly.