feat(person): show received docs, role badges, stats bar, co-correspondents

- Split document list into Gesendete / Empfangene Dokumente sections
- Add role badges (Gesendet / Empfangen) on each document card
- Add statistics strip showing total count and year range
- Add co-correspondents section with frequency-sorted chips
- Single sort toggle applies to both sections

Closes #1 Closes #19 Closes #21 Closes #22
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/e2e/persons.spec.ts

@@ -114,6 +114,19 @@ test.describe('Person detail — sort toggle', () => {
 	});
 });
 
+test.describe('Person detail — sent and received documents', () => {
+	test('shows both sent and received document sections', async ({ page }) => {
+		await page.goto('/persons');
+		const firstPerson = page.locator('a[href^="/persons/"]:not([href="/persons/new"])').first();
+		await firstPerson.click();
+		await page.waitForSelector('[data-hydrated]');
+
+		await expect(page.getByRole('heading', { name: /Gesendete Dokumente/i })).toBeVisible();
+		await expect(page.getByRole('heading', { name: /Empfangene Dokumente/i })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/person-sent-received.png' });
+	});
+});
+
 test.describe('Person detail — conversations link', () => {
 	test('has a conversations link that pre-fills the person', async ({ page }) => {
 		await page.goto('/persons');

frontend/src/routes/persons/[id]/+page.svelte

@@ -7,10 +7,48 @@
     let { data, form } = $props();
 
     const person = $derived(data.person);
-    const documents = $derived(data.documents);
+    const sentDocuments = $derived(data.sentDocuments);
+    const receivedDocuments = $derived(data.receivedDocuments);
 
     let sortDir = $state<SortDir>('DESC');
-    const sortedDocuments = $derived(sortDocumentsByDate(documents, sortDir));
+    const sortedSentDocuments = $derived(sortDocumentsByDate(sentDocuments, sortDir));
+    const sortedReceivedDocuments = $derived(sortDocumentsByDate(receivedDocuments, sortDir));
+
+    const allDocuments = $derived([...sentDocuments, ...receivedDocuments]);
+
+    const docStats = $derived(() => {
+        const dated = allDocuments.filter(d => d.documentDate);
+        const years = dated.map(d => parseInt(d.documentDate!.substring(0, 4)));
+        return {
+            total: allDocuments.length,
+            minYear: years.length ? Math.min(...years) : null,
+            maxYear: years.length ? Math.max(...years) : null,
+        };
+    });
+
+    const coCorrespondents = $derived(() => {
+        const freq = new Map<string, { id: string; name: string; count: number }>();
+
+        for (const doc of sentDocuments) {
+            for (const receiver of doc.receivers ?? []) {
+                const key = receiver.id;
+                const existing = freq.get(key);
+                if (existing) existing.count++;
+                else freq.set(key, { id: receiver.id, name: `${receiver.firstName} ${receiver.lastName}`, count: 1 });
+            }
+        }
+
+        for (const doc of receivedDocuments) {
+            if (doc.sender && doc.sender.id !== person.id) {
+                const key = doc.sender.id;
+                const existing = freq.get(key);
+                if (existing) existing.count++;
+                else freq.set(key, { id: doc.sender.id, name: `${doc.sender.firstName} ${doc.sender.lastName}`, count: 1 });
+            }
+        }
+
+        return [...freq.values()].sort((a, b) => b.count - a.count).slice(0, 5);
+    });
 
     let editMode = $state(false);
     let mergeTargetId = $state('');
@@ -261,33 +299,66 @@
     </div>
     {/key}
 
-    <!-- Linked Documents Section -->
+    <!-- Co-Correspondents Section -->
-    <div>
+    {#if coCorrespondents().length > 0}
-        <div class="flex items-center justify-between mb-6 border-b border-brand-navy/10 pb-2">
+    <div class="mb-6">
-            <div class="flex items-center gap-3">
+        <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-3">{m.person_co_correspondents_heading()}</h3>
-                <h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
+        <div class="flex flex-wrap gap-2">
-                <span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
+            {#each coCorrespondents() as c}
-                    {documents.length}
+                <a href="/persons/{c.id}"
-                </span>
+                   class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-sand text-sm font-serif text-brand-navy hover:border-brand-navy transition-colors">
-            </div>
+                    {c.name}
-            {#if documents.length > 0}
+                    <span class="text-xs text-gray-400 font-sans">({c.count})</span>
-                <button
+                </a>
-                    onclick={() => (sortDir = sortDir === 'DESC' ? 'ASC' : 'DESC')}
+            {/each}
-                    class="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-brand-navy transition-colors"
+        </div>
-                    aria-label={m.conv_sort_label()}
+    </div>
-                >
+    {/if}
-                    {sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
+
-                </button>
+    <!-- Document Statistics Bar -->
+    {#if docStats().total > 0}
+    <div class="mb-8 px-4 py-3 bg-brand-sand/30 rounded-sm flex items-center gap-2 font-sans text-sm text-brand-navy/70">
+        <span>{docStats().total} Dokumente</span>
+        {#if docStats().minYear !== null}
+            <span class="text-brand-mint">·</span>
+            {#if docStats().minYear === docStats().maxYear}
+                <span>{docStats().minYear}</span>
+            {:else}
+                <span>{docStats().minYear} – {docStats().maxYear}</span>
             {/if}
+        {/if}
+    </div>
+    {/if}
+
+    <!-- Sort control -->
+    {#if allDocuments.length > 0}
+    <div class="flex justify-end mb-4">
+        <button
+            onclick={() => (sortDir = sortDir === 'DESC' ? 'ASC' : 'DESC')}
+            class="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-brand-navy transition-colors"
+            aria-label={m.conv_sort_label()}
+        >
+            {sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
+        </button>
+    </div>
+    {/if}
+
+    <!-- Sent Documents Section -->
+    <div class="mb-10">
+        <div class="flex items-center gap-3 mb-6 border-b border-brand-navy/10 pb-2">
+            <h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
+            <span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
+                {sentDocuments.length}
+            </span>
         </div>
 
-        {#if documents.length === 0}
+        {#if sentDocuments.length === 0}
             <div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
                 <p class="text-gray-500 font-sans">{m.person_no_docs()}</p>
             </div>
         {:else}
             <ul class="space-y-3">
-                {#each sortedDocuments as doc}
+                {#each sortedSentDocuments as doc}
                     <li class="group">
                         <a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
                             <div class="flex items-center justify-between">
@@ -308,14 +379,73 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="flex items-center flex-shrink-0 pl-4">
+                                <div class="flex items-center flex-shrink-0 pl-4 gap-2">
+                                    <span class="hidden sm:inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-brand-navy text-white">
+                                        {m.person_role_sender()}
+                                    </span>
                                     <span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
                                         {doc.status === 'UPLOADED'
                                             ? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
                                             : 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
                                         {doc.status}
                                     </span>
-                                    <img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-4 opacity-40 group-hover:opacity-100 transition-opacity" />
+                                    <img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-2 opacity-40 group-hover:opacity-100 transition-opacity" />
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                {/each}
+            </ul>
+        {/if}
+    </div>
+
+    <!-- Received Documents Section -->
+    <div>
+        <div class="flex items-center gap-3 mb-6 border-b border-brand-navy/10 pb-2">
+            <h2 class="text-xl font-serif text-brand-navy">{m.person_received_docs_heading()}</h2>
+            <span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
+                {receivedDocuments.length}
+            </span>
+        </div>
+
+        {#if receivedDocuments.length === 0}
+            <div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
+                <p class="text-gray-500 font-sans">{m.person_no_received_docs()}</p>
+            </div>
+        {:else}
+            <ul class="space-y-3">
+                {#each sortedReceivedDocuments as doc}
+                    <li class="group">
+                        <a href="/documents/{doc.id}" class="block bg-white border border-brand-sand p-4 hover:border-brand-navy hover:shadow-md transition-all duration-200">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-4 overflow-hidden">
+                                    <div class="flex-shrink-0 h-10 w-10 bg-brand-sand/20 text-brand-navy rounded flex items-center justify-center group-hover:bg-brand-mint group-hover:text-brand-navy transition-colors">
+                                        <img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg" alt="" aria-hidden="true" class="w-5 h-5" />
+                                    </div>
+                                    <div class="min-w-0">
+                                        <div class="font-serif text-base font-medium text-brand-navy truncate group-hover:underline decoration-brand-mint decoration-2 underline-offset-2">
+                                            {doc.title || doc.originalFilename}
+                                        </div>
+                                        <div class="flex items-center text-xs font-sans text-gray-500 mt-0.5 space-x-2">
+                                            <span>{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : m.doc_no_date()}</span>
+                                            {#if doc.location}
+                                                <span class="text-brand-mint">•</span>
+                                                <span>{doc.location}</span>
+                                            {/if}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex items-center flex-shrink-0 pl-4 gap-2">
+                                    <span class="hidden sm:inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-brand-mint text-brand-navy">
+                                        {m.person_role_receiver()}
+                                    </span>
+                                    <span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
+                                        {doc.status === 'UPLOADED'
+                                            ? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
+                                            : 'bg-yellow-50 text-yellow-800 border-yellow-200'}">
+                                        {doc.status}
+                                    </span>
+                                    <img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg" alt="" aria-hidden="true" class="h-5 w-5 ml-2 opacity-40 group-hover:opacity-100 transition-opacity" />
                                 </div>
                             </div>
                         </a>