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.