eventify_command_center/.lovable/plan.md

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:

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