# QMC Design System & Component Implementation Guide > **Version**: 2.0 > **Last Updated**: 2025-11-19 > **Purpose**: Comprehensive design system for QPilot Merchant Center (QMC) application --- ## Table of Contents ### Part I: Executive & Customer Success Guide 1. [Design System Overview](#design-system-overview) 2. [Visual Layout Patterns](#visual-layout-patterns) 3. [Component Catalog](#component-catalog) 4. [User Experience Principles](#user-experience-principles) 5. [How to Request New Features](#how-to-request-new-features) ### Part II: Developer Implementation Guide 6. [Technical Architecture](#technical-architecture) 7. [Layout Implementation Patterns](#layout-implementation-patterns) 8. [Component Development Guide](#component-development-guide) 9. [Theme & Styling System](#theme--styling-system) 10. [Best Practices & Code Examples](#best-practices--code-examples) --- # Part I: Executive & Customer Success Guide ## Design System Overview The QMC Design System is a comprehensive framework that ensures consistency, usability, and scalability across the QPilot Merchant Center application. It defines how every screen, component, and interaction should look and behave. ### Core Design Principles 1. **๐Ÿ“ Compact & Efficient**: Maximize data density while maintaining readability 2. **๐ŸŽฏ Task-Focused**: Every screen has a clear primary action 3. **๐Ÿ“ฑ Responsive**: Adapts seamlessly from mobile to desktop 4. **โ™ฟ Accessible**: WCAG 2.1 AA compliant for all users 5. **โšก Performance-First**: Fast load times and smooth interactions ### Application Structure ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ HEADER (60px) โ”‚ โ”‚ [Logo] Sites > Dashboard > Current Page [User] [Store] โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ โ”‚ SIDE โ”‚ MAIN CONTENT AREA โ”‚ โ”‚ BAR โ”‚ โ”‚ โ”‚ โ”‚ โ€ข Fixed height containers โ”‚ โ”‚ (200px)โ”‚ โ€ข Internal scrolling only โ”‚ โ”‚ โ”‚ โ€ข Action buttons always visible โ”‚ โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ FOOTER (40px) โ”‚ โ”‚ ยฉ 2025 QPilot | v1.5.19 | Privacy | Terms โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` --- ## Visual Layout Patterns ### Pattern 1: List with Sidebar Filters (e.g., Scheduled Orders) ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Sites > Dashboard > Scheduled Orders [Create] ๐Ÿ”ฒ โ”‚ โ”œโ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚๐Ÿ”ฝโ”‚ FILTERS โ”‚ 126 Scheduled Orders โ”‚ โ”œโ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ ๐Ÿ” Search โ”‚ ID โ†• Status Customer Next Date Actions โ”‚ โ”‚T โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚O โ”‚ Status โ”‚ #134 ACTIVE john@... Apr 17 2025 [ยทยทยท] โ”‚ โ”‚G โ”‚ โ˜‘ Active โ”‚ #135 FAILED mary@... Apr 17 2025 [ยทยทยท] โ”‚ โ”‚G โ”‚ โ˜‘ Failed โ”‚ #136 PAUSED bob@... May 16 2025 [ยทยทยท] โ”‚ โ”‚L โ”‚ โ˜ Paused โ”‚ #137 ACTIVE sara@... May 17 2025 [ยทยทยท] โ”‚ โ”‚E โ”‚ โ”‚ #138 DELETED alex@... May 20 2025 [ยทยทยท] โ”‚ โ”‚ โ”‚ Date Range โ”‚ #139 ACTIVE tom@... May 21 2025 [ยทยทยท] โ”‚ โ”‚ โ”‚ [Apr 1-30] โ”‚ โ‹ฎ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ + More โ”‚ โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ [<] [1] 2 3 4 5 [>] Showing 1-20 of 126 โ”‚ โ””โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ†‘ โ†‘ Toggle Filters Data Table (48px) (320px) (Flexible Width) ``` **Key Features:** - Collapsible filter sidebar (320px expanded, 48px collapsed) - Sticky pagination at bottom - Compact data rows with hover states - Inline actions via dropdown menus - Real-time search and filtering ### Pattern 1A: Mobile Card View (< 768px) **CRITICAL**: On mobile devices, tables transform into stacked cards. This is NOT optional - all data tables must implement this pattern. ``` MOBILE CARD LIST (<768px) โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ 126 Scheduled Orders [+ Create] โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ โ”‚ T โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ O โ”‚ โ”‚ โ–ถ #1234 โ‹ฎ โ”‚ โ”‚ โ”‚ G โ”‚ โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚ โ”‚ โ”‚ G โ”‚ โ”‚ NAME John Doe โ”‚ โ”‚ โ”‚ L โ”‚ โ”‚ STATUS โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ E โ”‚ โ”‚ โ”‚ ACTIVE โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ 48 โ”‚ โ”‚ EMAIL john@example.com โ”‚ โ”‚ โ”‚ px โ”‚ โ”‚ NEXT DATE Apr 17, 2025 โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ FREQUENCY 30 Days โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ โ”‚ โ–ผ #1235 โ‹ฎ โ”‚โ† Expanded โ”‚ โ”‚ โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ NAME Jane Smith โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ STATUS โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ FAILED โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ EMAIL jane@example.com โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”˜ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚โ† Connected โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ Expanded โ”‚ โ”‚ โ”‚ โ”‚ Edit โ”‚ โ”‚ View Logs โ”‚ โ”‚ View Cycles โ”‚ โ”‚ โ”‚ Row โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ CUSTOMER INFO PAYMENT INFO โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ First Name: Jane Method: Stripe โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ Last Name: Smith Currency: USD โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ โ”‚ โ–ถ #1236 โ‹ฎ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ ... โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ Showing 1 to 25 of 126 โ”‚ โ”‚ [<] [1] 2 3 [>] [25 โ–ผ] โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` **Mobile Card Structure:** ``` CARD HEADER (First Line): โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ–ถ #1234 โ‹ฎ โ”‚ โ”‚ โ†‘ โ†‘ โ†‘ โ”‚ โ”‚ 24px ID (flex:1, font-weight:700) Actions (absolute)โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ DATA ROWS (Label: Value format): โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ LABEL (85px) VALUE โ”‚ โ”‚ font-size: 0.75rem text-align: right โ”‚ โ”‚ font-weight: 600 overflow: ellipsis โ”‚ โ”‚ color: #6b7280 flex: 1 โ”‚ โ”‚ text-transform: uppercase โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ Card CSS: - border: 1px solid #e5e7eb - border-radius: 0.75rem (12px) - padding: 0.5rem 0.75rem - margin-bottom: 0.75rem - box-shadow: 0 2px 4px rgba(0,0,0,0.08) - background: white ``` **Expanded Card Connection:** ``` EXPANDED STATE - Card and expanded row connect visually: โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ–ผ #1235 โ‹ฎ โ”‚ โ† border-radius: top only โ”‚ NAME Jane Smith โ”‚ margin-bottom: 0 โ”‚ STATUS [FAILED] โ”‚ border-bottom: none โ”‚ EMAIL jane@example.com โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ† border-radius: bottom only โ”‚ [Edit] [View Logs] [View Cycles] โ”‚ background: #f8fafc โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ border: 1px solid #e5e7eb โ”‚ SECTION HEADER SECTION HEADER โ”‚ border-top: none โ”‚ Label: Value Label: Value โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` **Mobile Filter Sidebar (Overlay):** ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ”‚ โ”‚ T โ”‚โ–‘โ–‘ FILTERS [Clear]โ–‘โ–‘โ”‚ โ”‚ O โ”‚โ–‘โ–‘ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ–‘โ–‘โ”‚ โ”‚ G โ”‚โ–‘โ–‘ ๐Ÿ” Search... โ–‘โ–‘โ”‚ โ”‚ G โ”‚โ–‘โ–‘ โ–ผ STATUS โ–‘โ–‘โ”‚ โ”‚ L โ”‚โ–‘โ–‘ โ˜‘ Active (89) โ–‘โ–‘โ”‚ โ”‚ E โ”‚โ–‘โ–‘ โ˜‘ Failed (12) โ–‘โ–‘โ”‚ โ”‚ โ”‚โ–‘โ–‘ โ˜ Paused (15) โ–‘โ–‘โ”‚ โ”‚ 48 โ”‚โ–‘โ–‘ ... โ–‘โ–‘โ”‚ โ”‚ px โ”‚โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ†‘ โ†‘ โ†‘ Toggle Sidebar (overlay) Backdrop (always position: absolute rgba(0,0,0,0.5) visible) left: 48px, width: auto click to close z-index: 1000 ``` **Key Mobile Features:** - Table headers hidden, replaced with inline labels per cell - Each row becomes a rounded card with shadow - Chevron + ID + Actions on first line - Actions button absolutely positioned (top-right) - Data fields stack vertically with label:value format - Expanded row visually connects to card (no gap, matching borders) - Filter sidebar overlays content with backdrop - Ultra-compact pagination (hide first/last buttons) - Font sizes: 0.75rem (12px) vs desktop 0.875rem (14px) **Reference Implementation**: `src/app/features/scheduled-orders/components/scheduled-orders-table/scheduled-orders-table.component.scss` ### Pattern 1B: Mobile Card Detailed Structure (Current Implementation) **This is the ACTUAL implementation pattern used in Scheduled Orders, Customers, and Quick Links tables:** ``` MOBILE CARD WITH STATUS BAR (Scheduled Orders Style) โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚โ–Œ MOBILE CARD โ”‚ โ”‚โ–Œ width: calc(100% - 0.25rem) โ”‚ โ”‚โ–Œ margin: 0.25rem 0 0.25rem 0.25rem โ”‚ โ”‚โ–Œ padding: 0.625rem, padding-left: 0.875rem โ”‚ โ”‚โ–Œ border: 1px solid #e5e7eb, border-radius: 0.5rem โ”‚ โ”‚โ–Œ โ”‚ โ”‚โ–Œ โ† 4px STATUS COLOR BAR (position: absolute, left: 0) โ”‚ โ”‚โ–Œ โ€ข Active: #22c55e โ†’ #16a34a (green gradient) โ”‚ โ”‚โ–Œ โ€ข Failed: #ef4444 โ†’ #dc2626 (red gradient) โ”‚ โ”‚โ–Œ โ€ข Paused: #f59e0b โ†’ #d97706 (yellow gradient) โ”‚ โ”‚โ–Œ โ€ข Processing: #3b82f6 โ†’ #2563eb (blue gradient) โ”‚ โ”‚โ–Œ โ€ข Queued: #06b6d4 โ†’ #0891b2 (cyan gradient) โ”‚ โ”‚โ–Œ โ€ข Deleted: #6b7280 โ†’ #4b5563 (gray gradient) โ”‚ โ”‚โ–Œ โ”‚ โ”‚โ–Œ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚โ–Œ โ”‚ HEADER (.mobile-card-header) โ”‚ โ”‚ โ”‚โ–Œ โ”‚ display: flex; gap: 0.25rem; margin-bottom: 0.5rem โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ”‚ โ”‚ โ”‚โ–Œ โ”‚ LEFT CENTER RIGHT โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ–ก #123 [ACTIVE] [๐Ÿ“‹] [๐Ÿ•] โ”‚ โ”‚ โ”‚โ–Œ โ”‚ checkbox ID + status tag quick icons โ”‚ โ”‚ โ”‚โ–Œ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚โ–Œ โ”‚ โ”‚โ–Œ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚โ–Œ โ”‚ BODY (.mobile-card-body) - clickable [pRowToggler]="item" โ”‚ โ”‚ โ”‚โ–Œ โ”‚ padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6 โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ”‚ โ”‚ โ”‚โ–Œ โ”‚ .mobile-card-customer-name (font-weight: 600, 0.9375rem) โ”‚ โ”‚ โ”‚โ–Œ โ”‚ John Doe โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ”‚ โ”‚ โ”‚โ–Œ โ”‚ .mobile-card-customer-email (0.8125rem, #6b7280) โ”‚ โ”‚ โ”‚โ–Œ โ”‚ john.doe@example.com โ”‚ โ”‚ โ”‚โ–Œ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚โ–Œ โ”‚ โ”‚โ–Œ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚โ–Œ โ”‚ FOOTER (.mobile-card-footer) - clickable [pRowToggler]="item" โ”‚ โ”‚ โ”‚โ–Œ โ”‚ padding-top: 0.5rem โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ”‚ โ”‚ โ”‚โ–Œ โ”‚ INFO ITEMS with vertical separators โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”โ”‚โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”โ”‚โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”โ”‚โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ”‚ EVERY โ”‚โ”‚ NEXT โ”‚โ”‚ ITEMS โ”‚โ”‚ VALUE โ”‚ โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ”‚ 30 Daysโ”‚โ”‚ Dec 15 โ”‚โ”‚ 3 โ”‚โ”‚ $45.99 โ”‚ โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜โ”‚โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜โ”‚โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜โ”‚โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ†‘ separator: 1px ร— 24px, #e5e7eb โ”‚ โ”‚ โ”‚โ–Œ โ”‚ โ”‚ โ”‚ โ”‚โ–Œ โ”‚ .mobile-card-info-label: 0.5625rem, #9ca3af, uppercase โ”‚ โ”‚ โ”‚โ–Œ โ”‚ .mobile-card-info-value: 0.75rem, #111827, font-weight: 600 โ”‚ โ”‚ โ”‚โ–Œ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚โ–Œ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` **Expanded State Connection:** ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚โ–Œ CARD (expanded=true) โ”‚ โ”‚โ–Œ border-radius: 0.5rem 0.5rem 0 0 (top corners only) โ”‚ โ”‚โ–Œ margin-bottom: 0 (no gap) โ”‚ โ”‚โ–Œ โ”‚ โ”‚โ–Œ [Header + Body + Footer as above] โ”‚ โ”‚โ–Œ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ EXPANDED ROW CONTENT โ”‚ โ”‚ border: 1px solid #e5e7eb, border-top: NONE (connects to card) โ”‚ โ”‚ border-radius: 0 0 0.5rem 0.5rem (bottom corners only) โ”‚ โ”‚ background: white, padding: 0.625rem โ”‚ โ”‚ margin-bottom: 1rem (spacing after) โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ QUICK ACTIONS (horizontal scroll container) โ”‚ โ”‚ โ”‚ โ”‚ background: #f8fafc, border: 1px solid #e5e7eb โ”‚ โ”‚ โ”‚ โ”‚ border-radius: 0.5rem, padding: 0.5rem โ”‚ โ”‚ โ”‚ โ”‚ overflow-x: auto, -webkit-overflow-scrolling: touch โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ [Process] [Skip] [Pause] [Edit] [History] [Cycles] โ†’โ†’โ†’ scroll โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ DETAIL SECTION โ”‚ โ”‚ โ”‚ โ”‚ .section-header: 0.625rem, uppercase, #374151, font-weight: 700 โ”‚ โ”‚ โ”‚ โ”‚ border-bottom: 1px solid #e5e7eb โ”‚ โ”‚ โ”‚ โ”‚ CUSTOMER INFORMATION โ”‚ โ”‚ โ”‚ โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ โ”‚ โ”‚ โ”‚ .detail-list: grid (auto 1fr) โ”‚ โ”‚ โ”‚ โ”‚ First Name: John (dt: 0.5625rem #6b7280, dd: 0.625rem #1f2937) โ”‚ โ”‚ โ”‚ โ”‚ Last Name: Doe โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` **Tag Sizing (Ultra-Compact):** ``` Desktop Tags: - font-size: 0.5625rem (9px) - padding: 0.125rem 0.375rem - font-weight: 600 - text-transform: uppercase - letter-spacing: 0.025em Mobile Card Header Tags: - font-size: 0.625rem (10px) - padding: 0.125rem 0.375rem - font-weight: 700 Status Tag Colors: โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Status โ”‚ Severity โ”‚ Background โ”‚ Text โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ Active โ”‚ success โ”‚ #dcfce7 โ”‚ #166534 โ”‚ โ”‚ Paused โ”‚ warn โ”‚ #fef3c7 โ”‚ #92400e โ”‚ โ”‚ Failed โ”‚ danger โ”‚ #fee2e2 โ”‚ #991b1b โ”‚ โ”‚ Processing โ”‚ info โ”‚ #dbeafe โ”‚ #1e40af โ”‚ โ”‚ Queued โ”‚ info โ”‚ #dbeafe โ”‚ #1e40af โ”‚ โ”‚ Deleted โ”‚ secondary โ”‚ #f3f4f6 โ”‚ #374151 โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` **Mobile Pagination (Ultra-Compact):** ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Showing 1-25 of 245 (order: -1, full width) โ”‚ โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”‚ โ”‚ [<] [1] [2] [3] [>] [25โ–ผ] (buttons: 1.5rem each) โ”‚ โ”‚ โ†‘ โ†‘ โ”‚ โ”‚ Hide first/last 10px font-size โ”‚ โ”‚ buttons on mobile โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` ### Pattern 2: Tabbed Settings Form (e.g., Customer Portal Settings) ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Sites > Dashboard > Customer Portal Settings โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ [General] [Content] [Styling] [Advanced] โ”‚ โ”‚ โ”โ”โ”โ”โ”โ”โ”โ” โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ ๐Ÿ“‹ General Settings โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ Customer Options Frequency Options โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ˜‘ Update Order Notes โ”‚ โ”‚ โ˜‘ Manage Frequencies โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ˜‘ Add/Remove Coupons โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ˜‘ Retry Failed Orders โ”‚ โ”‚ Type: [Dropdown โ–ผ] โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ˜ Cancel Subscriptions โ”‚ โ”‚ Value: 1, 2, 3 โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ [Add] โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โšซ 1 Days โšซ Monday โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ โ„น๏ธ Changes will be applied immediately โ”‚ โ”‚ โ”‚ โ”‚ [Restore Defaults] [Update] โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ Key Elements: โ€ข Tab navigation for logical grouping โ€ข Two-column layout for related settings โ€ข Sticky action bar at bottom โ€ข Visual feedback for changes ``` ### Pattern 3: Split-Pane Editor (e.g., Email Template Editor) ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Sites > Dashboard > Edit Template [Preview] [๐Ÿ’พ] โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ โ”‚ Edit Lock Notification โ”‚ LIVE PREVIEW โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ–ผ Basic Email Settings โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”โ”‚ โ”‚ Subject: [Order Locked ]โ”‚ โ”‚ Your order is locked! โ”‚โ”‚ โ”‚ From: [noreply@qpilot.cloud]โ”‚ โ”‚ โ”‚โ”‚ โ”‚ โ”‚ โ”‚ Hello John, โ”‚โ”‚ โ”‚ โ–ผ Email Content โ”‚ โ”‚ โ”‚โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ Your order #61572 will be โ”‚โ”‚ โ”‚ โ”‚

