@scalio-cloud/ui 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.24.0
+Einrichtungsassistent als Standard für alle Apps (scalio-docs ADR 0060, contract `interfaces/setup-wizard.md`).
+- New `SetupWizard`: the first-step dialog of Nexus and Kontor as a shared shell. Steps come as configuration
+  (`id`, `label`, `title`, `description`, `content`, `onNext`, `canNext`, `optional`); stepper on top, «Schritt n von
+  m», Zurück/Weiter, «Überspringen» for optional steps, errors of `onNext` keep the step open, short success message
+  at the end. Without `onClose` it cannot be closed; `wide` for steps with tables. Texts DE/EN in `labels.wizard`.
+- `setupWizardApi(api, {base})` for `GET/PUT /api/setup/wizard` (reads snake_case and camelCase), `useSetupWizard()`
+  (loads the state, opens once by itself at the saved step while the setup is needed, saves each step, completes),
+  `openSetupWizard()` and `SetupWizardButton` for Einstellungen.
+- Styles `.scalio-wizard*` in nav.css. No token changes, nothing changes until an app uses the wizard.
+
+## 0.23.0
+Benutzerverwaltung in allen Apps angleichen (scalio-docs ADR 0059, `users/B1`–`B6`, contract `interfaces/app-users.md`).
+- New `UserAdmin` for Konten und Rollen → Benutzer, the same in every app: list with search and badges (Microsoft,
+  Passwort, Rolle aus Entra, Notfall-Administrator, Gesperrt, Wartet auf Freigabe), «Benutzer hinzufügen» (Microsoft,
+  Passwort with a start password shown once, or invitation by e-mail), «Bearbeiten» (name and e-mail only for accounts
+  without Microsoft, role, access, lock, emergency administrator) with the actions new start password, remove password,
+  reset second factor, unlink Microsoft and delete; waiting accounts: role, access, «Freischalten», «Zusammenführen».
+  The app passes roles and an optional access column/field (customers, organisation).
+- `usersApi(api, {base})` for the shared routes (`/users`, Nexus `/admins`), reads snake_case and camelCase.
+- `MicrosoftConnection` for the profile section «Verknüpfungen» (link or unlink one's own Microsoft account).
+- New icons `Pencil`, `Link2`; modal dialog styles (`.scalio-dialog*`). No token changes, nothing changes until an app
+  uses the new components.
+
 ## 0.22.0
 Login, Navigation und Banner vereinheitlichen (scalio-docs UISPEC section 3, ADR 0042 Nachtrag 2026-11-01).
 - **Notice in the look of the test mode banner:** thin frame in the tone, 3px bar on the left, tinted background,

package/README.md

@@ -218,6 +218,52 @@ for light, dark and system.
 
 Other form fields and buttons (e.g. the name field) stay the app's own (shadcn), so they match the rest of the app.
 
+## User administration (React)
+
+Konten und Rollen → Benutzer, the same in every app (ADR 0059). The backend follows scalio-docs
+`interfaces/app-users.md`; `usersApi(api, {base: "/admins"})` for Nexus.
+
+```jsx
+import { UserAdmin, usersApi, MicrosoftConnection } from "@scalio-cloud/ui/react";
+
+const users = usersApi(api);   // once, outside the component
+<UserAdmin client={users} me={user.id} lang={lang} roles={[{ value: "admin", label: t("Administrator") }, ...]}
+  defaultRole="operator" signInModes={["microsoft", "password"]} microsoftEnabled={ssoOn} canLock
+  accessColumn={{ label: t("Customers"), render: (u) => ... }} accessField={(value, onChange, role, u) => ...}
+  notify={(text, tone) => toast[tone](text)} confirm={confirm} formatError={fmt} />
+
+// Profile -> Verknüpfungen
+<MicrosoftConnection linked={user.microsoft} canUnlink={user.has_password} onLink={...} onUnlink={...} lang={lang} />
+```
+
+## Setup wizard (React)
+
+Einrichtungsassistent after the first sign-in, the same in every app (ADR 0060, UISPEC section 3). The app writes
+only its steps; the backend follows scalio-docs `interfaces/setup-wizard.md` (`GET/PUT /api/setup/wizard`).
+
+```jsx
+import { SetupWizard, SetupWizardButton, useSetupWizard, setupWizardApi } from "@scalio-cloud/ui/react";
+
+const wizardClient = setupWizardApi(api);   // once, outside the component ({ base: "/wizard" } for another route)
+
+function AppWizard() {
+  const w = useSetupWizard({ client: wizardClient, enabled: isAdmin });   // opens by itself while needed
+  const steps = [
+    { id: "tenant", label: t("Tenant"), title: t("Connect Microsoft"), description: "...", content: <TenantsSection />,
+      canNext: connected, onNext: async () => { /* save; a rejected promise keeps the step open */ } },
+    { id: "mail", label: t("Email"), title: t("Email (SMTP)"), content: <SmtpForm />, optional: true },
+  ];
+  return <SetupWizard {...w.props} lang={lang} title={t("Set up Foundry")} subtitle={t("...")} steps={steps}
+    success={{ title: t("Setup complete"), text: t("...") }} />;
+}
+
+// Einstellungen: open it again (admins only)
+<SetupWizardButton lang={lang} />
+```
+
+Test IDs: `setup-wizard`, `wizard-stepper(-item)`, `wizard-step-{id}`, `wizard-next`, `wizard-back`, `wizard-skip`,
+`wizard-close`, `wizard-error`, `wizard-success`, `wizard-done`, `settings-open-wizard`.
+
 ## Two-factor card and license panel (React)
 
 The same backend routes in every app, so the apps pass only their axios instance and a few helpers.

package/nav.css

@@ -395,6 +395,110 @@
 .scalio-security-key-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: hsl(var(--muted-foreground)); }
 .scalio-security-keys .scalio-btn { width: 2rem; height: 2rem; padding: 0; }
 
