# Admin Dashboard Theme & Design Guidelines

## Overview
This document provides comprehensive guidelines for creating an admin dashboard that matches your GuideMe mobile app theme and branding. These guidelines ensure visual consistency across platforms while maintaining professional admin-focused design principles.

## Brand Identity

### Logo Usage
To match your mobile app theme, you'll need to provide:

1. **Primary Logo**
   - SVG format (scalable for different screen sizes)
   - PNG format (high-resolution fallback)
   - Minimum size: 120x40px for dashboard header
   - White/light variant for dark backgrounds
   - Full color variant for light backgrounds

2. **Icon/Mark Only**
   - Simplified version for collapsed sidebar
   - Square format (32x32px minimum)
   - Favicon versions (16x16, 32x32, 48x48)

3. **Usage Guidelines**
   ```jsx
   // Dashboard Header
   <img src="/logo-full.svg" alt="GuideMe Admin" className="h-8" />
   
   // Collapsed Sidebar
   <img src="/logo-mark.svg" alt="G" className="h-8 w-8" />
   
   // Login Page
   <img src="/logo-full.svg" alt="GuideMe" className="h-12" />
   ```

### Brand Colors
Based on mobile app screenshots provided:

#### Primary Color Palette - Orange Theme
```css
/* Primary Orange - Main brand color from mobile app */
--primary-50: #fff7ed;     /* Very light orange - backgrounds */
--primary-100: #ffedd5;    /* Light orange - hover states */
--primary-200: #fed7aa;    /* Light orange - disabled states */
--primary-300: #fdba74;    /* Medium light orange */
--primary-400: #fb923c;    /* Medium orange */
--primary-500: #f97316;    /* Main brand orange - primary buttons */
--primary-600: #ea580c;    /* Darker orange - button hover */
--primary-700: #c2410c;    /* Dark orange - active states */
--primary-800: #9a3412;    /* Very dark orange */
--primary-900: #7c2d12;    /* Darkest orange */
```

#### Secondary Colors - Dark Theme Base
```css
/* Dark Theme - Main background and text colors from mobile app */
--dark-50: #f8fafc;        /* Lightest - overlays */
--dark-100: #f1f5f9;       /* Light - modals */
--dark-200: #e2e8f0;       /* Light gray - borders */
--dark-300: #cbd5e1;       /* Medium light - disabled */
--dark-400: #94a3b8;       /* Medium - placeholder text */
--dark-500: #64748b;       /* Medium dark - secondary text */
--dark-600: #475569;       /* Dark - primary text on light */
--dark-700: #334155;       /* Very dark - cards on dark bg */
--dark-800: #1e293b;       /* Almost black - main dark bg */
--dark-900: #0f172a;       /* Black - deepest dark */

/* Light Gray Scale for admin dashboard elements */
--gray-50: #f9fafb;        /* Light backgrounds */
--gray-100: #f3f4f6;       /* Card backgrounds */
--gray-200: #e5e7eb;       /* Border color */
--gray-300: #d1d5db;       /* Subtle borders */
--gray-400: #9ca3af;       /* Placeholder text */
--gray-500: #6b7280;       /* Secondary text */
--gray-600: #4b5563;       /* Primary text light */
--gray-700: #374151;       /* Primary text */
--gray-800: #1f2937;       /* Headings */
--gray-900: #111827;       /* Strong headings */
```

#### Status Colors
```css
/* Success - Green */
--success-50: #f0fdf4;
--success-100: #dcfce7;
--success-500: #22c55e;    /* Main success color */
--success-600: #16a34a;    /* Success hover */
--success-700: #15803d;    /* Success active */

/* Warning - Orange */
--warning-50: #fffbeb;
--warning-100: #fef3c7;
--warning-500: #f59e0b;    /* Main warning color */
--warning-600: #d97706;    /* Warning hover */
--warning-700: #b45309;    /* Warning active */

/* Error - Red */
--error-50: #fef2f2;
--error-100: #fee2e2;
--error-500: #ef4444;      /* Main error color */
--error-600: #dc2626;      /* Error hover */
--error-700: #b91c1c;      /* Error active */

/* Info - Blue (alternative to primary) */
--info-50: #f0f9ff;
--info-100: #e0f2fe;
--info-500: #3b82f6;       /* Main info color */
--info-600: #2563eb;       /* Info hover */
--info-700: #1d4ed8;       /* Info active */
```