Hello โ”‚ โ”‚ โ”‚ processed on Apr 17, 2025 โ”‚โ”‚ โ”‚ โ”‚ {{CustomerFirstName}}, โ”‚ โ”‚ โ”‚ โ”‚โ”‚ โ”‚ โ”‚

โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ Order Summary โ”‚ โ”‚โ”‚ โ”‚ โ”‚

Your order โ”‚ โ”‚ โ”‚ โ”‚ โ€ข 2-Row Malt $30 โ”‚ โ”‚โ”‚ โ”‚ โ”‚ #{{OrderNumber}} โ”‚ โ”‚ โ”‚ โ”‚ โ€ข Shipping $10 โ”‚ โ”‚โ”‚ โ”‚ โ”‚ will be processed on โ”‚ โ”‚ โ”‚ โ”‚ โ€ข Tax TBD โ”‚ โ”‚โ”‚ โ”‚ โ”‚ {{NextDate}}

โ”‚ โ”‚ โ”‚ โ”‚ Total: $40 โ”‚ โ”‚โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚โ”‚ โ”‚ โ”‚ โ”‚ โ”‚โ”‚ โ”‚ โ–ผ Table Settings โ”‚ โ”‚ [Update Order] [Contact Us] โ”‚โ”‚ โ”‚ [Configure...] โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ Editor (50%) Preview (50%) Features: โ€ข Real-time preview updates โ€ข Collapsible settings sections โ€ข Variable insertion helpers โ€ข Responsive preview sizing ``` ### Pattern 4: Accordion Form with Sidebar Navigation (e.g., Edit Scheduled Order) **Reference Implementation**: `src/app/features/scheduled-orders/pages/edit/` ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ† Scheduled Order #143577 ACTIVE โ‹ฏ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โœ“ โ”‚ Payment Method โ”‚ Order Total Summary โ”‚ โ”‚ Sum. โ”‚ Select how this order will be charged โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ Order item subtotal โ”‚ โ”‚ โœ“ โ”‚ โ–ผ Select Payment Method REQUIREDโ”‚ $9.00 โ”‚ โ”‚ Cust โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Order coupon discount โ”‚ โ”‚ โ”‚ โ”‚ Currency * โ”‚ โ”‚ (Coupon: a) -$0.90 โ”‚ โ”‚ โœ“ โ”‚ โ”‚ USD - US Dollar โ–ผ โ”‚ โ”‚ โ”‚ โ”‚ Prod โ”‚ โ”‚ โ”‚ โ”‚ Order subtotal โ”‚ โ”‚ โ”‚ โ”‚ Select Payment Method * โ”‚ โ”‚ $8.10 โ”‚ โ”‚ โœ“ โ”‚ โ”‚ Stripe โ”‚ โ”‚ โ”‚ โ”‚ Sche โ”‚ โ”‚ Visa ending in 4242 (expires 02/...) โ–ผ โ”‚ โ”‚ SAT. DAL VEH - (TX) DAL โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ VEH.2D $13.99 โ”‚ โ”‚ โ–ผ โ”‚ โ”‚ โ”‚ โ”‚ Paym โ”‚ โ–ผ Load Methods from Gateway โ”‚ Shipping total โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ $13.99 โ”‚ โ”‚ 5 โ”‚ โ”‚ Gateway Customer Profile โ”‚ โ”‚ โ”‚ โ”‚ Ship โ”‚ โ”‚ Select gateway customer profile โ–ผ โ”‚ โ”‚ Tax total โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ - โ”‚ โ”‚ 6 โ”‚ โ”‚ โ”‚ โ”‚Coupoโ”‚ โ”‚ Order total โ”‚ โ”‚ โ”‚ โ”‚ $22.09 โ”‚ โ”‚ 7 โ”‚ โ”‚ โ”‚ โ”‚Valid โ”‚ โ”‚ โœ… Customer is saving โ”‚ โ”‚ โ”‚ โ”‚ $0.90 on this order! โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ† โ”‚ โ”‚ โ”‚ โ”‚ Back โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ ๐Ÿ’พ โ”‚ โ”‚ โ”‚ โ”‚ Save โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ (200px) Content Area (Flex) Summary (280px) Sidebar Elements: โœ“ = Completed section (green checkmark) โ–ผ = Active/expanded section (blue indicator) Numbers = Step order (non-interactive) Key Features: - Collapsible accordion sections (only one open at a time) - Non-linear navigation (jump to any section) - Real-time validation and total calculation - Sticky sidebar and summary on scroll - Persistent "Back" and "Save Changes" buttons at bottom ``` ### Pattern 5: Card Grid Layout (e.g., Email Templates List) ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Sites > Dashboard > Email Templates โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ [General Settings] [Upcoming Orders] [Lock Notifications] [+More] โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”โ”‚ โ”‚ โ”‚ ๐Ÿ“ง General โ”‚ โ”‚ ๐Ÿ“ฆ Upcoming Orders โ”‚ โ”‚ ๐Ÿ”’ Lock Notice โ”‚โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚โ”‚ โ”‚ โ”‚ Configure sender โ”‚ โ”‚ Notify customers โ”‚ โ”‚ Alert when order โ”‚โ”‚ โ”‚ โ”‚ address and style โ”‚ โ”‚ about upcoming โ”‚ โ”‚ is locked โ”‚โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ orders โ”‚ โ”‚ โ”‚โ”‚ โ”‚ โ”‚ [Edit Settings] โ”‚ โ”‚ [Edit Template] โ”‚ โ”‚ [Edit Template] โ”‚โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”โ”‚ โ”‚ โ”‚ โš ๏ธ Validation Err โ”‚ โ”‚ โœ… Status Updates โ”‚ โ”‚ โŒ Order Errors โ”‚โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚โ”‚ โ”‚ โ”‚ Alert on payment โ”‚ โ”‚ Subscription โ”‚ โ”‚ Failed order โ”‚โ”‚ โ”‚ โ”‚ validation issues โ”‚ โ”‚ status changes โ”‚ โ”‚ notifications โ”‚โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚โ”‚ โ”‚ โ”‚ [Edit Template] โ”‚ โ”‚ [Edit Template] โ”‚ โ”‚ [Edit Template] โ”‚โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”โ”‚ โ”‚ โ”‚ โ„น๏ธ Changes will be applied immediately [Update Settings] โ”‚โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` --- ## Component Catalog ### Navigation Components | Component | Purpose | Visual Example | |-----------|---------|----------------| | **Breadcrumb** | Shows location hierarchy | `Home > Sites > Dashboard > Orders` | | **Sidebar Menu** | Primary navigation | Collapsible accordion with icons | | **Tab Navigation** | Section switching | Horizontal tabs with active indicator | | **Stepper** | Multi-step process | Numbered circles with progress line | ### Data Display Components | Component | Purpose | Key Features | |-----------|---------|--------------| | **Data Table** | List large datasets | โ€ข Sortable columns
โ€ข Inline actions
โ€ข Sticky pagination
โ€ข Compact rows | | **Status Badge** | Show state | Color-coded tags (Active=Green, Failed=Red, Paused=Yellow) | | **Summary Card** | Key metrics | Icon + Label + Value format | | **Info Panel** | Detailed view | Collapsible sections with metadata | ### Form Components | Component | Usage | Behavior | |-----------|-------|----------| | **Text Input** | Single-line text | Border highlight on focus | | **Select Dropdown** | Choice from list | Searchable with icons | | **Checkbox Group** | Multiple selections | Indeterminate state support | | **Date Picker** | Date selection | Range selection, presets | | **Action Buttons** | Form submission | Primary (blue), Secondary (gray), Danger (red) | ### Feedback Components | Component | When to Use | Duration | |-----------|-------------|----------| | **Toast** | Success/Error messages | 3-5 seconds auto-dismiss | | **Loading Spinner** | Data fetching | Until complete | | **Skeleton Loader** | Initial load | Replaces with real content | | **Table Skeleton** | Table loading state | Use `TableSkeletonRowsComponent` | | **Confirmation Dialog** | Destructive actions | Modal with Yes/No | --- ## User Experience Principles ### 1. Progressive Disclosure Start with essential information, reveal complexity on demand: - Basic filters visible, advanced behind "More options" - Summary view by default, details on expansion - Core actions prominent, secondary in menus ### 2. Consistent Interaction Patterns Users should predict behavior: - All tables sort the same way (click header) - All forms save the same way (bottom-right button) - All modals close the same way (X or Escape) ### 3. Clear Visual Hierarchy Guide the eye naturally: - Page title โ†’ Primary action โ†’ Content โ†’ Secondary actions - Use size, color, and spacing to show importance - Group related items visually ### 4. Immediate Feedback Every action has a response: - Hover states on interactive elements - Loading states during processing - Success/error messages after actions - Form validation in real-time ### 5. Mobile-First Responsive Design for small screens, enhance for larger: - Stack columns on mobile - Collapse sidebars to toggles - Simplify tables (hide columns) - Touch-friendly tap targets (44px minimum) --- ## How to Request New Features ### Feature Request Template When requesting new features, provide a comprehensive specification following this template. This ensures developers have all necessary information to implement efficiently. --- ### 1. Executive Summary **Feature Name**: [Clear, descriptive name] **Version**: 1.0 **Date**: [Request date] **Priority**: Critical | High | Medium | Low **Estimated Scope**: Small (1-3 days) | Medium (1 week) | Large (2+ weeks) **Goal**: [One paragraph describing what this feature accomplishes] **Use Cases**: 1. [Primary use case with specific example] 2. [Secondary use case] 3. [Additional use cases if applicable] --- ### 2. User Interface Design (ASCII Mockup) #### List/Table View Example ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Sites > Dashboard > [Feature Name] [+ Create New]โ”‚ โ”œโ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚๐Ÿ”ฝโ”‚ FILTERS โ”‚ 126 Items Found โ”‚ โ”œโ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ ๐Ÿ” Search โ”‚ Col1 โ†• Col2 Col3 Col4 Actions โ”‚ โ”‚T โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚O โ”‚ Status โ”‚ #134 ACTIVE Value1 Apr 17 [ยทยทยท] โ”‚ โ”‚G โ”‚ โ˜‘ Active โ”‚ #135 PENDING Value2 Apr 18 [ยทยทยท] โ”‚ โ”‚G โ”‚ โ˜‘ Pending โ”‚ #136 FAILED Value3 Apr 19 [ยทยทยท] โ”‚ โ”‚L โ”‚ โ˜ Failed โ”‚ โ”‚ โ”‚E โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ Date Range โ”‚ โ”‚ โ”‚ โ”‚ [Apr 1-30] โ”‚ โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ + More โ”‚ [<] [1] 2 3 4 5 [>] Showing 1-20 of 126 โ”‚ โ””โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ Dimensions: - Toggle: 48px - Filters: 320px expanded - Actions dropdown content: Edit | Duplicate | Delete | Export ``` #### Form/Modal View Example ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Create [Feature Name] [X] โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ Section 1: Basic Information โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ Field Label * โ”‚ โ”‚ โ”‚ โ”‚ [_________________________________________________] โ”‚ โ”‚ โ”‚ โ”‚ Helper text explaining the field โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ Dropdown Field * โ”‚ โ”‚ โ”‚ โ”‚ [Select Option โ–ผ] โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ˜ Checkbox Option 1 โ”‚ โ”‚ โ”‚ โ”‚ โ˜‘ Checkbox Option 2 โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ Section 2: Advanced Settings โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ โ—‰ Radio Option 1 โ”‚ โ”‚ โ”‚ โ”‚ Description of what this option does โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ—‹ Radio Option 2 โ”‚ โ”‚ โ”‚ โ”‚ Description of what this option does โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ [Cancel] [Save & Continue] โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ States to show: - Loading: Skeleton loaders - Empty: "No items found" message - Error: Red banner with error message - Success: Green toast notification ``` --- ### 3. Data Model & API Specifications #### Data Model ```typescript // Request interfaces export interface CreateFeatureRequest { name: string; // Required, max 255 chars description?: string; // Optional, max 1000 chars status: 'active' | 'inactive' | 'pending'; metadata?: { [key: string]: any; }; settings: { option1: boolean; option2: number; // Range: 1-100 option3: string[]; // Max 10 items }; } // Response interfaces export interface FeatureResponse { id: number; siteId: string; name: string; description: string | null; status: 'active' | 'inactive' | 'pending'; createdAt: string; // ISO 8601 updatedAt: string; // ISO 8601 metadata: Record; settings: FeatureSettings; _links: { self: string; update: string; delete: string; }; } export interface FeatureListResponse { data: FeatureResponse[]; pagination: { currentPage: number; totalPages: number; totalItems: number; pageSize: number; }; } ``` #### API Endpoints **Base URL**: `https://api.qpilot.com/api/v1` ##### 1. List Features ```http GET /Sites/{siteId}/Features Query Parameters: - page (number, default: 1): Page number - pageSize (number, default: 25): Items per page - status (string): Filter by status - search (string): Search term - sortBy (string): Field to sort by - sortOrder ('asc' | 'desc'): Sort direction Response 200 OK: { "data": [ { "id": 123, "siteId": "shop-123", "name": "Feature Name", "description": "Feature description", "status": "active", "createdAt": "2025-01-19T10:00:00Z", "updatedAt": "2025-01-19T10:00:00Z", "metadata": { "customField": "value" }, "settings": { "option1": true, "option2": 50, "option3": ["value1", "value2"] }, "_links": { "self": "/api/v1/Sites/shop-123/Features/123", "update": "/api/v1/Sites/shop-123/Features/123", "delete": "/api/v1/Sites/shop-123/Features/123" } } ], "pagination": { "currentPage": 1, "totalPages": 5, "totalItems": 123, "pageSize": 25 } } Error Response 400: { "error": "INVALID_PARAMETERS", "message": "Invalid query parameters", "details": { "pageSize": "Must be between 1 and 100" } } ``` ##### 2. Create Feature ```http POST /Sites/{siteId}/Features Request Headers: Content-Type: application/json Authorization: Bearer {token} Request Body: { "name": "New Feature", "description": "Description of the feature", "status": "active", "metadata": { "source": "manual", "priority": "high" }, "settings": { "option1": true, "option2": 75, "option3": ["email", "sms"] } } Response 201 Created: { "id": 124, "siteId": "shop-123", "name": "New Feature", "description": "Description of the feature", "status": "active", "createdAt": "2025-01-19T10:30:00Z", "updatedAt": "2025-01-19T10:30:00Z", "metadata": { "source": "manual", "priority": "high" }, "settings": { "option1": true, "option2": 75, "option3": ["email", "sms"] }, "_links": { "self": "/api/v1/Sites/shop-123/Features/124", "update": "/api/v1/Sites/shop-123/Features/124", "delete": "/api/v1/Sites/shop-123/Features/124" } } Validation Errors 422: { "error": "VALIDATION_FAILED", "message": "Request validation failed", "details": { "name": ["Name is required", "Name must be unique"], "settings.option2": ["Value must be between 1 and 100"] } } ``` ##### 3. Update Feature ```http PUT /Sites/{siteId}/Features/{id} Request Body: (same structure as POST) Response 200 OK: (returns updated object) ``` ##### 4. Delete Feature ```http DELETE /Sites/{siteId}/Features/{id} Response 204 No Content Error 409 Conflict: { "error": "CANNOT_DELETE", "message": "Feature has active dependencies", "details": { "dependencies": ["Order #1234", "Customer #5678"] } } ``` --- # Part II: Developer Implementation Guide ## Technical Architecture ### Technology Stack - **Framework**: Angular 19 (Standalone Components) - **UI Library**: PrimeNG with QPilotBrandBridgePreset - **Styling**: SCSS + Tailwind CSS utility classes - **State**: Service-based with RxJS Observables - **Forms**: Strongly-typed Reactive Forms ### File Structure ``` src/app/ โ”œโ”€โ”€ core/ # Shared services, models โ”œโ”€โ”€ features/ # Feature modules โ”‚ โ”œโ”€โ”€ scheduled-orders/ โ”‚ โ”‚ โ”œโ”€โ”€ components/ โ”‚ โ”‚ โ”œโ”€โ”€ pages/ โ”‚ โ”‚ โ”œโ”€โ”€ services/ โ”‚ โ”‚ โ””โ”€โ”€ interfaces/ โ”‚ โ””โ”€โ”€ settings/ โ”œโ”€โ”€ shared/ # Reusable components โ””โ”€โ”€ my-theme.ts # PrimeNG theme config ``` --- ## Layout Implementation Patterns ### Pattern: Fixed Height Container with Internal Scroll **CRITICAL**: This is the foundation of all QMC layouts. NO page-level scrolling allowed. #### HTML Structure ```html

