yslootahrobotics/.github/prompts/plan-adminDashboardAuthCrudEnhancements.prompt.md

Plan: Admin Dashboard Auth + CRUD + Enhancements

TL;DR

Add password authentication to the admin dashboard, enable full CRUD for personas/pricing, and add useful admin features like order analytics and configurator settings management.

Phase 1: Admin Authentication (Database-backed with Prisma + SQLite)

Steps

1. Setup Prisma + SQLite

   • Install prisma and @prisma/client
   • Create prisma/schema.prisma with SQLite provider
   • Models: AdminUser (id, username, passwordHash, createdAt), AppSettings (key, value)
   • Run npx prisma db push to create the database
   • Create src/lib/prisma.ts singleton Prisma client

2. Create seed script prisma/seed.ts

   • Creates default admin user with bcrypt-hashed password
   • Generates and stores JWT secret in AppSettings table
   • Run with npx prisma db seed

3. Create admin auth API routes

   • src/app/api/admin/login/route.ts POST, accepts { username, password }, verifies bcrypt hash from DB, returns JWT in httpOnly cookie (JWT secret from DB)
   • src/app/api/admin/verify/route.ts GET, checks JWT cookie validity
   • src/app/api/admin/logout/route.ts POST, clears auth cookie
   • src/app/api/admin/change-password/route.ts POST, accepts { currentPassword, newPassword }, updates hash in DB

4. Create admin middleware src/middleware.ts

   • Protects all /admin/* routes (except /admin/login/)
   • Checks for valid JWT cookie, redirects to /admin/login/ if missing/invalid
   • Note: middleware can't use Prisma directly (edge runtime), so JWT secret needs to be in env OR verify via API call

5. Create admin login page src/app/admin/login/page.tsx

   • Username + password form (styled to match existing admin design)
   • Calls login API, redirects to /admin/ on success
   • Shows error on wrong credentials

6. Add JWT_SECRET to .env.local (only this one password is in DB)

   • Alternative: store JWT secret in DB and load at startup into a module-level cache

Dependencies to install

• prisma (dev), @prisma/client, bcryptjs, @types/bcryptjs (dev), jose

Phase 2: Full CRUD for Pricing Items + Personas

Steps (depends on Phase 1)

6. Add/Remove pricing items in admin Update src/app/admin/page.tsx

   • "Add Item" button with fields: id (auto-slug from label), label, price
   • Delete button per row (with confirmation)
   • Update usePricingStore to support addItem() and removeItem() actions

7. Persona management section New section in admin page

   • List current personas with edit capability (label, description, colors)
   • Add new persona form
   • Delete persona button
   • Create usePersonaStore or extend usePricingStore to manage persona definitions
   • Sync persona list with ConfigPanel's PERSONA_OPTIONS (currently hardcoded)

Phase 3: Additional Admin Features

Steps (parallel with Phase 2)

8. Orders dashboard section New section in admin page

   • Show orders from Stripe API (list recent payments)
   • Display: order ID, customer email, amount, status, date
   • New API route src/app/api/admin/orders/route.ts to fetch from Stripe

9. Analytics overview cards at top of admin page

   • Total revenue (from Stripe)
   • Number of orders
   • Most popular persona
   • Most popular color

10. Configurator settings section

    • Edit default color (#96a2b6)
    • Toggle available color options
    • Set min/max price boundaries

11. Logout button in admin header

Relevant Files

• src/app/admin/page.tsx Main admin dashboard (add CRUD UI, analytics)
• src/app/admin/login/page.tsx New login page
• src/app/api/admin/login/route.ts New auth API
• src/app/api/admin/verify/route.ts New verify API
• src/app/api/admin/orders/route.ts New orders API
• src/middleware.ts New, protects admin routes
• src/lib/prisma.ts New, Prisma client singleton
• prisma/schema.prisma New, database schema (AdminUser, AppSettings)
• prisma/seed.ts New, seeds default admin user
• src/store/usePricingStore.ts Add addItem(), removeItem() actions
• src/components/ConfigPanel.tsx Persona options currently hardcoded (PERSONA_OPTIONS const)
• .env.local Add ADMIN_PASSWORD, ADMIN_JWT_SECRET

Verification

1. Visit /admin/ without login → redirected to /admin/login/
2. Enter wrong password → error message shown
3. Enter correct password → redirected to /admin/
4. Add a pricing item → appears in configurator pricing breakdown
5. Remove a pricing item → disappears from pricing
6. Edit persona → reflected in ConfigPanel
7. Orders section shows real Stripe payment data
8. Refresh admin page → still logged in (cookie persists)
9. Run npx vitest run → all existing tests pass

Decisions

• Database: Prisma + SQLite file-based, no external server needed, real ORM
• Admin password stored as bcrypt hash in DB (not in env vars)
• JWT secret stored in AppSettings table in DB
• JWT in httpOnly cookie secure, no localStorage tokens
• jose library for JWT lightweight, edge-compatible (works in Next.js middleware)
• Personas need to move from hardcoded array to store-driven breaking change in ConfigPanel
• Stripe orders fetched via Stripe API directly no local DB needed for orders

Further Considerations

1. Persona storage: Currently hardcoded in ConfigPanel. Moving to a store means ConfigPanel reads from store dynamically. This is required for admin CRUD to work. Recommended: create persona store with localStorage persistence (same pattern as pricing store)
2. Stripe orders vs local orders: Currently orders only exist client-side. To show in admin, we fetch from Stripe's payment intents list. Recommended: use Stripe API directly, no local DB needed
3. Multi-admin support: Currently single password. If needed later, can upgrade to NextAuth with credentials provider. Recommended: start simple, upgrade if needed