## Typography System

### Font Stack
```css
/* Primary Font */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
             'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

/* Alternative: If using custom brand font */
font-family: 'YourBrandFont', 'Inter', system-ui, sans-serif;

/* Code/Monospace */
font-family: 'Fira Code', 'Monaco', 'Consolas', 'Courier New', monospace;
```

### Font Sizes & Hierarchy
```css
/* Display Sizes */
--text-4xl: 2.25rem;       /* 36px - Page titles */
--text-3xl: 1.875rem;      /* 30px - Section headings */
--text-2xl: 1.5rem;        /* 24px - Card titles */
--text-xl: 1.25rem;        /* 20px - Large text */

/* Body Sizes */
--text-lg: 1.125rem;       /* 18px - Large body text */
--text-base: 1rem;         /* 16px - Default body text */
--text-sm: 0.875rem;       /* 14px - Small text */
--text-xs: 0.75rem;        /* 12px - Captions, labels */

/* Line Heights */
--leading-tight: 1.25;     /* For headings */
--leading-snug: 1.375;     /* For subheadings */
--leading-normal: 1.5;     /* For body text */
--leading-relaxed: 1.625;  /* For readable paragraphs */
```

### Font Weights
```css
--font-thin: 100;
--font-light: 300;
--font-normal: 400;        /* Default body text */
--font-medium: 500;        /* Emphasized text */
--font-semibold: 600;      /* Section headings */
--font-bold: 700;          /* Page titles */
--font-extrabold: 800;     /* Strong emphasis */
```

## Layout System

### Spacing Scale
```css
/* Spacing Values (rem) */
--space-1: 0.25rem;        /* 4px */
--space-2: 0.5rem;         /* 8px */
--space-3: 0.75rem;        /* 12px */
--space-4: 1rem;           /* 16px */
--space-5: 1.25rem;        /* 20px */
--space-6: 1.5rem;         /* 24px */
--space-8: 2rem;           /* 32px */
--space-10: 2.5rem;        /* 40px */
--space-12: 3rem;          /* 48px */
--space-16: 4rem;          /* 64px */
--space-20: 5rem;          /* 80px */
--space-24: 6rem;          /* 96px */
```

### Grid System
```css
/* Container Widths */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;

/* Layout Dimensions */
--sidebar-width: 16rem;      /* 256px - Full sidebar */
--sidebar-collapsed: 4rem;   /* 64px - Collapsed sidebar */
--header-height: 4rem;       /* 64px - Header height */
--footer-height: 3rem;       /* 48px - Footer height */
```

### Breakpoints
```css
/* Mobile First Approach */
/* xs: 0px (default) */
--breakpoint-sm: 640px;    /* Small devices (phones) */
--breakpoint-md: 768px;    /* Medium devices (tablets) */
--breakpoint-lg: 1024px;   /* Large devices (laptops) */
--breakpoint-xl: 1280px;   /* Extra large devices (desktops) */
--breakpoint-2xl: 1536px;  /* 2x Extra large devices */
```

## Component Design Patterns

### Buttons
```jsx
/* Primary Button */
<Button className="bg-primary-500 hover:bg-primary-600 text-white font-medium px-4 py-2 rounded-md transition-colors">
  Primary Action
</Button>

/* Secondary Button */
<Button className="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium px-4 py-2 rounded-md transition-colors">
  Secondary Action
</Button>

/* Danger Button */
<Button className="bg-error-500 hover:bg-error-600 text-white font-medium px-4 py-2 rounded-md transition-colors">
  Delete
</Button>

/* Success Button */
<Button className="bg-success-500 hover:bg-success-600 text-white font-medium px-4 py-2 rounded-md transition-colors">
  Approve
</Button>
```