{{ title }}

``` #### SCSS Implementation ```scss // CRITICAL: Every component needs this base pattern :host { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; min-height: 0; // CRITICAL for flexbox } .page-container { display: flex; flex-direction: column; height: calc(100vh - 200px); // Account for app header/footer max-height: calc(100vh - 200px); min-height: 0; // CRITICAL overflow: hidden; } .page-header { flex-shrink: 0; // Never shrink padding: 1rem; background: var(--surface-section); border-bottom: 1px solid var(--surface-border); display: flex; justify-content: space-between; align-items: center; } .content-section { flex: 1; // Take remaining space overflow-y: auto; overflow-x: hidden; min-height: 0; // CRITICAL for flex children padding: 1rem; } .actions-footer { flex-shrink: 0; padding: 1rem; background: white; border-top: 1px solid var(--surface-border); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); display: flex; justify-content: flex-end; gap: 0.75rem; // Keep visible with sticky position: sticky; bottom: 0; z-index: 10; } ``` ### Pattern: Sidebar Filter with Table **Reference**: `src/app/features/scheduled-orders/pages/scheduled-orders-list/` **โš ๏ธ MANDATORY: Auto-Collapse/Expand Based on Screen Size** All sidebar filter components MUST implement responsive sidebar behavior: - **Mobile (โ‰ค768px)**: Auto-collapse sidebar - **Desktop (>768px)**: Auto-expand sidebar See `CLAUDE_PATTERNS.md` for the complete implementation pattern. ```typescript // Component must implement: private initializeResponsiveSidebar(): void { const isMobile = window.innerWidth <= 768; this.sidebarCollapsed.set(isMobile); } private setupWindowResizeListener(): void { const resizeHandler = () => { const isMobile = window.innerWidth <= 768; if (isMobile && !this.userManuallyCollapsed) { this.sidebarCollapsed.set(true); } else if (!isMobile && !this.userManuallyCollapsed) { this.sidebarCollapsed.set(false); } this.cdr.markForCheck(); }; // ... listener setup ... } ``` #### HTML Structure ```html

