# User Management Dashboard - Structure Prompt Create a comprehensive user management dashboard with the following structure and features: ## 1. TOP HEADER SECTION ### Statistics Cards Row - Display 4 statistical cards in a responsive grid (4 columns on desktop, 2 on tablet, 1 on mobile) - Each card should contain: * An icon representing the user type * A label (Total Users, Total Clients, Total Livreurs, Total Admins) * A large number showing the count * A subtle background with rounded corners ## 2. CONTROL BAR SECTION ### Left Side Controls - **Role Filter Tabs**: 4 buttons in a horizontal row * "Tous" (All) - default active * "Clients" * "Livreurs" * "Admins" * Active tab should have distinct styling * Responsive: Stack vertically on mobile ### Right Side Controls - **Theme Toggle Button**: Icon-based button to switch between light and dark mode - **View Toggle Button**: Icon-based button to switch between List and Card view ## 3. FILTER SECTION ### Filter Controls (Horizontal Layout) - **Region Dropdown**: Select with search capability * Placeholder: "Select Region" * Should filter Ville dropdown based on selection - **Ville Dropdown**: Select with search capability * Placeholder: "Select Ville" * Disabled until Region is selected * Shows only villes from selected region - **Search Input**: Text input with search icon * Placeholder: "Search by name, CIN, email, phone..." * Search icon on the left * Clear icon appears on the right when typing - **Clear Filters Button**: Button with icon * Only visible when any filter is active * Icon: Clear/Reset icon * Resets all filters to default state ### Filter Layout Behavior - Desktop: All filters in one row - Tablet: 2 filters per row - Mobile: Stack vertically (1 filter per row) ## 4. USER DISPLAY SECTION ### CARD VIEW MODE #### Grid Layout - Desktop: 3 cards per row - Tablet: 2 cards per row - Mobile: 1 card per row - Consistent spacing between cards - Equal height cards in each row #### Card Structure (Top to Bottom) 1. **Card Header** - User avatar/logo (circular, centered) - User role badge (small chip showing: Client/Livreur/Admin) 2. **Card Body** - **User Name**: Large, bold text - **Location Info** (with icons): * Region name with location icon * Ville name with location icon - **Contact Info**: * Address with icon * Phone with icon (if available) 3. **Business Section** (if applicable) - Business name with icon - Business activity/type 4. **Statistics Section** - **Taux Livraison**: * Label: "Taux de Livraison" * Value: "XX.XX%" (large, prominent) - **Total Colis**: * Label: "Total Colis" * Value: number 5. **Progress Bar Section** - Label: "Colis Livrés" - Progress bar showing: (colis_livres / total_colis) - Text below: "X sur Y livrés" - Color-coded based on percentage: * High percentage (>80%): Success color * Medium percentage (50-80%): Warning color * Low percentage (<50%): Danger color 6. **Card Footer** - Action buttons (View Details, Edit, etc.) - Horizontally centered ### LIST VIEW MODE #### Table Structure - Responsive table with horizontal scroll on mobile - Alternating row colors for better readability - Hover effect on rows #### Table Columns (Left to Right) 1. **Avatar Column**: Small circular user avatar 2. **User Info Column**: - Name (bold) - Email (smaller, secondary text) 3. **Role Column**: Badge showing user role 4. **Location Column**: - Region name - Ville name (smaller text below) 5. **Business Column**: Business name (if applicable) 6. **Statistics Column**: - Total Colis count - Taux Livraison percentage 7. **Progress Column**: - Mini progress bar showing colis livrés/total - Percentage text 8. **Actions Column**: Action buttons (icon buttons) #### List Row Behavior - Click on row to expand and show more details - Expanded row shows: Full address, phone, additional business info - Mobile: Show only essential columns, rest in expandable section ## 5. EMPTY STATES - When no filters applied and no data: "No users found" - When filters applied and no results: "No users match your filters" + Clear Filters button - When specific role tab selected and no users: "No [role] found" ## 6. LOADING STATES - Skeleton loaders for cards/rows during data fetch - Card view: Show skeleton cards - List view: Show skeleton rows - Maintain layout structure during loading ## 7. RESPONSIVE BEHAVIOR ### Desktop (≥1024px) - Full 4-column statistics - Filters in single row - Card view: 3 columns - List view: All columns visible ### Tablet (768px - 1023px) - 2-column statistics - Filters: 2 per row - Card view: 2 columns - List view: Hide some columns, show in expandable row ### Mobile (<768px) - 1-column statistics (stacked) - Filters: Stacked vertically - Tabs: May scroll horizontally or stack - Card view: 1 column - List view: Show minimal columns with expandable rows ## 8. INTERACTION BEHAVIORS ### Role Filter Tabs - Click to filter users by role - "Tous" shows all users - Update statistics cards based on selected role - Smooth transition when switching tabs ### Theme Toggle - Switch between light and dark mode - Persist selection in localStorage - Smooth color transition ### View Toggle - Switch between Card and List view - Persist selection in localStorage - Smooth layout transition with animation ### Filter Interactions - Region selection filters available villes - Search works across all visible fields - Filters work in combination (AND logic) - Real-time filtering as user types - Clear button resets all filters at once ### Progress Bar - Animate on first render - Smooth transition when data changes - Tooltip showing exact numbers on hover ## 9. DATA STRUCTURE REQUIREMENTS ### User Object Properties Needed: ``` { id: number, name: string, email: string, cin: string, tele: string, adresse: string, avatar: string (URL or initials), role: 'client' | 'livreur' | 'admin', ville: { id: number, name: string, region: { id: number, name: string } }, businesses: [{ id: number, name: string, activity: string }], statistics: { total_colis: number, colis_livres: number, taux_livraison: number (percentage) } } ``` ## 10. ACCESSIBILITY REQUIREMENTS - Keyboard navigation support - ARIA labels for all interactive elements - Focus indicators - Screen reader friendly - Color contrast compliance - Skip navigation links ## 11. PERFORMANCE CONSIDERATIONS - Implement virtual scrolling for large datasets - Lazy load user avatars - Debounce search input - Pagination or infinite scroll for large lists - Optimize re-renders when filtering ## DESIGN PRINCIPLES - Clean, modern interface - Consistent spacing and typography - Clear visual hierarchy - Smooth animations and transitions - Professional appearance - Mobile-first approach - Intuitive user experience je pense que les card tres grand et amélireor meilleure designe comme tailwind css dans card nom region selemenet deux ou trois cracatere donc c'est mielleure ajouter region clear pour attirer attention d'accord ajouter quand cliquer sur avatar de logo afficher comme drop pour button wathsapp et appelle d'accord améliorer designe meilleure pour List afficher table d'accord les columns et row avec meilleure afficher avec avatar d'accord donnée resultat final : et designe comme tailwind et des site professionel et color professionel d'accord sur ligne je veux 4 card avatar dans cadre et list je pense tres grans donc amléiroer taille un peut petite. pour region se compose trois ou quatre caractere donc badge grand pour region dans cadre d'accord aussi ajouter dans card dropdown de trois points afficher modifier et supprimer et button pour acceder profil direct aJOUTER AVATAR PULSE VERTS SUR AVATAR pour mentionnée que client en ligne d'accord ajouter un button pour permet acceder profile de client direct d'accord pour dans cadre je veux que region afficher bien comme badge pour admin voir direct clear region