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). 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:

: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:

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