### Cards
```jsx
/* Basic Card */
<Card className="bg-white border border-gray-200 rounded-lg shadow-sm">
  <CardHeader className="border-b border-gray-100 px-6 py-4">
    <CardTitle className="text-lg font-semibold text-gray-900">Card Title</CardTitle>
    <CardDescription className="text-sm text-gray-500">Card description</CardDescription>
  </CardHeader>
  <CardContent className="px-6 py-4">
    Content goes here
  </CardContent>
</Card>

/* Stat Card */
<Card className="bg-white border border-gray-200 rounded-lg shadow-sm">
  <CardContent className="px-6 py-4">
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm font-medium text-gray-500">Total Users</p>
        <p className="text-2xl font-bold text-gray-900">1,234</p>
        <p className="text-sm text-success-600">+12% from last month</p>
      </div>
      <div className="p-3 bg-primary-100 rounded-lg">
        <UsersIcon className="h-6 w-6 text-primary-600" />
      </div>
    </div>
  </CardContent>
</Card>
```

### Forms - Mobile App Inspired
```jsx
/* Form Field - Based on mobile app login design */
<div className="space-y-2">
  <Label htmlFor="email" className="text-sm font-medium text-gray-700">
    Email Address
  </Label>
  <div className="relative">
    <Input
      id="email"
      type="email"
      placeholder="Enter your email address"
      className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:bg-white transition-all"
    />
    <MailIcon className="absolute right-3 top-3 h-5 w-5 text-gray-400" />
  </div>
  <p className="text-xs text-error-500">Error message if validation fails</p>
</div>

/* Password Field - Mobile app style */
<div className="space-y-2">
  <Label htmlFor="password" className="text-sm font-medium text-gray-700">
    Password
  </Label>
  <div className="relative">
    <Input
      id="password"
      type={showPassword ? "text" : "password"}
      placeholder="Enter your password"
      className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:bg-white transition-all pr-12"
    />
    <Button
      type="button"
      variant="ghost"
      size="sm"
      className="absolute right-1 top-1 h-8 w-8 p-0"
      onClick={() => setShowPassword(!showPassword)}
    >
      {showPassword ? <EyeOffIcon className="h-4 w-4" /> : <EyeIcon className="h-4 w-4" />}
    </Button>
  </div>
</div>

/* Time Picker - Based on booking screen design */
<div className="space-y-4">
  <Label className="text-lg font-semibold text-gray-900">Select Your Time</Label>
  <div className="flex items-center justify-center space-x-2">
    <div className="flex items-center space-x-1">
      <div className="bg-white border-2 border-primary-500 rounded-lg p-4 min-w-[80px] text-center">
        <span className="text-3xl font-bold text-primary-500">08</span>
      </div>
      <span className="text-2xl font-bold text-gray-900">:</span>
      <div className="bg-gray-100 border-2 border-gray-200 rounded-lg p-4 min-w-[80px] text-center">
        <span className="text-3xl font-bold text-gray-900">00</span>
      </div>
    </div>
    <div className="ml-4">
      <div className="flex flex-col space-y-2">
        <Button 
          variant={period === 'AM' ? 'default' : 'outline'}
          className={`px-6 py-2 rounded-lg ${period === 'AM' ? 'bg-primary-100 text-primary-700 border-primary-200' : 'bg-white border-gray-200'}`}
        >
          AM
        </Button>
        <Button 
          variant={period === 'PM' ? 'default' : 'outline'}
          className={`px-6 py-2 rounded-lg ${period === 'PM' ? 'bg-gray-800 text-white' : 'bg-white border-gray-200'}`}
        >
          PM
        </Button>
      </div>
    </div>
  </div>
</div>

/* Action Buttons - Mobile app style */
<div className="space-y-3">
  {/* Primary Action Button */}
  <Button className="w-full bg-primary-500 hover:bg-primary-600 text-white font-semibold py-4 px-6 rounded-lg transition-colors">
    Continue
  </Button>
  
  {/* Secondary Action Button */}
  <Button 
    variant="outline" 
    className="w-full bg-primary-50 border border-primary-200 text-primary-600 hover:bg-primary-100 font-medium py-4 px-6 rounded-lg transition-colors"
  >
    Avail Discount
  </Button>
</div>

/* Date Picker */
<div className="space-y-2">
  <Label className="text-sm font-medium text-gray-700">Booking Date</Label>
  <div className="flex items-center space-x-2 bg-gray-50 border border-gray-200 rounded-lg px-4 py-3">
    <CalendarIcon className="h-5 w-5 text-gray-400" />
    <span className="text-gray-900 font-medium">27/12/2023</span>
  </div>
</div>
```

