Professional Admin Dashboard

Build a professional admin dashboard with Lovable featuring advanced analytics and beautiful UI:

Dashboard Overview Page

Header Bar

• App logo & name: Top left, always visible
• Global search: Command palette (⌘K) with fuzzy search
• Notifications: Bell icon with badge count, dropdown panel
• User menu: Avatar with dropdown (Profile, Settings, Logout)
• Quick actions: + button for common tasks

Sidebar Navigation

• Collapsible menu: Toggle button to minimize
• Icon + label: Clear navigation items
• Active state: Highlighted current page
• Sections:
  • Dashboard (home icon)
  • Analytics (chart icon)
  • Users (people icon)
  • Products (box icon)
  • Orders (shopping cart icon)
  • Reports (document icon)
  • Settings (gear icon)
• Bottom items: Help, Feedback, Account
• Badge counters: Show pending items (e.g., "5 new orders")

KPI Cards (Top Section)

Create 4-6 metric cards with:

• Large number: Primary metric (e.g., "$45,231")
• Label: Metric name (e.g., "Total Revenue")
• Trend indicator: ↑ 12% from last month (green) or ↓ 3% (red)
• Icon: Relevant icon for each metric
• Sparkline chart: Mini trend line
• Hover effect: Lift with shadow
• Loading states: Skeleton screens

Example metrics:

• Total Revenue
• Active Users
• Conversion Rate
• Average Order Value
• New Signups
• Support Tickets

Main Chart Section

• Customizable timeframe: Last 7 days, 30 days, 3 months, Year
• Chart type toggle: Line, Bar, Area charts
• Multiple datasets: Compare metrics (Revenue vs Orders)
• Interactive tooltips: Hover shows detailed data
• Zoom & pan: For large datasets
• Export button: Download as CSV or PNG
• Legend: Toggle datasets on/off
• Responsive: Adapts to screen size

Chart libraries: Recharts or Chart.js

Recent Activity Feed

• Timeline view: Vertical timeline with icons
• Activity types:
  • New user registered
  • Order placed
  • Payment received
  • Support ticket created
  • Product added
• Timestamps: "2 minutes ago", "5 hours ago"
• User avatars: For user actions
• Action buttons: Quick actions (View, Reply)
• Load more: Infinite scroll or pagination
• Real-time updates: New items slide in with animation

Quick Actions Panel

• Action cards: 4-6 common tasks
  • Add New Product
  • Create Invoice
  • Invite Team Member
  • Generate Report
  • Send Newsletter
  • Schedule Meeting
• Icon + Title: Clear labeling
• Hover effect: Scale up slightly
• Click: Opens modal or navigates to page

Analytics Page

Advanced Charts

• Revenue trends: Multi-line chart
• Geographic map: Heatmap of user locations
• Funnel visualization: Conversion funnel stages
• Cohort analysis: Retention heatmap
• Traffic sources: Pie/donut chart
• Device breakdown: Bar chart (Desktop, Mobile, Tablet)

Filters & Date Ranges

• Date picker: Custom range selector
• Quick filters: Today, Week, Month, Year
• Comparison mode: Compare to previous period
• Segment filters: By user type, location, device
• Save filters: Bookmark custom views
• Export: PDF report generation

Users Management Page

User Table

• Data columns:
  • Avatar + Name
  • Email
  • Role (Admin, User, Guest)
  • Status (Active, Inactive, Pending)
  • Signup Date
  • Last Login
  • Actions (Edit, Delete, Impersonate)
• Column sorting: Click headers to sort
• Column filtering: Filter by any column
• Multi-select: Bulk actions (Delete, Export, Change Role)
• Row actions: Kebab menu with options
• Inline editing: Click to edit directly
• Pagination: 10, 25, 50, 100 per page

Advanced Features

• Search & Filter: Real-time search across all fields
• Bulk import: CSV upload with validation
• Export users: CSV, Excel, PDF
• User details modal: Click row for detailed view
  • Full profile
  • Activity history
  • Orders/purchases
  • Notes section
  • Audit log
