872 lines
15 KiB
Markdown
872 lines
15 KiB
Markdown
# Struktur Screen WhatsApp Inbox MVP
|
|
|
|
Dokumen ini merangkum struktur screen dari A-Z berdasarkan PRD, sitemap, user flow, ERD, roadmap, dan arsitektur teknis.
|
|
|
|
Tujuan dokumen:
|
|
- menjadi acuan desain UI/UX
|
|
- memetakan semua screen yang dibutuhkan untuk MVP
|
|
- memisahkan kebutuhan per role
|
|
- membantu prioritas desain agar tidak melebar
|
|
|
|
## 1. Prinsip Desain Screen
|
|
|
|
- Produk ini adalah mesin operasional percakapan, jadi inbox adalah pusat desain.
|
|
- Screen harus dibedakan berdasarkan role: `super_admin`, `admin_client`, `agent`.
|
|
- Mayoritas aktivitas inti harus selesai dalam 2-3 klik.
|
|
- Desktop-first, tetapi tetap responsif untuk tablet/mobile.
|
|
- Data tenant tidak boleh tercampur antar workspace.
|
|
- State penting harus jelas: loading, empty, success, error, disconnected.
|
|
|
|
## 2. Peta Besar Screen
|
|
|
|
Kelompok screen MVP:
|
|
1. Public / Auth
|
|
2. Shared App Shell
|
|
3. Super Admin
|
|
4. Admin Client
|
|
5. Agent
|
|
6. Shared Reusable Screens / States
|
|
|
|
## 3. Public / Auth Screens
|
|
|
|
### 3.1 Login
|
|
Tujuan:
|
|
- user masuk ke workspace sesuai role
|
|
|
|
Elemen inti:
|
|
- email
|
|
- password
|
|
- show/hide password
|
|
- submit button
|
|
- forgot password link
|
|
- error alert
|
|
|
|
Catatan desain:
|
|
- harus bersih dan cepat dipahami
|
|
- perlu state invalid credential
|
|
|
|
### 3.2 Forgot Password
|
|
Tujuan:
|
|
- user meminta reset password
|
|
|
|
Elemen inti:
|
|
- email input
|
|
- submit reset request
|
|
- success info
|
|
- back to login
|
|
|
|
### 3.3 Reset Password
|
|
Tujuan:
|
|
- user mengganti password dari link reset
|
|
|
|
Elemen inti:
|
|
- new password
|
|
- confirm password
|
|
- password rules
|
|
- submit
|
|
- expired token state
|
|
|
|
### 3.4 Invitation Acceptance
|
|
Tujuan:
|
|
- user baru menerima invite dan membuat password awal
|
|
|
|
Elemen inti:
|
|
- invited email
|
|
- full name
|
|
- password setup
|
|
- confirm password
|
|
- accept invitation
|
|
|
|
### 3.5 Unauthorized / Forbidden
|
|
Tujuan:
|
|
- memberi feedback saat user membuka halaman di luar izin role
|
|
|
|
Elemen inti:
|
|
- message
|
|
- back to dashboard
|
|
|
|
## 4. Shared App Shell
|
|
|
|
Screen ini bukan halaman bisnis utama, tapi fondasi semua role.
|
|
|
|
### 4.1 App Shell Desktop
|
|
Elemen inti:
|
|
- sidebar
|
|
- topbar
|
|
- page header
|
|
- global search
|
|
- notifications
|
|
- profile menu
|
|
- tenant/workspace indicator
|
|
- channel status indicator
|
|
|
|
### 4.2 Sidebar by Role
|
|
Varian:
|
|
- super admin sidebar
|
|
- admin client sidebar
|
|
- agent sidebar
|
|
|
|
### 4.3 Profile Menu
|
|
Isi:
|
|
- my profile
|
|
- change password
|
|
- logout
|
|
|
|
### 4.4 Global Search Overlay
|
|
Tujuan:
|
|
- cari conversation, contact, tenant, atau user secara cepat
|
|
|
|
### 4.5 Notification Center
|
|
Jenis notifikasi:
|
|
- assignment update
|
|
- channel disconnected
|
|
- campaign completed
|
|
- delivery failure
|
|
- invitation/user update
|
|
|
|
## 5. Super Admin Screens
|
|
|
|
Super Admin fokus ke governance, tenant, channel, billing, dan kesehatan platform.
|
|
|
|
### 5.1 Super Admin Dashboard
|
|
Tujuan:
|
|
- melihat KPI global platform
|
|
|
|
Widget inti:
|
|
- active tenants
|
|
- active channels
|
|
- disconnected channels
|
|
- message volume overview
|
|
- delivery failure summary
|
|
- subscription health
|
|
- platform alerts
|
|
|
|
Sub-state:
|
|
- no tenant yet
|
|
- high error alert
|
|
|
|
### 5.2 Tenant List
|
|
Tujuan:
|
|
- melihat semua tenant
|
|
|
|
Elemen inti:
|
|
- search
|
|
- filters: status, plan, channel status
|
|
- table/list tenants
|
|
- quick actions
|
|
- create tenant button
|
|
|
|
### 5.3 Create Tenant
|
|
Form fields:
|
|
- company name
|
|
- tenant name
|
|
- slug/workspace
|
|
- timezone
|
|
- subscription plan
|
|
- initial admin email
|
|
|
|
### 5.4 Tenant Detail
|
|
Section:
|
|
- company profile
|
|
- subscription plan
|
|
- channel status
|
|
- usage summary
|
|
- seat usage
|
|
- recent activity snapshot
|
|
|
|
Quick actions:
|
|
- edit tenant
|
|
- suspend/reactivate
|
|
- connect channel
|
|
- view audit
|
|
|
|
### 5.5 Edit Tenant
|
|
Elemen inti:
|
|
- profile form
|
|
- timezone
|
|
- status
|
|
- plan
|
|
|
|
### 5.6 Suspend / Reactivate Tenant Confirmation
|
|
Tujuan:
|
|
- mencegah aksi sensitif dilakukan tanpa konfirmasi
|
|
|
|
### 5.7 Channel List
|
|
Tujuan:
|
|
- melihat semua channel WhatsApp yang terkoneksi
|
|
|
|
Elemen inti:
|
|
- connected numbers list
|
|
- provider
|
|
- status
|
|
- webhook status
|
|
- last sync
|
|
- tenant owner
|
|
|
|
### 5.8 Connect Channel
|
|
Form fields:
|
|
- provider
|
|
- WABA ID
|
|
- phone number ID
|
|
- display number
|
|
- webhook configuration
|
|
- verification/test action
|
|
|
|
State penting:
|
|
- validation success
|
|
- connection failed
|
|
|
|
### 5.9 Channel Detail
|
|
Section:
|
|
- WhatsApp account info
|
|
- phone status
|
|
- webhook health
|
|
- last sync status
|
|
- delivery issue summary
|
|
- reconnect action
|
|
- disconnect action
|
|
|
|
### 5.10 Subscription Plan Catalog
|
|
Tujuan:
|
|
- melihat daftar plan paket
|
|
|
|
Elemen inti:
|
|
- plan cards/table
|
|
- message quota
|
|
- seat quota
|
|
- broadcast quota
|
|
- feature list
|
|
|
|
### 5.11 Tenant Subscription List
|
|
Tujuan:
|
|
- melihat plan aktif tenant
|
|
|
|
Elemen inti:
|
|
- tenant
|
|
- current plan
|
|
- usage
|
|
- renewal state
|
|
- upgrade/downgrade history shortcut
|
|
|
|
### 5.12 Invoices List
|
|
Elemen inti:
|
|
- invoice number
|
|
- tenant
|
|
- period
|
|
- amount
|
|
- payment status
|
|
- due date
|
|
|
|
### 5.13 Invoice Detail
|
|
Elemen inti:
|
|
- invoice summary
|
|
- line items
|
|
- tax
|
|
- payment status
|
|
- paid date
|
|
|
|
### 5.14 Platform Reports
|
|
Area laporan:
|
|
- global message traffic
|
|
- tenant growth
|
|
- broadcast usage
|
|
- failure and retry monitoring
|
|
- tenant activity summary
|
|
|
|
### 5.15 Audit Log
|
|
Tujuan:
|
|
- melihat log aktivitas lintas platform
|
|
|
|
Elemen inti:
|
|
- filters: tenant, actor, entity, date
|
|
- event list
|
|
- log detail drawer/modal
|
|
|
|
### 5.16 Security Events
|
|
Elemen inti:
|
|
- failed logins
|
|
- suspicious access
|
|
- role/permission changes
|
|
|
|
### 5.17 API / Webhook Logs
|
|
Tujuan:
|
|
- investigasi issue integrasi
|
|
|
|
Elemen inti:
|
|
- provider event list
|
|
- process status
|
|
- failed reason
|
|
- payload preview
|
|
|
|
### 5.18 System Notifications / Alerts
|
|
Tujuan:
|
|
- melihat alert penting secara terpusat
|
|
|
|
### 5.19 Platform Settings
|
|
Area:
|
|
- platform profile
|
|
- pricing config
|
|
- feature flags
|
|
- template policy config
|
|
|
|
## 6. Admin Client Screens
|
|
|
|
Admin Client adalah pengguna operasional tenant yang paling lengkap.
|
|
|
|
### 6.1 Admin Dashboard
|
|
Widget inti:
|
|
- today conversation summary
|
|
- open conversations
|
|
- waiting reply
|
|
- resolved today
|
|
- unresolved > x hours
|
|
- active agents
|
|
- agent workload snapshot
|
|
- broadcast performance snapshot
|
|
- contact growth
|
|
|
|
Shortcut:
|
|
- go to inbox
|
|
- create campaign
|
|
- add contact
|
|
- invite user
|
|
|
|
### 6.2 Shared Inbox - All Conversations
|
|
Tujuan:
|
|
- pusat semua percakapan tenant
|
|
|
|
Elemen inti:
|
|
- tab/filter: all, unassigned, assigned to me, team inbox, resolved, spam/archived
|
|
- search conversation/contact
|
|
- channel filter
|
|
- agent filter
|
|
- status filter
|
|
- priority filter
|
|
- conversation list
|
|
- unread badge
|
|
- last message preview
|
|
|
|
### 6.3 Shared Inbox - Conversation Detail
|
|
Ini screen paling penting di seluruh produk.
|
|
|
|
Area utama:
|
|
- conversation header
|
|
- customer identity card
|
|
- tags
|
|
- assignment panel
|
|
- status selector
|
|
- priority selector
|
|
- message timeline
|
|
- attachment preview
|
|
- quick replies / canned responses
|
|
- template picker
|
|
- reply composer
|
|
- internal notes
|
|
- activity log
|
|
|
|
Quick actions:
|
|
- assign / reassign
|
|
- mark pending
|
|
- mark resolved
|
|
- archive / spam
|
|
- add note
|
|
- add tag
|
|
|
|
### 6.4 Shared Inbox - Empty / No Selection State
|
|
Tujuan:
|
|
- menampilkan keadaan saat belum ada conversation dipilih
|
|
|
|
### 6.5 Shared Inbox - Disconnected Channel State
|
|
Tujuan:
|
|
- memberi alert saat channel tenant bermasalah
|
|
|
|
### 6.6 Contact List
|
|
Elemen inti:
|
|
- search
|
|
- filters: tag, segment, opt-in status, channel
|
|
- table/list contacts
|
|
- import button
|
|
- export button
|
|
- add contact button
|
|
|
|
### 6.7 Create Contact
|
|
Fields:
|
|
- full name
|
|
- phone number
|
|
- email
|
|
- country code
|
|
- tags
|
|
- opt-in status
|
|
- external ref
|
|
|
|
### 6.8 Edit Contact
|
|
Tujuan:
|
|
- mengubah data contact yang sudah ada
|
|
|
|
### 6.9 Contact Detail
|
|
Section:
|
|
- profile
|
|
- custom fields
|
|
- tags
|
|
- segment membership
|
|
- last interaction
|
|
- opt-in / opt-out status
|
|
- conversation history
|
|
- campaign history
|
|
|
|
### 6.10 Import Contacts
|
|
Elemen inti:
|
|
- upload CSV
|
|
- field mapping
|
|
- validation preview
|
|
- import summary
|
|
|
|
### 6.11 Export Contacts
|
|
Elemen inti:
|
|
- choose filter
|
|
- choose export fields
|
|
- export action
|
|
|
|
### 6.12 Segments / Lists
|
|
Tujuan:
|
|
- mengelola audience untuk broadcast
|
|
|
|
Elemen inti:
|
|
- segment list
|
|
- create segment
|
|
- edit rules
|
|
- member count
|
|
|
|
### 6.13 Segment Detail
|
|
Elemen inti:
|
|
- segment metadata
|
|
- rules
|
|
- contacts preview
|
|
- campaigns using this segment
|
|
|
|
### 6.14 Template List
|
|
Elemen inti:
|
|
- template name
|
|
- category
|
|
- language
|
|
- approval status
|
|
- channel
|
|
- last updated
|
|
- create template request
|
|
|
|
### 6.15 Create Template Request
|
|
Fields:
|
|
- template name
|
|
- category
|
|
- language
|
|
- header type
|
|
- body text
|
|
- footer text
|
|
- buttons
|
|
|
|
### 6.16 Template Detail
|
|
Elemen inti:
|
|
- content preview
|
|
- provider template ID
|
|
- approval status
|
|
- rejected reason
|
|
- related campaigns
|
|
|
|
### 6.17 Campaign List
|
|
Tujuan:
|
|
- melihat semua campaign broadcast
|
|
|
|
Elemen inti:
|
|
- search
|
|
- status filter
|
|
- channel filter
|
|
- date filter
|
|
- create campaign button
|
|
- summary cards
|
|
|
|
### 6.18 Create Campaign
|
|
Langkah desain yang disarankan:
|
|
1. isi metadata campaign
|
|
2. pilih channel
|
|
3. pilih template
|
|
4. pilih audience
|
|
5. pilih send now atau schedule
|
|
6. review recipient estimate
|
|
7. submit
|
|
|
|
Field inti:
|
|
- campaign name
|
|
- campaign type
|
|
- template
|
|
- audience source
|
|
- segment/manual/import
|
|
- scheduled at
|
|
|
|
### 6.19 Campaign Review
|
|
Tujuan:
|
|
- memastikan user review sebelum enqueue broadcast
|
|
|
|
Elemen inti:
|
|
- campaign summary
|
|
- template preview
|
|
- audience estimate
|
|
- warnings
|
|
- confirm send
|
|
|
|
### 6.20 Campaign Detail
|
|
Section:
|
|
- campaign metadata
|
|
- audience summary
|
|
- send timeline
|
|
- sent / delivered / read / failed stats
|
|
- error breakdown
|
|
- recipient list link
|
|
|
|
### 6.21 Campaign Recipients
|
|
Elemen inti:
|
|
- recipient status list
|
|
- failure reason
|
|
- search contact
|
|
- filter send status
|
|
|
|
### 6.22 Team / Users List
|
|
Elemen inti:
|
|
- user list
|
|
- role filter
|
|
- status filter
|
|
- create user
|
|
- edit user
|
|
- activate/deactivate
|
|
|
|
### 6.23 Create User
|
|
Fields:
|
|
- full name
|
|
- email
|
|
- role
|
|
- status
|
|
|
|
### 6.24 Edit User
|
|
Tujuan:
|
|
- update data user dan akses
|
|
|
|
### 6.25 User Detail
|
|
Section:
|
|
- profile info
|
|
- role
|
|
- status
|
|
- last login
|
|
- assigned conversations count
|
|
- performance snapshot
|
|
|
|
### 6.26 Team Performance Snapshot
|
|
Tujuan:
|
|
- melihat performa agent secara ringkas
|
|
|
|
Metrik:
|
|
- handled conversations
|
|
- avg response time
|
|
- resolved count
|
|
- active workload
|
|
|
|
### 6.27 Reports Overview
|
|
Jenis laporan:
|
|
- response time
|
|
- resolution rate
|
|
- agent productivity
|
|
- campaign result
|
|
- contact growth
|
|
|
|
### 6.28 Response Time Report
|
|
### 6.29 Resolution Report
|
|
### 6.30 Agent Productivity Report
|
|
### 6.31 Campaign Analytics Report
|
|
### 6.32 Contact Growth Report
|
|
|
|
Pola desain untuk semua report:
|
|
- filter bar
|
|
- KPI summary
|
|
- chart area
|
|
- table detail
|
|
- export action jika diperlukan
|
|
|
|
### 6.33 Tenant Settings
|
|
Submenu:
|
|
- tenant profile
|
|
- business hours
|
|
- auto assignment rules
|
|
- chat tags
|
|
- canned responses
|
|
- webhook / integration settings
|
|
|
|
### 6.34 Tenant Profile Settings
|
|
### 6.35 Business Hours Settings
|
|
### 6.36 Auto Assignment Rules
|
|
### 6.37 Chat Tags Management
|
|
### 6.38 Canned Responses
|
|
### 6.39 Webhook / Integration Settings
|
|
|
|
### 6.40 Billing & Subscription
|
|
Elemen inti:
|
|
- current plan
|
|
- quota usage
|
|
- billing history
|
|
- upgrade prompt
|
|
|
|
### 6.41 Usage Quota Detail
|
|
Metrik:
|
|
- message quota
|
|
- seat quota
|
|
- broadcast quota
|
|
- current usage
|
|
|
|
### 6.42 Billing History
|
|
Elemen inti:
|
|
- invoice list
|
|
- payment status
|
|
- periods
|
|
|
|
### 6.43 Tenant Audit Log
|
|
Jenis log:
|
|
- user activity
|
|
- message action logs
|
|
- campaign action logs
|
|
|
|
## 7. Agent Screens
|
|
|
|
Agent fokus pada eksekusi percakapan.
|
|
|
|
### 7.1 Agent Dashboard
|
|
Widget inti:
|
|
- assigned to me
|
|
- unread conversations
|
|
- waiting customer reply
|
|
- due follow-up
|
|
- personal performance snapshot
|
|
|
|
### 7.2 My Inbox - Assigned Conversations
|
|
Elemen inti:
|
|
- assigned conversation list
|
|
- unread indicators
|
|
- search
|
|
- filter by status
|
|
|
|
### 7.3 Unassigned Queue
|
|
Tujuan:
|
|
- agent mengambil conversation dari backlog jika diizinkan
|
|
|
|
Elemen inti:
|
|
- queue list
|
|
- conversation preview
|
|
- take assignment action
|
|
|
|
### 7.4 Mentioned Conversations
|
|
Tujuan:
|
|
- melihat conversation yang melibatkan agent
|
|
|
|
### 7.5 Resolved History
|
|
Tujuan:
|
|
- melihat percakapan yang pernah diselesaikan
|
|
|
|
### 7.6 Agent Conversation Detail
|
|
Komponen inti hampir sama dengan admin inbox detail, tetapi lebih terbatas.
|
|
|
|
Area:
|
|
- conversation header
|
|
- customer card
|
|
- tags
|
|
- internal notes
|
|
- status change
|
|
- reply composer
|
|
- template picker
|
|
- canned responses
|
|
- activity timeline terbatas
|
|
|
|
### 7.7 Agent Contact List
|
|
Scope terbatas:
|
|
- hanya contact yang relevan
|
|
- akses field lebih sedikit
|
|
|
|
### 7.8 Agent Contact Detail
|
|
Elemen inti:
|
|
- identity
|
|
- tags
|
|
- previous chats
|
|
|
|
### 7.9 Quick Tools
|
|
Subscreen:
|
|
- canned responses
|
|
- template picker
|
|
- notes / follow-up reminders
|
|
|
|
### 7.10 My Performance
|
|
Metrik:
|
|
- response stats
|
|
- resolved chats
|
|
- avg response time
|
|
|
|
## 8. Shared Reusable Screens
|
|
|
|
Screen ini dipakai lintas role atau lintas modul.
|
|
|
|
### 8.1 My Profile
|
|
Elemen inti:
|
|
- avatar
|
|
- full name
|
|
- email
|
|
- role
|
|
- tenant/workspace
|
|
|
|
### 8.2 Edit Profile
|
|
Fields:
|
|
- full name
|
|
- avatar
|
|
|
|
### 8.3 Change Password
|
|
Fields:
|
|
- current password
|
|
- new password
|
|
- confirm password
|
|
|
|
### 8.4 Not Found
|
|
### 8.5 Generic Error
|
|
### 8.6 Empty State Library
|
|
|
|
Empty state yang perlu didesain:
|
|
- no conversations
|
|
- no contacts
|
|
- no campaigns
|
|
- no templates
|
|
- no users
|
|
- no reports data
|
|
- no tenants
|
|
- no invoices
|
|
|
|
### 8.7 Confirmation Modal Library
|
|
Kasus umum:
|
|
- delete
|
|
- deactivate
|
|
- suspend tenant
|
|
- disconnect channel
|
|
- send campaign now
|
|
- mark spam
|
|
|
|
### 8.8 Toast / Alert Patterns
|
|
Jenis:
|
|
- success
|
|
- warning
|
|
- error
|
|
- info
|
|
|
|
### 8.9 Loading / Skeleton Patterns
|
|
Prioritas:
|
|
- dashboard cards
|
|
- inbox list
|
|
- conversation detail
|
|
- contact table
|
|
- campaign detail
|
|
|
|
## 9. State Kritis yang Wajib Didukung di Desain
|
|
|
|
Untuk tiap screen penting, siapkan varian:
|
|
- default
|
|
- loading
|
|
- empty
|
|
- success
|
|
- validation error
|
|
- permission denied
|
|
- disconnected/integration issue
|
|
|
|
Screen yang wajib punya state lengkap:
|
|
- login
|
|
- shared inbox
|
|
- conversation detail
|
|
- contact import
|
|
- create campaign
|
|
- campaign detail
|
|
- connect channel
|
|
- reports
|
|
|
|
## 10. Urutan Prioritas Desain
|
|
|
|
Kalau desain mau dikerjakan bertahap, urutan paling masuk akal:
|
|
|
|
1. Login, forgot password, reset password
|
|
2. App shell: sidebar, topbar, profile menu
|
|
3. Admin dashboard
|
|
4. Shared inbox list
|
|
5. Conversation detail
|
|
6. Contact list
|
|
7. Contact detail
|
|
8. Team/users list
|
|
9. Create/edit user
|
|
10. Template list
|
|
11. Campaign list
|
|
12. Create campaign
|
|
13. Campaign detail
|
|
14. Reports overview
|
|
15. Billing & subscription
|
|
16. Audit log
|
|
17. Super admin dashboard
|
|
18. Tenant list
|
|
19. Tenant detail
|
|
20. Channel connect/detail
|
|
21. Agent dashboard
|
|
22. Agent inbox variants
|
|
23. Shared empty/error/loading states
|
|
|
|
## 11. Screen Count Kasar
|
|
|
|
Estimasi jumlah screen unik untuk desain MVP:
|
|
|
|
- Public/Auth: 5
|
|
- Shared shell/reusable: 9
|
|
- Super Admin: 15-19
|
|
- Admin Client: 30+
|
|
- Agent: 10
|
|
|
|
Total realistis:
|
|
- sekitar `65-75 screen/state`
|
|
|
|
Kalau dihitung hanya screen inti tanpa semua varian state:
|
|
- sekitar `35-45 layout utama`
|
|
|
|
## 12. Rekomendasi Paket Desain
|
|
|
|
Supaya efisien, desain bisa dibagi jadi 3 paket:
|
|
|
|
### Paket A - Core Inbox
|
|
- auth
|
|
- app shell
|
|
- admin dashboard
|
|
- shared inbox
|
|
- conversation detail
|
|
- agent inbox
|
|
- profile/basic settings
|
|
|
|
### Paket B - Operasional
|
|
- contacts
|
|
- team/users
|
|
- templates
|
|
- campaigns
|
|
- campaign detail
|
|
|
|
### Paket C - Governance & SaaS
|
|
- reports
|
|
- billing
|
|
- audit log
|
|
- super admin dashboard
|
|
- tenant management
|
|
- channel management
|
|
|
|
## 13. Kesimpulan
|
|
|
|
Kalau tujuan Anda adalah menyiapkan desain sebelum implementasi, fokus pertama harus ke:
|
|
- `auth`
|
|
- `app shell`
|
|
- `shared inbox`
|
|
- `conversation detail`
|
|
- `contacts`
|
|
- `campaign flow`
|
|
|
|
Itu area yang paling menentukan apakah produk ini terasa seperti dashboard WhatsApp operasional yang serius atau hanya panel admin biasa.
|