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>
54 lines
2.4 KiB
Markdown
54 lines
2.4 KiB
Markdown
# 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? |