dzinesco
26a87d0d00
Major additions: - Territory manager system with application workflow - Custom pricing and page builder with Craft.js - Enhanced Stripe Connect onboarding - CodeReadr QR scanning integration - Kiosk mode for venue sales - Super admin dashboard and analytics - MCP integration for AI-powered operations Infrastructure improvements: - Centralized API client and routing system - Enhanced authentication with organization context - Comprehensive theme management system - Advanced event management with custom tabs - Performance monitoring and accessibility features Database schema updates: - Territory management tables - Custom pages and pricing structures - Kiosk PIN system - Enhanced organization profiles - CodeReadr integration tables 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
307 lines
14 KiB
TypeScript
307 lines
14 KiB
TypeScript
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<WhatsHotEventsProps> = ({
|
|
userLocation,
|
|
radius = 50,
|
|
limit = 8,
|
|
onEventClick,
|
|
className = ''
|
|
}) => {
|
|
const [trendingEvents, setTrendingEvents] = useState<TrendingEvent[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(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) {
|
|
console.error('Trending events loading error:', err);
|
|
setError('Failed to load trending events');
|
|
|
|
} 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: 'var(--error-color)' };
|
|
if (score >= 50) return { text: 'Hot', color: 'var(--warning-color)' };
|
|
if (score >= 25) return { text: 'Trending', color: 'var(--premium-gold)' };
|
|
return { text: 'Popular', color: 'var(--glass-text-accent)' };
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className={`rounded-lg shadow-md p-6 ${className}`} style={{background: 'var(--ui-bg-elevated)'}}>
|
|
<div className="flex items-center justify-center h-32">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2" style={{borderColor: 'var(--glass-text-accent)'}}></div>
|
|
<span className="ml-3" style={{color: 'var(--ui-text-secondary)'}}>Loading hot events...</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className={`rounded-lg shadow-md p-6 ${className}`} style={{background: 'var(--ui-bg-elevated)'}}>
|
|
<div className="text-center">
|
|
<svg className="mx-auto h-12 w-12" style={{color: 'var(--ui-text-muted)'}} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
</svg>
|
|
<h3 className="mt-2 text-sm font-medium" style={{color: 'var(--ui-text-primary)'}}>Unable to load events</h3>
|
|
<p className="mt-1 text-sm" style={{color: 'var(--ui-text-secondary)'}}>{error}</p>
|
|
<button
|
|
onClick={loadTrendingEvents}
|
|
className="mt-2 text-sm font-medium transition-colors"
|
|
style={{color: 'var(--glass-text-accent)'}}
|
|
onMouseEnter={(e) => e.target.style.color = 'var(--premium-primary)'}
|
|
onMouseLeave={(e) => e.target.style.color = 'var(--glass-text-accent)'}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (trendingEvents.length === 0) {
|
|
return (
|
|
<div className={`rounded-lg shadow-md p-6 ${className}`} style={{background: 'var(--ui-bg-elevated)'}}>
|
|
<div className="text-center">
|
|
<svg className="mx-auto h-12 w-12" style={{color: 'var(--ui-text-muted)'}} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3a4 4 0 118 0v4m-4 12v-6m-4 0h8m-8 0v6a4 4 0 108 0v-6" />
|
|
</svg>
|
|
<h3 className="mt-2 text-sm font-medium" style={{color: 'var(--ui-text-primary)'}}>No trending events found</h3>
|
|
<p className="mt-1 text-sm" style={{color: 'var(--ui-text-secondary)'}}>
|
|
Try expanding your search radius or check back later
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`rounded-lg shadow-md overflow-hidden ${className}`} style={{background: 'var(--ui-bg-elevated)'}}>
|
|
{/* Header */}
|
|
<div className="px-6 py-4" style={{background: 'linear-gradient(to right, var(--warning-color), var(--error-color))'}}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="text-2xl">🔥</div>
|
|
<h2 className="text-xl font-bold" style={{color: 'var(--glass-text-primary)'}}>What's Hot</h2>
|
|
</div>
|
|
{userLocation && (
|
|
<span className="text-sm" style={{color: 'var(--glass-text-secondary)'}}>
|
|
Within {radius} miles
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Events Grid */}
|
|
<div className="p-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
{trendingEvents.map((event, _index) => {
|
|
const popularityBadge = getPopularityBadge(event.popularityScore);
|
|
return (
|
|
<div
|
|
key={event.eventId}
|
|
onClick={() => handleEventClick(event)}
|
|
className="group cursor-pointer rounded-lg p-4 transition-colors duration-200 border relative overflow-hidden backdrop-blur-lg"
|
|
style={{
|
|
background: 'var(--ui-bg-secondary)',
|
|
borderColor: 'var(--ui-border-primary)'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.target.style.background = 'var(--ui-bg-elevated)';
|
|
e.target.style.borderColor = 'var(--ui-border-secondary)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.target.style.background = 'var(--ui-bg-secondary)';
|
|
e.target.style.borderColor = 'var(--ui-border-primary)';
|
|
}}
|
|
>
|
|
{/* Popularity Badge */}
|
|
<div className={`absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-medium`} style={{color: 'var(--glass-text-primary)', backgroundColor: popularityBadge.color}}>
|
|
{popularityBadge.text}
|
|
</div>
|
|
|
|
{/* Event Image */}
|
|
{event.imageUrl && (
|
|
<div className="w-full h-32 rounded-lg mb-3 overflow-hidden" style={{background: 'var(--ui-bg-muted)'}}>
|
|
<img
|
|
src={event.imageUrl}
|
|
alt={event.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Event Content */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-start justify-between">
|
|
<h3 className="text-sm font-semibold line-clamp-2 pr-8" style={{color: 'var(--ui-text-primary)'}}>
|
|
{event.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="text-xs space-y-1" style={{color: 'var(--ui-text-secondary)'}}>
|
|
<div className="flex items-center">
|
|
<svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span className="truncate">{event.venue}</span>
|
|
</div>
|
|
|
|
{event.distanceMiles && (
|
|
<div className="flex items-center">
|
|
<svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>{event.distanceMiles.toFixed(1)} miles away</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center">
|
|
<svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>{formatEventTime(event.startTime)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Event Stats */}
|
|
<div className="flex items-center justify-between text-xs pt-2 border-t" style={{color: 'var(--ui-text-tertiary)', borderColor: 'var(--ui-border-secondary)'}}>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex items-center">
|
|
<svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
<span>{event.viewCount || 0}</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
|
</svg>
|
|
<span>{event.ticketsSold}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{event.isFeature && (
|
|
<div className="flex items-center">
|
|
<svg className="h-3 w-3 mr-1" style={{color: 'var(--premium-gold)'}} fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
</svg>
|
|
<span className="font-medium" style={{color: 'var(--premium-gold)'}}>Featured</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* View More Button */}
|
|
<div className="mt-6 text-center">
|
|
<button
|
|
onClick={() => window.location.href = '/calendar'}
|
|
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition-colors duration-200"
|
|
style={{
|
|
color: 'var(--glass-text-primary)',
|
|
background: 'linear-gradient(to right, var(--warning-color), var(--error-color))'
|
|
}}
|
|
onMouseEnter={(e) => e.target.style.background = 'linear-gradient(to right, var(--warning-color-dark), var(--error-color-dark))'}
|
|
onMouseLeave={(e) => e.target.style.background = 'linear-gradient(to right, var(--warning-color), var(--error-color))'}
|
|
>
|
|
View All Events
|
|
<svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WhatsHotEvents; |