shutro-erp 0.3.3 → 0.3.5

package/dist/settings/people.js

@@ -17,7 +17,7 @@
  */
 import { createHash, randomBytes } from 'node:crypto';
 import { layout } from '../mail/index.js';
-import { audit, HttpProblem, isAdministratorUser } from '../server/index.js';
+import { audit, HttpProblem, imageVersions, isAdministratorUser, } from '../server/index.js';
 /** How long an invitation works. */
 export const INVITATION_DAYS = 7;
 const ref = (env, name) => env.model(name);
@@ -164,6 +164,7 @@ export function registerPeopleRoutes(context, options) {
         const invitations = await rows(ref(su, 'settings.invitation').search({ where: { user: { in: ids }, usedAt: null } }), ['user', 'expiresAt']);
         const known = await knownGroups();
         const admin = adminGroups(su);
+        const photos = await imageVersions(su, 'user', ids);
         // "Purchase · Manager": a group named by the app level that gives it, else by its own label.
         const levelLabel = new Map();
         for (const m of modules)
@@ -184,6 +185,7 @@ export function registerPeopleRoutes(context, options) {
                 name: String(u['name'] ?? ''),
                 login: String(u['login'] ?? ''),
                 email: typeof u['email'] === 'string' ? u['email'] : null,
+                avatar: photos[String(id)] ?? null,
                 active: u['active'] !== false,
                 state: u['active'] === false
                     ? 'deactivated'
@@ -278,16 +280,29 @@ export function registerPeopleRoutes(context, options) {
             };
         });
     });
