OSIT-AE-App-Svelte/src/routes/events/[event_id]/+page.svelte

<script lang="ts">
    import { liveQuery } from 'dexie';
    import { db_events } from '$lib/ae_events/db_events';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import { events_slct } from '$lib/stores/ae_events_stores';
    import { ae_loc } from '$lib/stores/ae_stores';

    interface Props {
        data: any;
    }
    let { data }: Props = $props();

    let lq__event_obj = $derived(
        liveQuery(async () => {
            return await db_events.event.get($events_slct?.event_id ?? '');
        })
    );

    const modules = [
        {
            name: 'Presentation Management',
            path: 'pres_mgmt',
            icon: 'fas fa-chalkboard-teacher',
            description: 'Manage sessions, presentations, and presenters.',
            color: 'preset-filled-primary-200-800',
            access: 'authenticated_access'
        },
        {
            name: 'Launcher',
            path: 'launcher',
            icon: 'fas fa-plane',
            description: 'Launch presentations and manage live session display.',
            color: 'preset-filled-secondary-200-800',
            access: 'authenticated_access'
        },
        {
            name: 'Badges',
            path: 'badges',
            icon: 'fas fa-id-badge',
            description: 'Manage and print event badges.',
            color: 'preset-filled-tertiary-200-800',
            access: 'authenticated_access'
        },
        {
            name: 'Leads',
            path: 'leads',
            icon: 'fas fa-address-card',
            description: 'Exhibitor lead retrieval and management.',
            color: 'preset-filled-success-200-800',
            access: 'authenticated_access'
        }
    ];

    let filtered_modules = $derived(
        modules.filter(mod => {
            if (mod.access === 'authenticated_access') return $ae_loc.authenticated_access;
            if (mod.access === 'trusted_access') return $ae_loc.trusted_access;
            if (mod.access === 'administrator_access') return $ae_loc.administrator_access;
            return true;
        })
    );
</script>

<svelte:head>
    <title>
        &AElig;: {$lq__event_obj?.name ?? 'Event'} Hub
    </title>
</svelte:head>

<div class="container mx-auto p-4 space-y-8">
    <header class="text-center space-y-2">
        <h1 class="text-4xl font-bold">
            {$lq__event_obj?.name ?? 'Event Hub'}
        </h1>
        <p class="text-xl opacity-70">
            Welcome to the event management dashboard. Please select a module to begin.
        </p>
    </header>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {#each filtered_modules as mod}
            <a
                href="/events/{$events_slct.event_id}/{mod.path}"
                class="card card-hover p-6 flex flex-col items-center text-center space-y-4 transition-transform hover:scale-105 bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-lg"
            >
                <div class="p-6 rounded-full {mod.color} text-white text-4xl">
                    <span class={mod.icon}></span>
                </div>
                <h3 class="text-2xl font-bold">{mod.name}</h3>
                <p class="opacity-80">{mod.description}</p>
            </a>
        {/each}
    </div>

    {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
        <section class="card p-6 variant-soft-warning border-l-4 border-warning-500 mt-12 bg-surface-100 dark:bg-surface-800 shadow-lg">
            <div class="flex items-center gap-4">
                <span class="fas fa-tools text-3xl"></span>
                <div>
                    <h3 class="text-xl font-bold">Event Admin Settings</h3>
                    <p>You have elevated privileges. Use the menu above to access advanced settings and reports.</p>
                </div>
                <a href="/events/{$events_slct.event_id}/settings" class="btn ae_btn_warning ml-auto">
                    Event Settings
                </a>
            </div>
        </section>
    {/if}
</div>

<style>
</style>