### Tables
```jsx
/* Data Table */
<Table className="w-full">
  <TableHeader>
    <TableRow className="border-b border-gray-200">
      <TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
        Name
      </TableHead>
      <TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
        Email
      </TableHead>
      <TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
        Status
      </TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="border-b border-gray-100 hover:bg-gray-50">
      <TableCell className="px-6 py-4 text-sm font-medium text-gray-900">
        John Doe
      </TableCell>
      <TableCell className="px-6 py-4 text-sm text-gray-500">
        john@example.com
      </TableCell>
      <TableCell className="px-6 py-4">
        <Badge className="bg-success-100 text-success-700">Active</Badge>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>
```

### Badges & Status Indicators
```jsx
/* Status Badges */
<Badge className="bg-success-100 text-success-700 px-2 py-1 text-xs font-medium rounded-full">
  Active
</Badge>

<Badge className="bg-warning-100 text-warning-700 px-2 py-1 text-xs font-medium rounded-full">
  Pending
</Badge>

<Badge className="bg-error-100 text-error-700 px-2 py-1 text-xs font-medium rounded-full">
  Blocked
</Badge>

<Badge className="bg-gray-100 text-gray-700 px-2 py-1 text-xs font-medium rounded-full">
  Draft
</Badge>
```

## Navigation Design

### Sidebar Navigation
```jsx
/* Sidebar Structure */
<div className="fixed inset-y-0 left-0 w-64 bg-white border-r border-gray-200 shadow-sm">
  {/* Logo Section */}
  <div className="flex items-center justify-center h-16 border-b border-gray-200 bg-primary-600">
    <img src="/logo-white.svg" alt="GuideMe Admin" className="h-8" />
  </div>
  
  {/* Navigation Items */}
  <nav className="mt-8 px-4">
    <ul className="space-y-2">
      <li>
        <Link className="flex items-center px-3 py-2 text-sm font-medium rounded-md text-primary-700 bg-primary-100">
          <DashboardIcon className="mr-3 h-5 w-5" />
          Dashboard
        </Link>
      </li>
      <li>
        <Link className="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900">
          <UsersIcon className="mr-3 h-5 w-5" />
          Users
        </Link>
      </li>
    </ul>
  </nav>
</div>
```