+/* User administration (UserAdmin, MicrosoftConnection; ADR 0059) */
+.scalio-users { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; }
+.scalio-users-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
+.scalio-users-search { max-width: 20rem; flex: 1 1 12rem; }
+.scalio-users-table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); }
+.scalio-users-table { width: 100%; border-collapse: collapse; text-align: left; }
+.scalio-users-table th {
+  padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.5);
+  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: hsl(var(--muted-foreground));
+}
+.scalio-users-table td { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
+.scalio-users-table tr:last-child td { border-bottom: 0; }
+.scalio-users-table tbody tr:hover { background: hsl(var(--muted) / 0.4); }
+.scalio-users-table tr.is-pending { background: rgb(217 119 6 / 0.05); }
+.scalio-users-table tr.is-locked .scalio-users-who { opacity: 0.6; }
+.scalio-users-hide-sm { display: none; }
+@media (min-width: 768px) { .scalio-users-hide-sm { display: table-cell; } }
+.scalio-users-who { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
+.scalio-users-avatar {
+  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0;
+  border-radius: 2px; background: hsl(var(--foreground)); color: hsl(var(--background)); font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 0.75rem;
+}
+.scalio-users-who-text { min-width: 0; }
+.scalio-users-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-weight: 600; }
+.scalio-users-mail { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
+.scalio-users-you { font-size: 10px; font-weight: 700; text-transform: uppercase; color: hsl(var(--primary)); }
+.scalio-users-role { font-size: 0.8125rem; }
+.scalio-users-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
+.scalio-users-actions { text-align: right; white-space: nowrap; }
+.scalio-users-actions > * + * { margin-left: 0.375rem; }
+.scalio-users-select { height: 2rem; padding: 0 0.5rem; font-size: 0.8125rem; width: auto; }
+.scalio-users-empty, .scalio-users-loading { margin: 0; padding: 2rem 1rem; text-align: center; color: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--border)); border-radius: 2px; }
+.scalio-users-field { display: flex; flex-direction: column; gap: 0.25rem; }
+.scalio-users-field .scalio-field-label { margin-top: 0; }
+.scalio-users-hint { margin: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+.scalio-users-modes { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.5rem; }
+.scalio-users-modes legend { margin-bottom: 0.25rem; }
+.scalio-users-mode { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.625rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; cursor: pointer; }
+.scalio-users-mode.is-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.05); }
+.scalio-users-mode input { margin-top: 0.2rem; }
+.scalio-users-mode > span { display: flex; flex-direction: column; gap: 0.125rem; }
+.scalio-users-mode-label { font-weight: 600; }
+.scalio-users-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
+.scalio-users-status { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted) / 0.4); }
+.scalio-users-status-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: hsl(var(--muted-foreground)); }
+.scalio-users-status-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; }
+.scalio-users-status-row > span:first-child { color: hsl(var(--muted-foreground)); }
+.scalio-users-status-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.375rem; }
+.scalio-users-secret {
+  padding: 0.75rem 1rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted));
+  font-family: 'JetBrains Mono', monospace; font-size: 1rem; letter-spacing: 0.05em; text-align: center; user-select: all;
+}
+.scalio-users-error { margin: 0; }
+.scalio-users-connection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
+.scalio-users-connection-text { display: flex; flex-direction: column; gap: 0.25rem; }
+
+/* Modal dialog */
+.scalio-dialog-root { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem 1rem; overflow-y: auto; }
+.scalio-dialog-backdrop { position: fixed; inset: 0; background: rgb(9 9 11 / 0.5); }
+.scalio-dialog {
+  position: relative; width: 100%; max-width: 32rem; border: 1px solid hsl(var(--border)); border-radius: 2px;
+  background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 16px 40px rgb(0 0 0 / 0.25); font-size: 0.875rem;
+}
+.scalio-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
+.scalio-dialog-title { font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 1rem; }
+.scalio-dialog-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
+.scalio-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
+.scalio-dialog-left { margin-right: auto; }
+
+/* Setup wizard (SetupWizard, ADR 0060): design of the Nexus wizard, first built in Kontor */
+.scalio-wizard-root { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(0 0 0 / 0.5); }
+.scalio-wizard {
+  display: flex; flex-direction: column; gap: 1rem; width: calc(100vw - 2rem); max-width: 42rem; max-height: 90vh; overflow-y: auto;
+  padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--background)); color: hsl(var(--foreground));
+  box-shadow: 0 16px 40px rgb(0 0 0 / 0.25); font-size: 0.875rem;
+}
+.scalio-wizard.is-wide { max-width: 56rem; }
+.scalio-wizard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+.scalio-wizard-title { margin: 0; font-family: 'Chivo', sans-serif; font-size: 1.5rem; font-weight: 900; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.025em; }
+.scalio-wizard-subtitle { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); }
+.scalio-wizard-stepper { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
+.scalio-wizard-stepper-item { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 0.5rem; }
+.scalio-wizard-dot {
+  display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px;
+  background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 700;
+}
+.scalio-wizard-dot.is-current { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.scalio-wizard-dot.is-done, .scalio-wizard-success-icon { background: #059669; color: #fff; }
+.scalio-wizard-label { display: none; white-space: nowrap; font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
+.scalio-wizard-label.is-current { color: hsl(var(--foreground)); }
+@media (min-width: 1024px) { .scalio-wizard-label { display: block; } }
+.scalio-wizard-line { flex: 1 1 0; min-width: 0.5rem; height: 1px; background: hsl(var(--border)); }
+.scalio-wizard-count { margin: 0; font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
+.scalio-wizard-step { display: flex; flex-direction: column; gap: 0.75rem; }
+.scalio-wizard-step-title { margin: 0; font-size: 0.875rem; font-weight: 700; }
+.scalio-wizard-text { margin: 0; color: hsl(var(--muted-foreground)); }
+.scalio-wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
+.scalio-wizard-actions-right { display: flex; align-items: center; gap: 0.5rem; }
+.scalio-wizard-success { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem 0; text-align: center; }
+.scalio-wizard-success .scalio-wizard-step-title { font-size: 1.125rem; }
+.scalio-wizard-success .scalio-wizard-text { max-width: 28rem; }
+.scalio-wizard-success .scalio-btn { margin-top: 0.5rem; }
+.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-part { padding: 1.25rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "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

@@ -90,6 +90,8 @@ const Puzzle = icon([
   ["path", { d: "M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z" }],
 ]);
 const Plus = icon([["path", { d: "M5 12h14M12 5v14" }]]);
+const Pencil = icon([["path", { d: "M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5zM15 5l4 4" }]]);
+const Link2 = icon([["path", { d: "M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 1 1 0 10h-2M8 12h8" }]]);
 const Alert = icon([
   ["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }],
   ["path", { d: "M12 9v4M12 17h.01" }],
@@ -132,5 +134,5 @@ const Globe = icon([
 const Clock = icon([["circle", { cx: 12, cy: 12, r: 10 }], ["path", { d: "M12 6v6l4 2" }]]);
 
 module.exports = { Sun, Moon, Monitor, LifeBuoy, BookOpen, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
-  Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert, History, CornerDownLeft,
+  Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Pencil, Link2, Alert, History, CornerDownLeft,
   Users, Settings, ScrollText, Info, RadioTower, Globe, Clock };

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"));
+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("./wizard"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -13,6 +13,19 @@ const LABELS = {
     userMenu: "Benutzermenü",
     menu: "Menü",
     version: "Version",
+    wizard: {
+      step: "Schritt {n} von {total}",
+      back: "Zurück",
+      next: "Weiter",
+      finish: "Einrichtung abschliessen",
+      skip: "Überspringen",
+      close: "Später",
+      done: "Los geht's",
+      successTitle: "Einrichtung abgeschlossen",
+      successText: "Alles ist bereit. Sie können jede Einstellung später unter Einstellungen ändern.",
+      open: "Einrichtungsassistent",
+      openHint: "Die Fragen der Ersteinrichtung noch einmal durchgehen.",
+    },
     // Sign-in and profile (same words in every app)
     signIn: "Anmelden",
     microsoft: "Mit Microsoft anmelden",
@@ -180,6 +193,96 @@ const LABELS = {
     beaconCheckFailed: "Keine Verbindung: {detail}",
     beaconRemoveConfirm: "Verbindung zu Beacon trennen? Befunde gehen dann nicht mehr an Beacon; die Tickets dort bleiben.",
     // Two-factor card (SecurityFactors) and license panel (LicensePanel)
+    users: {
+      loading: "Wird geladen …",
+      search: "Benutzer suchen",
+      add: "Benutzer hinzufügen",
+      addTitle: "Benutzer hinzufügen",
+      user: "Benutzer",
+      role: "Rolle",
+      access: "Zugriff",
+      lastLogin: "Letzte Anmeldung",
+      you: "Sie",
+      password: "Passwort",
+      managedByEntra: "Rolle aus Entra",
+      emergency: "Notfall-Administrator",
+      locked: "Gesperrt",
+      pending: "Wartet auf Freigabe",
+      approve: "Freischalten",
+      merge: "Zusammenführen",
+      edit: "Bearbeiten",
+      none: "Noch keine Benutzer.",
+      noMatch: "Kein Benutzer passt zur Suche.",
+      name: "Name",
+      email: "E-Mail",
+      signIn: "Anmeldung",
+      modeMicrosoft: "Mit Microsoft",
+      modeMicrosoftHint: "Empfohlen. Das Konto wird bei der ersten Microsoft-Anmeldung mit genau dieser Adresse verknüpft. Keine Freigabe nötig.",
+      modePassword: "Mit Passwort",
+      modePasswordHint: "Sie erhalten ein Startpasswort. Bei der ersten Anmeldung muss die Person es ändern.",
+      modeInvite: "Einladung per E-Mail",
+      modeInviteHint: "Die Person erhält einen Link und legt ihr Passwort selbst fest.",
+      sendInvite: "Einladung senden",
+      cancel: "Abbrechen",
+      save: "Speichern",
+      saved: "Gespeichert.",
+      created: "{email} wurde angelegt.",
+      invited: "Einladung an {email} gesendet.",
+      editTitle: "{name} bearbeiten",
+      fromEntra: "Name und E-Mail kommen aus Microsoft Entra und werden bei jeder Anmeldung nachgeführt.",
+      emailIsLogin: "Die E-Mail ist auch der Anmeldename für das Passwort.",
+      roleFromEntra: "Die Rolle wird in Entra ID vergeben.",
+      ownRole: "Ihre eigene Rolle kann ein anderer Administrator ändern.",
+      lockAccount: "Konto sperren (keine Anmeldung möglich)",
+      signInSecurity: "Anmeldung und Sicherheit",
+      linked: "verknüpft",
+      notLinked: "nicht verknüpft",
+      set: "gesetzt",
+      startPasswordSet: "Startpasswort, noch nicht geändert",
+      none_: "keines",
+      secondFactor: "Zweiter Faktor",
+      on: "aktiv",
+      off: "aus",
+      newPassword: "Neues Startpasswort",
+      givePassword: "Passwort vergeben",
+      newPasswordTitle: "Neues Startpasswort für {email}?",
+      givePasswordTitle: "Passwort für {email} vergeben?",
+      newPasswordText: "Das bisherige Passwort gilt nicht mehr und alle Sitzungen werden beendet. Die Person muss das Startpasswort bei der ersten Anmeldung ändern.",
+      newPasswordAction: "Startpasswort erzeugen",
+      removePasswordTitle: "Passwort von {email} entfernen?",
+      removePasswordText: "Die Person meldet sich danach nur noch mit Microsoft an.",
+      removePasswordAction: "Passwort entfernen",
+      passwordRemoved: "Passwort entfernt.",
+      resetMfaTitle: "Zweiten Faktor von {email} zurücksetzen?",
+      resetMfaText: "Authenticator-App, Backup-Codes und Passkeys werden entfernt, zum Beispiel bei einem verlorenen Telefon.",
+      resetMfaAction: "Zweiten Faktor zurücksetzen",
+      mfaReset: "Zweiter Faktor zurückgesetzt.",
+      unlinkTitle: "Microsoft-Verknüpfung von {email} lösen?",
+      unlinkText: "Das Konto bleibt bestehen. Bei der nächsten Microsoft-Anmeldung mit derselben Adresse wird es wieder verknüpft.",
+      unlinkAction: "Verknüpfung lösen",
+      unlinked: "Verknüpfung gelöst.",
+      removeTitle: "Konto von {email} löschen?",
+      removeText: "Die Person kann sich danach nicht mehr anmelden.",
+      removeAction: "Löschen",
+      removed: "Konto gelöscht.",
+      approved: "Zugang für {email} freigeschaltet.",
+      mergeTitle: "{email} zusammenführen",
+      mergeText: "Die Microsoft-Anmeldung dieses wartenden Kontos wird auf ein bestehendes Konto übertragen. Das wartende Konto verschwindet, Rolle und Zugriff des bestehenden Kontos bleiben.",
+      mergeInto: "Bestehendes Konto",
+      choose: "Bitte wählen",
+      mergeAction: "Zusammenführen",
+      merged: "Microsoft-Anmeldung auf {email} übertragen.",
+      createdTitle: "{email} angelegt",
+      secretTitle: "Neues Startpasswort",
+      secretText: "Geben Sie dieses Startpasswort an {email} weiter. Es wird nur jetzt angezeigt. Bei der ersten Anmeldung muss es geändert werden.",
+      copy: "Kopieren",
+      copied: "Kopiert.",
+      done: "Fertig",
+      linkMicrosoft: "Mit Microsoft verknüpfen",
+      connectionHint: "Verknüpfen Sie Ihr Microsoft-Konto, dann können Sie sich auch mit Microsoft anmelden.",
+      connectionLinked: "Sie können sich mit Microsoft und mit Ihrem Passwort anmelden.",
+      connectionOnly: "Sie melden sich mit Microsoft an.",
+    },
     mfa: {
       backupTitle: "Ihre Backup-Codes",
       backupHint: "Jeder Code funktioniert einmal, falls Sie Ihr Telefon nicht zur Hand haben. Bewahren Sie die Codes sicher auf, zum Beispiel im Passwort-Manager. Sie werden nur jetzt angezeigt.",
@@ -301,6 +404,19 @@ const LABELS = {
     userMenu: "User menu",
     menu: "Menu",
     version: "Version",
+    wizard: {
+      step: "Step {n} of {total}",
+      back: "Back",
+      next: "Continue",
+      finish: "Finish setup",
+      skip: "Skip",
+      close: "Later",
+      done: "Let's go",
+      successTitle: "Setup complete",
+      successText: "Everything is ready. You can change any setting later under Settings.",
+      open: "Setup wizard",
+      openHint: "Go through the first-time setup questions again.",
+    },
     signIn: "Sign in",
     microsoft: "Sign in with Microsoft",
     redirecting: "Redirecting …",
@@ -462,6 +578,96 @@ const LABELS = {
     beaconChecked: "Connection works (Beacon {version}).",
     beaconCheckFailed: "No connection: {detail}",
     beaconRemoveConfirm: "Disconnect from Beacon? Findings no longer go to Beacon; the tickets there stay.",
+    users: {
+      loading: "Loading …",
+      search: "Search users",
+      add: "Add user",
+      addTitle: "Add user",
+      user: "User",
+      role: "Role",
+      access: "Access",
+      lastLogin: "Last sign-in",
+      you: "you",
+      password: "Password",
+      managedByEntra: "Role from Entra",
+      emergency: "Emergency administrator",
+      locked: "Locked",
+      pending: "Waiting for approval",
+      approve: "Approve",
+      merge: "Merge",
+      edit: "Edit",
+      none: "No users yet.",
+      noMatch: "No user matches the search.",
+      name: "Name",
+      email: "Email",
+      signIn: "Sign-in",
+      modeMicrosoft: "With Microsoft",
+      modeMicrosoftHint: "Recommended. The account is linked at the first Microsoft sign-in with exactly this address. No approval needed.",
+      modePassword: "With a password",
+      modePasswordHint: "You get a start password. The person has to change it at the first sign-in.",
+      modeInvite: "Invitation by email",
+      modeInviteHint: "The person gets a link and sets their own password.",
+      sendInvite: "Send invitation",
+      cancel: "Cancel",
+      save: "Save",
+      saved: "Saved.",
+      created: "{email} was added.",
+      invited: "Invitation sent to {email}.",
+      editTitle: "Edit {name}",
+      fromEntra: "Name and email come from Microsoft Entra and are updated at every sign-in.",
+      emailIsLogin: "The email is also the sign-in name for the password.",
+      roleFromEntra: "The role is assigned in Entra ID.",
+      ownRole: "Another administrator can change your own role.",
+      lockAccount: "Lock account (no sign-in)",
+      signInSecurity: "Sign-in and security",
+      linked: "linked",
+      notLinked: "not linked",
+      set: "set",
+      startPasswordSet: "start password, not changed yet",
+      none_: "none",
+      secondFactor: "Second factor",
+      on: "on",
+      off: "off",
+      newPassword: "New start password",
+      givePassword: "Give a password",
+      newPasswordTitle: "New start password for {email}?",
+      givePasswordTitle: "Give {email} a password?",
+      newPasswordText: "The old password stops working and every session is signed out. The person has to change the start password at the first sign-in.",
+      newPasswordAction: "Create start password",
+      removePasswordTitle: "Remove the password of {email}?",
+      removePasswordText: "The person then signs in with Microsoft only.",
+      removePasswordAction: "Remove password",
+      passwordRemoved: "Password removed.",
+      resetMfaTitle: "Reset the second factor of {email}?",
+      resetMfaText: "Removes the authenticator app, backup codes and passkeys, for example after a lost phone.",
+      resetMfaAction: "Reset second factor",
+      mfaReset: "Second factor reset.",
+      unlinkTitle: "Unlink the Microsoft account of {email}?",
+      unlinkText: "The account stays. The next Microsoft sign-in with the same address links it again.",
+      unlinkAction: "Unlink",
+      unlinked: "Unlinked.",
+      removeTitle: "Delete the account of {email}?",
+      removeText: "The person can no longer sign in.",
+      removeAction: "Delete",
+      removed: "Account deleted.",
+      approved: "Access approved for {email}.",
+      mergeTitle: "Merge {email}",
+      mergeText: "The Microsoft sign-in of this waiting account moves to an existing account. The waiting account goes away; role and access of the existing account stay.",
+      mergeInto: "Existing account",
+      choose: "Please choose",
+      mergeAction: "Merge",
+      merged: "Microsoft sign-in moved to {email}.",
+      createdTitle: "{email} added",
+      secretTitle: "New start password",
+      secretText: "Give this start password to {email}. It is shown only now. It has to be changed at the first sign-in.",
+      copy: "Copy",
+      copied: "Copied.",
+      done: "Done",
+      linkMicrosoft: "Link with Microsoft",
+      connectionHint: "Link your Microsoft account to sign in with Microsoft as well.",
+      connectionLinked: "You can sign in with Microsoft and with your password.",
+      connectionOnly: "You sign in with Microsoft.",
+    },
     mfa: {
       backupTitle: "Your backup codes",
       backupHint: "Each code works once, if you do not have your phone. Keep them in a safe place, for example your password manager. They are shown only now.",
@@ -580,11 +786,13 @@ function labelsFor(lang, overrides) {
     sectionHints: Object.assign({}, base.sectionHints, o.sectionHints),
     settingsGroups: Object.assign({}, base.settingsGroups, o.settingsGroups),
     mfa: Object.assign({}, base.mfa, o.mfa),
+    users: Object.assign({}, base.users, o.users),
     license: Object.assign({}, base.license, o.license),
     edition: Object.assign({}, base.edition, o.edition),
     accountTabs: Object.assign({}, base.accountTabs, o.accountTabs),
     passwordPolicy: Object.assign({}, base.passwordPolicy, o.passwordPolicy),
     profile_: Object.assign({}, base.profile_, o.profile_),
+    wizard: Object.assign({}, base.wizard, o.wizard),
   });
 }
 

package/react/users.js

@@ -0,0 +1,446 @@
+"use strict";
+// User administration under Konten und Rollen -> Benutzer, the same in every Scalio app (scalio-docs ADR 0059,
+// users/B1-B6, contract interfaces/app-users.md). usersApi(api, opts) maps the shared routes for an axios-like
+// client and accepts snake_case and camelCase answers; UserAdmin shows the list, the dialogs to add and edit an
+// account, the actions (start password, second factor, Microsoft link, lock, delete) and approving or merging a
+// waiting Microsoft account. MicrosoftConnection is the profile card to link one's own Microsoft account.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function pick(obj, keys) {
+  for (const k of keys) if (obj && obj[k] !== undefined && obj[k] !== null) return obj[k];
+  return undefined;
+}
+
+function fill(text, values) {
+  return String(text || "").replace(/\{(\w+)\}/g, (m, k) => (values && values[k] !== undefined ? values[k] : m));
+}
+
+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(" ");
+  if (d && typeof d.message === "string") return d.message;
+  return (err && err.message) || String(err);
+}
+
+function fmtDate(value, lang) {
+  if (!value) return "";
+  const d = new Date(value);
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "medium", timeStyle: "short" });
+}
+
+function initials(u) {
+  const src = String((u && (u.name || u.email)) || "?").trim();
+  const parts = src.includes("@") ? [src] : src.split(/\s+/);
+  return parts.map((p) => p[0] || "").join("").slice(0, 2).toUpperCase() || "?";
+}
+
+// One account in the shape the component uses. raw keeps the app's own fields (for access columns).
+function normalizeUser(d) {
+  const active = pick(d, ["active"]);
+  return {
+    id: String(pick(d, ["id", "_id"]) || ""),
+    email: pick(d, ["email"]) || "",
+    name: pick(d, ["name"]) || "",
+    role: pick(d, ["role"]) || "",
+    pending: !!pick(d, ["access_pending", "accessPending", "pendingAccess"]),
+    microsoft: !!pick(d, ["microsoft", "entra_linked", "external"]),
+    managedBy: pick(d, ["managed_by", "roleManagedBy"]) || "",
+    hasPassword: !!pick(d, ["has_password", "hasPassword"]),
+    emergency: !!pick(d, ["emergency_admin", "emergencyAdmin"]),
+    mfa: !!pick(d, ["mfa_enabled", "mfaEnabled"]),
+    active: active === undefined ? true : !!active,
+    mustChange: !!pick(d, ["must_change_password", "mustChangePassword"]),
+    lastLogin: pick(d, ["last_login", "lastLoginAt", "last_login_at"]) || "",
+    createdAt: pick(d, ["created_at", "createdAt", "created"]) || "",
+    raw: d,
+  };
+}
+
+// api: axios instance with the app's base URL (/api). opts.base: route of the list ("/users", Nexus "/admins").
+function usersApi(api, opts) {
+  const base = (opts && opts.base) || "/users";
+  const one = (id) => `${base}/${encodeURIComponent(id)}`;
+  const secret = (r) => pick(r.data, ["start_password", "startPassword"]) || "";
+  return {
+    list: () => api.get(base).then((r) => (Array.isArray(r.data) ? r.data : r.data.users || []).map(normalizeUser)),
+    create: (body) => api.post(base, body).then((r) => ({ user: normalizeUser(r.data.user || r.data), startPassword: secret(r) })),
+    update: (id, patch) => api.patch(one(id), patch).then((r) => normalizeUser(r.data.user || r.data)),
+    approve: (id, body) => api.post(`${one(id)}/approve`, body).then(() => true),
+    merge: (id, into) => api.post(`${one(id)}/merge`, { into }).then(() => true),
+    newPassword: (id) => api.post(`${one(id)}/password`, {}).then(secret),
+    removePassword: (id) => api.delete(`${one(id)}/password`).then(() => true),
+    resetMfa: (id) => api.post(`${one(id)}/reset-mfa`, {}).then(() => true),
+    unlinkMicrosoft: (id) => api.delete(`${one(id)}/microsoft`).then(() => true),
+    setEmergency: (id, value) => api.put(`${one(id)}/emergency`, { value }).then(() => true),
+    remove: (id) => api.delete(one(id)).then(() => true),
+  };
+}
+
+async function ask(confirm, title, text, action, danger) {
+  if (confirm) return !!(await confirm({ title, text, action, danger: danger !== false }));
+  return typeof window !== "undefined" && window.confirm ? window.confirm(title) : true;
+}
+
+function Field({ id, label, hint, children }) {
+  return h(
+    "div",
+    { className: "scalio-users-field" },
+    h("label", { className: "scalio-field-label", htmlFor: id }, label),
+    children,
+    hint ? h("p", { className: "scalio-users-hint" }, hint) : null
+  );
+}
+
+function Dialog({ title, onClose, children, testId }) {
+  React.useEffect(() => {
+    const key = (e) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", key);
+    return () => document.removeEventListener("keydown", key);
+  }, [onClose]);
+  return h(
+    "div",
+    { className: "scalio-dialog-root" },
+    h("div", { className: "scalio-dialog-backdrop", onClick: onClose }),
+    h(
+      "div",
+      { className: "scalio-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, "data-testid": testId },
+      h(
+        "div",
+        { className: "scalio-dialog-head" },
+        h("div", { className: "scalio-dialog-title" }, title),
+        h("button", { type: "button", className: "scalio-btn is-ghost scalio-btn-icon", onClick: onClose, "aria-label": "×", "data-testid": "dialog-close" },
+          h(Icons.X, { className: "scalio-icon" }))
+      ),
+      children
+    )
+  );
+}
+
+// Props:
+//   client (usersApi), me (id of the signed-in person), lang, labels, notify(message, tone), confirm({title, text, action, danger}),
+//   formatError(err), roles [{value, label}], defaultRole, adminRole ("admin"; emergency only for it),
+//   signInModes (subset of ["microsoft", "password", "invite"], first is the default), microsoftEnabled,
+//   canLock (accounts can be locked), accessColumn {label, render(user)}, accessField(value, onChange, role, user) -> element
+//   (create, edit and approve; value is passed as `access` in the body), onChange() after every change, testId.
+function UserAdmin(props) {
+  const { client, me, lang, notify, confirm } = props;
+  const L = labelsFor(lang, props.labels).users;
+  const fmtErr = props.formatError || errorText;
+  const roles = props.roles || [];
+  const roleLabel = (r) => (roles.find((x) => x.value === r) || { label: r }).label;
+  const modes = (props.signInModes || ["microsoft", "password"]).filter((m) => m !== "microsoft" || props.microsoftEnabled !== false);
+  const adminRole = props.adminRole || "admin";
+  const [rows, setRows] = React.useState(null);
+  const [dialog, setDialog] = React.useState(null); // {mode: create|edit|merge|secret, user, ...}
+  const [form, setForm] = React.useState({});
+  const [pendingRole, setPendingRole] = React.useState({});
+  const [pendingAccess, setPendingAccess] = React.useState({});
+  const [error, setError] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+
+  const say = (msg, tone) => { if (notify) notify(msg, tone || "success"); };
+  const load = React.useCallback(() => client.list().then(setRows).catch((e) => { setRows([]); say(fmtErr(e), "error"); }), [client]);
+  React.useEffect(() => { load(); }, [load]);
+  const changed = () => { load(); if (props.onChange) props.onChange(); };
+  const close = () => { setDialog(null); setError(""); setBusy(false); };
+
+  const run = async (fn, okMsg, after) => {
+    setError("");
+    setBusy(true);
+    try {
+      const res = await fn();
+      if (okMsg) say(okMsg);
+      changed();
+      if (after) after(res);
+      else close();
+    } catch (err) {
+      if (!(err && err.licenseShown)) {
+        if (dialog) setError(fmtErr(err));
+        else say(fmtErr(err), "error");
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const openCreate = () => {
+    setError("");
+    setForm({ name: "", email: "", role: props.defaultRole || (roles[0] && roles[0].value) || "", signIn: modes[0], access: null });
+    setDialog({ mode: "create" });
+  };
+  const openEdit = (u) => {
+    setError("");
+    setForm({ name: u.name, email: u.email, role: u.role, active: u.active, access: null });
+    setDialog({ mode: "edit", user: u });
+  };
+  const showSecret = (u, password, created) => setDialog({ mode: "secret", user: u, password, created });
+
+  const create = (e) => {
+    e.preventDefault();
+    const body = { name: form.name.trim(), email: form.email.trim(), role: form.role, sign_in: form.signIn };
+    if (form.access !== null && form.access !== undefined) body.access = form.access;
+    run(() => client.create(body), null, (res) => {
+      if (res.startPassword) showSecret(res.user, res.startPassword, true);
+      else {
+        say(form.signIn === "invite" ? fill(L.invited, { email: body.email }) : fill(L.created, { email: body.email }));
+        close();
+      }
+    });
+  };
+
+  const save = (e) => {
+    e.preventDefault();
+    const u = dialog.user;
+    const patch = {};
+    if (!u.microsoft && form.name.trim() !== u.name) patch.name = form.name.trim();
+    if (!u.microsoft && form.email.trim().toLowerCase() !== u.email.toLowerCase()) patch.email = form.email.trim();
+    if (form.role !== u.role) patch.role = form.role;
+    if (props.canLock && form.active !== u.active) patch.active = form.active;
+    if (form.access !== null && form.access !== undefined) patch.access = form.access;
+    if (!Object.keys(patch).length) return close();
+    run(() => client.update(u.id, patch), L.saved);
+  };
+
+  const action = async (u, kind) => {
+    const t = { password: [u.hasPassword ? L.newPasswordTitle : L.givePasswordTitle, L.newPasswordText, L.newPasswordAction, false],
+      removePassword: [L.removePasswordTitle, L.removePasswordText, L.removePasswordAction],
+      mfa: [L.resetMfaTitle, L.resetMfaText, L.resetMfaAction],
+      unlink: [L.unlinkTitle, L.unlinkText, L.unlinkAction],
+      remove: [L.removeTitle, L.removeText, L.removeAction] }[kind];
+    if (!(await ask(confirm, fill(t[0], { email: u.email }), t[1], t[2], t[3]))) return;
+    if (kind === "password") return run(() => client.newPassword(u.id), null, (pw) => showSecret(u, pw, false));
+    if (kind === "removePassword") return run(() => client.removePassword(u.id), L.passwordRemoved);
+    if (kind === "mfa") return run(() => client.resetMfa(u.id), L.mfaReset);
+    if (kind === "unlink") return run(() => client.unlinkMicrosoft(u.id), L.unlinked);
+    return run(() => client.remove(u.id), L.removed);
+  };
+
+  const approve = (u) => {
+    const body = { role: pendingRole[u.id] || props.defaultRole || (roles[0] && roles[0].value) };
+    if (pendingAccess[u.id] !== undefined) body.access = pendingAccess[u.id];
+    run(() => client.approve(u.id, body), fill(L.approved, { email: u.email }));
+  };
+  const openMerge = (u) => { setError(""); setForm({ into: "" }); setDialog({ mode: "merge", user: u }); };
+  const merge = (e) => {
+    e.preventDefault();
+    const target = (rows || []).find((r) => r.id === form.into);
+    run(() => client.merge(dialog.user.id, form.into), fill(L.merged, { email: target ? target.email : "" }));
+  };
+  const setEmergency = (u, value) => run(() => client.setEmergency(u.id, value), null, () => {
+    setDialog({ mode: "edit", user: Object.assign({}, u, { emergency: value }) });
+  });
+
+  if (rows === null) return h("div", { className: "scalio-users-loading" }, L.loading);
+
+  const q = query.trim().toLowerCase();
+  const shown = rows.filter((u) => !q || `${u.name} ${u.email}`.toLowerCase().includes(q));
+  const badge = (tone, text, id) => h("span", { className: cx("scalio-badge", `is-${tone}`), "data-testid": id }, text);
+  const roleSelect = (value, onChange, attrs) =>
+    h("select", Object.assign({ className: "scalio-input scalio-users-select", value, onChange: (e) => onChange(e.target.value) }, attrs),
+      roles.map((r) => h("option", { key: r.value, value: r.value }, r.label)));
+  const errorBox = error ? h("p", { className: "scalio-notice is-error scalio-users-error", role: "alert", "data-testid": "user-dialog-error" }, error) : null;
+  const mergeTargets = (u) => rows.filter((r) => r.id !== u.id && !r.pending && !r.microsoft);
+
+  const header = h(
+    "div",
+    { className: "scalio-users-bar" },
+    h("input", { className: "scalio-input scalio-users-search", type: "search", value: query, placeholder: L.search, "aria-label": L.search,
+      onChange: (e) => setQuery(e.target.value), "data-testid": "users-search" }),
+    h("button", { type: "button", className: "scalio-btn is-primary", onClick: openCreate, "data-testid": "user-add" },
+      h(Icons.Plus, { className: "scalio-icon" }), L.add)
+  );
+
+  const table = shown.length
+    ? h(
+        "div",
+        { className: "scalio-users-table-wrap" },
+        h(
+          "table",
+          { className: "scalio-users-table", "data-testid": "users-table" },
+          h("thead", null, h("tr", null,
+            h("th", null, L.user), h("th", null, L.role),
+            props.accessColumn ? h("th", { className: "scalio-users-hide-sm" }, props.accessColumn.label) : null,
+            h("th", { className: "scalio-users-hide-sm" }, L.lastLogin), h("th", null))),
+          h("tbody", null, shown.map((u) => h(
+            "tr",
+            { key: u.id, "data-testid": `user-row-${u.email}`, className: cx(u.pending && "is-pending", !u.active && "is-locked") },
+            h("td", null, h(
+              "div",
+              { className: "scalio-users-who" },
+              h("span", { className: "scalio-users-avatar", "aria-hidden": "true" }, initials(u)),
+              h("div", { className: "scalio-users-who-text" },
+                h("div", { className: "scalio-users-name" },
+                  u.name || u.email,
+                  u.id === me ? h("span", { className: "scalio-users-you" }, L.you) : null,
+                  u.microsoft ? badge("running", "Microsoft", `user-ms-${u.email}`) : null,
+                  u.hasPassword ? badge("neutral", L.password, `user-pw-${u.email}`) : null,
+                  u.managedBy === "entra" ? badge("running", L.managedByEntra, `user-entra-${u.email}`) : null,
+                  u.emergency && u.role === adminRole ? badge("error", L.emergency, `user-emergency-${u.email}`) : null,
+                  !u.active && !u.pending ? badge("neutral", L.locked, `user-locked-${u.email}`) : null,
+                  u.pending ? badge("warn", L.pending, `user-pending-${u.email}`) : null),
+                h("div", { className: "scalio-users-mail" }, u.email))
+            )),
+            h("td", null, u.pending && u.managedBy !== "entra"
+              ? roleSelect(pendingRole[u.id] || props.defaultRole || (roles[0] && roles[0].value), (v) => setPendingRole(Object.assign({}, pendingRole, { [u.id]: v })),
+                { "aria-label": L.role, "data-testid": `user-pending-role-${u.email}` })
+              : h("span", { className: "scalio-users-role" }, roleLabel(u.role))),
+            props.accessColumn ? h("td", { className: "scalio-users-hide-sm" }, u.pending && props.accessField
+              ? props.accessField(pendingAccess[u.id], (v) => setPendingAccess(Object.assign({}, pendingAccess, { [u.id]: v })), pendingRole[u.id] || props.defaultRole, u)
+              : props.accessColumn.render(u)) : null,
+            h("td", { className: "scalio-users-hide-sm scalio-users-date" }, u.lastLogin ? fmtDate(u.lastLogin, lang) : "–"),
+            h("td", { className: "scalio-users-actions" }, u.pending
+              ? h(React.Fragment, null,
+                  h("button", { type: "button", className: "scalio-btn is-primary", onClick: () => approve(u), disabled: busy, "data-testid": `user-approve-${u.email}` }, L.approve),
+                  mergeTargets(u).length ? h("button", { type: "button", className: "scalio-btn", onClick: () => openMerge(u), "data-testid": `user-merge-${u.email}` }, L.merge) : null,
+                  h("button", { type: "button", className: "scalio-btn is-ghost is-danger scalio-btn-icon", onClick: () => action(u, "remove"), title: L.removeAction,
+                    "aria-label": L.removeAction, "data-testid": `user-remove-${u.email}` }, h(Icons.Trash, { className: "scalio-icon" })))
+              : h("button", { type: "button", className: "scalio-btn", onClick: () => openEdit(u), "data-testid": `user-edit-${u.email}` },
+                  h(Icons.Pencil, { className: "scalio-icon" }), h("span", { className: "scalio-hide-sm" }, L.edit)))
+          )))
+        )
+      )
+    : h("p", { className: "scalio-users-empty", "data-testid": "users-empty" }, q ? L.noMatch : L.none);
+
+  let body = null;
+  if (dialog && dialog.mode === "create") {
+    const modeHint = { microsoft: L.modeMicrosoftHint, password: L.modePasswordHint, invite: L.modeInviteHint };
+    const modeLabel = { microsoft: L.modeMicrosoft, password: L.modePassword, invite: L.modeInvite };
+    body = h(Dialog, { title: L.addTitle, onClose: close, testId: "user-create-dialog" }, h(
+      "form",
+      { className: "scalio-dialog-body", onSubmit: create },
+      h(Field, { id: "user-name", label: L.name }, h("input", { id: "user-name", className: "scalio-input", value: form.name, required: true, maxLength: 120,
+        autoFocus: true, "data-testid": "user-name-input", onChange: (e) => setForm(Object.assign({}, form, { name: e.target.value })) })),
+      h(Field, { id: "user-email", label: L.email }, h("input", { id: "user-email", type: "email", className: "scalio-input", value: form.email, required: true,
+        "data-testid": "user-email-input", onChange: (e) => setForm(Object.assign({}, form, { email: e.target.value })) })),
+      h(Field, { id: "user-role", label: L.role }, roleSelect(form.role, (v) => setForm(Object.assign({}, form, { role: v })), { id: "user-role", "data-testid": "user-role-select" })),
+      props.accessField ? h(Field, { id: "user-access", label: (props.accessColumn && props.accessColumn.label) || L.access },
+        props.accessField(form.access, (v) => setForm(Object.assign({}, form, { access: v })), form.role, null)) : null,
+      modes.length > 1 || modes[0] !== "password"
+        ? h("fieldset", { className: "scalio-users-modes", "data-testid": "user-signin-modes" },
+            h("legend", { className: "scalio-field-label" }, L.signIn),
+            modes.map((m) => h("label", { key: m, className: cx("scalio-users-mode", form.signIn === m && "is-active") },
+              h("input", { type: "radio", name: "sign-in", value: m, checked: form.signIn === m, "data-testid": `user-signin-${m}`,
+                onChange: () => setForm(Object.assign({}, form, { signIn: m })) }),
+              h("span", null, h("span", { className: "scalio-users-mode-label" }, modeLabel[m]), h("span", { className: "scalio-users-hint" }, modeHint[m])))))
+        : h("p", { className: "scalio-users-hint" }, L.modePasswordHint),
+      errorBox,
+      h("div", { className: "scalio-dialog-actions" },
+        h("button", { type: "button", className: "scalio-btn is-ghost", onClick: close }, L.cancel),
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy, "data-testid": "user-create-submit" }, form.signIn === "invite" ? L.sendInvite : L.add))
+    ));
+  } else if (dialog && dialog.mode === "edit") {
+    const u = dialog.user;
+    const self = u.id === me;
+    const roleLocked = u.managedBy === "entra" || self;
+    const line = (label, value, id) => h("div", { className: "scalio-users-status-row", "data-testid": id }, h("span", null, label), h("span", null, value));
+    body = h(Dialog, { title: fill(L.editTitle, { name: u.name || u.email }), onClose: close, testId: "user-edit-dialog" }, h(
+      "form",
+      { className: "scalio-dialog-body", onSubmit: save },
+      h(Field, { id: "edit-name", label: L.name, hint: u.microsoft ? L.fromEntra : null },
+        h("input", { id: "edit-name", className: "scalio-input", value: form.name, required: true, maxLength: 120, disabled: u.microsoft,
+          "data-testid": "user-name-input", onChange: (e) => setForm(Object.assign({}, form, { name: e.target.value })) })),
+      h(Field, { id: "edit-email", label: L.email, hint: u.microsoft ? null : u.hasPassword ? L.emailIsLogin : null },
+        h("input", { id: "edit-email", type: "email", className: "scalio-input", value: form.email, required: true, disabled: u.microsoft,
+          "data-testid": "user-email-input", onChange: (e) => setForm(Object.assign({}, form, { email: e.target.value })) })),
+      h(Field, { id: "edit-role", label: L.role, hint: u.managedBy === "entra" ? L.roleFromEntra : self ? L.ownRole : null },
+        roleSelect(form.role, (v) => setForm(Object.assign({}, form, { role: v })), { id: "edit-role", disabled: roleLocked, "data-testid": "user-role-select" })),
+      props.accessField ? h(Field, { id: "edit-access", label: (props.accessColumn && props.accessColumn.label) || L.access },
+        props.accessField(form.access === null ? undefined : form.access, (v) => setForm(Object.assign({}, form, { access: v })), form.role, u)) : null,
+      props.canLock && !self
+        ? h("label", { className: "scalio-users-check" }, h("input", { type: "checkbox", checked: !form.active, "data-testid": "user-locked-toggle",
+            onChange: (e) => setForm(Object.assign({}, form, { active: !e.target.checked })) }), L.lockAccount)
+        : null,
+      u.role === adminRole && u.hasPassword
+        ? h("label", { className: "scalio-users-check" }, h("input", { type: "checkbox", checked: u.emergency, disabled: busy, "data-testid": "user-emergency-toggle",
+            onChange: (e) => setEmergency(u, e.target.checked) }), L.emergency)
+        : null,
+      h("div", { className: "scalio-users-status" },
+        h("div", { className: "scalio-users-status-title" }, L.signInSecurity),
+        line("Microsoft", u.microsoft ? L.linked : L.notLinked, "user-status-ms"),
+        line(L.password, u.hasPassword ? (u.mustChange ? L.startPasswordSet : L.set) : L.none_, "user-status-pw"),
+        line(L.secondFactor, u.mfa ? L.on : L.off, "user-status-mfa"),
+        u.lastLogin ? line(L.lastLogin, fmtDate(u.lastLogin, lang), "user-status-last") : null,
+        h("div", { className: "scalio-users-status-actions" },
+          !self ? h("button", { type: "button", className: "scalio-btn", onClick: () => action(u, "password"), disabled: busy, "data-testid": "user-new-password" },
+            h(Icons.KeyRound, { className: "scalio-icon" }), u.hasPassword ? L.newPassword : L.givePassword) : null,
+          !self && u.hasPassword && u.microsoft ? h("button", { type: "button", className: "scalio-btn", onClick: () => action(u, "removePassword"), disabled: busy,
+            "data-testid": "user-remove-password" }, L.removePasswordAction) : null,
+          !self && u.mfa ? h("button", { type: "button", className: "scalio-btn", onClick: () => action(u, "mfa"), disabled: busy, "data-testid": "user-reset-mfa" },
+            h(Icons.Smartphone, { className: "scalio-icon" }), L.resetMfaAction) : null,
+          !self && u.microsoft ? h("button", { type: "button", className: "scalio-btn", onClick: () => action(u, "unlink"), disabled: busy, "data-testid": "user-unlink" },
+            h(Icons.Link2, { className: "scalio-icon" }), L.unlinkAction) : null)),
+      errorBox,
+      h("div", { className: "scalio-dialog-actions" },
+        !self ? h("button", { type: "button", className: "scalio-btn is-ghost is-danger scalio-dialog-left", onClick: () => action(u, "remove"), disabled: busy,
+          "data-testid": "user-remove" }, h(Icons.Trash, { className: "scalio-icon" }), L.removeAction) : null,
+        h("button", { type: "button", className: "scalio-btn is-ghost", onClick: close }, L.cancel),
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy, "data-testid": "user-save" }, L.save))
+    ));
+  } else if (dialog && dialog.mode === "merge") {
+    const u = dialog.user;
+    body = h(Dialog, { title: fill(L.mergeTitle, { email: u.email }), onClose: close, testId: "user-merge-dialog" }, h(
+      "form",
+      { className: "scalio-dialog-body", onSubmit: merge },
+      h("p", { className: "scalio-users-hint" }, L.mergeText),
+      h(Field, { id: "merge-into", label: L.mergeInto },
+        h("select", { id: "merge-into", className: "scalio-input", value: form.into, required: true, "data-testid": "user-merge-select",
+          onChange: (e) => setForm({ into: e.target.value }) },
+          h("option", { value: "" }, L.choose),
+          mergeTargets(u).map((r) => h("option", { key: r.id, value: r.id }, `${r.name || r.email} · ${r.email}`)))),
+      errorBox,
+      h("div", { className: "scalio-dialog-actions" },
+        h("button", { type: "button", className: "scalio-btn is-ghost", onClick: close }, L.cancel),
+        h("button", { type: "submit", className: "scalio-btn is-primary", disabled: busy || !form.into, "data-testid": "user-merge-submit" }, L.mergeAction))
+    ));
+  } else if (dialog && dialog.mode === "secret") {
+    const copy = () => {
+      const c = typeof navigator !== "undefined" && navigator.clipboard;
+      if (c) c.writeText(dialog.password).then(() => say(L.copied), () => null);
+    };
+    body = h(Dialog, { title: dialog.created ? fill(L.createdTitle, { email: dialog.user.email }) : L.secretTitle, onClose: close, testId: "user-secret-dialog" },
+      h("div", { className: "scalio-dialog-body" },
+        h("p", { className: "scalio-users-hint" }, fill(L.secretText, { email: dialog.user.email })),
+        h("div", { className: "scalio-users-secret", "data-testid": "user-start-password" }, dialog.password),
+        h("div", { className: "scalio-dialog-actions" },
+          h("button", { type: "button", className: "scalio-btn", onClick: copy, "data-testid": "user-copy-password" }, h(Icons.Copy, { className: "scalio-icon" }), L.copy),
+          h("button", { type: "button", className: "scalio-btn is-primary", onClick: close, "data-testid": "user-secret-done" }, L.done))));
+  }
+
+  return h("div", { className: cx("scalio-users", props.className), "data-testid": props.testId || "user-admin" }, header, table, body);
+}
+
+// Profile card: link one's own Microsoft account (sign in once with Microsoft) or remove the link.
+// Props: linked, email (of the Microsoft account, optional), canUnlink (has a password), onLink(), onUnlink(), lang, labels, disabled.
+function MicrosoftConnection(props) {
+  const L = labelsFor(props.lang, props.labels).users;
+  const [busy, setBusy] = React.useState(false);
+  const go = (fn) => async () => {
+    setBusy(true);
+    try { await fn(); } finally { setBusy(false); }
+  };
+  return h(
+    "div",
+    { className: "scalio-users-connection", "data-testid": props.testId || "microsoft-connection" },
+    h("div", { className: "scalio-users-connection-text" },
+      h("div", { className: "scalio-users-name" }, "Microsoft", props.linked ? h("span", { className: "scalio-badge is-ok" }, L.linked) : null),
+      h("p", { className: "scalio-users-hint" }, props.linked ? (props.canUnlink ? L.connectionLinked : L.connectionOnly) : L.connectionHint)),
+    props.linked
+      ? props.canUnlink && props.onUnlink
+        ? h("button", { type: "button", className: "scalio-btn", disabled: busy || props.disabled, onClick: go(props.onUnlink), "data-testid": "ms-unlink" }, L.unlinkAction)
+        : null
+      : h("button", { type: "button", className: "scalio-btn is-primary", disabled: busy || props.disabled, onClick: go(props.onLink), "data-testid": "ms-link" },
+          h(Icons.Link2, { className: "scalio-icon" }), L.linkMicrosoft)
+  );
+}
+
+module.exports = { UserAdmin, usersApi, normalizeUser, MicrosoftConnection };

package/react/wizard.js

@@ -0,0 +1,239 @@
+"use strict";
+// Setup wizard ("Einrichtungsassistent", ADR 0060, UISPEC section 3): the same first-step dialog in every app.
+// Design of the Nexus SetupWizard, first built in Kontor (#59): dialog, stepper on top, Zurück/Weiter, Überspringen
+// for optional steps, a short success message at the end. The shell knows no app: steps come as configuration.
+// Progress lives in the app's backend (GET/PUT /api/setup/wizard, scalio-docs interfaces/setup-wizard.md);
+// setupWizardApi() and useSetupWizard() do the wiring, so an app only writes its steps.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+const { Notice } = require("./blocks");
+
+const OPEN_SETUP_WIZARD = "scalio:open-setup-wizard";
+
+// Opens the wizard from anywhere (Einstellungen button, dashboard card). useSetupWizard listens for it.
+function openSetupWizard(step) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new window.CustomEvent(OPEN_SETUP_WIZARD, { detail: { step: step || 0 } }));
+}
+
+function normalizeWizardState(d) {
+  const o = d || {};
+  const pick = (a, b) => (o[a] !== undefined ? o[a] : o[b]);
+  return {
+    needed: !!o.needed,
+    completed: !!o.completed,
+    lastStep: Number(pick("last_step", "lastStep")) || 0,
+    canEdit: pick("can_edit", "canEdit") === undefined ? true : !!pick("can_edit", "canEdit"),
+  };
+}
+
+// The shared route. `api` is the app's axios-like client (get/put returning { data }).
+function setupWizardApi(api, opts) {
+  const base = (opts && opts.base) || "/setup/wizard";
+  return {
+    get: () => api.get(base).then((r) => normalizeWizardState(r.data)),
+    save: (step) => api.put(base, { last_step: step }).then(() => true),
+    complete: () => api.put(base, { completed: true }).then(() => true),
+  };
+}
+
+// State, auto-open and saving for SetupWizard. Spread `props` into <SetupWizard> and add title and steps.
+// Opens by itself once per mount while the setup is needed and the person may edit it, at the saved step;
+// openSetupWizard() opens it again at the beginning. `closable: false` hides «Später» (e.g. nothing exists yet).
+function useSetupWizard(opts) {
+  const client = opts && opts.client;
+  const enabled = !opts || opts.enabled !== false;
+  const [state, setState] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const [step, setStep] = React.useState(0);
+  const auto = React.useRef(false);
+  const stateRef = React.useRef(null);
+  stateRef.current = state;
+
+  const reload = React.useCallback(() => {
+    if (!client) return Promise.resolve(null);
+    return client.get().then((s) => { setState(s); return s; }, () => null);
+  }, [client]);
+
+  React.useEffect(() => {
+    if (enabled) reload();
+  }, [enabled, reload]);
+
+  React.useEffect(() => {
+    if (state && state.needed && state.canEdit && !auto.current) {
+      auto.current = true;
+      setStep(state.lastStep);
+      setOpen(true);
+    }
+  }, [state]);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return undefined;
+    const onOpen = (e) => {
+      const s = stateRef.current;
+      if (s && !s.canEdit) return;
+      setStep((e && e.detail && e.detail.step) || 0);
+      setOpen(true);
+    };
+    window.addEventListener(OPEN_SETUP_WIZARD, onOpen);
+    return () => window.removeEventListener(OPEN_SETUP_WIZARD, onOpen);
+  }, []);
+
+  const close = () => setOpen(false);
+  const props = {
+    open,
+    step,
+    onStepChange: (n) => {
+      setStep(n);
+      if (client) client.save(n).catch(() => {});
+    },
+    onFinish: async () => {
+      if (client) await client.complete();
+      setState((s) => Object.assign({}, s, { needed: false, completed: true }));
+      if (opts && opts.onCompleted) opts.onCompleted();
+    },
+    onClose: opts && opts.closable === false ? undefined : close,
+    onDone: close,
+  };
+  return { state, open, setOpen, step, setStep, reload, props };
+}
+
+function StepDot({ index, current }) {
+  const cls = index < current ? "is-done" : index === current ? "is-current" : "";
+  return h("span", { className: `scalio-wizard-dot ${cls}`.trim() }, index < current ? h(Icons.Check, { width: 14, height: 14 }) : index + 1);
+}
+
+function SetupWizard(props) {
+  const { open, title, subtitle, steps, step, onStepChange, onFinish, onClose, firstStepAction, onDone, testId, wide } = props;
+  const L = Object.assign({}, labelsFor(props.lang).wizard, props.labels);
+  const success = props.success || { title: L.successTitle, text: L.successText };
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [finished, setFinished] = React.useState(false);
+  const list = steps || [];
+  const index = Math.min(Math.max(step || 0, 0), list.length - 1);
+  const current = list[index];
+  const last = index === list.length - 1;
+
+  React.useEffect(() => setError(null), [index]);
+  React.useEffect(() => {
+    if (!open) setFinished(false);
+  }, [open]);
+  React.useEffect(() => {
+    if (!open || !onClose) return undefined;
+    const onKey = (e) => {
+      if (e.key === "Escape" && !busy) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose, busy]);
+
+  if (!open || !current) return null;
+
+  async function next(save) {
+    setBusy(true);
+    setError(null);
+    try {
+      if (save && current.onNext) await current.onNext();
+      if (last) {
+        await onFinish();
+        setFinished(true);
+      } else {
+        onStepChange(index + 1);
+      }
+    } catch (err) {
+      setError((err && err.message) || String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const left = index > 0
+    ? { label: L.back, onClick: () => onStepChange(index - 1) }
+    : firstStepAction || (onClose ? { label: L.close, onClick: onClose } : null);
+
+  const head = h(
+    "div",
+    { className: "scalio-wizard-head" },
+    h("div", null,
+      h("h2", { className: "scalio-wizard-title" }, title),
+      subtitle && !finished ? h("p", { className: "scalio-wizard-subtitle" }, subtitle) : null),
+    onClose
+      ? h("button", { type: "button", className: "scalio-btn scalio-btn-icon is-ghost", onClick: onClose, "aria-label": L.close, "data-testid": "wizard-close" },
+          h(Icons.X, null))
+      : null
+  );
+
+  const body = finished
+    ? h(
+        "div",
+        { className: "scalio-wizard-success", "data-testid": "wizard-success" },
+        h("span", { className: "scalio-wizard-success-icon" }, h(Icons.Check, { width: 24, height: 24 })),
+        h("h3", { className: "scalio-wizard-step-title" }, success.title),
+        h("p", { className: "scalio-wizard-text" }, success.text),
+        h("button", { type: "button", className: "scalio-btn is-primary", onClick: onDone || onClose, "data-testid": "wizard-done", autoFocus: true }, L.done)
+      )
+    : h(
+        React.Fragment,
+        null,
+        h(
+          "ol",
+          { className: "scalio-wizard-stepper", "data-testid": "wizard-stepper" },
+          list.map((s, i) =>
+            h(
+              "li",
+              { key: s.id, className: "scalio-wizard-stepper-item", "data-testid": "wizard-stepper-item", "aria-current": i === index ? "step" : undefined },
+              h(StepDot, { index: i, current: index }),
+              h("span", { className: `scalio-wizard-label${i === index ? " is-current" : ""}` }, s.label),
+              i < list.length - 1 ? h("span", { className: "scalio-wizard-line" }) : null
+            )
+          )
+        ),
+        h("p", { className: "scalio-wizard-count" }, L.step.replace("{n}", String(index + 1)).replace("{total}", String(list.length))),
+        h(
+          "section",
+          { className: "scalio-wizard-step", "data-testid": `wizard-step-${current.id}` },
+          h("div", null,
+            h("h3", { className: "scalio-wizard-step-title" }, current.title),
+            current.description ? h("p", { className: "scalio-wizard-text" }, current.description) : null),
+          current.content
+        ),
+        error ? h(Notice, { kind: "error", icon: false, testId: "wizard-error", lang: props.lang }, error) : null,
+        h(
+          "div",
+          { className: "scalio-wizard-actions" },
+          left
+            ? h("button", { type: "button", className: "scalio-btn", onClick: left.onClick, disabled: busy, "data-testid": "wizard-back" }, left.label)
+            : h("span", null),
+          h(
+            "div",
+            { className: "scalio-wizard-actions-right" },
+            current.optional
+              ? h("button", { type: "button", className: "scalio-btn is-ghost", onClick: () => next(false), disabled: busy, "data-testid": "wizard-skip" }, L.skip)
+              : null,
+            h(
+              "button",
+              { type: "button", className: "scalio-btn is-primary", onClick: () => next(true), disabled: busy || current.canNext === false, "data-testid": "wizard-next" },
+              busy ? h("span", { className: "scalio-spinner", "aria-hidden": "true" }) : null,
+              last ? L.finish : L.next
+            )
+          )
+        )
+      );
+
+  return h(
+    "div",
+    { className: "scalio-wizard-root", onMouseDown: (e) => { if (e.target === e.currentTarget && !busy && onClose) onClose(); } },
+    h("div", { role: "dialog", "aria-modal": "true", "aria-label": title, className: wide ? "scalio-wizard is-wide" : "scalio-wizard", "data-testid": testId || "setup-wizard" }, head, body)
+  );
+}
+
+// Button for Einstellungen (UISPEC: the wizard can always be opened again, by people who may edit the setup).
+function SetupWizardButton({ lang, labels, testId, className }) {
+  const L = Object.assign({}, labelsFor(lang).wizard, labels);
+  return h("button", { type: "button", className: className || "scalio-btn", onClick: () => openSetupWizard(0), "data-testid": testId || "settings-open-wizard", title: L.openHint }, L.open);
+}
+
+module.exports = { SetupWizard, SetupWizardButton, useSetupWizard, setupWizardApi, normalizeWizardState, openSetupWizard, OPEN_SETUP_WIZARD };