128 lines
4.1 KiB
Svelte
128 lines
4.1 KiB
Svelte
<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>
|