diff --git a/FUTURE_UPGRADES.md b/FUTURE_UPGRADES.md new file mode 100644 index 0000000..7296d12 --- /dev/null +++ b/FUTURE_UPGRADES.md @@ -0,0 +1,317 @@ +# Future Upgrades & Features + +This document outlines planned features and upgrades for the Black Canyon Tickets platform that will be implemented over time. + +--- + +## 🎫 **Priority 1: TicketPrinting.com Physical Ticket Ordering Integration** + +### Overview +Allow event organizers to order branded, pre-approved physical tickets for sponsors, VIPs, and comps directly through the Black Canyon Tickets website, using TicketPrinting.com as the print vendor. + +### Goal +Seamless physical ticket ordering while maintaining control over branding and order flow through BCT's corporate account. + +### Functional Requirements + +#### 1. Design Access & Limitation +- **Custom design interface** (or embedded TicketPrinting.com designer) +- **Editable fields for organizers:** + - Event name, date, location + - Ticket type (Sponsor, VIP, GA, etc.) + - Optional logo/image upload (with size/type validation) +- **Restrict to template-based layouts only** (no freeform design) + +#### 2. Order Flow +- All orders use **Black Canyon Tickets corporate account** at TicketPrinting.com +- **Organizer workflow:** + 1. Customizes ticket with allowed fields + 2. Selects quantity/shipping details + 3. Reviews mockup & confirms order +- **Optional BCT admin approval** before order submission +- **Confirmation screen** with final design, order details, and shipping info + +#### 3. Integration Options + +##### If TicketPrinting.com API Exists: +- **Direct integration:** + - Use API to render ticket designer within BCT portal + - Submit orders programmatically under BCT's account + - Sync order status and shipping updates to BCT backend + +##### If No API Exists: +- **Fallback approaches:** + - Embed design tool via iframe (if embeddable and restrictable) + - Build custom form-driven ticket builder in Astro + - Generate print-ready PDF/assets and submit via: + - Manual upload to TicketPrinting.com + - Automated email with order PDF and details + - Maintain internal approval queue (Supabase) + +### Technical Research Needed +- [ ] Does TicketPrinting.com offer an API or white-label/partner solution? +- [ ] Can iframe or custom UI control design limits? +- [ ] Should order approvals use webhooks or internal approval queue? +- [ ] Best backend stack for integration and PDF generation + +### Deliverables + +#### A. Integration Architecture (If API Exists) +- **Authentication:** Organizer logs in to BCT, not vendor +- **Designer UI:** Either embedded API designer or controlled BCT UI +- **Order Submission:** API call from BCT backend +- **Order Status:** Webhook or polling from TicketPrinting.com + +#### B. Fallback Solution (No API) +- **Custom design form** with restricted fields +- **Store order details** and design assets in Supabase +- **Admin approval step** (internal queue) +- **Submit to vendor** via manual upload or auto-email + +#### C. Organizer UX Flow +1. **Step 1:** Choose ticket template +2. **Step 2:** Enter event details (name, date, location, ticket type, upload logo) +3. **Step 3:** See live preview/mockup (enforce branding limits) +4. **Step 4:** Enter quantity and shipping info +5. **Step 5:** Review and confirm order +6. **Step 6:** Order status page (pending approval, submitted, shipped, etc.) + +#### D. Data Model + +```sql +-- Physical ticket orders table +CREATE TABLE physical_ticket_orders ( + id UUID PRIMARY KEY DEFAULT gen_random_uuid(), + event_id UUID REFERENCES events(id), + organizer_id UUID REFERENCES users(id), + organization_id UUID REFERENCES organizations(id), + template_id TEXT, + editable_fields JSONB, -- Event name, date, type, location, etc. + logo_url TEXT, + preview_url TEXT, + quantity INTEGER, + status TEXT CHECK (status IN ('draft', 'pending', 'approved', 'submitted', 'printing', 'shipped', 'delivered', 'cancelled')), + shipping_address JSONB, + submitted_at TIMESTAMP, + approved_by UUID REFERENCES users(id), + vendor_order_id TEXT, + tracking_number TEXT, + created_at TIMESTAMP DEFAULT NOW(), + updated_at TIMESTAMP DEFAULT NOW() +); +``` + +### Implementation Priority +**High Priority** - This feature adds significant value for premium events and sponsors. + +### Estimated Timeline +- **Research & Planning:** 1-2 weeks +- **MVP Development:** 4-6 weeks +- **Testing & Refinement:** 2-3 weeks + +--- + +## 🎯 **Priority 2: Advanced Analytics Dashboard** + +### Overview +Enhanced analytics and reporting for event organizers with real-time insights, revenue tracking, and attendee demographics. + +### Features +- **Real-time sales tracking** with live charts +- **Revenue forecasting** based on historical data +- **Attendee demographics** and geographic distribution +- **Marketing campaign effectiveness** tracking +- **Comparative event performance** metrics +- **Automated reporting** via email/PDF exports + +### Technical Requirements +- Integration with existing analytics system +- Real-time data visualization (Chart.js or D3.js) +- Export functionality (PDF, CSV, Excel) +- Dashboard customization per organization + +### Estimated Timeline +- **Development:** 6-8 weeks +- **Testing:** 2-3 weeks + +--- + +## 🎯 **Priority 3: Mobile Event Management App** + +### Overview +Dedicated mobile application for event organizers to manage events, scan tickets, and monitor sales on-the-go. + +### Features +- **Event dashboard** with key metrics +- **QR code scanning** for ticket validation +- **Push notifications** for sales milestones +- **Offline capability** for door scanning +- **Guest list management** and check-in +- **Revenue tracking** and reporting + +### Technical Requirements +- React Native or Flutter development +- Offline data synchronization +- Camera API integration for QR scanning +- Push notification service +- Secure authentication with existing BCT accounts + +### Estimated Timeline +- **Development:** 10-12 weeks +- **Testing & Store Approval:** 3-4 weeks + +--- + +## 🎯 **Priority 4: Event Collaboration Tools** + +### Overview +Tools for event organizers to collaborate with team members, vendors, and sponsors in planning and managing events. + +### Features +- **Team member invitations** with role-based permissions +- **Vendor management** with contact tracking +- **Sponsor portal** with branded access +- **Task management** and deadlines +- **Communication hub** with event-specific messaging +- **Document sharing** and version control + +### Technical Requirements +- Role-based access control (RBAC) system +- Real-time messaging (WebSockets or similar) +- File upload and management system +- Calendar integration +- Email notification system + +### Estimated Timeline +- **Development:** 8-10 weeks +- **Testing:** 2-3 weeks + +--- + +## 🎯 **Priority 5: Advanced Seating Management** + +### Overview +Enhanced seating management with interactive seat selection, accessibility options, and group booking capabilities. + +### Features +- **Interactive seat maps** with drag-and-drop editing +- **Accessibility seating** designation and booking +- **Group booking** with automatic seat assignment +- **Seat hold and release** functionality +- **Premium seating** with dynamic pricing +- **Waitlist management** for sold-out sections + +### Technical Requirements +- SVG or Canvas-based seat map rendering +- Real-time seat availability updates +- Complex pricing algorithms +- Inventory management enhancements + +### Estimated Timeline +- **Development:** 8-10 weeks +- **Testing:** 3-4 weeks + +--- + +## 🎯 **Priority 6: Marketing Automation Suite** + +### Overview +Automated marketing tools to help event organizers promote their events and increase ticket sales. + +### Features +- **Email campaign builder** with templates +- **Social media scheduling** and posting +- **Automated follow-up sequences** for cart abandonment +- **Referral program** management +- **Influencer tracking** and commission management +- **A/B testing** for marketing messages + +### Technical Requirements +- Integration with email service providers +- Social media API integrations +- Campaign performance tracking +- Referral code generation and tracking +- A/B testing framework + +### Estimated Timeline +- **Development:** 10-12 weeks +- **Testing:** 3-4 weeks + +--- + +## 🎯 **Priority 7: Multi-Language Support** + +### Overview +Internationalization support for events targeting diverse audiences or international markets. + +### Features +- **Multi-language ticket pages** with locale switching +- **Currency conversion** and international payments +- **Localized date/time formatting** +- **Right-to-left language support** +- **Translation management** for event organizers + +### Technical Requirements +- i18n framework implementation +- Currency conversion API integration +- Locale-specific formatting +- Translation file management +- Font and styling adjustments for different languages + +### Estimated Timeline +- **Development:** 6-8 weeks +- **Testing:** 2-3 weeks + +--- + +## 🎯 **Priority 8: API and Third-Party Integrations** + +### Overview +Public API and enhanced third-party integrations for extended functionality. + +### Features +- **Public REST API** for developers +- **Webhook system** for real-time updates +- **CRM integrations** (Salesforce, HubSpot) +- **Accounting software** integration (QuickBooks, Xero) +- **POS system** integration for on-site sales +- **Social media platform** integrations + +### Technical Requirements +- API documentation and developer portal +- Rate limiting and security measures +- OAuth 2.0 authentication +- Webhook delivery and retry logic +- Third-party API client libraries + +### Estimated Timeline +- **Development:** 8-10 weeks +- **Documentation & Testing:** 2-3 weeks + +--- + +## Implementation Notes + +### Development Priorities +1. **User Value Impact:** Features that directly improve organizer experience +2. **Revenue Generation:** Features that can increase platform revenue +3. **Technical Complexity:** Balance complexity with development resources +4. **Market Demand:** Features requested by current and potential customers + +### Technical Considerations +- **Scalability:** All features must handle growth in user base and event volume +- **Security:** Maintain high security standards for all new features +- **Performance:** Optimize for mobile and slow network connections +- **Accessibility:** Ensure WCAG compliance for all user-facing features +- **Integration:** Work seamlessly with existing BCT architecture + +### Success Metrics +- **User Adoption:** Percentage of organizers using new features +- **Revenue Impact:** Direct revenue increase from premium features +- **Support Reduction:** Decrease in support tickets through improved UX +- **Performance:** Page load times and system responsiveness +- **Customer Satisfaction:** User feedback and retention rates + +--- + +*This document will be updated as priorities change and new features are identified.* \ No newline at end of file diff --git a/ICON_REPLACEMENT_PLAN.md b/ICON_REPLACEMENT_PLAN.md new file mode 100644 index 0000000..e93e68d --- /dev/null +++ b/ICON_REPLACEMENT_PLAN.md @@ -0,0 +1,95 @@ +# 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 + + + +``` + +**Venue** (🏛️ → building outline): +```svg + + + +``` + +**Orders** (📊 → chart outline): +```svg + + + +``` + +**Marketing** (⭐ → already has outline star, just needs consistency) + +**Promotions** (🎯 → target outline): +```svg + + + +``` + +**Settings** (⚙️ → gear outline): +```svg + + + + +``` + +### 3. Implementation Areas +**Update all locations:** +- [x] Desktop tab buttons (add SVG icons to all tabs) +- [x] Mobile tab buttons (replace emoji with SVG) +- [x] Mobile dropdown options (replace emoji with SVG) +- [x] Tab name mapping object (remove emoji, keep text only) +- [x] 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 +- [x] Tickets tab desktop icon +- [x] Venue tab desktop icon +- [x] Orders tab desktop icon +- [x] Marketing tab desktop icon (already done) +- [x] Promotions tab desktop icon +- [x] Settings tab desktop icon +- [x] Mobile tab icons (all tabs) +- [x] Mobile dropdown icons (all tabs) +- [x] Tab name mapping object cleanup +- [x] Test all tabs display correctly +- [x] Verify responsive behavior \ No newline at end of file diff --git a/MANAGE_MODULARIZATION_PLAN.md b/MANAGE_MODULARIZATION_PLAN.md new file mode 100644 index 0000000..a958c7c --- /dev/null +++ b/MANAGE_MODULARIZATION_PLAN.md @@ -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? \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6fbcdec..00761e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,14 +27,17 @@ "qrcode": "^1.5.4", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-easy-crop": "^5.4.2", "resend": "^4.6.0", "stripe": "^18.3.0", "tailwindcss": "^4.1.11", + "uuid": "^11.1.0", "winston": "^3.17.0", "zod": "^3.25.75" }, "devDependencies": { "@types/qrcode": "^1.5.5", + "@types/uuid": "^10.0.0", "typescript": "^5.8.3" } }, @@ -3545,6 +3548,13 @@ "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", "license": "MIT" }, + "node_modules/@types/uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/ws": { "version": "8.18.1", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz", @@ -7499,6 +7509,12 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-wheel": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", + "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==", + "license": "BSD-3-Clause" + }, "node_modules/nth-check": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", @@ -8109,6 +8125,20 @@ "react": "^19.1.0" } }, + "node_modules/react-easy-crop": { + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.4.2.tgz", + "integrity": "sha512-V+GQUTkNWD8gK0mbZQfwTvcDxyCB4GS0cM36is8dAcvnsHY7DMEDP2D5IqHju55TOiCHwElJPVOYDgiu8BEiHQ==", + "license": "MIT", + "dependencies": { + "normalize-wheel": "^1.0.1", + "tslib": "^2.0.1" + }, + "peerDependencies": { + "react": ">=16.4.0", + "react-dom": ">=16.4.0" + } + }, "node_modules/react-promise-suspense": { "version": "0.3.4", "resolved": "https://registry.npmjs.org/react-promise-suspense/-/react-promise-suspense-0.3.4.tgz", @@ -9523,6 +9553,19 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "license": "MIT" }, + "node_modules/uuid": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz", + "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/esm/bin/uuid" + } + }, "node_modules/vfile": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", diff --git a/package.json b/package.json index 922e69f..ff68eef 100644 --- a/package.json +++ b/package.json @@ -31,14 +31,17 @@ "qrcode": "^1.5.4", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-easy-crop": "^5.4.2", "resend": "^4.6.0", "stripe": "^18.3.0", "tailwindcss": "^4.1.11", + "uuid": "^11.1.0", "winston": "^3.17.0", "zod": "^3.25.75" }, "devDependencies": { "@types/qrcode": "^1.5.5", + "@types/uuid": "^10.0.0", "typescript": "^5.8.3" } } diff --git a/setup-super-admins.js b/setup-super-admins.js new file mode 100644 index 0000000..3376522 --- /dev/null +++ b/setup-super-admins.js @@ -0,0 +1,99 @@ +#!/usr/bin/env node + +import { createClient } from '@supabase/supabase-js'; +import { config } from 'dotenv'; + +// Load environment variables +config(); + +const supabaseUrl = process.env.SUPABASE_URL || process.env.PUBLIC_SUPABASE_URL; +const supabaseServiceKey = process.env.SUPABASE_SERVICE_KEY; + +if (!supabaseUrl || !supabaseServiceKey) { + console.error('Missing required environment variables: SUPABASE_URL and SUPABASE_SERVICE_KEY'); + process.exit(1); +} + +const supabase = createClient(supabaseUrl, supabaseServiceKey); + +const superAdminEmails = [ + 'tmartinez@gmail.com', + 'kyle@touchofcarepcp.com' +]; + +async function setupSuperAdmins() { + console.log('Setting up super admin accounts...'); + + for (const email of superAdminEmails) { + try { + console.log(`\nProcessing: ${email}`); + + // Check if user exists + const { data: existingUser, error: userError } = await supabase + .from('users') + .select('id, email, role') + .eq('email', email) + .single(); + + if (userError && userError.code !== 'PGRST116') { + console.error(`Error checking user ${email}:`, userError); + continue; + } + + if (!existingUser) { + console.log(`User ${email} not found. Creating user record...`); + + // Create user record (they need to sign up first via Supabase Auth) + const { data: newUser, error: createError } = await supabase + .from('users') + .insert({ + email: email, + role: 'admin' + }) + .select() + .single(); + + if (createError) { + console.error(`Error creating user ${email}:`, createError); + continue; + } + + console.log(`✓ Created user record for ${email}`); + } else { + console.log(`User ${email} found. Current role: ${existingUser.role}`); + + // Make user admin using the database function + const { error: adminError } = await supabase.rpc('make_user_admin', { + user_email: email + }); + + if (adminError) { + console.error(`Error making ${email} admin:`, adminError); + continue; + } + + console.log(`✓ Made ${email} an admin`); + } + + // Verify the user is now an admin + const { data: updatedUser } = await supabase + .from('users') + .select('id, email, role') + .eq('email', email) + .single(); + + if (updatedUser) { + console.log(`✓ Verified: ${email} is now ${updatedUser.role}`); + } + + } catch (error) { + console.error(`Error processing ${email}:`, error); + } + } + + console.log('\nSuper admin setup complete!'); + console.log('\nNote: Users must still sign up via the frontend to create their Supabase Auth accounts.'); + console.log('Once they sign up, they will automatically have admin privileges.'); +} + +setupSuperAdmins().catch(console.error); \ No newline at end of file diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index 3ef4a74..33f44cc 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -1,4 +1,6 @@ import React, { useState, useEffect } from 'react'; +import { trendingAnalyticsService, TrendingEvent } from '../lib/analytics'; +import { geolocationService } from '../lib/geolocation'; interface Event { id: string; @@ -6,16 +8,82 @@ interface Event { start_time: string; venue: string; slug: string; + category?: string; + is_featured?: boolean; + image_url?: string; + distanceMiles?: number; + popularityScore?: number; } interface CalendarProps { events: Event[]; onEventClick?: (event: Event) => void; + showLocationFeatures?: boolean; + showTrending?: boolean; } -const Calendar: React.FC = ({ events, onEventClick }) => { +const Calendar: React.FC = ({ events, onEventClick, showLocationFeatures = false, showTrending = false }) => { const [currentDate, setCurrentDate] = useState(new Date()); - const [view, setView] = useState<'month' | 'week'>('month'); + const [view, setView] = useState<'month' | 'week' | 'list'>('month'); + const [trendingEvents, setTrendingEvents] = useState([]); + const [nearbyEvents, setNearbyEvents] = useState([]); + const [userLocation, setUserLocation] = useState<{lat: number, lng: number} | null>(null); + const [isMobile, setIsMobile] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + // Detect mobile screen size + useEffect(() => { + const checkMobile = () => { + setIsMobile(window.innerWidth < 768); + }; + checkMobile(); + window.addEventListener('resize', checkMobile); + return () => window.removeEventListener('resize', checkMobile); + }, []); + + // Get user location and trending events + useEffect(() => { + if (showLocationFeatures || showTrending) { + loadLocationAndTrending(); + } + }, [showLocationFeatures, showTrending]); + + const loadLocationAndTrending = async () => { + setIsLoading(true); + try { + // Get user location + const location = await geolocationService.requestLocationPermission(); + if (location) { + setUserLocation({lat: location.latitude, lng: location.longitude}); + + // Get trending events if enabled + if (showTrending) { + const trending = await trendingAnalyticsService.getTrendingEvents( + location.latitude, + location.longitude, + 50, + 10 + ); + setTrendingEvents(trending); + } + + // Get nearby events if enabled + if (showLocationFeatures) { + const nearby = await trendingAnalyticsService.getHotEventsInArea( + location.latitude, + location.longitude, + 25, + 8 + ); + setNearbyEvents(nearby); + } + } + } catch (error) { + console.error('Error loading location and trending:', error); + } finally { + setIsLoading(false); + } + }; const today = new Date(); const currentMonth = currentDate.getMonth(); @@ -66,6 +134,7 @@ const Calendar: React.FC = ({ events, onEventClick }) => { ]; const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + const dayNamesShort = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; const isToday = (day: number) => { const dayDate = new Date(currentYear, currentMonth, day); @@ -75,15 +144,15 @@ const Calendar: React.FC = ({ events, onEventClick }) => { return (
{/* Calendar Header */} -
+
-
-

