pplate/cannamanage

Fork 0

Files

T

Patrick Plate f8f562915e docs: Sprint 4 visual tour with 19 Playwright screenshots

2026-06-12 17:35:39 +02:00

5.1 KiB

Raw Permalink Blame History

🌿 CannaManage — Visual Tour (Sprint 4)

Generated: 2026-06-12 | Commit: fe6e96d | 19 Screenshots | Dark + Light Mode

🔐 Chapter 1: Authentication

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

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:

Select member — search + status check
Quota check — shows remaining daily (25g) and monthly (50g/30g) with color coding
Batch + amount — select from available batches, enter grams
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:

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

5.1 KiB Raw Permalink Blame History Unescape Escape