Initial BizOne portal setup

stitch_bizone/whatsapp_business_admin_dashboard_system/DESIGN.md

@@ -0,0 +1,163 @@
+---
+name: WhatsApp Business Admin Dashboard System
+colors:
+  surface: '#f3fcef'
+  surface-dim: '#d3ddd0'
+  surface-bright: '#f3fcef'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#edf6e9'
+  surface-container: '#e7f1e4'
+  surface-container-high: '#e2ebde'
+  surface-container-highest: '#dce5d8'
+  on-surface: '#151e16'
+  on-surface-variant: '#3c4a3d'
+  inverse-surface: '#2a332a'
+  inverse-on-surface: '#eaf3e6'
+  outline: '#6c7b6b'
+  outline-variant: '#bbcbb9'
+  surface-tint: '#006d2f'
+  primary: '#006d2f'
+  on-primary: '#ffffff'
+  primary-container: '#25d366'
+  on-primary-container: '#005523'
+  inverse-primary: '#3de273'
+  secondary: '#006b5f'
+  on-secondary: '#ffffff'
+  secondary-container: '#8cf1e1'
+  on-secondary-container: '#006f64'
+  tertiary: '#93492e'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#ffa07e'
+  on-tertiary-container: '#78351b'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#66ff8e'
+  primary-fixed-dim: '#3de273'
+  on-primary-fixed: '#002109'
+  on-primary-fixed-variant: '#005322'
+  secondary-fixed: '#8ff4e3'
+  secondary-fixed-dim: '#72d8c8'
+  on-secondary-fixed: '#00201c'
+  on-secondary-fixed-variant: '#005047'
+  tertiary-fixed: '#ffdbcf'
+  tertiary-fixed-dim: '#ffb59b'
+  on-tertiary-fixed: '#380d00'
+  on-tertiary-fixed-variant: '#763319'
+  background: '#f3fcef'
+  on-background: '#151e16'
+  surface-variant: '#dce5d8'
+  background-main: '#F8F9FA'
+  surface-card: '#FFFFFF'
+  text-primary: '#1A1C1E'
+  text-secondary: '#64748B'
+  border-subtle: '#E2E8F0'
+  status-success: '#25D366'
+  status-warning: '#F59E0B'
+  status-error: '#EF4444'
+  status-info: '#3B82F6'
+typography:
+  display-lg:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 40px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+    letterSpacing: -0.01em
+  title-sm:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 18px
+    fontWeight: '600'
+    lineHeight: 24px
+  body-md:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+  body-sm:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  label-caps:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '600'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  mono-code:
+    fontFamily: jetbrainsMono
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 20px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 8px
+  container-margin: 32px
+  gutter: 24px
+  card-padding: 20px
+  toolbar-height: 64px
+  sidebar-width: 260px
+---
+
+# Figma Design Brief
+
+Design a modern enterprise SaaS admin dashboard for a WhatsApp Business management platform.
+
+## Style Direction
+- Clean, premium, modern
+- WhatsApp-inspired green accent
+- White cards
+- Light gray background
+- Rounded corners
+- Soft shadows
+- Typography: Inter or Plus Jakarta Sans
+
+## Required Pages
+1. Login
+2. Dashboard Overview
+3. Contacts List
+4. Contact Detail
+5. Conversations Inbox
+6. Messages List
+7. Draft Messages
+8. Draft Editor
+9. Campaign List
+10. Campaign Detail
+11. Template List
+12. Template Builder
+13. Settings Overview
+14. WhatsApp API Settings
+15. Webhook Settings
+16. Webhook Logs
+17. Users Management
+18. Roles and Permissions
+19. Activity Logs
+20. Queue Monitor
+
+## Required Components
+- Left sidebar navigation
+- Top header
+- KPI cards
+- Charts
+- Data tables
+- Status badges
+- Filters
+- Mobile message preview
+- Webhook payload viewer drawer
+- Queue monitor widgets
+
+## Tone
+Professional, scalable, operational, suitable for internal business teams.