# Design Blueprint - QRIS Soundbox Platform v1

## 1. Objective
Desain harus mendukung 4 persona utama:
- Admin Ops
- Finance Ops
- Merchant
- Field / Device Operations

Fokus desain:
- data heavy tapi cepat dipahami
- workflow operasional jelas
- merchant portal sederhana dan terpercaya
- device monitoring tidak membingungkan

## 2. Visual Direction
### Style keyword
- operational SaaS
- trustworthy fintech
- modern enterprise
- data-centric
- clean and fast

### Warna yang disarankan
- Primary: `#2563EB`
- Primary dark: `#1D4ED8`
- Success: `#16A34A`
- Warning: `#F59E0B`
- Danger: `#DC2626`
- Info: `#0EA5E9`
- Slate 900: `#0F172A`
- Slate 700: `#334155`
- Slate 500: `#64748B`
- Slate 200: `#E2E8F0`
- Slate 100: `#F1F5F9`
- Background: `#F8FAFC`

### Typography
- Inter / Plus Jakarta Sans / Geist
- heading semibold
- body regular
- gunakan tabular numbers untuk nominal dan metric

## 3. Layout Rules
- sidebar tetap di area admin dan merchant portal desktop
- topbar tinggi 72px
- page padding 24px
- 12-column desktop grid
- card padding 20-24px
- table row 52-56px

## 4. Komponen Utama
- KPI card
- metric card with trend
- data table with sticky header
- filter bar
- detail drawer
- status chips
- timeline vertical
- alert rail
- audit block / raw payload viewer
- command modal
- config panel

## 5. UX Rules
- tabel utama harus punya filter dan export
- detail transaksi dan device idealnya punya tab + side summary
- gunakan drawer untuk quick inspection, full page untuk deep work
- nominal, status, dan device health harus mudah dipindai
- raw payload harus bisa copy
- empty state harus selalu ada CTA

## 6. Page Groups
### Admin
- Dashboard
- Merchant Management
- Onboarding Review
- Device/TMS
- Transactions
- Ledger & Settlement
- Reconciliation
- Integration Settings
- Audit & Access Control

### Merchant Portal
- Dashboard
- Transactions
- Settlements
- Devices
- Outlets
- Profile & Bank Account
- Support

### Device UI
- Static notification screens
- Dynamic QR flow screens
- Error and offline states

## 7. Figma Pages Recommendation
1. Cover
2. Foundations
3. Components
4. Admin Dashboard
5. Merchant Portal
6. Device UI
7. Flows
8. Archive

## 8. Komponen Status Chips yang Wajib
- active
- inactive
- pending
- approved
- rejected
- online
- offline
- degraded
- paid
- expired
- failed
- retrying
- settled
- payout_failed

## 9. Prioritas Desain Pertama
1. Admin Dashboard
2. Merchant Detail
3. Device Registry + Device Detail
4. Transaction List + Detail
5. Settlement Batch + Detail
6. Merchant Dashboard
7. Merchant Transaction History
8. Dynamic Device UI states