Filters

{{ totalRecords }} Records
``` #### SCSS for Sidebar Layout ```scss .main-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; position: relative; } .sidebar-toggle-area { width: 48px; flex-shrink: 0; background: var(--surface-section); padding: 0.5rem 0; border-right: 1px solid rgba(226, 232, 240, 0.4); display: flex; flex-direction: column; align-items: center; } .filter-sidebar { width: 320px; background: var(--surface-section); display: flex; flex-direction: column; height: 100%; flex-shrink: 0; overflow: hidden; border-right: 1px solid rgba(226, 232, 240, 0.7); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); &.collapsed { width: 0; opacity: 0; border-right: none; } // MOBILE: Use width: auto to prevent overflow on small screens @media (max-width: 768px) { position: absolute; top: 0; left: 48px; bottom: 0; z-index: 1000; width: auto; // CRITICAL: Use auto, not fixed width right: 0; // Fills remaining space box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: left 0.3s ease; // Sync with backdrop animation &.collapsed { left: -100%; width: auto; opacity: 1; // Keep visible during slide } } .filters-header-main { flex-shrink: 0; padding: 1rem; background: white; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; } .filters-content-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; // Custom scrollbar &::-webkit-scrollbar { width: 4px; } &::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; &:hover { background: #9ca3af; } } } } .content-area { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .content-toolbar { flex-shrink: 0; padding: 0.75rem 1rem; background: var(--surface-section); border-bottom: 1px solid var(--surface-border); display: flex; justify-content: space-between; align-items: center; } .table-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; } ``` ### Pattern: Ultra-Compact Table Styling **MANDATORY**: Copy this exact pattern for ALL tables ```scss // ULTRA AGGRESSIVE FONT SIZE OVERRIDE - Must be at root level :host ::ng-deep { .p-datatable-thead > tr > th { font-size: 0.875rem !important; // 14px padding: 0.25rem 0.3rem !important; font-weight: 600 !important; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; background: #ffffff; border-bottom: 1px solid #e5e7eb; &:first-child { padding-left: 0.4rem; } &:last-child { padding-right: 0.4rem; } } .p-datatable-tbody > tr > td { font-size: 0.875rem !important; // 14px padding: 0.2rem 0.3rem !important; vertical-align: middle; line-height: 1.1; border-bottom: 1px solid #f3f4f6; * { font-size: 0.875rem !important; // ALL children } &:first-child { padding-left: 0.4rem; } &:last-child { padding-right: 0.4rem; } } // Mobile responsiveness @media (max-width: 768px) { .p-datatable-thead > tr > th, .p-datatable-tbody > tr > td, .p-datatable-tbody > tr > td * { font-size: 0.75rem !important; // 12px } } // Row interactions .p-datatable-tbody > tr { transition: background-color 0.15s ease; &:hover { background-color: #f9fafb; } &:last-child > td { border-bottom: none; } } // Override PrimeNG constraints .p-datatable-table-container, .p-datatable-scrollable-table-wrapper { max-height: none !important; height: 100% !important; } // Sticky pagination .p-paginator { flex-shrink: 0; position: sticky; bottom: 0; background: white; border-top: 1px solid var(--surface-border); z-index: 9; } } ``` ### Pattern: Mobile Card Layout Implementation **CRITICAL**: Tables must transform to cards on mobile (<768px). Use `responsiveLayout="stack"` and `breakpoint="768px"`. #### p-table Configuration ```html breakpoint="768px" dataKey="Id" [rowExpandMode]="'single'" [expandedRowKeys]="expandedRows" (onRowExpand)="onRowExpand($event)" (onRowCollapse)="onRowCollapse($event)" > ``` #### Mobile Card SCSS Pattern ```scss // MOBILE CARD LAYOUT - Copy this pattern @media (max-width: 768px) { :host ::ng-deep { // Hide table header on mobile .p-datatable-thead { display: none !important; } // Prevent horizontal overflow .p-datatable-wrapper, .p-datatable-scrollable-wrapper, .p-datatable-scrollable-body { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .p-datatable-table { width: 100% !important; max-width: 100% !important; } // Transform rows to cards .p-datatable-tbody > tr { display: block !important; width: 100% !important; > td { display: block !important; padding: 0 !important; border: none !important; } } // Ultra-compact mobile pagination // CRITICAL: Use flex-start to align pagination left, avoiding overlap with chat widgets .p-paginator { padding: 0.25rem 0.5rem !important; gap: 0.125rem !important; flex-wrap: wrap !important; justify-content: flex-start !important; // REQUIRED: Prevents conflict with floating chat buttons font-size: 0.6875rem !important; .p-paginator-current { font-size: 0.625rem !important; order: -1; width: 100%; margin-bottom: 0.25rem !important; color: #6b7280; } .p-paginator-first, .p-paginator-last { display: none !important; } .p-paginator-prev, .p-paginator-next, .p-paginator-page { min-width: 1.5rem !important; width: 1.5rem !important; height: 1.5rem !important; font-size: 0.625rem !important; } .p-select { height: 1.5rem !important; font-size: 0.625rem !important; min-width: 3rem !important; } } } } // Mobile card styling .mobile-card { position: relative; width: calc(100% - 0.25rem); max-width: calc(100% - 0.25rem); margin: 0.25rem 0 0.25rem 0.25rem; padding: 0.625rem; padding-left: 0.875rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-sizing: border-box; overflow: hidden; // Status color bar &::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0.5rem 0 0 0.5rem; } // Status gradients &.status-active::before { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); } &.status-failed::before { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); } &.status-paused::before { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); } &.status-processing::before { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); } &.status-queued::before { background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%); } &.status-deleted::before { background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%); } // Expanded state - connect to expanded row &.expanded { border-radius: 0.5rem 0.5rem 0 0; margin-bottom: 0; &::before { border-radius: 0.5rem 0 0 0; } } } // Mobile card sections .mobile-card-header { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem; .mobile-card-header-left { display: flex; align-items: center; gap: 0.25rem; } .mobile-card-header-center { display: flex; align-items: center; gap: 0.375rem; flex: 1; } .mobile-card-header-right { display: flex; align-items: center; gap: 0.125rem; } } .mobile-card-body { padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; cursor: pointer; .mobile-card-customer-name { font-weight: 600; font-size: 0.9375rem; color: #111827; margin-bottom: 0.125rem; } .mobile-card-customer-email { font-size: 0.8125rem; color: #6b7280; } } .mobile-card-footer { padding-top: 0.5rem; cursor: pointer; .mobile-card-info-inline { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: stretch; } .mobile-card-info-item { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; } .mobile-card-separator { width: 1px; height: 24px; background-color: #e5e7eb; flex-shrink: 0; align-self: center; } .mobile-card-info-label { font-size: 0.5625rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.025em; } .mobile-card-info-value { font-size: 0.75rem; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } // Expanded row content (mobile) .expanded-row-content { display: grid; grid-template-columns: 1fr; gap: 0.5rem; padding: 0.625rem; background: white; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 0.5rem 0.5rem; margin-bottom: 1rem; // Quick actions scroll container .quick-actions-section { display: flex; gap: 0.375rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin-bottom: 0.5rem; &::-webkit-scrollbar { height: 4px; } } .detail-section { .section-header { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #374151; margin-bottom: 0.25rem; padding-bottom: 0.25rem; border-bottom: 1px solid #e5e7eb; } .detail-list { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.375rem; dt { font-size: 0.5625rem; font-weight: 600; color: #6b7280; &::after { content: ":"; } } dd { font-size: 0.625rem; font-weight: 500; color: #1f2937; margin: 0; } } } } ``` --- ## Component Development Guide ### Creating a New List Page ```typescript // scheduled-orders-list.component.ts @Component({ selector: 'app-scheduled-orders-list', standalone: true, imports: [ CommonModule, TableModule, ButtonModule, ScheduledOrdersFiltersComponent, ScheduledOrdersTableComponent ], templateUrl: './scheduled-orders-list.component.html', styleUrls: ['./scheduled-orders-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class ScheduledOrdersListComponent implements OnInit { // Signals for reactive state sidebarCollapsed = signal(false); data = signal(null); loading = signal(true); // Form for filters filterForm: FormGroup; constructor( private formBuilder: FormBuilder, private apiService: ApiService ) { this.filterForm = this.createFilterForm(); } ngOnInit(): void { this.setupFilterSubscription(); this.loadData(); } private createFilterForm(): FormGroup { return this.formBuilder.nonNullable.group({ search: [null as string | null], status: [[] as string[]], dateRange: [null as DateRange | null] }); } private setupFilterSubscription(): void { this.filterForm.valueChanges .pipe( debounceTime(300), distinctUntilChanged() ) .subscribe(() => this.loadData()); } toggleSidebar(): void { this.sidebarCollapsed.update(v => !v); } hasActiveFilters(): boolean { const values = this.filterForm.value; return !!( values.search?.trim() || (values.status && values.status.length > 0) || values.dateRange ); } clearFilters(): void { this.filterForm.reset(); } } ``` ### Creating a Settings Form ```typescript // customer-portal-settings.component.ts interface CustomerPortalForm { general: FormGroup; content: FormGroup; styling: FormGroup; } @Component({ selector: 'app-customer-portal-settings', standalone: true, imports: [ CommonModule, ReactiveFormsModule, TabsModule, GeneralSettingsComponent, ContentManagementComponent, StylingSettingsComponent ], template: `
General Settings Content Management Styling Settings
Changes will be applied immediately
` }) export class CustomerPortalSettingsComponent { formGroup: FormGroup; activeTab = signal(0); private originalData?: CustomerPortalData; ngOnInit(): void { this.initializeForm(); this.loadData(); } private initializeForm(): void { this.formGroup = this.formBuilder.nonNullable.group({ general: this.createGeneralForm(), content: this.createContentForm(), styling: this.createStylingForm() }); } isFormDirty(): boolean { // Compare with original data return JSON.stringify(this.formGroup.value) !== JSON.stringify(this.originalData); } } ``` --- ## Theme & Styling System ### QPilot Brand Colors ```typescript // my-theme.ts export const QPilotBrandBridgePreset = definePreset(Aura, { primitive: { // Primary - QPilot Blue blue: { 50: '#eff6ff', 100: '#dbeafe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', // Base 600: '#2563eb', // Primary actions 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a' }, // Secondary - Autoship Purple violet: { 50: '#f5f3ff', 100: '#ede9fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', // Base 600: '#7c3aed', // Secondary actions 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95' }, // Status Colors green: { 600: '#059669' }, // Success amber: { 600: '#d97706' }, // Warning red: { 600: '#dc2626' }, // Danger sky: { 600: '#0284c7' } // Info } }); ``` ### Component-Specific Styling ```scss // Use CSS custom properties for theming .status-badge { &.active { background: var(--green-600); color: white; } &.paused { background: var(--amber-600); color: white; } &.failed { background: var(--red-600); color: white; } } // Utility classes (Tailwind-inspired) .flex { display: flex; } .flex-1 { flex: 1; } .flex-column { flex-direction: column; } .gap-2 { gap: 0.5rem; } .p-3 { padding: 0.75rem; } .mb-3 { margin-bottom: 0.75rem; } ``` --- ## Best Practices & Code Examples ### 1. NEVER Use Page-Level Scrolling ```scss // โŒ WRONG - Allows page scroll .container { height: auto; // NO! overflow: visible; // NO! } // โœ… CORRECT - Fixed height with internal scroll .container { height: calc(100vh - 200px); overflow: hidden; display: flex; flex-direction: column; .content { flex: 1; overflow-y: auto; min-height: 0; // CRITICAL } } ``` ### 2. ALWAYS Use Strongly-Typed Forms ```typescript // โŒ WRONG - No type safety formGroup: FormGroup; // NO! // โœ… CORRECT - Full type safety interface MyForm { email: FormControl; status: FormControl<'active' | 'inactive'>; items: FormArray>; } formGroup: FormGroup; ``` ### 3. Use Signals for UI State ```typescript // โœ… Modern Angular 19 pattern export class MyComponent { // UI state with signals isLoading = signal(false); sidebarOpen = signal(true); selectedItem = signal(null); // Computed values hasSelection = computed(() => this.selectedItem() !== null); // Update state toggleSidebar(): void { this.sidebarOpen.update(open => !open); } } ``` ### 4. ALWAYS Use Modern Control Flow Syntax **๐Ÿšซ NEVER use `*ngIf`, `*ngFor`, `*ngSwitch` - These are DEPRECATED** **โœ… ALWAYS use `@if`, `@for`, `@switch` - Up to 90% faster rendering** ```html
{{ user.name }}
{{ item.name }}
Active
@if (user) {
{{ user.name }}
} @for (item of items; track item.id) {
{{ item.name }}
} @empty {
No items found
} @switch (status) { @case ('active') { Active } @default { Unknown } } ``` **Critical Rules:** - `track` is **MANDATORY** in `@for` blocks - Use `track item.id` for items with unique IDs - Use `track $index` only for static/immutable lists - Use `@empty` block for empty state handling - No imports needed - works without CommonModule **Contextual Variables in @for:** ```html @for (item of items; track item.id; let idx = $index, let isLast = $last) {
{{ idx + 1 }}. {{ item.name }}
} ``` | Variable | Purpose | |----------|---------| | `$index` | Current index (0-based) | | `$count` | Total items | | `$first` | `true` if first | | `$last` | `true` if last | | `$even` | `true` if even index | | `$odd` | `true` if odd index | ### 5. Implement Responsive Breakpoints ```scss // Mobile-first approach .component { // Mobile (default) font-size: 0.75rem; padding: 0.5rem; // Tablet @media (min-width: 768px) { font-size: 0.875rem; padding: 0.75rem; } // Desktop @media (min-width: 1200px) { font-size: 1rem; padding: 1rem; } } ``` ### 6. Table Skeleton Loading States (MANDATORY) **ALL tables MUST use the shared `TableSkeletonRowsComponent` for consistent loading states.** ```typescript // 1. Import in table component import { TableSkeletonRowsComponent, SkeletonColumnConfig, SKELETON_PRESETS } from "../../../../shared/components/table-skeleton"; // 2. Add to component imports array @Component({ imports: [TableSkeletonRowsComponent, TableModule, ...], }) export class MyTableComponent { // 3. Define skeleton columns (use preset or custom) readonly skeletonColumns: SkeletonColumnConfig[] = SKELETON_PRESETS.products; } ``` ```html ``` **Available Presets:** - `SKELETON_PRESETS.customers` - Customers table (10 columns) - `SKELETON_PRESETS.products` - Products table (15 columns) - `SKELETON_PRESETS.scheduledOrders` - Scheduled orders table (14 columns) **Custom Configuration:** ```typescript // Create array matching your table columns readonly skeletonColumns: SkeletonColumnConfig[] = [ { width: "1.5rem", height: "1.5rem", shape: "circle", align: "center" }, // Checkbox { width: "3rem", height: "1rem" }, // ID { width: "120px", height: "1rem" }, // Name { width: "60px", height: "1.5rem" }, // Status tag { width: "80px", height: "1rem", align: "right" }, // Amount ]; ``` **SkeletonColumnConfig Interface:** | Property | Type | Default | Description | |----------|------|---------|-------------| | `width` | string | required | Width of skeleton bar | | `height` | string | "1rem" | Height of skeleton bar | | `shape` | "rectangle" \| "circle" | "rectangle" | Shape of skeleton | | `align` | "left" \| "center" \| "right" | "left" | Text alignment | ### 7. Handle Loading States ```typescript // Component loading = signal(true); error = signal(null); loadData(): void { this.loading.set(true); this.error.set(null); this.apiService.getData() .pipe( finalize(() => this.loading.set(false)) ) .subscribe({ next: (data) => this.processData(data), error: (err) => this.error.set(err) }); } ``` ```html
@if (loading()) {
} @else if (error()) {

{{ error()!.message }}

} @else {
}
``` --- **Document Version**: 2.2 **Last Updated**: 2025-12-10 **Maintained By**: Development Team For questions or suggestions, contact the development team or refer to the living examples in the codebase.