whatsapp-inbox-platform/komponen-ui-checklist-whatsapp-inbox.md

# Komponen UI Checklist WhatsApp Inbox MVP

Dokumen ini merangkum komponen UI yang perlu disiapkan untuk semua screen. Checklist ini berguna untuk:
- tim desain membuat design system minimum
- tim frontend memecah komponen reusable
- menjaga konsistensi antar screen

Format checklist:
- `Global`
- `Navigation`
- `Data Display`
- `Forms`
- `Inbox`
- `Contacts`
- `Campaigns`
- `Reports`
- `Billing`
- `Feedback States`

## 1. Foundations

### 1.1 Design Tokens
- color palette primary, success, warning, error, neutral
- typography scale
- spacing scale
- border radius scale
- shadows
- z-index layers
- icon size scale

### 1.2 Responsive Rules
- desktop main layout
- tablet fallback
- mobile stacking rules
- sidebar collapse behavior

### 1.3 Content Rules
- date time format
- currency format
- phone number format
- status label copy
- empty state copy

## 2. Global Navigation

### 2.1 Sidebar
- role-based sidebar container
- sidebar section label
- nav item
- nav item with badge
- collapsed sidebar state

### 2.2 Topbar
- page title block
- breadcrumb
- tenant/workspace indicator
- channel status indicator
- search trigger
- notifications trigger
- profile dropdown

### 2.3 Search and Notifications
- global search modal/overlay
- notification center panel
- notification item

## 3. Core Layout Components

### 3.1 Page Structure
- page container
- page header
- page subtitle
- action bar
- filter bar
- split view layout
- right-side inspector panel
- sticky section header

### 3.2 Panels and Containers
- card
- stat card
- info panel
- section container
- tab container
- accordion
- drawer
- modal

## 4. Buttons and Actions

### 4.1 Buttons
- primary button
- secondary button
- tertiary / ghost button
- danger button
- icon button
- loading button

### 4.2 Action Patterns
- dropdown action menu
- inline action link
- confirmation action
- bulk action bar

## 5. Forms

### 5.1 Inputs
- text input
- email input
- password input
- phone number input
- textarea
- search input
- number input

### 5.2 Selectors
- single select
- multi select
- async search select
- combobox
- radio group
- checkbox
- switch/toggle
- date picker
- date range picker
- time picker

### 5.3 Upload
- file upload zone
- CSV upload component
- avatar uploader

### 5.4 Form Feedback
- inline validation error
- helper text
- success state
- disabled state
- submit progress

## 6. Data Display

### 6.1 Tables and Lists
- data table
- table toolbar
- sortable column header
- paginated table
- empty table state
- list item row
- selectable row

### 6.2 Status and Metadata
- badge
- status pill
- tag chip
- avatar
- avatar group
- timestamp label
- metric delta indicator

### 6.3 Charts and KPI
- KPI card
- line chart wrapper
- bar chart wrapper
- donut/pie summary
- legend
- metric summary row

## 7. Auth Components

### 7.1 Login / Password
- auth card layout
- login form
- forgot password form
- reset password form
- password rules hint

### 7.2 Invitation
- invitation accept form
- invite success message

### 7.3 Auth Feedback
- invalid credentials alert
- account disabled alert
- token expired state

## 8. Inbox Components

Inbox adalah area terpenting. Komponen di sini harus diprioritaskan.

### 8.1 Inbox Layout
- inbox filter tabs
- inbox filter toolbar
- conversation list container
- conversation row item
- unread badge
- assignment indicator
- priority indicator

### 8.2 Conversation Detail
- conversation header
- status selector
- priority selector
- assignment selector
- conversation metadata row
- message timeline
- message group
- message bubble inbound
- message bubble outbound
- delivery status marker
- attachment preview
- template message block
- composer toolbar
- reply composer
- send button

### 8.3 Context Panels
- customer summary card
- tag manager
- note list
- add note input
- activity log list
- activity event row

### 8.4 Productivity Tools
- canned response picker
- template picker
- assign/reassign modal
- follow-up indicator

### 8.5 Inbox Feedback States
- no conversation selected
- empty inbox
- loading timeline
- send failed alert
- disconnected channel alert

## 9. Contact Components

### 9.1 Contact List
- contact row
- contact table
- contact search toolbar
- opt-in badge

### 9.2 Contact Form
- contact form section
- phone validation hint
- duplicate warning

### 9.3 Contact Detail
- contact profile card
- custom field block
- conversation history list
- campaign history list
- segment membership list

