@scalio-cloud/ui 0.26.0 → 0.27.1

package/README.md

@@ -295,7 +295,8 @@ const license = licenseApi(api);
 
 // Einstellungen -> System -> Lizenz (scalio-license backend: /license, /license/addons)
 <LicensePanel client={license} lang={lang} product="Citadel" kindLabel={licenseKindLabel}
-  featureLabel={licenseFeatureLabel} noFeatures="Nur Drift-Erkennung" notify={...} confirm={confirm} />
+  featureLabel={licenseFeatureLabel} noFeatures={t("Drift detection only")} notify={...} confirm={confirm} />
+// noFeatures only when the app has a better text than «Nur die Grundfunktionen»
 ```
 
 `securityApi` reads snake_case and camelCase answers. `notify(text, tone)` gets `"success"` or `"error"`; without it
@@ -304,6 +305,26 @@ the blocks show the message themselves. `confirm` is the app's dialog (`{title,
 that returns the view model described in `react/license.js`. Nexus does this: its `map` adds trial badges, seat hints, invalid
 add-ons and read-only notes (demo mode), and passes its trial notices as `statusExtra` and the reminder settings as `children`.
 
+Since 0.27.0 (ADR 0069) the panel shows three areas in the settings form (title and hint left, card right): «Status und
+Nutzung», «Add-ons», «Lizenzschlüssel». `children` with `extraTitle` (and `extraHint`) becomes a fourth area. The panel passes its `lang` to every `client` call;
+`licenseApi` sends it as `?lang=`, so scalio-license 0.4.0 renders warnings and errors in the language of the page.
+
+## Gruppe System: Zurücksetzen and helpers (React)
+
+Every app shows Einstellungen → System in the same order: Lizenz, Updates, Sicherung, Zurücksetzen (`settingsGroups`
+sorts the group `system` that way). The reset block talks to scalio-platform `factory_reset`
+(`GET`/`POST /api/admin/factory-reset`):
+
+```jsx
+import { FactoryReset, factoryResetApi, SettingsField, SettingsRow } from "@scalio-cloud/ui/react";
+
+const reset = factoryResetApi(api);   // once, outside the component
+<FactoryReset client={reset} lang={lang} tokenKey="citadel_token" backupTo="/settings/backup" link={Link} />
+```
+
+`SettingsField` (label, field, help) and `SettingsRow` (title and help left, a switch or button right; `tone="danger"`)
+keep the fields inside a `SettingsSection` the same in every app.
+
 ## Command palette (React)
 
 Reads the same navigation data as the sidebar. Put it once into the layout; the sidebar search button opens it.

package/nav.css

@@ -356,6 +356,18 @@
 .scalio-settings-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
 .scalio-settings-body { display: flex; flex-direction: column; }
 .scalio-settings-section-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }
+/* Content of a settings area (ADR 0069 W1): text, help under a field, checkbox with text, a form. */
+.scalio-settings-form { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
+.scalio-settings-text { margin: 0; font-size: 0.875rem; line-height: 1.5; }
+.scalio-settings-help { display: block; margin: 0.25rem 0 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
+.scalio-settings-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
+.scalio-settings-check input { margin-top: 0.2rem; }
+.scalio-settings-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+.scalio-settings-row-text { min-width: 0; font-size: 0.875rem; }
+.scalio-settings-row-text strong { display: block; font-weight: 600; }
+.scalio-settings-row + .scalio-settings-row { padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
+.scalio-settings-row.is-danger strong { color: hsl(var(--destructive)); }
+.scalio-notice .scalio-btn { margin-left: auto; flex-shrink: 0; }
 
 /* Button variants for page blocks (base: .scalio-btn in shell.css) */
 .scalio-btn.is-primary { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
@@ -363,6 +375,9 @@
 .scalio-btn.is-ghost { border-color: transparent; background: transparent; color: hsl(var(--muted-foreground)); }
 .scalio-btn.is-ghost:hover { color: hsl(var(--foreground)); background: transparent; }
 .scalio-btn.is-danger { color: hsl(var(--destructive)); }
+.scalio-btn.is-danger.is-solid { border-color: hsl(var(--destructive)); background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground, 0 0% 100%)); }
+.scalio-btn.is-danger.is-solid:hover { background: hsl(var(--destructive) / 0.9); }
+.scalio-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .scalio-btn.is-ghost.is-danger { color: hsl(var(--muted-foreground)); }
 .scalio-btn.is-ghost.is-danger:hover { color: hsl(var(--destructive)); }
 .scalio-btn:disabled { opacity: 0.6; cursor: default; }
@@ -535,13 +550,13 @@
 .scalio-wizard-success-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; }
 
 /* License panel (LicensePanel) */
-.scalio-license { border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); font-size: 0.875rem; }
+.scalio-license { font-size: 0.875rem; } /* areas in the settings form (ADR 0069); the cards come from .scalio-profile-section-body */
 .scalio-license-part { padding: 1.25rem; }
 .scalio-license-part + .scalio-license-part { border-top: 1px solid hsl(var(--border)); }
 .scalio-license-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'Chivo', sans-serif; font-weight: 700; }
 .scalio-license-title .scalio-icon { color: hsl(var(--primary)); }
 .scalio-license-hint { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); }
