shutro-erp 0.3.2 → 0.3.3

package/dist/settings/web/RolesPage.js

@@ -0,0 +1,296 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › Roles & permissions (RFC 0019 §3.3): every role with what it opens and who holds it; a role's page —
+ * simple first (per app, one access level), *Advanced* below (rights per model with code rights locked, feature
+ * permissions, record rules, field security) — saved only after a preview of who gains and who loses what. New
+ * roles from scratch or copied. Administrators only: the server refuses everyone else.
+ */
+import { Alert, ApiError, Badge, Button, Checkbox, Dialog, Input, Label, Select, Textarea, } from '../../ui/index.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Lock, Plus, Search, Trash2 } from 'lucide-react';
+import { useEffect, useId, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const PERMS = ['read', 'create', 'write', 'unlink', 'export', 'import'];
+const RULE_PERMS = ['read', 'write', 'create', 'unlink'];
+const A = '/api/v1/admin';
+const message = (error) => (error instanceof ApiError ? error.message : String(error));
+/** Per app module: its levels, in declared order (lowest first). */
+function useLevels(api) {
+    const levels = useQuery({
+        queryKey: ['admin', 'access-levels'],
+        queryFn: () => api.call('GET', `${A}/access-levels`),
+    });
+    const apps = useQuery({
+        queryKey: ['settings', 'people', 'catalogue'],
+        queryFn: () => api.call('GET', '/api/v1/settings/people/catalogue'),
+    });
+    return useMemo(() => {
+        const byModule = new Map();
+        for (const l of levels.data?.accessLevels ?? []) {
+            const a = apps.data?.apps.find((x) => x.module === l.module);
+            const entry = byModule.get(l.module) ?? {
+                label: a?.label ?? l.module,
+                app: a?.app ?? false,
+                levels: [],
+            };
+            entry.levels.push(l);
+            byModule.set(l.module, entry);
+        }
+        /** Whether a level belongs to an app (the list shows those; technical levels are in every role). */
+        const isApp = (code) => {
+            const l = levels.data?.accessLevels.find((x) => x.code === code);
+            return l !== undefined && byModule.get(l.module)?.app === true;
+        };
+        const label = (code) => {
+            const l = levels.data?.accessLevels.find((x) => x.code === code);
+            return l === undefined ? code : `${byModule.get(l.module)?.label ?? l.module} · ${l.label}`;
+        };
+        return { byModule, label, isApp, ready: levels.data !== undefined };
+    }, [levels.data, apps.data]);
+}
+function PreviewPanel({ preview }) {
+    const { t } = useTranslation('settings');
+    const nothing = preview.people.length === 0 && preview.models.length === 0;
+    return (_jsxs("section", { "aria-label": t('roles.preview'), className: "grid gap-3 rounded-md border bg-muted/40 p-4 text-sm", children: [_jsx("h3", { className: "font-semibold", children: t('roles.preview') }), nothing ? _jsx("p", { children: t('roles.noEffect') }) : null, preview.people.length === 0 ? null : (_jsx("ul", { className: "grid gap-1.5", children: preview.people.map((p) => (_jsxs("li", { children: [_jsx("span", { className: "font-medium", children: p.name }), p.gains.length === 0 ? null : (_jsxs("span", { className: "text-success", children: [' ', t('roles.gains', { what: p.gains.join(', ') })] })), p.losses.length === 0 ? null : (_jsxs("span", { className: "text-danger", children: [' ', t('roles.loses', { what: p.losses.join(', ') })] }))] }, p.id))) })), preview.models.length === 0 ? null : (_jsx("ul", { className: "grid gap-1 text-muted-foreground", children: preview.models.map((m) => (_jsxs("li", { children: [m.label, ": ", m.added.map((p) => `+${t(`roles.perm.${p}`)}`).join(' '), ' ', m.removed.map((p) => `−${t(`roles.perm.${p}`)}`).join(' ')] }, m.model))) })), _jsx("p", { className: "text-xs text-muted-foreground", children: preview.holders === 0
+                    ? t('roles.nobodyYet')
+                    : t('roles.holders', { count: preview.holders }) })] }));
+}
+function RoleDialog({ api, code, onClose, }) {
+    const { t } = useTranslation('settings');
+    const id = useId();
+    const queryClient = useQueryClient();
+    const levels = useLevels(api);
+    const role = useQuery({
+        queryKey: ['admin', 'role', code],
+        queryFn: () => api.call('GET', `${A}/roles/${encodeURIComponent(code)}`),
+    });
+    const [label, setLabel] = useState('');
+    const [chosen, setChosen] = useState({});
+    const [own, setOwn] = useState({});
+    const [granted, setGranted] = useState(new Set());
+    const [preview, setPreview] = useState(null);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const r = role.data;
+    useEffect(() => {
+        if (r === undefined)
+            return;
+        setLabel(r.label);
+        // The highest level per app the role gives.
+        const next = {};
+        for (const [module, entry] of levels.byModule)
+            next[module] =
+                [...entry.levels].reverse().find((l) => r.accessLevels.includes(l.code))?.code ?? 'none';
+        setChosen(next);
+        setOwn(Object.fromEntries(r.models.map((m) => [m.name, [...m.own]])));
+        setGranted(new Set(r.permissions.filter((p) => p.own).map((p) => p.code)));
+        setPreview(null);
+    }, [r, levels.byModule]);
+    const proposal = () => {
+        if (r === undefined)
+            return {};
+        const changed = Object.fromEntries(r.models
+            .filter((m) => [...(own[m.name] ?? [])].sort().join() !== [...m.own].sort().join())
+            .map((m) => [m.name, own[m.name] ?? []]));
+        const allOwn = Object.fromEntries(r.models
+            .filter((m) => (own[m.name] ?? []).length > 0)
+            .map((m) => [m.name, own[m.name] ?? []]));
+        const accessLevels = Object.values(chosen).filter((c) => c !== 'none');
+        const levelGroups = new Set([...levels.byModule.values()].flatMap((e) => e.levels.flatMap((l) => l.groups)));
+        return {
+            changed,
+            body: {
+                ...(r.builtIn
+                    ? {}
+                    : { accessLevels, implies: r.implies.filter((g) => !levelGroups.has(g)) }),
+                access: allOwn,
+                permissions: [...granted],
+            },
+        };
+    };
+    const preview$ = useMutation({
+        mutationFn: () => api.call('POST', `${A}/roles/${encodeURIComponent(code)}/preview`, proposal().body),
+        onSuccess: setPreview,
+    });
+    const save = useMutation({
+        mutationFn: async () => {
+            if (r === undefined)
+                return;
+            const { changed, body } = proposal();
+            if (!r.builtIn)
+                await api.call('PUT', `${A}/roles/${encodeURIComponent(code)}`, {
+                    label,
+                    accessLevels: body.accessLevels,
+                    implies: body.implies,
+                });
+            for (const [model, perms] of Object.entries(changed ?? {}))
+                await api.call('PUT', `${A}/roles/${encodeURIComponent(code)}/access/${encodeURIComponent(model)}`, {
+                    perms,
+                });
+            const before = new Set(r.permissions.filter((p) => p.own).map((p) => p.code));
+            for (const p of granted)
+                if (!before.has(p))
+                    await api.call('PUT', `${A}/roles/${encodeURIComponent(code)}/permissions/${encodeURIComponent(p)}`);
+            for (const p of before)
+                if (!granted.has(p))
+                    await api.call('DELETE', `${A}/roles/${encodeURIComponent(code)}/permissions/${encodeURIComponent(p)}`);
+        },
+        onSuccess: () => {
+            setPreview(null);
+            void queryClient.invalidateQueries({ queryKey: ['admin'] });
+        },
+    });
+    const remove = useMutation({
+        mutationFn: () => api.call('DELETE', `${A}/roles/${encodeURIComponent(code)}`),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ['admin'] });
+            onClose();
+        },
+    });
+    // A new record rule and a field restriction.
+    const [ruleModel, setRuleModel] = useState('');
+    const [rulePerms, setRulePerms] = useState(new Set(['read']));
+    const [ruleDomain, setRuleDomain] = useState('{ "createdBy": { "$env": "uid" } }');
+    const addRule = useMutation({
+        mutationFn: () => {
+            const domain = JSON.parse(ruleDomain);
+            const name = `${code.replace('.', '_')}_${ruleModel.replace(/\./g, '_')}_${Date.now().toString(36)}`;
+            return api.call('PUT', `${A}/roles/${encodeURIComponent(code)}/rules/${name}`, {
+                model: ruleModel,
+                perms: [...rulePerms],
+                domain,
+            });
+        },
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['admin', 'role', code] }),
+    });
+    const deleteRule = useMutation({
+        mutationFn: (name) => api.call('DELETE', `${A}/rules/${encodeURIComponent(name)}`),
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['admin', 'role', code] }),
+    });
+    const error = preview$.error ?? save.error ?? remove.error ?? addRule.error ?? deleteRule.error;
+    const groupedModels = useMemo(() => {
+        const out = new Map();
+        for (const m of r?.models ?? []) {
+            const key = m.app ?? t('roles.technical');
+            out.set(key, [...(out.get(key) ?? []), m]);
+        }
+        return [...out];
+    }, [r, t]);
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => !open && onClose(), title: r?.label ?? code, wide: true, children: r === undefined ? null : (_jsxs("div", { className: "grid gap-5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 text-xs", children: r.code }), r.builtIn ? (_jsx(Badge, { tone: "neutral", children: t('roles.builtIn') })) : (_jsx(Badge, { tone: "info", children: t('roles.custom') })), r.administrator ? _jsx(Badge, { tone: "warning", children: t('people.administrator') }) : null, _jsx("span", { className: "text-muted-foreground", children: r.holders.length === 0
+                                ? t('roles.nobody')
+                                : t('roles.heldBy', { names: r.holders.map((h) => h.name).join(', ') }) })] }), r.builtIn ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('roles.builtInHint') })) : (_jsxs("div", { className: "grid gap-1.5 sm:max-w-sm", children: [_jsx(Label, { htmlFor: `${id}-label`, children: t('roles.name') }), _jsx(Input, { id: `${id}-label`, value: label, onChange: (e) => setLabel(e.target.value) })] })), _jsxs("section", { className: "grid gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('roles.apps') }), _jsx("ul", { className: "divide-y rounded-md border", children: [...levels.byModule]
+                                .filter(([, e]) => e.app)
+                                .map(([module, entry]) => (_jsxs("li", { className: "flex flex-wrap items-center justify-between gap-3 px-3 py-2", children: [_jsx(Label, { htmlFor: `${id}-${module}`, className: "font-medium", children: entry.label }), r.builtIn ? (_jsx("span", { className: "text-sm text-muted-foreground", children: entry.levels.find((l) => l.code === chosen[module])?.label ??
+                                            t('people.noAccess') })) : (_jsx(Select, { id: `${id}-${module}`, label: entry.label, className: "w-48", value: chosen[module] ?? 'none', options: [
+                                            { value: 'none', label: t('people.noAccess') },
+                                            ...entry.levels.map((l) => ({ value: l.code, label: l.label })),
+                                        ], onChange: (v) => {
+                                            setChosen({ ...chosen, [module]: v });
+                                            setPreview(null);
+                                        } }))] }, module))) })] }), _jsxs("details", { className: "rounded-md border", children: [_jsx("summary", { className: "cursor-pointer px-3 py-2 text-sm font-semibold", children: t('roles.advanced') }), _jsxs("div", { className: "grid gap-5 border-t p-3", children: [_jsxs("section", { className: "grid gap-2", children: [_jsx("h4", { className: "text-sm font-semibold", children: t('roles.models') }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [_jsx(Lock, { className: "inline size-3", "aria-hidden": true }), " ", t('roles.lockedHint')] }), _jsx("div", { className: "max-h-96 overflow-auto rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("caption", { className: "sr-only", children: t('roles.models') }), _jsx("thead", { className: "sticky top-0 bg-surface", children: _jsxs("tr", { className: "border-b text-xs text-muted-foreground", children: [_jsx("th", { scope: "col", className: "px-2 py-1.5 text-start font-medium", children: t('roles.model') }), PERMS.map((p) => (_jsx("th", { scope: "col", className: "px-2 py-1.5 font-medium", children: t(`roles.perm.${p}`) }, p)))] }) }), _jsx("tbody", { children: groupedModels.map(([app, models]) => [
+                                                            _jsx("tr", { className: "bg-muted/50", children: _jsx("th", { colSpan: PERMS.length + 1, scope: "colgroup", className: "px-2 py-1 text-start text-xs font-medium", children: app }) }, `h-${app}`),
+                                                            ...models.map((m) => (_jsxs("tr", { className: "border-b last:border-0", children: [_jsx("th", { scope: "row", className: "px-2 py-1 text-start font-normal", children: m.label }), PERMS.map((p) => {
+                                                                        const locked = m.locked.includes(p);
+                                                                        const mine = (own[m.name] ?? []).includes(p);
+                                                                        return (_jsx("td", { className: "px-2 py-1 text-center", children: _jsx(Checkbox, { "aria-label": `${m.label}: ${t(`roles.perm.${p}`)}`, checked: locked || mine, disabled: locked, onCheckedChange: (c) => {
+                                                                                    const set = new Set(own[m.name] ?? []);
+                                                                                    if (c === true)
+                                                                                        set.add(p);
+                                                                                    else
+                                                                                        set.delete(p);
+                                                                                    setOwn({ ...own, [m.name]: [...set] });
+                                                                                    setPreview(null);
+                                                                                } }) }, p));
+                                                                    })] }, m.name))),
+                                                        ]) })] }) })] }), _jsxs("section", { className: "grid gap-2", children: [_jsx("h4", { className: "text-sm font-semibold", children: t('roles.permissions') }), _jsx("div", { className: "grid gap-1.5 sm:grid-cols-2", children: r.permissions.map((p) => (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: `${id}-p-${p.code}`, checked: p.locked || granted.has(p.code), disabled: p.locked, onCheckedChange: (c) => {
+                                                            const next = new Set(granted);
+                                                            if (c === true)
+                                                                next.add(p.code);
+                                                            else
+                                                                next.delete(p.code);
+                                                            setGranted(next);
+                                                            setPreview(null);
+                                                        } }), _jsx(Label, { htmlFor: `${id}-p-${p.code}`, children: p.label })] }, p.code))) })] }), _jsxs("section", { className: "grid gap-2", children: [_jsx("h4", { className: "text-sm font-semibold", children: t('roles.rules') }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('roles.rulesHint') }), r.rules.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('roles.noRules') })) : (_jsx("ul", { className: "divide-y rounded-md border text-sm", children: r.rules.map((rule) => (_jsxs("li", { className: "flex flex-wrap items-center gap-2 px-3 py-2", children: [_jsx("span", { className: "font-medium", children: rule.model }), _jsx("span", { className: "text-muted-foreground", children: rule.perms.join(', ') }), _jsx("code", { className: "min-w-0 flex-1 truncate text-xs", children: JSON.stringify(rule.domain) }), _jsx(Button, { size: "icon", variant: "ghost", "aria-label": t('roles.deleteRule', { model: rule.model }), onClick: () => deleteRule.mutate(rule.name), children: _jsx(Trash2, { "aria-hidden": true }) })] }, rule.name))) })), _jsxs("div", { className: "grid gap-2 rounded-md border p-3 sm:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-rule-model`, children: t('roles.model') }), _jsx(Select, { id: `${id}-rule-model`, label: t('roles.model'), value: ruleModel === '' ? null : ruleModel, options: r.models.map((m) => ({ value: m.name, label: m.label })), onChange: setRuleModel })] }), _jsxs("fieldset", { className: "grid gap-1.5", children: [_jsx("legend", { className: "text-sm font-medium", children: t('roles.ruleApplies') }), _jsx("div", { className: "flex flex-wrap gap-3", children: RULE_PERMS.map((p) => (_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(Checkbox, { id: `${id}-rp-${p}`, checked: rulePerms.has(p), onCheckedChange: (c) => {
+                                                                            const next = new Set(rulePerms);
+                                                                            if (c === true)
+                                                                                next.add(p);
+                                                                            else
+                                                                                next.delete(p);
+                                                                            setRulePerms(next);
+                                                                        } }), _jsx(Label, { htmlFor: `${id}-rp-${p}`, children: t(`roles.perm.${p}`) })] }, p))) })] }), _jsxs("div", { className: "grid gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: `${id}-rule-domain`, children: t('roles.ruleCondition') }), _jsx(Textarea, { id: `${id}-rule-domain`, className: "font-mono text-xs", value: ruleDomain, onChange: (e) => setRuleDomain(e.target.value) })] }), _jsx("div", { className: "sm:col-span-2", children: _jsxs(Button, { variant: "secondary", busy: addRule.isPending, disabled: ruleModel === '' || rulePerms.size === 0, onClick: () => addRule.mutate(), children: [_jsx(Plus, { "aria-hidden": true }), t('roles.addRule')] }) })] })] }), r.fields.length === 0 ? null : (_jsxs("section", { className: "grid gap-2", children: [_jsx("h4", { className: "text-sm font-semibold", children: t('roles.fields') }), _jsx("ul", { className: "grid gap-1 text-sm", children: r.fields.map((f) => (_jsxs("li", { children: [f.model, ".", f.field, ":", ' ', f.write.includes(code) ? t('roles.mayEdit') : t('roles.mayRead')] }, `${f.model}.${f.field}`))) })] }))] })] }), preview === null ? null : _jsx(PreviewPanel, { preview: preview }), error === null ? null : _jsx(Alert, { tone: "danger", children: message(error) }), save.isSuccess && preview === null ? (_jsx(Alert, { tone: "info", children: t('roles.saved') })) : null, _jsxs("div", { className: "flex flex-wrap justify-between gap-2", children: [r.builtIn ? (_jsx("span", {})) : confirmDelete ? (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [t('roles.deleteConfirm', { count: r.holders.length }), _jsx(Button, { size: "sm", onClick: () => setConfirmDelete(false), children: t('profile.cancel') }), _jsx(Button, { size: "sm", variant: "danger", busy: remove.isPending, onClick: () => remove.mutate(), children: t('roles.delete') })] })) : (_jsxs(Button, { variant: "ghost", onClick: () => setConfirmDelete(true), children: [_jsx(Trash2, { "aria-hidden": true }), t('roles.delete')] })), preview === null ? (_jsx(Button, { variant: "primary", busy: preview$.isPending, onClick: () => preview$.mutate(), children: t('roles.review') })) : (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: () => setPreview(null), children: t('roles.keepEditing') }), _jsx(Button, { variant: "primary", busy: save.isPending, onClick: () => save.mutate(), children: t('roles.confirmSave') })] }))] })] })) }));
+}
+function NewRoleDialog({ api, roles, open, onOpenChange, onCreated, }) {
+    const { t } = useTranslation('settings');
+    const id = useId();
+    const [label, setLabel] = useState('');
+    const [from, setFrom] = useState(null);
+    const code = `company.${label
+        .toLowerCase()
+        .normalize('NFKD')
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')}`;
+    const create = useMutation({
+        mutationFn: async () => {
+            const source = from === null
+                ? null
+                : await api.call('GET', `${A}/roles/${encodeURIComponent(from)}`);
+            await api.call('PUT', `${A}/roles/${encodeURIComponent(code)}`, {
+                label: label.trim(),
+                implies: source === null ? ['base.user'] : [...source.implies],
+            });
+            // A copy takes the source's own grants too.
+            for (const m of source?.models ?? [])
+                if (m.own.length > 0)
+                    await api.call('PUT', `${A}/roles/${encodeURIComponent(code)}/access/${encodeURIComponent(m.name)}`, {
+                        perms: m.own,
+                    });
+            for (const p of source?.permissions ?? [])
+                if (p.own)
+                    await api.call('PUT', `${A}/roles/${encodeURIComponent(code)}/permissions/${encodeURIComponent(p.code)}`);
+            return code;
+        },
+        onSuccess: (made) => {
+            setLabel('');
+            setFrom(null);
+            onCreated(made);
+        },
+    });
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, title: t('roles.newTitle'), description: t('roles.newHint'), footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => onOpenChange(false), children: t('profile.cancel') }), _jsx(Button, { variant: "primary", busy: create.isPending, disabled: code === 'company.', onClick: () => create.mutate(), children: t('roles.create') })] }), children: _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-label`, children: t('roles.name') }), _jsx(Input, { id: `${id}-label`, value: label, onChange: (e) => setLabel(e.target.value) }), code === 'company.' ? null : (_jsx("code", { className: "text-xs text-muted-foreground", children: code }))] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-from`, children: t('roles.copyFrom') }), _jsx(Select, { id: `${id}-from`, label: t('roles.copyFrom'), value: from ?? 'none', options: [
+                                { value: 'none', label: t('roles.fromScratch') },
+                                ...roles
+                                    .filter((r) => !r.administrator)
+                                    .map((r) => ({ value: r.code, label: r.label })),
+                            ], onChange: (v) => setFrom(v === 'none' ? null : v) })] }), create.error === null ? null : _jsx(Alert, { tone: "danger", children: message(create.error) })] }) }));
+}
+export function RolesPage({ api }) {
+    const { t } = useTranslation('settings');
+    const id = useId();
+    const levels = useLevels(api);
+    const [q, setQ] = useState('');
+    const [kind, setKind] = useState('all');
+    const [open, setOpen] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const roles = useQuery({
+        queryKey: ['admin', 'roles'],
+        queryFn: () => api.call('GET', `${A}/roles`),
+    });
+    if (roles.error !== null)
+        return (_jsx(Alert, { tone: "danger", children: roles.error instanceof ApiError && roles.error.status === 403
+                ? t('roles.adminsOnly')
+                : message(roles.error) }));
+    const query = q.trim().toLowerCase();
+    const list = (roles.data?.roles ?? [])
+        .filter((r) => !r.code.startsWith('portal.'))
+        .filter((r) => (kind === 'custom' ? !r.builtIn : kind === 'builtIn' ? r.builtIn : true))
+        .filter((r) => query === '' || r.label.toLowerCase().includes(query) || r.code.includes(query))
+        .sort((a, b) => Number(a.builtIn) - Number(b.builtIn) || a.label.localeCompare(b.label));
+    return (_jsxs("div", { className: "mx-auto grid max-w-5xl gap-5", children: [_jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('roles.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('roles.intro') })] }), _jsxs(Button, { variant: "primary", onClick: () => setCreating(true), children: [_jsx(Plus, { "aria-hidden": true }), t('roles.new')] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("div", { className: "relative min-w-60 flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }), _jsx("label", { htmlFor: `${id}-q`, className: "sr-only", children: t('roles.search') }), _jsx(Input, { id: `${id}-q`, type: "search", className: "ps-9", placeholder: t('roles.search'), value: q, onChange: (e) => setQ(e.target.value) })] }), _jsxs("fieldset", { className: "flex rounded-md border p-0.5", children: [_jsx("legend", { className: "sr-only", children: t('roles.kind') }), ['all', 'custom', 'builtIn'].map((k) => (_jsx("button", { type: "button", "aria-pressed": kind === k, onClick: () => setKind(k), className: "rounded px-3 py-1 text-sm aria-pressed:bg-accent aria-pressed:font-medium aria-pressed:text-accent-foreground", children: t(`roles.filter.${k}`) }, k)))] })] }), _jsx("ul", { className: "divide-y rounded-lg border bg-surface", "aria-label": t('roles.title'), children: list.map((r) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setOpen(r.code), className: "flex w-full flex-wrap items-center gap-3 px-4 py-3 text-start hover:bg-muted/50", children: [_jsxs("span", { className: "grid min-w-52 flex-1", children: [_jsx("span", { className: "font-medium", children: r.label }), _jsx("code", { className: "text-xs text-muted-foreground", children: r.code })] }), _jsxs("span", { className: "flex min-w-52 flex-[2] flex-wrap gap-1", children: [r.administrator ? _jsx(Badge, { tone: "warning", children: t('people.administrator') }) : null, levels.ready
+                                        ? r.accessLevels
+                                            .filter(levels.isApp)
+                                            .slice(0, 4)
+                                            .map((l) => (_jsx(Badge, { tone: "neutral", children: levels.label(l) }, l)))
+                                        : null] }), _jsxs("span", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [r.builtIn ? (_jsx(Badge, { tone: "neutral", children: t('roles.builtIn') })) : (_jsx(Badge, { tone: "info", children: t('roles.custom') })), t('roles.holders', { count: r.holders })] })] }) }, r.code))) }), _jsx(NewRoleDialog, { api: api, roles: roles.data?.roles ?? [], open: creating, onOpenChange: setCreating, onCreated: (code) => {
+                    setCreating(false);
+                    void roles.refetch();
+                    setOpen(code);
+                } }), open === null ? null : _jsx(RoleDialog, { api: api, code: open, onClose: () => setOpen(null) })] }));
+}

