# 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.