+    // An invitation (the person chooses their password), or — with `password` — a person added directly: the
+    // manager sets the password and passes it on; the login may then be a plain name (`rahim`) and the email optional.
     app.post('/api/v1/settings/people', async (request, reply) => {
         const body = (request.body ?? {});
         const name = String(body['name'] ?? '').trim();
-        const login = String(body['email'] ?? '')
+        const address = String(body['email'] ?? '')
             .trim()
             .toLowerCase();
+        const password = typeof body['password'] === 'string' ? body['password'] : undefined;
+        const direct = password !== undefined;
+        const login = direct
+            ? String(body['login'] ?? address)
+                .trim()
+                .toLowerCase()
+            : address;
         if (name === '' || name.length > 200)
             throw bad('The name is 1–200 characters.');
-        if (!EMAIL.test(login))
+        if (!direct && !EMAIL.test(login))
             throw bad('The email is their login and where the invitation goes.');
+        if (direct && !/^[a-z0-9._@+-]{3,100}$/.test(login))
+            throw bad('The login is 3–100 letters, digits, or . _ @ + -.');
+        if (direct && address !== '' && !EMAIL.test(address))
+            throw bad('The email is not valid.');
         const made = await guarded(request, async (env, su, manager) => {
             const assignments = await checkAssignments(su, body['assignments'] ?? [], manager);
             const taken = await ref(withArchived(su), 'res.users').search({ where: { login }, limit: 1 });
@@ -301,16 +316,27 @@ export function registerPeopleRoutes(context, options) {
                 {
                     login,
                     name,
-                    email: login,
+                    email: address === '' ? null : address,
                     company: home,
                     companies: { set: companies.length === 0 ? [env.companyId] : companies },
                 },
             ]);
             const user = created.ids[0];
-            // No usable password until the invitation is used.
-            await auth.setPassword(su, user, randomBytes(32).toString('base64url'));
+            // Added directly: the manager's password (checked for length); invited: none usable until the link is used.
+            await auth.setPassword(su, user, password ?? randomBytes(32).toString('base64url'));
             if (assignments.length > 0)
                 await ref(su, 'auth.user_group').create(assignments.map((a) => ({ user, group: a.group, company: a.company })));
+            if (direct) {
+                await audit(env, {
+                    kind: 'people.created',
+                    summary: `${name} (${login}) added with a password and ${assignments.length} role(s).`,
+                    targetModel: 'res.users',
+                    targetId: user,
+                    details: { assignments },
+                    ip: request.ip,
+                });
+                return { id: user, login, activationUrl: null, expiresAt: null, emailed: false };
+            }
             const link = await invite(su, user, env.uid);
             await audit(env, {
                 kind: 'people.invited',

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

@@ -0,0 +1,11 @@
+/**
+ * Settings › App settings (RFC 0020): the apps' own settings, declared in their manifests. The apps you may see on
+ * the left; an app's sections as cards — each setting with its help, a mark when it differs from the default with
+ * *Reset*, and *Save* per section, sending only what changed. Company settings name the company they apply to. The
+ * server checks every value and who may change it, and audits each change. Each setting opens its history (who, when,
+ * old → new); administrators copy a company's settings to another, export them as a file and import one, every one
+ * of those previewed before anything is written.
+ */
+import { type PageProps } from '../../ui/index.js';
+import { type ReactElement } from 'react';
+export declare function AppSettingsPage({ api }: PageProps): ReactElement;

package/dist/settings/web/AppSettingsPage.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › App settings (RFC 0020): the apps' own settings, declared in their manifests. The apps you may see on
+ * the left; an app's sections as cards — each setting with its help, a mark when it differs from the default with
+ * *Reset*, and *Save* per section, sending only what changed. Company settings name the company they apply to. The
+ * server checks every value and who may change it, and audits each change. Each setting opens its history (who, when,
+ * old → new); administrators copy a company's settings to another, export them as a file and import one, every one
+ * of those previewed before anything is written.
+ */
+import { Alert, ApiError, AppIcon, Badge, Button, Checkbox, DateField, Dialog, Input, Label, Select, Textarea, useKosh, } from '../../ui/index.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Copy, Download, History, RotateCcw, Upload } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const shown = (value) => value === null || value === ''
+    ? '—'
+    : value === true
+        ? '✓'
+        : value === false
+            ? '✗'
+            : String(value);
+const BASE = '/api/v1/settings/app-settings';
+const message = (error) => (error instanceof ApiError ? error.message : String(error));
+/** The app shown: `?app=` in the address, else the first. */
+function useChosenApp(apps) {
+    const [chosen, setChosen] = useState(() => new URLSearchParams(window.location.search).get('app') ?? undefined);
+    const set = (app) => {
+        setChosen(app);
+        const url = new URL(window.location.href);
+        url.searchParams.set('app', app);
+        window.history.replaceState(window.history.state, '', url);
+    };
+    return [apps.some((a) => a.app === chosen) ? chosen : apps[0]?.app, set];
+}
+function Control({ setting, value, disabled, onChange, }) {
+    const id = `setting-${setting.key}`;
+    const { t } = useTranslation('settings');
+    switch (setting.type) {
+        case 'boolean':
+            return (_jsx(Checkbox, { id: id, checked: value === true, disabled: disabled, onCheckedChange: (on) => onChange(on === true) }));
+        case 'selection':
+            return (_jsx(Select, { id: id, label: setting.label, value: typeof value === 'string' ? value : 'none', disabled: disabled, options: [{ value: 'none', label: t('appSettings.notSet') }, ...(setting.options ?? [])], onChange: (v) => onChange(v === 'none' ? null : v) }));
+        case 'text':
+            return (_jsx(Textarea, { id: id, rows: 4, disabled: disabled, value: typeof value === 'string' ? value : '', onChange: (e) => onChange(e.target.value) }));
+        case 'date':
+            return disabled ? (_jsx(Input, { id: id, disabled: true, className: "w-48", value: typeof value === 'string' ? value : '', readOnly: true })) : (_jsx(DateField, { id: id, value: typeof value === 'string' ? value : null, onChange: onChange }));
+        default:
+            return (_jsx(Input, { id: id, className: setting.type === 'char' ? undefined : 'w-48', disabled: disabled, type: setting.type === 'integer' ? 'number' : 'text', inputMode: setting.type === 'decimal' ? 'decimal' : undefined, min: setting.min ?? undefined, max: setting.max ?? undefined, value: value === null ? '' : String(value), onChange: (e) => {
+                    const raw = e.target.value;
+                    onChange(setting.type === 'integer'
+                        ? raw === ''
+                            ? null
+                            : Number.parseInt(raw, 10)
+                        : raw === ''
+                            ? null
+                            : raw);
+                } }));
+    }
+}
+/** Who changed a setting, when, from what to what — the audit log of this section, newest first. */
+function HistoryDialog({ api, app, section, setting, onClose, }) {
+    const { t } = useTranslation('settings');
+    const { format } = useKosh();
+    const history = useQuery({
+        queryKey: ['settings', 'app-settings', app, section.key, 'history', setting?.key],
+        queryFn: () => api.call('GET', `${BASE}/${app}/${section.key}/history?key=${encodeURIComponent(setting?.key ?? '')}`),
+        enabled: setting !== null,
+    });
+    return (_jsx(Dialog, { open: setting !== null, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, title: t('appSettings.historyOf', { setting: setting?.label ?? '' }), children: history.error !== null ? (_jsx(Alert, { tone: "danger", children: message(history.error) })) : history.data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : history.data.events.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('appSettings.neverChanged') })) : (_jsx("ol", { className: "grid gap-2 text-sm", children: history.data.events.map((e) => (_jsxs("li", { className: "grid gap-0.5 rounded-md border p-2", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [format.datetime(e.at), " \u00B7 ", e.actor?.name ?? t('appSettings.system'), " \u00B7", ' ', t(`appSettings.how.${e.how}`)] }), e.changes.map((c) => (_jsxs("span", { className: "tabular-nums", children: [_jsx("s", { className: "text-muted-foreground", children: shown(c.from) }), " \u2192 ", _jsx("b", { children: shown(c.to) })] }, c.key)))] }, e.at))) })) }));
+}
+/** The changes a copy or an import would make, section by section. */
+function ChangesList({ preview }) {
+    const { t } = useTranslation('settings');
+    return (_jsxs("div", { className: "grid gap-3 text-sm", children: [preview.sections.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: t('appSettings.nothingToChange') })) : (preview.sections.map((s) => (_jsxs("div", { className: "grid gap-1", children: [_jsxs("span", { className: "font-medium", children: [s.appLabel, " \u203A ", s.label] }), _jsx("ul", { className: "grid gap-0.5 ps-4", children: s.changes.map((c) => (_jsxs("li", { className: "tabular-nums", children: [c.label, ": ", _jsx("s", { className: "text-muted-foreground", children: shown(c.from) }), " \u2192", ' ', _jsx("b", { children: shown(c.to) })] }, c.key))) })] }, `${s.app}.${s.section}`)))), (preview.skipped ?? []).length === 0 ? null : (_jsx("p", { className: "text-xs text-muted-foreground", children: t('appSettings.skipped', { what: (preview.skipped ?? []).join(', ') }) }))] }));
+}
+/** Administrators: copy this company's settings to another, export them, import a file — each previewed first. */
+function Tools({ api, onDone }) {
+    const { t } = useTranslation('settings');
+    const { companyId } = useKosh();
+    const [copying, setCopying] = useState(false);
+    const [to, setTo] = useState('');
+    const [importing, setImporting] = useState(null);
+    const [error, setError] = useState(null);
+    const [done, setDone] = useState(null);
+    const file = useRef(null);
+    const companies = useQuery({
+        queryKey: ['settings', 'companies'],
+        queryFn: () => api.call('GET', '/api/v1/settings/companies'),
+        enabled: copying,
+    });
+    const targets = (companies.data?.companies ?? []).filter((c) => c.id !== companyId && c.member);
+    const copyPreview = useQuery({
+        queryKey: ['settings', 'app-settings', 'copy', companyId, to],
+        queryFn: () => api.call('POST', `${BASE}/copy`, { from: companyId, to: Number(to), preview: true }),
+        enabled: copying && to !== '',
+    });
+    const copy = useMutation({
+        mutationFn: () => api.call('POST', `${BASE}/copy`, { from: companyId, to: Number(to) }),
+        onSuccess: (r) => {
+            setCopying(false);
+            setDone(t('appSettings.copied', { count: r.sections.length }));
+            onDone();
+        },
+        onError: (e) => setError(message(e)),
+    });
+    const importPreview = useQuery({
+        queryKey: ['settings', 'app-settings', 'import', importing],
+        queryFn: () => api.call('POST', `${BASE}/import`, { file: importing, preview: true }),
+        enabled: importing !== null,
+        retry: false,
+    });
+    const doImport = useMutation({
+        mutationFn: () => api.call('POST', `${BASE}/import`, { file: importing }),
+        onSuccess: (r) => {
+            setImporting(null);
+            setDone(t('appSettings.imported', { count: r.sections.length }));
+            onDone();
+        },
+        onError: (e) => setError(message(e)),
+    });
+    const exportFile = async () => {
+        try {
+            const data = await api.call('GET', `${BASE}/export`);
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `app-settings-${data.company.name.replaceAll(/[^\w-]+/g, '_')}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        catch (e) {
+            setError(message(e));
+        }
+    };
+    const read = (f) => {
+        if (f === undefined)
+            return;
+        f.text().then((text) => {
+            try {
+                setImporting(JSON.parse(text));
+                setError(null);
+            }
+            catch {
+                setError(t('appSettings.notJson'));
+            }
+        }, (e) => setError(message(e)));
+    };
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "sm", variant: "secondary", onClick: () => setCopying(true), children: [_jsx(Copy, { "aria-hidden": true }), t('appSettings.copyTo')] }), _jsxs(Button, { size: "sm", variant: "secondary", onClick: () => void exportFile(), children: [_jsx(Download, { "aria-hidden": true }), t('appSettings.export')] }), _jsxs(Button, { size: "sm", variant: "secondary", onClick: () => file.current?.click(), children: [_jsx(Upload, { "aria-hidden": true }), t('appSettings.import')] }), _jsx("input", { ref: file, type: "file", accept: "application/json,.json", className: "sr-only", "aria-label": t('appSettings.importFile'), onChange: (e) => {
+                    read(e.target.files?.[0]);
+                    e.target.value = '';
+                } }), done === null ? null : _jsx("span", { className: "text-sm text-muted-foreground", children: done }), error === null ? null : _jsx(Alert, { tone: "danger", children: error }), _jsx(Dialog, { open: copying, onOpenChange: setCopying, title: t('appSettings.copyTitle'), description: t('appSettings.copyIntro'), footer: _jsx(Button, { variant: "primary", disabled: to === '' || (copyPreview.data?.sections.length ?? 0) === 0, busy: copy.isPending, onClick: () => copy.mutate(), children: t('appSettings.copyNow') }), children: _jsxs("div", { className: "grid gap-3", children: [_jsx(Select, { id: "copy-to", label: t('appSettings.toCompany'), value: to === '' ? 'none' : to, options: [
+                                { value: 'none', label: t('appSettings.chooseCompany') },
+                                ...targets.map((c) => ({ value: String(c.id), label: c.name })),
+                            ], onChange: (v) => setTo(v === 'none' ? '' : v) }), copyPreview.error !== null ? (_jsx(Alert, { tone: "danger", children: message(copyPreview.error) })) : copyPreview.data === undefined ? null : (_jsx(ChangesList, { preview: copyPreview.data }))] }) }), _jsx(Dialog, { open: importing !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setImporting(null);
+                }, title: t('appSettings.importTitle'), description: t('appSettings.importIntro'), footer: _jsx(Button, { variant: "primary", disabled: (importPreview.data?.sections.length ?? 0) === 0, busy: doImport.isPending, onClick: () => doImport.mutate(), children: t('appSettings.importNow') }), children: importPreview.error !== null ? (_jsx(Alert, { tone: "danger", children: message(importPreview.error) })) : importPreview.data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : (_jsx(ChangesList, { preview: importPreview.data })) })] }));
+}
+function SectionCard({ api, app, section, }) {
+    const { t } = useTranslation('settings');
+    const queryClient = useQueryClient();
+    const [draft, setDraft] = useState({});
+    const [history, setHistory] = useState(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: a reloaded section starts a clean draft
+    useEffect(() => setDraft({}), [section]);
+    const refresh = () => void queryClient.invalidateQueries({ queryKey: ['settings', 'app-settings', app] });
+    const save = useMutation({
+        mutationFn: () => api.call('PATCH', `${BASE}/${app}/${section.key}`, { values: draft }),
+        onSuccess: refresh,
+    });
+    const reset = useMutation({
+        mutationFn: (key) => api.call('POST', `${BASE}/${app}/${section.key}/reset`, { keys: [key] }),
+        onSuccess: refresh,
+    });
+    const currentOf = (s) => (s.key in draft ? draft[s.key] : s.value);
+    const dirty = Object.keys(draft).length > 0;
+    return (_jsxs("section", { id: `section-${section.key}`, "aria-labelledby": `section-${section.key}-title`, className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h2", { id: `section-${section.key}-title`, className: "font-semibold", children: section.label }), section.description === null ? null : (_jsx("p", { className: "text-sm text-muted-foreground", children: section.description }))] }), _jsx(Badge, { tone: "neutral", children: section.scope === 'company' ? t('appSettings.perCompany') : t('appSettings.everywhere') })] }), _jsx("div", { className: "grid gap-5", children: section.settings
+                    .filter((s) => {
+                    if (s.visibleWhen === null)
+                        return true;
+                    const other = section.settings.find((x) => x.key === s.visibleWhen?.key);
+                    return other !== undefined && currentOf(other) === s.visibleWhen.equals;
+                })
+                    .map((s) => (_jsxs("div", { className: "grid gap-1.5 sm:grid-cols-[16rem_1fr] sm:gap-6", children: [_jsxs("div", { className: "grid content-start gap-1", children: [_jsxs(Label, { htmlFor: `setting-${s.key}`, className: "flex flex-wrap items-center gap-2", children: [s.label, s.changed && !(s.key in draft) ? (_jsx(Badge, { tone: "info", children: t('appSettings.changed') })) : null] }), s.help === null ? null : _jsx("p", { className: "text-xs text-muted-foreground", children: s.help })] }), _jsxs("div", { className: "flex flex-wrap items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Control, { setting: s, value: currentOf(s), disabled: !section.editable, onChange: (v) => setDraft((d) => ({ ...d, [s.key]: v })) }) }), _jsx(Button, { size: "icon", variant: "ghost", "aria-label": t('appSettings.historyOf', { setting: s.label }), title: t('appSettings.history'), onClick: () => setHistory(s), children: _jsx(History, { "aria-hidden": true }) }), s.changed && section.editable && !(s.key in draft) ? (_jsxs(Button, { size: "sm", variant: "ghost", busy: reset.isPending && reset.variables === s.key, "aria-label": t('appSettings.resetOne', { setting: s.label }), title: t('appSettings.defaultIs', {
+                                        value: s.default === null || s.default === '' ? '—' : String(s.default),
+                                    }), onClick: () => reset.mutate(s.key), children: [_jsx(RotateCcw, { "aria-hidden": true }), t('appSettings.reset')] })) : null] })] }, s.key))) }), save.error === null && reset.error === null ? null : (_jsx(Alert, { tone: "danger", children: message(save.error ?? reset.error) })), _jsx(HistoryDialog, { api: api, app: app, section: section, setting: history, onClose: () => setHistory(null) }), section.editable ? (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [save.isSuccess && !dirty ? (_jsx("span", { className: "text-sm text-muted-foreground", children: t('appSettings.saved') })) : null, dirty ? (_jsx(Button, { variant: "ghost", onClick: () => setDraft({}), children: t('appSettings.discard') })) : null, _jsx(Button, { variant: "primary", disabled: !dirty, busy: save.isPending, onClick: () => save.mutate(), children: t('appSettings.save') })] })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: t('appSettings.readOnly') }))] }));
+}
+export function AppSettingsPage({ api }) {
+    const { t } = useTranslation('settings');
+    const { companyId } = useKosh();
+    const queryClient = useQueryClient();
+    const list = useQuery({
+        queryKey: ['settings', 'app-settings'],
+        queryFn: () => api.call('GET', BASE),
+    });
+    const apps = list.data?.apps ?? [];
+    const [app, choose] = useChosenApp(apps);
+    const settings = useQuery({
+        queryKey: ['settings', 'app-settings', app, companyId],
+        queryFn: () => api.call('GET', `${BASE}/${app}`),
+        enabled: app !== undefined,
+    });
+    if (list.error !== null)
+        return _jsx(Alert, { tone: "danger", children: message(list.error) });
+    return (_jsxs("div", { className: "mx-auto grid max-w-5xl gap-6", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('appSettings.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('appSettings.intro') })] }), list.data?.administrator === true ? (_jsx(Tools, { api: api, onDone: () => void queryClient.invalidateQueries({ queryKey: ['settings', 'app-settings'] }) })) : null] }), list.data !== undefined && apps.length === 0 ? (_jsx("p", { className: "rounded-lg border bg-surface p-6 text-center text-sm text-muted-foreground", children: t('appSettings.none') })) : (_jsxs("div", { className: "grid gap-6 md:grid-cols-[13rem_1fr]", children: [_jsx("nav", { "aria-label": t('appSettings.apps'), className: "md:sticky md:top-16 md:self-start", children: _jsx("ul", { className: "flex gap-1 overflow-x-auto md:grid", children: apps.map((a) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": a.app === app ? 'page' : undefined, onClick: () => choose(a.app), className: `flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm hover:bg-muted ${a.app === app ? 'bg-accent font-medium text-accent-foreground' : ''}`, children: [_jsx(AppIcon, { name: a.icon ?? a.app, className: "size-6 rounded-md [&_svg]:size-3.5" }), a.label] }) }, a.app))) }) }), _jsx("div", { className: "grid gap-4", children: settings.error !== null ? (_jsx(Alert, { tone: "danger", children: message(settings.error) })) : settings.data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : (settings.data.sections.map((s) => (_jsx(SectionCard, { api: api, app: settings.data.app, section: s }, s.key)))) })] }))] }));
+}

package/dist/settings/web/CompaniesPage.js

@@ -4,7 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * in it; switching to one; and, for administrators, a new company — its apps' defaults (journals, sequences, taxes…)
  * are installed with it, and the administrators can switch to it at once.
  */
-import { Alert, ApiError, Badge, Button, Dialog, Input, Label, Select, useKosh, } from '../../ui/index.js';
+import { Alert, ApiError, Avatar, Badge, Button, Dialog, Input, imageUrl, Label, Select, useKosh, } from '../../ui/index.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Building2, Plus } from 'lucide-react';
 import { useEffect, useId, useState } from 'react';
@@ -48,5 +48,5 @@ export function CompaniesPage({ api }) {
     if (list.error !== null)
         return _jsx(Alert, { tone: "danger", children: message(list.error) });
     const data = list.data;
-    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('companies.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('companies.intro') })] }), data?.canCreate === true ? (_jsxs(Button, { variant: "primary", onClick: () => setCreating(true), children: [_jsx(Plus, { className: "size-4", "aria-hidden": true }), t('companies.new')] })) : null] }), data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : (_jsx("ul", { className: "divide-y rounded-lg border bg-surface", children: data.companies.map((c) => (_jsxs("li", { className: "flex flex-wrap items-center gap-3 px-4 py-3", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Building2, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "flex items-center gap-2 font-medium", children: [_jsx("span", { className: "truncate", children: c.name }), c.current ? _jsx(Badge, { tone: "info", children: t('companies.current') }) : null] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [c.currency, " \u00B7 ", t('companies.people', { count: c.people })] })] }), c.current || !c.member || switchCompany === undefined ? null : (_jsx(Button, { size: "sm", "aria-label": t('companies.switchTo', { name: c.name }), onClick: () => switchCompany(c.id), children: t('companies.switch') }))] }, c.id))) })), data === undefined ? null : (_jsx(NewCompanyDialog, { api: api, currencies: data.currencies, open: creating, onOpenChange: setCreating }))] }));
+    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('companies.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('companies.intro') })] }), data?.canCreate === true ? (_jsxs(Button, { variant: "primary", onClick: () => setCreating(true), children: [_jsx(Plus, { className: "size-4", "aria-hidden": true }), t('companies.new')] })) : null] }), data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : (_jsx("ul", { className: "divide-y rounded-lg border bg-surface", children: data.companies.map((c) => (_jsxs("li", { className: "flex flex-wrap items-center gap-3 px-4 py-3", children: [c.logo === null ? (_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Building2, { className: "size-4" }) })) : (_jsx(Avatar, { name: c.name, src: imageUrl('company', c.id, c.logo), shape: "square", className: "size-9 border" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "flex items-center gap-2 font-medium", children: [_jsx("span", { className: "truncate", children: c.name }), c.current ? _jsx(Badge, { tone: "info", children: t('companies.current') }) : null] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [c.currency, " \u00B7 ", t('companies.people', { count: c.people })] })] }), c.current || !c.member || switchCompany === undefined ? null : (_jsx(Button, { size: "sm", "aria-label": t('companies.switchTo', { name: c.name }), onClick: () => switchCompany(c.id), children: t('companies.switch') }))] }, c.id))) })), data === undefined ? null : (_jsx(NewCompanyDialog, { api: api, currencies: data.currencies, open: creating, onOpenChange: setCreating }))] }));
 }

package/dist/settings/web/CompanyPage.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * apps add (tax ids, fiscal year…), as the server offers them. The preview shows the colour as buttons, links and
  * selections take it, in light and dark; the themes keep text readable whatever colour is chosen.
  */
-import { Alert, ApiError, accentVariables, Badge, Button, Checkbox, Input, Label, Select, Textarea, } from '../../ui/index.js';
+import { Alert, ApiError, accentVariables, Badge, Button, Checkbox, ImagePicker, Input, imageUrl, Label, Select, Textarea, } from '../../ui/index.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Check } from 'lucide-react';
 import { useId, useState } from 'react';
@@ -58,6 +58,17 @@ function CompanyForm({ api, company }) {
     const [grouping, setGrouping] = useState(company.numberGrouping);
     const [color, setColor] = useState(company.accentColor);
     const [typed, setTyped] = useState(company.accentColor ?? '');
+    const me = useQuery({
+        queryKey: ['me'],
+        queryFn: () => api.call('GET', '/api/v1/auth/me'),
+    });
+    const logo = useMutation({
+        mutationFn: (image) => image === null
+            ? api.call('DELETE', `/api/v1/images/company/${company.id}`)
+            : api.call('PUT', `/api/v1/images/company/${company.id}`, { image }),
+        // The sidebar and the switcher show the logo from the user's details.
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['me'] }),
+    });
     // Only the details changed are sent.
     const [details, setDetails] = useState({});
     const save = useMutation({
@@ -81,7 +92,7 @@ function CompanyForm({ api, company }) {
     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('company.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('company.intro') })] }), _jsxs("form", { className: "grid gap-6", onSubmit: (e) => {
                     e.preventDefault();
                     save.mutate();
-                }, children: [_jsxs("section", { className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsx("h2", { className: "font-semibold", children: t('company.identity') }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-name`, children: t('company.name') }), _jsx(Input, { id: `${id}-name`, value: name, required: true, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-grouping`, children: t('company.grouping') }), _jsx(Select, { id: `${id}-grouping`, label: t('company.grouping'), value: grouping, options: [
+                }, children: [_jsxs("section", { className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsx("h2", { className: "font-semibold", children: t('company.identity') }), _jsx(ImagePicker, { name: name, src: imageUrl('company', company.id, me.data?.logos?.[String(company.id)]), fit: "logo", busy: logo.isPending, onChoose: (image) => logo.mutate(image), onRemove: () => logo.mutate(null) }), logo.error === null ? null : (_jsx(Alert, { tone: "danger", children: logo.error instanceof ApiError ? logo.error.message : String(logo.error) })), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-name`, children: t('company.name') }), _jsx(Input, { id: `${id}-name`, value: name, required: true, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-grouping`, children: t('company.grouping') }), _jsx(Select, { id: `${id}-grouping`, label: t('company.grouping'), value: grouping, options: [
                                             { value: 'international', label: t('company.international') },
                                             { value: 'lakh', label: t('company.lakh') },
                                         ], onChange: (v) => setGrouping(v === 'lakh' ? 'lakh' : 'international') })] })] }), company.details.length === 0 ? null : (_jsxs("section", { className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold", children: t('company.details') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('company.detailsHint', { currency: company.currency }) })] }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: company.details.map((d) => (_jsx(DetailField, { detail: d, value: d.key in details ? details[d.key] : d.value, onChange: (v) => setDetails((all) => ({ ...all, [d.key]: v })) }, d.key))) })] })), _jsxs("section", { className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold", children: t('company.brand') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('company.brandHint') })] }), _jsxs("fieldset", { className: "grid gap-3", children: [_jsx("legend", { className: "sr-only", children: t('company.brand') }), _jsx("div", { className: "flex flex-wrap gap-2", children: SWATCHES.map((swatch) => (_jsx("button", { type: "button", "aria-label": swatch, "aria-pressed": color === swatch, onClick: () => pick(swatch), className: "grid size-8 place-items-center rounded-full border-2 border-surface ring-1 ring-border", style: { background: swatch }, children: color === swatch ? _jsx(Check, { className: "size-4 text-white", "aria-hidden": true }) : null }, swatch))) }), _jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-hex`, children: t('company.hex') }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", "aria-label": t('company.picker'), value: color ?? '#4f46e5', onChange: (e) => pick(e.target.value), className: "size-9 cursor-pointer rounded-md border bg-surface p-1" }), _jsx(Input, { id: `${id}-hex`, className: "w-32 font-mono", value: typed, placeholder: "#4f46e5", "aria-invalid": typed !== '' && !HEX.test(typed) ? true : undefined, onChange: (e) => {

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

@@ -0,0 +1,7 @@
+/**
+ * Connected apps (RFC 0017 §5.2), from the account menu: the apps you allowed to act for you through OAuth, what each
+ * may do in words, when it last did, and *Remove access* — which ends every token the app holds for you at once.
+ */
+import { type PageProps } from '../../ui/index.js';
+import type { ReactElement } from 'react';
+export declare function ConnectedAppsPage({ api }: PageProps): ReactElement;

package/dist/settings/web/ConnectedAppsPage.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Connected apps (RFC 0017 §5.2), from the account menu: the apps you allowed to act for you through OAuth, what each
+ * may do in words, when it last did, and *Remove access* — which ends every token the app holds for you at once.
+ */
+import { Alert, ApiError, Button, useKosh } from '../../ui/index.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ExternalLink, Plug } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+export function ConnectedAppsPage({ api }) {
+    const { t } = useTranslation('settings');
+    const { format } = useKosh();
+    const queryClient = useQueryClient();
+    const grants = useQuery({
+        queryKey: ['oauth', 'grants'],
+        queryFn: () => api.call('GET', '/api/v1/auth/oauth/grants'),
+    });
+    const revoke = useMutation({
+        mutationFn: (id) => api.call('POST', `/api/v1/auth/oauth/grants/${id}/revoke`),
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['oauth', 'grants'] }),
+    });
+    const error = grants.error ?? revoke.error;
+    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('connected.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('connected.intro') })] }), error === null ? null : (_jsx(Alert, { tone: "danger", children: error instanceof ApiError ? error.message : String(error) })), grants.data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : grants.data.grants.length === 0 ? (_jsx("p", { className: "rounded-lg border bg-surface p-6 text-center text-sm text-muted-foreground", children: t('connected.none') })) : (_jsx("ul", { className: "grid gap-3", children: grants.data.grants.map((g) => (_jsxs("li", { className: "flex flex-wrap items-start gap-3 rounded-lg border bg-surface p-4", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Plug, { className: "size-4" }) }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsxs("p", { className: "flex items-center gap-2 font-medium", children: [g.app, g.homepage === null ? null : (_jsx("a", { href: g.homepage, target: "_blank", rel: "noreferrer noopener", "aria-label": t('connected.homepage', { app: g.app }), className: "text-muted-foreground hover:text-foreground", children: _jsx(ExternalLink, { className: "size-3.5", "aria-hidden": true }) }))] }), _jsx("ul", { className: "flex flex-wrap gap-x-3 text-sm text-muted-foreground", children: g.scopes.map((s) => (_jsx("li", { children: s.label }, s.scope))) }), _jsx("p", { className: "text-xs text-muted-foreground", children: [
+                                        g.createdAt === null
+                                            ? null
+                                            : t('connected.since', { when: format.date(g.createdAt.slice(0, 10)) }),
+                                        g.lastUsedAt === null
+                                            ? t('connected.neverUsed')
+                                            : t('connected.lastUsed', { when: format.datetime(g.lastUsedAt) }),
+                                    ]
+                                        .filter((x) => x !== null)
+                                        .join(' · ') })] }), _jsx(Button, { size: "sm", variant: "danger", busy: revoke.isPending && revoke.variables === g.id, onClick: () => revoke.mutate(g.id), "aria-label": t('connected.revokeApp', { app: g.app }), children: t('connected.revoke') })] }, g.id))) }))] }));
+}

