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

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.