User Management Dashboard - Structure Prompt OVERVIEW Create a professional user management dashboard with role-based filtering, dual view modes, advanced search capabilities, and comprehensive user statistics with delivery performance metrics. 1. LAYOUT STRUCTURE Container System Main container: Full viewport width with appropriate padding Content wrapper: Maximum width container, centered Section spacing: Consistent vertical spacing between major sections Grid System (5 Cards Per Row - Responsive) Extra Large Screens: 5 cards per row Large Screens: 4 cards per row Medium Screens: 3 cards per row Small Screens: 2 cards per row Extra Small Screens: 1 card per row (full width) Equal spacing between cards (gap) Cards maintain aspect ratio and don't get distorted Use CSS Grid or Flexbox with wrap for automatic responsiveness 2. TOP STATISTICS SECTION Statistics Cards Grid Display 4 metric cards in responsive grid: Equal height cards with consistent spacing Cards have subtle elevation/shadow Rounded corners Individual Stat Card Structure (Top to Bottom) Icon Section Icon representing user type (Users/Clients/Delivery/Admin) Large size, positioned top-center or top-left Label Section Text: "Total Users" | "Total Clients" | "Total Livreurs" | "Total Admins" Medium weight font, secondary text color Count Section Large numeric display Bold/semi-bold font Largest text on card Card Styling Subtle background Border radius (rounded corners) Appropriate padding Subtle shadow/elevation Hover effect: Slight lift or glow (NO scale transform) 3. FILTER & CONTROL SECTION Layout: Horizontal Row with Two Sections Left Side: Role Filter Tabs Display 4 tabs horizontally: "Tous" (All) - default active "Clients" "Livreurs" "Admins" Tab Button Structure: Pill/chip button style Active tab: Distinct background and text color Inactive tabs: Subtle background, lighter text Equal padding on all sides Gap between tabs Medium weight font Responsive Behavior: Desktop/Tablet: Horizontal row Mobile: Horizontal scroll or wrap to multiple rows Right Side: Control Buttons Two icon-only buttons: Theme Toggle (Light/Dark mode) Sun icon (light mode) / Moon icon (dark mode) View Toggle (Card/List view) Grid icon (card view) / List icon (list view) Button Structure: Icon-only (no text) Square or circular shape Same size for both buttons Border or subtle background Hover: Background color change (NO scale transform) Gap between buttons 4. ADVANCED FILTERS SECTION Filter Bar Layout (Horizontal, 4 Elements) From left to right: Region Dropdown Placeholder: "Select Region" Search-enabled select Dropdown icon on right Rounded corners Ville Dropdown Placeholder: "Select Ville" Disabled state until Region selected Dynamically populated based on Region selection Dropdown icon on right Rounded corners Search Input Placeholder: "Search by name, CIN, email, phone..." Search icon: Inside input on left side Clear icon: Inside input on right side (appears when typing) Takes remaining available space (flex-grow) Rounded corners Clear Filters Button Text: "Clear" or icon (× or reset icon) Only visible when any filter is active Compact button style Rounded corners Responsive Behavior: Extra Large/Large: All 4 elements in one row Medium: Wrap to 2 rows (dropdowns row 1, search + clear row 2) Small/Extra Small: Stack vertically (each element full width) 5. USER CARD DESIGN (CARD VIEW MODE) Grid Layout for Cards 5 cards per row on extra large screens Automatically responsive (reduces to 4, 3, 2, 1 based on screen size) Equal spacing between cards (gap) Cards don't stretch or compress awkwardly All cards in a row have equal height Card Structure (Top to Bottom) ┌─────────────────────────────────────┐ │ [Region Badge] [Top R] │ <- Position: Absolute top-right │ │ │ [Avatar Circle] │ <- Center │ [Green Pulse Dot] │ <- Bottom-right of avatar │ │ │ [User Name] │ <- Center, Bold │ │ │ [Role Badge] │ <- Center, Pill shape │ │ │ ───────────────────────────────── │ <- Divider line │ │ │ C.I.N Ville │ │ [CIN Number] [Ville Name] │ │ │ │ Adresse Date de création│ │ [Address Text] [DD/MM/YYYY] │ │ │ │ Tele │ │ [Phone Number] │ │ │ │ ───────────────────────────────── │ <- Divider line │ │ │ [Icon] Taux: 90% [Icon] Colis: 450│ <- Flex row │ │ │ ───────────────────────────────── │ <- Divider line │ │ │ Progression 405/450 │ │ [████████████░░░░] │ <- Progress bar │ │ │ ───────────────────────────────── │ <- Divider line │ │ │ [Voir Profil Button] │ <- Center │ │ └─────────────────────────────────────┘ Card Components Detail (Top to Bottom): 1. REGION BADGE (Position: Absolute Top-Right) Content: Region name (MAXIMUM 3 CHARACTERS ONLY) Examples: "CAS", "RAB", "FES", "TAN", "MAR" If region name is longer, use abbreviation Position: Absolute positioning, top-right corner of card Small chip/badge style Bold, uppercase font Small padding Small border radius Distance from top and right edges of card 2. AVATAR SECTION (Top Center) Avatar Circle: Circular shape Large size Centered horizontally Can contain user image or initials Optional subtle border Optional subtle shadow Online Status Indicator: Small circular dot Position: Bottom-right corner of avatar (overlapping slightly) Green color Pulsing animation (smooth opacity change) White border around dot (to separate from avatar) 3. USER NAME (Below Avatar) User's full name Bold or semi-bold font Larger font size Centered horizontally Spacing above and below 4. ROLE BADGE (Below Name) Content: "Client" | "Livreur" | "Admin" Small pill/chip badge style Medium weight font Small padding (horizontal and vertical) Full pill border radius Centered horizontally Color-coded by role: Client: One color scheme Livreur: Different color scheme Admin: Different color scheme 5. HORIZONTAL DIVIDER LINE Thin line Full width of card content area Subtle color Vertical spacing above and below 6. INFORMATION GRID (2 Columns Layout) Layout: Grid with 2 columns, multiple rows Row 1: C.I.N (left) | Ville (right) C.I.N Ville [CIN Value] [Ville Name] Row 2: Adresse (left) | Date de création (right) Adresse Date de création [Address Text] [DD/MM/YYYY] Row 3: Tele (full width, spans 2 columns) Tele [Phone Number] Styling for Each Field: Label text: Smaller font Medium weight Secondary/muted text color Small spacing below label Value text: Regular font size Regular weight Primary text color Text wraps if too long Small spacing below before next field Grid Properties: Gap between columns Gap between rows Proper alignment IMPORTANT: Each field (C.I.N, Ville, Adresse, Date, Tele) is separate Labels and values are NOT enclosed together in individual boxes/frames Clean grid layout without individual field containers No Business/Commerce section 7. HORIZONTAL DIVIDER LINE Same styling as previous divider 8. STATISTICS ROW (Single Horizontal Line) Layout: Flex row with 2 items side by side [Icon] Taux: 90% [Icon] Colis: 450 Structure: Display as flex row Two statistics displayed horizontally Space between or equal spacing Gap between the two stats Each Statistic Item: Icon (left) + Label + Value Icon: Medium size Label: "Taux:" or "Colis:", medium weight Value: Bold, slightly larger font Vertical alignment: center Horizontal layout: icon, label, value in sequence 9. HORIZONTAL DIVIDER LINE Same styling as previous divider 10. PROGRESS SECTION Header Row (Flex row with space-between): Progression 405/450 Label "Progression" on left Count "X/Y" on right Medium weight font Small spacing below Progress Bar: Full width of card content area Rectangular bar with rounded ends Small height Background: Light/muted color Fill color: Color-coded based on percentage: High percentage (>80%): Success/green color Medium percentage (50-80%): Warning/orange color Low percentage (<50%): Danger/red color Filled width: (colis_livres / total_colis) × 100% Smooth fill animation on initial load Border radius on ends 11. HORIZONTAL DIVIDER LINE Same styling as previous divider 12. ACTION BUTTON (Bottom Center) "Voir Profil" Button: Text: "Voir Profil" Optional icon: Eye icon or arrow (positioned right of text) Primary button style (solid background) Medium weight font Appropriate padding (horizontal and vertical) Border radius Centered horizontally Can be full width with margins or fixed width centered Hover effect: Background color darkens (NO scale transform) Active/pressed effect: Even darker Cursor: pointer Action: Navigate to client profile page 6. CARD STYLING & BEHAVIOR Card Container Background color (solid) Optional subtle border Border radius (rounded corners) Padding on all sides (consistent) Subtle shadow for elevation Smooth transition for all properties Card Hover Effects Background: Slightly different shade Shadow: More pronounced elevation Border: Optional color change or emphasis IMPORTANT: NO scale transform, NO zoom effect Transition: Smooth, moderate duration Cursor: pointer (if clickable) Internal Spacing Consistent padding inside card Consistent gap between sections Divider line margins (vertical spacing) Proper spacing around all elements 7. LIST VIEW MODE (TABLE) Table Structure Columns from left to right: Avatar User Info Role Location Statistics Progress Actions Column Details: 1. Avatar Column Small circular avatar Online status indicator (green pulse dot) Center aligned in cell 2. User Info Column Two lines: Line 1: User name (bold) Line 2: Email (smaller, muted color) Vertical stack with small gap 3. Role Column Role badge (same as card view) Center aligned 4. Location Column Two lines: Line 1: Region badge (3 letters, small chip) Line 2: Ville name (regular text) Vertical stack with small gap