From 48e2944eba984bd79c344811c313ae007fe02e37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Sat, 12 Jul 2025 15:03:23 +0200
Subject: [PATCH] Event view impovements

---
 .../events/event/archived/+page.svelte        |  62 ++-------
 .../components/EventInformation.svelte        |  28 ++++
 .../archived/components/Statistics.svelte     |  73 ++++++++++
 .../private/events/event/view/+page.svelte    |  27 +++-
 .../view/components/EmailSendingFixed.svelte  |  94 +++++++++++++
 .../view/components/ParticipantsTable.svelte  |   2 +-
 .../event/view/components/Statistics.svelte   | 127 ++++++++++++++++++
 7 files changed, 357 insertions(+), 56 deletions(-)
 create mode 100644 src/routes/private/events/event/archived/components/EventInformation.svelte
 create mode 100644 src/routes/private/events/event/archived/components/Statistics.svelte
 create mode 100644 src/routes/private/events/event/view/components/EmailSendingFixed.svelte
 create mode 100644 src/routes/private/events/event/view/components/Statistics.svelte

diff --git a/src/routes/private/events/event/archived/+page.svelte b/src/routes/private/events/event/archived/+page.svelte
index 37cdb56..050d66d 100644
--- a/src/routes/private/events/event/archived/+page.svelte
+++ b/src/routes/private/events/event/archived/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-    import { page } from '$app/state';
+  import { page } from '$app/state';
+  import EventInformation from './components/EventInformation.svelte';
+  import Statistics from './components/Statistics.svelte';
 
 	let { data } = $props();
 
@@ -37,52 +39,16 @@
 
 <h1 class="mt-2 mb-4 text-center text-2xl font-bold">Archived Event Overview</h1>
 