package/dist/settings/web/SecurityPage.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Settings › Security (RFC 0019 §3.5), administrators: the policy — who must sign in with a second factor (the people
+ * it would stop until they set it up are named before saving) and how long a sign-in lasts — and every signed-in
+ * device across people, each signed out with one click. The server enforces the policy and audits every change.
+ */
+import { type PageProps } from '../../ui/index.js';
+import { type ReactElement } from 'react';
+export declare function SecurityPage({ api }: PageProps): ReactElement;

package/dist/settings/web/SecurityPage.js

@@ -0,0 +1,81 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › Security (RFC 0019 §3.5), administrators: the policy — who must sign in with a second factor (the people
+ * it would stop until they set it up are named before saving) and how long a sign-in lasts — and every signed-in
+ * device across people, each signed out with one click. The server enforces the policy and audits every change.
+ */
+import { Alert, ApiError, Badge, Button, Input, Label, useKosh } from '../../ui/index.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Laptop, Monitor, Smartphone } from 'lucide-react';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { deviceOf } from './ProfilePage.js';
+const message = (error) => (error instanceof ApiError ? error.message : String(error));
+function Section({ title, hint, children, }) {
+    const id = useId();
+    return (_jsxs("section", { "aria-labelledby": id, className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsxs("div", { children: [_jsx("h2", { id: id, className: "font-semibold", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: hint })] }), children] }));
+}
+function PolicyForm({ api, policy }) {
+    const { t } = useTranslation('settings');
+    const id = useId();
+    const queryClient = useQueryClient();
+    const [twoFactor, setTwoFactor] = useState(policy.twoFactor);
+    const [days, setDays] = useState(policy.sessionDays === null ? '' : String(policy.sessionDays));
+    const save = useMutation({
+        mutationFn: () => api.call('PATCH', '/api/v1/settings/security', {
+            twoFactor,
+            sessionDays: days === '' ? null : Number(days),
+        }),
+        // The form already shows what was saved; the server's answer names who is still without it.
+        onSuccess: (saved) => queryClient.setQueryData(['settings', 'security'], saved),
+    });
+    const stopped = twoFactor === 'everyone' ? policy.withoutTwoFactor : [];
+    return (_jsxs("form", { className: "grid gap-4", onSubmit: (e) => {
+            e.preventDefault();
+            save.mutate();
+        }, children: [_jsxs("fieldset", { className: "grid gap-2", children: [_jsx("legend", { className: "mb-1 text-sm font-medium", children: t('security.twoFactorFor') }), ['administrators', 'everyone'].map((value) => (_jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "radio", name: `${id}-two-factor`, className: "mt-1 accent-[var(--primary)]", checked: twoFactor === value, onChange: () => setTwoFactor(value) }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: t(`security.${value}`) }), _jsx("span", { className: "block text-muted-foreground", children: t(`security.${value}Hint`) })] })] }, value)))] }), stopped.length === 0 ? null : (_jsx(Alert, { tone: "warning", children: t('security.wouldStop', {
+                    count: stopped.length,
+                    names: stopped
+                        .slice(0, 5)
+                        .map((p) => p.name)
+                        .join(', '),
+                }) })), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-days`, children: t('security.sessionDays') }), _jsx(Input, { id: `${id}-days`, type: "number", min: 1, max: 90, className: "w-32", placeholder: t('security.serverDefault'), value: days, onChange: (e) => setDays(e.target.value) }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('security.sessionDaysHint') })] }), save.error === null ? null : _jsx(Alert, { tone: "danger", children: message(save.error) }), save.isSuccess ? _jsx(Alert, { tone: "info", children: t('security.saved') }) : null, _jsx("div", { className: "flex justify-end", children: _jsx(Button, { type: "submit", variant: "primary", busy: save.isPending, children: t('security.save') }) })] }));
+}
+function Sessions({ api }) {
+    const { t } = useTranslation('settings');
+    const { format } = useKosh();
+    const queryClient = useQueryClient();
+    const [filter, setFilter] = useState('');
+    const sessions = useQuery({
+        queryKey: ['settings', 'sessions'],
+        queryFn: () => api.call('GET', '/api/v1/settings/sessions'),
+    });
+    const revoke = useMutation({
+        mutationFn: (sid) => api.call('DELETE', `/api/v1/settings/sessions/${sid}`),
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['settings', 'sessions'] }),
+    });
+    const words = filter.trim().toLowerCase();
+    const list = (sessions.data?.sessions ?? []).filter((s) => words === '' || `${s.name} ${s.login} ${s.ip ?? ''}`.toLowerCase().includes(words));
+    return (_jsxs("div", { className: "grid gap-3", children: [_jsx(Input, { "aria-label": t('security.searchSessions'), placeholder: t('security.searchSessions'), className: "max-w-xs", value: filter, onChange: (e) => setFilter(e.target.value) }), sessions.error === null ? null : _jsx(Alert, { tone: "danger", children: message(sessions.error) }), revoke.error === null ? null : _jsx(Alert, { tone: "danger", children: message(revoke.error) }), _jsxs("ul", { className: "divide-y rounded-md border", children: [list.map((s) => {
+                        const device = deviceOf(s.userAgent);
+                        const Icon = device.phone ? Smartphone : device.os === '' ? Monitor : Laptop;
+                        const name = [device.browser, device.os].filter((x) => x !== '').join(' · ') ||
+                            t('profile.unknownDevice');
+                        return (_jsxs("li", { className: "flex flex-wrap items-center gap-3 px-3 py-2.5", children: [_jsx(Icon, { className: "size-5 text-muted-foreground", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "text-sm font-medium", children: [s.name, " ", _jsxs("span", { className: "font-normal text-muted-foreground", children: ["\u00B7 ", name] }), ' ', s.current ? _jsx(Badge, { tone: "success", children: t('profile.thisDevice') }) : null] }), _jsx("p", { className: "text-xs text-muted-foreground", children: [
+                                                s.ip,
+                                                s.lastSeenAt === null
+                                                    ? null
+                                                    : t('profile.lastActive', { when: format.datetime(s.lastSeenAt) }),
+                                            ]
+                                                .filter((x) => x !== null)
+                                                .join(' · ') })] }), s.current ? null : (_jsx(Button, { size: "sm", variant: "secondary", busy: revoke.isPending && revoke.variables === s.id, onClick: () => revoke.mutate(s.id), "aria-label": t('security.signOutOf', { name: s.name, device: name }), children: t('profile.signOut') }))] }, s.id));
+                    }), sessions.data !== undefined && list.length === 0 ? (_jsx("li", { className: "px-3 py-2.5 text-sm text-muted-foreground", children: t('security.noSessions') })) : null] })] }));
+}
+export function SecurityPage({ api }) {
+    const { t } = useTranslation('settings');
+    const policy = useQuery({
+        queryKey: ['settings', 'security'],
+        queryFn: () => api.call('GET', '/api/v1/settings/security'),
+    });
+    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('security.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('security.intro') })] }), policy.error !== null ? (_jsx(Alert, { tone: "danger", children: message(policy.error) })) : (_jsxs(_Fragment, { children: [_jsx(Section, { title: t('security.policy'), hint: t('security.policyHint'), children: policy.data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : (_jsx(PolicyForm, { api: api, policy: policy.data })) }), _jsx(Section, { title: t('security.sessions'), hint: t('security.sessionsHint'), children: _jsx(Sessions, { api: api }) })] }))] }));
+}

package/dist/settings/web/index.d.ts

@@ -8,6 +8,15 @@ import type { i18n } from 'i18next';
 import { messages } from './messages.js';
 export { ApiKeysPage } from './ApiKeysPage.js';
 export { AppsPage } from './AppsPage.js';
+export { AuditPage } from './AuditPage.js';
+export { CompaniesPage } from './CompaniesPage.js';
+export { CompanyPage } from './CompanyPage.js';
+export { OverviewPage } from './OverviewPage.js';
+export { PeoplePage } from './PeoplePage.js';
+export { deviceOf, ProfilePage } from './ProfilePage.js';
+export { RolesEditor } from './RolesEditor.js';
+export { RolesPage } from './RolesPage.js';
+export { SecurityPage } from './SecurityPage.js';
 /** Registers the Apps page (and its messages in `i18n`, when given). */
 export declare function registerSettingsWeb(registry: Registry, i18n?: i18n): Registry;
 export { messages as settingsMessages };

package/dist/settings/web/index.js

@@ -6,13 +6,38 @@
 import { addMessages } from '../../ui/index.js';
 import { ApiKeysPage } from './ApiKeysPage.js';
 import { AppsPage } from './AppsPage.js';
+import { AuditPage } from './AuditPage.js';
+import { CompaniesPage } from './CompaniesPage.js';
+import { CompanyPage } from './CompanyPage.js';
 import { messages } from './messages.js';
+import { OverviewPage } from './OverviewPage.js';
+import { PeoplePage } from './PeoplePage.js';
+import { ProfilePage } from './ProfilePage.js';
+import { RolesPage } from './RolesPage.js';
+import { SecurityPage } from './SecurityPage.js';
 export { ApiKeysPage } from './ApiKeysPage.js';
 export { AppsPage } from './AppsPage.js';
+export { AuditPage } from './AuditPage.js';
+export { CompaniesPage } from './CompaniesPage.js';
+export { CompanyPage } from './CompanyPage.js';
+export { OverviewPage } from './OverviewPage.js';
+export { PeoplePage } from './PeoplePage.js';
+export { deviceOf, ProfilePage } from './ProfilePage.js';
+export { RolesEditor } from './RolesEditor.js';
+export { RolesPage } from './RolesPage.js';
+export { SecurityPage } from './SecurityPage.js';
 /** Registers the Apps page (and its messages in `i18n`, when given). */
 export function registerSettingsWeb(registry, i18n) {
+    registry.registerPage('settings.Overview', OverviewPage);
     registry.registerPage('settings.Apps', AppsPage);
-    // Every signed-in user's own keys (RFC 0017 §5.1): in the user menu, not in the Settings app.
+    registry.registerPage('settings.People', PeoplePage);
+    registry.registerPage('settings.Roles', RolesPage);
+    registry.registerPage('settings.Company', CompanyPage);
+    registry.registerPage('settings.Companies', CompaniesPage);
+    registry.registerPage('settings.Security', SecurityPage);
+    registry.registerPage('settings.Audit', AuditPage);
+    // Every signed-in user's own profile (RFC 0019) and keys (RFC 0017 §5.1): in the user menu, not in Settings.
+    registry.registerUserPage('settings.Profile', ProfilePage, { label: 'settings:profile.title' });
     registry.registerUserPage('settings.ApiKeys', ApiKeysPage, { label: 'settings:apiKeys.title' });
     if (i18n !== undefined)
         addMessages(i18n, 'settings', messages);