Updated plan file
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
216
.lovable/plan.md
Normal file
216
.lovable/plan.md
Normal file
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user