### Header Design
```jsx
/* Header Structure */
<header className="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
  <div className="flex items-center space-x-4">
    <Button variant="ghost" size="sm" onClick={() => toggleSidebar()}>
      <MenuIcon className="h-5 w-5" />
    </Button>
    <h1 className="text-lg font-semibold text-gray-900">Dashboard</h1>
  </div>
  
  <div className="flex items-center space-x-4">
    {/* Search */}
    <div className="relative">
      <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
      <Input 
        placeholder="Search..." 
        className="pl-10 w-64 h-8 text-sm border-gray-300 rounded-md"
      />
    </div>
    
    {/* Notifications */}
    <Button variant="ghost" size="sm" className="relative">
      <BellIcon className="h-5 w-5" />
      <span className="absolute -top-1 -right-1 h-4 w-4 bg-error-500 text-white text-xs rounded-full flex items-center justify-center">
        3
      </span>
    </Button>
    
    {/* Profile Dropdown */}
    <DropdownMenu>
      <DropdownMenuTrigger className="flex items-center space-x-2">
        <Avatar className="h-8 w-8">
          <AvatarImage src="/admin-avatar.jpg" />
          <AvatarFallback>AD</AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>
    </DropdownMenu>
  </div>
</header>
```

## Icons & Illustrations

### Icon System
Use **Lucide React** icons for consistency:

```jsx
// Dashboard & Analytics
import { 
  LayoutDashboard, 
  TrendingUp, 
  BarChart3, 
  PieChart 
} from 'lucide-react';

// Users & People
import { 
  Users, 
  User, 
  UserCheck, 
  UserX, 
  Shield 
} from 'lucide-react';

// Business & Commerce
import { 
  Store, 
  ShoppingBag, 
  CreditCard, 
  DollarSign 
} from 'lucide-react';

// Communication
import { 
  MessageSquare, 
  Mail, 
  Bell, 
  Send 
} from 'lucide-react';

// Actions
import { 
  Plus, 
  Edit, 
  Trash2, 
  Eye, 
  Download, 
  Upload 
} from 'lucide-react';

// Status & States
import { 
  CheckCircle, 
  XCircle, 
  Clock, 
  AlertTriangle, 
  Info 
} from 'lucide-react';
```

### Icon Usage Guidelines
```jsx
/* Standard Sizes */
<Icon className="h-4 w-4" />   /* Small - buttons, inline */
<Icon className="h-5 w-5" />   /* Medium - navigation */
<Icon className="h-6 w-6" />   /* Large - cards, headers */
<Icon className="h-8 w-8" />   /* Extra large - stat cards */

/* Colors */
<Icon className="text-gray-400" />     /* Inactive/subtle */
<Icon className="text-gray-600" />     /* Active/normal */
<Icon className="text-primary-500" /> /* Brand/primary */
<Icon className="text-success-500" /> /* Success states */
<Icon className="text-error-500" />   /* Error states */
```

## Animation & Transitions

### Motion Principles
```css
/* Standard Transitions */
.transition-standard {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  transition-duration: 150ms;
}

/* Smooth Transitions */
.transition-smooth {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  transition-duration: 300ms;
}

/* Slow Transitions */
.transition-slow {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  transition-duration: 500ms;
}
```

### Common Animations
```jsx
/* Loading Spinner */
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-500" />

/* Fade In */
<div className="animate-in fade-in duration-300">
  Content appears smoothly
</div>

/* Slide In */
<div className="animate-in slide-in-from-left duration-300">
  Sidebar content
</div>

/* Bounce In */
<div className="animate-in bounce-in duration-500">
  Success message
</div>
```

## Responsive Design Guidelines

### Mobile-First Approach
```jsx
/* Responsive Classes */
<div className="
  grid 
  grid-cols-1        /* Mobile: 1 column */
  md:grid-cols-2     /* Tablet: 2 columns */
  lg:grid-cols-3     /* Desktop: 3 columns */
  xl:grid-cols-4     /* Large: 4 columns */
  gap-4              /* Consistent spacing */
">
  <Card>...</Card>
</div>

/* Responsive Text */
<h1 className="
  text-xl           /* Mobile: 20px */
  md:text-2xl       /* Tablet: 24px */
  lg:text-3xl       /* Desktop: 30px */
  font-bold
">
  Responsive Heading
</h1>

/* Responsive Spacing */
<div className="
  px-4              /* Mobile: 16px padding */
  md:px-6           /* Tablet: 24px padding */
  lg:px-8           /* Desktop: 32px padding */
">
  Content
</div>
```