- {monthNames[currentMonth]} {currentYear} +
+

+ {isMobile ? `${monthNames[currentMonth].slice(0, 3)} ${currentYear}` : `${monthNames[currentMonth]} ${currentYear}`}

@@ -94,23 +163,33 @@ const Calendar: React.FC = ({ events, onEventClick }) => {
+
@@ -120,7 +199,7 @@ const Calendar: React.FC = ({ events, onEventClick }) => { onClick={previousMonth} className="p-1 rounded-md hover:bg-gray-100" > - + @@ -128,7 +207,7 @@ const Calendar: React.FC = ({ events, onEventClick }) => { onClick={nextMonth} className="p-1 rounded-md hover:bg-gray-100" > - + @@ -138,103 +217,244 @@ const Calendar: React.FC = ({ events, onEventClick }) => {
{/* Calendar Grid */} -
- {/* Day Headers */} -
- {dayNames.map(day => ( -
- {day} -
- ))} -
- - {/* Calendar Days */} -
- {calendarDays.map((day, index) => { - if (day === null) { - return
; - } - - const dayEvents = getEventsForDay(day); - const isCurrentDay = isToday(day); - - return ( -
-
- {day} -
- - {/* Events for this day */} -
- {dayEvents.slice(0, 2).map(event => ( -
onEventClick?.(event)} - className="text-xs bg-indigo-100 text-indigo-800 rounded px-1 py-0.5 cursor-pointer hover:bg-indigo-200 truncate" - title={`${event.title} at ${event.venue}`} - > - {event.title} -
- ))} - - {dayEvents.length > 2 && ( -
- +{dayEvents.length - 2} more -
- )} -
+ {view === 'month' && ( +
+ {/* Day Headers */} +
+ {(isMobile ? dayNamesShort : dayNames).map((day, index) => ( +
+ {day}
- ); - })} -
-
+ ))} +
+ + {/* Calendar Days */} +
+ {calendarDays.map((day, index) => { + if (day === null) { + return
; + } + + const dayEvents = getEventsForDay(day); + const isCurrentDay = isToday(day); - {/* Upcoming Events List */} -
-

Upcoming Events

-
- {events - .filter(event => new Date(event.start_time) >= today) - .sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime()) - .slice(0, 5) - .map(event => { - const eventDate = new Date(event.start_time); return (
onEventClick?.(event)} - className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer" + key={day} + className={`aspect-square border rounded-lg p-1 hover:bg-gray-50 ${ + isCurrentDay ? 'bg-indigo-50 border-indigo-200' : 'border-gray-200' + }`} > -
-
{event.title}
-
{event.venue}
+
+ {day}
-
- {eventDate.toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - hour: 'numeric', - minute: '2-digit' - })} + + {/* Events for this day */} +
+ {dayEvents.slice(0, isMobile ? 1 : 2).map(event => ( +
onEventClick?.(event)} + className="text-xs bg-indigo-100 text-indigo-800 rounded px-1 py-0.5 cursor-pointer hover:bg-indigo-200 truncate" + title={`${event.title} at ${event.venue}`} + > + {isMobile ? event.title.slice(0, 8) + (event.title.length > 8 ? '...' : '') : event.title} +
+ ))} + + {dayEvents.length > (isMobile ? 1 : 2) && ( +
+ +{dayEvents.length - (isMobile ? 1 : 2)} more +
+ )}
); })} -
- - {events.filter(event => new Date(event.start_time) >= today).length === 0 && ( -
- No upcoming events
- )} -
+
+ )} + + {/* List View */} + {view === 'list' && ( +
+
+ {events + .filter(event => new Date(event.start_time) >= today) + .sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime()) + .map(event => { + const eventDate = new Date(event.start_time); + return ( +
onEventClick?.(event)} + className="flex items-center justify-between p-3 rounded-lg border hover:bg-gray-50 cursor-pointer" + > +
+
+
{event.title}
+ {event.is_featured && ( + + Featured + + )} +
+
+ {event.venue} + {event.distanceMiles && ( + • {event.distanceMiles.toFixed(1)} miles + )} +
+
+
+ {eventDate.toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: '2-digit' + })} +
+
+ ); + })} +
+
+ )} + + {/* Trending Events Section */} + {showTrending && trendingEvents.length > 0 && view !== 'list' && ( +
+
+

🔥 What's Hot

+ {userLocation && ( + Within 50 miles + )} +
+
+ {trendingEvents.slice(0, 4).map(event => ( +
onEventClick?.(event)} + className="flex items-center justify-between p-3 rounded-lg bg-gradient-to-r from-yellow-50 to-orange-50 border border-yellow-200 hover:border-yellow-300 cursor-pointer" + > +
+
+
{event.title}
+ {event.isFeature && ( + + ⭐ + + )} +
+
+ {event.venue} + {event.distanceMiles && ( + • {event.distanceMiles.toFixed(1)} mi + )} +
+
+ {event.ticketsSold} tickets sold +
+
+
+ {new Date(event.startTime).toLocaleDateString('en-US', { + month: 'short', + day: 'numeric' + })} +
+
+ ))} +
+
+ )} + + {/* Nearby Events Section */} + {showLocationFeatures && nearbyEvents.length > 0 && view !== 'list' && ( +
+
+

📍 Near You

+ {userLocation && ( + Within 25 miles + )} +
+
+ {nearbyEvents.slice(0, 3).map(event => ( +
onEventClick?.(event)} + className="flex items-center justify-between p-3 rounded-lg bg-blue-50 border border-blue-200 hover:border-blue-300 cursor-pointer" + > +
+
{event.title}
+
+ {event.venue} • {event.distanceMiles?.toFixed(1)} miles away +
+
+
+ {new Date(event.startTime).toLocaleDateString('en-US', { + month: 'short', + day: 'numeric' + })} +
+
+ ))} +
+
+ )} + + {/* Upcoming Events List */} + {view !== 'list' && ( +
+

Upcoming Events

+
+ {events + .filter(event => new Date(event.start_time) >= today) + .sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime()) + .slice(0, 5) + .map(event => { + const eventDate = new Date(event.start_time); + return ( +
onEventClick?.(event)} + className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer" + > +
+
{event.title}
+
{event.venue}
+
+
+ {eventDate.toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: '2-digit' + })} +
+
+ ); + })} +
+ + {events.filter(event => new Date(event.start_time) >= today).length === 0 && ( +
+ No upcoming events +
+ )} +
+ )} + + {/* Loading State */} + {isLoading && ( +
+
+
+ Loading location-based events... +
+
+ )}
); }; diff --git a/src/components/ComparisonSection.astro b/src/components/ComparisonSection.astro new file mode 100644 index 0000000..4877e4b --- /dev/null +++ b/src/components/ComparisonSection.astro @@ -0,0 +1,200 @@ +--- +// ComparisonSection.astro - Competitive advantage comparison section +--- + +
+ +
+
+ + +
+ +
+ +
+
+ Built by Event Professionals +
+ +

+ Why We're Better Than + + The Other Guys + +

+ +

+ Built by people who've actually run gates — not just coded them. + Experience real ticketing without the headaches. +

+
+ + +
+ + +
+
+
+ + + +
+

Built by Event Pros

+
+
+
+ ✅ US: + Created by actual event professionals who've worked ticket gates +
+
+ ❌ THEM: + Built by disconnected tech teams who've never run an event +
+
+
+ + +
+
+
+ + + +
+

Instant Payouts

+
+
+
+ ✅ US: + Stripe deposits go straight to you — no delays or fund holds +
+
+ ❌ THEM: + Hold your money for days or weeks before releasing funds +
+
+
+ + +
+
+
+ + + +
+

No Hidden Fees

+
+
+
+ ✅ US: + Flat $1.50 + 2.5% per ticket. Stripe's fee is separate and visible +
+
+ ❌ THEM: + Hidden platform fees, surprise charges, and confusing pricing +
+
+
+ + +
+
+
+ + + + +
+

Modern Technology

+
+
+
+ ✅ US: + Custom-built from scratch based on real-world event needs +
+
+ ❌ THEM: + Bloated, recycled platforms with outdated interfaces +
+
+
+ + +
+
+
+ + + +
+

Real Human Support

+
+
+
+ ✅ US: + Real humans help you before and during your event +
+
+ ❌ THEM: + Outsourced support desks and endless ticket systems +
+
+
+ + +
+
+
+ + + +
+

Rock-Solid Reliability

+
+
+
+ ✅ US: + Built for upscale events with enterprise-grade performance +
+
+ ❌ THEM: + Crashes during sales rushes when you need them most +
+
+
+ +
+ + + +
+
+ + Switch to Black Canyon + + + + + + Compare Fees + +
+

+ Ready to experience real ticketing? Join event professionals who've made the switch. +

+
+
+
+ + \ No newline at end of file diff --git a/src/components/EventHeader.astro b/src/components/EventHeader.astro new file mode 100644 index 0000000..953dfab --- /dev/null +++ b/src/components/EventHeader.astro @@ -0,0 +1,136 @@ +--- +interface Props { + eventId: string; +} + +const { eventId } = Astro.props; +--- + +
+
+
+
+

Loading...

+
+
+ + + + + -- +
+
+ + + + -- +
+
+

Loading event details...

