134 lines
2.6 KiB
Markdown
134 lines
2.6 KiB
Markdown
# 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
|