74 lines
2.8 KiB
Svelte
74 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
let { data } = $props();
|
|
</script>
|
|
|
|
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Dashboard</h1>
|
|
|
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
<!-- Left Column: User Profile -->
|
|
<div class="lg:col-span-1">
|
|
<div class="flex h-full flex-col rounded-lg border border-gray-300 bg-white p-6">
|
|
<div class="flex flex-grow flex-col items-center text-center">
|
|
<div
|
|
class="mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-gray-200 text-4xl font-bold text-gray-600"
|
|
>
|
|
{data.profile?.display_name?.[0]?.toUpperCase() ?? 'U'}
|
|
</div>
|
|
<h2 class="text-xl font-semibold text-gray-900">{data.profile?.display_name}</h2>
|
|
<p class="text-sm text-gray-500">{data.user?.email}</p>
|
|
</div>
|
|
<div class="mt-6 text-center">
|
|
<a
|
|
href="/auth/signout"
|
|
class="text-sm text-red-500 transition hover:text-red-700 hover:underline">Sign Out</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Information -->
|
|
<div class="space-y-6 lg:col-span-2">
|
|
<!-- Role Information -->
|
|
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
|
<h2 class="mb-4 text-lg font-semibold text-gray-900">Your Role</h2>
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Section</dt>
|
|
<dd class="mt-1 text-sm font-semibold text-gray-900">
|
|
{data.profile?.section?.name ?? 'N/A'}
|
|
</dd>
|
|
</div>
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Position</dt>
|
|
<dd class="mt-1 text-sm font-semibold text-gray-900">
|
|
{data.profile?.section_position ?? 'N/A'}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<!-- User Guide -->
|
|
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
|
<h2 class="mb-2 text-lg font-semibold text-gray-900">User Guide</h2>
|
|
<p class="text-sm leading-relaxed text-gray-700">
|
|
To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click on "Start
|
|
Scanning" and allow camera permissions. If your camera gets stuck, simply refresh the page or
|
|
click "Stop Scanning" and then "Start Scanning" again. When you scan a QR code, the participant's
|
|
ticket is automatically marked as scanned.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Events Manager Guide -->
|
|
{#if data.profile?.section_position === 'events_manager'}
|
|
<div class="rounded-lg border border-gray-300 bg-white p-6">
|
|
<h2 class="mb-2 text-lg font-semibold text-gray-900">Events Manager Guide</h2>
|
|
<p class="text-sm leading-relaxed text-gray-700">
|
|
As an Events Manager, you have access to the <strong>Events</strong> section. Here you can
|
|
create new events, manage participants by syncing with Google Sheets, send email invitations
|
|
with QR codes, and view event statistics.
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|