From b24eaa12ee9426114362cb3fb7e4a2df2ae370f8 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 21 Jul 2026 12:06:44 +0200
Subject: [PATCH] refactor(webui): use central data grids

---
 webui/src/features/ops/OpsPage.tsx | 52 ++++++++++--------------------
 1 file changed, 17 insertions(+), 35 deletions(-)

diff --git a/webui/src/features/ops/OpsPage.tsx b/webui/src/features/ops/OpsPage.tsx
index bd8b5dd..508f79a 100644
--- a/webui/src/features/ops/OpsPage.tsx
+++ b/webui/src/features/ops/OpsPage.tsx
@@ -3,13 +3,15 @@ import { RefreshCw } from "lucide-react";
 import {
   Button,
   Card,
+  DataGrid,
   DismissibleAlert,
   LoadingFrame,
   MetricCard,
   PageTitle,
   StatusBadge,
   adminErrorMessage,
-  type ApiSettings } from
+  type ApiSettings,
+  type DataGridColumn } from
 "@govoplan/core-webui";
 import { fetchOpsStatus, type OpsCheck, type OpsDeploymentProfile, type OpsSizingAssumption, type OpsStatus } from "../../api/ops";
 
@@ -95,47 +97,27 @@ function CheckList({ checks }: {checks: OpsCheck[];}) {
 
 function ProfileList({ profiles }: {profiles: OpsDeploymentProfile[];}) {
   if (!profiles.length) return <p className="muted">i18n:govoplan-ops.no_deployment_profiles_reported.7c3af1db</p>;
+  const columns: DataGridColumn<OpsDeploymentProfile>[] = [
+    { id: "profile", header: "i18n:govoplan-ops.profile.ff4fc027", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, sortable: true, filterable: true, value: (profile) => `${profile.name} ${profile.id}`, render: (profile) => <div><strong>{profile.name}</strong><span className="muted block">{profile.id}</span></div> },
+    { id: "status", header: "i18n:govoplan-ops.status.bae7d5be", width: 140, sortable: true, filterable: true, value: (profile) => profile.current ? "current" : "reference", render: (profile) => <StatusBadge status={profile.current ? "success" : "inactive"} label={profile.current ? "current" : "reference"} /> },
+    { id: "components", header: "i18n:govoplan-ops.components.9289473e", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, filterable: true, value: (profile) => profile.components.join(" "), render: (profile) => profile.components.join(", ") },
+    { id: "fit", header: "i18n:govoplan-ops.fit.dab564d8", width: "minmax(180px, .8fr)", minWidth: 160, resizable: true, filterable: true, value: (profile) => profile.fit }
+  ];
   return (
-    <div className="admin-table-wrap">
-      <table className="admin-table">
-        <thead>
-          <tr><th>i18n:govoplan-ops.profile.ff4fc027</th><th>i18n:govoplan-ops.status.bae7d5be</th><th>i18n:govoplan-ops.components.9289473e</th><th>i18n:govoplan-ops.fit.dab564d8</th></tr>
-        </thead>
-        <tbody>
-          {profiles.map((profile) =>
-          <tr key={profile.id}>
-              <td><strong>{profile.name}</strong><span className="muted block">{profile.id}</span></td>
-              <td><StatusBadge status={profile.current ? "success" : "inactive"} label={profile.current ? "current" : "reference"} /></td>
-              <td>{profile.components.join(", ")}</td>
-              <td>{profile.fit}</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>);
+    <DataGrid id="ops-deployment-profiles" rows={profiles} columns={columns} getRowKey={(profile) => profile.id} />);
 
 }
 
 function SizingTable({ items }: {items: OpsSizingAssumption[];}) {
   if (!items.length) return <p className="muted">i18n:govoplan-ops.no_sizing_assumptions_reported.17515959</p>;
+  const columns: DataGridColumn<OpsSizingAssumption>[] = [
+    { id: "area", header: "i18n:govoplan-ops.area.2745deba", width: "minmax(180px, .7fr)", minWidth: 160, resizable: true, sortable: true, filterable: true, value: (item) => item.area, render: (item) => <strong>{item.area}</strong> },
+    { id: "baseline", header: "i18n:govoplan-ops.baseline.e6ab7982", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, filterable: true, value: (item) => item.baseline },
+    { id: "trigger", header: "i18n:govoplan-ops.scale_trigger.1c85e10e", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, filterable: true, value: (item) => item.scale_trigger },
+    { id: "note", header: "i18n:govoplan-ops.operator_note.1dc58f7b", width: "minmax(240px, 1.2fr)", minWidth: 200, resizable: true, filterable: true, value: (item) => item.operator_note }
+  ];
   return (
-    <div className="admin-table-wrap">
-      <table className="admin-table">
-        <thead>
-          <tr><th>i18n:govoplan-ops.area.2745deba</th><th>i18n:govoplan-ops.baseline.e6ab7982</th><th>i18n:govoplan-ops.scale_trigger.1c85e10e</th><th>i18n:govoplan-ops.operator_note.1dc58f7b</th></tr>
-        </thead>
-        <tbody>
-          {items.map((item) =>
-          <tr key={item.area}>
-              <td><strong>{item.area}</strong></td>
-              <td>{item.baseline}</td>
-              <td>{item.scale_trigger}</td>
-              <td>{item.operator_note}</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>);
+    <DataGrid id="ops-sizing-assumptions" rows={items} columns={columns} getRowKey={(item) => item.area} />);
 
 }