431 lines
17 KiB
Markdown
431 lines
17 KiB
Markdown
# 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.
|