951 lines
52 KiB
Markdown
951 lines
52 KiB
Markdown
# Wireframe Text Low-Fidelity WhatsApp Inbox MVP
|
|
|
|
Dokumen ini adalah wireframe berbasis teks untuk semua screen MVP. Tujuannya agar struktur layout, hierarchy konten, dan area interaksi bisa dipahami sebelum masuk ke Figma.
|
|
|
|
Format:
|
|
- `Topbar`
|
|
- `Sidebar`
|
|
- `Main Content`
|
|
- `Right Panel` jika ada
|
|
- `Primary Actions`
|
|
|
|
## 1. Public / Auth
|
|
|
|
### 1.1 Login
|
|
```text
|
|
+--------------------------------------------------+
|
|
| Logo |
|
|
|--------------------------------------------------|
|
|
| Welcome Back |
|
|
| Sign in to your workspace |
|
|
| |
|
|
| Email |
|
|
| [____________________________] |
|
|
| |
|
|
| Password [Show] |
|
|
| [____________________________] |
|
|
| |
|
|
| [ Sign In ] |
|
|
| |
|
|
| Forgot password? |
|
|
| Error alert / status message |
|
|
+--------------------------------------------------+
|
|
```
|
|
|
|
### 1.2 Forgot Password
|
|
```text
|
|
+--------------------------------------------------+
|
|
| Back to Login |
|
|
|--------------------------------------------------|
|
|
| Reset Password |
|
|
| Enter your email to receive reset link |
|
|
| |
|
|
| Email |
|
|
| [____________________________] |
|
|
| |
|
|
| [ Send Reset Link ] |
|
|
| Success / error message |
|
|
+--------------------------------------------------+
|
|
```
|
|
|
|
### 1.3 Reset Password
|
|
```text
|
|
+--------------------------------------------------+
|
|
| Reset Password |
|
|
|--------------------------------------------------|
|
|
| New Password |
|
|
| [____________________________] |
|
|
| Confirm Password |
|
|
| [____________________________] |
|
|
| Password rules |
|
|
| |
|
|
| [ Save New Password ] |
|
|
| Token expired state / success state |
|
|
+--------------------------------------------------+
|
|
```
|
|
|
|
### 1.4 Invitation Acceptance
|
|
```text
|
|
+--------------------------------------------------+
|
|
| You're invited |
|
|
|--------------------------------------------------|
|
|
| Invited Email: name@company.com |
|
|
| Full Name |
|
|
| [____________________________] |
|
|
| Password |
|
|
| [____________________________] |
|
|
| Confirm Password |
|
|
| [____________________________] |
|
|
| |
|
|
| [ Accept Invitation ] |
|
|
+--------------------------------------------------+
|
|
```
|
|
|
|
### 1.5 Unauthorized / Forbidden
|
|
```text
|
|
+--------------------------------------------------+
|
|
| Access Denied |
|
|
|--------------------------------------------------|
|
|
| You don't have permission to view this page. |
|
|
| [ Back to Dashboard ] |
|
|
+--------------------------------------------------+
|
|
```
|
|
|
|
## 2. Shared App Shell
|
|
|
|
### 2.1 Desktop App Shell
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Sidebar | Topbar: Search | Notifications | Channel Status | Profile Menu |
|
|
|------------------+--------------------------------------------------------------- ----|
|
|
| Menu items | Page Title |
|
|
| by role | Subtitle / filters / breadcrumbs |
|
|
| |------------------------------------------------------------------|
|
|
| | Main content area |
|
|
| | |
|
|
| | |
|
|
| | |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 2.2 Global Search Overlay
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Search anything... |
|
|
| [_______________________________________________] |
|
|
|---------------------------------------------------------------|
|
|
| Conversations |
|
|
| Contacts |
|
|
| Users / Tenants |
|
|
| Recent searches |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 2.3 Notification Center
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Notifications |
|
|
|---------------------------------------------------------------|
|
|
| Assignment updated |
|
|
| Channel disconnected |
|
|
| Campaign completed |
|
|
| Delivery failed |
|
|
| User invited |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 2.4 My Profile
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| My Profile |
|
|
|---------------------------------------------------------------|
|
|
| Avatar Name |
|
|
| Email |
|
|
| Role |
|
|
| Workspace |
|
|
| |
|
|
| [ Edit Profile ] [ Change Password ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 2.5 Edit Profile
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Edit Profile |
|
|
|---------------------------------------------------------------|
|
|
| Avatar Upload |
|
|
| Full Name |
|
|
| [____________________________] |
|
|
| |
|
|
| [ Save Changes ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 2.6 Change Password
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Change Password |
|
|
|---------------------------------------------------------------|
|
|
| Current Password |
|
|
| [____________________________] |
|
|
| New Password |
|
|
| [____________________________] |
|
|
| Confirm Password |
|
|
| [____________________________] |
|
|
| |
|
|
| [ Update Password ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
## 3. Super Admin
|
|
|
|
### 3.1 Super Admin Dashboard
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Sidebar | Topbar |
|
|
|------------------+-------------------------------------------------------------------|
|
|
| Dashboard | Global KPI Overview |
|
|
| Tenants | [Active Tenants] [Active Channels] [Failures] [Alerts] |
|
|
| Channels | |
|
|
| Billing | Message Volume Chart |
|
|
| Reports | |
|
|
| Audit Log | Subscription Health Table |
|
|
| Settings | Disconnected Channels List |
|
|
| | Platform Alerts Feed |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.2 Tenant List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Page Header: Tenants [ Create Tenant ] |
|
|
|------------------------------------------------------------------------------- ------|
|
|
| Search [____________] Status [v] Plan [v] Channel Status [v] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Tenant Name | Plan | Status | Channels | Usage | Seats | Actions |
|
|
|-------------|------|--------|----------|-------|-------|----------------------------|
|
|
| Acme Co | Pro | Active | Connected| 74% | 8/10 | View Edit Suspend |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.3 Create Tenant
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Create Tenant |
|
|
|---------------------------------------------------------------|
|
|
| Company Name |
|
|
| Tenant Name |
|
|
| Slug / Workspace |
|
|
| Timezone |
|
|
| Subscription Plan |
|
|
| Initial Admin Email |
|
|
| |
|
|
| [ Create Tenant ] |
|
|
| Validation errors |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.4 Tenant Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Tenant: Acme Co [ Edit ] [ Suspend ] [ Connect ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Summary Cards: Plan | Status | Channel | Usage | Seats |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Company Profile |
|
|
| Subscription Plan |
|
|
| Channel Status |
|
|
| Usage Summary |
|
|
| User Seats |
|
|
| Recent Activity Snapshot |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.5 Edit Tenant
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Edit Tenant |
|
|
|---------------------------------------------------------------|
|
|
| Company Name |
|
|
| Tenant Name |
|
|
| Timezone |
|
|
| Status |
|
|
| Subscription Plan |
|
|
| |
|
|
| [ Save Changes ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.6 Suspend / Reactivate Confirmation
|
|
```text
|
|
+-----------------------------------------------+
|
|
| Confirm Action |
|
|
|-----------------------------------------------|
|
|
| Suspend this tenant? |
|
|
| This may block access for all users. |
|
|
| |
|
|
| [ Cancel ] [ Confirm ] |
|
|
+-----------------------------------------------+
|
|
```
|
|
|
|
### 3.7 Channel List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Page Header: Channels [ Connect Channel ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search [____________] Status [v] Provider [v] Tenant [v] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Number | Tenant | Provider | Status | Webhook | Last Sync | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.8 Connect Channel
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Connect Channel |
|
|
|---------------------------------------------------------------|
|
|
| Tenant |
|
|
| Provider |
|
|
| WABA ID |
|
|
| Phone Number ID |
|
|
| Display Number |
|
|
| Webhook Config |
|
|
| |
|
|
| [ Validate Connection ] [ Save ] |
|
|
| Success / failure result |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.9 Channel Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Channel Detail [ Reconnect ] [ Disconnect ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Summary Cards: Status | Webhook | Last Sync | Failure Rate |
|
|
|--------------------------------------------------------------------------------------|
|
|
| WhatsApp Business Account Info |
|
|
| Phone Status |
|
|
| Webhook Health |
|
|
| Delivery Issue Summary |
|
|
| Event Activity |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.10 Subscription Plan Catalog
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Plan Catalog |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Plan Card: Basic | Plan Card: Pro | Plan Card: Enterprise |
|
|
| Price | Price | Price |
|
|
| Message Quota | Message Quota | Message Quota |
|
|
| Seat Quota | Seat Quota | Seat Quota |
|
|
| Broadcast Quota | Broadcast Quota | Broadcast Quota |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.11 Tenant Subscription List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Tenant Subscription List |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Tenant | Current Plan | Usage | Renewal | Payment Status | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.12 Invoices List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Invoices |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Invoice No | Tenant | Period | Amount | Payment Status | Due Date | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.13 Invoice Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Invoice #INV-001 |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Tenant | Period | Plan | Status | Due Date |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Subtotal |
|
|
| Tax |
|
|
| Total |
|
|
| Payment Timeline |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.14 Platform Reports
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Platform Reports |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Filter Bar: Date | Tenant | Provider |
|
|
| KPI Cards |
|
|
| Global Message Traffic Chart |
|
|
| Tenant Growth Chart |
|
|
| Broadcast Usage Table |
|
|
| Failure & Retry Monitoring |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.15 Audit Log
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Audit Log |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Filters: Tenant | Actor | Entity | Date | Action |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Timestamp | Tenant | Actor | Entity | Action | Metadata | View |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.16 Security Events
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Security Events |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Failed Logins | Suspicious Access | Permission Changes |
|
|
| Event feed / table |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.17 API / Webhook Logs
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| API / Webhook Logs |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Filters: Provider | Status | Tenant | Date |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Event Type | Provider Event ID | Process Status | Failed Reason | View |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.18 System Notifications / Alerts
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| System Alerts |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Severity | Tenant | Issue | Triggered At | Action |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 3.19 Platform Settings
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Platform Settings |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Left Nav: Platform Profile | Pricing | Feature Flags | Template Policy |
|
|
| Detail Panel |
|
|
| Form fields / toggles / save actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
## 4. Admin Client
|
|
|
|
### 4.1 Admin Dashboard
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Sidebar | Topbar |
|
|
|------------------+-------------------------------------------------------------------|
|
|
| Dashboard | Today Summary |
|
|
| Shared Inbox | [Open] [Waiting Reply] [Resolved Today] [Active Agents] |
|
|
| Contacts | |
|
|
| Broadcast | Agent Workload Snapshot |
|
|
| Templates | Broadcast Performance Snapshot |
|
|
| Team | Contact Growth |
|
|
| Reports | Recent Activity / Quick Actions |
|
|
| Settings | |
|
|
| Billing | |
|
|
| Audit Log | |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.2 Shared Inbox - List + Detail
|
|
```text
|
|
+----------------------------------------------------------------------------------------------------------------+
|
|
| Topbar |
|
|
|----------------------------------------------------------------------------------------------------------------|
|
|
| Filters Bar: Tabs(All/Unassigned/Assigned/Resolved) | Search | Agent | Channel | Status | Priority |
|
|
|----------------------------------------------------------------------------------------------------------------|
|
|
| Conversation List | Conversation Detail | Right Panel |
|
|
|-----------------------------------|---------------------------------------------------|----------------------|
|
|
| Contact name | Header: Contact + status + assignee | Customer Card |
|
|
| Last message preview |---------------------------------------------------| Tags |
|
|
| Unread badge | Message timeline | Assignment Panel |
|
|
| Time | | Internal Notes |
|
|
| | Reply composer | Activity Log |
|
|
| | Quick replies / template picker | |
|
|
+----------------------------------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.3 Shared Inbox - Empty State
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| No conversation selected |
|
|
| Choose a conversation from the left panel. |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.4 Shared Inbox - Disconnected Channel State
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Channel Disconnected |
|
|
| Replies may fail until channel is reconnected. |
|
|
| [ View Settings ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.5 Contact List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Contacts [ Add Contact ] [ Import ] [ Export ]|
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search [__________] Tag [v] Segment [v] Opt-in [v] Channel [v] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Name | Phone | Tags | Last Interaction | Opt-in | Channel | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.6 Create / Edit Contact
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Contact Form |
|
|
|---------------------------------------------------------------|
|
|
| Full Name |
|
|
| Phone Number |
|
|
| Email |
|
|
| Country Code |
|
|
| Tags |
|
|
| Opt-in Status |
|
|
| External Ref |
|
|
| |
|
|
| [ Save Contact ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.7 Contact Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Contact: John Doe [ Edit ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Profile Card | Tags | Segment Membership | Opt-in Status |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Conversation History |
|
|
| Campaign History |
|
|
| Custom Fields |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.8 Import Contacts
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Import Contacts |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Step 1: Upload CSV |
|
|
| Step 2: Field Mapping |
|
|
| Step 3: Validation Preview |
|
|
| Step 4: Confirm Import |
|
|
| Import summary / partial error list |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.9 Export Contacts
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Export Contacts |
|
|
|---------------------------------------------------------------|
|
|
| Filters |
|
|
| Fields to export |
|
|
| |
|
|
| [ Export ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.10 Segments / Lists
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Segments [ Create Segment ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Segment Name | Rule Summary | Member Count | Updated At | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.11 Segment Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Segment Detail [ Edit ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Metadata |
|
|
| Rules Summary |
|
|
| Contacts Preview |
|
|
| Related Campaigns |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.12 Template List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Templates [ Create Template Request ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search | Status | Category | Channel | Language |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Name | Category | Language | Approval Status | Channel | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.13 Create / Edit Template Request
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Template Form |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Template Name |
|
|
| Category |
|
|
| Language |
|
|
| Header Type |
|
|
| Body Text |
|
|
| Footer Text |
|
|
| Buttons |
|
|
| Preview |
|
|
| [ Submit Template ] |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.14 Template Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Template Detail [ Edit / Resubmit ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Status | Channel | Provider Template ID |
|
|
| Content Preview |
|
|
| Rejected Reason |
|
|
| Related Campaigns |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.15 Campaign List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Campaigns [ Create Campaign ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search | Status | Channel | Date |
|
|
| KPI Cards: Draft | Scheduled | Processing | Completed | Failed |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Campaign | Channel | Audience | Status | Scheduled At | Result | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.16 Create Campaign
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Create Campaign |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Stepper: Metadata -> Template -> Audience -> Schedule -> Review |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Campaign Name |
|
|
| Campaign Type |
|
|
| Channel |
|
|
| Template |
|
|
| Audience Source |
|
|
| Segment / Manual / Import |
|
|
| Schedule or Send Now |
|
|
| Estimated Recipients |
|
|
| [ Back ] [ Next ] |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.17 Campaign Review
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Review Campaign |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Metadata Summary |
|
|
| Template Preview |
|
|
| Audience Estimate |
|
|
| Warnings / Validation |
|
|
| [ Edit ] [ Confirm & Create Campaign ] |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.18 Campaign Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Campaign: Promo April [ View Recipients ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Summary Cards: Total | Sent | Delivered | Read | Failed |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Campaign Metadata |
|
|
| Send Timeline |
|
|
| Delivery Trend |
|
|
| Error Breakdown |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.19 Campaign Recipients
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Campaign Recipients |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search | Send Status | Failure Only |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Contact | Phone | Send Status | Failure Reason | Sent At | Delivered At |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.20 Team / Users List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Team / Users [ Create User ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search | Role | Status |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Name | Email | Role | Status | Last Login | Assigned Conversations | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.21 Create / Edit User
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| User Form |
|
|
|---------------------------------------------------------------|
|
|
| Full Name |
|
|
| Email |
|
|
| Role |
|
|
| Status |
|
|
| |
|
|
| [ Save User ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.22 User Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| User Detail [ Edit ] [ Deactivate ] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Profile Info |
|
|
| Role / Status |
|
|
| Last Login |
|
|
| Assigned Conversations Count |
|
|
| Performance Snapshot |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.23 Team Performance Snapshot
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Team Performance |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Agent | Handled Conversations | Avg Response | Resolved | Workload |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.24 Reports Overview
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Reports |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Report cards: Response Time | Resolution | Agent Productivity | Campaign | Growth |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.25 Report Detail Pattern
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Report Title |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Filters: Date | Agent | Channel | Team |
|
|
| KPI Cards |
|
|
| Main Chart |
|
|
| Breakdown Table |
|
|
| [ Export ] |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.26 Tenant Settings
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Settings |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Left Nav: Profile | Business Hours | Auto Assignment | Tags | Canned Responses | Webhook |
|
|
| Detail Panel |
|
|
| Form / table / toggles |
|
|
| [ Save ] |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.27 Billing & Subscription
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Billing & Subscription |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Current Plan | Usage Quota | Renewal Date | Payment Status |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Usage Breakdown |
|
|
| Billing History |
|
|
| Upgrade Prompt |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.28 Billing History
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Billing History |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Invoice No | Period | Amount | Status | Due Date | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 4.29 Tenant Audit Log
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Tenant Audit Log |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Filters: Actor | Module | Action | Date |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Timestamp | Actor | Module | Action | Metadata | View |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
## 5. Agent
|
|
|
|
### 5.1 Agent Dashboard
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Dashboard |
|
|
|--------------------------------------------------------------------------------------|
|
|
| [Assigned to Me] [Unread] [Waiting Reply] [Due Follow-up] [My Stats] |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Priority Conversations |
|
|
| Personal Activity Snapshot |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 5.2 My Inbox
|
|
```text
|
|
+----------------------------------------------------------------------------------------------------------------+
|
|
| Filters: Assigned / Unassigned / Mentioned / Resolved | Search | Status |
|
|
|----------------------------------------------------------------------------------------------------------------|
|
|
| Conversation List | Agent Conversation Detail | Customer Card |
|
|
|-----------------------------------|---------------------------------------------------|----------------------|
|
|
| Contact | Header | Tags |
|
|
| Last message | Timeline | Notes |
|
|
| Unread | Reply composer | Limited activity |
|
|
| Time | Quick replies / template | |
|
|
+----------------------------------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 5.3 Unassigned Queue
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Unassigned Queue |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search | Priority | Channel |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Contact | Last Message | Waiting Time | Priority | [ Take Assignment ] |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 5.4 Mentioned Conversations
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Mentioned Conversations |
|
|
|--------------------------------------------------------------------------------------|
|
|
| List / filters |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 5.5 Resolved History
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Resolved History |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search | Date | Channel |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Contact | Resolved At | Last Agent Action | View |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 5.6 Agent Contact List
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Contacts |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Search | Tags |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Name | Phone | Last Interaction | Actions |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 5.7 Agent Contact Detail
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Contact Detail |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Identity |
|
|
| Tags |
|
|
| Previous Chats |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 5.8 Quick Tools
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| Quick Tools |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Canned Responses |
|
|
| Template Picker |
|
|
| Follow-up Notes |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
### 5.9 My Performance
|
|
```text
|
|
+--------------------------------------------------------------------------------------+
|
|
| My Performance |
|
|
|--------------------------------------------------------------------------------------|
|
|
| Filters: Date |
|
|
| KPI Cards: Response Time | Resolved | Workload |
|
|
| Personal Trend Chart |
|
|
+--------------------------------------------------------------------------------------+
|
|
```
|
|
|
|
## 6. Shared Reusable States
|
|
|
|
### 6.1 Generic Empty State
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Nothing here yet |
|
|
| Add data or adjust filters to continue. |
|
|
| [ Primary Action ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 6.2 Generic Error State
|
|
```text
|
|
+---------------------------------------------------------------+
|
|
| Something went wrong |
|
|
| Please try again. |
|
|
| [ Retry ] |
|
|
+---------------------------------------------------------------+
|
|
```
|
|
|
|
### 6.3 Confirmation Modal
|
|
```text
|
|
+-----------------------------------------------+
|
|
| Confirm Action |
|
|
|-----------------------------------------------|
|
|
| Action explanation |
|
|
| |
|
|
| [ Cancel ] [ Confirm ] |
|
|
+-----------------------------------------------+
|
|
```
|
|
|
|
### 6.4 Toast / Alert
|
|
```text
|
|
[ Success ] Saved successfully
|
|
[ Error ] Failed to send message
|
|
[ Warning ] Channel disconnected
|
|
```
|
|
|
|
### 6.5 Loading / Skeleton
|
|
```text
|
|
[ Header Skeleton ]
|
|
[ Card Skeleton ][ Card Skeleton ][ Card Skeleton ]
|
|
[ Table/List Skeleton Rows ]
|
|
```
|
|
|
|
## 7. Catatan Prioritas Visual
|
|
|
|
Screen yang paling layak didesain paling dulu:
|
|
1. login
|
|
2. app shell
|
|
3. admin dashboard
|
|
4. shared inbox
|
|
5. conversation detail
|
|
6. contact list/detail
|
|
7. campaign flow
|
|
8. users/team
|
|
9. super admin dashboard
|
|
10. tenant/channel management
|