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:
2025-07-08 18:30:26 -06:00
parent 23f190c7a7
commit e8b95231b7
76 changed files with 26728 additions and 7101 deletions

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