diff --git a/.lovable/plan.md b/.lovable/plan.md new file mode 100644 index 0000000..efa4cea --- /dev/null +++ b/.lovable/plan.md @@ -0,0 +1,216 @@ + + +# 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 +