Event view impovements

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}