feat(admin): add OcrHealthBar, OcrStatCards, OcrModelsTable components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-18 00:30:24 +02:00
parent 5f4e60a14c
commit 0d8ac46639
6 changed files with 209 additions and 0 deletions

View File

@@ -0,0 +1,67 @@
<script lang="ts">
import type { components } from '$lib/generated/api';
type SenderModel = components['schemas']['SenderModel'];
let {
senderModels,
personNames
}: {
senderModels: SenderModel[];
personNames: Record<string, string>;
} = $props();
</script>
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<table class="w-full text-sm">
<thead>
<tr>
<th
class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
>Person</th
>
<th
class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
>CER</th
>
<th
class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
>Accuracy</th
>
<th
class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
>Lines</th
>
<th
class="border-brand-sand border-b pb-3 text-left text-xs font-bold tracking-widest text-gray-400 uppercase"
>Actions</th
>
</tr>
</thead>
<tbody>
{#each senderModels as model (model.id)}
<tr>
<td class="border-brand-sand/50 border-b py-3">
<a href="/admin/ocr/{model.personId}" class="text-brand-navy hover:underline">
{personNames[model.personId] ?? model.personId}
</a>
</td>
<td class="border-brand-sand/50 border-b py-3">
{model.cer != null ? (model.cer * 100).toFixed(1) + '%' : '—'}
</td>
<td class="border-brand-sand/50 border-b py-3">
{model.accuracy != null ? (model.accuracy * 100).toFixed(1) + '%' : '—'}
</td>
<td class="border-brand-sand/50 border-b py-3">
{model.correctedLinesAtTraining}
</td>
<td class="border-brand-sand/50 border-b py-3">
<a
href="/admin/ocr/{model.personId}"
class="font-medium text-brand-navy hover:underline">Details</a
>
</td>
</tr>
{/each}
</tbody>
</table>
</div>