+
+
+
+ + + + + + Preview Page + + + + + + + Scanner + + +
+
+
$0
+
Total Revenue
+
+
+
+
+
+ + \ No newline at end of file diff --git a/src/components/EventManagement.tsx b/src/components/EventManagement.tsx new file mode 100644 index 0000000..f266764 --- /dev/null +++ b/src/components/EventManagement.tsx @@ -0,0 +1,127 @@ +import { useState, useEffect } from 'react'; +import TabNavigation from './manage/TabNavigation'; +import TicketsTab from './manage/TicketsTab'; +import VenueTab from './manage/VenueTab'; +import OrdersTab from './manage/OrdersTab'; +import AttendeesTab from './manage/AttendeesTab'; +import PresaleTab from './manage/PresaleTab'; +import DiscountTab from './manage/DiscountTab'; +import AddonsTab from './manage/AddonsTab'; +import PrintedTab from './manage/PrintedTab'; +import SettingsTab from './manage/SettingsTab'; +import MarketingTab from './manage/MarketingTab'; +import PromotionsTab from './manage/PromotionsTab'; +import EmbedCodeModal from './modals/EmbedCodeModal'; + +interface EventManagementProps { + eventId: string; + organizationId: string; + eventSlug: string; +} + +export default function EventManagement({ eventId, organizationId, eventSlug }: EventManagementProps) { + const [activeTab, setActiveTab] = useState('tickets'); + const [showEmbedModal, setShowEmbedModal] = useState(false); + + const tabs = [ + { + id: 'tickets', + name: 'Tickets & Pricing', + icon: '🎫', + component: TicketsTab + }, + { + id: 'venue', + name: 'Venue & Seating', + icon: '🏛️', + component: VenueTab + }, + { + id: 'orders', + name: 'Orders & Sales', + icon: '📊', + component: OrdersTab + }, + { + id: 'attendees', + name: 'Attendees & Check-in', + icon: '👥', + component: AttendeesTab + }, + { + id: 'presale', + name: 'Presale Codes', + icon: '🏷️', + component: PresaleTab + }, + { + id: 'discount', + name: 'Discount Codes', + icon: '🎟️', + component: DiscountTab + }, + { + id: 'addons', + name: 'Add-ons & Extras', + icon: '📦', + component: AddonsTab + }, + { + id: 'printed', + name: 'Printed Tickets', + icon: '🖨️', + component: PrintedTab + }, + { + id: 'settings', + name: 'Event Settings', + icon: '⚙️', + component: SettingsTab + }, + { + id: 'marketing', + name: 'Marketing Kit', + icon: '📈', + component: MarketingTab + }, + { + id: 'promotions', + name: 'Promotions', + icon: '🎯', + component: PromotionsTab + } + ]; + + useEffect(() => { + // Set up embed code button listener + const embedBtn = document.getElementById('embed-code-btn'); + if (embedBtn) { + embedBtn.addEventListener('click', () => setShowEmbedModal(true)); + } + + return () => { + if (embedBtn) { + embedBtn.removeEventListener('click', () => setShowEmbedModal(true)); + } + }; + }, []); + + return ( + <> + + + setShowEmbedModal(false)} + eventId={eventId} + eventSlug={eventSlug} + /> + + ); +} \ No newline at end of file diff --git a/src/components/ImageUploadCropper.tsx b/src/components/ImageUploadCropper.tsx new file mode 100644 index 0000000..6b08b59 --- /dev/null +++ b/src/components/ImageUploadCropper.tsx @@ -0,0 +1,389 @@ +import React, { useState, useCallback, useRef, useEffect } from 'react'; +import Cropper from 'react-easy-crop'; +import type { Area } from 'react-easy-crop'; +import { supabase } from '../lib/supabase'; + +interface ImageUploadCropperProps { + currentImageUrl?: string; + onImageChange: (imageUrl: string | null) => void; + disabled?: boolean; +} + +interface CropData { + x: number; + y: number; + width: number; + height: number; +} + +const ASPECT_RATIO = 1.91; // 1200x628 recommended +const MIN_CROP_WIDTH = 600; +const MIN_CROP_HEIGHT = 314; +const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB before cropping +const MAX_FINAL_SIZE = 2 * 1024 * 1024; // 2MB after cropping +const ACCEPTED_TYPES = ['image/jpeg', 'image/png', 'image/webp']; + +const createImage = (url: string): Promise => + new Promise((resolve, reject) => { + const image = new Image(); + image.addEventListener('load', () => resolve(image)); + image.addEventListener('error', error => reject(error)); + image.setAttribute('crossOrigin', 'anonymous'); + image.src = url; + }); + +const getCroppedImg = async ( + imageSrc: string, + pixelCrop: Area, + fileName: string +): Promise<{ file: File; dataUrl: string }> => { + const image = await createImage(imageSrc); + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + if (!ctx) { + throw new Error('Could not get canvas context'); + } + + canvas.width = pixelCrop.width; + canvas.height = pixelCrop.height; + + ctx.drawImage( + image, + pixelCrop.x, + pixelCrop.y, + pixelCrop.width, + pixelCrop.height, + 0, + 0, + pixelCrop.width, + pixelCrop.height + ); + + return new Promise((resolve, reject) => { + canvas.toBlob( + (blob) => { + if (!blob) { + reject(new Error('Canvas is empty')); + return; + } + + const file = new File([blob], fileName, { + type: 'image/webp', + lastModified: Date.now(), + }); + + const reader = new FileReader(); + reader.onload = () => { + resolve({ + file, + dataUrl: reader.result as string + }); + }; + reader.onerror = reject; + reader.readAsDataURL(file); + }, + 'image/webp', + 0.85 // Compression quality + ); + }); +}; + +export default function ImageUploadCropper({ + currentImageUrl, + onImageChange, + disabled = false +}: ImageUploadCropperProps) { + const [imageSrc, setImageSrc] = useState(null); + const [crop, setCrop] = useState({ x: 0, y: 0 }); + const [zoom, setZoom] = useState(1); + const [croppedAreaPixels, setCroppedAreaPixels] = useState(null); + const [isUploading, setIsUploading] = useState(false); + const [error, setError] = useState(null); + const [showCropper, setShowCropper] = useState(false); + const [originalFileName, setOriginalFileName] = useState(''); + const fileInputRef = useRef(null); + + const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => { + setCroppedAreaPixels(croppedAreaPixels); + }, []); + + // Handle keyboard shortcuts + useEffect(() => { + const handleKeydown = (e: KeyboardEvent) => { + if (showCropper && e.key === 'Escape' && !isUploading) { + handleCropCancel(); + } + }; + + if (showCropper) { + document.addEventListener('keydown', handleKeydown); + return () => document.removeEventListener('keydown', handleKeydown); + } + }, [showCropper, isUploading]); + + const handleFileSelect = (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (!file) return; + + setError(null); + + // Validate file type + if (!ACCEPTED_TYPES.includes(file.type)) { + setError('Please select a JPG, PNG, or WebP image'); + return; + } + + // Validate file size + if (file.size > MAX_FILE_SIZE) { + setError('File size must be less than 10MB'); + return; + } + + setOriginalFileName(file.name); + const reader = new FileReader(); + reader.onload = () => { + setImageSrc(reader.result as string); + setShowCropper(true); + }; + reader.readAsDataURL(file); + }; + + const handleCropSave = async () => { + if (!imageSrc || !croppedAreaPixels) { + setError('Please select a crop area before saving'); + return; + } + + setIsUploading(true); + setError(null); + + try { + // Validate minimum crop dimensions + if (croppedAreaPixels.width < MIN_CROP_WIDTH || croppedAreaPixels.height < MIN_CROP_HEIGHT) { + throw new Error(`Crop area too small. Minimum size: ${MIN_CROP_WIDTH}×${MIN_CROP_HEIGHT}px`); + } + + console.log('Starting crop and upload process...'); + const { file, dataUrl } = await getCroppedImg(imageSrc, croppedAreaPixels, originalFileName); + console.log('Cropped image created, size:', file.size, 'bytes'); + + // Validate final file size + if (file.size > MAX_FINAL_SIZE) { + throw new Error('Compressed image is too large. Please crop a smaller area or use a different image.'); + } + + // Upload to Supabase Storage + const formData = new FormData(); + formData.append('file', file); + + // Get current session token + const { data: { session } } = await supabase.auth.getSession(); + + if (!session?.access_token) { + throw new Error('Authentication required. Please sign in again.'); + } + + console.log('Uploading to server...'); + const response = await fetch('/api/upload-event-image', { + method: 'POST', + body: formData, + headers: { + 'Authorization': `Bearer ${session.access_token}` + } + }); + + console.log('Upload response status:', response.status); + + if (!response.ok) { + const errorData = await response.json().catch(() => ({ error: 'Upload failed' })); + throw new Error(errorData.error || `Upload failed with status ${response.status}`); + } + + const { imageUrl } = await response.json(); + console.log('Upload successful, image URL:', imageUrl); + + onImageChange(imageUrl); + setShowCropper(false); + setImageSrc(null); + setCrop({ x: 0, y: 0 }); + setZoom(1); + setCroppedAreaPixels(null); + + } catch (error) { + console.error('Upload error:', error); + setError(error instanceof Error ? error.message : 'An error occurred'); + } finally { + setIsUploading(false); + } + }; + + const handleCropCancel = () => { + setShowCropper(false); + setImageSrc(null); + setError(null); + setCrop({ x: 0, y: 0 }); + setZoom(1); + setCroppedAreaPixels(null); + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } + }; + + const handleRemoveImage = () => { + onImageChange(null); + setError(null); + }; + + return ( +
+ {/* Current Image Preview */} + {currentImageUrl && !showCropper && ( +
+ Event image +
+ +
+
+ )} + + {/* File Input */} + {!currentImageUrl && !showCropper && ( +
+ + +

+ JPG, PNG, or WebP • Max 10MB • Recommended: 1200×628px +

+
+ )} + + {/* Replace Image Button */} + {currentImageUrl && !showCropper && ( + + )} + + {/* Cropper Modal */} + {showCropper && ( +
+
+
+

Crop Your Image

+ +
+ +
+ {imageSrc && ( + + )} +
+ + {/* Zoom Control */} +
+ + setZoom(Number(e.target.value))} + className="w-full" + disabled={isUploading} + /> +
+ + {/* Action Buttons */} +
+ + +
+
+
+ )} + + {/* Error Message */} + {error && ( +
+ {error} +
+ )} + + {/* Hidden file input for replace functionality */} + +
+ ); +} \ No newline at end of file diff --git a/src/components/LocationInput.tsx b/src/components/LocationInput.tsx new file mode 100644 index 0000000..56b969c --- /dev/null +++ b/src/components/LocationInput.tsx @@ -0,0 +1,288 @@ +import React, { useState, useEffect } from 'react'; +import { geolocationService, LocationData } from '../lib/geolocation'; + +interface LocationInputProps { + onLocationChange: (location: LocationData | null) => void; + initialLocation?: LocationData | null; + showRadius?: boolean; + defaultRadius?: number; + onRadiusChange?: (radius: number) => void; + className?: string; +} + +const LocationInput: React.FC = ({ + onLocationChange, + initialLocation = null, + showRadius = true, + defaultRadius = 50, + onRadiusChange, + className = '' +}) => { + const [location, setLocation] = useState(initialLocation); + const [radius, setRadius] = useState(defaultRadius); + const [addressInput, setAddressInput] = useState(''); + const [isLoadingGPS, setIsLoadingGPS] = useState(false); + const [isLoadingAddress, setIsLoadingAddress] = useState(false); + const [error, setError] = useState(null); + const [showAdvanced, setShowAdvanced] = useState(false); + + useEffect(() => { + if (initialLocation) { + setLocation(initialLocation); + } + }, [initialLocation]); + + const handleGPSLocation = async () => { + setIsLoadingGPS(true); + setError(null); + + try { + const gpsLocation = await geolocationService.getCurrentLocation(); + if (gpsLocation) { + setLocation(gpsLocation); + onLocationChange(gpsLocation); + setAddressInput(''); // Clear address input when GPS is used + } else { + // Fallback to IP geolocation + const ipLocation = await geolocationService.getLocationFromIP(); + if (ipLocation) { + setLocation(ipLocation); + onLocationChange(ipLocation); + setError('GPS not available, using approximate location'); + } else { + setError('Unable to determine your location'); + } + } + } catch (err) { + setError('Error getting location: ' + (err as Error).message); + } finally { + setIsLoadingGPS(false); + } + }; + + const handleAddressSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + if (!addressInput.trim()) return; + + setIsLoadingAddress(true); + setError(null); + + try { + const geocodedLocation = await geolocationService.geocodeAddress(addressInput); + if (geocodedLocation) { + setLocation(geocodedLocation); + onLocationChange(geocodedLocation); + } else { + setError('Unable to find that address'); + } + } catch (err) { + setError('Error geocoding address: ' + (err as Error).message); + } finally { + setIsLoadingAddress(false); + } + }; + + const handleRadiusChange = (newRadius: number) => { + setRadius(newRadius); + if (onRadiusChange) { + onRadiusChange(newRadius); + } + }; + + const clearLocation = () => { + setLocation(null); + setAddressInput(''); + onLocationChange(null); + geolocationService.clearCurrentLocation(); + }; + + const formatLocationDisplay = (loc: LocationData) => { + if (loc.city && loc.state) { + return `${loc.city}, ${loc.state}`; + } + return `${loc.latitude.toFixed(4)}, ${loc.longitude.toFixed(4)}`; + }; + + return ( +
+ {/* Current Location Display */} + {location && ( +
+
+
+
+ + + + + + Current Location + +
+

+ {formatLocationDisplay(location)} +

+ {location.source && ( +

+ Source: {location.source === 'gps' ? 'GPS' : location.source === 'ip_geolocation' ? 'IP Location' : 'Manual'} +

+ )} +
+ +
+
+ )} + + {/* Location Input Methods */} + {!location && ( +
+ {/* GPS Location Button */} + + + {/* Address Input */} +
+
+ or enter your location +
+
+
+ setAddressInput(e.target.value)} + placeholder="Enter city, state, or ZIP code" + className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" + disabled={isLoadingAddress} + /> + +
+
+
+
+ )} + + {/* Radius Selector */} + {showRadius && location && ( +
+ + handleRadiusChange(Number(e.target.value))} + className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" + /> +
+ 5 mi + 50 mi + 100 mi +
+
+ )} + + {/* Advanced Options */} + {location && ( +
+ + + {showAdvanced && ( +
+
+
Coordinates
+
+ Latitude: {location.latitude.toFixed(6)}
+ Longitude: {location.longitude.toFixed(6)} +
+
+ + {location.accuracy && ( +
+
Accuracy
+
+ ±{location.accuracy.toFixed(0)} meters +
+
+ )} + + +
+ )} +
+ )} + + {/* Error Display */} + {error && ( +
+
+ + + + {error} +
+
+ )} + + {/* Helper Text */} + {!location && !error && ( +
+ We'll show you events near your location. Your location data is only used for this search and is not stored. +
+ )} +
+ ); +}; + +export default LocationInput; \ No newline at end of file diff --git a/src/components/PublicHeader.astro b/src/components/PublicHeader.astro index e5431d4..fd770a9 100644 --- a/src/components/PublicHeader.astro +++ b/src/components/PublicHeader.astro @@ -12,7 +12,8 @@ const { showCalendarNav = false } = Astro.props;
- + + Black Canyon Tickets Black Canyon Tickets @@ -57,10 +58,10 @@ const { showCalendarNav = false } = Astro.props; )} - + Login - + Create Events
@@ -89,7 +90,7 @@ const { showCalendarNav = false } = Astro.props;
- + Organizer Login
diff --git a/src/components/QuickStats.astro b/src/components/QuickStats.astro new file mode 100644 index 0000000..a855944 --- /dev/null +++ b/src/components/QuickStats.astro @@ -0,0 +1,124 @@ +--- +interface Props { + eventId: string; +} + +const { eventId } = Astro.props; +--- + +
+
+
+
+

Tickets Sold

+

0

+
+
+ + + +
+
+
+ +
+
+
+

Available

+

--

+
+
+ + + +
+
+
+ +
+
+
+

Check-ins

+

0

+
+
+ + + +
+
+
+ +
+
+
+

Net Revenue

+

$0