### Sidebar Responsiveness
```jsx
/* Mobile: Overlay sidebar */
<div className="
  fixed inset-0 z-50 
  bg-gray-900 bg-opacity-50 
  lg:hidden
" />

/* Desktop: Static sidebar */
<div className="
  hidden lg:flex 
  lg:flex-col 
  lg:fixed 
  lg:inset-y-0 
  lg:w-64
">
  Sidebar Content
</div>

/* Main content adjustment */
<main className="
  lg:pl-64          /* Desktop: Add left padding for sidebar */
  min-h-screen
">
  Main Content
</main>
```

## Dark Mode Support (Optional)

### CSS Variables for Theme Switching
```css
/* Light Theme (Default) */
:root {
  --background: 255 255 255;       /* white */
  --foreground: 17 24 39;          /* gray-900 */
  --card: 255 255 255;             /* white */
  --card-foreground: 17 24 39;     /* gray-900 */
  --popover: 255 255 255;          /* white */
  --popover-foreground: 17 24 39;  /* gray-900 */
  --primary: 14 165 233;           /* primary-500 */
  --primary-foreground: 255 255 255; /* white */
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --background: 17 24 39;        /* gray-900 */
    --foreground: 249 250 251;     /* gray-50 */
    --card: 31 41 55;              /* gray-800 */
    --card-foreground: 249 250 251; /* gray-50 */
    --popover: 31 41 55;           /* gray-800 */
    --popover-foreground: 249 250 251; /* gray-50 */
    --primary: 59 130 246;         /* blue-500 */
    --primary-foreground: 17 24 39; /* gray-900 */
  }
}
```

## Accessibility Guidelines

### Color Contrast
```css
/* Ensure WCAG AA compliance (4.5:1 ratio) */
--text-primary: #111827;      /* 21:1 ratio on white */
--text-secondary: #374151;    /* 12:1 ratio on white */
--text-tertiary: #6b7280;     /* 7:1 ratio on white */

/* Focus States */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}
```

### Semantic HTML
```jsx
/* Use semantic elements */
<main role="main">
  <header role="banner">
    <nav role="navigation">
      {/* Navigation items */}
    </nav>
  </header>
  
  <section aria-labelledby="dashboard-heading">
    <h1 id="dashboard-heading">Dashboard</h1>
    {/* Dashboard content */}
  </section>
</main>

/* ARIA labels for interactive elements */
<Button aria-label="Close dialog" onClick={closeDialog}>
  <XIcon className="h-4 w-4" />
</Button>

/* Screen reader text */
<span className="sr-only">Loading...</span>
```

## Assets You Need to Provide

### Images & Graphics
1. **Logo Files**
   - `logo-full.svg` - Full logo with text
   - `logo-mark.svg` - Icon/symbol only
   - `logo-white.svg` - White version for dark backgrounds
   - Favicon files (multiple sizes)

2. **Background Images**
   - Login page background (optional)
   - Empty state illustrations
   - Error page illustrations

3. **Avatar/Profile Images**
   - Default admin avatar
   - Placeholder user avatars

### Brand Guidelines Document
Please provide:
1. **Color palette** from your mobile app
2. **Typography** preferences (fonts used in mobile app)
3. **Logo usage** guidelines and restrictions
4. **Spacing and layout** preferences
5. **Component styles** from mobile app for reference

### Mobile App Screenshots
For reference, provide:
1. **Login screen** screenshots
2. **Main dashboard/home** screen
3. **Navigation** patterns
4. **Color usage** examples
5. **Typography** examples

## Implementation Checklist

### Setup Phase
- [ ] Install and configure chosen font (Inter recommended)
- [ ] Add logo assets to public folder
- [ ] Configure TailwindCSS with custom colors
- [ ] Set up CSS variables for theming
- [ ] Add icon library (Lucide React)