-.scalio-license-messages { display: flex; flex-direction: column; gap: 0.25rem; margin: 1.25rem 1.25rem 0; }
+.scalio-license-messages { display: flex; flex-direction: column; gap: 0.25rem; }
 .scalio-license-messages div { display: flex; gap: 0.5rem; }
 .scalio-license-messages .scalio-icon { flex-shrink: 0; margin-top: 0.125rem; }
 .scalio-license-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/icons.js

@@ -132,7 +132,8 @@ const Globe = icon([
   ["path", { d: "M2 12h20" }],
 ]);
 const Clock = icon([["circle", { cx: 12, cy: 12, r: 10 }], ["path", { d: "M12 6v6l4 2" }]]);
+const Download = icon([["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { d: "m7 10 5 5 5-5" }], ["path", { d: "M12 15V3" }]]);
 
 module.exports = { Sun, Moon, Monitor, LifeBuoy, BookOpen, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
   Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Pencil, Link2, Alert, History, CornerDownLeft,
-  Users, Settings, ScrollText, Info, RadioTower, Globe, Clock };
+  Users, Settings, ScrollText, Info, RadioTower, Globe, Clock, Download };

package/react/index.js

@@ -378,6 +378,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -325,10 +325,26 @@ const LABELS = {
       continue: "Weiter",
       cancel: "Abbrechen",
     },
+    reset: {
+      title: "Auf Werkseinstellungen zurücksetzen",
+      hint: "Alle Daten löschen und die Instanz neu einrichten.",
+      saas: "Diese Instanz wird im Kundenportal (Scalio Compass) zurückgesetzt: Abos, Mandant verwalten, Instanz zurücksetzen. Das Portal zeigt den neuen Einrichtungscode.",
+      text: "Löscht alle Daten dieser Instanz: Benutzer, Einstellungen und alles, was Sie erfasst haben. Die Installations-ID bleibt, die Lizenz auch, ausser Sie entfernen sie. Danach startet die Instanz wieder mit der Ersteinrichtung; den neuen Einrichtungscode finden Sie im Log des Backends.",
+      warn: "Das lässt sich nicht rückgängig machen. Sichern Sie vorher, was Sie noch brauchen.",
+      backupFirst: "Zuerst sichern",
+      confirm: "Zur Bestätigung RESET eingeben",
+      removeLicense: "Lizenz ebenfalls entfernen",
+      removeLicenseHint: "Danach läuft die Instanz als freie Edition, bis wieder ein Lizenzschlüssel eingetragen ist. Die Installations-ID bleibt.",
+      password: "Ihr Passwort",
+      run: "Auf Werkseinstellungen zurücksetzen",
+    },
     license: {
       title: "Lizenz",
       hint: "Lizenzen kaufen und verlängern Sie in Scalio Compass. Der Schlüssel gilt nur für die Installations-ID unten.",
       managed: "Die Lizenz dieser Instanz wird von Ihrem Anbieter verwaltet.",
+      statusTitle: "Status und Nutzung",
+      addonsHint: "Zusätzliche Module oder Plätze. Jedes Add-on hat einen eigenen Schlüssel aus Scalio Compass.",
+      keyHint: "Der Schlüssel aus Scalio Compass. Er gilt sofort, ohne Neustart.",
       status: "Status",
       active: "Aktiv",
       limited: "Eingeschränkt",
@@ -717,10 +733,26 @@ const LABELS = {
       continue: "Continue",
       cancel: "Cancel",
     },
+    reset: {
+      title: "Reset to factory settings",
+      hint: "Wipe all data and set the instance up again.",
+      saas: "This instance is reset in the customer portal (Scalio Compass): Subscriptions, Manage tenant, Reset instance. The portal shows the new setup code.",
+      text: "Deletes all data of this instance: users, settings and everything you created. The installation ID stays, and the license too unless you remove it. Afterwards the instance starts with the first-run setup again; the new setup code is in the log of the backend.",
+      warn: "This cannot be undone. Back up what you still need first.",
+      backupFirst: "Back up first",
+      confirm: "Type RESET to confirm",
+      removeLicense: "Remove the license as well",
+      removeLicenseHint: "Afterwards the instance runs as the free edition until a license key is entered again. The installation ID stays.",
+      password: "Your password",
+      run: "Reset to factory settings",
+    },
     license: {
       title: "License",
       hint: "Buy or extend a license in Scalio Compass. The key is bound to the installation ID below.",
       managed: "The license of this instance is managed by your provider.",
+      statusTitle: "Status and usage",
+      addonsHint: "Extra modules or seats. Every add-on has its own key from Scalio Compass.",
+      keyHint: "The key from Scalio Compass. It applies right away, no restart needed.",
       status: "Status",
       active: "Active",
       limited: "Limited",

package/react/license.js

@@ -6,6 +6,7 @@ const React = require("react");
 const h = React.createElement;
 const Icons = require("./icons");
 const { labelsFor } = require("./labels");
+const { SettingsSection } = require("./settings");
 
 function cx() {
   return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
@@ -24,14 +25,17 @@ function errorText(err) {
 }
 
 // api: axios instance with the app's base URL (/api). Every method resolves to the license as the backend sends it.
+// lang ("de"/"en", last argument): scalio-license 0.4.0 renders its messages in that language (?lang=); older
+// backends ignore it.
 function licenseApi(api) {
   const data = (p) => p.then((r) => r.data);
+  const q = (lang) => (lang === "de" || lang === "en" ? { params: { lang } } : undefined);
   return {
-    get: () => data(api.get("/license")),
-    activate: (key) => data(api.put("/license", { key })),
-    removeKey: () => data(api.delete("/license")),
-    addAddon: (key) => data(api.post("/license/addons", { key })),
-    removeAddon: (addon) => data(api.delete(`/license/addons/${encodeURIComponent(addon.id)}`)),
+    get: (lang) => data(api.get("/license", q(lang))),
+    activate: (key, lang) => data(api.put("/license", { key }, q(lang))),
+    removeKey: (lang) => data(api.delete("/license", q(lang))),
+    addAddon: (key, lang) => data(api.post("/license/addons", { key }, q(lang))),
+    removeAddon: (addon, lang) => data(api.delete(`/license/addons/${encodeURIComponent(addon.id)}`, q(lang))),
   };
 }
 
@@ -105,7 +109,8 @@ function UsageBar({ item }) {
 // Props: client (licenseApi or the same shape), map(license, {L, lang, kindLabel, featureLabel}) -> view model,
 // lang, labels, product ("Citadel", for the remove question), kindLabel(k), featureLabel(f), noFeatures (text when
 // the license has no features), notify(message, tone), confirm({title, action, danger}), onChange(license), children
-// (extra parts at the end, e.g. a policy form), formatError(err) -> text, className.
+// (extra parts at the end, e.g. a policy form; extraTitle/extraHint make them an own area), formatError(err) -> text,
+// className.
 function LicensePanel(props) {
   const { client, lang, notify, confirm, onChange } = props;
   const L = labelsFor(lang, props.labels).license;
@@ -119,9 +124,9 @@ function LicensePanel(props) {
 
   React.useEffect(() => {
     let alive = true;
-    client.get().then((d) => alive && setLic(d)).catch((err) => alive && setLoadError(fmtErr(err)));
+    client.get(lang).then((d) => alive && setLic(d)).catch((err) => alive && setLoadError(fmtErr(err)));
     return () => { alive = false; };
-  }, [client]);
+  }, [client, lang]);
 
   const say = (text, tone) => {
     if (notify) notify(text, tone || "success");
@@ -149,15 +154,15 @@ function LicensePanel(props) {
     }
   };
   const activate = async () => {
-    if (await run(() => client.activate(key.trim()), L.activated)) setKey("");
+    if (await run(() => client.activate(key.trim(), lang), L.activated)) setKey("");
   };
   const remove = async () => {
     const title = fill(L.removeConfirm, { product: props.product || "Scalio" });
     const yes = confirm ? await confirm({ title, action: L.remove, danger: true }) : window.confirm(title);
-    if (yes) run(() => client.removeKey(), L.removed);
+    if (yes) run(() => client.removeKey(lang), L.removed);
   };
   const addAddon = async () => {
-    if (await run(() => client.addAddon(addon.trim()), L.addonActivated)) setAddon("");
+    if (await run(() => client.addAddon(addon.trim(), lang), L.addonActivated)) setAddon("");
   };
   const copy = async (value, copied) => {
     try {
@@ -179,133 +184,131 @@ function LicensePanel(props) {
         : h("dd", { className: cx(r.mono && "is-mono"), "data-testid": r.testId }, r.tone ? h("span", { className: `is-${r.tone}` }, r.value) : r.value)
     );
 
-  return h(
-    "section",
-    { className: cx("scalio-license", props.className), "data-testid": props.testId || "license-panel" },
-    h(
-      "div",
-      { className: "scalio-license-part" },
-      h("div", { className: "scalio-license-title" }, h(Icons.ShieldCheck, { className: "scalio-icon" }), L.title),
-      h("p", { className: "scalio-license-hint" }, m.managed ? L.managed : L.hint)
-    ),
-    note ? h("div", { className: cx("scalio-notice", note.tone === "error" ? "is-error" : "is-ok"), style: { margin: "1.25rem 1.25rem 0" }, role: "status" }, note.text) : null,
+  // ADR 0069 (wartung/W1): three areas in the settings form, title and hint left, card right.
+  const statusCard = [
+    note ? h("div", { key: "note", className: cx("scalio-notice", note.tone === "error" ? "is-error" : "is-ok"), role: "status" }, note.text) : null,
     m.messages.length
-      ? h("div", { className: "scalio-notice is-warn scalio-license-messages", "data-testid": "license-messages" },
+      ? h("div", { key: "msg", className: "scalio-notice is-warn scalio-license-messages", "data-testid": "license-messages" },
           m.messages.map((t) => h("div", { key: t }, h(Icons.Alert, { className: "scalio-icon" }), h("span", null, t))))
       : null,
     h(
       "div",
-      { className: "scalio-license-part scalio-license-grid" },
+      { key: "status", className: "scalio-license-status" },
       h(
         "div",
-        { className: "scalio-license-status" },
-        h(
-          "div",
-          { className: "scalio-license-edition" },
-          h("span", { className: cx("scalio-badge", m.licensed ? "is-ok" : "is-warn"), "data-testid": "license-edition" }, m.edition),
-          m.customer ? h("span", { className: "scalio-license-customer" }, m.customer) : null
-        ),
-        h("dl", { className: "scalio-license-rows" }, m.rows.map(row)),
-        m.features
-          ? h(
-              "div",
-              null,
-              h("div", { className: "scalio-license-hint", style: { marginBottom: "0.25rem" } }, L.features),
-              m.features.length
-                ? h("ul", { className: "scalio-license-features", "data-testid": "license-features" },
-                    m.features.map((f) => h("li", { key: f.key }, h(Icons.Check, { className: "scalio-icon" }), f.label)))
-                : h("p", { className: "scalio-license-hint" }, props.noFeatures || L.noFeatures)
-            )
-          : null,
-        props.statusExtra || null
+        { className: "scalio-license-edition" },
+        h("span", { className: cx("scalio-badge", m.licensed ? "is-ok" : "is-warn"), "data-testid": "license-edition" }, m.edition),
+        m.customer ? h("span", { className: "scalio-license-customer" }, m.customer) : null
       ),
-      m.usage.length
-        ? h("div", { className: "scalio-license-usage" }, h("div", { className: "scalio-license-sub" }, L.usage), m.usage.map((u) => h(UsageBar, { key: u.key, item: u })))
-        : null
-    ),
-    m.addonsHidden ? null : h(
-      "div",
-      { className: "scalio-license-part", "data-testid": "license-addons" },
-      h("div", { className: "scalio-license-sub" }, h(Icons.Puzzle, { className: "scalio-icon", width: 14, height: 14 }), L.addons),
-      m.addons.length
+      h("dl", { className: "scalio-license-rows" }, m.rows.map(row)),
+      m.features
         ? h(
             "div",
-            { className: "scalio-license-addons" },
-            m.addons.map((a) =>
+            null,
+            h("div", { className: "scalio-license-hint", style: { marginBottom: "0.25rem" } }, L.features),
+            m.features.length
+              ? h("ul", { className: "scalio-license-features", "data-testid": "license-features" },
+                  m.features.map((f) => h("li", { key: f.key }, h(Icons.Check, { className: "scalio-icon" }), f.label)))
+              : h("p", { className: "scalio-license-hint", "data-testid": "license-no-features" }, props.noFeatures || L.noFeatures)
+          )
+        : null,
+      props.statusExtra || null
+    ),
+    m.usage.length
+      ? h("div", { key: "usage", className: "scalio-license-usage" }, h("div", { className: "scalio-license-sub" }, L.usage), m.usage.map((u) => h(UsageBar, { key: u.key, item: u })))
+      : null,
+  ];
+
+  const addonCard = [
+    m.addons.length
+      ? h(
+          "div",
+          { key: "list", className: "scalio-license-addons" },
+          m.addons.map((a) =>
+            h(
+              "div",
+              { key: a.id, className: cx("scalio-license-addon", a.tone && `tone-${a.tone}`), "data-testid": `addon-card-${a.id}` },
               h(
                 "div",
-                { key: a.id, className: cx("scalio-license-addon", a.tone && `tone-${a.tone}`), "data-testid": `addon-card-${a.id}` },
+                { style: { minWidth: 0 } },
                 h(
                   "div",
-                  { style: { minWidth: 0 } },
-                  h(
-                    "div",
-                    { className: "scalio-license-addon-name" },
-                    a.name,
-                    (a.badges || []).map((b) =>
-                      h("span", { key: b.label, className: cx("scalio-badge", b.tone && `is-${b.tone}`), "data-testid": b.testId }, b.label))
-                  ),
-                  h("p", { className: "scalio-license-addon-detail" },
-                    a.detail !== undefined
-                      ? a.detail
-                      : [a.seats ? `+${a.seats}` : h("span", { key: "i", className: "is-ok" }, L.included), a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : ""])
+                  { className: "scalio-license-addon-name" },
+                  a.name,
+                  (a.badges || []).map((b) =>
+                    h("span", { key: b.label, className: cx("scalio-badge", b.tone && `is-${b.tone}`), "data-testid": b.testId }, b.label))
                 ),
-                m.managed || m.addonsReadOnly || a.removable === false
-                  ? null
-                  : h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy, title: L.remove, "aria-label": L.remove,
-                      "data-testid": `addon-remove-${a.id}`, onClick: () => run(() => client.removeAddon(a), L.addonRemoved) },
-                      h(Icons.Trash, { className: "scalio-icon" }))
-              )
+                h("p", { className: "scalio-license-addon-detail" },
+                  a.detail !== undefined
+                    ? a.detail
+                    : [a.seats ? `+${a.seats}` : h("span", { key: "i", className: "is-ok" }, L.included), a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : ""])
+              ),
+              m.managed || m.addonsReadOnly || a.removable === false
+                ? null
+                : h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy, title: L.remove, "aria-label": L.remove,
+                    "data-testid": `addon-remove-${a.id}`, onClick: () => run(() => client.removeAddon(a, lang), L.addonRemoved) },
+                    h(Icons.Trash, { className: "scalio-icon" }))
             )
           )
-        : h("p", { className: "scalio-license-empty" }, L.noAddons),
-      m.addonErrors.map((e) =>
-        h(
-          "div",
-          { key: e.key, className: "scalio-license-addon-error", "data-testid": e.testId },
-          h("span", null, e.error),
-          e.addon && !m.managed && !m.addonsReadOnly
-            ? h("button", { type: "button", className: "scalio-license-link", disabled: busy, "data-testid": `addon-remove-${e.addon.id}`,
-                onClick: () => run(() => client.removeAddon(e.addon), L.addonRemoved) }, L.remove)
-            : null
         )
-      ),
-      m.addonsReadOnly
-        ? h("div", { className: "scalio-notice is-info", "data-testid": "license-addon-readonly" }, m.addonsReadOnly)
-        : m.managed
-        ? null
-        : h(
-            "div",
-            { className: "scalio-license-form" },
-            h("textarea", { className: "scalio-input scalio-textarea", rows: 2, value: addon, placeholder: L.addonPlaceholder, disabled: busy,
-              "aria-label": L.addonPlaceholder, "data-testid": "license-addon-input", onChange: (e) => setAddon(e.target.value) }),
-            h("div", { className: "scalio-license-actions" },
-              h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !addon.trim(), onClick: addAddon, "data-testid": "license-addon-add" },
-                h(Icons.Plus, { className: "scalio-icon" }), L.add))
-          )
+      : h("p", { key: "empty", className: "scalio-license-empty" }, L.noAddons),
+    m.addonErrors.map((e) =>
+      h(
+        "div",
+        { key: `err-${e.key}`, className: "scalio-license-addon-error", "data-testid": e.testId },
+        h("span", null, e.error),
+        e.addon && !m.managed && !m.addonsReadOnly
+          ? h("button", { type: "button", className: "scalio-license-link", disabled: busy, "data-testid": `addon-remove-${e.addon.id}`,
+              onClick: () => run(() => client.removeAddon(e.addon, lang), L.addonRemoved) }, L.remove)
+          : null
+      )
     ),
-    m.keyReadOnly && !m.managed
-      ? h("div", { className: "scalio-license-part" }, h("div", { className: "scalio-notice is-info", "data-testid": "license-key-readonly" }, m.keyReadOnly))
+    m.addonsReadOnly
+      ? h("div", { key: "ro", className: "scalio-notice is-info", "data-testid": "license-addon-readonly" }, m.addonsReadOnly)
       : m.managed
       ? null
       : h(
           "div",
-          { className: "scalio-license-part scalio-license-form" },
-          h("div", { className: "scalio-license-sub" }, h(Icons.KeyRound, { className: "scalio-icon", width: 14, height: 14 }), L.key),
-          h("textarea", { className: "scalio-input scalio-textarea", rows: 3, value: key, placeholder: L.keyPlaceholder, disabled: busy,
-            "aria-label": L.keyPlaceholder, "data-testid": "license-key-input", onChange: (e) => setKey(e.target.value) }),
-          h(
-            "div",
-            { className: "scalio-license-actions" },
-            h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !key.trim(), onClick: activate, "data-testid": "license-activate" },
-              h(Icons.ShieldCheck, { className: "scalio-icon" }), L.activate),
-            m.keyPresent
-              ? h("button", { type: "button", className: "scalio-btn is-danger", disabled: busy, onClick: remove, "data-testid": "license-remove" },
-                  h(Icons.Trash, { className: "scalio-icon" }), L.remove)
-              : null
-          )
+          { key: "form", className: "scalio-license-form" },
+          h("textarea", { className: "scalio-input scalio-textarea", rows: 2, value: addon, placeholder: L.addonPlaceholder, disabled: busy,
+            "aria-label": L.addonPlaceholder, "data-testid": "license-addon-input", onChange: (e) => setAddon(e.target.value) }),
+          h("div", { className: "scalio-license-actions" },
+            h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !addon.trim(), onClick: addAddon, "data-testid": "license-addon-add" },
+              h(Icons.Plus, { className: "scalio-icon" }), L.add))
         ),
-    props.children ? h("div", { className: "scalio-license-part" }, props.children) : null
+  ];
+
+  const keyCard = m.keyReadOnly
+    ? h("div", { className: "scalio-notice is-info", "data-testid": "license-key-readonly" }, m.keyReadOnly)
+    : h(
+        "div",
+        { className: "scalio-license-form" },
+        h("textarea", { className: "scalio-input scalio-textarea", rows: 3, value: key, placeholder: L.keyPlaceholder, disabled: busy,
+          "aria-label": L.keyPlaceholder, "data-testid": "license-key-input", onChange: (e) => setKey(e.target.value) }),
+        h(
+          "div",
+          { className: "scalio-license-actions" },
+          h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || !key.trim(), onClick: activate, "data-testid": "license-activate" },
+            h(Icons.ShieldCheck, { className: "scalio-icon" }), L.activate),
+          m.keyPresent
+            ? h("button", { type: "button", className: "scalio-btn is-danger", disabled: busy, onClick: remove, "data-testid": "license-remove" },
+                h(Icons.Trash, { className: "scalio-icon" }), L.remove)
+            : null
+        )
+      );
+
+  return h(
+    "div",
+    { className: cx("scalio-license", props.className), "data-testid": props.testId || "license-panel" },
+    h(SettingsSection, { id: "license-status", title: L.statusTitle, description: m.managed ? L.managed : L.hint, testId: "license-status-section" }, statusCard),
+    m.addonsHidden ? null : h(SettingsSection, { id: "license-addons", title: L.addons, description: L.addonsHint, testId: "license-addons" }, addonCard),
+    m.managed ? null : h(SettingsSection, { id: "license-key", title: L.key, description: L.keyHint, testId: "license-key-section" }, keyCard),
+    // Extra parts of an app (Nexus: reminders): with extraTitle as an own area, else as they are.
+    props.children
+      ? props.extraTitle
+        ? h(SettingsSection, { id: "license-extra", title: props.extraTitle, description: props.extraHint, testId: "license-extra" }, props.children)
+        : props.children
+      : null
   );
 }
 

