chore: initial project import

komponen-ui-checklist-whatsapp-inbox.md

@@ -0,0 +1,517 @@
+# 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.