# Eventify Backoffice - Implementation Plan

## Overview
A beautiful admin command center using the **Neumorphic Blue Theme** design system with React + Vite, featuring a full navigation shell with dashboard home and placeholder pages for all modules.

---

## 1. Design System Foundation

### Tailwind Configuration
- Extend `tailwind.config.ts` with custom neumorphic shadows:
  - `shadow-neu` - Raised elements (cards, buttons)
  - `shadow-neu-inset` - Pressed/input fields
  - `shadow-neu-hover` - Elevated hover states
  - `shadow-neu-flat` - Subtle depth
- Add custom colors: `neu-base`, `neu-surface`, `neu-raised`, `neu-inset`
- Configure Deep Blue, Royal Blue, Ocean Blue, Sky Blue, Ice Blue palette

---

## 2. Core Layout Components

### AppLayout (Shell)
- **Fixed Sidebar** (264px width):
  - Eventify logo and "BACKOFFICE" label
  - Navigation items with neumorphic buttons:
    - Dashboard (Home icon)
    - Partner Management (Users icon)
    - Events (Calendar icon)
    - Users (User icon)
    - Financials (DollarSign icon)
    - Settings (Settings icon)
  - Active state with Royal Blue background
  - Hover effects with `shadow-neu-hover`

### Top Bar
- Page title with description
- Global search input (neumorphic inset style)
- Notification bell (neumorphic icon button with badge)
- Admin profile avatar with dropdown

---

## 3. Dashboard Home Page

### Metrics Grid (4 cards in responsive grid)
Using the reusable **DashboardMetricCard** component:

1. **Total Platform Revenue**
   - Value: ₹24,50,000
   - Growth indicator: +12.5% MoM
   - Icon: TrendingUp (green)

2. **Active Partners**
   - Value: 156
   - Subtitle: 12 pending approval
   - Icon: Users

3. **Live Events**
   - Value: 43
   - Subtitle: 8 starting today
   - Icon: Calendar

4. **Ticket Sales Volume**
   - Value: 12,847
   - Growth indicator: +8.3% this week
   - Icon: Ticket

### Action Items Section (Priority Queue)
Neumorphic card containing urgent items from Partner Controls:

- **Partner Approval Queue**: "5 Partners awaiting KYC verification" → Link to review
- **Flagged Events**: "3 Events reported for review" → Link to moderation
- **Pending Payouts**: "₹8,45,000 ready for release" → Link to financials
- **Stripe Issues**: "2 Connected accounts need attention" → Link to fix

Each item shows count badge, description, and action button.

### Revenue Analytics Section
- **Revenue vs Payouts Chart** placeholder
  - Static SVG bar chart visualization
  - Legend: Platform Revenue (blue) vs Partner Payouts (green)
  - Time period: Last 7 days

### Recent Activity Feed
- Compact list showing latest platform activities
- Examples: "New partner registered", "Event approved", "Payout completed"
- Timestamps and status indicators

---

## 4. Navigation Pages (Placeholders)

Each page will have:
- Consistent top bar with title
- "Coming Soon" neumorphic card
- Relevant icon and brief description

### Partner Management
- Placeholder with stats preview
- Quick access buttons for KYC queue

### Events
- Placeholder with calendar icon
- Event count summary

### Users
- Placeholder with user stats

### Financials
- Placeholder with revenue summary

### Settings
- Placeholder with configuration options

---

## 5. Reusable Components

### DashboardMetricCard
- Accepts: `title`, `value`, `subtitle`, `icon`, `trend`
- Neumorphic styling with icon container
- Hover elevation effect

### ActionItemCard
- Accepts: `title`, `count`, `description`, `actionLabel`, `href`
- Warning/attention styling
- Badge with count

### NeuButton (Primary/Secondary/Icon variants)
- Primary: Blue background with white text
- Secondary: Neumorphic surface with blue text
- Icon: Square neumorphic button

### NeuInput
- Inset shadow styling
- Focus ring animation
- Label support

---

## 6. API-Ready Architecture

### Data Interfaces
All components will use TypeScript interfaces ready for API integration:

```typescript
interface DashboardMetrics {
  totalRevenue: number;
  revenueGrowth: number;
  activePartners: number;
  pendingPartners: number;
  liveEvents: number;
  eventsToday: number;
  ticketSales: number;
  ticketGrowth: number;
}

interface ActionItem {
  id: string;
  type: 'kyc' | 'flagged' | 'payout' | 'stripe';
  count: number;
  description: string;
}
```

### Hooks Structure
- `useDashboardMetrics()` - Ready to fetch from API
- `useActionItems()` - Ready to fetch pending actions
- Static mock data initially, easily replaceable

---

## 7. File Structure

```
src/
├── components/
│   ├── layout/
│   │   ├── AppLayout.tsx      # Main shell with sidebar
│   │   ├── Sidebar.tsx        # Navigation sidebar
│   │   └── TopBar.tsx         # Header with search/profile
│   ├── dashboard/
│   │   ├── DashboardMetricCard.tsx
│   │   ├── ActionItemsPanel.tsx
│   │   └── RevenueChart.tsx
│   └── ui/
│       ├── NeuButton.tsx
│       └── NeuInput.tsx
├── pages/
│   ├── Dashboard.tsx          # Main dashboard
│   ├── Partners.tsx           # Partner management
│   ├── Events.tsx             # Events management
│   ├── Users.tsx              # User management
│   ├── Financials.tsx         # Financial overview
│   └── Settings.tsx           # Platform settings
├── types/
│   └── dashboard.ts           # TypeScript interfaces
└── data/
    └── mockData.ts            # Static demo data
```

---

## Visual Design Summary

- **Background**: `#E8EFF8` (neu-base) - Soft blue-gray
- **Cards**: `#DFE9F5` (neu-surface) with `shadow-neu`
- **Text**: `#0F1E3D` (Deep Blue) primary
- **Accents**: `#1E3A8A` (Royal Blue) for active states
- **Interactive**: `#3B82F6` (Ocean Blue) for links/buttons
- **Rounded corners**: `rounded-xl` (12px) and `rounded-2xl` (16px)
- **Smooth transitions**: All interactive elements animate on hover/press