### Component Development
- [ ] Create base Button component with variants
- [ ] Create Card component system
- [ ] Create Form components (Input, Select, etc.)
- [ ] Create Badge/Status components
- [ ] Create Table component
- [ ] Create Modal/Dialog components

### Layout Implementation
- [ ] Implement responsive sidebar
- [ ] Create dashboard header
- [ ] Set up main layout wrapper
- [ ] Add navigation components
- [ ] Implement breadcrumb system

### Theme Integration
- [ ] Apply brand colors throughout
- [ ] Implement consistent spacing
- [ ] Add transitions and animations
- [ ] Test responsive behavior
- [ ] Validate accessibility compliance

### Final Polish
- [ ] Add loading states
- [ ] Implement error states
- [ ] Add empty states with illustrations
- [ ] Test across different browsers
- [ ] Optimize for performance

## Code Templates

### TailwindCSS Configuration - Updated for Orange Theme
```js
// tailwind.config.js
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        // Primary Orange Theme - From Mobile App
        primary: {
          50: '#fff7ed',   // Very light orange backgrounds
          100: '#ffedd5',  // Light orange hover states
          200: '#fed7aa',  // Light orange disabled states
          300: '#fdba74',  // Medium light orange
          400: '#fb923c',  // Medium orange
          500: '#f97316',  // Main brand orange - primary buttons
          600: '#ea580c',  // Darker orange - button hover
          700: '#c2410c',  // Dark orange - active states
          800: '#9a3412',  // Very dark orange
          900: '#7c2d12',  // Darkest orange
        },
        // Dark theme colors from mobile app
        dark: {
          50: '#f8fafc',   // Lightest - overlays
          100: '#f1f5f9',  // Light - modals
          200: '#e2e8f0',  // Light gray - borders
          300: '#cbd5e1',  // Medium light - disabled
          400: '#94a3b8',  // Medium - placeholder text
          500: '#64748b',  // Medium dark - secondary text
          600: '#475569',  // Dark - primary text on light
          700: '#334155',  // Very dark - cards on dark bg
          800: '#1e293b',  // Almost black - main dark bg
          900: '#0f172a',  // Black - deepest dark
        },
        // Standard grays for admin dashboard
        gray: {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827',
        },
        // Status colors
        success: {
          50: '#f0fdf4',
          100: '#dcfce7',
          500: '#22c55e',
          600: '#16a34a',
          700: '#15803d',
        },
        warning: {
          50: '#fffbeb',
          100: '#fef3c7',
          500: '#f59e0b',
          600: '#d97706',
          700: '#b45309',
        },
        error: {
          50: '#fef2f2',
          100: '#fee2e2',
          500: '#ef4444',
          600: '#dc2626',
          700: '#b91c1c',
        },
        info: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['Fira Code', 'Monaco', 'Consolas', 'Courier New', 'monospace'],
      },
      spacing: {
        18: '4.5rem',   // 72px
        88: '22rem',    // 352px
      },
      borderRadius: {
        'lg': '0.5rem',   // 8px - matches mobile app rounded corners
        'xl': '0.75rem',  // 12px
        '2xl': '1rem',    // 16px
      },
      boxShadow: {
        'soft': '0 2px 8px 0 rgb(0 0 0 / 0.05)',
        'medium': '0 4px 16px 0 rgb(0 0 0 / 0.08)',
        'strong': '0 8px 32px 0 rgb(0 0 0 / 0.12)',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}
```

### Global Styles
```css
/* globals.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground font-sans antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold text-gray-900;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium px-4 py-2 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }
  
  .card {
    @apply bg-white border border-gray-200 rounded-lg shadow-sm;
  }
  
  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
```

This comprehensive design system ensures your admin dashboard will perfectly match your mobile app's theme while providing a professional, accessible, and maintainable interface for admin users.