### 9.4 Import / Export
- import stepper
- field mapping table
- validation preview table
- import result summary
- export options form

### 9.5 Segments
- segment row
- segment rule builder simple
- member count badge

## 10. Template Components

### 10.1 Template List
- template row
- approval status badge
- category badge

### 10.2 Template Form
- template builder form
- header selector
- body editor
- footer input
- button config block
- template preview panel

### 10.3 Template Detail
- provider info block
- rejected reason alert
- resubmit action group

## 11. Campaign Components

### 11.1 Campaign List
- campaign row
- campaign KPI strip
- campaign status badge

### 11.2 Create Campaign Flow
- stepper
- campaign metadata form
- audience source selector
- segment picker
- schedule picker
- recipient estimate block
- review summary block
- warnings panel

### 11.3 Campaign Detail
- campaign summary header
- delivery stats cards
- send timeline
- delivery trend chart
- error breakdown list
- recipient list table

### 11.4 Campaign Recipient States
- queued badge
- sent badge
- delivered badge
- read badge
- failed badge
- skipped badge

## 12. Team / User Components

### 12.1 Users List
- user row
- role badge
- status badge
- last login field

### 12.2 User Form
- role selector
- user status toggle

### 12.3 User Detail
- user profile panel
- assigned workload stat
- personal performance widget

### 12.4 Team Performance
- leaderboard table
- workload summary
- response time comparison

## 13. Reports Components

### 13.1 Reports Overview
- report card
- report group section

### 13.2 Report Detail
- report filter bar
- KPI row
- chart card
- breakdown table
- export action

### 13.3 Specific Metrics
- response time distribution widget
- resolution rate summary
- agent productivity leaderboard
- campaign performance chart
- contact growth chart

## 14. Billing Components

### 14.1 Billing Overview
- current plan card
- quota usage cards
- renewal summary
- upgrade CTA

### 14.2 Invoices
- invoice table
- payment status badge
- invoice summary panel

### 14.3 Usage
- usage progress bar
- quota warning alert

## 15. Super Admin Components

### 15.1 Tenant Management
- tenant row
- tenant status badge
- plan badge
- usage summary cell

### 15.2 Tenant Detail
- tenant summary cards
- seat usage widget
- recent activity panel

### 15.3 Channel Management
- channel row
- provider badge
- webhook status badge
- connection validation result
- reconnect action group

### 15.4 Platform Monitoring
- global KPI cards
- alert feed
- platform health chart
- failure monitoring table

### 15.5 Governance
- audit log table
- log metadata drawer
- webhook log payload viewer
- security event list

### 15.6 Platform Settings
- feature flag toggle row
- pricing config form
- settings section header

## 16. Shared Settings Components

### 16.1 Tenant Settings
- settings side nav
- business hours editor
- auto assignment rules form
- chat tags manager
- canned responses manager
- webhook config form

### 16.2 Profile Settings
- profile summary card
- edit profile form
- change password form

## 17. Feedback and State Components

### 17.1 Feedback
- success toast
- error toast
- warning toast
- info toast
- inline alert

### 17.2 Empty States
- no conversations
- no contacts
- no campaigns
- no templates
- no reports data
- no tenants
- no invoices

### 17.3 Loading States
- page skeleton
- card skeleton
- list row skeleton
- timeline skeleton
- form loading state

### 17.4 Error States
- generic error
- permission denied
- disconnected integration
- failed delivery
- failed upload

### 17.5 Confirmation States
- suspend tenant confirmation
- deactivate user confirmation
- disconnect channel confirmation
- send campaign confirmation
- mark spam confirmation

## 18. Prioritas Implementasi Komponen

Kalau harus dibangun bertahap, urutan paling masuk akal:

1. foundations
2. navigation
3. page layout
4. buttons dan form primitives
5. data table, badge, card
6. inbox components
7. contact components
8. campaign components
9. user/team components
10. report components
11. billing components
12. super admin components
13. settings components
14. feedback states

## 19. Minimum Reusable Component Set

Kalau tim ingin mulai dari set minimum:
- app shell
- sidebar
- topbar
- page header
- card
- stat card
- data table
- badge
- modal
- drawer
- text input
- select
- date picker
- tabs
- split layout
- conversation row
- message bubble
- reply composer
- note list
- activity list
- chart wrapper
- toast/alert

Set ini sudah cukup untuk membangun mayoritas screen MVP.