From 1d08522df806ccf29ef0ed35b3d691d508bffeef Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 29 Mar 2026 00:40:48 +0100
Subject: [PATCH] feat(#145): add DashboardNeedsMetadata widget component

Shows documents with missing metadata as a dashboard widget with links
to the enrich workflow. Renders nothing when the list is empty.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/DashboardNeedsMetadata.svelte  | 38 ++++++++++++++
 .../DashboardNeedsMetadata.svelte.spec.ts     | 49 +++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 frontend/src/lib/components/DashboardNeedsMetadata.svelte
 create mode 100644 frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts

diff --git a/frontend/src/lib/components/DashboardNeedsMetadata.svelte b/frontend/src/lib/components/DashboardNeedsMetadata.svelte
new file mode 100644
index 00000000..31daab3c
--- /dev/null
+++ b/frontend/src/lib/components/DashboardNeedsMetadata.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+type IncompleteDocumentDTO = {
+	id: string;
+	title: string;
+};
+
+interface Props {
+	incompleteDocs: IncompleteDocumentDTO[];
+}
+
+let { incompleteDocs }: Props = $props();
+</script>
+
+{#if incompleteDocs.length > 0}
+	<div
+		data-testid="dashboard-needs-metadata"
+		class="border-brand-sand rounded-sm border bg-white p-6"
+	>
+		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
+			Metadaten fehlen
+		</h2>
+		{#each incompleteDocs as doc (doc.id)}
+			<div class="border-brand-sand flex items-center border-b py-2 last:border-0">
+				<a
+					href="/enrich/{doc.id}"
+					class="font-serif text-sm text-ink hover:text-brand-navy hover:underline"
+				>
+					{doc.title}
+				</a>
+			</div>
+		{/each}
+		<div class="mt-4">
+			<a href="/enrich" class="font-sans text-xs text-brand-navy/60 hover:text-brand-navy">
+				Alle anzeigen
+			</a>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts b/frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts
new file mode 100644
index 00000000..ee2fdeb8
--- /dev/null
+++ b/frontend/src/lib/components/DashboardNeedsMetadata.svelte.spec.ts
@@ -0,0 +1,49 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
+import DashboardNeedsMetadata from './DashboardNeedsMetadata.svelte';
+
+afterEach(cleanup);
+
+type IncompleteDocumentDTO = {
+	id: string;
+	title: string;
+};
+
+function makeDoc(id: string, title: string): IncompleteDocumentDTO {
+	return { id, title };
+}
+
+describe('DashboardNeedsMetadata', () => {
+	it('renders nothing when incompleteDocs is empty', async () => {
+		render(DashboardNeedsMetadata, { incompleteDocs: [] });
+		const widget = page.getByTestId('dashboard-needs-metadata');
+		await expect.element(widget).not.toBeInTheDocument();
+	});
+
+	it('shows the widget when incompleteDocs are present', async () => {
+		render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Taufschein')] });
+		const widget = page.getByTestId('dashboard-needs-metadata');
+		await expect.element(widget).toBeInTheDocument();
+	});
+
+	it('renders a link to /enrich/{id} for each document', async () => {
+		const docs = [makeDoc('d1', 'Taufschein'), makeDoc('d2', 'Heiratsurkunde')];
+		render(DashboardNeedsMetadata, { incompleteDocs: docs });
+		const links = page.getByRole('link');
+		await expect.element(links.nth(0)).toHaveAttribute('href', '/enrich/d1');
+		await expect.element(links.nth(1)).toHaveAttribute('href', '/enrich/d2');
+	});
+
+	it('shows the document title in each row', async () => {
+		render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Sterbeurkunde 1930')] });
+		await expect.element(page.getByText('Sterbeurkunde 1930')).toBeInTheDocument();
+	});
+
+	it('shows a "Alle anzeigen" link to /enrich', async () => {
+		render(DashboardNeedsMetadata, { incompleteDocs: [makeDoc('d1', 'Dok')] });
+		const allLink = page.getByRole('link', { name: /Alle anzeigen/i });
+		await expect.element(allLink).toHaveAttribute('href', '/enrich');
+	});
+});