+
+
+ + + +
+
+
+
+ + \ No newline at end of file diff --git a/src/components/QuickTicketPurchase.tsx b/src/components/QuickTicketPurchase.tsx new file mode 100644 index 0000000..cd30be0 --- /dev/null +++ b/src/components/QuickTicketPurchase.tsx @@ -0,0 +1,311 @@ +import React, { useState, useEffect } from 'react'; +import { supabase } from '../lib/supabase'; + +interface TicketType { + id: string; + name: string; + price: number; + quantity_available: number; + quantity_sold: number; + description?: string; + is_active: boolean; +} + +interface Event { + id: string; + title: string; + venue: string; + start_time: string; + slug: string; +} + +interface QuickTicketPurchaseProps { + event: Event; + onClose: () => void; + onPurchaseStart: (ticketTypeId: string, quantity: number) => void; + className?: string; +} + +const QuickTicketPurchase: React.FC = ({ + event, + onClose, + onPurchaseStart, + className = '' +}) => { + const [ticketTypes, setTicketTypes] = useState([]); + const [selectedTicketType, setSelectedTicketType] = useState(null); + const [quantity, setQuantity] = useState(1); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + loadTicketTypes(); + }, [event.id]); + + const loadTicketTypes = async () => { + setIsLoading(true); + setError(null); + + try { + const { data, error } = await supabase + .from('ticket_types') + .select('*') + .eq('event_id', event.id) + .eq('is_active', true) + .order('price'); + + if (error) throw error; + + const activeTicketTypes = data?.filter(tt => + (tt.quantity_available === null || tt.quantity_available > (tt.quantity_sold || 0)) + ) || []; + + setTicketTypes(activeTicketTypes); + + // Auto-select first available ticket type + if (activeTicketTypes.length > 0) { + setSelectedTicketType(activeTicketTypes[0].id); + } + } catch (err) { + console.error('Error loading ticket types:', err); + setError('Failed to load ticket options'); + } finally { + setIsLoading(false); + } + }; + + const getAvailableQuantity = (ticketType: TicketType) => { + if (ticketType.quantity_available === null) return 999; // Unlimited + return ticketType.quantity_available - (ticketType.quantity_sold || 0); + }; + + const handlePurchase = () => { + if (!selectedTicketType) return; + + onPurchaseStart(selectedTicketType, quantity); + }; + + const formatPrice = (price: number) => { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' + }).format(price); + }; + + const formatEventTime = (startTime: string) => { + const date = new Date(startTime); + return date.toLocaleDateString('en-US', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: '2-digit' + }); + }; + + const selectedTicket = ticketTypes.find(tt => tt.id === selectedTicketType); + const totalPrice = selectedTicket ? selectedTicket.price * quantity : 0; + const availableQuantity = selectedTicket ? getAvailableQuantity(selectedTicket) : 0; + + return ( +
+
+ {/* Header */} +
+

Quick Purchase

+ +
+ + {/* Event Info */} +
+

{event.title}

+
+
+ + + + + {event.venue} +
+
+ + + + {formatEventTime(event.start_time)} +
+
+
+ + {/* Content */} +
+ {isLoading && ( +
+
+

Loading ticket options...

+
+ )} + + {error && ( +
+
+ + + + {error} +
+
+ )} + + {!isLoading && !error && ( + <> + {ticketTypes.length === 0 ? ( +
+ + + +

No tickets available

+

+ This event is currently sold out or tickets are not yet on sale. +

+
+ ) : ( + <> + {/* Ticket Type Selection */} +
+ +
+ {ticketTypes.map(ticketType => { + const available = getAvailableQuantity(ticketType); + const isUnavailable = available <= 0; + + return ( +
!isUnavailable && setSelectedTicketType(ticketType.id)} + > +
+
+ setSelectedTicketType(ticketType.id)} + disabled={isUnavailable} + className="mr-3" + /> +
+
{ticketType.name}
+ {ticketType.description && ( +
{ticketType.description}
+ )} +
+
+
+
+ {formatPrice(ticketType.price)} +
+
+ {isUnavailable ? 'Sold Out' : + available < 10 ? `${available} left` : 'Available'} +
+
+
+
+ ); + })} +
+
+ + {/* Quantity Selection */} + {selectedTicket && ( +
+ +
+ + {quantity} + +
+

+ Max {availableQuantity} tickets available +

+
+ )} + + {/* Total */} + {selectedTicket && ( +
+
+ Total + + {formatPrice(totalPrice)} + +
+
+ {quantity} × {selectedTicket.name} @ {formatPrice(selectedTicket.price)} +
+
+ )} + + )} + + )} +
+ + {/* Footer */} + {!isLoading && !error && ticketTypes.length > 0 && ( +
+ + +
+ )} +
+
+ ); +}; + +export default QuickTicketPurchase; \ No newline at end of file diff --git a/src/components/WhatsHotEvents.tsx b/src/components/WhatsHotEvents.tsx new file mode 100644 index 0000000..5d5dfff --- /dev/null +++ b/src/components/WhatsHotEvents.tsx @@ -0,0 +1,285 @@ +import React, { useState, useEffect } from 'react'; +import { TrendingEvent, trendingAnalyticsService } from '../lib/analytics'; +import { geolocationService, LocationData } from '../lib/geolocation'; + +interface WhatsHotEventsProps { + userLocation?: LocationData | null; + radius?: number; + limit?: number; + onEventClick?: (event: TrendingEvent) => void; + className?: string; +} + +const WhatsHotEvents: React.FC = ({ + userLocation, + radius = 50, + limit = 8, + onEventClick, + className = '' +}) => { + const [trendingEvents, setTrendingEvents] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + loadTrendingEvents(); + }, [userLocation, radius, limit]); + + const loadTrendingEvents = async () => { + setIsLoading(true); + setError(null); + + try { + let lat = userLocation?.latitude; + let lng = userLocation?.longitude; + + // If no user location provided, try to get IP location + if (!lat || !lng) { + const ipLocation = await geolocationService.getLocationFromIP(); + if (ipLocation) { + lat = ipLocation.latitude; + lng = ipLocation.longitude; + } + } + + const trending = await trendingAnalyticsService.getTrendingEvents( + lat, + lng, + radius, + limit + ); + + setTrendingEvents(trending); + } catch (err) { + setError('Failed to load trending events'); + console.error('Error loading trending events:', err); + } finally { + setIsLoading(false); + } + }; + + const handleEventClick = (event: TrendingEvent) => { + // Track the click event + trendingAnalyticsService.trackEvent({ + eventId: event.eventId, + metricType: 'page_view', + sessionId: sessionStorage.getItem('sessionId') || 'anonymous', + locationData: userLocation ? { + latitude: userLocation.latitude, + longitude: userLocation.longitude, + city: userLocation.city, + state: userLocation.state + } : undefined + }); + + if (onEventClick) { + onEventClick(event); + } else { + // Navigate to event page + window.location.href = `/e/${event.slug}`; + } + }; + + const formatEventTime = (startTime: string) => { + const date = new Date(startTime); + const now = new Date(); + const diffTime = date.getTime() - now.getTime(); + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + + if (diffDays === 0) { + return 'Today'; + } else if (diffDays === 1) { + return 'Tomorrow'; + } else if (diffDays <= 7) { + return `${diffDays} days`; + } else { + return date.toLocaleDateString('en-US', { + month: 'short', + day: 'numeric' + }); + } + }; + + const getPopularityBadge = (score: number) => { + if (score >= 100) return { text: 'Super Hot', color: 'bg-red-500' }; + if (score >= 50) return { text: 'Hot', color: 'bg-orange-500' }; + if (score >= 25) return { text: 'Trending', color: 'bg-yellow-500' }; + return { text: 'Popular', color: 'bg-blue-500' }; + }; + + if (isLoading) { + return ( +
+
+
+ Loading hot events... +
+
+ ); + } + + if (error) { + return ( +
+
+ + + +

Unable to load events

+

{error}

+ +
+
+ ); + } + + if (trendingEvents.length === 0) { + return ( +
+
+ + + +

No trending events found

+

+ Try expanding your search radius or check back later +

+
+
+ ); + } + + return ( +
+ {/* Header */} +
+
+
+
🔥
+

What's Hot

+
+ {userLocation && ( + + Within {radius} miles + + )} +
+
+ + {/* Events Grid */} +
+
+ {trendingEvents.map((event, index) => { + const popularityBadge = getPopularityBadge(event.popularityScore); + return ( +
handleEventClick(event)} + className="group cursor-pointer bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors duration-200 border border-gray-200 hover:border-gray-300 relative overflow-hidden" + > + {/* Popularity Badge */} +
+ {popularityBadge.text} +
+ + {/* Event Image */} + {event.imageUrl && ( +
+ {event.title} +
+ )} + + {/* Event Content */} +
+
+

+ {event.title} +

+
+ +
+
+ + + + + {event.venue} +
+ + {event.distanceMiles && ( +
+ + + + {event.distanceMiles.toFixed(1)} miles away +
+ )} + +
+ + + + {formatEventTime(event.startTime)} +
+
+ + {/* Event Stats */} +
+
+
+ + + + + {event.viewCount || 0} +
+
+ + + + {event.ticketsSold} +
+
+ + {event.isFeature && ( +
+ + + + Featured +
+ )} +
+
+
+ ); + })} +
+ + {/* View More Button */} +
+ +
+
+
+ ); +}; + +export default WhatsHotEvents; \ No newline at end of file diff --git a/src/components/__tests__/modular-components.test.ts b/src/components/__tests__/modular-components.test.ts new file mode 100644 index 0000000..540c073 --- /dev/null +++ b/src/components/__tests__/modular-components.test.ts @@ -0,0 +1,142 @@ +/** + * Test file to verify modular components structure + * This validates that all components are properly exported and structured + */ + +import { describe, it, expect } from 'vitest'; + +describe('Modular Components Structure', () => { + it('should have all required utility libraries', async () => { + // Test utility libraries exist and export expected functions + const eventManagement = await import('../../../lib/event-management'); + const ticketManagement = await import('../../../lib/ticket-management'); + const seatingManagement = await import('../../../lib/seating-management'); + const salesAnalytics = await import('../../../lib/sales-analytics'); + const marketingKit = await import('../../../lib/marketing-kit'); + + // Event Management + expect(eventManagement.loadEventData).toBeDefined(); + expect(eventManagement.loadEventStats).toBeDefined(); + expect(eventManagement.updateEventData).toBeDefined(); + expect(eventManagement.formatEventDate).toBeDefined(); + expect(eventManagement.formatCurrency).toBeDefined(); + + // Ticket Management + expect(ticketManagement.loadTicketTypes).toBeDefined(); + expect(ticketManagement.createTicketType).toBeDefined(); + expect(ticketManagement.updateTicketType).toBeDefined(); + expect(ticketManagement.deleteTicketType).toBeDefined(); + expect(ticketManagement.toggleTicketTypeStatus).toBeDefined(); + expect(ticketManagement.loadTicketSales).toBeDefined(); + expect(ticketManagement.checkInTicket).toBeDefined(); + expect(ticketManagement.refundTicket).toBeDefined(); + + // Seating Management + expect(seatingManagement.loadSeatingMaps).toBeDefined(); + expect(seatingManagement.createSeatingMap).toBeDefined(); + expect(seatingManagement.updateSeatingMap).toBeDefined(); + expect(seatingManagement.deleteSeatingMap).toBeDefined(); + expect(seatingManagement.applySeatingMapToEvent).toBeDefined(); + expect(seatingManagement.generateInitialLayout).toBeDefined(); + expect(seatingManagement.generateTheaterLayout).toBeDefined(); + expect(seatingManagement.generateReceptionLayout).toBeDefined(); + expect(seatingManagement.generateConcertHallLayout).toBeDefined(); + expect(seatingManagement.generateGeneralLayout).toBeDefined(); + + // Sales Analytics + expect(salesAnalytics.loadSalesData).toBeDefined(); + expect(salesAnalytics.calculateSalesMetrics).toBeDefined(); + expect(salesAnalytics.generateTimeSeries).toBeDefined(); + expect(salesAnalytics.generateTicketTypeBreakdown).toBeDefined(); + expect(salesAnalytics.exportSalesData).toBeDefined(); + expect(salesAnalytics.generateSalesReport).toBeDefined(); + + // Marketing Kit + expect(marketingKit.loadMarketingKit).toBeDefined(); + expect(marketingKit.generateMarketingKit).toBeDefined(); + expect(marketingKit.generateSocialMediaContent).toBeDefined(); + expect(marketingKit.generateEmailTemplate).toBeDefined(); + expect(marketingKit.generateFlyerData).toBeDefined(); + expect(marketingKit.copyToClipboard).toBeDefined(); + expect(marketingKit.downloadAsset).toBeDefined(); + }); + + it('should have all required shared modal components', async () => { + // Test that modal components exist and are properly structured + const TicketTypeModal = await import('../modals/TicketTypeModal'); + const SeatingMapModal = await import('../modals/SeatingMapModal'); + const EmbedCodeModal = await import('../modals/EmbedCodeModal'); + + expect(TicketTypeModal.default).toBeDefined(); + expect(SeatingMapModal.default).toBeDefined(); + expect(EmbedCodeModal.default).toBeDefined(); + }); + + it('should have all required shared table components', async () => { + // Test that table components exist and are properly structured + const OrdersTable = await import('../tables/OrdersTable'); + const AttendeesTable = await import('../tables/AttendeesTable'); + + expect(OrdersTable.default).toBeDefined(); + expect(AttendeesTable.default).toBeDefined(); + }); + + it('should have all required tab components', async () => { + // Test that all tab components exist and are properly structured + const TicketsTab = await import('../manage/TicketsTab'); + const VenueTab = await import('../manage/VenueTab'); + const OrdersTab = await import('../manage/OrdersTab'); + const AttendeesTab = await import('../manage/AttendeesTab'); + const PresaleTab = await import('../manage/PresaleTab'); + const DiscountTab = await import('../manage/DiscountTab'); + const AddonsTab = await import('../manage/AddonsTab'); + const PrintedTab = await import('../manage/PrintedTab'); + const SettingsTab = await import('../manage/SettingsTab'); + const MarketingTab = await import('../manage/MarketingTab'); + const PromotionsTab = await import('../manage/PromotionsTab'); + + expect(TicketsTab.default).toBeDefined(); + expect(VenueTab.default).toBeDefined(); + expect(OrdersTab.default).toBeDefined(); + expect(AttendeesTab.default).toBeDefined(); + expect(PresaleTab.default).toBeDefined(); + expect(DiscountTab.default).toBeDefined(); + expect(AddonsTab.default).toBeDefined(); + expect(PrintedTab.default).toBeDefined(); + expect(SettingsTab.default).toBeDefined(); + expect(MarketingTab.default).toBeDefined(); + expect(PromotionsTab.default).toBeDefined(); + }); + + it('should have main orchestration components', async () => { + // Test that main components exist + const TabNavigation = await import('../manage/TabNavigation'); + const EventManagement = await import('../EventManagement'); + + expect(TabNavigation.default).toBeDefined(); + expect(EventManagement.default).toBeDefined(); + }); + + it('should validate TypeScript interfaces', () => { + // Test that interfaces are properly structured + expect(true).toBe(true); // This would be expanded with actual interface validation + }); +}); + +describe('Component Integration', () => { + it('should have consistent prop interfaces', () => { + // Test that all components have consistent prop interfaces + // This would be expanded with actual prop validation + expect(true).toBe(true); + }); + + it('should handle error states properly', () => { + // Test that error handling is consistent across components + expect(true).toBe(true); + }); + + it('should have proper loading states', () => { + // Test that loading states are properly implemented + expect(true).toBe(true); + }); +}); \ No newline at end of file diff --git a/src/components/manage/AddonsTab.tsx b/src/components/manage/AddonsTab.tsx new file mode 100644 index 0000000..3bd7034 --- /dev/null +++ b/src/components/manage/AddonsTab.tsx @@ -0,0 +1,363 @@ +import { useState, useEffect } from 'react'; +import { createClient } from '@supabase/supabase-js'; +import { formatCurrency } from '../../lib/event-management'; + +const supabase = createClient( + import.meta.env.PUBLIC_SUPABASE_URL, + import.meta.env.PUBLIC_SUPABASE_ANON_KEY +); + +interface Addon { + id: string; + name: string; + description: string; + price_cents: number; + category: string; + is_active: boolean; + organization_id: string; +} + +interface EventAddon { + id: string; + event_id: string; + addon_id: string; + is_active: boolean; + addons: Addon; +} + +interface AddonsTabProps { + eventId: string; + organizationId: string; +} + +export default function AddonsTab({ eventId, organizationId }: AddonsTabProps) { + const [availableAddons, setAvailableAddons] = useState([]); + const [eventAddons, setEventAddons] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + loadData(); + }, [eventId, organizationId]); + + const loadData = async () => { + setLoading(true); + try { + // Load available addons for the organization + const { data: addonsData, error: addonsError } = await supabase + .from('addons') + .select('*') + .eq('organization_id', organizationId) + .eq('is_active', true) + .order('category', { ascending: true }); + + if (addonsError) throw addonsError; + + // Load event-specific addons + const { data: eventAddonsData, error: eventAddonsError } = await supabase + .from('event_addons') + .select(` + id, + event_id, + addon_id, + is_active, + addons ( + id, + name, + description, + price_cents, + category, + is_active, + organization_id + ) + `) + .eq('event_id', eventId); + + if (eventAddonsError) throw eventAddonsError; + + setAvailableAddons(addonsData || []); + setEventAddons(eventAddonsData || []); + } catch (error) { + console.error('Error loading addons:', error); + } finally { + setLoading(false); + } + }; + + const handleAddAddon = async (addon: Addon) => { + try { + const { data, error } = await supabase + .from('event_addons') + .insert({ + event_id: eventId, + addon_id: addon.id, + is_active: true + }) + .select(` + id, + event_id, + addon_id, + is_active, + addons ( + id, + name, + description, + price_cents, + category, + is_active, + organization_id + ) + `) + .single(); + + if (error) throw error; + + setEventAddons(prev => [...prev, data]); + } catch (error) { + console.error('Error adding addon:', error); + } + }; + + const handleRemoveAddon = async (eventAddon: EventAddon) => { + try { + const { error } = await supabase + .from('event_addons') + .delete() + .eq('id', eventAddon.id); + + if (error) throw error; + + setEventAddons(prev => prev.filter(ea => ea.id !== eventAddon.id)); + } catch (error) { + console.error('Error removing addon:', error); + } + }; + + const handleToggleAddon = async (eventAddon: EventAddon) => { + try { + const { error } = await supabase + .from('event_addons') + .update({ is_active: !eventAddon.is_active }) + .eq('id', eventAddon.id); + + if (error) throw error; + + setEventAddons(prev => prev.map(ea => + ea.id === eventAddon.id ? { ...ea, is_active: !ea.is_active } : ea + )); + } catch (error) { + console.error('Error toggling addon:', error); + } + }; + + const getCategoryIcon = (category: string) => { + switch (category.toLowerCase()) { + case 'merchandise': + return ( + + + + ); + case 'food': + return ( + + + + ); + case 'drink': + return ( + + + + ); + case 'service': + return ( + + + + ); + default: + return ( + + + + ); + } + }; + + const groupByCategory = (addons: Addon[]) => { + return addons.reduce((acc, addon) => { + const category = addon.category || 'Other'; + if (!acc[category]) acc[category] = []; + acc[category].push(addon); + return acc; + }, {} as Record); + }; + + const isAddonAdded = (addon: Addon) => { + return eventAddons.some(ea => ea.addon_id === addon.id); + }; + + const getEventAddon = (addon: Addon) => { + return eventAddons.find(ea => ea.addon_id === addon.id); + }; + + const groupedAvailableAddons = groupByCategory(availableAddons); + const groupedEventAddons = groupByCategory(eventAddons.map(ea => ea.addons)); + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

Add-ons & Extras

+
+ +
+ {/* Current Add-ons */} +
+

Current Add-ons

+ + {eventAddons.length === 0 ? ( +
+ + + +

No add-ons added to this event yet

+

Select from available add-ons to get started

+
+ ) : ( +
+ {Object.entries(groupedEventAddons).map(([category, addons]) => ( +
+
+
+ {getCategoryIcon(category)} +
+

{category}

+
+ +
+ {addons.map((addon) => { + const eventAddon = getEventAddon(addon); + return ( +
+
+
+
{addon.name}
+ + {eventAddon?.is_active ? 'Active' : 'Inactive'} + +
+ {addon.description && ( +
{addon.description}
+ )} +
+
+
{formatCurrency(addon.price_cents)}
+
+ + +
+
+
+ ); + })} +
+
+ ))} +
+ )} +
+ + {/* Available Add-ons */} +
+

Available Add-ons

+ + {availableAddons.length === 0 ? ( +
+ + + +

No add-ons available

+

Create add-ons in your organization settings

+
+ ) : ( +
+ {Object.entries(groupedAvailableAddons).map(([category, addons]) => ( +
+
+
+ {getCategoryIcon(category)} +
+

{category}

+
+ +
+ {addons.map((addon) => ( +
+
+
{addon.name}
+ {addon.description && ( +
{addon.description}
+ )} +
+
+
{formatCurrency(addon.price_cents)}
+ {isAddonAdded(addon) ? ( + + Added + + ) : ( + + )} +
+
+ ))} +
+
+ ))} +
+ )} +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/manage/AttendeesTab.tsx b/src/components/manage/AttendeesTab.tsx new file mode 100644 index 0000000..4929b54 --- /dev/null +++ b/src/components/manage/AttendeesTab.tsx @@ -0,0 +1,406 @@ +import { useState, useEffect } from 'react'; +import { loadSalesData, type SalesData } from '../../lib/sales-analytics'; +import { checkInTicket, refundTicket } from '../../lib/ticket-management'; +import { formatCurrency } from '../../lib/event-management'; +import AttendeesTable from '../tables/AttendeesTable'; + +interface AttendeeData { + email: string; + name: string; + ticketCount: number; + totalSpent: number; + checkedInCount: number; + tickets: SalesData[]; +} + +interface AttendeesTabProps { + eventId: string; +} + +export default function AttendeesTab({ eventId }: AttendeesTabProps) { + const [orders, setOrders] = useState([]); + const [attendees, setAttendees] = useState([]); + const [searchTerm, setSearchTerm] = useState(''); + const [selectedAttendee, setSelectedAttendee] = useState(null); + const [showAttendeeDetails, setShowAttendeeDetails] = useState(false); + const [checkInFilter, setCheckInFilter] = useState<'all' | 'checked_in' | 'not_checked_in'>('all'); + const [loading, setLoading] = useState(true); + + useEffect(() => { + loadData(); + }, [eventId]); + + useEffect(() => { + processAttendees(); + }, [orders, searchTerm, checkInFilter]); + + const loadData = async () => { + setLoading(true); + try { + const ordersData = await loadSalesData(eventId); + setOrders(ordersData); + } catch (error) { + console.error('Error loading attendees data:', error); + } finally { + setLoading(false); + } + }; + + const processAttendees = () => { + const attendeeMap = new Map(); + + orders.forEach(order => { + const existing = attendeeMap.get(order.customer_email) || { + email: order.customer_email, + name: order.customer_name, + ticketCount: 0, + totalSpent: 0, + checkedInCount: 0, + tickets: [] + }; + + existing.tickets.push(order); + if (order.status === 'confirmed') { + existing.ticketCount += 1; + existing.totalSpent += order.price_paid; + if (order.checked_in) { + existing.checkedInCount += 1; + } + } + + attendeeMap.set(order.customer_email, existing); + }); + + let processedAttendees = Array.from(attendeeMap.values()); + + // Apply search filter + if (searchTerm) { + const term = searchTerm.toLowerCase(); + processedAttendees = processedAttendees.filter(attendee => + attendee.name.toLowerCase().includes(term) || + attendee.email.toLowerCase().includes(term) + ); + } + + // Apply check-in filter + if (checkInFilter === 'checked_in') { + processedAttendees = processedAttendees.filter(attendee => + attendee.checkedInCount === attendee.ticketCount && attendee.ticketCount > 0 + ); + } else if (checkInFilter === 'not_checked_in') { + processedAttendees = processedAttendees.filter(attendee => + attendee.checkedInCount === 0 && attendee.ticketCount > 0 + ); + } + + setAttendees(processedAttendees); + }; + + const handleViewAttendee = (attendee: AttendeeData) => { + setSelectedAttendee(attendee); + setShowAttendeeDetails(true); + }; + + const handleCheckInAttendee = async (attendee: AttendeeData) => { + const unCheckedTickets = attendee.tickets.filter(ticket => + !ticket.checked_in && ticket.status === 'confirmed' + ); + + if (unCheckedTickets.length === 0) return; + + const ticket = unCheckedTickets[0]; + const success = await checkInTicket(ticket.id); + + if (success) { + setOrders(prev => prev.map(order => + order.id === ticket.id ? { ...order, checked_in: true } : order + )); + } + }; + + const handleRefundAttendee = async (attendee: AttendeeData) => { + const confirmedTickets = attendee.tickets.filter(ticket => + ticket.status === 'confirmed' + ); + + if (confirmedTickets.length === 0) return; + + const confirmMessage = `Are you sure you want to refund all ${confirmedTickets.length} ticket(s) for ${attendee.name}?`; + + if (confirm(confirmMessage)) { + for (const ticket of confirmedTickets) { + await refundTicket(ticket.id); + } + + setOrders(prev => prev.map(order => + confirmedTickets.some(t => t.id === order.id) + ? { ...order, status: 'refunded' } + : order + )); + } + }; + + const handleBulkCheckIn = async () => { + const unCheckedTickets = orders.filter(order => + !order.checked_in && order.status === 'confirmed' + ); + + if (unCheckedTickets.length === 0) { + alert('No tickets available for check-in'); + return; + } + + const confirmMessage = `Are you sure you want to check in all ${unCheckedTickets.length} remaining tickets?`; + + if (confirm(confirmMessage)) { + for (const ticket of unCheckedTickets) { + await checkInTicket(ticket.id); + } + + setOrders(prev => prev.map(order => + unCheckedTickets.some(t => t.id === order.id) + ? { ...order, checked_in: true } + : order + )); + } + }; + + const getAttendeeStats = () => { + const totalAttendees = attendees.length; + const totalTickets = attendees.reduce((sum, a) => sum + a.ticketCount, 0); + const checkedInAttendees = attendees.filter(a => a.checkedInCount > 0).length; + const fullyCheckedInAttendees = attendees.filter(a => + a.checkedInCount === a.ticketCount && a.ticketCount > 0 + ).length; + + return { + totalAttendees, + totalTickets, + checkedInAttendees, + fullyCheckedInAttendees + }; + }; + + const stats = getAttendeeStats(); + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

Attendees & Check-in

+
+ +
+
+ + {/* Stats Cards */} +
+
+
Total Attendees
+
{stats.totalAttendees}
+
+
+
Total Tickets
+
{stats.totalTickets}
+
+
+
Partially Checked In
+
{stats.checkedInAttendees}
+
+
+
Fully Checked In
+
{stats.fullyCheckedInAttendees}
+
+
+ + {/* Filters */} +
+

Filters

+
+
+ + setSearchTerm(e.target.value)} + placeholder="Search by name or email..." + className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+
+ + +
+
+
+ + {/* Attendees Table */} +
+ +
+ + {/* Attendee Details Modal */} + {showAttendeeDetails && selectedAttendee && ( +
+
+
+
+

Attendee Details

+ +
+ +
+
+
+

Contact Information

+
+
+ Name: +
{selectedAttendee.name}
+
+
+ Email: +
{selectedAttendee.email}
+
+
+
+ +
+

Summary

+
+
+ Total Tickets: +
{selectedAttendee.ticketCount}
+
+
+ Total Spent: +
{formatCurrency(selectedAttendee.totalSpent)}
+
+
+ Checked In: +
+ {selectedAttendee.checkedInCount} / {selectedAttendee.ticketCount} +
+
+
+
+
+ +
+

Tickets

+
+ {selectedAttendee.tickets.map((ticket) => ( +
+
+
+
{ticket.ticket_types.name}
+
+ Purchased: {new Date(ticket.created_at).toLocaleDateString()} +
+
+ ID: {ticket.ticket_uuid} +
+
+
+
{formatCurrency(ticket.price_paid)}
+
+ + {ticket.status} + + {ticket.checked_in ? ( + + Checked In + + ) : ( + + Not Checked In + + )} +
+
+
+
+ ))} +
+
+ +
+ +
+ {selectedAttendee.checkedInCount < selectedAttendee.ticketCount && ( + + )} + {selectedAttendee.ticketCount > 0 && ( + + )} +
+
+
+
+
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/components/manage/DiscountTab.tsx b/src/components/manage/DiscountTab.tsx new file mode 100644 index 0000000..2f74d1b --- /dev/null +++ b/src/components/manage/DiscountTab.tsx @@ -0,0 +1,516 @@ +import { useState, useEffect } from 'react'; +import { createClient } from '@supabase/supabase-js'; +import { formatCurrency } from '../../lib/event-management'; + +const supabase = createClient( + import.meta.env.PUBLIC_SUPABASE_URL, + import.meta.env.PUBLIC_SUPABASE_ANON_KEY +); + +interface DiscountCode { + id: string; + code: string; + discount_type: 'percentage' | 'fixed'; + discount_value: number; + minimum_purchase: number; + max_uses: number; + uses_count: number; + expires_at: string; + is_active: boolean; + created_at: string; + applicable_ticket_types: string[]; +} + +interface DiscountTabProps { + eventId: string; +} + +export default function DiscountTab({ eventId }: DiscountTabProps) { + const [discountCodes, setDiscountCodes] = useState([]); + const [ticketTypes, setTicketTypes] = useState([]); + const [showModal, setShowModal] = useState(false); + const [editingCode, setEditingCode] = useState(null); + const [formData, setFormData] = useState({ + code: '', + discount_type: 'percentage' as 'percentage' | 'fixed', + discount_value: 10, + minimum_purchase: 0, + max_uses: 100, + expires_at: '', + applicable_ticket_types: [] as string[] + }); + const [loading, setLoading] = useState(true); + const [saving, setSaving] = useState(false); + + useEffect(() => { + loadData(); + }, [eventId]); + + const loadData = async () => { + setLoading(true); + try { + const [discountData, ticketTypesData] = await Promise.all([ + supabase + .from('discount_codes') + .select('*') + .eq('event_id', eventId) + .order('created_at', { ascending: false }), + supabase + .from('ticket_types') + .select('id, name') + .eq('event_id', eventId) + .eq('is_active', true) + ]); + + if (discountData.error) throw discountData.error; + if (ticketTypesData.error) throw ticketTypesData.error; + + setDiscountCodes(discountData.data || []); + setTicketTypes(ticketTypesData.data || []); + } catch (error) { + console.error('Error loading discount codes:', error); + } finally { + setLoading(false); + } + }; + + const generateCode = () => { + const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; + let result = ''; + for (let i = 0; i < 8; i++) { + result += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return result; + }; + + const handleCreateCode = () => { + setEditingCode(null); + setFormData({ + code: generateCode(), + discount_type: 'percentage', + discount_value: 10, + minimum_purchase: 0, + max_uses: 100, + expires_at: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], + applicable_ticket_types: [] + }); + setShowModal(true); + }; + + const handleEditCode = (code: DiscountCode) => { + setEditingCode(code); + setFormData({ + code: code.code, + discount_type: code.discount_type, + discount_value: code.discount_value, + minimum_purchase: code.minimum_purchase, + max_uses: code.max_uses, + expires_at: code.expires_at.split('T')[0], + applicable_ticket_types: code.applicable_ticket_types || [] + }); + setShowModal(true); + }; + + const handleSaveCode = async () => { + setSaving(true); + try { + const codeData = { + ...formData, + event_id: eventId, + expires_at: new Date(formData.expires_at).toISOString(), + minimum_purchase: formData.minimum_purchase * 100 // Convert to cents + }; + + if (editingCode) { + const { error } = await supabase + .from('discount_codes') + .update(codeData) + .eq('id', editingCode.id); + + if (error) throw error; + } else { + const { error } = await supabase + .from('discount_codes') + .insert({ + ...codeData, + is_active: true, + uses_count: 0 + }); + + if (error) throw error; + } + + setShowModal(false); + loadData(); + } catch (error) { + console.error('Error saving discount code:', error); + } finally { + setSaving(false); + } + }; + + const handleDeleteCode = async (code: DiscountCode) => { + if (confirm(`Are you sure you want to delete the discount code "${code.code}"?`)) { + try { + const { error } = await supabase + .from('discount_codes') + .delete() + .eq('id', code.id); + + if (error) throw error; + loadData(); + } catch (error) { + console.error('Error deleting discount code:', error); + } + } + }; + + const handleToggleCode = async (code: DiscountCode) => { + try { + const { error } = await supabase + .from('discount_codes') + .update({ is_active: !code.is_active }) + .eq('id', code.id); + + if (error) throw error; + loadData(); + } catch (error) { + console.error('Error toggling discount code:', error); + } + }; + + const formatDiscount = (type: string, value: number) => { + return type === 'percentage' ? `${value}%` : formatCurrency(value * 100); + }; + + const isExpired = (expiresAt: string) => { + return new Date(expiresAt) < new Date(); + }; + + const getApplicableTicketNames = (ticketTypeIds: string[]) => { + if (!ticketTypeIds || ticketTypeIds.length === 0) return 'All ticket types'; + return ticketTypes + .filter(type => ticketTypeIds.includes(type.id)) + .map(type => type.name) + .join(', '); + }; + + const handleTicketTypeChange = (ticketTypeId: string, checked: boolean) => { + if (checked) { + setFormData(prev => ({ + ...prev, + applicable_ticket_types: [...prev.applicable_ticket_types, ticketTypeId] + })); + } else { + setFormData(prev => ({ + ...prev, + applicable_ticket_types: prev.applicable_ticket_types.filter(id => id !== ticketTypeId) + })); + } + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

Discount Codes

+ +
+ + {discountCodes.length === 0 ? ( +
+ + + +

No discount codes created yet

+ +
+ ) : ( +
+ {discountCodes.map((code) => ( +
+
+
+
+
{code.code}
+
+ + {code.is_active ? 'Active' : 'Inactive'} + + {isExpired(code.expires_at) && ( + + Expired + + )} +
+
+
+ {formatDiscount(code.discount_type, code.discount_value)} OFF +
+ {code.minimum_purchase > 0 && ( +
+ Minimum purchase: {formatCurrency(code.minimum_purchase)} +
+ )} +
+ Applies to: {getApplicableTicketNames(code.applicable_ticket_types)} +
+
+
+ + + +
+
+ +
+
+
+
Uses
+
+ {code.uses_count} / {code.max_uses} +
+
+
+
Expires
+
+ {new Date(code.expires_at).toLocaleDateString()} +
+
+
+ +
+
+
+
+ {((code.uses_count / code.max_uses) * 100).toFixed(1)}% used +
+
+
+ ))} +
+ )} + + {/* Modal */} + {showModal && ( +
+
+
+
+

+ {editingCode ? 'Edit Discount Code' : 'Create Discount Code'} +

+ +
+ +
+
+ +
+ setFormData(prev => ({ ...prev, code: e.target.value.toUpperCase() }))} + className="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-l-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono" + placeholder="DISCOUNT10" + /> + +
+
+ +
+ + +
+ +
+
+ + setFormData(prev => ({ ...prev, discount_value: parseFloat(e.target.value) || 0 }))} + className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + min="0" + step={formData.discount_type === 'percentage' ? "1" : "0.01"} + max={formData.discount_type === 'percentage' ? "100" : undefined} + /> +
+ +
+ + setFormData(prev => ({ ...prev, minimum_purchase: parseFloat(e.target.value) || 0 }))} + className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + min="0" + step="0.01" + /> +
+
+ +
+
+ + setFormData(prev => ({ ...prev, max_uses: parseInt(e.target.value) || 0 }))} + className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + min="1" + /> +
+ +
+ + setFormData(prev => ({ ...prev, expires_at: e.target.value }))} + className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+
+ +
+ +
+ {ticketTypes.length === 0 ? ( +
No ticket types available
+ ) : ( +
+ + {ticketTypes.map((type) => ( + + ))} +
+ )} +
+
+
+ +
+ + +
+
+
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/components/manage/MarketingTab.tsx b/src/components/manage/MarketingTab.tsx new file mode 100644 index 0000000..0ce1680 --- /dev/null +++ b/src/components/manage/MarketingTab.tsx @@ -0,0 +1,403 @@ +import { useState, useEffect } from 'react'; +import { + loadMarketingKit, + generateMarketingKit, + generateSocialMediaContent, + generateEmailTemplate, + generateFlyerData, + copyToClipboard, + downloadAsset +} from '../../lib/marketing-kit'; +import { loadEventData } from '../../lib/event-management'; +import type { MarketingKitData, SocialMediaContent, EmailTemplate } from '../../lib/marketing-kit'; + +interface MarketingTabProps { + eventId: string; + organizationId: string; +} + +export default function MarketingTab({ eventId, organizationId }: MarketingTabProps) { + const [marketingKit, setMarketingKit] = useState(null); + const [socialContent, setSocialContent] = useState([]); + const [emailTemplate, setEmailTemplate] = useState(null); + const [activeTab, setActiveTab] = useState<'overview' | 'social' | 'email' | 'assets'>('overview'); + const [generating, setGenerating] = useState(false); + const [loading, setLoading] = useState(true); + + useEffect(() => { + loadData(); + }, [eventId]); + + const loadData = async () => { + setLoading(true); + try { + const kitData = await loadMarketingKit(eventId); + + if (kitData) { + setMarketingKit(kitData); + + // Generate social media content + const socialData = generateSocialMediaContent(kitData.event); + setSocialContent(socialData); + + // Generate email template + const emailData = generateEmailTemplate(kitData.event); + setEmailTemplate(emailData); + } + } catch (error) { + console.error('Error loading marketing kit:', error); + } finally { + setLoading(false); + } + }; + + const handleGenerateKit = async () => { + setGenerating(true); + try { + const newKit = await generateMarketingKit(eventId); + if (newKit) { + setMarketingKit(newKit); + + // Refresh social and email content + const socialData = generateSocialMediaContent(newKit.event); + setSocialContent(socialData); + + const emailData = generateEmailTemplate(newKit.event); + setEmailTemplate(emailData); + } + } catch (error) { + console.error('Error generating marketing kit:', error); + } finally { + setGenerating(false); + } + }; + + const handleCopyContent = async (content: string) => { + try { + await copyToClipboard(content); + alert('Content copied to clipboard!'); + } catch (error) { + console.error('Error copying content:', error); + } + }; + + const handleDownloadAsset = async (assetUrl: string, filename: string) => { + try { + await downloadAsset(assetUrl, filename); + } catch (error) { + console.error('Error downloading asset:', error); + } + }; + + const getPlatformIcon = (platform: string) => { + switch (platform) { + case 'facebook': + return ( + + + + ); + case 'twitter': + return ( + + + + ); + case 'instagram': + return ( + + + + ); + case 'linkedin': + return ( + + + + ); + default: + return null; + } + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

Marketing Kit

+ +
+ + {!marketingKit ? ( +
+ + + +

No marketing kit generated yet

+ +
+ ) : ( + <> + {/* Tab Navigation */} +
+ +
+ + {/* Tab Content */} +
+ {activeTab === 'overview' && ( +
+
+

Marketing Kit Overview

+
+
+
{marketingKit.assets.length}
+
Assets Generated
+
+
+
{socialContent.length}
+
Social Templates
+
+
+
1
+
Email Template
+
+
+
+ +
+

Event Information

+
+
+

Event Details

+
+
Title: {marketingKit.event.title}
+
Date: {new Date(marketingKit.event.date).toLocaleDateString()}
+
Venue: {marketingKit.event.venue}
+
+
+
+

Social Links

+
+ {Object.entries(marketingKit.social_links).map(([platform, url]) => ( +
+ {platform}: + {url || 'Not configured'} +
+ ))} +
+
+
+
+
+ )} + + {activeTab === 'social' && ( +
+
+ {socialContent.map((content) => ( +
+
+
+ {getPlatformIcon(content.platform)} +
+

{content.platform}

+
+ +
+
+ +
+ {content.content} +
+
+ +
+ +
+ {content.hashtags.map((hashtag, index) => ( + + {hashtag} + + ))} +
+
+ +
+ +
+
+
+ ))} +
+
+ )} + + {activeTab === 'email' && emailTemplate && ( +
+
+

Email Template

+ +
+
+ +
+ {emailTemplate.subject} +
+
+ +
+
+ +
+ +
+ {emailTemplate.preview_text} +
+
+ +
+ +
+ 
{emailTemplate.html_content}
+
+
+ +
+
+ +
+ +
+ 
{emailTemplate.text_content}
+
+
+ +
+
+
+
+
+ )} + + {activeTab === 'assets' && ( +
+ {marketingKit.assets.length === 0 ? ( +
+ + + +

No assets generated yet

+ +
+ ) : ( +
+ {marketingKit.assets.map((asset) => ( +
+
+

+ {asset.asset_type.replace('_', ' ')} +

+ + {asset.asset_type} + +
+ + {asset.asset_url && ( +
+ {asset.asset_type} +
+ )} + +
+ +
+
+ ))} +
+ )} +
+ )} +
+ + )} +
+ ); +} \ No newline at end of file diff --git a/src/components/manage/OrdersTab.tsx b/src/components/manage/OrdersTab.tsx new file mode 100644 index 0000000..3546a5a --- /dev/null +++ b/src/components/manage/OrdersTab.tsx @@ -0,0 +1,419 @@ +import { useState, useEffect } from 'react'; +import { loadSalesData, exportSalesData, type SalesData, type SalesFilter } from '../../lib/sales-analytics'; +import { loadTicketTypes } from '../../lib/ticket-management'; +import { refundTicket, checkInTicket } from '../../lib/ticket-management'; +import { formatCurrency } from '../../lib/event-management'; +import OrdersTable from '../tables/OrdersTable'; + +interface OrdersTabProps { + eventId: string; +} + +export default function OrdersTab({ eventId }: OrdersTabProps) { + const [orders, setOrders] = useState([]); + const [filteredOrders, setFilteredOrders] = useState([]); + const [ticketTypes, setTicketTypes] = useState([]); + const [filters, setFilters] = useState({}); + const [searchTerm, setSearchTerm] = useState(''); + const [selectedOrder, setSelectedOrder] = useState(null); + const [showOrderDetails, setShowOrderDetails] = useState(false); + const [loading, setLoading] = useState(true); + const [exporting, setExporting] = useState(false); + + useEffect(() => { + loadData(); + }, [eventId]); + + useEffect(() => { + applyFilters(); + }, [orders, filters, searchTerm]); + + const loadData = async () => { + setLoading(true); + try { + const [ordersData, ticketTypesData] = await Promise.all([ + loadSalesData(eventId), + loadTicketTypes(eventId) + ]); + + setOrders(ordersData); + setTicketTypes(ticketTypesData); + } catch (error) { + console.error('Error loading orders data:', error); + } finally { + setLoading(false); + } + }; + + const applyFilters = () => { + let filtered = [...orders]; + + // Apply ticket type filter + if (filters.ticketTypeId) { + filtered = filtered.filter(order => order.ticket_type_id === filters.ticketTypeId); + } + + // Apply status filter + if (filters.status) { + filtered = filtered.filter(order => order.status === filters.status); + } + + // Apply check-in filter + if (filters.checkedIn !== undefined) { + filtered = filtered.filter(order => order.checked_in === filters.checkedIn); + } + + // Apply search filter + if (searchTerm) { + const term = searchTerm.toLowerCase(); + filtered = filtered.filter(order => + order.customer_name.toLowerCase().includes(term) || + order.customer_email.toLowerCase().includes(term) || + order.ticket_uuid.toLowerCase().includes(term) + ); + } + + setFilteredOrders(filtered); + }; + + const handleFilterChange = (key: keyof SalesFilter, value: any) => { + setFilters(prev => ({ ...prev, [key]: value })); + }; + + const clearFilters = () => { + setFilters({}); + setSearchTerm(''); + }; + + const handleViewOrder = (order: SalesData) => { + setSelectedOrder(order); + setShowOrderDetails(true); + }; + + const handleRefundOrder = async (order: SalesData) => { + if (confirm(`Are you sure you want to refund ${order.customer_name}'s ticket?`)) { + const success = await refundTicket(order.id); + if (success) { + setOrders(prev => prev.map(o => + o.id === order.id ? { ...o, status: 'refunded' } : o + )); + } + } + }; + + const handleCheckInOrder = async (order: SalesData) => { + const success = await checkInTicket(order.id); + if (success) { + setOrders(prev => prev.map(o => + o.id === order.id ? { ...o, checked_in: true } : o + )); + } + }; + + const handleExport = async (format: 'csv' | 'json' = 'csv') => { + setExporting(true); + try { + const exportData = await exportSalesData(eventId, format); + const blob = new Blob([exportData], { + type: format === 'csv' ? 'text/csv' : 'application/json' + }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `orders-${new Date().toISOString().split('T')[0]}.${format}`; + document.body.appendChild(a); + a.click(); + window.URL.revokeObjectURL(url); + document.body.removeChild(a); + } catch (error) { + console.error('Error exporting data:', error); + } finally { + setExporting(false); + } + }; + + const getOrderStats = () => { + const totalOrders = filteredOrders.length; + const confirmedOrders = filteredOrders.filter(o => o.status === 'confirmed').length; + const refundedOrders = filteredOrders.filter(o => o.status === 'refunded').length; + const checkedInOrders = filteredOrders.filter(o => o.checked_in).length; + const totalRevenue = filteredOrders + .filter(o => o.status === 'confirmed') + .reduce((sum, o) => sum + o.price_paid, 0); + + return { + totalOrders, + confirmedOrders, + refundedOrders, + checkedInOrders, + totalRevenue + }; + }; + + const stats = getOrderStats(); + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

Orders & Sales

+
+ +
+
+ + {/* Stats Cards */} +
+
+
Total Orders
+
{stats.totalOrders}
+
+
+
Confirmed
+
{stats.confirmedOrders}
+
+
+
Refunded
+
{stats.refundedOrders}
+
+
+
Checked In
+
{stats.checkedInOrders}
+
+
+
Revenue
+
{formatCurrency(stats.totalRevenue)}
+
+
+ + {/* Filters */} +
+

Filters

+
+
+ + setSearchTerm(e.target.value)} + placeholder="Name, email, or ticket ID..." + className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ + {/* Orders Table */} +
+ +
+ + {/* Order Details Modal */} + {showOrderDetails && selectedOrder && ( +
+
+
+
+

Order Details

+ +
+ +
+
+
+

Customer Information

+
+
+ Name: +
{selectedOrder.customer_name}
+
+
+ Email: +
{selectedOrder.customer_email}
+
+
+
+ +
+

Order Information

+
+
+ Order ID: +
{selectedOrder.id}
+
+
+ Ticket ID: +
{selectedOrder.ticket_uuid}
+
+
+ Purchase Date: +
{new Date(selectedOrder.created_at).toLocaleString()}
+
+
+
+
+ +
+

Ticket Details

+
+
+
+ Ticket Type: +
{selectedOrder.ticket_types.name}
+
+
+ Price Paid: +
{formatCurrency(selectedOrder.price_paid)}
+
+
+ Status: +
+ {selectedOrder.status.charAt(0).toUpperCase() + selectedOrder.status.slice(1)} +
+
+
+
+
+ +
+

Check-in Status

+
+ {selectedOrder.checked_in ? ( +
+ + + + Checked In +
+ ) : ( +
+
+ + + + Not Checked In +
+ {selectedOrder.status === 'confirmed' && ( + + )} +
+ )} +
+
+ +
+ + {selectedOrder.status === 'confirmed' && ( + + )} +
+
+
+
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/components/manage/PresaleTab.tsx b/src/components/manage/PresaleTab.tsx new file mode 100644 index 0000000..15fdf4d --- /dev/null +++ b/src/components/manage/PresaleTab.tsx @@ -0,0 +1,416 @@ +import { useState, useEffect } from 'react'; +import { createClient } from '@supabase/supabase-js'; +import { formatCurrency } from '../../lib/event-management'; + +const supabase = createClient( + import.meta.env.PUBLIC_SUPABASE_URL, + import.meta.env.PUBLIC_SUPABASE_ANON_KEY +); + +interface PresaleCode { + id: string; + code: string; + discount_type: 'percentage' | 'fixed'; + discount_value: number; + max_uses: number; + uses_count: number; + expires_at: string; + is_active: boolean; + created_at: string; +} + +interface PresaleTabProps { + eventId: string; +} + +export default function PresaleTab({ eventId }: PresaleTabProps) { + const [presaleCodes, setPresaleCodes] = useState([]); + const [showModal, setShowModal] = useState(false); + const [editingCode, setEditingCode] = useState(null); + const [formData, setFormData] = useState({ + code: '', + discount_type: 'percentage' as 'percentage' | 'fixed', + discount_value: 10, + max_uses: 100, + expires_at: '' + }); + const [loading, setLoading] = useState(true); + const [saving, setSaving] = useState(false); + + useEffect(() => { + loadPresaleCodes(); + }, [eventId]); + + const loadPresaleCodes = async () => { + setLoading(true); + try { + const { data, error } = await supabase + .from('presale_codes') + .select('*') + .eq('event_id', eventId) + .order('created_at', { ascending: false }); + + if (error) throw error; + setPresaleCodes(data || []); + } catch (error) { + console.error('Error loading presale codes:', error); + } finally { + setLoading(false); + } + }; + + const generateCode = () => { + const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; + let result = ''; + for (let i = 0; i < 8; i++) { + result += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return result; + }; + + const handleCreateCode = () => { + setEditingCode(null); + setFormData({ + code: generateCode(), + discount_type: 'percentage', + discount_value: 10, + max_uses: 100, + expires_at: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] + }); + setShowModal(true); + }; + + const handleEditCode = (code: PresaleCode) => { + setEditingCode(code); + setFormData({ + code: code.code, + discount_type: code.discount_type, + discount_value: code.discount_value, + max_uses: code.max_uses, + expires_at: code.expires_at.split('T')[0] + }); + setShowModal(true); + }; + + const handleSaveCode = async () => { + setSaving(true); + try { + const codeData = { + ...formData, + event_id: eventId, + expires_at: new Date(formData.expires_at).toISOString() + }; + + if (editingCode) { + const { error } = await supabase + .from('presale_codes') + .update(codeData) + .eq('id', editingCode.id); + + if (error) throw error; + } else { + const { error } = await supabase + .from('presale_codes') + .insert({ + ...codeData, + is_active: true, + uses_count: 0 + }); + + if (error) throw error; + } + + setShowModal(false); + loadPresaleCodes(); + } catch (error) { + console.error('Error saving presale code:', error); + } finally { + setSaving(false); + } + }; + + const handleDeleteCode = async (code: PresaleCode) => { + if (confirm(`Are you sure you want to delete the code "${code.code}"?`)) { + try { + const { error } = await supabase + .from('presale_codes') + .delete() + .eq('id', code.id); + + if (error) throw error; + loadPresaleCodes(); + } catch (error) { + console.error('Error deleting presale code:', error); + } + } + }; + + const handleToggleCode = async (code: PresaleCode) => { + try { + const { error } = await supabase + .from('presale_codes') + .update({ is_active: !code.is_active }) + .eq('id', code.id); + + if (error) throw error; + loadPresaleCodes(); + } catch (error) { + console.error('Error toggling presale code:', error); + } + }; + + const formatDiscount = (type: string, value: number) => { + return type === 'percentage' ? `${value}%` : formatCurrency(value * 100); + }; + + const isExpired = (expiresAt: string) => { + return new Date(expiresAt) < new Date(); + }; + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

Presale Codes

+ +
+ + {presaleCodes.length === 0 ? ( +
+ + + +

No presale codes created yet

+ +
+ ) : ( +
+ {presaleCodes.map((code) => ( +
+
+
+
+
{code.code}
+
+ + {code.is_active ? 'Active' : 'Inactive'} + + {isExpired(code.expires_at) && ( + + Expired + + )} +
+
+
+ {formatDiscount(code.discount_type, code.discount_value)} OFF +
+
+
+ + + +
+
+ +
+
+
+
Uses
+
+ {code.uses_count} / {code.max_uses} +
+
+
+
Expires
+
+ {new Date(code.expires_at).toLocaleDateString()} +
+
+
+ +
+
+
+
+ {((code.uses_count / code.max_uses) * 100).toFixed(1)}% used +
+
+
+ ))} +
+ )} + + {/* Modal */} + {showModal && ( +
+
+
+
+

+ {editingCode ? 'Edit Presale Code' : 'Create Presale Code'} +

+ +
+ +
+
+ +
+ setFormData(prev => ({ ...prev, code: e.target.value.toUpperCase() }))} + className="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-l-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono" + placeholder="CODE123" + /> + +
+
+ +
+ + +
+ +
+ + setFormData(prev => ({ ...prev, discount_value: parseFloat(e.target.value) || 0 }))} + className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + min="0" + step={formData.discount_type === 'percentage' ? "1" : "0.01"} + max={formData.discount_type === 'percentage' ? "100" : undefined} + /> +
+ +
+
+ + setFormData(prev => ({ ...prev, max_uses: parseInt(e.target.value) || 0 }))} + className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + min="1" + /> +
+ +
+ + setFormData(prev => ({ ...prev, expires_at: e.target.value }))} + className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+
+
+ +
+ + +
+
+
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/components/manage/PrintedTab.tsx b/src/components/manage/PrintedTab.tsx new file mode 100644 index 0000000..b0020eb --- /dev/null +++ b/src/components/manage/PrintedTab.tsx @@ -0,0 +1,573 @@ +import { useState, useEffect } from 'react'; +import { createClient } from '@supabase/supabase-js'; +import { formatCurrency } from '../../lib/event-management'; + +const supabase = createClient( + import.meta.env.PUBLIC_SUPABASE_URL, + import.meta.env.PUBLIC_SUPABASE_ANON_KEY +); + +interface PrintedTicket { + id: string; + event_id: string; + barcode: string; + status: 'pending' | 'printed' | 'distributed' | 'used'; + notes: string; + created_at: string; + updated_at: string; +} + +interface PrintedTabProps { + eventId: string; +} + +export default function PrintedTab({ eventId }: PrintedTabProps) { + const [printedTickets, setPrintedTickets] = useState([]); + const [showModal, setShowModal] = useState(false); + const [barcodeMethod, setBarcodeMethod] = useState<'generate' | 'manual'>('generate'); + const [barcodeData, setBarcodeData] = useState({ + startNumber: 1, + quantity: 100, + prefix: 'BCT', + padding: 6 + }); + const [manualBarcodes, setManualBarcodes] = useState(''); + const [editingTicket, setEditingTicket] = useState(null); + const [editForm, setEditForm] = useState({ status: 'pending', notes: '' }); + const [loading, setLoading] = useState(true); + const [processing, setProcessing] = useState(false); + + useEffect(() => { + loadPrintedTickets(); + }, [eventId]); + + const loadPrintedTickets = async () => { + setLoading(true); + try { + const { data, error } = await supabase + .from('printed_tickets') + .select('*') + .eq('event_id', eventId) + .order('created_at', { ascending: false }); + + if (error) throw error; + setPrintedTickets(data || []); + } catch (error) { + console.error('Error loading printed tickets:', error); + } finally { + setLoading(false); + } + }; + + const generateBarcodes = (start: number, quantity: number, prefix: string, padding: number) => { + const barcodes = []; + for (let i = 0; i < quantity; i++) { + const number = start + i; + const paddedNumber = number.toString().padStart(padding, '0'); + barcodes.push(`${prefix}${paddedNumber}`); + } + return barcodes; + }; + + const handleCreateTickets = async () => { + setProcessing(true); + try { + let barcodes: string[] = []; + + if (barcodeMethod === 'generate') { + barcodes = generateBarcodes( + barcodeData.startNumber, + barcodeData.quantity, + barcodeData.prefix, + barcodeData.padding + ); + } else { + barcodes = manualBarcodes + .split('\n') + .map(line => line.trim()) + .filter(line => line.length > 0); + } + + if (barcodes.length === 0) { + alert('Please provide at least one barcode'); + return; + } + + // Check for duplicate barcodes + const existingBarcodes = printedTickets.map(ticket => ticket.barcode); + const duplicates = barcodes.filter(barcode => existingBarcodes.includes(barcode)); + + if (duplicates.length > 0) { + alert(`Duplicate barcodes found: ${duplicates.join(', ')}`); + return; + } + + const ticketsToInsert = barcodes.map(barcode => ({ + event_id: eventId, + barcode, + status: 'pending' as const, + notes: '' + })); + + const { error } = await supabase + .from('printed_tickets') + .insert(ticketsToInsert); + + if (error) throw error; + + setShowModal(false); + loadPrintedTickets(); + + // Reset form + setBarcodeData({ + startNumber: 1, + quantity: 100, + prefix: 'BCT', + padding: 6 + }); + setManualBarcodes(''); + } catch (error) { + console.error('Error creating printed tickets:', error); + alert('Failed to create printed tickets'); + } finally { + setProcessing(false); + } + }; + + const handleEditTicket = (ticket: PrintedTicket) => { + setEditingTicket(ticket); + setEditForm({ + status: ticket.status, + notes: ticket.notes + }); + }; + + const handleUpdateTicket = async () => { + if (!editingTicket) return; + + try { + const { error } = await supabase + .from('printed_tickets') + .update({ + status: editForm.status, + notes: editForm.notes + }) + .eq('id', editingTicket.id); + + if (error) throw error; + + setEditingTicket(null); + loadPrintedTickets(); + } catch (error) { + console.error('Error updating printed ticket:', error); + alert('Failed to update printed ticket'); + } + }; + + const handleDeleteTicket = async (ticket: PrintedTicket) => { + if (confirm(`Are you sure you want to delete the printed ticket "${ticket.barcode}"?`)) { + try { + const { error } = await supabase + .from('printed_tickets') + .delete() + .eq('id', ticket.id); + + if (error) throw error; + loadPrintedTickets(); + } catch (error) { + console.error('Error deleting printed ticket:', error); + alert('Failed to delete printed ticket'); + } + } + }; + + const getStatusColor = (status: string) => { + switch (status) { + case 'pending': + return 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30'; + case 'printed': + return 'bg-blue-500/20 text-blue-300 border-blue-500/30'; + case 'distributed': + return 'bg-green-500/20 text-green-300 border-green-500/30'; + case 'used': + return 'bg-gray-500/20 text-gray-300 border-gray-500/30'; + default: + return 'bg-white/20 text-white border-white/30'; + } + }; + + const getStatusIcon = (status: string) => { + switch (status) { + case 'pending': + return ( + + + + ); + case 'printed': + return ( + + + + ); + case 'distributed': + return ( + + + + ); + case 'used': + return ( + + + + ); + default: + return null; + } + }; + + const getStatusStats = () => { + const stats = { + total: printedTickets.length, + pending: printedTickets.filter(t => t.status === 'pending').length, + printed: printedTickets.filter(t => t.status === 'printed').length, + distributed: printedTickets.filter(t => t.status === 'distributed').length, + used: printedTickets.filter(t => t.status === 'used').length + }; + return stats; + }; + + const stats = getStatusStats(); + + if (loading) { + return ( +
+
+
+ ); + } + + return ( +
+
+

Printed Tickets

+ +
+ + {/* Stats Cards */} +
+
+
Total
+
{stats.total}
+
+
+
Pending
+
{stats.pending}
+
+
+
Printed
+
{stats.printed}
+
+
+
Distributed
+
{stats.distributed}
+
+
+
Used
+
{stats.used}
+
+
+ + {/* Tickets Table */} +
+ {printedTickets.length === 0 ? ( +
+ + + +

No printed tickets created yet

+ +
+ ) : ( +
+ + + + + + + + + + + + {printedTickets.map((ticket) => ( + + + + + + + + ))} + +
BarcodeStatusNotesCreatedActions
+
{ticket.barcode}
+ 		+ + {getStatusIcon(ticket.status)} + {ticket.status.charAt(0).toUpperCase() + ticket.status.slice(1)} + + +
+ {ticket.notes || '-'} +
+ 		+
+ {new Date(ticket.created_at).toLocaleDateString()} +
+ 		+
+ + +
+
+
+ )} +
+ + {/* Create Modal */} + {showModal && ( +
+
+
+
+

Add Printed Tickets

+ +
+ +
+
+ +
+ + +
+
+ + {barcodeMethod === 'generate' ? ( +
+
+
+ + setBarcodeData(prev => ({ ...prev, prefix: e.target.value }))} + className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="BCT" + /> +
+
+ + setBarcodeData(prev => ({ ...prev, padding: parseInt(e.target.value) || 6 }))} + className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + min="1" + max="10" + /> +
+
+
+
+ + setBarcodeData(prev => ({ ...prev, startNumber: parseInt(e.target.value) || 1 }))} + className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + min="1" + /> +
+
+ + setBarcodeData(prev => ({ ...prev, quantity: parseInt(e.target.value) || 1 }))} + className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent" + min="1" + max="1000" + /> +
+
+
+
Preview:
+
+ {barcodeData.prefix}{barcodeData.startNumber.toString().padStart(barcodeData.padding, '0')} - {barcodeData.prefix}{(barcodeData.startNumber + barcodeData.quantity - 1).toString().padStart(barcodeData.padding, '0')} +
+
+
+ ) : ( +
+ + +
+ +
+
+ +
+
+ + +
+
+ + +
+
+
+ +
+ +
+
+ + +
+
+ + +
+
+
+
+
+ +
+ + +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/src/pages/events/[id]/manage.astro b/src/pages/events/[id]/manage.astro index a903dac..9efa41f 100644 --- a/src/pages/events/[id]/manage.astro +++ b/src/pages/events/[id]/manage.astro @@ -3,6 +3,22 @@ export const prerender = false; import Layout from '../../../layouts/Layout.astro'; import Navigation from '../../../components/Navigation.astro'; +import EventHeader from '../../../components/EventHeader.astro'; +import QuickStats from '../../../components/QuickStats.astro'; +import EventManagement from '../../../components/EventManagement.tsx'; + +// Get event ID from URL parameters +const { id } = Astro.params; + +// In a real application, you would validate the event ID and user permissions here +// For now, we'll assume the event exists and the user has access +const eventId = id as string; + +// Mock organization ID - in real app, get from user session +const organizationId = 'mock-org-id'; + +// Mock event slug - in real app, fetch from database +const eventSlug = 'mock-event-slug'; --- @@ -34,6710 +50,18 @@ import Navigation from '../../../components/Navigation.astro';
-
-
-
-
-

Loading...

-
-
- - - - - -- -
-
- - - - -- -
-
-

Loading event details...

-
-
-
- - - - - - Preview Page - - - - - - - Scanner - - -
-
-
$0
-
Total Revenue
-
-
-
-
-
+ -
-
-
-
-

Tickets Sold

-

0

-
-
- - - -
-
-
+ -
-
-
-

Available

-

--

-
-
- - - -
-
-
- -
-
-
-

Check-ins

-

0

-
-
- - - -
-
-
- -
-
-
-

Net Revenue

-

$0

-
-
- - - -
-
-
-
- - -
- -
- -
- - -
- -
-
-
-

Ticket Types

-

Manage pricing, availability, and ticket variations for your event

-
-
- - -
-
- -
- -
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - -
-
+ +
- - - - - - - - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/events/new.astro b/src/pages/events/new.astro index 111d0f0..49649bf 100644 --- a/src/pages/events/new.astro +++ b/src/pages/events/new.astro @@ -49,6 +49,15 @@ import Navigation from '../../components/Navigation.astro';

Event Details

+ +
+

Event Image

+
+

+ Upload a horizontal image. Recommended: 1200×628px. Crop to fit. +

+
+
import { supabase } from '../../lib/supabase'; + import { createElement } from 'react'; + import { createRoot } from 'react-dom/client'; + import ImageUploadCropper from '../../components/ImageUploadCropper.tsx'; const eventForm = document.getElementById('event-form') as HTMLFormElement; const errorMessage = document.getElementById('error-message') as HTMLDivElement; @@ -298,6 +310,7 @@ import Navigation from '../../components/Navigation.astro'; let currentOrganizationId = null; let selectedAddons = []; + let eventImageUrl = null; // Check authentication async function checkAuth() { @@ -471,7 +484,8 @@ import Navigation from '../../components/Navigation.astro'; description, created_by: user.id, organization_id: organizationId, - seating_type: seatingType + seating_type: seatingType, + image_url: eventImageUrl } ]) .select() @@ -513,11 +527,25 @@ import Navigation from '../../components/Navigation.astro'; radio.addEventListener('change', handleVenueOptionChange); }); + // Initialize Image Upload Component + function initializeImageUpload() { + const container = document.getElementById('image-upload-container'); + if (container) { + const root = createRoot(container); + root.render(createElement(ImageUploadCropper, { + onImageChange: (imageUrl) => { + eventImageUrl = imageUrl; + } + })); + } + } + // Initialize checkAuth().then(session => { if (session && currentOrganizationId) { loadVenues(); } handleVenueOptionChange(); // Set initial state + initializeImageUpload(); // Initialize image upload }); \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index dc3ac7d..08c85ed 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,13 +1,11 @@ --- -import LoginLayout from '../layouts/LoginLayout.astro'; -import { generateCSRFToken } from '../lib/auth'; - -// Generate CSRF token for the form -const csrfToken = generateCSRFToken(); +import Layout from '../layouts/Layout.astro'; +import PublicHeader from '../components/PublicHeader.astro'; +import ComparisonSection from '../components/ComparisonSection.astro'; --- - -
+ +
@@ -30,265 +28,187 @@ const csrfToken = generateCSRFToken();
-
-
+ + + + +
+
+ +
+ ✨ Premium Event Ticketing Platform +
- -
- -
- -

- Black Canyon - - Tickets - -

-

- Elegant ticketing platform for Colorado's most prestigious venues -

-
- - - Self-serve event setup - - - - Automated Stripe payouts - - - - Mobile QR scanning — no apps required - -
-
- - -
-
-
- 💡 -
-

Quick Setup

-

Create events in minutes

-
- -
-
- 💸 -
-

Fast Payments

-

Automated Stripe payouts

-
- -
-
- 📊 -
-

Live Analytics

-

Dashboard + exports

-
-
- -
- - -
-
-
-
- -
-

Organizer Login

-

Manage your events and track ticket sales

-
- - -
-
- -
- - -
- -
- - -
- - - -
- -
- -
- -
-
-
- - - - -
-
- By signing up, you agree to our - - Terms of Service - - and - - Privacy Policy - -
-
-
-
-
-
-
-
- - - - - \ No newline at end of file + } + + .animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + .delay-1000 { + animation-delay: 1s; + } + + .delay-500 { + animation-delay: 0.5s; + } + \ No newline at end of file diff --git a/src/pages/login.astro b/src/pages/login.astro new file mode 100644 index 0000000..dc3ac7d --- /dev/null +++ b/src/pages/login.astro @@ -0,0 +1,294 @@ +--- +import LoginLayout from '../layouts/LoginLayout.astro'; +import { generateCSRFToken } from '../lib/auth'; + +// Generate CSRF token for the form +const csrfToken = generateCSRFToken(); +--- + + +
+ +
+ +
+
+
+
+
+ + +
+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ +

+ Black Canyon + + Tickets + +

+

+ Elegant ticketing platform for Colorado's most prestigious venues +

+
+ + + Self-serve event setup + + + + Automated Stripe payouts + + + + Mobile QR scanning — no apps required + +
+
+ + +
+
+
+ 💡 +
+

Quick Setup

+

Create events in minutes

+
+ +
+
+ 💸 +
+

Fast Payments

+

Automated Stripe payouts

+
+ +
+
+ 📊 +
+

Live Analytics

+

Dashboard + exports

+
+
+ +
+ + +
+
+
+
+ +
+

Organizer Login

+

Manage your events and track ticket sales

+
+ + +
+
+ +
+ + +
+ +
+ + +
+ + + +
+ +
+ +
+ +
+
+
+ + + + +
+
+ By signing up, you agree to our + + Terms of Service + + and + + Privacy Policy + +
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/supabase/migrations/20250708_add_event_image_support.sql b/supabase/migrations/20250708_add_event_image_support.sql new file mode 100644 index 0000000..a27dec7 --- /dev/null +++ b/supabase/migrations/20250708_add_event_image_support.sql @@ -0,0 +1,54 @@ +-- Add image_url column to events table +ALTER TABLE events ADD COLUMN image_url TEXT; + +-- Create storage bucket for event images +INSERT INTO storage.buckets (id, name, public) +VALUES ('event-images', 'event-images', true); + +-- Create storage policy for authenticated users to upload event images +CREATE POLICY "Users can upload event images" ON storage.objects +FOR INSERT WITH CHECK ( + bucket_id = 'event-images' AND + auth.uid() IS NOT NULL +); + +-- Create storage policy for public read access to event images +CREATE POLICY "Public read access to event images" ON storage.objects +FOR SELECT USING (bucket_id = 'event-images'); + +-- Create storage policy for users to delete their own event images +CREATE POLICY "Users can delete their own event images" ON storage.objects +FOR DELETE USING ( + bucket_id = 'event-images' AND + auth.uid() IS NOT NULL +); + +-- Update RLS policy for events to include image_url in SELECT +DROP POLICY IF EXISTS "Users can view events in their organization" ON events; +CREATE POLICY "Users can view events in their organization" ON events +FOR SELECT USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE user_id = auth.uid() + ) +); + +-- Update RLS policy for events to include image_url in INSERT +DROP POLICY IF EXISTS "Users can create events in their organization" ON events; +CREATE POLICY "Users can create events in their organization" ON events +FOR INSERT WITH CHECK ( + organization_id IN ( + SELECT organization_id FROM users WHERE user_id = auth.uid() + ) +); + +-- Update RLS policy for events to include image_url in UPDATE +DROP POLICY IF EXISTS "Users can update events in their organization" ON events; +CREATE POLICY "Users can update events in their organization" ON events +FOR UPDATE USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE user_id = auth.uid() + ) +); + +-- Add index on image_url for faster queries +CREATE INDEX IF NOT EXISTS idx_events_image_url ON events(image_url) WHERE image_url IS NOT NULL; \ No newline at end of file diff --git a/supabase/migrations/20250708_add_marketing_kit_support.sql b/supabase/migrations/20250708_add_marketing_kit_support.sql new file mode 100644 index 0000000..9e28ac5 --- /dev/null +++ b/supabase/migrations/20250708_add_marketing_kit_support.sql @@ -0,0 +1,203 @@ +-- Marketing Kit support for Event Marketing Toolkit +-- This migration adds tables to store marketing kit assets and templates + +-- Table to store marketing kit assets for each event +CREATE TABLE IF NOT EXISTS marketing_kit_assets ( + id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), + event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE, + organization_id UUID NOT NULL REFERENCES organizations(id) ON DELETE CASCADE, + asset_type TEXT NOT NULL CHECK (asset_type IN ('social_post', 'flyer', 'email_template', 'qr_code')), + platform TEXT, -- For social posts: 'facebook', 'instagram', 'twitter', 'linkedin' + title TEXT NOT NULL, + content TEXT, -- JSON content for templates/configs + image_url TEXT, -- Generated image URL + download_url TEXT, -- Direct download URL for assets + file_format TEXT, -- 'png', 'jpg', 'html', 'txt', etc. + dimensions JSON, -- {"width": 1080, "height": 1080} for images + generated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), + expires_at TIMESTAMP WITH TIME ZONE, -- For temporary download links + metadata JSON, -- Additional configuration/settings + is_active BOOLEAN DEFAULT true, + created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), + updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() +); + +-- Table to store reusable marketing templates +CREATE TABLE IF NOT EXISTS marketing_templates ( + id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), + organization_id UUID REFERENCES organizations(id) ON DELETE CASCADE, + template_type TEXT NOT NULL CHECK (template_type IN ('social_post', 'flyer', 'email_template')), + platform TEXT, -- For social posts: 'facebook', 'instagram', 'twitter', 'linkedin' + name TEXT NOT NULL, + description TEXT, + template_data JSON NOT NULL, -- Template configuration and layout + preview_image_url TEXT, + is_default BOOLEAN DEFAULT false, + is_active BOOLEAN DEFAULT true, + created_by UUID REFERENCES users(id), + created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), + updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() +); + +-- Table to track marketing kit generations and downloads +CREATE TABLE IF NOT EXISTS marketing_kit_generations ( + id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), + event_id UUID NOT NULL REFERENCES events(id) ON DELETE CASCADE, + organization_id UUID NOT NULL REFERENCES organizations(id) ON DELETE CASCADE, + generated_by UUID REFERENCES users(id), + generation_type TEXT NOT NULL CHECK (generation_type IN ('full_kit', 'individual_asset')), + assets_included TEXT[], -- Array of asset types included + zip_file_url TEXT, -- URL to download complete kit + zip_expires_at TIMESTAMP WITH TIME ZONE, + generation_status TEXT DEFAULT 'pending' CHECK (generation_status IN ('pending', 'processing', 'completed', 'failed')), + error_message TEXT, + download_count INTEGER DEFAULT 0, + last_downloaded_at TIMESTAMP WITH TIME ZONE, + created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), + updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() +); + +-- Indexes for performance +CREATE INDEX IF NOT EXISTS idx_marketing_kit_assets_event_id ON marketing_kit_assets(event_id); +CREATE INDEX IF NOT EXISTS idx_marketing_kit_assets_org_id ON marketing_kit_assets(organization_id); +CREATE INDEX IF NOT EXISTS idx_marketing_kit_assets_type ON marketing_kit_assets(asset_type); +CREATE INDEX IF NOT EXISTS idx_marketing_templates_org_id ON marketing_templates(organization_id); +CREATE INDEX IF NOT EXISTS idx_marketing_templates_type ON marketing_templates(template_type); +CREATE INDEX IF NOT EXISTS idx_marketing_kit_generations_event_id ON marketing_kit_generations(event_id); +CREATE INDEX IF NOT EXISTS idx_marketing_kit_generations_org_id ON marketing_kit_generations(organization_id); + +-- RLS Policies for multi-tenant security +ALTER TABLE marketing_kit_assets ENABLE ROW LEVEL SECURITY; +ALTER TABLE marketing_templates ENABLE ROW LEVEL SECURITY; +ALTER TABLE marketing_kit_generations ENABLE ROW LEVEL SECURITY; + +-- Policies for marketing_kit_assets +CREATE POLICY "Users can view marketing kit assets from their organization" ON marketing_kit_assets + FOR SELECT USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +CREATE POLICY "Users can create marketing kit assets for their organization" ON marketing_kit_assets + FOR INSERT WITH CHECK ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +CREATE POLICY "Users can update marketing kit assets from their organization" ON marketing_kit_assets + FOR UPDATE USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +CREATE POLICY "Users can delete marketing kit assets from their organization" ON marketing_kit_assets + FOR DELETE USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +-- Policies for marketing_templates +CREATE POLICY "Users can view marketing templates from their organization or default templates" ON marketing_templates + FOR SELECT USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + OR organization_id IS NULL -- Global default templates + ); + +CREATE POLICY "Users can create marketing templates for their organization" ON marketing_templates + FOR INSERT WITH CHECK ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +CREATE POLICY "Users can update marketing templates from their organization" ON marketing_templates + FOR UPDATE USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +CREATE POLICY "Users can delete marketing templates from their organization" ON marketing_templates + FOR DELETE USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +-- Policies for marketing_kit_generations +CREATE POLICY "Users can view marketing kit generations from their organization" ON marketing_kit_generations + FOR SELECT USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +CREATE POLICY "Users can create marketing kit generations for their organization" ON marketing_kit_generations + FOR INSERT WITH CHECK ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +CREATE POLICY "Users can update marketing kit generations from their organization" ON marketing_kit_generations + FOR UPDATE USING ( + organization_id IN ( + SELECT organization_id FROM users WHERE id = auth.uid() + ) + ); + +-- Admin bypass policies +CREATE POLICY "Admins can manage all marketing kit assets" ON marketing_kit_assets + FOR ALL USING (is_admin(auth.uid())); + +CREATE POLICY "Admins can manage all marketing templates" ON marketing_templates + FOR ALL USING (is_admin(auth.uid())); + +CREATE POLICY "Admins can manage all marketing kit generations" ON marketing_kit_generations + FOR ALL USING (is_admin(auth.uid())); + +-- Insert some default templates +INSERT INTO marketing_templates (name, description, template_type, platform, template_data, is_default, organization_id) VALUES +-- Facebook Post Template +('Default Facebook Post', 'Standard Facebook event promotion post', 'social_post', 'facebook', + '{"background": "gradient-blue", "textColor": "#FFFFFF", "layout": "center", "includeQR": true, "dimensions": {"width": 1200, "height": 630}}', + true, NULL), + +-- Instagram Post Template +('Default Instagram Post', 'Square Instagram event promotion post', 'social_post', 'instagram', + '{"background": "gradient-purple", "textColor": "#FFFFFF", "layout": "center", "includeQR": true, "dimensions": {"width": 1080, "height": 1080}}', + true, NULL), + +-- Twitter Post Template +('Default Twitter Post', 'Twitter event promotion post', 'social_post', 'twitter', + '{"background": "gradient-blue", "textColor": "#FFFFFF", "layout": "left", "includeQR": true, "dimensions": {"width": 1200, "height": 675}}', + true, NULL), + +-- Email Template +('Default Email Template', 'Standard event promotion email template', 'email_template', NULL, + '{"subject": "You''re Invited: {EVENT_TITLE}", "headerImage": true, "includeQR": true, "ctaText": "Get Your Tickets", "layout": "centered"}', + true, NULL), + +-- Flyer Template +('Default Event Flyer', 'Standard event flyer design', 'flyer', NULL, + '{"background": "gradient-blue", "textColor": "#FFFFFF", "layout": "poster", "includeQR": true, "dimensions": {"width": 1080, "height": 1350}}', + true, NULL); + +-- Trigger to update updated_at timestamp +CREATE OR REPLACE FUNCTION update_updated_at_column() +RETURNS TRIGGER AS $$ +BEGIN + NEW.updated_at = NOW(); + RETURN NEW; +END; +$$ language 'plpgsql'; + +CREATE TRIGGER update_marketing_kit_assets_updated_at BEFORE UPDATE ON marketing_kit_assets FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); +CREATE TRIGGER update_marketing_templates_updated_at BEFORE UPDATE ON marketing_templates FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); +CREATE TRIGGER update_marketing_kit_generations_updated_at BEFORE UPDATE ON marketing_kit_generations FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); \ No newline at end of file diff --git a/supabase/migrations/20250708_add_referral_tracking.sql b/supabase/migrations/20250708_add_referral_tracking.sql new file mode 100644 index 0000000..83460e8 --- /dev/null +++ b/supabase/migrations/20250708_add_referral_tracking.sql @@ -0,0 +1,25 @@ +-- Add referral tracking columns to purchase_attempts table +ALTER TABLE purchase_attempts +ADD COLUMN IF NOT EXISTS referral_source TEXT, +ADD COLUMN IF NOT EXISTS utm_campaign TEXT, +ADD COLUMN IF NOT EXISTS utm_medium TEXT, +ADD COLUMN IF NOT EXISTS utm_source TEXT, +ADD COLUMN IF NOT EXISTS utm_term TEXT, +ADD COLUMN IF NOT EXISTS utm_content TEXT, +ADD COLUMN IF NOT EXISTS referrer_url TEXT, +ADD COLUMN IF NOT EXISTS landing_page TEXT; + +-- Add indexes for better query performance +CREATE INDEX IF NOT EXISTS idx_purchase_attempts_referral_source ON purchase_attempts(referral_source); +CREATE INDEX IF NOT EXISTS idx_purchase_attempts_utm_source ON purchase_attempts(utm_source); +CREATE INDEX IF NOT EXISTS idx_purchase_attempts_utm_campaign ON purchase_attempts(utm_campaign); + +-- Add comments to explain the columns +COMMENT ON COLUMN purchase_attempts.referral_source IS 'High-level referral source (e.g., google, facebook, direct, email)'; +COMMENT ON COLUMN purchase_attempts.utm_campaign IS 'Campaign name from UTM parameters'; +COMMENT ON COLUMN purchase_attempts.utm_medium IS 'Medium from UTM parameters (e.g., email, social, paid)'; +COMMENT ON COLUMN purchase_attempts.utm_source IS 'Source from UTM parameters (e.g., google, facebook, newsletter)'; +COMMENT ON COLUMN purchase_attempts.utm_term IS 'Term from UTM parameters (paid search keywords)'; +COMMENT ON COLUMN purchase_attempts.utm_content IS 'Content from UTM parameters (ad variant)'; +COMMENT ON COLUMN purchase_attempts.referrer_url IS 'Full HTTP referrer URL'; +COMMENT ON COLUMN purchase_attempts.landing_page IS 'Page where user first landed on the site'; \ No newline at end of file diff --git a/supabase/migrations/20250708_add_social_media_links.sql b/supabase/migrations/20250708_add_social_media_links.sql new file mode 100644 index 0000000..04ce33e --- /dev/null +++ b/supabase/migrations/20250708_add_social_media_links.sql @@ -0,0 +1,30 @@ +-- Add social media links and website to events table for marketing kit +ALTER TABLE events ADD COLUMN IF NOT EXISTS social_links JSON DEFAULT '{}'; +ALTER TABLE events ADD COLUMN IF NOT EXISTS website_url TEXT; +ALTER TABLE events ADD COLUMN IF NOT EXISTS contact_email TEXT; + +-- Add social media links to organizations table as well for branding +ALTER TABLE organizations ADD COLUMN IF NOT EXISTS social_links JSON DEFAULT '{}'; +ALTER TABLE organizations ADD COLUMN IF NOT EXISTS website_url TEXT; +ALTER TABLE organizations ADD COLUMN IF NOT EXISTS contact_email TEXT; + +-- Update the marketing templates to include social handles +UPDATE marketing_templates +SET template_data = jsonb_set( + template_data::jsonb, + '{includeSocialHandles}', + 'true'::jsonb +) +WHERE template_type = 'social_post'; + +-- Add some example social links structure as comments +-- Social links JSON structure: +-- { +-- "facebook": "https://facebook.com/yourpage", +-- "instagram": "https://instagram.com/yourhandle", +-- "twitter": "https://twitter.com/yourhandle", +-- "linkedin": "https://linkedin.com/company/yourcompany", +-- "youtube": "https://youtube.com/channel/yourchannel", +-- "tiktok": "https://tiktok.com/@yourhandle", +-- "website": "https://yourwebsite.com" +-- } \ No newline at end of file