Phase 4 UI Mockups¶
PlantUML Salt wireframes for the Dashboard MVP (Phase 4).
Purpose¶
These mockups provide visual guidance for the dashboard implementation. They are intended for:
- Stakeholder review — Understanding expected UI layout
- Design validation — Ensuring all required elements are included
- Human documentation — Onboarding and reference
Note: The AI implementing Phase 4 should primarily use the code examples in
../prompt-phase4.md. These mockups are supplementary visual documentation.
Mockups¶
| File | Description |
|---|---|
01-layout.puml |
Main dashboard layout with sidebar navigation |
02-dashboard-overview.puml |
Dashboard home with stats and recent orders |
03-orders-list.puml |
Orders list page with filters and pagination |
04-order-detail.puml |
Order detail view with print jobs and actions |
05-mappings-list.puml |
Product mappings list with status toggle |
06-mapping-form.puml |
Create/edit product mapping form |
07-logs-list.puml |
Activity logs with filtering and export |
08-login.puml |
Login page with API key authentication |
Rendered Mockups¶
Layout¶
Dashboard¶
Orders List¶
Order Detail¶
Mappings List¶
Mapping Form¶
Logs List¶
Login¶
Rendering¶
To render these mockups:
# Using PlantUML CLI
plantuml docs/_internal/prompts/mockups/*.puml
# Or use VS Code PlantUML extension
# Or view online at https://www.plantuml.com/plantuml/uml/
Style Guide¶
These wireframes use PlantUML Salt syntax:
Salt elements used:
{T}for tree structures (navigation){#}for tables{+}for bordered panels[ ]for buttons" "for text inputs^dropdown^for select dropdowns[X]/[ ]for checkboxes(X)/( )for radio buttons|for horizontal layout--for horizontal separator==for double separator[ ]for buttons" "for text inputs^dropdown^for select dropdowns[X]/[ ]for checkboxes(X)/( )for radio buttons