503 lines
14 KiB
Markdown
503 lines
14 KiB
Markdown
# Screen Flow WhatsApp Inbox MVP
|
|
|
|
Dokumen ini menjabarkan `screen flow` utama untuk WhatsApp Inbox MVP berdasarkan role dan use case paling penting.
|
|
|
|
Tujuan dokumen:
|
|
- membantu desain prototype dan wireflow
|
|
- menjelaskan urutan perpindahan layar
|
|
- menandai action, keputusan, dan state penting
|
|
- memudahkan mapping route dan prioritas build
|
|
|
|
## 1. Cara Membaca Dokumen
|
|
|
|
Format flow:
|
|
|
|
`Screen A -> action -> Screen B -> action -> Screen C`
|
|
|
|
Catatan:
|
|
- jika sebuah langkah lebih cocok sebagai modal, drawer, atau side panel, itu disebutkan di bawah flow
|
|
- jika ada kondisi berhasil/gagal, dicatat sebagai state
|
|
- fokus dokumen ini adalah MVP, bukan flow lanjutan post-MVP
|
|
|
|
## 2. Public / Auth Flow
|
|
|
|
### 2.1 Login Flow
|
|
|
|
Tujuan:
|
|
- user masuk ke sistem sesuai role dan tenant
|
|
|
|
Flow:
|
|
`Login -> submit credentials -> Role-based Dashboard`
|
|
|
|
Kemungkinan hasil:
|
|
- valid -> masuk dashboard sesuai role
|
|
- invalid -> tetap di `Login` dengan error alert
|
|
- account disabled -> tetap di `Login` dengan status message
|
|
|
|
Screen terlibat:
|
|
- Login
|
|
- Dashboard Super Admin atau Dashboard Admin Client atau Dashboard Agent
|
|
|
|
### 2.2 Forgot Password Flow
|
|
|
|
Flow:
|
|
`Login -> klik Forgot Password -> Forgot Password -> submit email -> Reset Request Sent`
|
|
|
|
State:
|
|
- email valid -> tampil success info
|
|
- email tidak ditemukan -> bisa tetap tampil generic success agar aman
|
|
|
|
### 2.3 Reset Password Flow
|
|
|
|
Flow:
|
|
`Email Reset Link -> Reset Password -> submit new password -> Login`
|
|
|
|
State:
|
|
- token valid -> reset berhasil
|
|
- token expired/invalid -> `Reset Password` menampilkan expired state
|
|
|
|
### 2.4 Invitation Acceptance Flow
|
|
|
|
Flow:
|
|
`Invitation Link -> Invitation Acceptance -> set full name & password -> submit -> Login atau langsung Dashboard`
|
|
|
|
Catatan:
|
|
- keputusan final apakah setelah invite masuk ke login atau langsung dashboard bisa ditentukan saat desain sistem auth
|
|
|
|
## 3. Shared Global Flow
|
|
|
|
### 3.1 Open Profile Flow
|
|
|
|
Flow:
|
|
`Any App Screen -> klik Profile Menu -> Profile Menu -> pilih My Profile -> My Profile`
|
|
|
|
Lanjutan:
|
|
`My Profile -> klik Edit Profile -> Edit Profile -> save -> My Profile`
|
|
|
|
### 3.2 Change Password Flow
|
|
|
|
Flow:
|
|
`Profile Menu -> Change Password -> submit -> success -> kembali ke screen sebelumnya atau tetap di Change Password`
|
|
|
|
### 3.3 Unauthorized Flow
|
|
|
|
Flow:
|
|
`Restricted Route -> authorization check failed -> Unauthorized / Forbidden`
|
|
|
|
## 4. Super Admin Flow
|
|
|
|
## 4.1 Onboard Tenant Baru
|
|
|
|
Tujuan:
|
|
- membuat tenant baru agar siap dipakai client
|
|
|
|
Flow utama:
|
|
`Super Admin Dashboard -> Tenants List -> klik Create Tenant -> Create Tenant -> submit -> Tenant Detail`
|
|
|
|
Lanjutan:
|
|
`Tenant Detail -> lihat invitation/admin setup status`
|
|
|
|
State penting:
|
|
- sukses buat tenant
|
|
- slug sudah dipakai
|
|
- field wajib belum lengkap
|
|
|
|
UI notes:
|
|
- `Create Tenant` bisa halaman penuh atau modal besar
|
|
- setelah sukses, paling masuk akal diarahkan ke `Tenant Detail`
|
|
|
|
## 4.2 Edit Tenant
|
|
|
|
Flow:
|
|
`Tenants List -> Tenant Detail -> klik Edit Tenant -> Edit Tenant -> save -> Tenant Detail`
|
|
|
|
## 4.3 Suspend / Reactivate Tenant
|
|
|
|
Flow:
|
|
`Tenant Detail -> klik Suspend/Reactivate -> Confirmation Modal -> confirm -> Tenant Detail`
|
|
|
|
State:
|
|
- status tenant berubah
|
|
- audit log tercatat
|
|
|
|
## 4.4 Hubungkan Channel WhatsApp Tenant
|
|
|
|
Tujuan:
|
|
- mengaktifkan channel WhatsApp tenant
|
|
|
|
Flow utama:
|
|
`Tenant Detail -> tab/section Channel Status -> klik Connect Channel -> Connect Channel -> submit config -> Connection Validation Result -> Channel Detail`
|
|
|
|
Kemungkinan hasil:
|
|
- valid -> `Channel Detail` status connected
|
|
- invalid -> tetap di `Connect Channel` dengan error detail
|
|
|
|
UI notes:
|
|
- `Connection Validation Result` bisa berupa inline result state atau dedicated result screen
|
|
|
|
## 4.5 Monitor Kesehatan Platform
|
|
|
|
Flow:
|
|
`Super Admin Dashboard -> klik alert/widget -> Channel List atau Platform Reports atau Audit Log`
|
|
|
|
Contoh cabang flow:
|
|
- `Dashboard -> disconnected channels widget -> Channel List -> Channel Detail`
|
|
- `Dashboard -> subscription health widget -> Tenant Subscription List -> Tenant Detail`
|
|
- `Dashboard -> delivery failures widget -> Platform Reports`
|
|
|
|
## 4.6 Kelola Subscription Tenant
|
|
|
|
Flow:
|
|
`Super Admin Dashboard atau Subscription List -> Tenant Subscription List -> pilih tenant -> Tenant Detail atau Invoice Detail`
|
|
|
|
Lanjutan:
|
|
`Tenant Detail -> ubah plan -> plan update form/modal -> save -> Tenant Detail`
|
|
|
|
## 4.7 Audit dan Investigasi Event
|
|
|
|
Flow:
|
|
`Super Admin Dashboard -> Audit Log -> filter event -> Log Detail`
|
|
|
|
Lanjutan lain:
|
|
`Super Admin Dashboard -> API / Webhook Logs -> pilih event -> Webhook Log Detail`
|
|
|
|
## 5. Admin Client Flow
|
|
|
|
## 5.1 Login dan Masuk Dashboard Harian
|
|
|
|
Tujuan:
|
|
- admin melihat kondisi operasional tenant
|
|
|
|
Flow:
|
|
`Login -> Admin Dashboard`
|
|
|
|
Cabang cepat dari dashboard:
|
|
- `Dashboard -> klik Open Conversations -> Shared Inbox`
|
|
- `Dashboard -> klik Agent Workload -> Team Performance Snapshot`
|
|
- `Dashboard -> klik Broadcast Performance -> Campaign List atau Campaign Detail`
|
|
- `Dashboard -> klik Contact Growth -> Contact List atau Contact Growth Report`
|
|
|
|
## 5.2 Review Shared Inbox dan Distribusi Conversation
|
|
|
|
Ini flow operasional paling penting.
|
|
|
|
Flow utama:
|
|
`Admin Dashboard atau Sidebar -> Shared Inbox -> pilih conversation -> Conversation Detail`
|
|
|
|
Cabang aksi dari `Conversation Detail`:
|
|
- `Conversation Detail -> assign/reassign -> Assignment Panel/Modal -> save -> Conversation Detail`
|
|
- `Conversation Detail -> change status -> status action -> Conversation Detail`
|
|
- `Conversation Detail -> add tag -> tag selector -> save -> Conversation Detail`
|
|
- `Conversation Detail -> add internal note -> note input -> save -> Conversation Detail`
|
|
- `Conversation Detail -> reply -> send -> Conversation Detail`
|
|
|
|
State penting:
|
|
- belum ada conversation dipilih
|
|
- inbox kosong
|
|
- channel disconnected
|
|
- outbound failed
|
|
|
|
## 5.3 Assign Conversation ke Agent
|
|
|
|
Flow:
|
|
`Shared Inbox -> Conversation Detail -> klik Assign -> Assignment Panel -> pilih agent -> confirm -> Conversation Detail`
|
|
|
|
Hasil:
|
|
- assigned user tampil di header/panel
|
|
- activity log bertambah
|
|
|
|
## 5.4 Ubah Status Conversation
|
|
|
|
Flow:
|
|
`Conversation Detail -> Status Selector -> pilih open/pending/resolved/spam -> save -> Conversation Detail`
|
|
|
|
Lanjutan:
|
|
- jika `resolved`, conversation pindah ke tab/list resolved
|
|
- jika `spam/archive`, conversation hilang dari flow utama
|
|
|
|
## 5.5 Balas Pesan dari Inbox
|
|
|
|
Flow:
|
|
`Shared Inbox -> Conversation Detail -> Reply Composer -> send -> Conversation Detail`
|
|
|
|
Alternatif:
|
|
- `Conversation Detail -> Template Picker -> pilih template -> preview -> send -> Conversation Detail`
|
|
- `Conversation Detail -> Quick Reply -> pilih canned response -> edit jika perlu -> send -> Conversation Detail`
|
|
|
|
State:
|
|
- sending
|
|
- sent
|
|
- failed
|
|
|
|
## 5.6 Tambah Internal Note atau Tag
|
|
|
|
Flow note:
|
|
`Conversation Detail -> Internal Notes -> add note -> save -> Conversation Detail`
|
|
|
|
Flow tag:
|
|
`Conversation Detail -> Tags -> add/edit tag -> save -> Conversation Detail`
|
|
|
|
## 5.7 Tambah Contact Manual
|
|
|
|
Flow:
|
|
`Contact List -> klik Add Contact -> Create Contact -> submit -> Contact Detail`
|
|
|
|
State:
|
|
- nomor tidak valid
|
|
- nomor duplikat
|
|
- sukses tersimpan
|
|
|
|
## 5.8 Edit Contact
|
|
|
|
Flow:
|
|
`Contact List -> Contact Detail -> klik Edit -> Edit Contact -> save -> Contact Detail`
|
|
|
|
## 5.9 Import Contacts
|
|
|
|
Flow:
|
|
`Contact List -> klik Import -> Import Contacts -> upload CSV -> Field Mapping -> Validation Preview -> Confirm Import -> Import Result`
|
|
|
|
Kemungkinan hasil:
|
|
- semua valid -> import sukses
|
|
- sebagian gagal -> partial success + error rows
|
|
|
|
## 5.10 Export Contacts
|
|
|
|
Flow:
|
|
`Contact List -> klik Export -> Export Contacts -> pilih filter/field -> confirm -> export result/download state`
|
|
|
|
## 5.11 Kelola Segments
|
|
|
|
Flow buat segment:
|
|
`Contact List atau Segments List -> Create Segment -> isi rules -> save -> Segment Detail`
|
|
|
|
Flow edit segment:
|
|
`Segments List -> Segment Detail -> Edit Segment -> save -> Segment Detail`
|
|
|
|
## 5.12 Kelola User / Agent
|
|
|
|
Flow buat user:
|
|
`Team / Users List -> klik Create User -> Create User -> submit -> User Detail atau kembali ke Users List`
|
|
|
|
Flow edit user:
|
|
`Users List -> User Detail -> klik Edit -> Edit User -> save -> User Detail`
|
|
|
|
Flow activate/deactivate:
|
|
`Users List atau User Detail -> klik Activate/Deactivate -> Confirmation Modal -> confirm -> User Detail`
|
|
|
|
## 5.13 Review Laporan Operasional
|
|
|
|
Flow umum:
|
|
`Admin Dashboard atau Sidebar -> Reports Overview -> pilih report -> Report Detail`
|
|
|
|
Cabang:
|
|
- `Reports Overview -> Response Time Report`
|
|
- `Reports Overview -> Resolution Report`
|
|
- `Reports Overview -> Agent Productivity Report`
|
|
- `Reports Overview -> Campaign Analytics Report`
|
|
- `Reports Overview -> Contact Growth Report`
|
|
|
|
Pola interaksi:
|
|
`Report Detail -> set filter -> lihat chart/table -> export jika tersedia`
|
|
|
|
## 5.14 Buat Campaign Broadcast
|
|
|
|
Ini flow operasional besar kedua setelah inbox.
|
|
|
|
Flow utama:
|
|
`Campaign List -> klik Create Campaign -> Create Campaign Step 1/2/3 -> Campaign Review -> submit -> Campaign Detail`
|
|
|
|
Langkah yang disarankan:
|
|
- Step 1: metadata campaign
|
|
- Step 2: pilih channel dan template
|
|
- Step 3: pilih audience
|
|
- Step 4: schedule/send now
|
|
- Review
|
|
|
|
Kemungkinan hasil:
|
|
- valid -> campaign dibuat
|
|
- template belum approved -> tetap di create flow dengan warning
|
|
- audience kosong -> tidak bisa lanjut
|
|
|
|
## 5.15 Monitor Hasil Campaign
|
|
|
|
Flow:
|
|
`Campaign List -> pilih campaign -> Campaign Detail -> klik Recipient List -> Campaign Recipients`
|
|
|
|
Lanjutan:
|
|
`Campaign Detail -> klik error breakdown -> filtered recipient state atau failure detail`
|
|
|
|
## 5.16 Kelola Template
|
|
|
|
Flow buat template:
|
|
`Template List -> Create Template Request -> submit -> Template Detail`
|
|
|
|
Flow lihat status template:
|
|
`Template List -> pilih template -> Template Detail`
|
|
|
|
Flow revisi template rejected:
|
|
`Template Detail -> klik Edit/Resubmit -> Create Template Request atau Edit Template -> submit -> Template Detail`
|
|
|
|
## 5.17 Review Billing Tenant
|
|
|
|
Flow:
|
|
`Sidebar -> Billing & Subscription -> Billing Overview`
|
|
|
|
Cabang:
|
|
- `Billing Overview -> Usage Quota Detail`
|
|
- `Billing Overview -> Billing History`
|
|
- `Billing History -> Invoice Detail`
|
|
|
|
## 5.18 Review Audit Log Tenant
|
|
|
|
Flow:
|
|
`Sidebar -> Audit Log -> filter event -> Log Detail Drawer/Modal`
|
|
|
|
## 5.19 Kelola Settings Tenant
|
|
|
|
Flow umum:
|
|
`Sidebar -> Settings -> pilih submenu -> Settings Detail`
|
|
|
|
Cabang:
|
|
- `Settings -> Tenant Profile Settings`
|
|
- `Settings -> Business Hours Settings`
|
|
- `Settings -> Auto Assignment Rules`
|
|
- `Settings -> Chat Tags Management`
|
|
- `Settings -> Canned Responses`
|
|
- `Settings -> Webhook / Integration Settings`
|
|
|
|
## 6. Agent Flow
|
|
|
|
## 6.1 Mulai Shift dan Review Inbox
|
|
|
|
Flow:
|
|
`Login -> Agent Dashboard -> klik Assigned Conversations -> My Inbox`
|
|
|
|
Cabang dari dashboard:
|
|
- `Dashboard -> unread conversations -> My Inbox filtered unread`
|
|
- `Dashboard -> due follow-up -> My Inbox filtered pending/due`
|
|
|
|
## 6.2 Tanggapi Percakapan Customer
|
|
|
|
Flow utama:
|
|
`My Inbox -> pilih conversation -> Agent Conversation Detail -> reply -> Agent Conversation Detail`
|
|
|
|
Alternatif:
|
|
- `Agent Conversation Detail -> canned response -> insert -> send -> Agent Conversation Detail`
|
|
- `Agent Conversation Detail -> template picker -> pilih template -> send -> Agent Conversation Detail`
|
|
|
|
## 6.3 Tambah Note Internal atau Tag
|
|
|
|
Flow:
|
|
`Agent Conversation Detail -> Internal Notes atau Tags -> add/edit -> save -> Agent Conversation Detail`
|
|
|
|
## 6.4 Ubah Status Conversation
|
|
|
|
Flow:
|
|
`Agent Conversation Detail -> Status Selector -> pilih status -> save -> Agent Conversation Detail`
|
|
|
|
Kemungkinan efek:
|
|
- resolved -> muncul di `Resolved History`
|
|
- pending -> muncul di queue follow-up
|
|
|
|
## 6.5 Ambil Conversation dari Queue
|
|
|
|
Flow:
|
|
`Agent Dashboard atau Sidebar -> Unassigned Queue -> pilih conversation -> preview/detail -> klik Take Assignment -> Agent Conversation Detail`
|
|
|
|
Hasil:
|
|
- conversation pindah ke daftar assigned agent
|
|
|
|
## 6.6 Lihat Riwayat Resolved
|
|
|
|
Flow:
|
|
`Agent Dashboard atau Sidebar -> Resolved History -> pilih conversation -> Agent Conversation Detail`
|
|
|
|
## 6.7 Lihat Contact Terkait
|
|
|
|
Flow:
|
|
`Agent Conversation Detail -> klik contact card -> Agent Contact Detail`
|
|
|
|
Alternatif:
|
|
`Sidebar -> Agent Contact List -> pilih contact -> Agent Contact Detail`
|
|
|
|
## 6.8 Cek Performa Pribadi
|
|
|
|
Flow:
|
|
`Sidebar -> My Performance -> filter date -> lihat personal stats`
|
|
|
|
## 7. Cross-Role End-to-End Flow
|
|
|
|
## 7.1 End-to-End Inbound Message Flow
|
|
|
|
Ini flow paling penting dari sisi produk.
|
|
|
|
Flow lintas sistem:
|
|
`Customer kirim WhatsApp -> Webhook Ingestion -> sistem create/update Contact -> sistem create/update Conversation -> Shared Inbox -> Admin/Agent buka Conversation Detail -> Reply -> status berubah -> activity log tercatat`
|
|
|
|
Jika diterjemahkan ke screen:
|
|
`Shared Inbox -> Conversation Detail -> Reply Composer -> send -> Conversation Detail`
|
|
|
|
Pihak yang terlibat:
|
|
- customer
|
|
- sistem webhook/worker
|
|
- admin client atau agent
|
|
|
|
## 7.2 End-to-End Broadcast Flow
|
|
|
|
Flow lintas sistem:
|
|
`Admin create campaign -> sistem validate template & audience -> campaign queued -> worker kirim bertahap -> delivery webhook masuk -> Campaign Detail update metrics`
|
|
|
|
Jika diterjemahkan ke screen:
|
|
`Campaign List -> Create Campaign -> Campaign Review -> Campaign Detail -> Campaign Recipients`
|
|
|
|
## 7.3 Channel Disconnected Exception Flow
|
|
|
|
Flow:
|
|
`System detects disconnected channel -> Notification/Alert -> Super Admin Dashboard atau Admin Billing/Settings area -> Channel Detail / Integration Settings -> Reconnect action -> validation result`
|
|
|
|
Screen yang bisa muncul:
|
|
- dashboard alert
|
|
- channel detail
|
|
- webhook/integration settings
|
|
|
|
## 7.4 Template Rejected Exception Flow
|
|
|
|
Flow:
|
|
`Template List -> Template Detail -> status rejected -> Edit/Resubmit -> submit -> Template Detail`
|
|
|
|
## 7.5 Message Delivery Failed Exception Flow
|
|
|
|
Flow inbox reply:
|
|
`Conversation Detail -> send reply -> failed state -> retry action atau note error -> Conversation Detail`
|
|
|
|
Flow campaign:
|
|
`Campaign Detail -> failed metrics -> Campaign Recipients filtered failed -> lihat failure reason`
|
|
|
|
## 8. Rekomendasi Wireflow Prioritas
|
|
|
|
Kalau ingin dibuat ke prototype lebih dulu, urutan flow yang paling penting untuk divisualkan:
|
|
|
|
1. Login -> Dashboard
|
|
2. Dashboard -> Shared Inbox -> Conversation Detail
|
|
3. Conversation Detail -> Assign -> Reply -> Change Status
|
|
4. Contact List -> Create Contact -> Contact Detail
|
|
5. Campaign List -> Create Campaign -> Campaign Review -> Campaign Detail
|
|
6. Users List -> Create User -> User Detail
|
|
7. Super Admin Dashboard -> Tenant List -> Create Tenant -> Tenant Detail
|
|
8. Tenant Detail -> Connect Channel -> Channel Detail
|
|
|
|
## 9. Kesimpulan
|
|
|
|
Kalau `struktur screen` menjawab daftar layarnya, maka dokumen ini menjawab alur kerja user di antara layar-layar itu.
|
|
|
|
Untuk MVP ini, flow yang paling wajib matang dulu adalah:
|
|
- login
|
|
- dashboard entry
|
|
- shared inbox
|
|
- conversation handling
|
|
- contact management
|
|
- campaign creation dan monitoring
|
|
- tenant onboarding
|
|
- channel connection
|