diff --git a/addons/at_master_order/VERA_DESIGN_SYSTEM.md b/addons/at_master_order/VERA_DESIGN_SYSTEM.md new file mode 100644 index 0000000..b55a5e3 --- /dev/null +++ b/addons/at_master_order/VERA_DESIGN_SYSTEM.md @@ -0,0 +1,1251 @@ +# Vera Design System Guidelines +## Master Order Dashboard Design Reference + +> **Version:** 1.0 +> **Last Updated:** January 2026 +> **Reference Implementation:** Bill Tracking Dashboard + +This document captures all design patterns, colors, typography, and component styles used in the Bill Tracking Dashboard. Use this as a reference when building new dashboards to maintain consistency. + +--- + +## Table of Contents + +1. [Theme System](#1-theme-system) +2. [Color Palette](#2-color-palette) +3. [Typography](#3-typography) +4. [Spacing System](#4-spacing-system) +5. [Border & Shadows](#5-border--shadows) +6. [Odoo Navigation Bar](#6-odoo-navigation-bar) +7. [Dashboard Header Bar](#7-dashboard-header-bar) +8. [Component Library](#8-component-library) +9. [Layout Patterns](#9-layout-patterns) +10. [Responsive Design](#10-responsive-design) +11. [Icons](#11-icons) +12. [Interactive States](#12-interactive-states) +13. [Code Snippets](#13-code-snippets) + +--- + +## 1. Theme System + +### 1.1 CSS Variables + +All theme colors are defined as CSS variables in `master_order_theme_variables.scss`: + +```scss +:root { + // Primary Colors (change per theme) + --mo-theme-primary: #4682B4; + --mo-theme-primary-dark: #3A6D99; + --mo-theme-primary-light: #5B9BD5; + --mo-theme-primary-pale: #E8F4FC; + + // Background Colors + --mo-theme-background: #F9FAFB; + --mo-theme-card-bg: #FFFFFF; + --mo-theme-border: #D9D9D9; + + // Text Colors + --mo-theme-text: #1d1d1f; + --mo-theme-text-muted: #86868b; +} +``` + +### 1.2 Available Themes + +| Theme Name | Primary | Background | Use Case | +|------------|---------|------------|----------| +| **Vera Blue Eye** | `#4682B4` | `#F9FAFB` | Default, eye-friendly | +| **Vera Excel** | `#23764A` | `#FFFFFF` | Excel-like, pure white | +| **Ocean Teal** | `#017e84` | `#F8F9FA` | Odoo Enterprise style | + +### 1.3 Theme Switcher Component + +```xml + +
+
+``` + +### 1.4 Using Theme Variables + +Always use CSS variables instead of hardcoded colors: + +```scss +// ✅ GOOD - Theme aware +.my-element { + color: var(--mo-theme-primary); + background: var(--mo-theme-background); + border: 1px solid var(--mo-theme-border); +} + +// ❌ BAD - Hardcoded +.my-element { + color: #4682B4; + background: #F9FAFB; +} +``` + +--- + +## 2. Color Palette + +### 2.1 Primary Theme Colors + +| Variable | Vera Blue Eye | Vera Excel | Ocean Teal | +|----------|---------------|------------|------------| +| `--mo-theme-primary` | `#4682B4` | `#23764A` | `#017e84` | +| `--mo-theme-primary-dark` | `#3A6D99` | `#1A5A38` | `#015d62` | +| `--mo-theme-primary-light` | `#5B9BD5` | `#2D8F5E` | `#02a5ad` | +| `--mo-theme-primary-pale` | `#E8F4FC` | `#E8F5ED` | `#E8F8F9` | + +### 2.2 Status Colors + +| Status | Dot Color | Badge Background | Text Color | +|--------|-----------|------------------|------------| +| **Paid** | `#34c759` | `#d4edda` | `#155724` | +| **Partial** | `var(--mo-theme-primary)` | `--mo-theme-primary-pale` | `--mo-theme-primary` | +| **Not Paid** | `#ff3b30` | `#f8d7da` | `#721c24` | +| **Pending** | `#ff9500` | `#fff3cd` | `#856404` | + +### 2.3 Background Colors + +| Element | Color | Usage | +|---------|-------|-------| +| Page Background | `var(--mo-theme-background)` | Main dashboard background | +| Card Background | `var(--mo-theme-card-bg)` / `#FFFFFF` | All cards | +| Hover Background | `rgba(0,0,0,0.02)` | Row hover states | +| Input Background | `#f5f5f7` | Form inputs, badges | + +### 2.4 Semantic Colors + +```scss +// Success (Green) +$color-success: #34c759; +$color-success-bg: #d4edda; +$color-success-text: #155724; + +// Warning (Yellow/Orange) +$color-warning: #ff9500; +$color-warning-bg: #fff3cd; +$color-warning-text: #856404; + +// Danger (Red) +$color-danger: #ff3b30; +$color-danger-bg: #f8d7da; +$color-danger-text: #721c24; + +// Muted (Gray) +$color-muted: #86868b; +$color-muted-bg: #f5f5f7; +``` + +--- + +## 3. Typography + +### 3.1 Font Stack + +```scss +font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; +``` + +### 3.2 Font Sizes + +| Element | Size | Weight | Line Height | +|---------|------|--------|-------------| +| Page Title | `28px` | 600 | 1.2 | +| Subtitle | `13px` | 400 | 1.4 | +| Card Value (Large) | `24px` | 600 | 1.2 | +| Card Label | `12px` | 500 | 1.4 | +| Card Sub-text | `11px` | 400 | 1.4 | +| Customer Name | `16px` | 600 | 1.3 | +| Bill Number | `13px` | 600 | 1.4 | +| Badge Text | `11px` | 500 | 1 | +| Small Text | `10px` | 400 | 1.4 | + +### 3.3 Text Colors + +| Type | Color | Usage | +|------|-------|-------| +| Primary Text | `#1d1d1f` | Headlines, important values | +| Secondary Text | `#86868b` | Labels, descriptions | +| Muted Text | `#6c757d` | Hints, timestamps | +| Link Text | `var(--mo-theme-primary)` | Clickable elements | +| Danger Text | `#ff3b30` | Negative values, warnings | +| Success Text | `#34c759` | Positive values | + +--- + +## 4. Spacing System + +### 4.1 Base Units + +Use multiples of 4px for consistency: + +| Name | Size | Usage | +|------|------|-------| +| `xs` | `4px` | Icon margins, tight gaps | +| `sm` | `8px` | Badge padding, small gaps | +| `md` | `12px` | Component gaps | +| `lg` | `16px` | Section gaps | +| `xl` | `24px` | Card padding, grid gaps | +| `2xl` | `32px` | Section margins | +| `3xl` | `48px` | Major section breaks | + +### 4.2 Page Layout + +```scss +.dashboard { + padding: 32px 40px 240px 40px; // Top Right Bottom Left + // Note: 240px bottom for generous scroll space +} +``` + +### 4.3 Card Spacing + +```scss +.summary-card { + padding: 20px; + gap: 24px; // Grid gap between cards + margin-bottom: 48px; // Before divider +} + +.customer-card { + padding: 20px; + gap: 16px; // Between elements inside +} +``` + +--- + +## 5. Border & Shadows + +### 5.1 Border Radius + +| Element | Radius | +|---------|--------| +| Cards (Summary/Customer) | `16px` | +| Buttons | `8px` | +| Badges | `6px` | +| Progress Bars | `4px` | +| Small Elements | `4px` | + +### 5.2 Border Color + +```scss +border: 1px solid var(--mo-theme-border, #D9D9D9); +``` + +### 5.3 Shadows + +| State | Shadow | +|-------|--------| +| Default Card | `0 2px 12px rgba(0, 0, 0, 0.03)` | +| Hover Card | `0 8px 24px rgba(70, 130, 180, 0.15)` | +| Elevated | `0 4px 20px rgba(0, 0, 0, 0.04)` | + +### 5.4 Dividers + +```scss +// Section Divider +&::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: var(--mo-theme-border, #D9D9D9); +} +``` + +--- + +## 6. Odoo Navigation Bar + +The main Odoo navigation bar (top menu) follows the theme colors for a cohesive branded experience. + +### 6.1 Navigation Bar Structure + +``` +┌─────────────────────────────────────────────────────────────────────────────┐ +│ [App Icon] Master Orders │ Dashboard │ Bill Tracking │ ... │ + │ 🔔 │ User │ +└─────────────────────────────────────────────────────────────────────────────┘ +``` + +### 6.2 Navigation Bar Colors + +| Element | Color | +|---------|-------| +| Background | `var(--mo-theme-primary-dark)` | +| Text | `rgba(255, 255, 255, 0.85)` | +| Hover Background | `var(--mo-theme-primary)` | +| Active Menu Item | `var(--mo-theme-primary)` | + +### 6.3 Navigation Bar SCSS Override + +```scss +// Override Odoo's default navbar to follow Master Order theme +.o_main_navbar { + background-color: var(--mo-theme-primary-dark) !important; + border-bottom: 1px solid var(--mo-theme-primary-dark) !important; + + // App name/brand + .o_menu_brand { + color: white !important; + + &:hover { + background-color: var(--mo-theme-primary) !important; + } + } + + // Menu items + .o_menu_sections .o_nav_entry { + color: rgba(255, 255, 255, 0.85) !important; + + &:hover, &:focus, &.active { + background-color: var(--mo-theme-primary) !important; + color: white !important; + } + } + + // Dropdown menus + .dropdown-menu { + background-color: var(--mo-theme-primary-dark) !important; + border: 1px solid var(--mo-theme-primary) !important; + + .dropdown-item { + color: rgba(255, 255, 255, 0.85) !important; + + &:hover { + background-color: var(--mo-theme-primary) !important; + color: white !important; + } + } + } + + // Right side icons (systray) + .o_menu_systray .o_nav_entry { + color: rgba(255, 255, 255, 0.85) !important; + + &:hover { + background-color: var(--mo-theme-primary) !important; + } + } +} +``` + +### 6.4 Theme Color on Navigation + +| Theme | Nav Background | Nav Hover | +|-------|---------------|-----------| +| **Vera Blue Eye** | `#3A6D99` | `#4682B4` | +| **Vera Excel** | `#1A5A38` | `#23764A` | +| **Ocean Teal** | `#015d62` | `#017e84` | + +### 6.5 Important Note + +The navigation bar uses `!important` to override Odoo's default styles. This ensures our theme colors take precedence. + +--- + +## 7. Dashboard Header Bar + +The header bar is a consistent element across all dashboards. It should always follow the theme colors. + +### 6.1 Header Bar Structure + +```xml +
+
+