package/react/maintenance.js

@@ -0,0 +1,106 @@
+"use strict";
+// Einstellungen -> System (ADR 0069, wartung/W2): blocks every app shows the same way. Today: Zurücksetzen (W7, after
+// Citadel). Backend: scalio-platform `factory_reset` (GET/POST /api/admin/factory-reset).
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+const { SettingsSection, SettingsField: Field } = require("./settings");
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  if (Array.isArray(d)) return d.map((x) => (x && x.msg) || String(x)).join(" ");
+  return (err && err.message) || String(err);
+}
+
+// api: axios instance with the app's base URL (/api).
+function factoryResetApi(api) {
+  return {
+    info: () => api.get("/admin/factory-reset").then((r) => r.data),
+    run: (body) => api.post("/admin/factory-reset", body).then((r) => r.data),
+  };
+}
+
+// Props: client (factoryResetApi), lang, labels, tokenKey (localStorage key of the app's token, removed after the
+// reset), onDone() (default: go to /login), backupTo (address of Einstellungen -> Sicherung; shows «Zuerst sichern»),
+// link (the router's Link for backupTo), notify(message, tone), formatError(err).
+function FactoryReset(props) {
+  const { client, lang } = props;
+  const L = labelsFor(lang, props.labels).reset;
+  const fmtErr = props.formatError || errorText;
+  const [info, setInfo] = React.useState(null);
+  const [confirm, setConfirm] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [removeLicense, setRemoveLicense] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+
+  React.useEffect(() => {
+    let alive = true;
+    client.info().then((d) => alive && setInfo(d)).catch(() => alive && setInfo({ available: false }));
+    return () => { alive = false; };
+  }, [client]);
+
+  const ready = confirm.trim() === "RESET" && (!info || !info.password || !!password);
+  const run = async (e) => {
+    e.preventDefault();
+    if (!ready) return;
+    setBusy(true);
+    setError("");
+    try {
+      await client.run({ confirm, password, remove_license: removeLicense });
+      try { if (props.tokenKey) window.localStorage.removeItem(props.tokenKey); } catch (x) { /* private mode */ }
+      if (props.onDone) props.onDone();
+      else window.location.href = "/login";
+    } catch (err) {
+      const text = fmtErr(err);
+      if (props.notify) props.notify(text, "error");
+      else setError(text);
+      setBusy(false);
+    }
+  };
+
+  const backup = props.backupTo
+    ? h(props.link || "a", Object.assign({ className: "scalio-btn", "data-testid": "factory-reset-backup" },
+        props.link ? { to: props.backupTo } : { href: props.backupTo }), h(Icons.Download, { className: "scalio-icon" }), L.backupFirst)
+    : null;
+
+  return h(
+    SettingsSection,
+    { id: "reset", title: L.title, description: L.hint, testId: "factory-reset" },
+    info && !info.available
+      ? h("p", { className: "scalio-settings-text", "data-testid": "factory-reset-saas" }, L.saas)
+      : null,
+    info && info.available
+      ? h(
+          "form",
+          { className: "scalio-settings-form", onSubmit: run },
+          h("p", { className: "scalio-settings-text" }, props.text || L.text),
+          h("div", { className: "scalio-notice is-warn", "data-testid": "factory-reset-warn" },
+            h("span", null, L.warn), backup),
+          h(Field, { id: "factory-reset-confirm", label: L.confirm },
+            h("input", { id: "factory-reset-confirm", className: "scalio-input", value: confirm, autoComplete: "off", disabled: busy,
+              "data-testid": "factory-reset-confirm", onChange: (e) => setConfirm(e.target.value) })),
+          h(
+            "label",
+            { className: "scalio-settings-check" },
+            h("input", { type: "checkbox", checked: removeLicense, disabled: busy, "data-testid": "factory-reset-remove-license",
+              onChange: (e) => setRemoveLicense(e.target.checked) }),
+            h("span", null, L.removeLicense, h("span", { className: "scalio-settings-help" }, L.removeLicenseHint))
+          ),
+          info.password
+            ? h(Field, { id: "factory-reset-password", label: L.password },
+                h("input", { id: "factory-reset-password", type: "password", className: "scalio-input", value: password, disabled: busy,
+                  autoComplete: "current-password", "data-testid": "factory-reset-password", onChange: (e) => setPassword(e.target.value) }))
+            : null,
+          error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "factory-reset-error" }, error) : null,
+          h("div", { className: "scalio-settings-section-footer" },
+            h("button", { type: "submit", className: "scalio-btn is-danger is-solid", disabled: busy || !ready, "data-testid": "factory-reset-run" },
+              h(Icons.Trash, { className: "scalio-icon" }), L.run))
+        )
+      : null
+  );
+}
+
+module.exports = { FactoryReset, factoryResetApi };

