Prepare BizOne portal production wallet and UI

stitch_bizone/admin_dashboard_system/DESIGN.md

@@ -0,0 +1,171 @@
+---
+name: Admin Dashboard System
+colors:
+  surface: '#faf8fd'
+  surface-dim: '#dbd9dd'
+  surface-bright: '#faf8fd'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f5f3f7'
+  surface-container: '#efedf1'
+  surface-container-high: '#e9e7ec'
+  surface-container-highest: '#e3e2e6'
+  on-surface: '#1b1b1f'
+  on-surface-variant: '#44474f'
+  inverse-surface: '#303033'
+  inverse-on-surface: '#f2f0f4'
+  outline: '#75777f'
+  outline-variant: '#c5c6d0'
+  surface-tint: '#495e8a'
+  primary: '#00020a'
+  on-primary: '#ffffff'
+  primary-container: '#001b44'
+  on-primary-container: '#7084b3'
+  inverse-primary: '#b1c6f9'
+  secondary: '#00658d'
+  on-secondary: '#ffffff'
+  secondary-container: '#2dbcfe'
+  on-secondary-container: '#004866'
+  tertiary: '#080100'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#381000'
+  on-tertiary-container: '#b67558'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#d8e2ff'
+  primary-fixed-dim: '#b1c6f9'
+  on-primary-fixed: '#001a42'
+  on-primary-fixed-variant: '#314671'
+  secondary-fixed: '#c6e7ff'
+  secondary-fixed-dim: '#82cfff'
+  on-secondary-fixed: '#001e2d'
+  on-secondary-fixed-variant: '#004c6b'
+  tertiary-fixed: '#ffdbcd'
+  tertiary-fixed-dim: '#ffb596'
+  on-tertiary-fixed: '#360f00'
+  on-tertiary-fixed-variant: '#6d3920'
+  background: '#faf8fd'
+  on-background: '#1b1b1f'
+  surface-variant: '#e3e2e6'
+typography:
+  display-lg:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 36px
+    fontWeight: '700'
+    lineHeight: 44px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+    letterSpacing: -0.01em
+  title-lg:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 18px
+    fontWeight: '600'
+    lineHeight: 24px
+  body-md:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+  body-sm:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  label-md:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 12px
+    fontWeight: '600'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  headline-md-mobile:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  unit: 4px
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  gutter: 24px
+  margin-page: 32px
+---
+
+## Brand & Style
+
+This design system transitions the WhatsApp Business experience from a casual communication tool into a high-performance Enterprise SaaS platform. The aesthetic is **Corporate Modern**, prioritizing clarity, data density, and professional trust. 
+
+By replacing the traditional green with a deep navy and electric cyan palette, the UI evokes stability and technological precision. The style uses a "Quiet Interface" approach: neutral surfaces and subtle borders allow data visualizations and message content to take center stage, while the cyan accent provides high-visibility cues for primary actions and notifications.
+
+**Target Audience:** Business administrators, customer success managers, and operations leads who require a focused, high-productivity environment for managing large-scale communications.
+
+## Colors
+
+The palette is anchored by **Deep Navy (#001B44)**, used for structural elements like sidebars and primary headings to establish authority. **Cyan (#00AEEF)** serves as the high-energy accent for interactivity, progress bars, and active states.
+
+- **Primary:** Use Navy for the highest level of hierarchy and navigation backgrounds.
+- **Secondary:** Use Cyan for primary buttons, selection states, and "new message" indicators.
+- **Surface:** The background uses a cool-toned Slate gray to reduce eye strain compared to pure white.
+- **Functional:** Standard semantic colors are adjusted for high legibility against the navy/white background, ensuring status indicators (online, pending, failed) are immediately recognizable.
+
+## Typography
+
+This design system utilizes **Plus Jakarta Sans** across all levels to maintain a contemporary, approachable, yet geometric look. 
+
+- **Headlines:** Use Bold weights (700) with slight negative letter-spacing for a compact, "SaaS-ready" appearance in headers and dashboard widgets.
+- **Body Text:** Standardized at 16px for readability, with 14px used for secondary metadata in message lists and audit logs.
+- **Labels:** Uppercase labels with increased letter-spacing should be used for table headers and small category tags to differentiate them from actionable text.
+- **Contrast:** Ensure all text on Navy backgrounds uses White or Cyan-tinted grays to maintain WCAG AA compliance.
+
+## Layout & Spacing
+
+The design system employs a **12-column fluid grid** for the main dashboard view, allowing widgets to reflow based on screen width. 
+
+- **Sidebar:** A fixed-width (280px) vertical navigation bar anchored to the left, utilizing the Deep Navy palette.
+- **Gutter System:** A consistent 24px (lg) gutter is maintained between dashboard cards to create clear visual separation.
+- **Density:** For data-heavy views (like the "All Chats" list), vertical padding is reduced to 8px (sm) to maximize information density without sacrificing touch targets.
+- **Mobile:** On devices < 768px, the sidebar collapses into a bottom navigation bar or a hamburger menu, and page margins reduce to 16px.
+
+## Elevation & Depth
+
+To maintain a clean SaaS aesthetic, this design system avoids heavy shadows, instead relying on **Tonal Layers** and **Low-Contrast Outlines**.
+
+- **Level 0 (Canvas):** The base background layer (#F8FAFC).
+- **Level 1 (Cards):** Dashboard widgets and chat containers use a white background with a subtle 1px border (#E2E8F0). No shadow.
+- **Level 2 (Dropdowns/Modals):** Elements that float above the UI use a soft, ambient shadow (10% opacity Navy) and a slightly thicker border to indicate focus.
+- **Active State:** Cyan is used as a 2px "glow" or border-left accent to denote selected items in a list or active input fields.
+
+## Shapes
+
+The shape language is consistently **Rounded**, providing a friendlier contrast to the professional navy color palette. 
+
+- **Standard Elements:** Buttons, input fields, and dashboard cards use a 0.5rem (8px) radius.
+- **Large Elements:** Modals and large containers use 1rem (16px) for a soft, modern feel.
+- **Interactive Indicators:** Small badges and notification counters use a fully pill-shaped (rounded-full) geometry to stand out as distinct interactive units.
+
+## Components
+
+- **Buttons:** 
+  - *Primary:* Navy background with White text for high-impact actions.
+  - *Accent:* Cyan background with Navy text for secondary "Call to Action" items.
+  - *Ghost:* No background, Navy border and text for utility actions.
+- **Chat Bubbles:**
+  - *Incoming:* Light gray (#F1F5F9) with Navy text.
+  - *Outgoing:* Deep Navy (#001B44) with White text, using Cyan for "Read" receipts.
+- **Input Fields:** 1px Slate border (#CBD5E1), turning Cyan on focus. Includes a 4px inner padding for a spacious feel.
+- **Chips & Tags:** Small, low-saturation backgrounds (e.g., light cyan or light navy) with high-contrast text to categorize "New Leads," "Support," or "Billing" without cluttering the UI.
+- **Sidebar Nav:** High-contrast Navy background with Cyan icons for the active state to ensure the navigation is the primary anchor of the layout.