+ Page Title +

+ Description text +
+
+ +
+ +
+ +
...
+ + + +
+ + +
+
+
+``` + +### 6.2 Header Bar Styling + +```scss +.dashboard-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; + padding: 16px 20px; + background: var(--mo-theme-card-bg, white); + border: 1px solid var(--mo-theme-border, #D9D9D9); + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); +} +``` + +### 6.3 Title with Icon Box + +```scss +.title { + font-size: 24px; + font-weight: 600; + color: var(--mo-theme-text, #1d1d1f); + display: flex; + align-items: center; + + i { + color: var(--mo-theme-primary); + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--mo-theme-primary-pale); + border-radius: 10px; + margin-right: 12px; + font-size: 22px; + } +} + +.subtitle { + font-size: 13px; + color: var(--mo-theme-text-muted, #86868b); + margin-top: 4px; + margin-left: 52px; // Align with title text (after icon) +} +``` + +### 6.4 Filter Toggle + +```scss +.filter-toggle { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + font-size: 12px; + color: var(--mo-theme-text-muted); + padding: 6px 12px; + background: var(--mo-theme-primary-pale); + border-radius: 6px; + border: 1px solid var(--mo-theme-border, #D9D9D9); + + &:hover { + border-color: var(--mo-theme-primary); + } + + input[type="checkbox"] { + width: 16px; + height: 16px; + accent-color: var(--mo-theme-primary); + } +} +``` + +### 6.5 Refresh Button + +```scss +.refresh-btn { + border-radius: 6px; + padding: 6px 12px; + font-size: 12px; + border: 1px solid var(--mo-theme-primary); + color: var(--mo-theme-primary); + background: transparent; + + &:hover { + background: var(--mo-theme-primary); + color: white; + } + + i { + margin-right: 4px; + } +} +``` + +### 6.6 View Toggle + +```scss +.view-toggle { + display: flex; + gap: 2px; + background: var(--mo-theme-primary-pale); + padding: 3px; + border-radius: 8px; + border: 1px solid var(--mo-theme-border, #D9D9D9); + + .btn { + padding: 6px 12px; + border-radius: 6px; + border: none; + font-size: 12px; + + // Inactive state + &.btn-outline-secondary { + background: transparent; + color: var(--mo-theme-text-muted); + + &:hover { + background: rgba(255,255,255,0.7); + color: var(--mo-theme-primary); + } + } + + // Active state + &.btn-primary { + background: linear-gradient(135deg, + var(--mo-theme-primary) 0%, + var(--mo-theme-primary-light) 100%); + color: white; + box-shadow: 0 2px 8px rgba(70, 130, 180, 0.25); + } + } +} +``` + +### 6.7 Theme Switcher Dots + +```scss +.theme-switcher { + display: flex; + align-items: center; + gap: 6px; + padding: 4px 8px; + background: rgba(0, 0, 0, 0.04); + border-radius: 20px; + + .theme-dot { + width: 18px; + height: 18px; + border-radius: 50%; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; + padding: 0; + + &:hover { + transform: scale(1.2); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + } + + // Each theme has gradient showing primary + background + &.theme-blue-eye { + background: linear-gradient(135deg, #4682B4 60%, #F9FAFB 100%); + border: 1px solid #4682B4; + } + + &.theme-excel { + background: linear-gradient(135deg, #23764A 60%, #FFFFFF 100%); + border: 1px solid #23764A; + } + + &.theme-teal { + background: linear-gradient(135deg, #017e84 60%, #F8F9FA 100%); + border: 1px solid #017e84; + } + } +} +``` + +--- + +## 8. Component Library + +### 6.1 Summary Cards + +```scss +.summary-card { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 20px; + background: var(--mo-theme-card-bg, white); + border-radius: 16px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); + border: 1px solid var(--mo-theme-border, #D9D9D9); +} + +.summary-card-icon { + width: 44px; + height: 44px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, var(--mo-theme-primary-pale) 0%, white 100%); + color: var(--mo-theme-primary); + font-size: 18px; +} + +.summary-card-value { + font-size: 24px; + font-weight: 600; + color: #1d1d1f; +} + +.summary-card-label { + font-size: 12px; + font-weight: 500; + color: #86868b; +} + +.summary-card-sub { + font-size: 11px; + color: #86868b; +} +``` + +### 6.2 Customer/Entity Cards + +```scss +.entity-card { + background: var(--mo-theme-card-bg, white); + border-radius: 16px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); + border: 1px solid var(--mo-theme-border, #D9D9D9); + padding: 20px; + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 8px 24px rgba(70, 130, 180, 0.15); + border-color: var(--mo-theme-primary); + } +} +``` + +### 6.3 Status Badges (Dot Style) + +```scss +.status-badge { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 11px; + font-weight: 500; + white-space: nowrap; + + &::before { + content: "●"; + font-size: 8px; + } + + // Paid - Green + &.badge-paid { + color: #34c759; + &::before { color: #34c759; } + } + + // Partial - Theme Primary + &.badge-partial { + color: var(--mo-theme-primary); + &::before { color: var(--mo-theme-primary); } + } + + // Not Paid - Red + &.badge-not_paid { + color: #ff3b30; + &::before { color: #ff3b30; } + } + + // Pending - Orange + &.badge-pending { + color: #ff9500; + &::before { color: #ff9500; } + } +} +``` + +### 6.4 Logistics Badges (Pill Style) + +```scss +.logistics-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px 10px; + border-radius: 6px; + font-size: 11px; + font-weight: 500; + white-space: nowrap; + + // Default (CTN count) + background: #f5f5f7; + color: #6c757d; + + // Sent - Green + &.badge-sent { + background: #d4edda; + color: #155724; + } + + // Remain - Yellow (if has value) + &.badge-remain.has-value { + background: #fff3cd; + color: #856404; + } + + // Remain - Gray (if zero) + &.badge-remain { + background: #f5f5f7; + color: #6c757d; + } +} +``` + +### 6.5 Progress Bars + +```scss +.progress-bar-container { + height: 4px; + background: #f2f2f7; + border-radius: 4px; + overflow: hidden; +} + +.progress-bar-fill { + height: 100%; + border-radius: 4px; + transition: width 0.3s ease; + + // Default - Theme Primary + background: linear-gradient(90deg, + var(--mo-theme-primary) 0%, + var(--mo-theme-primary-light) 100%); + + // 100% - Green + &.complete { + background: linear-gradient(90deg, #34c759 0%, #30d158 100%); + } +} + +.progress-label { + font-size: 10px; + color: var(--mo-theme-primary); + margin-top: 4px; +} +``` + +### 6.6 Buttons + +```scss +// Primary Action Button +.btn-primary-action { + background: linear-gradient(135deg, + var(--mo-theme-primary) 0%, + var(--mo-theme-primary-light) 100%); + color: white; + border: none; + border-radius: 8px; + padding: 8px 16px; + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: linear-gradient(135deg, + var(--mo-theme-primary-dark) 0%, + var(--mo-theme-primary) 100%); + box-shadow: 0 4px 12px rgba(70, 130, 180, 0.3); + } +} + +// Icon Button +.btn-icon { + width: 28px; + height: 28px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: 1px solid #e5e5ea; + color: #86868b; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: #f5f5f7; + color: var(--mo-theme-primary); + } +} +``` + +--- + +## 7. Layout Patterns + +### 7.1 Dashboard Structure + +```xml +
+ +
+
+

Title

+ Description text +
+
+ +
+
+ + +
+ +
+ + + + +
+ +
+
+``` + +### 7.2 Grid Layouts + +```scss +// Summary Cards Grid +.summary-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 24px; +} + +// Entity Cards Grid +.entity-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 16px; +} +``` + +### 7.3 Card Internal Layout + +```scss +// Two-row layout for bill items +.bill-row { + display: flex; + flex-direction: column; + gap: 8px; + padding: 12px; + + .bill-top { + display: flex; + justify-content: space-between; + align-items: flex-start; + } + + .bill-bottom { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + flex-wrap: wrap; + } +} +``` + +--- + +## 8. Responsive Design + +### 8.1 Breakpoints + +| Name | Width | Target | +|------|-------|--------| +| Desktop | `> 1024px` | Full layout | +| Tablet | `768px - 1024px` | Reduced columns | +| Mobile | `480px - 768px` | Stacked layout | +| Small Mobile | `< 480px` | Minimal layout | + +### 8.2 Responsive SCSS + +```scss +// Tablet +@media (max-width: 1024px) { + .dashboard { + padding: 24px 24px 200px 24px; + } + + .summary-cards-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +// Mobile +@media (max-width: 768px) { + .dashboard { + padding: 16px 16px 180px 16px; + } + + .summary-cards-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .entity-cards-grid { + grid-template-columns: 1fr; + } +} + +// Small Mobile +@media (max-width: 480px) { + .summary-cards-grid { + grid-template-columns: 1fr; + } + + .card-value { + font-size: 20px; + } +} +``` + +### 8.3 Scrolling Setup + +```scss +// Override Odoo container restrictions +.o_action_manager, +.o_action_manager > .o_action, +.o_view_manager_content, +.o_content { + overflow-y: auto !important; + overflow-x: hidden !important; + height: auto !important; + max-height: none !important; +} + +// Dashboard wrapper +.dashboard { + min-height: 100vh; + height: auto !important; + overflow: visible !important; // Let parent scroll +} +``` + +--- + +## 9. Icons + +### 9.1 Icon Library + +Using **Font Awesome 4.x** (available in Odoo). + +### 9.2 Common Icons + +| Use Case | Icon | Class | +|----------|------|-------| +| Money/Amount | 💰 | `fa-money` | +| Paid/Success | ✓ | `fa-check-circle` | +| Outstanding | ⊘ | `fa-exclamation-circle` | +| Delayed/Time | ⏱ | `fa-clock-o` | +| Shipping/CTN | 📦 | `fa-cubes` | +| Truck/Sent | 🚚 | `fa-truck` | +| CBM/Volume | ⬛ | `fa-cube` | +| Remain/Inbox | 📥 | `fa-inbox` | +| Bill/Document | 📄 | `fa-file-text-o` | +| User/Customer | 👤 | `fa-user` | +| Vendor | 🏢 | `fa-building` | +| Payment | 💳 | `fa-credit-card` | +| View/Eye | 👁 | `fa-eye` | +| Refresh | 🔄 | `fa-refresh` | +| Expand/Collapse | ▼▲ | `fa-chevron-down` / `fa-chevron-up` | +| Grid View | ⊞ | `fa-th-large` | +| List View | ☰ | `fa-list` | + +### 9.3 Icon Styling + +```scss +.icon { + font-size: 18px; + color: var(--mo-theme-primary); + + // In badges + &.badge-icon { + font-size: 10px; + margin-right: 4px; + } + + // In card headers + &.card-icon { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--mo-theme-primary-pale); + border-radius: 12px; + } +} +``` + +--- + +## 10. Interactive States + +### 10.1 Hover States + +```scss +// Card Hover +.card:hover { + box-shadow: 0 8px 24px rgba(70, 130, 180, 0.15); + border-color: var(--mo-theme-primary); +} + +// Row Hover +.row:hover { + background: rgba(0, 0, 0, 0.02); +} + +// Button Hover +.btn:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +// Link Hover +a:hover { + color: var(--mo-theme-primary-dark); + text-decoration: underline; +} +``` + +### 10.2 Transitions + +```scss +// Standard transition +transition: all 0.3s ease; + +// Smooth cubic bezier +transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + +// Quick transition (buttons) +transition: all 0.2s ease; +``` + +### 10.3 Focus States + +```scss +// Accessible focus +:focus { + outline: 2px solid var(--mo-theme-primary); + outline-offset: 2px; +} + +// Focus within cards +.card:focus-within { + border-color: var(--mo-theme-primary); +} +``` + +--- + +## 11. Code Snippets + +### 11.1 Complete Summary Card + +```xml +
+
+ +
+
+ + + + Total Amount + + items + +
+
+``` + +### 11.2 Complete Entity Card + +```xml +
+ +
+
+ + +
+ + + +
+ + +
+
+ +
+
Outstanding
+ + +
+
+
+
+ + % paid + +
+
+ + +
+
+ + / CTN +
+
+ + +
+ +
+
+``` + +### 11.3 Complete Bill Row + +```xml +
+ +
+
+ + + + + +
+
+ + + owed + +
+
+ + +
+
+ + + +
+
+ + CTN + + + Sent: + + + Remain: + +
+
+ + +
+
+
+``` + +### 11.4 Theme Setter JavaScript + +```javascript +async setTheme(themeName) { + // Apply immediately + document.documentElement.setAttribute('data-mo-theme', themeName); + document.body?.setAttribute('data-mo-theme', themeName); + localStorage.setItem('mo_theme', themeName); + + // Save to backend + if (window.moTheme) { + await window.moTheme.setTheme(themeName); + } +} +``` + +--- + +## Quick Reference Card + +### Colors to Remember + +| Purpose | Color | +|---------|-------| +| Border | `#D9D9D9` | +| Background (Eye-friendly) | `#F9FAFB` | +| Card Background | `#FFFFFF` | +| Muted Text | `#86868b` | +| Primary Text | `#1d1d1f` | +| Success Green | `#34c759` | +| Warning Yellow | `#ff9500` | +| Danger Red | `#ff3b30` | + +### Sizes to Remember + +| Element | Size | +|---------|------| +| Card Border Radius | `16px` | +| Button Border Radius | `8px` | +| Badge Border Radius | `6px` | +| Card Padding | `20px` | +| Grid Gap | `16px` - `24px` | +| Page Bottom Padding | `240px` | + +### Files to Update + +| Component | File | +|-----------|------| +| Theme Variables | `static/src/scss/master_order_theme_variables.scss` | +| Dashboard Styles | `static/src/scss/[dashboard_name]_dashboard.scss` | +| Templates | `static/src/xml/[dashboard_name]_templates.xml` | +| JavaScript | `static/src/js/[dashboard_name]_dashboard.js` | +| Python Model | `models/res_users.py` (for theme field) | + +--- + +*This design system ensures visual consistency across all Master Order dashboards.*