Design a modern responsive web app UI for a restaurant CRM dashboard called "Garista Marketing CRM".The layout should include:1. Top Header: - Title: "Marketing CRM" - Buttons on the right: - "+ Create WhatsApp Campaign" (primary button, use rgb(40, 80, 158)) - "+ Export CSV" (outline style)2. Filters Section (below header): - Dropdown filters for: - Order Count (e.g., ≥ 1, ≥ 5, ≥ 10) - Total Spent (e.g., ≥ 100 MAD) - Last Order (e.g., 7 days, 30 days) - Tags (multi-select) - Search bar for name, phone or email - Sort dropdown: "Sort by Last Order", "Sort by Total Spent"3. Customer Table (Main Area): - Columns: - Name - Phone - Email - Last Order Date - Total Orders - Total Spent - Actions: View (eye icon), Tag (label icon), Message (send icon) - Include at least 3 example rows4. Customer Detail Panel (Modal or Sidebar): - Show when clicking "View" - Content: - Customer Name, Email, Phone - First Order, Last Order, Total Orders, Total Spent, Average Order - Tags section with chips and "+ Add Tag" - Buttons: "Send WhatsApp" (primary), "Send Email" (outline)5. Campaign Modal (when clicking "+ Create WhatsApp Campaign"): - Step-by-step modal flow: - Step 1: Select Audience (filtered users / all / upload CSV) - Step 2: Message Composer (textarea with variable tags like {{name}}) - Step 3: Schedule (send now or choose date/time)Design Requirements:- Use white background and rgb(40, 80, 158) as primary color- Include both Light and Dark Mode toggle- Use clean, modern sans-serif font (Inter or Roboto)- Responsive layout for desktop and tabletLabel the file “Garista CRM UI” and make the design developer-friendly.
I'll create a modern, responsive restaurant CRM dashboard UI for "Garista Marketing CRM" with all the requested features including light/dark mode toggle and multi-step campaign creation.
I've created a comprehensive, modern restaurant CRM dashboard UI for "Garista Marketing CRM" with all the requested features:
3-step wizard flow:
The dashboard provides a complete CRM experience with intuitive navigation, powerful filtering capabilities, and a streamlined campaign creation process perfect for restaurant marketing teams.
Yes, I extensively used shadcn/ui components throughout the Garista CRM UI! Here are all the shadcn/ui components I utilized:
Button - For all action buttons (Create Campaign, Export CSV, etc.)Input - Search bars and form inputsLabel - Form labels and text labelsBadge - Customer tags and status indicatorsCard, CardContent, CardHeader, CardTitle - Main container cardsTable, TableBody, TableCell, TableHead, TableHeader, TableRow - Customer data tableSelect, SelectContent, SelectItem, SelectTrigger, SelectValue - All dropdown filtersTextarea - Message composer in campaign modalDialog, DialogContent, DialogHeader, DialogTitle - Customer detail and campaign modalsPopover, PopoverContent, PopoverTrigger - Date picker dropdownCalendar - Date selection for campaign schedulingSearch, Eye, Tag, Send, Download, Plus, Moon, Sun, CalendarIcon, MessageSquare, Mail, XThe entire UI leverages shadcn/ui's component library, which is why it has that clean, modern, and professional appearance that's perfect for a business CRM dashboard!