refactor(webui): use Core date-time formatting

package.json

@@ -18,7 +18,7 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.8",
+    "@govoplan/core-webui": "^0.1.9",
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/govoplan_admin/backend/api/v1/routes.py

@@ -486,42 +486,73 @@ def _catalog_plan_item(
     validation: dict[str, object] | None = None,
 ) -> tuple[ModuleInstallPlanItem, dict[str, object]]:
     result = validation or validate_module_package_catalog()
+    _require_valid_module_catalog(result)
+    raw_item = _catalog_install_or_update_item(result, module_id)
+    action = _catalog_plan_action(raw_item, module_id, available_module_ids)
+    license_decision = module_license_decision(_catalog_license_features(raw_item))
+    _require_catalog_action_license(license_decision, action=action, module_id=module_id)
+    return ModuleInstallPlanItem(
+        module_id=str(raw_item["module_id"]),
+        action=action,
+        source="catalog",
+        catalog=_catalog_plan_metadata(result),
+        python_package=_catalog_string(raw_item, "python_package"),
+        python_ref=_catalog_string(raw_item, "python_ref"),
+        webui_package=_catalog_string(raw_item, "webui_package"),
+        webui_ref=_catalog_string(raw_item, "webui_ref"),
+        notes=_catalog_plan_notes(raw_item, license_decision),
+    ), result
+
+
+def _require_valid_module_catalog(result: dict[str, object]) -> None:
     if not result.get("valid"):
         raise HTTPException(
             status_code=status.HTTP_422_UNPROCESSABLE_CONTENT,
             detail=str(result.get("error") or "Module package catalog is invalid."),
         )
+
+
+def _catalog_install_or_update_item(result: dict[str, object], module_id: str) -> dict[str, object]:
     for raw_item in result.get("modules", []):
         if not isinstance(raw_item, dict):
             continue
         if raw_item.get("module_id") != module_id or raw_item.get("action") not in {"install", "update"}:
             continue
-        raw_action = raw_item.get("action")
+        return raw_item
-        action = "update" if raw_action == "update" or module_id in available_module_ids else "install"
+    raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail=f"Catalog install/update entry not found: {module_id}")
-        license_decision = module_license_decision(_catalog_license_features(raw_item))
+
-        if not license_decision.get("allowed"):
+
+def _catalog_plan_action(raw_item: dict[str, object], module_id: str, available_module_ids: set[str]) -> str:
+    return "update" if raw_item.get("action") == "update" or module_id in available_module_ids else "install"
+
+
+def _require_catalog_action_license(
+    license_decision: dict[str, object],
+    *,
+    action: str,
+    module_id: str,
+) -> None:
+    if license_decision.get("allowed"):
+        return
     missing = license_decision.get("missing_features")
     missing_text = ", ".join(str(item) for item in missing) if isinstance(missing, list) else "required feature"
     raise HTTPException(
         status_code=status.HTTP_403_FORBIDDEN,
         detail=f"License does not allow {action} for {module_id}: {missing_text}.",
     )
-        notes = raw_item.get("notes") if isinstance(raw_item.get("notes"), str) else None
+
-        if license_decision.get("reason") and license_decision.get("missing_features"):
+
+def _catalog_plan_notes(raw_item: dict[str, object], license_decision: dict[str, object]) -> str | None:
+    notes = _catalog_string(raw_item, "notes")
+    if not (license_decision.get("reason") and license_decision.get("missing_features")):
+        return notes
     prefix = f"{notes}\n" if notes else ""
-            notes = f"{prefix}License warning: {license_decision['reason']}"
+    return f"{prefix}License warning: {license_decision['reason']}"
-        return ModuleInstallPlanItem(
+
-            module_id=str(raw_item["module_id"]),
+
-            action=action,
+def _catalog_string(raw_item: dict[str, object], field: str) -> str | None:
-            source="catalog",
+    value = raw_item.get(field)
-            catalog=_catalog_plan_metadata(result),
+    return value if isinstance(value, str) else None
-            python_package=raw_item.get("python_package") if isinstance(raw_item.get("python_package"), str) else None,
-            python_ref=raw_item.get("python_ref") if isinstance(raw_item.get("python_ref"), str) else None,
-            webui_package=raw_item.get("webui_package") if isinstance(raw_item.get("webui_package"), str) else None,
-            webui_ref=raw_item.get("webui_ref") if isinstance(raw_item.get("webui_ref"), str) else None,
-            notes=notes,
-        ), result
-    raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail=f"Catalog install/update entry not found: {module_id}")
 
 
 def _catalog_plan_metadata(validation: dict[str, object]) -> dict[str, object]:

tests/__init__.py

@@ -0,0 +1 @@
+"""GovOPlaN Admin backend tests."""

tests/test_catalog_plan.py

