Merchant Portal — Qiiub

▶ Start from Login → ← Back to all prototype screens

Auth

Split-screen login with Qiiub brand, BCPOS footer, SSO option.

Dashboard

Daily stats, sales chart, location performance, activity feed, alerts.

Product Catalog

Table with stock bars, category pills, bulk actions, filter/search.

6-tab edit form: General, Variants, Suppliers, Pricing, Inventory, Labels.

New Product Wizard

5-step wizard showing step 3: variant attributes + pricing matrix (9 variants).

Customers

Table with loyalty tiers, AR balances, stats header, search/filters.

Customer Detail

Hero card, 4 tabs: Profile, AR Account, Loyalty, Transaction History.

Purchasing

Purchase Orders

PO list with receipt progress bars, status pills, filter tabs.

New Purchase Order

PO header + editable lines + product picker drawer (scan/SKU/name) + live totals. Click Add product or press Ctrl K.

Receive Shipment

Receiving sheet with match/partial/over states, discrepancy alert, inventory impact preview.

Reports

5 built-in report cards, daily sales summary with chart and detail table.

Settings

Card grid of all settings categories + business profile inline form.

Locations & Terminals

Split panel: location list + detail with Info / Terminals / Settings tabs. Terminal cards with sync stats.

Label Templates

ZPL code editor (dark), preview with simulated barcode, placeholder reference table.

Admin Portal (qiiub-admin) — 20 screens

Admin Portal Index

Navigator for all 20 admin screens including partner view.

Design Notes

Stack: Vite + React + TypeScript + Tailwind (planned build). This prototype uses pure HTML/CSS/JS.

Fonts: Poppins (UI) · Inter (data/tables) · JetBrains Mono (IDs/codes) · 16px base

Colors: Core Purple #930EA5, Navy #1A1040 — see brand guide for full system

Suppliers: ProductSupplier table (equiv. RMH ItemSupplier) — Supplier Part # per product

Demo data: Locations: Río Piedras, San José, Bayamón

Architecture: Two apps (qiiub-admin + qiiub-portal) with shared UI library (qiiub-ui). See ADR-0036.