shutro-erp 0.3.2 → 0.3.4

package/dist/settings/web/PeoplePage.js

@@ -0,0 +1,154 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › People (RFC 0019 §3.2): who works here — searched and filtered by status —, invitations (the link
+ * emailed when mail is set up, always shown to copy), a person's details and roles per app and company, a new
+ * invitation, a two-factor reset, deactivation and reactivation, and their recent activity. The server decides
+ * what a People manager may do (not administrators, not their own roles) and audits it all.
+ */
+import { Alert, ApiError, Avatar, Badge, Button, Dialog, EmptyState, Input, imageUrl, Label, useKosh, } from '../../ui/index.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Check, Copy, Search, ShieldCheck, UserPlus } from 'lucide-react';
+import { useEffect, useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RolesEditor } from './RolesEditor.js';
+const P = '/api/v1/settings/people';
+const message = (error) => (error instanceof ApiError ? error.message : String(error));
+function StateBadge({ person }) {
+    const { t } = useTranslation('settings');
+    return person.state === 'deactivated' ? (_jsx(Badge, { tone: "neutral", children: t('people.deactivated') })) : person.state === 'invited' ? (_jsx(Badge, { tone: "warning", children: t('people.invited') })) : (_jsx(Badge, { tone: "success", children: t('people.active') }));
+}
+/** The link to pass on, with a copy button. */
+function InvitationLink({ url, emailed, to, }) {
+    const { t } = useTranslation('settings');
+    const [copied, setCopied] = useState(false);
+    return (_jsxs(Alert, { tone: "info", children: [_jsx("p", { children: emailed ? t('people.emailed', { to }) : t('people.notEmailed') }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx("code", { className: "min-w-0 flex-1 truncate rounded bg-surface px-2 py-1 font-mono text-xs", "data-testid": "invitation-link", children: url }), _jsxs(Button, { size: "sm", variant: "secondary", onClick: () => {
+                            void navigator.clipboard?.writeText(url).then(() => setCopied(true));
+                        }, children: [copied ? _jsx(Check, { "aria-hidden": true }) : _jsx(Copy, { "aria-hidden": true }), copied ? t('people.copied') : t('people.copy')] })] })] }));
+}
+function InviteDialog({ api, catalogue, open, onOpenChange, }) {
+    const { t } = useTranslation('settings');
+    const id = useId();
+    const queryClient = useQueryClient();
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [assignments, setAssignments] = useState([]);
+    const invite = useMutation({
+        mutationFn: () => api.call('POST', P, {
+            name,
+            email,
+            assignments,
+        }),
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['settings', 'people'] }),
+    });
+    useEffect(() => {
+        if (!open) {
+            setName('');
+            setEmail('');
+            setAssignments([]);
+            invite.reset();
+        }
+    }, [open, invite.reset]);
+    const done = invite.data;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, title: t('people.inviteTitle'), description: t('people.inviteHint'), wide: true, footer: done === undefined ? (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => onOpenChange(false), children: t('profile.cancel') }), _jsx(Button, { variant: "primary", busy: invite.isPending, disabled: name.trim() === '' || !email.includes('@'), onClick: () => invite.mutate(), children: t('people.send') })] })) : (_jsx(Button, { variant: "primary", onClick: () => onOpenChange(false), children: t('people.done') })), children: done !== undefined ? (_jsx(InvitationLink, { url: done.activationUrl, emailed: done.emailed, to: done.login })) : (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-name`, children: t('profile.name') }), _jsx(Input, { id: `${id}-name`, value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-email`, children: t('profile.email') }), _jsx(Input, { id: `${id}-email`, type: "email", value: email, onChange: (e) => setEmail(e.target.value) })] })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.roles') }), _jsx(RolesEditor, { catalogue: catalogue, value: assignments, onChange: setAssignments })] }), invite.error === null ? null : _jsx(Alert, { tone: "danger", children: message(invite.error) })] })) }));
+}
+/** What a person can do, computed by the server as them (administrators only). */
+function Effective({ api, personId }) {
+    const { t } = useTranslation('settings');
+    const [open, setOpen] = useState(false);
+    const effective = useQuery({
+        queryKey: ['settings', 'people', personId, 'effective'],
+        queryFn: () => api.call('GET', `/api/v1/admin/users/${personId}/effective`),
+        enabled: open,
+    });
+    const models = Object.entries(effective.data?.models ?? {})
+        .filter(([, m]) => m.perms.includes('read'))
+        .sort((a, b) => a[1].label.localeCompare(b[1].label));
+    return (_jsxs("details", { className: "rounded-md border", onToggle: (e) => setOpen(e.target.open), children: [_jsx("summary", { className: "cursor-pointer px-3 py-2 text-sm font-semibold", children: t('people.canDo') }), _jsx("div", { className: "grid gap-3 border-t p-3 text-sm", children: effective.data === undefined ? (_jsx("p", { className: "text-muted-foreground", children: "\u2026" })) : effective.data.administrator ? (_jsx("p", { children: t('people.canDoAll') })) : (_jsxs(_Fragment, { children: [models.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: t('people.canDoNothing') })) : (_jsx("ul", { className: "grid gap-1", children: models.map(([name, m]) => (_jsxs("li", { className: "flex flex-wrap gap-x-2", children: [_jsx("span", { className: "font-medium", children: m.label }), _jsx("span", { className: "text-muted-foreground", children: m.perms.map((p) => t(`roles.perm.${p}`)).join(', ') }), m.hiddenFields.length === 0 ? null : (_jsx("span", { className: "text-xs text-muted-foreground", children: t('people.hiddenFields', { count: m.hiddenFields.length }) }))] }, name))) })), effective.data.permissions.length === 0 ? null : (_jsxs("p", { children: [_jsxs("span", { className: "font-medium", children: [t('roles.permissions'), ": "] }), effective.data.permissions
+                                    .map((p) => effective.data?.permissionLabels[p] ?? p)
+                                    .join(', ')] }))] })) })] }));
+}
+function PersonDialog({ api, catalogue, personId, onClose, }) {
+    const { t } = useTranslation('settings');
+    const { format, uid } = useKosh();
+    const id = useId();
+    const queryClient = useQueryClient();
+    const person = useQuery({
+        queryKey: ['settings', 'people', personId],
+        queryFn: () => api.call('GET', `${P}/${personId}`),
+    });
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [assignments, setAssignments] = useState([]);
+    const [link, setLink] = useState(null);
+    const [confirm, setConfirm] = useState(null);
+    useEffect(() => {
+        if (person.data === undefined)
+            return;
+        setName(person.data.name);
+        setEmail(person.data.email ?? '');
+        setAssignments(person.data.assignments.map(({ group, company }) => ({ group, company })));
+    }, [person.data]);
+    const refresh = () => void queryClient.invalidateQueries({ queryKey: ['settings', 'people'] });
+    const saveDetails = useMutation({
+        mutationFn: () => api.call('PATCH', `${P}/${personId}`, { name, email }),
+        onSuccess: refresh,
+    });
+    const saveRoles = useMutation({
+        mutationFn: () => api.call('PUT', `${P}/${personId}/roles`, { assignments }),
+        onSuccess: refresh,
+    });
+    const setActive = useMutation({
+        mutationFn: (active) => api.call('PATCH', `${P}/${personId}`, { active }),
+        onSuccess: () => {
+            setConfirm(null);
+            refresh();
+        },
+    });
+    const resend = useMutation({
+        mutationFn: () => api.call('POST', `${P}/${personId}/invitation`),
+        onSuccess: (data) => {
+            setLink({ url: data.activationUrl, emailed: data.emailed });
+            refresh();
+        },
+    });
+    const reset = useMutation({
+        mutationFn: () => api.call('POST', `${P}/${personId}/reset-2fa`),
+        onSuccess: () => {
+            setConfirm(null);
+            refresh();
+        },
+    });
+    const p = person.data;
+    const error = saveDetails.error ?? saveRoles.error ?? setActive.error ?? resend.error ?? reset.error;
+    const self = personId === uid;
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => !open && onClose(), title: p?.name ?? '…', wide: true, children: p === undefined ? null : (_jsxs("div", { className: "grid gap-5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx(Avatar, { name: p.name, src: imageUrl('user', p.id, p.avatar), className: "size-8" }), _jsx("span", { className: "text-muted-foreground", children: p.login }), _jsx(StateBadge, { person: p }), p.administrator ? _jsx(Badge, { tone: "info", children: t('people.administrator') }) : null, p.twoFactor ? (_jsxs(Badge, { tone: "success", children: [_jsx(ShieldCheck, { className: "size-3", "aria-hidden": true }), t('people.twoFactor')] })) : null] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.details') }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-[1fr_1fr_auto] sm:items-end", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-name`, children: t('profile.name') }), _jsx(Input, { id: `${id}-name`, value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-email`, children: t('profile.email') }), _jsx(Input, { id: `${id}-email`, type: "email", value: email, onChange: (e) => setEmail(e.target.value) })] }), _jsx(Button, { variant: "secondary", busy: saveDetails.isPending, onClick: () => saveDetails.mutate(), children: t('profile.save') })] })] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.roles') }), self && !catalogue.manager.administrator ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('people.notYourOwn') })) : (_jsxs(_Fragment, { children: [_jsx(RolesEditor, { catalogue: catalogue, value: assignments, onChange: setAssignments }), _jsx("div", { children: _jsx(Button, { variant: "primary", busy: saveRoles.isPending, onClick: () => saveRoles.mutate(), children: t('people.saveRoles') }) })] }))] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.access') }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [p.state === 'invited' || p.state === 'active' ? (_jsx(Button, { variant: "secondary", busy: resend.isPending, onClick: () => resend.mutate(), children: p.state === 'invited' ? t('people.resend') : t('people.newLink') })) : null, p.twoFactor ? (_jsx(Button, { variant: "secondary", onClick: () => setConfirm('reset'), children: t('people.reset2fa') })) : null, self ? null : p.active ? (_jsx(Button, { variant: "danger", onClick: () => setConfirm('deactivate'), children: t('people.deactivate') })) : (_jsx(Button, { variant: "secondary", busy: setActive.isPending, onClick: () => setActive.mutate(true), children: t('people.reactivate') }))] }), link === null ? null : (_jsx(InvitationLink, { url: link.url, emailed: link.emailed, to: p.login })), confirm === null ? null : (_jsx(Alert, { tone: "warning", action: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", onClick: () => setConfirm(null), children: t('profile.cancel') }), _jsx(Button, { size: "sm", variant: "danger", busy: setActive.isPending || reset.isPending, onClick: () => confirm === 'reset' ? reset.mutate() : setActive.mutate(false), children: confirm === 'reset' ? t('people.reset2fa') : t('people.deactivate') })] }), children: confirm === 'reset' ? t('people.resetConfirm') : t('people.deactivateConfirm') }))] }), error === null ? null : _jsx(Alert, { tone: "danger", children: message(error) }), catalogue.manager.administrator ? _jsx(Effective, { api: api, personId: personId }) : null, _jsxs("section", { className: "grid gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.activity') }), p.activity.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('people.noActivity') })) : (_jsx("ol", { className: "grid gap-1.5 text-sm", children: p.activity.map((a, i) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "w-40 shrink-0 text-xs text-muted-foreground", children: a.at === null ? '' : format.datetime(a.at) }), _jsx("span", { children: a.summary })] }, i))) }))] })] })) }));
+}
+export function PeoplePage({ api }) {
+    const { t } = useTranslation('settings');
+    const { format } = useKosh();
+    const id = useId();
+    const [q, setQ] = useState('');
+    const [status, setStatus] = useState('all');
+    const [inviting, setInviting] = useState(false);
+    const [open, setOpen] = useState(null);
+    const catalogue = useQuery({
+        queryKey: ['settings', 'people', 'catalogue'],
+        queryFn: () => api.call('GET', `${P}/catalogue`),
+    });
+    const people = useQuery({
+        queryKey: ['settings', 'people', 'list', q, status],
+        queryFn: () => api.call('GET', `${P}?status=${status}&q=${encodeURIComponent(q.trim())}`),
+    });
+    if (catalogue.error !== null)
+        return _jsx(Alert, { tone: "danger", children: message(catalogue.error) });
+    const list = people.data?.people ?? [];
+    const statuses = ['all', 'active', 'invited', 'deactivated'];
+    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('people.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('people.intro') })] }), _jsxs(Button, { variant: "primary", onClick: () => setInviting(true), disabled: catalogue.data === undefined, children: [_jsx(UserPlus, { "aria-hidden": true }), t('people.invite')] })] }), _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('people.search') }), _jsx(Input, { id: `${id}-q`, type: "search", className: "ps-9", placeholder: t('people.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('people.status') }), statuses.map((s) => (_jsx("button", { type: "button", "aria-pressed": status === s, onClick: () => setStatus(s), className: "rounded px-3 py-1 text-sm aria-pressed:bg-accent aria-pressed:font-medium aria-pressed:text-accent-foreground", children: t(`people.filter.${s}`) }, s)))] })] }), people.isSuccess && list.length === 0 ? (_jsx(EmptyState, { title: t('people.empty') })) : (_jsx("ul", { className: "divide-y rounded-lg border bg-surface", "aria-label": t('people.title'), children: list.map((p) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setOpen(p.id), className: "flex w-full flex-wrap items-center gap-3 px-4 py-3 text-start hover:bg-muted/50", children: [_jsx(Avatar, { name: p.name, src: imageUrl('user', p.id, p.avatar), className: "size-8" }), _jsxs("span", { className: "grid min-w-48 flex-1", children: [_jsx("span", { className: "font-medium", children: p.name }), _jsx("span", { className: "text-sm text-muted-foreground", children: p.login })] }), _jsxs("span", { className: "flex min-w-48 flex-1 flex-wrap gap-1", children: [p.administrator ? _jsx(Badge, { tone: "info", children: t('people.administrator') }) : null, p.assignments
+                                        .filter((a) => !a.group.startsWith('base.'))
+                                        .slice(0, 3)
+                                        .map((a) => (_jsx(Badge, { tone: "neutral", children: a.label }, `${a.group}-${a.company}`))), p.assignments.length > 3 ? (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["+", p.assignments.length - 3] })) : null] }), _jsxs("span", { className: "flex items-center gap-2", children: [p.twoFactor ? (_jsx(ShieldCheck, { className: "size-4 text-success", "aria-label": t('people.twoFactor') })) : null, _jsx(StateBadge, { person: p })] }), _jsx("span", { className: "w-40 text-end text-xs text-muted-foreground", children: p.state === 'invited' && p.invitationExpiresAt !== null
+                                    ? t('people.expires', { when: format.date(p.invitationExpiresAt) })
+                                    : p.lastSeenAt === null
+                                        ? t('people.never')
+                                        : t('profile.lastActive', { when: format.datetime(p.lastSeenAt) }) })] }) }, p.id))) })), catalogue.data === undefined ? null : (_jsx(InviteDialog, { api: api, catalogue: catalogue.data, open: inviting, onOpenChange: setInviting })), open === null || catalogue.data === undefined ? null : (_jsx(PersonDialog, { api: api, catalogue: catalogue.data, personId: open, onClose: () => setOpen(null) }))] }));
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Your profile (RFC 0019 §3.6), from the user menu: your details, language and region (with your default company),
+ * your password, two-factor sign-in (set up with an authenticator app, recovery codes, turn off) and the devices
+ * signed in as you (sign one out, or all the others). The server checks and audits every change.
+ */
+import { type PageProps } from '../../ui/index.js';
+import { type ReactElement } from 'react';
+/** "Chrome on Windows" from a user agent; enough to recognise a device. */
+export declare function deviceOf(userAgent: string | null): {
+    browser: string;
+    os: string;
+    phone: boolean;
+};
+export declare function ProfilePage({ api }: PageProps): ReactElement;

