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