whatsapp-inbox-platform/screen-flow-whatsapp-inbox.md

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