• Invite users: Email invitations with role selection

Settings Page

Settings Sections

Tabbed interface with these sections:

General Settings

• App name, logo, favicon
• Primary color picker
• Timezone selector
• Language selection
• Currency format

Team Management

• Team member list
• Role & permissions editor
• Pending invitations
• Activity log

Integrations

• Connected services (Stripe, SendGrid, Slack)
• API keys management
• Webhooks configuration
• OAuth apps

Security

• Two-factor authentication toggle
• Password policy settings
• Session timeout
• IP whitelist
• Audit log

Billing & Plans

• Current plan display
• Usage meter (API calls, storage)
• Upgrade/Downgrade options
• Payment methods
• Invoice history

Design System

Color Palette

• Primary: Brand color for CTAs
• Secondary: Accent color
• Success: Green for positive actions
• Warning: Amber for warnings
• Danger: Red for destructive actions
• Neutral: Grays for text and backgrounds
• Charts: Distinct, accessible colors

Components

• shadcn/ui: All UI components
• Data tables: TanStack Table
• Charts: Recharts or Chart.js
• Forms: React Hook Form
• Icons: Lucide React
• Toasts: Sonner
• Modals: Radix UI Dialog
• Date Picker: React Day Picker

Typography

• Headings: Clear hierarchy (H1-H6)
• Body: 14-16px, easy to read
• Monospace: For code, IDs
• Number formatting: Localized currency, percentages

Layout

• Responsive grid: Adapts to screen size
• Whitespace: Generous, uncluttered
• Card-based: Group related content
• Consistent spacing: 4px, 8px, 16px, 24px, 32px scale

Interactions & Animations

Micro-interactions

• Button hovers: Slight lift and shadow
• Card hovers: Elevation increase
• Transitions: Smooth 200-300ms
• Loading states: Skeleton screens and spinners
• Success feedback: Checkmarks, confetti
• Error feedback: Shake animation, red borders
• Toast notifications: Slide in from top-right

Advanced Animations

• Chart animations: Data points animate in
• Counter animations: Numbers roll up
• Stagger animations: List items appear sequentially
• Page transitions: Smooth fade
• Sidebar collapse: Smooth width transition

Real-Time Features

Live Updates

• WebSocket integration: Real-time data push
• Activity feed: New items appear automatically
• Notifications: Pop in as they arrive
• User presence: Show who's online
• Collaborative editing: See others' cursors
• Auto-refresh: Dashboards update every 30s

Responsive Design

Desktop (1024px+)

• Full sidebar visible
• Multi-column layouts
• Hover interactions
• Keyboard shortcuts

Tablet (768-1023px)

• Collapsible sidebar
• 2-column layouts
• Touch-friendly targets

Mobile (< 768px)

• Bottom navigation bar
• Single column
• Swipe gestures
• Simplified charts
• Hamburger menu

Technical Requirements

Performance

• Fast load time: <2 seconds
• Lazy loading: Charts and heavy components
• Code splitting: Per-route
• Optimized images: WebP, responsive sizes
• Virtual scrolling: For long lists
• Debounced search: Reduce API calls

Data & API

• Supabase backend: Real-time database
• Supabase Auth: User authentication
• Row Level Security: Data protection
• API rate limiting: Prevent abuse
• Error handling: Graceful failures
• Offline support: Cache critical data

Accessibility

• Keyboard navigation: Full keyboard support
• ARIA labels: Screen reader friendly
• Focus management: Clear focus states
• Color contrast: WCAG AA compliant
• Reduced motion: Respect user preferences

Security

• Role-based access: Admin, Manager, User roles
• Permission checks: On all actions
• CSRF protection: Token-based
• Input sanitization: XSS prevention
• Audit logging: Track all admin actions

Generate a production-ready admin dashboard that impresses stakeholders and makes data management effortless!