package/dist/settings/web/ProfilePage.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Your profile (RFC 0019 §3.6), from the user menu: your details, language and region (with your default company),
+ * your password, two-factor sign-in (set up with an authenticator app, recovery codes, turn off) and the devices
+ * signed in as you (sign one out, or all the others). The server checks and audits every change.
+ */
+import { Alert, ApiError, Badge, Button, ImagePicker, Input, imageUrl, LANGUAGES, Label, Select, useKosh, useLanguage, } from '../../ui/index.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Laptop, Monitor, Smartphone } from 'lucide-react';
+import { useEffect, useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const message = (error) => (error instanceof ApiError ? error.message : String(error));
+/** "Chrome on Windows" from a user agent; enough to recognise a device. */
+export function deviceOf(userAgent) {
+    const ua = userAgent ?? '';
+    const browser = /Edg\//.test(ua)
+        ? 'Edge'
+        : /OPR\//.test(ua)
+            ? 'Opera'
+            : /Firefox\//.test(ua)
+                ? 'Firefox'
+                : /Chrome\//.test(ua)
+                    ? 'Chrome'
+                    : /Safari\//.test(ua)
+                        ? 'Safari'
+                        : (ua.split(/[\s/]/)[0] ?? '');
+    const os = /Windows/.test(ua)
+        ? 'Windows'
+        : /Android/.test(ua)
+            ? 'Android'
+            : /iPhone|iPad/.test(ua)
+                ? 'iOS'
+                : /Mac OS X/.test(ua)
+                    ? 'macOS'
+                    : /Linux/.test(ua)
+                        ? 'Linux'
+                        : '';
+    return { browser, os, phone: /Mobile|Android|iPhone/.test(ua) };
+}
+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 }), hint === undefined ? null : _jsx("p", { className: "text-sm text-muted-foreground", children: hint })] }), children] }));
+}
+function Field({ label, id, children, }) {
+    return (_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), children] }));
+}
+function TwoFactor({ api, me }) {
+    const { t } = useTranslation('settings');
+    const id = useId();
+    const queryClient = useQueryClient();
+    const [setup, setSetup] = useState(null);
+    const [code, setCode] = useState('');
+    const [password, setPassword] = useState('');
+    const [codes, setCodes] = useState(null);
+    const refresh = () => void queryClient.invalidateQueries({ queryKey: ['me'] });
+    const start = useMutation({
+        mutationFn: () => api.call('POST', '/api/v1/auth/2fa/setup'),
+        onSuccess: (data) => {
+            setSetup(data);
+            setCode('');
+        },
+    });
+    const enable = useMutation({
+        mutationFn: () => api.call('POST', '/api/v1/auth/2fa/enable', { code }),
+        onSuccess: (data) => {
+            setCodes(data.recoveryCodes);
+            setSetup(null);
+            refresh();
+        },
+    });
+    const disable = useMutation({
+        mutationFn: () => api.call('POST', '/api/v1/auth/2fa/disable', { password, code }),
+        onSuccess: () => {
+            setPassword('');
+            setCode('');
+            refresh();
+        },
+    });
+    const error = start.error ?? enable.error ?? disable.error;
+    return (_jsxs(Section, { title: t('profile.twoFactor'), hint: t('profile.twoFactorHint'), children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [me.twoFactorEnabled ? (_jsx(Badge, { tone: "success", children: t('profile.twoFactorOn') })) : (_jsx(Badge, { tone: "warning", children: t('profile.twoFactorOff') })), me.administrator === true && !me.twoFactorEnabled ? (_jsx("span", { className: "text-warning-text", children: t('profile.adminNeeds') })) : null] }), codes === null ? null : (_jsxs(Alert, { tone: "info", children: [_jsx("p", { className: "font-medium", children: t('profile.recoveryCodes') }), _jsx("ul", { className: "mt-2 grid grid-cols-2 gap-1 font-mono text-sm sm:grid-cols-4", children: codes.map((c) => (_jsx("li", { children: c }, c))) })] })), !me.twoFactorEnabled && setup === null ? (_jsx("div", { children: _jsx(Button, { variant: "primary", busy: start.isPending, onClick: () => start.mutate(), children: t('profile.setUp') }) })) : null, setup === null ? null : (_jsxs("form", { className: "grid gap-3", onSubmit: (e) => {
+                    e.preventDefault();
+                    enable.mutate();
+                }, children: [_jsxs("ol", { className: "grid list-decimal gap-2 ps-5 text-sm", children: [_jsxs("li", { children: [t('profile.step1'), ' ', _jsx("a", { className: "text-primary underline", href: setup.otpauthUri, children: t('profile.openApp') })] }), _jsxs("li", { children: [t('profile.step2'), _jsx("code", { className: "ms-2 select-all break-all rounded bg-muted px-2 py-1 font-mono text-xs", children: setup.secret })] }), _jsx("li", { children: t('profile.step3') })] }), _jsx(Field, { label: t('profile.code'), id: `${id}-code`, children: _jsx(Input, { id: `${id}-code`, inputMode: "numeric", autoComplete: "one-time-code", className: "w-40 font-mono", value: code, onChange: (e) => setCode(e.target.value.trim()) }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "submit", variant: "primary", busy: enable.isPending, disabled: code.length < 6, children: t('profile.turnOn') }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => setSetup(null), children: t('profile.cancel') })] })] })), me.twoFactorEnabled ? (_jsxs("details", { children: [_jsx("summary", { className: "cursor-pointer text-sm", children: t('profile.turnOff') }), _jsxs("form", { className: "mt-3 grid gap-3 sm:grid-cols-[1fr_1fr_auto] sm:items-end", onSubmit: (e) => {
+                            e.preventDefault();
+                            disable.mutate();
+                        }, children: [_jsx(Field, { label: t('profile.password'), id: `${id}-off-password`, children: _jsx(Input, { id: `${id}-off-password`, type: "password", autoComplete: "current-password", value: password, onChange: (e) => setPassword(e.target.value) }) }), _jsx(Field, { label: t('profile.code'), id: `${id}-off-code`, children: _jsx(Input, { id: `${id}-off-code`, inputMode: "numeric", autoComplete: "one-time-code", value: code, onChange: (e) => setCode(e.target.value.trim()) }) }), _jsx(Button, { type: "submit", variant: "danger", busy: disable.isPending, disabled: password === '' || code === '', children: t('profile.turnOff') })] })] })) : null, error === null ? null : _jsx(Alert, { tone: "danger", children: message(error) })] }));
+}
+function Sessions({ api }) {
+    const { t } = useTranslation('settings');
+    const { format } = useKosh();
+    const queryClient = useQueryClient();
+    const sessions = useQuery({
+        queryKey: ['profile', 'sessions'],
+        queryFn: () => api.call('GET', '/api/v1/auth/sessions'),
+    });
+    const refresh = () => void queryClient.invalidateQueries({ queryKey: ['profile', 'sessions'] });
+    const one = useMutation({
+        mutationFn: (sid) => api.call('DELETE', `/api/v1/auth/sessions/${sid}`),
+        onSuccess: refresh,
+    });
+    const others = useMutation({
+        mutationFn: () => api.call('POST', '/api/v1/auth/sessions/sign-out-others'),
+        onSuccess: refresh,
+    });
+    const list = sessions.data?.sessions ?? [];
+    return (_jsxs(Section, { title: t('profile.sessions'), hint: t('profile.sessionsHint'), children: [_jsx("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: [name, ' ', s.current ? _jsx(Badge, { tone: "success", children: t('profile.thisDevice') }) : null] }), _jsx("p", { className: "text-xs text-muted-foreground", children: [s.ip, t('profile.lastActive', { when: format.datetime(s.lastSeenAt) })]
+                                            .filter((x) => x !== null)
+                                            .join(' · ') })] }), s.current ? null : (_jsx(Button, { size: "sm", variant: "secondary", busy: one.isPending && one.variables === s.id, onClick: () => one.mutate(s.id), "aria-label": t('profile.signOutDevice', { device: name }), children: t('profile.signOut') }))] }, s.id));
+                }) }), list.filter((s) => !s.current).length === 0 ? null : (_jsx("div", { children: _jsx(Button, { variant: "secondary", busy: others.isPending, onClick: () => others.mutate(), children: t('profile.signOutOthers') }) })), (one.error ?? others.error) === null ? null : (_jsx(Alert, { tone: "danger", children: message(one.error ?? others.error) }))] }));
+}
+export function ProfilePage({ api }) {
+    const { t } = useTranslation('settings');
+    const id = useId();
+    const queryClient = useQueryClient();
+    const { setLang } = useLanguage();
+    const profile = useQuery({
+        queryKey: ['profile'],
+        queryFn: () => api.call('GET', '/api/v1/auth/profile'),
+    });
+    const me = useQuery({ queryKey: ['me'], queryFn: () => api.call('GET', '/api/v1/auth/me') });
+    const companies = useQuery({
+        queryKey: ['names', 'res.company', me.data?.companies],
+        queryFn: () => api.names('res.company', { ids: me.data?.companies ?? [] }),
+        enabled: (me.data?.companies.length ?? 0) > 1,
+    });
+    const [draft, setDraft] = useState(null);
+    useEffect(() => {
+        if (profile.data !== undefined)
+            setDraft(profile.data);
+    }, [profile.data]);
+    const save = useMutation({
+        mutationFn: (values) => api.call('PATCH', '/api/v1/auth/profile', values),
+        onSuccess: (saved) => {
+            queryClient.setQueryData(['profile'], saved);
+            void queryClient.invalidateQueries({ queryKey: ['me'] });
+            // The app follows the language chosen here.
+            setLang(saved.lang);
+        },
+    });
+    const photo = useMutation({
+        mutationFn: (image) => image === null
+            ? api.call('DELETE', '/api/v1/auth/profile/avatar')
+            : api.call('PUT', '/api/v1/auth/profile/avatar', { image }),
+        // The shell shows the photo from the user's details.
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['me'] }),
+    });
+    const [current, setCurrent] = useState('');
+    const [next, setNext] = useState('');
+    const [repeat, setRepeat] = useState('');
+    const password = useMutation({
+        mutationFn: () => api.call('POST', '/api/v1/auth/password', { current, next }),
+        onSuccess: () => {
+            setCurrent('');
+            setNext('');
+            setRepeat('');
+        },
+    });
+    const zones = (() => {
+        let list;
+        try {
+            list = Intl.supportedValuesOf('timeZone');
+        }
+        catch {
+            list = ['Asia/Dhaka', 'Asia/Kolkata'];
+        }
+        // UTC (every new user's default) and the saved zone are always offered.
+        return [...new Set(['UTC', ...(draft === null ? [] : [draft.tz]), ...list])];
+    })();
+    if (profile.error !== null)
+        return _jsx(Alert, { tone: "danger", children: message(profile.error) });
+    if (draft === null || me.data === undefined)
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" });
+    const set = (patch) => setDraft({ ...draft, ...patch });
+    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { className: "grid gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('profile.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('profile.signedInAs', { login: draft.login }) })] }), _jsxs("section", { "aria-label": t('profile.photo'), className: "rounded-lg border bg-surface p-5", children: [_jsx(ImagePicker, { name: draft.name, src: imageUrl('user', me.data.id, me.data.avatar), fit: "photo", busy: photo.isPending, onChoose: (image) => photo.mutate(image), onRemove: () => photo.mutate(null) }), photo.error === null ? null : (_jsx("div", { className: "mt-3", children: _jsx(Alert, { tone: "danger", children: message(photo.error) }) }))] })] }), _jsxs("form", { className: "grid gap-6", onSubmit: (e) => {
+                    e.preventDefault();
+                    save.mutate({
+                        name: draft.name,
+                        email: draft.email ?? '',
+                        phone: draft.phone ?? '',
+                        lang: draft.lang,
+                        tz: draft.tz,
+                        ...(draft.company === null ? {} : { company: draft.company }),
+                    });
+                }, children: [_jsx(Section, { title: t('profile.details'), children: _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: t('profile.name'), id: `${id}-name`, children: _jsx(Input, { id: `${id}-name`, autoComplete: "name", required: true, value: draft.name, onChange: (e) => set({ name: e.target.value }) }) }), _jsx(Field, { label: t('profile.email'), id: `${id}-email`, children: _jsx(Input, { id: `${id}-email`, type: "email", autoComplete: "email", value: draft.email ?? '', onChange: (e) => set({ email: e.target.value }) }) }), _jsx(Field, { label: t('profile.phone'), id: `${id}-phone`, children: _jsx(Input, { id: `${id}-phone`, type: "tel", autoComplete: "tel", value: draft.phone ?? '', onChange: (e) => set({ phone: e.target.value }) }) })] }) }), _jsx(Section, { title: t('profile.region'), hint: t('profile.regionHint'), children: _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: t('profile.language'), id: `${id}-lang`, children: _jsx(Select, { id: `${id}-lang`, label: t('profile.language'), value: draft.lang, options: LANGUAGES.map((l) => ({ value: l.code, label: l.name })), onChange: (v) => set({ lang: v }) }) }), _jsx(Field, { label: t('profile.timeZone'), id: `${id}-tz`, children: _jsx(Select, { id: `${id}-tz`, label: t('profile.timeZone'), value: draft.tz, options: zones.map((z) => ({ value: z, label: z.replace(/_/g, ' ') })), onChange: (v) => set({ tz: v }) }) }), (me.data.companies.length ?? 0) > 1 ? (_jsx(Field, { label: t('profile.defaultCompany'), id: `${id}-company`, children: _jsx(Select, { id: `${id}-company`, label: t('profile.defaultCompany'), value: draft.company === null ? null : String(draft.company), options: (companies.data ?? []).map((c) => ({
+                                            value: String(c.id),
+                                            label: c.displayName,
+                                        })), onChange: (v) => set({ company: Number(v) }) }) })) : null] }) }), save.error === null ? null : _jsx(Alert, { tone: "danger", children: message(save.error) }), save.isSuccess ? _jsx(Alert, { tone: "info", children: t('profile.saved') }) : null, _jsx("div", { className: "flex justify-end", children: _jsx(Button, { type: "submit", variant: "primary", busy: save.isPending, children: t('profile.save') }) })] }), _jsxs(Section, { title: t('profile.passwordTitle'), hint: t('profile.passwordHint'), children: [_jsxs("form", { className: "grid gap-4 sm:grid-cols-3 sm:items-end", onSubmit: (e) => {
+                            e.preventDefault();
+                            password.mutate();
+                        }, children: [_jsx(Field, { label: t('profile.currentPassword'), id: `${id}-current`, children: _jsx(Input, { id: `${id}-current`, type: "password", autoComplete: "current-password", value: current, onChange: (e) => setCurrent(e.target.value) }) }), _jsx(Field, { label: t('profile.newPassword'), id: `${id}-next`, children: _jsx(Input, { id: `${id}-next`, type: "password", autoComplete: "new-password", minLength: 12, value: next, onChange: (e) => setNext(e.target.value) }) }), _jsx(Field, { label: t('profile.repeatPassword'), id: `${id}-repeat`, children: _jsx(Input, { id: `${id}-repeat`, type: "password", autoComplete: "new-password", value: repeat, "aria-invalid": repeat !== '' && repeat !== next ? true : undefined, onChange: (e) => setRepeat(e.target.value) }) }), _jsx("div", { className: "sm:col-span-3", children: _jsx(Button, { type: "submit", variant: "secondary", busy: password.isPending, disabled: current === '' || next.length < 12 || next !== repeat, children: t('profile.changePassword') }) })] }), password.error === null ? null : _jsx(Alert, { tone: "danger", children: message(password.error) }), password.isSuccess ? _jsx(Alert, { tone: "info", children: t('profile.passwordChanged') }) : null] }), _jsx(TwoFactor, { api: api, me: me.data }), _jsx(Sessions, { api: api })] }));
+}

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