@@ -0,0 +1,108 @@
+from __future__ import annotations
+
+import unittest
+from unittest.mock import patch
+
+from fastapi import HTTPException
+
+from govoplan_admin.backend.api.v1.routes import _catalog_plan_item
+
+
+class CatalogPlanItemTests(unittest.TestCase):
+    def test_builds_catalog_item_and_preserves_catalog_metadata(self) -> None:
+        validation: dict[str, object] = {
+            "valid": True,
+            "source": "https://catalog.example.test/modules.json",
+            "source_type": "remote",
+            "channel": "stable",
+            "signed": True,
+            "trusted": True,
+            "modules": [
+                "ignored",
+                {"module_id": "other", "action": "install"},
+                {
+                    "module_id": "calendar",
+                    "action": "install",
+                    "python_package": "govoplan-calendar",
+                    "python_ref": 42,
+                    "webui_package": "@govoplan/calendar-webui",
+                    "notes": "Catalog note",
+                    "license_features": ["calendar.sync", "", 7],
+                },
+            ],
+        }
+        decision = {
+            "allowed": True,
+            "reason": "Feature expires soon.",
+            "missing_features": ["calendar.future"],
+        }
+
+        with patch(
+            "govoplan_admin.backend.api.v1.routes.module_license_decision",
+            return_value=decision,
+        ) as license_decision:
+            item, returned_validation = _catalog_plan_item(
+                "calendar",
+                {"calendar"},
+                validation=validation,
+            )
+
+        self.assertIs(returned_validation, validation)
+        self.assertEqual(item.module_id, "calendar")
+        self.assertEqual(item.action, "update")
+        self.assertEqual(item.source, "catalog")
+        self.assertEqual(item.python_package, "govoplan-calendar")
+        self.assertIsNone(item.python_ref)
+        self.assertEqual(item.webui_package, "@govoplan/calendar-webui")
+        self.assertIsNone(item.webui_ref)
+        self.assertEqual(item.notes, "Catalog note\nLicense warning: Feature expires soon.")
+        self.assertEqual(item.catalog["source"], "https://catalog.example.test/modules.json")
+        self.assertEqual(item.catalog["channel"], "stable")
+        self.assertTrue(item.catalog["signed"])
+        license_decision.assert_called_once_with(["calendar.sync", "7"])
+
+    def test_rejects_catalog_action_when_license_is_missing(self) -> None:
+        validation: dict[str, object] = {
+            "valid": True,
+            "modules": [{"module_id": "calendar", "action": "install", "license_features": ["calendar.sync"]}],
+        }
+        with patch(
+            "govoplan_admin.backend.api.v1.routes.module_license_decision",
+            return_value={"allowed": False, "missing_features": ["calendar.sync", "calendar.write"]},
+        ), self.assertRaises(HTTPException) as raised:
+            _catalog_plan_item("calendar", set(), validation=validation)
+
+        self.assertEqual(raised.exception.status_code, 403)
+        self.assertEqual(
+            raised.exception.detail,
+            "License does not allow install for calendar: calendar.sync, calendar.write.",
+        )
+
+    def test_rejects_invalid_or_missing_catalog_entries(self) -> None:
+        with self.subTest("invalid catalog"), self.assertRaises(HTTPException) as invalid:
+            _catalog_plan_item(
+                "calendar",
+                set(),
+                validation={"valid": False, "error": "Signature is invalid."},
+            )
+        self.assertEqual(invalid.exception.status_code, 422)
+        self.assertEqual(invalid.exception.detail, "Signature is invalid.")
+
+        with self.subTest("entry not found"), self.assertRaises(HTTPException) as missing:
+            _catalog_plan_item(
+                "calendar",
+                set(),
+                validation={
+                    "valid": True,
+                    "modules": [
+                        {"module_id": "calendar", "action": "remove"},
+                        {"module_id": "other", "action": "install"},
+                    ],
+                },
+            )
+        self.assertEqual(missing.exception.status_code, 404)
+        self.assertEqual(missing.exception.detail, "Catalog install/update entry not found: calendar")
+
+
+if __name__ == "__main__":
+    unittest.main()

webui/package.json

