# 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