dzinesco
425dfc9348
- Removed checkAuth() function and redirects from dashboard.astro - Removed checkAuth() function and redirects from events/new.astro - Updated to use Astro.cookies for better SSR compatibility - Client-side code now focuses on data loading, not authentication - Server-side unified auth system handles all protection 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
832 lines
38 KiB
Plaintext
832 lines
38 KiB
Plaintext
---
|
|
import Layout from '../layouts/Layout.astro';
|
|
import Navigation from '../components/Navigation.astro';
|
|
import { verifyAuth } from '../lib/auth';
|
|
|
|
// Enable server-side rendering for auth checks
|
|
export const prerender = false;
|
|
|
|
// Server-side auth check using cookies for better SSR compatibility
|
|
const auth = await verifyAuth(Astro.cookies);
|
|
if (!auth) {
|
|
return Astro.redirect('/login');
|
|
}
|
|
---
|
|
|
|
<Layout title="Dashboard - Black Canyon Tickets">
|
|
<style>
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-fadeInUp {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
}
|
|
|
|
.animate-slideIn {
|
|
animation: slideIn 0.5s ease-out forwards;
|
|
}
|
|
|
|
.hover-float:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Dark mode glass effects */
|
|
[data-theme="dark"] .glass-effect {
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .glass-card {
|
|
background: rgba(30, 41, 59, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .glass-card-content {
|
|
background: rgba(15, 23, 42, 0.9);
|
|
backdrop-filter: blur(5px);
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
/* Light mode solid effects - No glassmorphism */
|
|
[data-theme="light"] .glass-effect,
|
|
[data-theme="light"] .glass-card {
|
|
background: white !important;
|
|
backdrop-filter: none !important;
|
|
border: none !important;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
|
border-radius: 1rem !important;
|
|
}
|
|
|
|
[data-theme="light"] .glass-card-content {
|
|
background: transparent !important;
|
|
backdrop-filter: none !important;
|
|
padding: 0;
|
|
}
|
|
|
|
[data-theme="light"] .glass-card:hover {
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Remove all blur and transparency in light mode */
|
|
[data-theme="light"] * {
|
|
backdrop-filter: none !important;
|
|
}
|
|
|
|
[data-theme="light"] .event-card {
|
|
background: white !important;
|
|
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.bg-grid-pattern {
|
|
background-image:
|
|
linear-gradient(var(--grid-pattern) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--grid-pattern) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
</style>
|
|
|
|
<div class="min-h-screen" data-theme-background>
|
|
<!-- Animated background elements -->
|
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute -top-40 -right-40 w-80 h-80 rounded-full blur-3xl animate-pulse" style="background: var(--bg-orb-1);"></div>
|
|
<div class="absolute -bottom-40 -left-40 w-80 h-80 rounded-full blur-3xl animate-pulse" style="background: var(--bg-orb-2);"></div>
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full blur-3xl animate-pulse" style="background: var(--bg-orb-3);"></div>
|
|
</div>
|
|
|
|
<!-- Grid pattern is now integrated into bg-static-pattern -->
|
|
|
|
<Navigation title="Dashboard" />
|
|
|
|
<main class="relative max-w-7xl mx-auto py-8 sm:px-6 lg:px-8">
|
|
<div class="px-4 sm:px-0">
|
|
<!-- Dashboard Header -->
|
|
<div class="mb-12 animate-slideIn">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
|
|
<div>
|
|
<h1 class="text-4xl md:text-5xl font-light tracking-wide" style="color: var(--glass-text-primary);">Dashboard</h1>
|
|
<p class="mt-2 text-lg font-light" style="color: var(--glass-text-secondary);">Manage your events and track performance</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-4">
|
|
<button
|
|
id="toggle-view-btn"
|
|
type="button"
|
|
class="glass-card px-6 py-3 rounded-xl text-sm font-medium transition-all duration-200 shadow-lg flex items-center gap-2 hover:shadow-xl hover:scale-105"
|
|
style="color: var(--glass-text-primary);"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span id="view-text">Calendar View</span>
|
|
</button>
|
|
<a
|
|
href="/calendar"
|
|
class="glass-card px-6 py-3 rounded-xl text-sm font-medium transition-all duration-200 shadow-lg flex items-center gap-2 hover:shadow-xl hover:scale-105 hover:opacity-80"
|
|
style="color: var(--glass-text-primary);"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Fee Settings
|
|
</a>
|
|
<a
|
|
href="/onboarding/stripe"
|
|
class="btn-premium-gold px-6 py-3 rounded-xl text-sm font-medium transition-all duration-200 shadow-lg flex items-center gap-2 hover:shadow-xl hover:scale-105"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
|
</svg>
|
|
Stripe Setup
|
|
</a>
|
|
<a
|
|
href="/events/new"
|
|
class="px-6 py-3 rounded-xl text-sm font-medium transition-all duration-200 shadow-lg flex items-center gap-2 hover:shadow-xl hover:scale-105"
|
|
style="background: var(--glass-text-accent); color: white;"
|
|
data-light-shadow
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Create Event
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Stats Cards -->
|
|
<div id="stats-cards" class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
|
<!-- Stats will be populated here -->
|
|
</div>
|
|
|
|
<!-- Calendar View -->
|
|
<div id="calendar-view" class="hidden mb-8">
|
|
<div id="calendar-container"></div>
|
|
</div>
|
|
|
|
<!-- List View -->
|
|
<div id="list-view">
|
|
<div class="glass-card rounded-2xl shadow-lg overflow-hidden">
|
|
<div class="glass-card-content">
|
|
<div class="px-8 py-6 border-b" style="border-color: var(--glass-border);">
|
|
<h3 class="text-xl font-light tracking-wide" style="color: var(--glass-text-primary);">Your Events</h3>
|
|
</div>
|
|
<div class="p-8">
|
|
<div id="events-container" class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
<!-- Events will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loading" class="text-center py-16">
|
|
<div class="glass-card rounded-2xl shadow-lg p-12 max-w-md mx-auto">
|
|
<div class="glass-card-content">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-2 border-t-transparent mx-auto mb-6" style="border-color: var(--glass-text-accent); border-top-color: transparent;"></div>
|
|
<p class="font-light text-lg" style="color: var(--glass-text-secondary);">Loading your events...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="no-events" class="text-center py-16 hidden">
|
|
<div class="glass-card rounded-2xl shadow-lg p-16 max-w-lg mx-auto">
|
|
<div class="glass-card-content">
|
|
<div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: var(--glass-text-accent); opacity: 0.2;">
|
|
<svg class="h-10 w-10" style="color: var(--glass-text-accent);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-light mb-3 tracking-wide" style="color: var(--glass-text-primary);">No events yet</h3>
|
|
<p class="mb-8 text-lg font-light leading-relaxed" style="color: var(--glass-text-secondary);">Get started by creating your first event and start selling tickets.</p>
|
|
<a
|
|
href="/events/new"
|
|
class="inline-flex items-center gap-2 px-6 py-3 text-white font-medium rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105"
|
|
style="background: var(--glass-text-accent); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Create Your First Event
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</Layout>
|
|
|
|
<script>
|
|
// Theme persistence and initialization
|
|
function initializeTheme() {
|
|
// Get saved theme or use system preference, fallback to 'dark'
|
|
const savedTheme = localStorage.getItem('theme') ||
|
|
(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') ||
|
|
'dark';
|
|
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
document.documentElement.classList.remove('light', 'dark');
|
|
document.documentElement.classList.add(savedTheme);
|
|
|
|
// Store the theme for consistency
|
|
localStorage.setItem('theme', savedTheme);
|
|
window.__INITIAL_THEME__ = savedTheme;
|
|
|
|
updateBackground();
|
|
}
|
|
|
|
// Theme-aware background handling
|
|
function updateBackground() {
|
|
const theme = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
const bgElement = document.querySelector('[data-theme-background]');
|
|
if (bgElement) {
|
|
if (theme === 'light') {
|
|
// Light mode gets solid clean background
|
|
bgElement.style.background = '#f8fafc';
|
|
} else {
|
|
// Dark mode gets rich dark background with gradient - use CSS variable
|
|
bgElement.style.background = 'var(--bg-gradient)';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Listen for theme changes from other components
|
|
window.addEventListener('themeChanged', (e) => {
|
|
const newTheme = e.detail?.theme || document.documentElement.getAttribute('data-theme');
|
|
if (newTheme) {
|
|
localStorage.setItem('theme', newTheme);
|
|
updateBackground();
|
|
}
|
|
});
|
|
|
|
// Initialize immediately
|
|
initializeTheme();
|
|
|
|
// Also initialize on DOM ready as fallback
|
|
document.addEventListener('DOMContentLoaded', initializeTheme);
|
|
</script>
|
|
|
|
<script>
|
|
import { supabase } from '../lib/supabase';
|
|
|
|
const eventsContainer = document.getElementById('events-container');
|
|
const loading = document.getElementById('loading');
|
|
const noEvents = document.getElementById('no-events');
|
|
const toggleViewBtn = document.getElementById('toggle-view-btn');
|
|
const viewText = document.getElementById('view-text');
|
|
const calendarView = document.getElementById('calendar-view');
|
|
const listView = document.getElementById('list-view');
|
|
const calendarContainer = document.getElementById('calendar-container');
|
|
const statsCards = document.getElementById('stats-cards');
|
|
|
|
let currentView = 'list';
|
|
let allEvents = [];
|
|
|
|
// Handle Stripe onboarding completion from URL parameters
|
|
function handleOnboardingSuccess() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get('stripe_onboarding') === 'completed') {
|
|
// Show success notification
|
|
showSuccessNotification('Payment processing setup completed successfully! You can now start accepting payments for your events.');
|
|
|
|
// Clean up URL
|
|
const newUrl = window.location.pathname;
|
|
window.history.replaceState({}, document.title, newUrl);
|
|
}
|
|
}
|
|
|
|
// Show success notification
|
|
function showSuccessNotification(message) {
|
|
// Create notification element
|
|
const notification = document.createElement('div');
|
|
notification.innerHTML = `
|
|
<div class="fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg z-50 max-w-md" style="background: var(--success-color); color: white;">
|
|
<div class="flex items-start space-x-3">
|
|
<svg class="w-6 h-6 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<h4 class="font-semibold mb-1">Success!</h4>
|
|
<p class="text-sm">${message}</p>
|
|
</div>
|
|
<button onclick="this.closest('div').parentElement.remove()" class="ml-4 text-green-200 hover:text-white">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(notification.firstElementChild);
|
|
|
|
// Auto-remove after 8 seconds
|
|
setTimeout(() => {
|
|
const element = notification.firstElementChild;
|
|
if (element && element.parentNode) {
|
|
element.remove();
|
|
}
|
|
}, 8000);
|
|
}
|
|
|
|
// Note: Authentication is now handled server-side by unified auth system
|
|
|
|
// Load events
|
|
async function loadEvents() {
|
|
try {
|
|
// Get current user (auth already verified server-side)
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
|
|
if (!user) {
|
|
// This shouldn't happen due to server-side auth, but handle gracefully
|
|
console.error('No user found despite server-side auth');
|
|
loading.innerHTML = `
|
|
<div class="rounded-xl p-6 max-w-md mx-auto" style="background: var(--error-bg); border: 1px solid var(--error-border);">
|
|
<p class="font-medium" style="color: var(--error-color);">Session error</p>
|
|
<p class="text-sm mt-2" style="color: var(--error-color); opacity: 0.8;">Please refresh the page</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const { data: userProfile, error: userError } = await supabase
|
|
.from('users')
|
|
.select('organization_id, role')
|
|
.eq('id', user.id)
|
|
.single();
|
|
|
|
if (userError) {
|
|
// Error loading user profile
|
|
loading.innerHTML = `
|
|
<div class="rounded-xl p-6 max-w-md mx-auto" style="background: var(--error-bg); border: 1px solid var(--error-border);">
|
|
<p class="font-medium" style="color: var(--error-color);">Error loading user profile</p>
|
|
<p class="text-sm mt-2" style="color: var(--error-color); opacity: 0.8;">${userError.message || userError}</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// User profile loaded successfully
|
|
|
|
// Check if user is admin or has organization_id
|
|
const isAdmin = userProfile?.role === 'admin';
|
|
if (!isAdmin && !userProfile?.organization_id) {
|
|
// User has no organization_id and is not admin, showing no events
|
|
loading.classList.add('hidden');
|
|
noEvents.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
// Load events based on user permissions
|
|
let query = supabase.from('events').select('*');
|
|
|
|
if (!isAdmin) {
|
|
// Regular users see only their organization's events
|
|
query = query.eq('organization_id', userProfile.organization_id);
|
|
}
|
|
// Admins see all events (no filter)
|
|
|
|
const { data: events, error } = await query.order('created_at', { ascending: false });
|
|
|
|
if (error) {
|
|
// Error loading events from database
|
|
throw error;
|
|
}
|
|
|
|
// Successfully loaded events
|
|
allEvents = events || [];
|
|
loading.classList.add('hidden');
|
|
|
|
if (allEvents.length === 0) {
|
|
noEvents.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
renderStatsCards();
|
|
renderListView();
|
|
if (currentView === 'calendar') {
|
|
renderCalendarView();
|
|
}
|
|
} catch (error) {
|
|
// Error loading events
|
|
loading.innerHTML = `
|
|
<div class="rounded-xl p-6 max-w-md mx-auto" style="background: var(--error-bg); border: 1px solid var(--error-border);">
|
|
<p class="font-medium" style="color: var(--error-color);">Error loading events</p>
|
|
<p class="text-sm mt-2" style="color: var(--error-color); opacity: 0.8;">${error.message || error}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Render stats cards
|
|
function renderStatsCards() {
|
|
const totalEvents = allEvents.length;
|
|
const upcomingEvents = allEvents.filter(event => new Date(event.start_time) > new Date()).length;
|
|
const pastEvents = totalEvents - upcomingEvents;
|
|
|
|
statsCards.innerHTML = `
|
|
<div class="glass-card rounded-2xl shadow-lg p-8 premium-hover cursor-pointer group">
|
|
<div class="glass-card-content">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-semibold uppercase tracking-wider" style="color: var(--glass-text-secondary);">Total Events</p>
|
|
<p class="text-3xl font-light mt-2 transition-colors animate-countUp" style="color: var(--glass-text-primary);">${totalEvents}</p>
|
|
<div class="flex items-center mt-1">
|
|
<span class="text-xs flex items-center" style="color: var(--glass-text-tertiary);">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
All time
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300" style="background: var(--glass-text-accent); opacity: 0.15;">
|
|
<svg class="w-8 h-8" style="color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-card rounded-2xl shadow-lg p-8 premium-hover cursor-pointer group" style="--card-accent: var(--success-color);">
|
|
<div class="glass-card-content">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-semibold uppercase tracking-wider" style="color: var(--success-color);">Upcoming Events</p>
|
|
<p class="text-3xl font-light mt-2 transition-colors animate-countUp" style="color: var(--success-color);">${upcomingEvents}</p>
|
|
<div class="flex items-center mt-1">
|
|
<span class="text-xs flex items-center" style="color: var(--success-color); opacity: 0.8;">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
|
</svg>
|
|
Ready to launch
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300" style="background: var(--success-color); opacity: 0.15;">
|
|
<svg class="w-8 h-8" style="color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-card rounded-2xl shadow-lg p-8 premium-hover cursor-pointer group" style="--card-accent: var(--premium-gold);">
|
|
<div class="glass-card-content">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-semibold uppercase tracking-wider" style="color: var(--premium-gold);">Past Events</p>
|
|
<p class="text-3xl font-light mt-2 transition-colors animate-countUp" style="color: var(--premium-gold);">${pastEvents}</p>
|
|
<div class="flex items-center mt-1">
|
|
<span class="text-xs flex items-center" style="color: var(--premium-gold); opacity: 0.8;">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Completed
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300" style="background: var(--premium-gold); opacity: 0.15;">
|
|
<svg class="w-8 h-8" style="color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Render list view
|
|
function renderListView() {
|
|
eventsContainer.innerHTML = allEvents.map((event, index) => {
|
|
const eventDate = new Date(event.start_time);
|
|
const isUpcoming = eventDate > new Date();
|
|
const formattedDate = eventDate.toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
const formattedTime = eventDate.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit'
|
|
});
|
|
|
|
const animationDelay = index * 0.1;
|
|
return `
|
|
<div class="glass-card event-card rounded-2xl shadow-lg overflow-hidden group hover:shadow-lg hover:translate-y-px transition-all duration-200">
|
|
<div class="glass-card-content">
|
|
<div class="p-8">
|
|
<div class="flex items-start justify-between mb-6">
|
|
<div class="flex-1">
|
|
<h3 class="text-xl font-light mb-4 tracking-wide" style="color: var(--glass-text-primary);">${event.title}</h3>
|
|
<div class="flex items-center text-sm mb-3" style="color: var(--glass-text-secondary);">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
${event.venue}
|
|
</div>
|
|
<div class="flex items-center text-sm mb-6" style="color: var(--glass-text-secondary);">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
${formattedDate} at ${formattedTime}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start ml-4">
|
|
<span class="px-3 py-1 text-xs font-semibold rounded-full transition-all duration-200 ease-out" style="${isUpcoming ? 'background: var(--success-bg); color: var(--success-color); border: 1px solid var(--success-border);' : 'background: var(--glass-bg); color: var(--glass-text-tertiary); border: 1px solid var(--glass-border);'}">
|
|
${isUpcoming ? 'Upcoming' : 'Past'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
${event.description ? `<p class="text-sm mb-6 leading-relaxed group-hover:opacity-80 transition-colors" style="color: var(--glass-text-tertiary);">${event.description}</p>` : ''}
|
|
|
|
<div class="flex items-center justify-between pt-6 border-t" style="border-color: var(--glass-border);">
|
|
<div class="flex space-x-3">
|
|
<a
|
|
href="/events/${event.id}/manage"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-lg hover:-translate-y-0.5 hover:scale-105"
|
|
style="background: var(--glass-text-accent); color: white;"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Manage
|
|
</a>
|
|
<a
|
|
href="/e/${event.slug}"
|
|
class="glass-card inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-lg hover:-translate-y-0.5 hover:scale-105"
|
|
style="color: var(--glass-text-primary);"
|
|
target="_blank"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
Preview
|
|
</a>
|
|
</div>
|
|
<div class="text-xs font-medium" style="color: var(--glass-text-tertiary);">
|
|
Created ${new Date(event.created_at).toLocaleDateString()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// Render calendar view
|
|
function renderCalendarView() {
|
|
// Initialize calendar with current date or previously selected date
|
|
calendarContainer.innerHTML = createSimpleCalendar(allEvents, currentCalendarYear, currentCalendarMonth);
|
|
}
|
|
|
|
// Enhanced calendar HTML generator with mobile responsiveness
|
|
function createSimpleCalendar(events, year, month) {
|
|
const monthNames = [
|
|
'January', 'February', 'March', 'April', 'May', 'June',
|
|
'July', 'August', 'September', 'October', 'November', 'December'
|
|
];
|
|
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
const firstDay = new Date(year, month, 1).getDay();
|
|
|
|
let html = `
|
|
<div class="glass-card rounded-2xl shadow-lg overflow-hidden">
|
|
<div class="glass-card-content">
|
|
<!-- Calendar Header -->
|
|
<div class="px-8 py-6 border-b" style="border-color: var(--glass-border);">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-2xl font-light tracking-wide" style="color: var(--glass-text-primary);">${monthNames[month]} ${year}</h3>
|
|
<div class="flex gap-3">
|
|
<button onclick="navigateMonth(-1)" class="glass-card p-3 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105" style="color: var(--glass-text-secondary);">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<button onclick="navigateMonth(1)" class="glass-card p-3 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105" style="color: var(--glass-text-secondary);">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendar Body -->
|
|
<div class="p-4 sm:p-6">
|
|
<!-- Day Headers -->
|
|
<div class="grid grid-cols-7 gap-1 mb-4">
|
|
<div class="text-center text-xs sm:text-sm font-semibold py-2" style="color: var(--glass-text-secondary);">Sun</div>
|
|
<div class="text-center text-xs sm:text-sm font-semibold py-2" style="color: var(--glass-text-secondary);">Mon</div>
|
|
<div class="text-center text-xs sm:text-sm font-semibold py-2" style="color: var(--glass-text-secondary);">Tue</div>
|
|
<div class="text-center text-xs sm:text-sm font-semibold py-2" style="color: var(--glass-text-secondary);">Wed</div>
|
|
<div class="text-center text-xs sm:text-sm font-semibold py-2" style="color: var(--glass-text-secondary);">Thu</div>
|
|
<div class="text-center text-xs sm:text-sm font-semibold py-2" style="color: var(--glass-text-secondary);">Fri</div>
|
|
<div class="text-center text-xs sm:text-sm font-semibold py-2" style="color: var(--glass-text-secondary);">Sat</div>
|
|
</div>
|
|
|
|
<!-- Calendar Grid -->
|
|
<div class="grid grid-cols-7 gap-1 sm:gap-2">
|
|
`;
|
|
|
|
// Empty cells for days before month starts
|
|
for (let i = 0; i < firstDay; i++) {
|
|
html += '<div class="aspect-square"></div>';
|
|
}
|
|
|
|
// Days of the month
|
|
for (let day = 1; day <= daysInMonth; day++) {
|
|
const dayEvents = events.filter(event => {
|
|
const eventDate = new Date(event.start_time);
|
|
return eventDate.getDate() === day &&
|
|
eventDate.getMonth() === month &&
|
|
eventDate.getFullYear() === year;
|
|
});
|
|
|
|
const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
|
|
const hasEvents = dayEvents.length > 0;
|
|
|
|
html += `
|
|
<div class="aspect-square rounded-lg p-1 sm:p-2 transition-colors cursor-pointer ${
|
|
isToday ? 'ring-2' : ''
|
|
}" style="${
|
|
isToday ? 'background: rgba(96, 165, 250, 0.2); border: 1px solid rgb(96, 165, 250); ring-color: rgba(96, 165, 250, 0.3); color: rgb(96, 165, 250);' :
|
|
hasEvents ? 'border: 1px solid var(--glass-border); background: var(--glass-bg);' : 'border: 1px solid var(--glass-border);'
|
|
}" onclick="showDayEvents(${year}, ${month}, ${day})">
|
|
<div class="h-full flex flex-col">
|
|
<div class="text-xs sm:text-sm font-semibold mb-1" style="color: ${
|
|
isToday ? 'rgb(96, 165, 250)' : 'var(--glass-text-primary)'
|
|
};">${day}</div>
|
|
|
|
<!-- Mobile: Show event dots -->
|
|
<div class="flex-1 sm:hidden">
|
|
${dayEvents.length > 0 ? `
|
|
<div class="flex flex-wrap gap-0.5">
|
|
${dayEvents.slice(0, 3).map(() => `
|
|
<div class="w-1.5 h-1.5 rounded-full" style="background: var(--glass-text-accent);"></div>
|
|
`).join('')}
|
|
${dayEvents.length > 3 ? '<div class="text-xs" style="color: var(--glass-text-tertiary);">+</div>' : ''}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
|
|
<!-- Desktop: Show event titles -->
|
|
<div class="hidden sm:block flex-1 space-y-1 overflow-hidden">
|
|
${dayEvents.slice(0, 2).map(event => `
|
|
<div class="text-xs rounded px-1.5 py-0.5 truncate font-medium"
|
|
style="background: var(--glass-bg-button); color: var(--glass-text-accent);"
|
|
title="${event.title} at ${event.venue}">
|
|
${event.title}
|
|
</div>
|
|
`).join('')}
|
|
${dayEvents.length > 2 ? `<div class="text-xs font-medium" style="color: var(--glass-text-tertiary);">+${dayEvents.length - 2} more</div>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += `
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Event List (shows when day is clicked) -->
|
|
<div id="mobile-day-events" class="hidden sm:hidden mt-4 glass-card rounded-xl shadow-lg p-4">
|
|
<div class="glass-card-content">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h4 id="selected-day-title" class="font-semibold" style="color: var(--glass-text-primary);"></h4>
|
|
<button onclick="hideMobileDayEvents()" class="glass-card p-1 rounded" style="color: var(--glass-text-secondary);">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="selected-day-events" class="space-y-2">
|
|
<!-- Events will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return html;
|
|
}
|
|
|
|
// Calendar navigation
|
|
let currentCalendarYear = new Date().getFullYear();
|
|
let currentCalendarMonth = new Date().getMonth();
|
|
|
|
window.navigateMonth = function(direction) {
|
|
currentCalendarMonth += direction;
|
|
if (currentCalendarMonth < 0) {
|
|
currentCalendarMonth = 11;
|
|
currentCalendarYear--;
|
|
} else if (currentCalendarMonth > 11) {
|
|
currentCalendarMonth = 0;
|
|
currentCalendarYear++;
|
|
}
|
|
calendarContainer.innerHTML = createSimpleCalendar(allEvents, currentCalendarYear, currentCalendarMonth);
|
|
};
|
|
|
|
// Show day events on mobile
|
|
window.showDayEvents = function(year, month, day) {
|
|
const dayEvents = allEvents.filter(event => {
|
|
const eventDate = new Date(event.start_time);
|
|
return eventDate.getDate() === day &&
|
|
eventDate.getMonth() === month &&
|
|
eventDate.getFullYear() === year;
|
|
});
|
|
|
|
if (dayEvents.length === 0) return;
|
|
|
|
const monthNames = [
|
|
'January', 'February', 'March', 'April', 'May', 'June',
|
|
'July', 'August', 'September', 'October', 'November', 'December'
|
|
];
|
|
|
|
const mobileDayEvents = document.getElementById('mobile-day-events');
|
|
const selectedDayTitle = document.getElementById('selected-day-title');
|
|
const selectedDayEventsContainer = document.getElementById('selected-day-events');
|
|
|
|
selectedDayTitle.textContent = `${monthNames[month]} ${day}, ${year}`;
|
|
selectedDayEventsContainer.innerHTML = dayEvents.map(event => `
|
|
<div class="glass-card flex items-start gap-3 p-3 rounded-lg">
|
|
<div class="glass-card-content">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-2 h-2 rounded-full mt-2 flex-shrink-0" style="background: var(--glass-text-accent);"></div>
|
|
<div class="flex-1 min-w-0">
|
|
<h5 class="font-medium text-sm" style="color: var(--glass-text-primary);">${event.title}</h5>
|
|
<p class="text-xs mt-1" style="color: var(--glass-text-secondary);">${event.venue}</p>
|
|
<p class="text-xs mt-1" style="color: var(--glass-text-tertiary);">${new Date(event.start_time).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
mobileDayEvents.classList.remove('hidden');
|
|
};
|
|
|
|
window.hideMobileDayEvents = function() {
|
|
document.getElementById('mobile-day-events').classList.add('hidden');
|
|
};
|
|
|
|
// Toggle between views
|
|
function toggleView() {
|
|
if (currentView === 'list') {
|
|
currentView = 'calendar';
|
|
viewText.textContent = 'List View';
|
|
calendarView.classList.remove('hidden');
|
|
listView.classList.add('hidden');
|
|
renderCalendarView();
|
|
} else {
|
|
currentView = 'list';
|
|
viewText.textContent = 'Calendar View';
|
|
calendarView.classList.add('hidden');
|
|
listView.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
toggleViewBtn.addEventListener('click', toggleView);
|
|
|
|
// Initialize
|
|
// Handle onboarding success on page load
|
|
handleOnboardingSuccess();
|
|
|
|
// Load events directly (auth already verified server-side)
|
|
loadEvents();
|
|
</script> |