From 4b9202b47cbdc7b207c8baa81e9cb05424ba78d5 Mon Sep 17 00:00:00 2001
From: OfficeCom Codex <codex@officecom.cloud>
Date: Mon, 27 Jul 2026 14:39:10 +0200
Subject: [PATCH] Redesign recipient management dashboard

---
 infra/debug-dashboard/static/app.css          |  1 +
 .../debug-dashboard/templates/recipients.html | 34 ++++++++++++-------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/infra/debug-dashboard/static/app.css b/infra/debug-dashboard/static/app.css
index 965d598..f2308e7 100644
--- a/infra/debug-dashboard/static/app.css
+++ b/infra/debug-dashboard/static/app.css
@@ -26,3 +26,4 @@ table { width:100%; border-collapse:collapse; font-family:'Roboto',sans-serif; f
 .recipient-form input,.recipient-form select { border-radius:5px; background:#fff; }
 .recipient-form input:focus,.recipient-form select:focus { outline:2px solid rgba(36,90,133,.25); border-color:#245a85; }
 .rule-actions .button-secondary { border-color:var(--line); background:#f8fbfd; }
+.recipient-intro { max-width:720px; margin:6px 0 28px; }.recipient-intro h1 { margin:9px 0 10px; font-size:46px; line-height:1; letter-spacing:-.055em; }.recipient-intro p { margin:0; color:var(--muted); font-size:16px; line-height:1.55; }.recipient-intro strong { color:var(--ink); }.recipient-create-panel { margin-top:0; border-color:#c8dbe8; }.recipient-create-panel .panel-heading h2,.recipient-rules-panel .panel-heading h2 { margin:7px 0 8px; }.recipient-create-panel .panel-heading p { margin:0 0 20px; }.recipient-form button { white-space:nowrap; }.recipient-rules-panel { padding-bottom:12px; }.recipient-rules-panel .panel-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; }.recipient-rules-panel .panel-heading h2 { margin-bottom:20px; }.recipient-rules-panel .panel-heading small { display:inline-block; margin-left:7px; padding:4px 7px; border-radius:12px; background:#edf4f8; color:#4d687b; font-size:10px; font-weight:700; letter-spacing:.04em; vertical-align:middle; }.recipient-table td { height:64px; }.recipient-table tr:last-child td { border-bottom:0; }.recipient-email { color:#245a85; font-weight:500; }.actions-heading { text-align:right; }.recipient-table .rule-actions { justify-content:flex-end; }.empty-state { padding:30px 10px !important; color:var(--muted); text-align:center; }
diff --git a/infra/debug-dashboard/templates/recipients.html b/infra/debug-dashboard/templates/recipients.html
index d46d23a..a86da41 100644
--- a/infra/debug-dashboard/templates/recipients.html
+++ b/infra/debug-dashboard/templates/recipients.html
@@ -1,17 +1,27 @@
 {% extends "base.html" %}
 {% block title %}Empfaenger - OC Sentinel{% endblock %}
 {% block content %}
-<section class="panel"><div class="panel-heading"><h2>Empfaenger hinzufuegen</h2></div>
-<form class="recipient-form" method="post" action="{{ url_for('add_recipient') }}">
-  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-  <label>Organisation<select name="organization_id" id="organization_id" required onchange="document.getElementById('organization_name').value=this.options[this.selectedIndex].dataset.name"><option value="*" data-name="Alle Organisationen">Alle Organisationen</option>{% for organization in organizations %}<option value="{{ organization[0] }}" data-name="{{ organization[1] }}">{{ organization[1] }}</option>{% endfor %}</select></label>
-  <input type="hidden" name="organization_name" id="organization_name" value="Alle Organisationen">
-  <label>E-Mail-Adresse<input type="email" name="recipient_email" placeholder="name@officecom.it" required></label>
-  <button type="submit">Speichern</button>
-</form></section>
+<section class="recipient-intro">
+  <span class="eyebrow">Wochenberichte</span>
+  <h1>Empfaenger verwalten</h1>
+  <p>Lege fest, welche Personen den Sicherheitsbericht einer Organisation erhalten. Regeln fuer <strong>Alle Organisationen</strong> gelten zusaetzlich zu den einzelnen Organisationen.</p>
+</section>
 
-<section class="panel"><div class="panel-heading"><h2>E-Mail-Verteiler</h2></div>
-<div class="table-wrap"><table><thead><tr><th>Organisation</th><th>E-Mail-Adresse</th><th>Status</th><th>Aktion</th></tr></thead><tbody>
-{% for rule in rules %}<tr><td>{{ rule[2] }}</td><td>{{ rule[3] }}</td><td><span class="state {{ 'ok' if rule[4] else 'warning' }}">{{ 'aktiv' if rule[4] else 'pausiert' }}</span></td><td class="rule-actions"><form method="post" action="{{ url_for('toggle_recipient', rule_id=rule[0]) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="button-secondary" type="submit">{{ 'Pausieren' if rule[4] else 'Aktivieren' }}</button></form><form method="post" action="{{ url_for('delete_recipient', rule_id=rule[0]) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="button-danger" type="submit">Loeschen</button></form></td></tr>{% else %}<tr><td colspan="4">Keine Empfaengerregeln.</td></tr>{% endfor %}
-</tbody></table></div></section>
+<section class="panel recipient-create-panel">
+  <div class="panel-heading"><span class="eyebrow">Neue Regel</span><h2>Bericht zustellen</h2><p>Die Adresse wird beim naechsten Wochenbericht automatisch beruecksichtigt.</p></div>
+  <form class="recipient-form" method="post" action="{{ url_for('add_recipient') }}">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+    <label>Organisation<select name="organization_id" id="organization_id" required onchange="document.getElementById('organization_name').value=this.options[this.selectedIndex].dataset.name"><option value="*" data-name="Alle Organisationen">Alle Organisationen</option>{% for organization in organizations %}<option value="{{ organization[0] }}" data-name="{{ organization[1] }}">{{ organization[1] }}</option>{% endfor %}</select></label>
+    <input type="hidden" name="organization_name" id="organization_name" value="Alle Organisationen">
+    <label>E-Mail-Adresse<input type="email" name="recipient_email" placeholder="name@officecom.it" required></label>
+    <button type="submit">Empfaenger hinzufuegen</button>
+  </form>
+</section>
+
+<section class="panel recipient-rules-panel">
+  <div class="panel-heading"><span class="eyebrow">Aktive Konfiguration</span><h2>E-Mail-Verteiler <small>{{ rules|length }} Regel{{ '' if rules|length == 1 else 'n' }}</small></h2></div>
+  <div class="table-wrap recipient-table"><table><thead><tr><th>Organisation</th><th>E-Mail-Adresse</th><th>Status</th><th class="actions-heading">Verwalten</th></tr></thead><tbody>
+{% for rule in rules %}<tr><td><strong>{{ rule[2] }}</strong></td><td><a class="recipient-email" href="mailto:{{ rule[3] }}">{{ rule[3] }}</a></td><td><span class="state {{ 'ok' if rule[4] else 'warning' }}">{{ 'aktiv' if rule[4] else 'pausiert' }}</span></td><td class="rule-actions"><form method="post" action="{{ url_for('toggle_recipient', rule_id=rule[0]) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="button-secondary" type="submit">{{ 'Pausieren' if rule[4] else 'Aktivieren' }}</button></form><form method="post" action="{{ url_for('delete_recipient', rule_id=rule[0]) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="button-danger" type="submit">Loeschen</button></form></td></tr>{% else %}<tr><td colspan="4" class="empty-state">Noch keine Empfaengerregeln angelegt.</td></tr>{% endfor %}
+</tbody></table></div>
+</section>
 {% endblock %}