Merchant Portal — Prototype

Clickable HTML prototype · Merchant Portal (qiiub-portal) · Start from login or jump to any screen

Created: 2026-04-02 | Last Updated: 2026-08-14

▶ Start from Login → ← Back to all prototype screens
Auth
Login
Split-screen login with Qiiub brand, BCPOS footer, SSO option.
Dashboard
Dashboard
Daily stats, sales chart, location performance, activity feed, alerts.
Product Catalog
Product List
Table with stock bars, category pills, bulk actions, filter/search.
Product Detail
6-tab edit form: General, Variants, Suppliers, Pricing, Inventory, Labels.
Suppliers tab
Product Images
Images tab composition: dropzone, sortable cards, alt text, zoom, cap and offline states.
#1100
New Product Wizard
5-step wizard showing step 3: variant attributes + pricing matrix (9 variants).
Customers
Customer List
Table with loyalty tiers, AR balances, stats header, search/filters.
Customer Detail
Hero card, 4 tabs: Profile, AR Account, Loyalty, Transaction History.
Inventory
Inventory Hub
Landing con Stock, Documents (Adjustments/Counts), Activity (Movements).
Stock by Location
Stock actual por location: cantidades, costos, badges (healthy/low/out).
Movement Log
Auditoría de movimientos: sales, receipts, adjustments, transfers, counts.
Low Stock Alerts
Items bajo reorder point con sugerencias y CTA "Generate PO".
Stock Counts
Lista de conteos físicos con progress y varianza.
Count Detail
Detalle de conteo en progreso (hero navy + tabs General/Items/Close).
Adjustments
Ajustes manuales con reason codes (Damage, Theft, Found, Cycle).
Adjustment Detail
Detalle de adjustment en draft (hero navy + tabs General/Lines).
Distribution
Distributions
Lista de distribuciones con barra de fulfillment por fila (plan vs enviado) y badge de varianza.
Distribution Detail
Hero navy + tabs General/Lines/Destinations/Transfers. El tab Destinations compara plan vs enviado vs recibido por tienda.
New Distribution
Selección de destinos + líneas del recibo, con drawer de asignación por ítem y “Split evenly”. Abre con el drawer visible.
Transfer (gestionado)
Delta sobre el detalle de transfer existente: pill de origen “From DST” y acciones de editar/cancelar deshabilitadas con su razón.
Receipt → Distribute
Delta sobre el detalle del recibo: acción “Distribute to stores” en sus tres estados y la lista de distribuciones que ese recibo ya generó.
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
Reports
5 built-in report cards, daily sales summary with chart and detail table.
Settings
Settings Hub
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.
Qiiub Portal Prototype · Powered by BCPOS · 2026 · CONFIDENTIAL — Internal Use Only

Created: 2026-04-30 · Last Updated: 2026-08-18