-<div class="mb-2 rounded border border-gray-300 bg-white p-4">
-	<div class="flex flex-col gap-1">
-		{#if loading}
-			<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
-			<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
-		{:else}
-			<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
-			<span class="text-black-500 text-sm">{event_data?.date}</span>
-		{/if}
-	</div>
-</div>
+<EventInformation 
+  event={event_data}
+  loading={loading} 
+/>
 
-<div class="mb-2 rounded border border-gray-300 bg-white p-4">
-    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <div class="flex items-center justify-center gap-2">
-            <svg
-                class="inline h-4 w-4 text-blue-600"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-            >
-                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
-            </svg>
-            {#if loading}
-                <div class="h-4 w-20 bg-gray-200 rounded animate-pulse"></div>
-            {:else}
-                <span class="text-sm text-gray-700">Total participants ({event_data?.total_participants})</span>
-            {/if}
-        </div>
-        <div class="hidden sm:block h-8 w-px bg-gray-300"></div>
-        <div class="flex items-center justify-center gap-2">
-            <svg
-                class="inline h-4 w-4 text-green-600"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-            >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-            </svg>
-            {#if loading}
-                <div class="h-4 w-28 bg-gray-200 rounded animate-pulse"></div>
-            {:else}
-                <span class="text-sm text-gray-700">Scanned participants ({event_data?.scanned_participants})</span>
-            {/if}
-        </div>
-    </div>
+<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
+  <h2 class="mb-4 text-lg font-semibold text-gray-900">Event Statistics</h2>
+  <Statistics 
+    loading={loading}
+    totalParticipants={event_data?.total_participants ?? 0}
+    scannedParticipants={event_data?.scanned_participants ?? 0}
+  />
 </div>
diff --git a/src/routes/private/events/event/archived/components/EventInformation.svelte b/src/routes/private/events/event/archived/components/EventInformation.svelte
new file mode 100644
index 0000000..baae233
--- /dev/null
+++ b/src/routes/private/events/event/archived/components/EventInformation.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface ArchivedEvent {
+    name: string;
+    date: string;
+  }
+
+  let { event, loading } = $props<{
+    event: ArchivedEvent | null;
+    loading: boolean;
+  }>();
+</script>
+
+<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
+  <div class="flex flex-col gap-1">
+    {#if loading}
+      <div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
+      <div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
+    {:else}
+      <h2 class="mb-2 text-2xl font-semibold text-gray-900">{event?.name}</h2>
+      <div class="space-y-3">
+        <div class="flex items-center">
+          <span class="w-20 text-sm font-medium text-gray-500">Date:</span>
+          <span class="text-sm text-gray-900">{event?.date}</span>
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/routes/private/events/event/archived/components/Statistics.svelte b/src/routes/private/events/event/archived/components/Statistics.svelte
new file mode 100644
index 0000000..526483b
--- /dev/null
+++ b/src/routes/private/events/event/archived/components/Statistics.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  let { 
+    loading,
+    totalParticipants,
+    scannedParticipants
+  } = $props<{
+    loading: boolean;
+    totalParticipants: number;
+    scannedParticipants: number;
+  }>();
+</script>
+
+<div class="overflow-x-auto">
+  <table class="min-w-full">
+    <thead class="bg-gray-50">
+      <tr>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Category</th>
+        <th class="px-4 py-2 text-right text-sm font-medium text-gray-700">Count</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Total participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-center gap-2">
+            <svg
+              class="inline h-4 w-4 text-blue-600"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+            >
+              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+            <span class="text-sm font-medium text-gray-700">Total participants</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{totalParticipants}</span>
+          {/if}
+        </td>
+      </tr>
+      
+      <!-- Scanned participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-center gap-2">
+            <svg
+              class="inline h-4 w-4 text-green-600"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            <span class="text-sm font-medium text-gray-700">Scanned participants</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{scannedParticipants}</span>
+          {/if}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/routes/private/events/event/view/+page.svelte b/src/routes/private/events/event/view/+page.svelte
index d9f4413..5a36662 100644
--- a/src/routes/private/events/event/view/+page.svelte
+++ b/src/routes/private/events/event/view/+page.svelte
@@ -10,6 +10,7 @@
 	import EmailSending from './components/EmailSending.svelte';
 	import EmailResults from './components/EmailResults.svelte';
 	import ErrorMessage from './components/ErrorMessage.svelte';
+	import Statistics from './components/Statistics.svelte';
 
 	let { data } = $props();
 
@@ -262,7 +263,6 @@
 <!-- Composable components -->
 <EventInformation {event} {loading} {error} />
 
-<EmailTemplate {event} {loading} />
 <GoogleAuthentication 
 	{loading} 
 	onSuccess={handleGoogleAuthSuccess} 
@@ -270,14 +270,27 @@
 />
 
 <ParticipantsTable
-  {event}
-  {participants}
-  {loading}
-  participantsLoading={participantsLoading}
-  syncingParticipants={syncingParticipants}
-  onSyncParticipants={syncParticipants}
+{event}
+{participants}
+{loading}
+participantsLoading={participantsLoading}
+syncingParticipants={syncingParticipants}
+onSyncParticipants={syncParticipants}
 />
 
+<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
+	<h2 class="mb-4 text-xl font-semibold text-gray-900">Statistics</h2>
+	<Statistics 
+		loading={loading || participantsLoading}
+		totalCount={participants.length}
+		scannedCount={participants.filter(p => p.scanned).length}
+		emailSentCount={participants.filter(p => p.email_sent).length}
+		pendingCount={participants.filter(p => !p.email_sent).length}
+	/>
+</div>
+
+<EmailTemplate {event} {loading} />
+
 <EmailSending 
   {loading}
   {participants}
diff --git a/src/routes/private/events/event/view/components/EmailSendingFixed.svelte b/src/routes/private/events/event/view/components/EmailSendingFixed.svelte
new file mode 100644
index 0000000..0e27113
--- /dev/null
+++ b/src/routes/private/events/event/view/components/EmailSendingFixed.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  interface Participant {
+    id: string;
+    email_sent: boolean;
+  }
+
+  interface EmailProgress {
+    sent: number;
+    total: number;
+  }
+
+  let { 
+    loading,
+    participants, 
+    sendingEmails, 
+    emailProgress,
+    event,
+    onSendEmails
+  } = $props<{
+    loading: boolean;
+    participants: Participant[];
+    sendingEmails: boolean;
+    emailProgress: EmailProgress;
+    event: any | null;
+    onSendEmails: () => void;
+  }>();
+  
+  // Using the $derived rune to calculate uncontacted participants
+  let uncontactedParticipantsCount = $derived(participants.filter(p => !p.email_sent).length);
+</script>
+
+<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+  <div class="mb-4 flex items-center justify-between">
+    <h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
+    {#if !loading}
+      <div class="text-sm text-gray-500">
+        {uncontactedParticipantsCount} uncontacted participants
+      </div>
+    {:else}
+      <div class="text-sm text-gray-500">
+        Loading participants...
+      </div>
+    {/if}
+  </div>
+
+  {#if loading}
+    <div class="h-16 w-full animate-pulse rounded bg-gray-200"></div>
+  {:else if sendingEmails}
+    <div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
+      <div class="flex items-center justify-center">
+        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <span class="text-blue-800 font-medium">Sending {emailProgress.total} emails... Please wait.</span>
+      </div>
+    </div>
+  {:else}
+    <div class="space-y-4">
+      {#if uncontactedParticipantsCount > 0}
+        <div class="rounded-lg bg-yellow-50 p-4 border border-yellow-200">
+          <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-yellow-800 text-sm sm:text-base">
+              <strong>Warning:</strong> Do not close this window while emails are being sent. The process may take several minutes.
+            </span>
+          </div>
+        </div>
+        
+        <div class="flex items-center justify-end">
+          <button
+            onclick={onSendEmails}
+            disabled={!event || uncontactedParticipantsCount === 0}
+            class="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Send Emails
+          </button>
+        </div>
+      {:else}
+        <div class="text-center py-4">
+          <div class="flex items-center justify-center text-green-600 mb-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <p class="text-green-700 font-medium">All participants have been contacted!</p>
+          <p class="text-sm text-green-600">No pending emails to send.</p>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
diff --git a/src/routes/private/events/event/view/components/ParticipantsTable.svelte b/src/routes/private/events/event/view/components/ParticipantsTable.svelte
index 5595401..1660920 100644
--- a/src/routes/private/events/event/view/components/ParticipantsTable.svelte
+++ b/src/routes/private/events/event/view/components/ParticipantsTable.svelte
@@ -30,7 +30,7 @@
   }>();
 </script>
 
-<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
   <div class="mb-4 flex items-center justify-between">
     <h2 class="text-xl font-semibold text-gray-900">Participants</h2>
     <button
diff --git a/src/routes/private/events/event/view/components/Statistics.svelte b/src/routes/private/events/event/view/components/Statistics.svelte
new file mode 100644
index 0000000..f657d59
--- /dev/null
+++ b/src/routes/private/events/event/view/components/Statistics.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+  let { 
+    loading,
+    totalCount,
+    scannedCount,
+    emailSentCount,
+    pendingCount 
+  } = $props<{
+    loading: boolean;
+    totalCount: number;
+    scannedCount: number;
+    emailSentCount: number;
+    pendingCount: number;
+  }>();
+</script>
+
+<div class="overflow-x-auto">
+  <table class="min-w-full">
+    <thead class="bg-gray-50">
+      <tr>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Category</th>
+        <th class="px-4 py-2 text-right text-sm font-medium text-gray-700">Count</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Total participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-center gap-2">
+            <svg
+              class="inline h-4 w-4 text-blue-600"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+            >
+              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+            <span class="text-sm font-medium text-gray-700">Total participants</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{totalCount}</span>
+          {/if}
+        </td>
+      </tr>
+      
+      <!-- Scanned participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-center gap-2">
+            <svg
+              class="inline h-4 w-4 text-green-600"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            <span class="text-sm font-medium text-gray-700">Scanned participants</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{scannedCount}</span>
+          {/if}
+        </td>
+      </tr>
+      
+      <!-- Email sent participants -->
+      <tr class="border-b border-gray-100">
+        <td class="px-4 py-3">
+          <div class="flex items-center gap-2">
+            <svg
+              class="inline h-4 w-4 text-blue-600"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+            <span class="text-sm font-medium text-gray-700">Email sent</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{emailSentCount}</span>
+          {/if}
+        </td>
+      </tr>
+      
+      <!-- Pending participants -->
+      <tr>
+        <td class="px-4 py-3">
+          <div class="flex items-center gap-2">
+            <svg
+              class="inline h-4 w-4 text-amber-500"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span class="text-sm font-medium text-gray-700">Pending emails</span>
+          </div>
+        </td>
+        <td class="px-4 py-3 text-right">
+          {#if loading}
+            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
+          {:else}
+            <span class="font-semibold text-gray-900">{pendingCount}</span>
+          {/if}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>