@@ -13,7 +13,7 @@
     }
   },
   "peerDependencies": {
-    "@govoplan/core-webui": "^0.1.8",
+    "@govoplan/core-webui": "^0.1.9",
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

webui/src/features/admin/AdminOverviewPanel.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import type { ApiSettings } from "@govoplan/core-webui";
 import { fetchAdminOverview, type AdminOverview } from "../../api/admin";
-import { Card } from "@govoplan/core-webui";
+import { Card, MetricCard } from "@govoplan/core-webui";
 import { Button } from "@govoplan/core-webui";
 import { AdminPageLayout, adminErrorMessage } from "@govoplan/core-webui";
 
@@ -116,7 +116,7 @@ function hasAnySection(sections: ReadonlySet<string>, candidates: readonly strin
 }
 
 function Metric({ title, value, text }: {title: string;value: string | number;text: string;}) {
-  return <Card title={title}><strong className="module-big-number">{value}</strong><p className="muted">{text}</p></Card>;
+  return <MetricCard label={title} value={value} detail={text} />;
 }
 
 function AreaLink({ title, text, onClick }: {title: string;text: string;onClick: () => void;}) {

webui/src/features/admin/ConfigurationChangesPanel.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Check, RefreshCw } from "lucide-react";
 import type { ApiSettings } from "@govoplan/core-webui";
-import { AdminPageLayout, Button, Card, StatusBadge, adminErrorMessage, formatDateTime, i18nMessage, mergeDeltaRows, useDeltaWatermarks } from "@govoplan/core-webui";
+import { AdminPageLayout, Button, Card, DataGrid, StatusBadge, TableActionGroup, adminErrorMessage, formatDateTime, i18nMessage, mergeDeltaRows, useDeltaWatermarks, type DataGridColumn } from "@govoplan/core-webui";
 import {
   approveConfigurationChangeRequest,
   fetchConfigurationChangesDelta,
@@ -72,6 +72,47 @@ export default function ConfigurationChangesPanel({ settings, canApprove }: {set
   }
 
   const pending = useMemo(() => requests.filter((item) => item.status !== "applied" && item.status !== "rejected"), [requests]);
+  const requestColumns: DataGridColumn<ConfigurationChangeRequest>[] = [
+    {
+      id: "setting",
+      header: "i18n:govoplan-admin.setting.fb449f71",
+      width: "minmax(220px, 1fr)",
+      minWidth: 180,
+      resizable: true,
+      sortable: true,
+      filterable: true,
+      value: (request) => `${request.label || request.key} ${request.key}`,
+      render: (request) => <div><strong>{request.label || request.key}</strong><span className="muted block">{request.key}</span></div>
+    },
+    { id: "status", header: "i18n:govoplan-admin.status.bae7d5be", width: 150, sortable: true, filterable: true, value: (request) => request.status, render: (request) => <StatusBadge status={statusTone(request.status)} label={request.status} /> },
+    { id: "requested", header: "i18n:govoplan-admin.requested.c26bf60f", width: 180, sortable: true, value: (request) => request.requested_at, render: (request) => formatDateTime(request.requested_at) },
+    { id: "approvals", header: "i18n:govoplan-admin.approvals.deb9d03c", width: 110, sortable: true, value: (request) => request.approvals.length },
+    { id: "target", header: "i18n:govoplan-admin.target.61ad50a9", width: "minmax(180px, .8fr)", minWidth: 160, resizable: true, filterable: true, value: (request) => targetLabel(request.target), render: (request) => targetLabel(request.target) },
+    {
+      id: "actions",
+      header: "i18n:govoplan-admin.action.97c89a4d",
+      width: 72,
+      sticky: "end",
+      align: "right",
+      render: (request) => <TableActionGroup actions={[{
+        id: "approve",
+        label: "i18n:govoplan-admin.approve.7b2c7f14",
+        icon: <Check size={16} aria-hidden="true" />,
+        applicable: canApprove && request.status === "pending_approval",
+        disabled: busyId === request.id,
+        onClick: () => void approve(request)
+      }]} />
+    }
+  ];
+
+  const historyColumns: DataGridColumn<ConfigurationChangeRecord>[] = [
+    { id: "version", header: "i18n:govoplan-admin.version.2da600bf", width: 100, sortable: true, value: (record) => record.version, render: (record) => `#${record.version}` },
+    { id: "setting", header: "i18n:govoplan-admin.setting.fb449f71", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, sortable: true, filterable: true, value: (record) => `${record.key} ${record.id}`, render: (record) => <div><strong>{record.key}</strong><span className="muted block">{record.id}</span></div> },
+    { id: "status", header: "i18n:govoplan-admin.status.bae7d5be", width: 150, sortable: true, filterable: true, value: (record) => record.status, render: (record) => <StatusBadge status={statusTone(record.status)} label={record.status} /> },
+    { id: "applied", header: "i18n:govoplan-admin.applied.a3e4a569", width: 180, sortable: true, value: (record) => record.created_at, render: (record) => formatDateTime(record.created_at) },
+    { id: "approvers", header: "i18n:govoplan-admin.approvers.0e2de1fb", width: 120, sortable: true, value: (record) => record.approval_user_ids.length, render: (record) => record.approval_user_ids.length || "-" },
+    { id: "target", header: "i18n:govoplan-admin.target.61ad50a9", width: "minmax(180px, .8fr)", minWidth: 160, resizable: true, filterable: true, value: (record) => targetLabel(record.target), render: (record) => targetLabel(record.target) }
+  ];
 
   return (
     <AdminPageLayout
@@ -83,67 +124,23 @@ export default function ConfigurationChangesPanel({ settings, canApprove }: {set
       actions={<Button onClick={() => void load()} disabled={loading}><RefreshCw size={16} /> i18n:govoplan-admin.reload.cce71553</Button>}>
 
       <Card title="i18n:govoplan-admin.requests.f7194e6a">
-        <div className="admin-table-wrap">
+        <DataGrid
-          <table className="admin-table">
+          id="admin-configuration-change-requests"
-            <thead>
+          rows={pending}
-              <tr>
+          columns={requestColumns}
-                <th>i18n:govoplan-admin.setting.fb449f71</th>
+          getRowKey={(request) => request.id}
-                <th>i18n:govoplan-admin.status.bae7d5be</th>
+          emptyText="i18n:govoplan-admin.no_open_requests.580c95f9"
-                <th>i18n:govoplan-admin.requested.c26bf60f</th>
+        />
-                <th>i18n:govoplan-admin.approvals.deb9d03c</th>
-                <th>i18n:govoplan-admin.target.61ad50a9</th>
-                <th className="actions">i18n:govoplan-admin.action.97c89a4d</th>
-              </tr>
-            </thead>
-            <tbody>
-              {pending.map((request) =>
-              <tr key={request.id}>
-                  <td><strong>{request.label || request.key}</strong><span className="muted block">{request.key}</span></td>
-                  <td><StatusBadge status={statusTone(request.status)} label={request.status} /></td>
-                  <td>{formatDateTime(request.requested_at)}</td>
-                  <td>{request.approvals.length}</td>
-                  <td>{targetLabel(request.target)}</td>
-                  <td className="actions">
-                    {canApprove && request.status === "pending_approval" &&
-                  <Button onClick={() => void approve(request)} disabled={busyId === request.id}><Check size={16} /> i18n:govoplan-admin.approve.7b2c7f14</Button>
-                  }
-                  </td>
-                </tr>
-              )}
-              {!pending.length && <tr><td colSpan={6} className="muted">i18n:govoplan-admin.no_open_requests.580c95f9</td></tr>}
-            </tbody>
-          </table>
-        </div>
       </Card>
 
       <Card title="i18n:govoplan-admin.history.90ccd649">
-        <div className="admin-table-wrap">
+        <DataGrid
-          <table className="admin-table">
+          id="admin-configuration-change-history"
-            <thead>
+          rows={history}
-              <tr>
+          columns={historyColumns}
-                <th>i18n:govoplan-admin.version.2da600bf</th>
+          getRowKey={(record) => record.id}
-                <th>i18n:govoplan-admin.setting.fb449f71</th>
+          emptyText="i18n:govoplan-admin.no_applied_configuration_changes.6a3ae4a7"
-                <th>i18n:govoplan-admin.status.bae7d5be</th>
+        />
-                <th>i18n:govoplan-admin.applied.a3e4a569</th>
-                <th>i18n:govoplan-admin.approvers.0e2de1fb</th>
-                <th>i18n:govoplan-admin.target.61ad50a9</th>
-              </tr>
-            </thead>
-            <tbody>
-              {history.map((record) =>
-              <tr key={record.id}>
-                  <td>#{record.version}</td>
-                  <td><strong>{record.key}</strong><span className="muted block">{record.id}</span></td>
-                  <td><StatusBadge status={statusTone(record.status)} label={record.status} /></td>
-                  <td>{formatDateTime(record.created_at)}</td>
-                  <td>{record.approval_user_ids.length || "-"}</td>
-                  <td>{targetLabel(record.target)}</td>
-                </tr>
-              )}
-              {!history.length && <tr><td colSpan={6} className="muted">i18n:govoplan-admin.no_applied_configuration_changes.6a3ae4a7</td></tr>}
-            </tbody>
-          </table>
-        </div>
       </Card>
     </AdminPageLayout>);
 

webui/src/features/admin/ConfigurationPackagesPanel.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { Check, Download, Play, RefreshCw } from "lucide-react";
 import type { ApiSettings } from "@govoplan/core-webui";
-import { AdminPageLayout, Button, Card, StatusBadge, adminErrorMessage, i18nMessage } from "@govoplan/core-webui";
+import { AdminPageLayout, Button, Card, DataGrid, StatusBadge, adminErrorMessage, i18nMessage, type DataGridColumn } from "@govoplan/core-webui";
 import {
   applyConfigurationPackage,
   createConfigurationChangeRequest,
@@ -273,89 +273,68 @@ function parseObject(text: string): {value: Record<string, unknown> | null;error
 
 function PackageDiagnostics({ diagnostics }: {diagnostics: ConfigurationPackageDiagnostic[];}) {
   if (diagnostics.length === 0) return <p className="muted">i18n:govoplan-admin.no_diagnostics.2b6e2630</p>;
+  const columns: DataGridColumn<ConfigurationPackageDiagnostic>[] = [
+    { id: "severity", header: "i18n:govoplan-admin.severity.de314fa0", width: 130, sortable: true, filterable: true, value: (item) => item.severity, render: (item) => <StatusBadge status={diagnosticTone(item.severity)} label={item.severity} /> },
+    { id: "code", header: "i18n:govoplan-admin.code.adac6937", width: 190, sortable: true, filterable: true, value: (item) => item.code, render: (item) => <code>{item.code}</code> },
+    { id: "owner", header: "i18n:govoplan-admin.owner.89ff3122", width: 150, sortable: true, filterable: true, value: (item) => item.module_id || "-", render: (item) => item.module_id || "-" },
+    { id: "object", header: "i18n:govoplan-admin.object.2883f191", width: 180, sortable: true, filterable: true, value: (item) => item.object_ref || "-", render: (item) => item.object_ref || "-" },
+    { id: "message", header: "i18n:govoplan-admin.message.68f4145f", width: "minmax(260px, 1fr)", minWidth: 220, resizable: true, filterable: true, value: (item) => `${item.message} ${item.resolution || ""}`, render: (item) => <div>{item.message}{item.resolution ? <span className="muted block">{item.resolution}</span> : null}</div> }
+  ];
   return (
-    <div className="admin-table-wrap">
+    <DataGrid
-      <table className="admin-table">
+      id="admin-configuration-package-diagnostics"
-        <thead><tr><th>i18n:govoplan-admin.severity.de314fa0</th><th>i18n:govoplan-admin.code.adac6937</th><th>i18n:govoplan-admin.owner.89ff3122</th><th>i18n:govoplan-admin.object.2883f191</th><th>i18n:govoplan-admin.message.68f4145f</th></tr></thead>
+      rows={diagnostics}
-        <tbody>
+      columns={columns}
-          {diagnostics.map((item, index) =>
+      getRowKey={(item, index) => `${item.code}-${index}`}
-          <tr key={`${item.code}-${index}`}>
+    />);
-              <td><StatusBadge status={diagnosticTone(item.severity)} label={item.severity} /></td>
-              <td><code>{item.code}</code></td>
-              <td>{item.module_id || "-"}</td>
-              <td>{item.object_ref || "-"}</td>
-              <td>{item.message}{item.resolution ? <span className="muted block">{item.resolution}</span> : null}</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>);
 
 }
 
 function RequiredData({ items }: {items: ConfigurationPackageRequiredData[];}) {
   if (items.length === 0) return null;
+  const columns: DataGridColumn<ConfigurationPackageRequiredData>[] = [
+    { id: "key", header: "i18n:govoplan-admin.key.c67dd20e", width: "minmax(200px, 1fr)", minWidth: 170, resizable: true, sortable: true, filterable: true, value: (item) => item.key, render: (item) => <code>{item.key}</code> },
+    { id: "label", header: "i18n:govoplan-admin.label.74341e3c", width: "minmax(180px, 1fr)", minWidth: 160, resizable: true, sortable: true, filterable: true, value: (item) => item.label },
+    { id: "type", header: "i18n:govoplan-admin.type.3deb7456", width: 140, sortable: true, filterable: true, value: (item) => item.data_type },
+    { id: "required", header: "i18n:govoplan-admin.required.eed6bfb4", width: 110, sortable: true, value: (item) => item.required, render: (item) => item.required ? "yes" : "no" },
+    { id: "secret", header: "i18n:govoplan-admin.secret.f4e7a874", width: 100, sortable: true, value: (item) => item.secret, render: (item) => item.secret ? "yes" : "no" }
+  ];
   return (
     <>
       <h3>i18n:govoplan-admin.required_data.1b1c1b34</h3>
-      <div className="admin-table-wrap">
+      <DataGrid id="admin-configuration-package-required-data" rows={items} columns={columns} getRowKey={(item) => item.key} />
-        <table className="admin-table">
-          <thead><tr><th>i18n:govoplan-admin.key.c67dd20e</th><th>i18n:govoplan-admin.label.74341e3c</th><th>i18n:govoplan-admin.type.3deb7456</th><th>i18n:govoplan-admin.required.eed6bfb4</th><th>i18n:govoplan-admin.secret.f4e7a874</th></tr></thead>
-          <tbody>
-            {items.map((item) =>
-            <tr key={item.key}>
-                <td><code>{item.key}</code></td>
-                <td>{item.label}</td>
-                <td>{item.data_type}</td>
-                <td>{item.required ? "yes" : "no"}</td>
-                <td>{item.secret ? "yes" : "no"}</td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
     </>);
 
 }
 
 function PackagePlan({ items }: {items: ConfigurationPackagePlanItem[];}) {
   if (items.length === 0) return <p className="muted">i18n:govoplan-admin.no_plan_items.7108c582</p>;
+  const columns: DataGridColumn<ConfigurationPackagePlanItem>[] = [
+    { id: "action", header: "i18n:govoplan-admin.action.97c89a4d", width: 130, sortable: true, filterable: true, value: (item) => item.action, render: (item) => <StatusBadge status={planTone(item.action)} label={item.action} /> },
+    { id: "module", header: "i18n:govoplan-admin.module.b8ff0289", width: 170, sortable: true, filterable: true, value: (item) => item.module_id },
+    { id: "fragment", header: "i18n:govoplan-admin.fragment.3f19d616", width: 170, sortable: true, filterable: true, value: (item) => item.fragment_type },
+    { id: "id", header: "i18n:govoplan-admin.id.474ae526", width: 180, sortable: true, filterable: true, value: (item) => item.fragment_id || "-", render: (item) => item.fragment_id || "-" },
+    { id: "summary", header: "i18n:govoplan-admin.summary.12b71c3e", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, filterable: true, value: (item) => item.summary || "-", render: (item) => item.summary || "-" }
+  ];
   return (
     <>
       <h3>i18n:govoplan-admin.plan.ae2f98a0</h3>
-      <div className="admin-table-wrap">
+      <DataGrid id="admin-configuration-package-plan" rows={items} columns={columns} getRowKey={(item, index) => `${item.module_id}-${item.fragment_type}-${item.fragment_id ?? index}`} />
-        <table className="admin-table">
-          <thead><tr><th>i18n:govoplan-admin.action.97c89a4d</th><th>i18n:govoplan-admin.module.b8ff0289</th><th>i18n:govoplan-admin.fragment.3f19d616</th><th>i18n:govoplan-admin.id.474ae526</th><th>i18n:govoplan-admin.summary.12b71c3e</th></tr></thead>
-          <tbody>
-            {items.map((item, index) =>
-            <tr key={`${item.module_id}-${item.fragment_type}-${item.fragment_id ?? index}`}>
-                <td><StatusBadge status={planTone(item.action)} label={item.action} /></td>
-                <td>{item.module_id}</td>
-                <td>{item.fragment_type}</td>
-                <td>{item.fragment_id || "-"}</td>
-                <td>{item.summary || "-"}</td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
     </>);
 
 }
 
 function ReferenceMap({ title, refs }: {title: string;refs: Record<string, string>;}) {
-  const entries = Object.entries(refs);
+  const entries = Object.entries(refs).map(([key, value]) => ({ key, value }));
   if (entries.length === 0) return null;
+  const columns: DataGridColumn<{key: string;value: string;}>[] = [
+    { id: "key", header: "i18n:govoplan-admin.key.c67dd20e", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, sortable: true, filterable: true, value: (item) => item.key, render: (item) => <code>{item.key}</code> },
+    { id: "value", header: "Value", width: "minmax(220px, 1fr)", minWidth: 180, resizable: true, sortable: true, filterable: true, value: (item) => item.value }
+  ];
   return (
     <>
       <h3>{title}</h3>
-      <div className="admin-table-wrap">
+      <DataGrid id={`admin-configuration-package-refs-${title}`} rows={entries} columns={columns} getRowKey={(item) => item.key} />
-        <table className="admin-table">
-          <tbody>
-            {entries.map(([key, value]) => <tr key={key}><td><code>{key}</code></td><td>{value}</td></tr>)}
-          </tbody>
-        </table>
-      </div>
     </>);
 
 }

webui/src/features/admin/GovernanceTemplatesPanel.tsx

@@ -19,7 +19,7 @@ import {
   type PermissionItem,
   type TenantAdminItem } from
 "../../api/admin";
-import { AdminIconButton, AdminPageLayout, AdminSelectionList, adminErrorMessage, i18nMessage, useUnsavedDraftGuard } from "@govoplan/core-webui";
+import { AdminIconButton, AdminPageLayout, AdminSelectionList, TableActionGroup, adminErrorMessage, i18nMessage, useUnsavedDraftGuard } from "@govoplan/core-webui";
 
 const emptyDraft = {
   slug: "",
@@ -187,11 +187,11 @@ export default function GovernanceTemplatesPanel({
   { id: "status", header: "i18n:govoplan-admin.status.bae7d5be", width: 120, resizable: false, sortable: true, filterable: true, value: (row) => row.is_active ? "active" : "inactive", render: (row) => <StatusBadge status={row.is_active ? "active" : "inactive"} /> },
   {
     id: "actions", header: "i18n:govoplan-admin.actions.c3cd636a", width: 150, sticky: "end", resizable: false, align: "right",
-    render: (row) => <div className="admin-icon-actions">
+    render: (row) => <TableActionGroup actions={[
-        <AdminIconButton label={i18nMessage("i18n:govoplan-admin.inspect_value.9d5d1071", { value0: row.name })} icon={<Search />} onClick={() => setViewing(row)} />
+      { id: "inspect", label: i18nMessage("i18n:govoplan-admin.inspect_value.9d5d1071", { value0: row.name }), icon: <Search />, onClick: () => setViewing(row) },
-        <AdminIconButton label={i18nMessage("i18n:govoplan-admin.edit_value.fad75899", { value0: row.name })} icon={<Pencil />} onClick={() => openEdit(row)} disabled={!canWrite} />
+      { id: "edit", label: i18nMessage("i18n:govoplan-admin.edit_value.fad75899", { value0: row.name }), icon: <Pencil />, disabled: !canWrite, onClick: () => openEdit(row) },
-        <AdminIconButton label={i18nMessage("i18n:govoplan-admin.delete_value.4d18989e", { value0: row.name })} icon={<Trash2 />} variant="danger" onClick={() => setDeleting(row)} disabled={!canWrite} />
+      { id: "delete", label: i18nMessage("i18n:govoplan-admin.delete_value.4d18989e", { value0: row.name }), icon: <Trash2 />, variant: "danger", disabled: !canWrite, onClick: () => setDeleting(row) }
-      </div>
+    ]} />
   }],
   [canWrite, kind, tenants]);
 

webui/src/features/admin/ModuleManagementPanel.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import type { ApiSettings } from "@govoplan/core-webui";
-import { AdminPageLayout, adminErrorMessage, Button, dispatchPlatformModulesChanged, StatusBadge, ToggleSwitch, i18nMessage, useUnsavedDraftGuard } from "@govoplan/core-webui";
+import { AdminPageLayout, adminErrorMessage, Button, dispatchPlatformModulesChanged, formatDateTime, MetricCard, StatusBadge, ToggleSwitch, i18nMessage, useUnsavedDraftGuard, type FormatDateTimeOptions } from "@govoplan/core-webui";
 import {
   cancelModuleInstallerRequest,
   clearModuleInstallPlan,
@@ -323,11 +323,11 @@ export default function ModuleManagementPanel({ settings, canWrite, canAccessMai
 
       {catalog && <>
         <div className="metric-grid module-management-metrics">
-          <ModuleMetric label="i18n:govoplan-admin.installed.7bb4405c" value={catalog.modules.length} detail="i18n:govoplan-admin.discovered_packages.660902de" />
+          <MetricCard label="i18n:govoplan-admin.installed.7bb4405c" value={catalog.modules.length} detail="i18n:govoplan-admin.discovered_packages.660902de" tone="info" />
-          <ModuleMetric label="i18n:govoplan-admin.active.a733b809" value={activeCount} detail="i18n:govoplan-admin.running_registry.5274b24b" />
+          <MetricCard label="i18n:govoplan-admin.active.a733b809" value={activeCount} detail="i18n:govoplan-admin.running_registry.5274b24b" tone="info" />
-          <ModuleMetric label="i18n:govoplan-admin.saved.c0ae8f6e" value={desiredCount} detail="i18n:govoplan-admin.startup_state.d1300be6" />
+          <MetricCard label="i18n:govoplan-admin.saved.c0ae8f6e" value={desiredCount} detail="i18n:govoplan-admin.startup_state.d1300be6" tone="info" />
-          <ModuleMetric label="i18n:govoplan-admin.drift.4876f7b9" value={pendingCount} detail={pendingCount ? "i18n:govoplan-admin.runtime_differs.43d1fd78" : "i18n:govoplan-admin.runtime_matches.a84afa48"} tone={pendingCount ? "warning" : "good"} />
+          <MetricCard label="i18n:govoplan-admin.drift.4876f7b9" value={pendingCount} detail={pendingCount ? "i18n:govoplan-admin.runtime_differs.43d1fd78" : "i18n:govoplan-admin.runtime_matches.a84afa48"} tone={pendingCount ? "warning" : "good"} />
-          <ModuleMetric label="i18n:govoplan-admin.maintenance.94de303b" value={maintenanceEnabled ? "i18n:govoplan-admin.on.e0049a66" : "i18n:govoplan-admin.off.e3de5ab0"} detail={canAccessMaintenance ? "i18n:govoplan-admin.bypass_allowed.4e347c27" : "i18n:govoplan-admin.bypass_denied.ab987400"} tone={maintenanceEnabled ? "warning" : "info"} />
+          <MetricCard label="i18n:govoplan-admin.maintenance.94de303b" value={maintenanceEnabled ? "i18n:govoplan-admin.on.e0049a66" : "i18n:govoplan-admin.off.e3de5ab0"} detail={canAccessMaintenance ? "i18n:govoplan-admin.bypass_allowed.4e347c27" : "i18n:govoplan-admin.bypass_denied.ab987400"} tone={maintenanceEnabled ? "warning" : "info"} />
         </div>
 
         {dirty && <div className="module-management-notes">
@@ -596,10 +596,10 @@ export default function ModuleManagementPanel({ settings, canWrite, canAccessMai
                     <StatusBadge status={statusTone(request.status)} label={request.status} />
                   </div>
                   <div className="module-management-details">
-                    <span>i18n:govoplan-admin.created.0c78dab1 {formatDateTime(request.created_at)}</span>
+                    <span>i18n:govoplan-admin.created.0c78dab1 {formatDateTime(request.created_at, ADMIN_DATE_TIME_OPTIONS)}</span>
-                    <span>i18n:govoplan-admin.started.fe3824e9 {formatDateTime(request.started_at)}</span>
+                    <span>i18n:govoplan-admin.started.fe3824e9 {formatDateTime(request.started_at, ADMIN_DATE_TIME_OPTIONS)}</span>
-                    <span>i18n:govoplan-admin.finished.4b52fe3f {formatDateTime(request.finished_at)}</span>
+                    <span>i18n:govoplan-admin.finished.4b52fe3f {formatDateTime(request.finished_at, ADMIN_DATE_TIME_OPTIONS)}</span>
-                    {request.cancelled_at && <span>i18n:govoplan-admin.cancelled.8c9dcfa8 {formatDateTime(request.cancelled_at)}</span>}
+                    {request.cancelled_at && <span>i18n:govoplan-admin.cancelled.8c9dcfa8 {formatDateTime(request.cancelled_at, ADMIN_DATE_TIME_OPTIONS)}</span>}
                     {request.retry_of && <span>i18n:govoplan-admin.retry_of.3a6bb304 {request.retry_of}</span>}
                     {traceId(request.trace) && <span>i18n:govoplan-admin.trace.04a75036 <code>{traceId(request.trace)}</code></span>}
                   </div>
@@ -639,8 +639,8 @@ export default function ModuleManagementPanel({ settings, canWrite, canAccessMai
                     {run.request_id && <span>i18n:govoplan-admin.request.43c2e7a7 {run.request_id}</span>}
                     {traceId(run.trace) && <span>i18n:govoplan-admin.trace.04a75036 <code>{traceId(run.trace)}</code></span>}
                     <span>i18n:govoplan-admin.commands.f6a34aed {run.commands_count}</span>
-                    <span>i18n:govoplan-admin.started.fe3824e9 {formatDateTime(run.started_at)}</span>
+                    <span>i18n:govoplan-admin.started.fe3824e9 {formatDateTime(run.started_at, ADMIN_DATE_TIME_OPTIONS)}</span>
-                    <span>i18n:govoplan-admin.finished.4b52fe3f {formatDateTime(run.finished_at)}</span>
+                    <span>i18n:govoplan-admin.finished.4b52fe3f {formatDateTime(run.finished_at, ADMIN_DATE_TIME_OPTIONS)}</span>
                   </div>
                   {run.error && <p className="module-installer-run-error">{run.error}</p>}
                 </div>
@@ -654,10 +654,6 @@ export default function ModuleManagementPanel({ settings, canWrite, canAccessMai
 
 }
 
-function ModuleMetric({ label, value, detail, tone = "info" }: {label: string;value: string | number;detail: string;tone?: "info" | "good" | "warning";}) {
-  return <div className={`metric-card metric-${tone}`}><div className="metric-label">{label}</div><div className="metric-value">{value}</div><div className="metric-detail">{detail}</div></div>;
-}
-
 function LicenseStatus({ license }: {license: ModuleLicenseDiagnostics;}) {
   const label = license.license_id ? `${license.license_id}${license.subject ? ` · ${license.subject}` : ""}` : license.configured ? "i18n:govoplan-admin.configured_license.3e73f8f5" : "i18n:govoplan-admin.no_license_configured.693cea1a";
   return (
@@ -669,7 +665,7 @@ function LicenseStatus({ license }: {license: ModuleLicenseDiagnostics;}) {
       </div>
       <p className="module-package-catalog-description">{label}</p>
       <div className="module-management-details">
-        <span>i18n:govoplan-admin.valid.b374b8f9 {formatDateTime(license.valid_from)} to {formatDateTime(license.valid_until)}</span>
+        <span>i18n:govoplan-admin.valid.b374b8f9 {formatDateTime(license.valid_from, ADMIN_DATE_TIME_OPTIONS)} to {formatDateTime(license.valid_until, ADMIN_DATE_TIME_OPTIONS)}</span>
         <span>i18n:govoplan-admin.features.5df81ffa {license.features.length ? license.features.join(", ") : "none"}</span>
         {license.required_features.length > 0 && <span>i18n:govoplan-admin.required.d5793988 {license.required_features.join(", ")}</span>}
         {license.missing_features.length > 0 && <span>i18n:govoplan-admin.missing.feb2bbaa {license.missing_features.join(", ")}</span>}
@@ -851,12 +847,16 @@ function licenseLabel(license: ModuleLicenseDiagnostics): string {
   return "i18n:govoplan-admin.unsigned.e91344ea";
 }
 
-function formatDateTime(value?: string | null): string {
+const ADMIN_DATE_TIME_OPTIONS: FormatDateTimeOptions = {
-  if (!value) return "i18n:govoplan-admin.not_recorded.9925ee3c";
+  fallback: "i18n:govoplan-admin.not_recorded.9925ee3c",
-  const date = new Date(value);
+  year: "numeric",
-  if (Number.isNaN(date.getTime())) return value;
+  month: "numeric",
-  return date.toLocaleString();
+  day: "numeric",
-}
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  timeZoneName: undefined
+};
 
 function traceId(value?: Record<string, unknown> | null): string {
   const correlationId = value?.correlation_id;

webui/src/features/admin/SystemSettingsPanel.tsx

@@ -5,7 +5,7 @@ import { Card } from "@govoplan/core-webui";
 import { FormField } from "@govoplan/core-webui";
 import { ToggleSwitch } from "@govoplan/core-webui";
 import { fetchSystemSettingsDelta, updateSystemSettings, type LanguagePackage, type PrivacyRetentionLimitPermissions, type PrivacyRetentionPolicy, type SystemSettingsDeltaSections, type SystemSettingsItem } from "../../api/admin";
-import { AdminPageLayout, adminErrorMessage, useDeltaWatermarks, useUnsavedDraftGuard } from "@govoplan/core-webui";
+import { AdminPageLayout, AdminSelectionList, adminErrorMessage, useDeltaWatermarks, useUnsavedDraftGuard } from "@govoplan/core-webui";
 
 const DELTA_KEY = "admin:system-settings";
 
@@ -112,10 +112,8 @@ export default function SystemSettingsPanel({ settings, canWrite, canAccessMaint
     {setBusy(false);}
   }
 
-  function toggleLanguage(code: string, checked: boolean) {
+  function setEnabledLanguages(selected: string[]) {
-    const enabled = new Set(draft.enabled_language_codes);
+    const enabled = new Set(selected);
-    if (checked) enabled.add(code);
-    else enabled.delete(code);
     const nextEnabled = draft.available_languages.map((item) => item.code).filter((item) => enabled.has(item));
     const defaultLocale = nextEnabled.includes(draft.default_locale) ? draft.default_locale : (nextEnabled[0] ?? draft.default_locale);
     setDraft({ ...draft, enabled_language_codes: nextEnabled, default_locale: defaultLocale });
@@ -159,18 +157,11 @@ export default function SystemSettingsPanel({ settings, canWrite, canAccessMaint
           </FormField>
         </Card>
         <Card title="i18n:govoplan-admin.language_packages">
-          <div className="settings-list">
+          <AdminSelectionList
-            {draft.available_languages.map((item) => (
+            options={draft.available_languages.map((item) => ({ id: item.code, label: item.code.toUpperCase(), description: languageOptionLabel(item), disabled: !canWrite || busy || item.code === draft.default_locale }))}
-              <label className="admin-inline-check" key={item.code}>
+            selected={draft.enabled_language_codes}
-                <input
+            onChange={setEnabledLanguages}
-                  type="checkbox"
+          />
-                  checked={draft.enabled_language_codes.includes(item.code)}
-                  disabled={!canWrite || busy || item.code === draft.default_locale}
-                  onChange={(event) => toggleLanguage(item.code, event.target.checked)} />
-                <span><strong>{item.code.toUpperCase()}</strong> {languageOptionLabel(item)}</span>
-              </label>
-            ))}
-          </div>
           <div className="form-grid">
             <FormField label="i18n:govoplan-admin.language_code">
               <input value={packageDraft.code} disabled={!canWrite || busy} placeholder="fr" onChange={(event) => setPackageDraft({ ...packageDraft, code: event.target.value })} />