tyler/blackcanyontickets
1
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity
Files
76d27590fbd2441bf3c19c9d151119e82b0f4037
blackcanyontickets/ICON_REPLACEMENT_PLAN.md
dzinesco e8b95231b7 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>
2025-07-08 18:30:26 -06:00

4.4 KiB
Raw Blame History

Replace Color Emoji Icons with Outline SVG Icons

Current Issue

The tabs currently use color emoji icons (🎫, 🏛️, 📊, ⭐, 🎯, ⚙️) which need to be replaced with consistent outline SVG icons to match the design system.

Analysis

Current Icon Usage:

  • Tickets Tab: 🎫 (tickets emoji)
  • Venue Tab: 🏛️ (building emoji)
  • Orders Tab: 📊 (chart emoji)
  • Marketing Tab: ⭐ (star emoji) + already has outline star SVG on desktop
  • Promotions Tab: 🎯 (target emoji)
  • Settings Tab: ⚙️ (gear emoji)

Current Implementation:

  • Desktop tabs: Some have outline SVG icons (like Marketing), others just use text
  • Mobile tabs: All use emoji icons
  • Mobile dropdown: All use emoji icons
  • Tab name mapping object: All use emoji icons

Replacement Strategy

1. Create Consistent Outline Icons

Replace all emoji icons with outline SVG icons that match the existing design pattern:

  • Use fill="none" stroke="currentColor" for consistency
  • Use stroke-width="2" for proper line weight
  • Size as w-4 h-4 for desktop, w-5 h-5 for mobile if needed

2. Icon Mappings

Tickets (🎫 → ticket outline):

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
</svg>

Venue (🏛️ → building outline):

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
</svg>

Orders (📊 → chart outline):

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>

Marketing (⭐ → already has outline star, just needs consistency)

Promotions (🎯 → target outline):

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/>
</svg>

Settings (⚙️ → gear outline):

<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>

3. Implementation Areas

Update all locations:

  • Desktop tab buttons (add SVG icons to all tabs)
  • Mobile tab buttons (replace emoji with SVG)
  • Mobile dropdown options (replace emoji with SVG)
  • Tab name mapping object (remove emoji, keep text only)
  • Any other references to emoji icons in the file

4. Consistency Rules

  • All SVG icons should be w-4 h-4 with inline-block mr-1 for desktop
  • All should use fill="none" stroke="currentColor"
  • All should use stroke-width="2"
  • Remove all emoji characters from the interface

This will create a consistent, professional look that matches the existing outline icon design pattern already used in the Marketing tab.

Progress Checklist

  • Tickets tab desktop icon
  • Venue tab desktop icon
  • Orders tab desktop icon
  • Marketing tab desktop icon (already done)
  • Promotions tab desktop icon
  • Settings tab desktop icon
  • Mobile tab icons (all tabs)
  • Mobile dropdown icons (all tabs)
  • Tab name mapping object cleanup
  • Test all tabs display correctly
  • Verify responsive behavior
Reference in New Issue View Git Blame Copy Permalink