package/dist/settings/web/OverviewPage.js

@@ -12,15 +12,39 @@ import { Search, UserRound } from 'lucide-react';
 import { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 const normalise = (s) => s.toLocaleLowerCase().normalize('NFKD');
+/** Each section's icon (AppIcon names); a module's own section shows the Settings gear. */
+const SECTION_ICONS = {
+    'settings.action_company': 'company',
+    'settings.action_companies': 'companies',
+    'settings.action_people': 'users',
+    'settings.action_roles': 'shield',
+    'settings.action_security': 'security',
+    'settings.action_audit': 'audit',
+    'settings.action_apps': 'apps',
+    'settings.action_app_settings': 'settings',
+    'assistant.action_settings': 'assistant',
+};
 export function OverviewPage({ api }) {
     const { t } = useTranslation('settings');
     const id = useId();
     const [query, setQuery] = useState('');
     const menus = useQuery({ queryKey: ['menus', 'settings'], queryFn: () => api.menus('settings') });
-    const about = (action) => ({
-        description: t(`overview.about.${action}.description`, { defaultValue: '' }),
-        keywords: t(`overview.about.${action}.keywords`, { defaultValue: '' }),
+    // The apps' own settings (RFC 0020): their sections' words make App settings findable by them.
+    const appSettings = useQuery({
+        queryKey: ['settings', 'app-settings'],
+        queryFn: () => api.call('GET', '/api/v1/settings/app-settings'),
     });
+    const about = (action) => {
+        const words = action === 'settings.action_app_settings'
+            ? (appSettings.data?.apps ?? [])
+                .flatMap((a) => [a.label, ...a.sections.flatMap((s) => [s.label, s.keywords])])
+                .join(' ')
+            : '';
+        return {
+            description: t(`overview.about.${action}.description`, { defaultValue: '' }),
+            keywords: `${t(`overview.about.${action}.keywords`, { defaultValue: '' })} ${words}`,
+        };
+    };
     const entry = (n) => n.action === undefined || n.action === 'settings.action_overview'
         ? null
         : { label: n.label, action: n.action, ...about(n.action) };
@@ -62,5 +86,5 @@ export function OverviewPage({ api }) {
     const showProfile = matches(profile);
     return (_jsxs("div", { className: "mx-auto grid max-w-4xl gap-6", children: [_jsxs("header", { className: "grid gap-3", children: [_jsx("h1", { className: "text-2xl font-semibold", children: t('overview.title') }), _jsxs("div", { className: "relative", 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('overview.search') }), _jsx("input", { id: `${id}-q`, type: "search", 
                                 // biome-ignore lint/a11y/noAutofocus: the page is a search first; it opens on purpose
-                                autoFocus: true, value: query, placeholder: t('overview.search'), onChange: (e) => setQuery(e.target.value), className: "h-11 w-full rounded-lg border border-input bg-surface ps-10 pe-3 text-base shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" })] })] }), shown.length === 0 && !showProfile ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('overview.nothing', { query }) })) : null, shown.map((g) => (_jsxs("section", { "aria-labelledby": `${id}-${g.id}`, className: "grid gap-2", children: [_jsx("h2", { id: `${id}-${g.id}`, className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: g.label }), _jsx("ul", { className: "grid gap-3 sm:grid-cols-2", children: g.entries.map((e) => card(e, _jsxs(Link, { to: "/$app/a/$action", params: { app: 'settings', action: e.action }, className: "flex h-full items-start gap-3 rounded-lg border bg-surface p-4 hover:border-primary/40 hover:bg-accent/40", children: [_jsx(AppIcon, { name: "settings", className: "size-9" }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: e.label }), e.description === '' ? null : (_jsx("span", { className: "text-sm text-muted-foreground", children: e.description }))] })] }))) })] }, g.id))), showProfile ? (_jsxs("section", { "aria-labelledby": `${id}-you`, className: "grid gap-2", children: [_jsx("h2", { id: `${id}-you`, className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: t('overview.you') }), _jsx("ul", { className: "grid gap-3 sm:grid-cols-2", children: card(profile, _jsxs(Link, { to: "/me/$page", params: { page: 'settings.Profile' }, className: "flex h-full items-start gap-3 rounded-lg border bg-surface p-4 hover:border-primary/40 hover:bg-accent/40", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-lg bg-accent text-accent-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: profile.label }), _jsx("span", { className: "text-sm text-muted-foreground", children: profile.description })] })] })) })] })) : null] }));
+                                autoFocus: true, value: query, placeholder: t('overview.search'), onChange: (e) => setQuery(e.target.value), className: "h-11 w-full rounded-lg border border-input bg-surface ps-10 pe-3 text-base shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" })] })] }), shown.length === 0 && !showProfile ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('overview.nothing', { query }) })) : null, shown.map((g) => (_jsxs("section", { "aria-labelledby": `${id}-${g.id}`, className: "grid gap-2", children: [_jsx("h2", { id: `${id}-${g.id}`, className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: g.label }), _jsx("ul", { className: "grid gap-3 sm:grid-cols-2", children: g.entries.map((e) => card(e, _jsxs(Link, { to: "/$app/a/$action", params: { app: 'settings', action: e.action }, className: "flex h-full items-start gap-3 rounded-lg border bg-surface p-4 hover:border-primary/40 hover:bg-accent/40", children: [_jsx(AppIcon, { name: SECTION_ICONS[e.action] ?? 'settings', className: "size-9" }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: e.label }), e.description === '' ? null : (_jsx("span", { className: "text-sm text-muted-foreground", children: e.description }))] })] }))) })] }, g.id))), showProfile ? (_jsxs("section", { "aria-labelledby": `${id}-you`, className: "grid gap-2", children: [_jsx("h2", { id: `${id}-you`, className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: t('overview.you') }), _jsx("ul", { className: "grid gap-3 sm:grid-cols-2", children: card(profile, _jsxs(Link, { to: "/me/$page", params: { page: 'settings.Profile' }, className: "flex h-full items-start gap-3 rounded-lg border bg-surface p-4 hover:border-primary/40 hover:bg-accent/40", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-lg bg-accent text-accent-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: profile.label }), _jsx("span", { className: "text-sm text-muted-foreground", children: profile.description })] })] })) })] })) : null] }));
 }