Design System v1.0

Portal Prototype Hub

Interactive HTML prototype — fully navigable mockups implementing the Qiiub Design System. Phase 18 build spec.

WCAG 2.1 AA Poppins + Inter + JetBrains Mono Responsive 42 Screens
qiiub-admin
⚙️
Admin Portal
SystemAdmin + PartnerAdmin
Platform operations — partner management, merchant boarding, infrastructure monitoring, modules, audit, and alerts. Includes PartnerAdmin scoped view.
20 screens
Login Dashboard Partners Merchants Groups Servers Devices Sync Modules Flags Users Audit Alerts Partner View (4)
Open Admin Portal →
qiiub-portal
🏪
Merchant Portal
Admin / Manager / Cashier
Store operations — products, customers, purchasing, inventory, reports, and settings. Full multi-location support with role-based access.
14 screens
Login Dashboard Products Detail New Product Customers Detail Orders New PO Receive Reports Settings Locations Labels
Open Merchant Portal →
Internal Tool
🔄
Import Tool
RMS / RMH legacy migration
One-time data migration from Microsoft RMS/RMH into QIIUB. Desktop executable (.NET + Photino + React) + portal approval gates. Mockup tabs illustrate the end-to-end flow.
7 tabs
Desktop Tool Gate 1 Approval Upload Tracking Gate 2 Validation End-to-End Flow Tech Stack Upload Mechanism
Open Import Tool →
POS Cashier App
🧾
POS
Point of Sale — cashier-facing
Fullscreen cashier workflow. Preview of the product search and ficha experience — scan/type, left list + right detail, cashier-safe (no cost/margin). Standalone mockup; full POS suite in a later phase.
1 screen
Product Search + Ficha
Open POS Preview →
Prototype Notes
Tech Stack

Production: Vite + React + TypeScript + Tailwind (Phase 18). These mockups: pure HTML/CSS with _shared.css design tokens.

Typography

Poppins (UI headings, buttons) · Inter (data tables, inputs, stats) · JetBrains Mono (IDs, codes) · 16px base.

Brand Tokens

Core Purple #930EA5 · Navy #1A1040 · 70+ CSS custom properties. Source: assets/design-system/

Demo Data

Locations: Río Piedras, San José, Bayamón. Suppliers: Metro Distribuidores, Caribbean Supply Co. Puerto Rico context.

API Coverage

~195 endpoints · 304 tests · 17 phases complete. All screens map to real endpoint specs.

Architecture

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