@@ -0,0 +1,35 @@
+import { type ReactElement } from 'react';
+export interface Assignment {
+    readonly group: string;
+    readonly company: number | null;
+}
+export interface Catalogue {
+    readonly apps: readonly {
+        readonly module: string;
+        readonly label: string;
+        /** A real app (in the sidebar), or a technical module (storage, notifications…). */
+        readonly app: boolean;
+        readonly levels: readonly {
+            readonly key: string;
+            readonly label: string;
+            readonly groups: readonly string[];
+        }[];
+    }[];
+    readonly roles: readonly {
+        readonly code: string;
+        readonly label: string;
+        readonly administrator: boolean;
+    }[];
+    readonly companies: readonly {
+        readonly id: number;
+        readonly name: string;
+    }[];
+    readonly manager: {
+        readonly administrator: boolean;
+    };
+}
+export declare function RolesEditor({ catalogue, value, onChange, }: {
+    readonly catalogue: Catalogue;
+    readonly value: readonly Assignment[];
+    readonly onChange: (next: Assignment[]) => void;
+}): ReactElement;

package/dist/settings/web/RolesEditor.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A person's roles as people think of them (RFC 0019 §3.2): per app, one access level (*No access · User · Manager*),
+ * per company when there are several; other roles (runtime roles, Administrator) as checkboxes. It edits the
+ * assignments `{ group, company }` the server stores; the server checks every one.
+ */
+import { Checkbox, Label, Select } from '../../ui/index.js';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+/** "No access" (the select takes no empty value). */
+const NONE = 'none';
+export function RolesEditor({ catalogue, value, onChange, }) {
+    const { t } = useTranslation('settings');
+    const id = useId();
+    const several = catalogue.companies.length > 1;
+    const [company, setCompany] = useState(null);
+    const here = value.filter((a) => a.company === company);
+    const has = (group) => here.some((a) => a.group === group);
+    const levelGroups = new Set(catalogue.apps.flatMap((a) => a.levels.flatMap((l) => l.groups)));
+    /** The app's level: the last declared whose groups the person all holds (levels go up). */
+    const levelOf = (app) => [...app.levels].reverse().find((l) => l.groups.every(has))?.key ?? NONE;
+    const setLevel = (app, key) => {
+        const appGroups = new Set(app.levels.flatMap((l) => l.groups));
+        const kept = value.filter((a) => a.company !== company || !appGroups.has(a.group));
+        const level = app.levels.find((l) => l.key === key);
+        onChange([...kept, ...(level?.groups ?? []).map((group) => ({ group, company }))]);
+    };
+    const toggle = (group, on) => onChange(on
+        ? [...value, { group, company }]
+        : value.filter((a) => !(a.company === company && a.group === group)));
+    const others = catalogue.roles.filter((r) => !levelGroups.has(r.code) && r.code !== 'base.user' && !r.code.startsWith('base.'));
+    const admins = catalogue.roles.filter((r) => r.administrator);
+    return (_jsxs("div", { className: "grid gap-4", children: [several ? (_jsxs("div", { className: "grid gap-1.5 sm:max-w-xs", children: [_jsx(Label, { htmlFor: `${id}-company`, children: t('people.rolesIn') }), _jsx(Select, { id: `${id}-company`, label: t('people.rolesIn'), value: company === null ? 'all' : String(company), options: [
+                            { value: 'all', label: t('people.everyCompany') },
+                            ...catalogue.companies.map((c) => ({ value: String(c.id), label: c.name })),
+                        ], onChange: (v) => setCompany(v === 'all' ? null : Number(v)) })] })) : null, [
+                { key: 'apps', list: catalogue.apps.filter((a) => a.app) },
+                { key: 'technical', list: catalogue.apps.filter((a) => !a.app) },
+            ].map(({ key, list }) => list.length === 0 ? null : key === 'apps' ? (_jsx("ul", { className: "divide-y rounded-md border", children: list.map((app) => (_jsxs("li", { className: "flex flex-wrap items-center justify-between gap-3 px-3 py-2", children: [_jsx(Label, { htmlFor: `${id}-${app.module}`, className: "font-medium", children: app.label }), _jsx(Select, { id: `${id}-${app.module}`, label: app.label, className: "w-48", value: levelOf(app), options: [
+                                { value: NONE, label: t('people.noAccess') },
+                                ...app.levels.map((l) => ({ value: l.key, label: l.label })),
+                            ], onChange: (v) => setLevel(app, v) })] }, app.module))) }, key)) : (_jsxs("details", { className: "rounded-md border", children: [_jsx("summary", { className: "cursor-pointer px-3 py-2 text-sm", children: t('people.technical') }), _jsx("ul", { className: "divide-y border-t", children: list.map((app) => (_jsxs("li", { className: "flex flex-wrap items-center justify-between gap-3 px-3 py-2", children: [_jsx(Label, { htmlFor: `${id}-${app.module}`, className: "font-medium", children: app.label }), _jsx(Select, { id: `${id}-${app.module}`, label: app.label, className: "w-48", value: levelOf(app), options: [
+                                        { value: NONE, label: t('people.noAccess') },
+                                        ...app.levels.map((l) => ({ value: l.key, label: l.label })),
+                                    ], onChange: (v) => setLevel(app, v) })] }, app.module))) })] }, key))), [...admins, ...others.filter((r) => !r.administrator)].length === 0 ? null : (_jsxs("fieldset", { className: "grid gap-2", children: [_jsx("legend", { className: "mb-1 text-sm font-medium", children: t('people.otherRoles') }), [...admins, ...others.filter((r) => !r.administrator)].map((r) => {
+                        const locked = r.administrator && !catalogue.manager.administrator;
+                        return (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: `${id}-role-${r.code}`, checked: has(r.code), disabled: locked, onCheckedChange: (c) => toggle(r.code, c === true) }), _jsx(Label, { htmlFor: `${id}-role-${r.code}`, children: r.label }), r.administrator ? (_jsx("span", { className: "text-xs text-muted-foreground", children: t('people.administratorHint') })) : null] }, r.code));
+                    })] }))] }));
+}

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

@@ -0,0 +1,9 @@
+/**
+ * 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 { type PageProps } from '../../ui/index.js';
+import { type ReactElement } from 'react';
+export declare function RolesPage({ api }: PageProps): ReactElement;