101 lines
3.8 KiB
Svelte
101 lines
3.8 KiB
Svelte
<script lang="ts">
|
|
interface EmailResultItem {
|
|
participant: {
|
|
id: string;
|
|
name: string;
|
|
surname: string;
|
|
email: string;
|
|
};
|
|
success: boolean;
|
|
error?: string;
|
|
}
|
|
|
|
interface EmailResultsSummary {
|
|
success: number;
|
|
errors: number;
|
|
total: number;
|
|
}
|
|
|
|
interface EmailResultsData {
|
|
success: boolean;
|
|
results: EmailResultItem[];
|
|
summary: EmailResultsSummary;
|
|
}
|
|
|
|
let { emailResults } = $props<{
|
|
emailResults: EmailResultsData | null;
|
|
}>();
|
|
</script>
|
|
|
|
{#if emailResults}
|
|
<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">Email Results</h2>
|
|
<div class="text-sm text-gray-500">
|
|
{emailResults.summary.success} successful, {emailResults.summary.errors} failed
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
|
<span class="text-sm font-medium">Sent: {emailResults.summary.success}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
<span class="text-sm font-medium">Failed: {emailResults.summary.errors}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
<span class="text-sm font-medium">Total: {emailResults.summary.total}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if emailResults.results.length > 0}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
|
|
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
|
|
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each emailResults.results as result}
|
|
<tr class="border-b border-gray-200 hover:bg-gray-50">
|
|
<td class="px-4 py-3 text-sm text-gray-900">
|
|
{result.participant.name} {result.participant.surname}
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900">{result.participant.email}</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
{#if result.success}
|
|
<div class="flex items-center text-green-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" 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>
|
|
<span class="text-sm font-medium">Sent</span>
|
|
</div>
|
|
{:else}
|
|
<div class="flex items-center text-red-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
<span class="text-sm font-medium">Failed</span>
|
|
{#if result.error}
|
|
<span class="text-xs text-red-500 ml-2">({result.error})</span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|