chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
871
struktur-screen-whatsapp-inbox.md
Normal file
871
struktur-screen-whatsapp-inbox.md
Normal file
@ -0,0 +1,871 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user