Event view impovements

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>