# 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?