From 0a606184b1c487efcfd97580f7fb63499a7c23c8 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 21:32:42 +0200
Subject: [PATCH] feat: align reporting with shared UI foundations

---
 src/govoplan_reporting/backend/manifest.py | 12 ++++++++
 webui/src/styles/reporting.css             | 34 +++++++++++-----------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/govoplan_reporting/backend/manifest.py b/src/govoplan_reporting/backend/manifest.py
index 10e98bd..ee93f48 100644
--- a/src/govoplan_reporting/backend/manifest.py
+++ b/src/govoplan_reporting/backend/manifest.py
@@ -26,6 +26,7 @@ from govoplan_core.core.modules import (
     ModuleManifest,
     NavItem,
     PermissionDefinition,
+    ProductAreaContribution,
     RoleTemplate,
 )
 from govoplan_core.core.provider_governance import (
@@ -307,6 +308,17 @@ manifest = ModuleManifest(
                 surface_id="reporting.navigation",
             ),
         ),
+        product_areas=(
+            ProductAreaContribution(
+                id="data-assurance",
+                module_id=MODULE_ID,
+                label="i18n:govoplan-core.product_area.data_assurance",
+                icon="database-zap",
+                description="i18n:govoplan-core.product_area.data_assurance_description",
+                surface_ids=("reporting.navigation", "reporting.workspace", "reporting.compatibility"),
+                order=60,
+            ),
+        ),
         view_surfaces=(
             ViewSurface(
                 id="reporting.parameters",
diff --git a/webui/src/styles/reporting.css b/webui/src/styles/reporting.css
index ea9a2fa..efed082 100644
--- a/webui/src/styles/reporting.css
+++ b/webui/src/styles/reporting.css
@@ -47,7 +47,7 @@
 .reporting-inspector-content section {
   overflow: hidden;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--surface-raised);
 }
 
@@ -157,7 +157,7 @@
   margin: 0;
   padding: 4px 8px 7px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
 }
 
 .reporting-query-controls legend,
@@ -337,7 +337,7 @@
   display: block;
   width: 72%;
   margin: 0 auto;
-  border-radius: 3px 3px 0 0;
+  border-radius: var(--radius-tight) var(--radius-tight) 0 0;
   background: var(--accent);
 }
 
@@ -346,7 +346,7 @@
   height: 280px;
   overflow: visible;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--surface-raised);
 }
 
@@ -382,7 +382,7 @@
   gap: 6px;
   padding: 14px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--surface-raised);
 }
 
@@ -404,7 +404,7 @@
   width: min(100%, 280px);
   aspect-ratio: 1;
   margin: 0 auto;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   box-shadow: inset 0 0 0 1px var(--border);
 }
 
@@ -430,17 +430,17 @@
 .reporting-swatch {
   width: 10px;
   height: 10px;
-  border-radius: 2px;
-  background: #2f7d6e;
+  border-radius: var(--radius-hairline);
+  background: var(--data-series-1);
 }
 
-.reporting-swatch-1 { background: #3366a8; }
-.reporting-swatch-2 { background: #c28b2c; }
-.reporting-swatch-3 { background: #9a4f71; }
-.reporting-swatch-4 { background: #5f7f3a; }
-.reporting-swatch-5 { background: #b85c3b; }
-.reporting-swatch-6 { background: #586176; }
-.reporting-swatch-7 { background: #2e8b9a; }
+.reporting-swatch-1 { background: var(--data-series-2); }
+.reporting-swatch-2 { background: var(--data-series-3); }
+.reporting-swatch-3 { background: var(--data-series-4); }
+.reporting-swatch-4 { background: var(--data-series-5); }
+.reporting-swatch-5 { background: var(--data-series-6); }
+.reporting-swatch-6 { background: var(--data-series-7); }
+.reporting-swatch-7 { background: var(--data-series-8); }
 
 .reporting-bar-row {
   display: grid;
@@ -454,7 +454,7 @@
   height: 22px;
   overflow: hidden;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--surface-subtle, var(--surface));
 }
 
@@ -535,7 +535,7 @@
 .reporting-drill-path span {
   padding: 5px 8px;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--surface-subtle, var(--surface));
   font-size: 0.76rem;
 }