feat: Modularize event management system - 98.7% reduction in main file size
BREAKING CHANGES: - Refactored monolithic manage.astro (7,623 lines) into modular architecture - Original file backed up as manage-old.astro NEW ARCHITECTURE: ✅ 5 Utility Libraries: - event-management.ts: Event data operations & formatting - ticket-management.ts: Ticket CRUD operations & sales data - seating-management.ts: Seating map management & layout generation - sales-analytics.ts: Sales metrics, reporting & data export - marketing-kit.ts: Marketing asset generation & social media ✅ 5 Shared Components: - TicketTypeModal.tsx: Reusable ticket type creation/editing - SeatingMapModal.tsx: Advanced seating map editor with drag-and-drop - EmbedCodeModal.tsx: Widget embedding with customization - OrdersTable.tsx: Comprehensive orders table with sorting/pagination - AttendeesTable.tsx: Attendee management with export capabilities ✅ 11 Tab Components: - TicketsTab.tsx: Ticket management with card/list views - VenueTab.tsx: Seating map management & venue configuration - OrdersTab.tsx: Sales data & order management - AttendeesTab.tsx: Attendee check-in & management - PresaleTab.tsx: Presale code generation & tracking - DiscountTab.tsx: Discount code management - AddonsTab.tsx: Add-on product management - PrintedTab.tsx: Printed ticket barcode management - SettingsTab.tsx: Event configuration & custom fields - MarketingTab.tsx: Marketing kit with social media templates - PromotionsTab.tsx: Campaign & promotion management ✅ 4 Infrastructure Components: - TabNavigation.tsx: Responsive tab navigation system - EventManagement.tsx: Main orchestration component - EventHeader.astro: Event information header - QuickStats.astro: Statistics dashboard BENEFITS: - 98.7% reduction in main file size (7,623 → ~100 lines) - Dramatic improvement in maintainability and team collaboration - Component-level testing now possible - Reusable components across multiple features - Lazy loading support for better performance - Full TypeScript support with proper interfaces - Separation of concerns: business logic separated from UI 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
54
MANAGE_MODULARIZATION_PLAN.md
Normal file
54
MANAGE_MODULARIZATION_PLAN.md
Normal file
@@ -0,0 +1,54 @@
|
||||
# Event Management Page Modularization Plan
|
||||
|
||||
## Current State Analysis
|
||||
The `/src/pages/events/[id]/manage.astro` file is **7,623 lines** and **333KB** - too large for maintainability.
|
||||
|
||||
## Proposed Modular Structure
|
||||
|
||||
### 1. Core Page Structure
|
||||
- **`manage.astro`** (200-300 lines) - Main layout, navigation, tab structure
|
||||
- **`components/EventHeader.astro`** - Event title, actions, preview buttons
|
||||
- **`components/TabNavigation.astro`** - Tab switching UI
|
||||
|
||||
### 2. Tab Components (React Islands)
|
||||
- **`components/manage/TicketsTab.tsx`** - Ticket types management
|
||||
- **`components/manage/VenueTab.tsx`** - Seating maps and venue setup
|
||||
- **`components/manage/OrdersTab.tsx`** - Sales data and order management
|
||||
- **`components/manage/AttendeesTab.tsx`** - Attendee list and check-in
|
||||
- **`components/manage/PresaleTab.tsx`** - Presale codes management
|
||||
- **`components/manage/DiscountTab.tsx`** - Discount codes
|
||||
- **`components/manage/AddonsTab.tsx`** - Add-on items
|
||||
- **`components/manage/PrintedTab.tsx`** - Printed tickets
|
||||
- **`components/manage/SettingsTab.tsx`** - Event settings
|
||||
- **`components/manage/MarketingTab.tsx`** - Marketing kit generation
|
||||
- **`components/manage/PromotionsTab.tsx`** - Promotions and campaigns
|
||||
|
||||
### 3. Utility Libraries
|
||||
- **`lib/event-management.ts`** - Event data loading/updating
|
||||
- **`lib/ticket-management.ts`** - Ticket type operations
|
||||
- **`lib/seating-management.ts`** - Seating map operations
|
||||
- **`lib/sales-analytics.ts`** - Sales data processing
|
||||
- **`lib/marketing-kit.ts`** - Marketing content generation
|
||||
|
||||
### 4. Shared Components
|
||||
- **`components/modals/TicketTypeModal.tsx`** - Ticket type creation/editing
|
||||
- **`components/modals/SeatingMapModal.tsx`** - Seating map management
|
||||
- **`components/modals/EmbedCodeModal.tsx`** - Embed code display
|
||||
- **`components/tables/OrdersTable.tsx`** - Reusable orders table
|
||||
- **`components/tables/AttendeesTable.tsx`** - Reusable attendees table
|
||||
|
||||
### 5. Benefits
|
||||
- **Maintainability**: Each component ~200-500 lines
|
||||
- **Reusability**: Shared components across features
|
||||
- **Performance**: Lazy loading of tab content
|
||||
- **Testing**: Isolated component testing
|
||||
- **Collaboration**: Multiple developers can work simultaneously
|
||||
|
||||
### 6. Migration Strategy
|
||||
1. Extract utility functions to lib files
|
||||
2. Create shared modal components
|
||||
3. Convert each tab to React component
|
||||
4. Update main page to use new components
|
||||
5. Test each tab independently
|
||||
|
||||
Would you like me to proceed with this modularization plan?
|
||||
Reference in New Issue
Block a user