Initial commit

10-design-blueprint.md

@@ -0,0 +1,133 @@
+# 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