package/react/settings.js

@@ -23,12 +23,19 @@ function orderGroups(groups) {
   return pick(FIXED_HEAD).concat(list.filter((g) => fixed.indexOf(g.id) < 0), pick(FIXED_TAIL));
 }
 
+// Gruppe System is the same in every app (ADR 0069 W2): Lizenz, Updates, Sicherung, Zurücksetzen, then the rest.
+const SYSTEM_ORDER = ["license", "updates", "backup", "reset"];
+function systemFirst(items) {
+  const rank = (i) => (SYSTEM_ORDER.indexOf(i.id) < 0 ? SYSTEM_ORDER.length : SYSTEM_ORDER.indexOf(i.id));
+  return items.map((i, n) => [i, n]).sort((a, b) => rank(a[0]) - rank(b[0]) || a[1] - b[1]).map((x) => x[0]);
+}
+
 // Visible groups with their visible items, in the fixed order. Empty groups disappear.
 function settingsGroups(groups, L) {
   return orderGroups(groups)
     .map((g) => Object.assign({}, g, {
       label: g.label || (L && L.settingsGroups && L.settingsGroups[g.id]) || g.id,
-      items: (g.items || []).filter((i) => i && !i.hidden),
+      items: (g.id === "system" ? systemFirst : (x) => x)((g.items || []).filter((i) => i && !i.hidden)),
     }))
     .filter((g) => g.items.length > 0);
 }
