simpleshop_theme/docs/plans/admin-redesign.md

# Plan: Admin area redesign

Status: Complete

## 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.