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>
2.4 KiB
2.4 KiB
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 structurecomponents/EventHeader.astro- Event title, actions, preview buttonscomponents/TabNavigation.astro- Tab switching UI
2. Tab Components (React Islands)
components/manage/TicketsTab.tsx- Ticket types managementcomponents/manage/VenueTab.tsx- Seating maps and venue setupcomponents/manage/OrdersTab.tsx- Sales data and order managementcomponents/manage/AttendeesTab.tsx- Attendee list and check-incomponents/manage/PresaleTab.tsx- Presale codes managementcomponents/manage/DiscountTab.tsx- Discount codescomponents/manage/AddonsTab.tsx- Add-on itemscomponents/manage/PrintedTab.tsx- Printed ticketscomponents/manage/SettingsTab.tsx- Event settingscomponents/manage/MarketingTab.tsx- Marketing kit generationcomponents/manage/PromotionsTab.tsx- Promotions and campaigns
3. Utility Libraries
lib/event-management.ts- Event data loading/updatinglib/ticket-management.ts- Ticket type operationslib/seating-management.ts- Seating map operationslib/sales-analytics.ts- Sales data processinglib/marketing-kit.ts- Marketing content generation
4. Shared Components
components/modals/TicketTypeModal.tsx- Ticket type creation/editingcomponents/modals/SeatingMapModal.tsx- Seating map managementcomponents/modals/EmbedCodeModal.tsx- Embed code displaycomponents/tables/OrdersTable.tsx- Reusable orders tablecomponents/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
- Extract utility functions to lib files
- Create shared modal components
- Convert each tab to React component
- Update main page to use new components
- Test each tab independently
Would you like me to proceed with this modularization plan?