@@ -215,4 +222,25 @@ function SettingsSection({ id, title, description, children, footer, testId }) {
   );
 }
 
-module.exports = { SettingsLayout, SettingsSection, settingsGroups, matchSetting, SETTINGS_GROUP_ORDER: FIXED_HEAD.concat(["<app>"], FIXED_TAIL) };
+// A labelled field inside an area: label above, help text below (ADR 0069 W1). htmlFor ties the label to the input.
+function SettingsField({ id, label, hint, children, testId }) {
+  return h(
+    "div",
+    { className: "scalio-profile-field", "data-testid": testId },
+    label ? h("label", { className: "scalio-field-label", htmlFor: id }, label) : null,
+    children,
+    hint ? h("p", { className: "scalio-settings-help" }, hint) : null
+  );
+}
+
+// A switch or button on the right of a text: title, help, control (e.g. the app's own Switch).
+function SettingsRow({ title, hint, children, testId, tone }) {
+  return h(
+    "div",
+    { className: cx("scalio-settings-row", tone && `is-${tone}`), "data-testid": testId },
+    h("div", { className: "scalio-settings-row-text" }, h("strong", null, title), hint ? h("span", { className: "scalio-settings-help" }, hint) : null),
+    children
+  );
+}
+
+module.exports = { SettingsLayout, SettingsSection, SettingsField, SettingsRow, settingsGroups, matchSetting, SETTINGS_GROUP_ORDER: FIXED_HEAD.concat(["<app>"], FIXED_TAIL), SYSTEM_ORDER };