Patrick Plate
153 lines
5.1 KiB
Markdown
153 lines
5.1 KiB
Markdown
# 🌿 CannaManage — Visual Tour (Sprint 4)
|
||
|
||
**Generated:** 2026-06-12 | **Commit:** `fe6e96d` | **19 Screenshots** | **Dark + Light Mode**
|
||
|
||
---
|
||
|
||
## 🔐 Chapter 1: Authentication
|
||
|
||
### Admin Login
|
||
|
||
The admin login page greets club administrators with a clean, branded form. Email + password fields, CannaManage branding, and i18n-ready labels. Error states are handled gracefully when credentials fail.
|
||
|
||
| Dark Mode | Light Mode |
|
||
|-----------|------------|
|
||
|  |  |
|
||
|
||
---
|
||
|
||
### Member Portal Login
|
||
|
||
Members get a simplified login experience — same form but under the portal layout (top navigation instead of sidebar). This keeps the two user groups visually separated.
|
||
|
||
| Dark Mode | Light Mode |
|
||
|-----------|------------|
|
||
|  |  |
|
||
|
||
---
|
||
|
||
## 📊 Chapter 2: Admin Dashboard
|
||
|
||
### Club Overview
|
||
|
||
After login, admins land on the main dashboard. Four KPI cards at the top (active members, monthly distributions, stock weight, open recalls), a stock trend chart, recent distributions table, and quick action buttons.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Member Management
|
||
|
||
The members page uses TanStack Table with full search, column sorting, pagination, and status badges (Active 🟢, Suspended 🟡, Expelled 🔴). Click any row to edit.
|
||
|
||
|
||
|
||
---
|
||
|
||
## 📦 Chapter 3: Distribution & Compliance
|
||
|
||
### Distribution History
|
||
|
||
All past distributions with lock icons (🔒) indicating immutable audit records. Filter by date range or member. A "today" summary card shows daily totals.
|
||
|
||
|
||
|
||
---
|
||
|
||
### New Distribution — Multi-Step Form
|
||
|
||
The 4-step distribution form enforces CanG compliance at each stage:
|
||
1. **Select member** — search + status check
|
||
2. **Quota check** — shows remaining daily (25g) and monthly (50g/30g) with color coding
|
||
3. **Batch + amount** — select from available batches, enter grams
|
||
4. **Confirm** — review all details before recording
|
||
|
||
|
||
|
||
---
|
||
|
||
## 🌱 Chapter 4: Stock Management
|
||
|
||
### Batch Overview
|
||
|
||
Bar chart showing stock levels by strain, summary cards (total weight, batch count, pending recalls), and a table with recall buttons. Recalled batches are visually marked.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Add New Batch
|
||
|
||
Form to register new cannabis batches: strain selector, THC/CBD percentages, supplier info, harvest date, weight. All required for traceability.
|
||
|
||
|
||
|
||
---
|
||
|
||
## 📋 Chapter 5: Compliance Reports
|
||
|
||
### Report Center
|
||
|
||
Three report cards: Monthly Summary, Member List, and Recall Report. Each has download (PDF/CSV) and preview options. Reports are designed for regulatory submissions.
|
||
|
||
|
||
|
||
---
|
||
|
||
## 👤 Chapter 6: Member Portal
|
||
|
||
### Quota Dashboard
|
||
|
||
Members see their remaining quota as radial SVG progress rings — daily and monthly. Color-coded: green (<50%), amber (50-80%), red (>80%). Under-21 members see the reduced 30g/month limit.
|
||
|
||
| Dark Mode | Light Mode |
|
||
|-----------|------------|
|
||
|  |  |
|
||
|
||
---
|
||
|
||
### My Distribution History
|
||
|
||
Members can review their own past distributions. Month filter, lock icons confirming immutability. No edit/delete possible — read-only audit trail.
|
||
|
||
| Dark Mode | Light Mode |
|
||
|-----------|------------|
|
||
|  |  |
|
||
|
||
---
|
||
|
||
### Profile & Settings
|
||
|
||
Personal information (read-only, managed by admin), password change form, and preferences (language selector, theme toggle). Members can switch between dark/light mode here.
|
||
|
||
| Dark Mode | Light Mode |
|
||
|-----------|------------|
|
||
|  |  |
|
||
|
||
---
|
||
|
||
## 🎨 Theme Comparison
|
||
|
||
The entire application supports both dark and light mode with a single click toggle:
|
||
|
||
- **Dark** (default): `#0D1117` background, `#2ECC71` green accent — cannabis club aesthetic
|
||
- **Light**: `#FAFBFC` background, `#1B7A3D` darker green — for outdoor/mobile readability
|
||
|
||
---
|
||
|
||
## 📐 Tech Behind the Screenshots
|
||
|
||
- **Tool:** Playwright (Chromium, 1280×720 viewport)
|
||
- **Method:** Automated E2E script (`e2e/screenshot-tour.spec.ts`)
|
||
- **Auth:** Mock backend returning valid JWT session
|
||
- **Pages captured:** 12 unique routes × 2 themes (where auth allowed)
|
||
- **Total screenshots:** 19 PNG files (~1.2MB total)
|
||
|
||
To regenerate:
|
||
```bash
|
||
cd cannamanage-frontend
|
||
node e2e/mock-backend.mjs & # start mock auth backend
|
||
pnpm dev & # start Next.js dev server
|
||
pnpm exec playwright test e2e/screenshot-tour.spec.ts
|
||
```
|