portal-mojo 0.1.0

package/src/admin/identity/users/sections/AuditSection.tsx

@@ -0,0 +1,190 @@
+// Audit — UserAuditSection port (read in full 2026-08-05): the
+// disable-history accordion (metadata.protected.disable.history — ISO `at`
+// stamps per services/disable.py) over three day-grouped, searchable,
+// pageSize-5 feeds:
+//   Activity  — /api/logs?uid=<id>            (everything the user did)
+//   Events    — /api/incident/event?model_name=account.User&model_id=<id>
+//   Audit Log — /api/logs?model_name=account.User&model_id=<id>
+//               (changes made TO the record)
+// Log and incident tabs are independently system-gated. A denied feed never
+// mounts and therefore cannot issue a background request.
+import { useEffect, useState } from 'react';
+import { Badge, Eyebrow, fmt } from '../../../../ui';
+import { LogModel, type LogRow } from '../../../monitoring';
+import { EventModel } from '../../../incidents';
+import type { UserRow } from '../models';
+import {
+    DISABLE_REASON_BADGES, disableBlock, groupRowsByDay,
+    LOG_LEVEL_ICON, LOG_LEVEL_TONE,
+    Pager, SectionSearch, SectionTabs, useSectionList,
+} from './shared';
+
+// ── Disable-history accordion ─────────────────────────────────────────
+
+function DisableHistory({ user }: { user: UserRow }) {
+    const history = disableBlock(user)?.history;
+    if (!Array.isArray(history) || history.length === 0) return null;
+    return (
+        <>
+            <Eyebrow>Disable history</Eyebrow>
+            <div className="us-history">
+                {history.map((entry, idx) => {
+                    const badge = (entry.reason && DISABLE_REASON_BADGES[entry.reason]) || { label: 'Inactive', tone: 'muted' as const };
+                    return (
+                        <details key={idx} className="us-history-item">
+                            <summary>
+                                <Badge tone={badge.tone}>{badge.label}</Badge>
+                                <span className="dim">{entry.at ? fmt.relative(entry.at) : ''}</span>
+                                {entry.by_username && <span>by <code>{entry.by_username}</code></span>}
+                                {entry.reactivated_at && <span className="chip chip-muted us-history-flag">Reactivated</span>}
+                                <i className="bi bi-chevron-down us-history-chev" />
+                            </summary>
+                            <div className="us-history-body">
+                                <div><strong>Disabled:</strong> {entry.at ? fmt.datetime(entry.at) : '—'}</div>
+                                {entry.note && <div><strong>Note:</strong> {entry.note}</div>}
+                                {entry.reactivated_at && (
+                                    <div className="us-history-react">
+                                        <div>
+                                            <strong>Reactivated:</strong> {fmt.datetime(entry.reactivated_at)}
+                                            {entry.reactivated_by_username && <> by <code>{entry.reactivated_by_username}</code></>}
+                                        </div>
+                                        {entry.reactivated_note && <div><strong>Note:</strong> {entry.reactivated_note}</div>}
+                                    </div>
+                                )}
+                            </div>
+                        </details>
+                    );
+                })}
+            </div>
+        </>
+    );
+}
+
+// ── Feed rows ─────────────────────────────────────────────────────────
+
+function LogFeedRow({ log, showPath }: { log: LogRow; showPath: boolean }) {
+    const tone = LOG_LEVEL_TONE[(log.level ?? '').toLowerCase()] ?? 'muted';
+    const icon = LOG_LEVEL_ICON[(log.level ?? '').toLowerCase()] ?? 'bi-circle';
+    return (
+        <div className={`us-audit-row tone-${tone}`}>
+            <div className="us-row-icon"><i className={`bi ${icon}`} /></div>
+            <div className="us-row-info">
+                <div className="us-row-title">{log.kind || log.level || 'event'}</div>
+                <div className="us-row-meta">{log.log || '(no message)'}</div>
+                {showPath && log.path && <div className="us-row-path"><code>{log.path}</code></div>}
+            </div>
+            <span className="us-row-when" title={fmt.datetime(log.created)}>{fmt.relative(log.created)}</span>
+        </div>
+    );
+}
+
+function LogsTab({ params, placeholder, empty, showPath }: {
+    params: Record<string, string | number>;
+    placeholder: string;
+    empty: string;
+    showPath: boolean;
+}) {
+    const list = useSectionList(5, { ...params, sort: '-created' });
+    const { data, isPending, isError, error } = LogModel.useList(list.params);
+    const rows = data?.rows ?? [];
+    const groups = groupRowsByDay(rows, (l) => l.created);
+    return (
+        <>
+            <div className="us-list-head">
+                <SectionSearch state={list} placeholder={placeholder} />
+            </div>
+            {isPending && <p className="dim">Loading…</p>}
+            {isError && <p className="dim">{error instanceof Error ? error.message : 'Failed to load.'}</p>}
+            {!isPending && !isError && rows.length === 0 && (
+                <div className="us-empty"><i className="bi bi-clock-history" /><div>{empty}</div></div>
+            )}
+            {groups.map((g) => (
+                <div key={g.label}>
+                    <div className="us-day-head">{g.label}</div>
+                    {g.rows.map((l) => <LogFeedRow key={l.id} log={l} showPath={showPath} />)}
+                </div>
+            ))}
+            <Pager state={list} count={data?.count ?? 0} />
+        </>
+    );
+}
+
+function EventsTab({ user }: { user: UserRow }) {
+    const list = useSectionList(5, { model_name: 'account.User', model_id: user.id, sort: '-created' });
+    const { data, isPending, isError, error } = EventModel.useList(list.params);
+    const rows = data?.rows ?? [];
+    const groups = groupRowsByDay(rows, (e) => e.created);
+    return (
+        <>
+            <div className="us-list-head">
+                <SectionSearch state={list} placeholder="Search events…" />
+            </div>
+            {isPending && <p className="dim">Loading…</p>}
+            {isError && <p className="dim">{error instanceof Error ? error.message : 'Failed to load.'}</p>}
+            {!isPending && !isError && rows.length === 0 && (
+                <div className="us-empty"><i className="bi bi-shield-exclamation" /><div>No events for this user.</div></div>
+            )}
+            {groups.map((g) => (
+                <div key={g.label}>
+                    <div className="us-day-head">{g.label}</div>
+                    {g.rows.map((e) => (
+                        <div key={e.id} className="us-audit-row tone-info">
+                            <div className="us-row-icon"><i className="bi bi-shield-exclamation" /></div>
+                            <div className="us-row-info">
+                                <div className="us-row-title">{e.title || e.category || 'event'}</div>
+                                {e.details && <div className="us-row-meta">{e.details}</div>}
+                                {e.category && <div className="us-row-path"><span className="chip chip-muted">{e.category}</span></div>}
+                            </div>
+                            <span className="us-row-when" title={fmt.datetime(e.created)}>{fmt.relative(e.created)}</span>
+                        </div>
+                    ))}
+                </div>
+            ))}
+            <Pager state={list} count={data?.count ?? 0} />
+        </>
+    );
+}
+
+// ── The section ───────────────────────────────────────────────────────
+
+export function AuditSection({ user, canLogs, canEvents }: { user: UserRow; canLogs: boolean; canEvents: boolean }) {
+    const [tab, setTab] = useState(canLogs ? 'activity' : 'events');
+    const tabs = [
+        ...(canLogs ? [{ key: 'activity', label: 'Activity' }, { key: 'audit', label: 'Audit Log' }] : []),
+        ...(canEvents ? [{ key: 'events', label: 'Events' }] : []),
+    ];
+    useEffect(() => {
+        const visible = (tab === 'events' && canEvents) || (tab !== 'events' && canLogs);
+        if (!visible) setTab(canLogs ? 'activity' : 'events');
+    }, [canEvents, canLogs, tab]);
+    return (
+        <>
+            <DisableHistory user={user} />
+            <Eyebrow>Audit</Eyebrow>
+            <SectionTabs
+                tabs={tabs}
+                active={tab}
+                onSelect={setTab}
+            />
+            {/* Tabs stay mounted-but-hidden so page/search state survives a
+                tab switch (web-mojo TabView keep-alive semantic). */}
+            {canLogs && <div hidden={tab !== 'activity'}>
+                <LogsTab
+                    params={{ uid: user.id }}
+                    placeholder="Search activity…"
+                    empty="No activity recorded yet."
+                    showPath
+                />
+            </div>}
+            {canEvents && <div hidden={tab !== 'events'}><EventsTab user={user} /></div>}
+            {canLogs && <div hidden={tab !== 'audit'}>
+                <LogsTab
+                    params={{ model_name: 'account.User', model_id: user.id }}
+                    placeholder="Search audit log…"
+                    empty="No record changes logged."
+                    showPath={false}
+                />
+            </div>}
+        </>
+    );
+}

package/src/admin/identity/users/sections/DevicesSection.tsx

@@ -0,0 +1,140 @@
+// Devices — UserDevicesSection port (read in full 2026-08-05): two tabs,
+// each a searchable pageSize-5 server list.
+//
+//   Browser — /api/user/device?user=<id>: rows carry the ua-parser
+//     device_info block (user_agent.family+major · os.family+major), a
+//     day-relative last_seen and the DUID truncated in the middle — the
+//     source row template, verbatim.
+//   Push — /api/account/devices/push?user=<id>: the REAL RegisteredDevice
+//     shape (platform / device_name / os_version / app_version /
+//     push_enabled) — web-mojo's template bound a device_info block that
+//     this backend never serializes; the row binds the live fields instead.
+import { useEffect, useState } from 'react';
+import { Badge, Eyebrow, fmt } from '../../../../ui';
+import { showUserDeviceDetail } from '../../../security/devices/UserDeviceDetail';
+import { DeviceModel, PushDeviceModel, type UserRow } from '../models';
+import { lastSeenLabel, Pager, SectionSearch, SectionTabs, useSectionList } from './shared';
+
+const PLATFORM_ICON: Record<string, string> = {
+    ios: 'bi-apple',
+    android: 'bi-android2',
+    web: 'bi-globe2',
+};
+
+function BrowserTab({ user, enabled }: { user: UserRow; enabled: boolean }) {
+    const list = useSectionList(5, { user: user.id, sort: '-last_seen' });
+    const { data, isPending } = DeviceModel.useList(list.params, { enabled });
+    const rows = data?.rows ?? [];
+    return (
+        <>
+            <div className="us-list-head">
+                <SectionSearch state={list} placeholder="Search browser devices…" />
+            </div>
+            {isPending && <p className="dim">Loading…</p>}
+            {!isPending && rows.length === 0 && (
+                <div className="us-empty"><i className="bi bi-laptop" /><div>No browser devices on file.</div></div>
+            )}
+            {rows.map((d) => {
+                const ua = d.device_info;
+                const browser = ua?.user_agent.family || 'Unknown browser';
+                const browserMajor = ua?.user_agent.major ?? '';
+                const os = ua?.os.family || 'Unknown OS';
+                const osMajor = ua?.os.major ?? '';
+                return (
+                    // Clickable since #1291: the full device dossier
+                    // (locations, logins, sessions, cross-account sharing)
+                    // lives in admin/security/devices and opens as a KISS
+                    // modal over this one.
+                    <button
+                        key={d.id}
+                        type="button"
+                        className="us-device-row"
+                        onClick={() => showUserDeviceDetail(d.id)}
+                        title="Open device details"
+                    >
+                        <span className="us-row-icon"><i className="bi bi-laptop" /></span>
+                        <span className="us-row-info">
+                            <span className="us-row-title">
+                                {browser} {browserMajor} · {os} {osMajor}
+                            </span>
+                            <span className="us-row-meta">
+                                {lastSeenLabel(d.last_seen)}
+                                {d.duid && <> · <code title={d.duid}>{fmt.truncateMiddle(d.duid, 8, '…')}</code></>}
+                                {d.last_ip && <> · {d.last_ip}</>}
+                            </span>
+                        </span>
+                        <Badge tone="info">Browser</Badge>
+                    </button>
+                );
+            })}
+            <Pager state={list} count={data?.count ?? 0} />
+        </>
+    );
+}
+
+function PushTab({ user, enabled }: { user: UserRow; enabled: boolean }) {
+    const list = useSectionList(5, { user: user.id, sort: '-last_seen' });
+    const { data, isPending } = PushDeviceModel.useList(list.params, { enabled });
+    const rows = data?.rows ?? [];
+    return (
+        <>
+            <div className="us-list-head">
+                <SectionSearch state={list} placeholder="Search push devices…" />
+            </div>
+            {isPending && <p className="dim">Loading…</p>}
+            {!isPending && rows.length === 0 && (
+                <div className="us-empty"><i className="bi bi-bell" /><div>No push devices on file.</div></div>
+            )}
+            {rows.map((d) => (
+                <div key={d.id} className="us-device-row">
+                    <div className="us-row-icon"><i className={`bi ${PLATFORM_ICON[d.platform] ?? 'bi-bell'}`} /></div>
+                    <div className="us-row-info">
+                        <div className="us-row-title">
+                            {d.device_name || d.device_id}
+                            {d.os_version && <span className="dim"> · {d.platform} {d.os_version}</span>}
+                        </div>
+                        <div className="us-row-meta">
+                            {lastSeenLabel(d.last_seen)}
+                            {d.app_version && <> · app {d.app_version}</>}
+                            {' · '}<code title={d.device_id}>{fmt.truncateMiddle(d.device_id, 8, '…')}</code>
+                        </div>
+                    </div>
+                    <Badge tone={d.push_enabled ? 'primary' : 'muted'}>
+                        <i className="bi bi-bell" /> {d.push_enabled ? 'Push' : 'Push off'}
+                    </Badge>
+                </div>
+            ))}
+            <Pager state={list} count={data?.count ?? 0} />
+        </>
+    );
+}
+
+export function DevicesSection({ user, counts, canBrowser, canPush }: {
+    user: UserRow;
+    counts: { browser: number; push: number };
+    canBrowser: boolean;
+    canPush: boolean;
+}) {
+    const [tab, setTab] = useState(canBrowser ? 'browser' : 'push');
+    useEffect(() => {
+        if (tab === 'browser' && !canBrowser) setTab('push');
+        if (tab === 'push' && !canPush) setTab('browser');
+    }, [canBrowser, canPush, tab]);
+    return (
+        <>
+            <Eyebrow>Devices &amp; sessions</Eyebrow>
+            <SectionTabs
+                tabs={[
+                    ...(canBrowser ? [{ key: 'browser', label: 'Browser', badge: counts.browser || null }] : []),
+                    ...(canPush ? [{ key: 'push', label: 'Push', badge: counts.push || null }] : []),
+                ]}
+                active={tab}
+                onSelect={setTab}
+            />
+            {/* Tabs stay mounted-but-hidden so page/search state survives a
+                tab switch (web-mojo TabView keep-alive semantic). */}
+            {canBrowser && <div hidden={tab !== 'browser'}><BrowserTab user={user} enabled={canBrowser} /></div>}
+            {canPush && <div hidden={tab !== 'push'}><PushTab user={user} enabled={canPush} /></div>}
+        </>
+    );
+}

package/src/admin/identity/users/sections/GroupsSection.tsx

@@ -0,0 +1,64 @@
+// Groups — the source's ListView-of-MemberList scoped to this user (read in
+// full 2026-08-05): group-membership cards (name + kind badge + joined date)
+// with the per-group permission keys as chips below, server search
+// (SEARCH_FIELDS sweep user__username/email/display_name — search here
+// narrows by the group side too on the mock) and pageSize-5 paging. Row
+// click opens the group's detail, stacked.
+import { Badge, fmt } from '../../../../ui';
+import { MemberModel } from '../../members';
+import type { UserRow } from '../models';
+import { Pager, SectionSearch, useSectionList } from './shared';
+
+export function GroupsSection({ user, onOpenGroup }: { user: UserRow; onOpenGroup?: (groupId: number) => void }) {
+    const list = useSectionList(5, { user: user.id, sort: '-created' });
+    const { data, isPending } = MemberModel.useList(list.params);
+    const rows = data?.rows ?? [];
+
+    return (
+        <>
+            <div className="us-list-head">
+                <SectionSearch state={list} placeholder="Search groups…" />
+            </div>
+            {isPending && <p className="dim">Loading…</p>}
+            {!isPending && rows.length === 0 && (
+                <div className="us-empty">
+                    <i className="bi bi-people" />
+                    <div>{list.search ? 'No memberships match this search.' : 'This user has no group memberships.'}</div>
+                </div>
+            )}
+            {rows.map((m) => {
+                const grants = Object.entries(m.permissions ?? {})
+                    .filter(([, v]) => v === true || v === 1)
+                    .map(([k]) => k);
+                const content = (
+                    <>
+                        <div className="us-feed-top">
+                            <strong>{m.group?.name ?? '—'}</strong>
+                            {m.group?.kind && <Badge tone="muted">{m.group.kind}</Badge>}
+                            {!m.is_active && <Badge tone="warning">Membership disabled</Badge>}
+                            <span className="us-feed-when dim">Joined {fmt.date(m.created, '—')}</span>
+                        </div>
+                        {grants.length > 0 && (
+                            <div className="us-feed-body chip-row">
+                                {grants.map((g) => <span key={g} className="chip chip-muted">{g}</span>)}
+                            </div>
+                        )}
+                    </>
+                );
+                return onOpenGroup && m.group?.id ? (
+                    <button
+                        key={m.id}
+                        type="button"
+                        className="us-feed-row"
+                        onClick={() => onOpenGroup(m.group!.id)}
+                    >
+                        {content}
+                    </button>
+                ) : (
+                    <div key={m.id} className="us-feed-row">{content}</div>
+                );
+            })}
+            <Pager state={list} count={data?.count ?? 0} />
+        </>
+    );
+}

package/src/admin/identity/users/sections/LoginsSection.tsx

@@ -0,0 +1,106 @@
+// Logins — the source's Locations section (read in full 2026-08-05).
+//
+// ── THE MAP TAB IS NOW SHIPPED (#1291) ───────────────────────────────
+// This file previously carried an explicit deviation note: web-mojo's
+// Locations section opened on a MapLibre map with the login list as the
+// second tab, and portal-mojo shipped the list alone because "no map
+// library". That seam is CLOSED — #1426's WorldMap is a dependency-free SVG
+// rebuild, so the Map tab mounts here exactly as the source had it, with the
+// same wire (`/api/account/logins/user?user_id=`) and zero new dependencies.
+//
+// The Map tab is present only when the caller can read the aggregation
+// endpoint; absent, it issues NO request at all rather than a denied one.
+import { useState } from 'react';
+import { Eyebrow, fmt } from '../../../../ui';
+import { useCan } from '../../../../client';
+import { LoginLocationMap } from '../../../security/devices/LoginLocationMap';
+import { showLoginEventDetail } from '../../../security/devices/LoginEventDetail';
+import { showUserDeviceDetailByDuid } from '../../../security/devices/UserDeviceDetail';
+import { LOGIN_SUMMARY_PERMS, loginRiskTone } from '../../../security/devices/models';
+import { LoginEventModel, type UserRow } from '../models';
+import { groupRowsByDay, Pager, SectionSearch, SectionTabs, useSectionList } from './shared';
+
+/** WorldMap tone → the `tone-*` class the login dot is styled with. */
+const DOT_CLASS: Record<string, string> = { bad: 'danger', warn: 'warning', ok: 'success' };
+
+function LoginList({ user }: { user: UserRow }) {
+    const list = useSectionList(5, { user: user.id, sort: '-created' });
+    const { data, isPending } = LoginEventModel.useList(list.params);
+    const rows = data?.rows ?? [];
+    const groups = groupRowsByDay(rows, (l) => l.created);
+
+    return (
+        <>
+            <div className="us-list-head">
+                <SectionSearch state={list} placeholder="Search logins…" />
+            </div>
+            {isPending && <p className="dim">Loading…</p>}
+            {!isPending && rows.length === 0 && (
+                <div className="us-empty"><i className="bi bi-geo-alt" /><div>No login events on file.</div></div>
+            )}
+            {groups.map((g) => (
+                <div key={g.label}>
+                    <div className="us-day-head">{g.label}</div>
+                    {g.rows.map((l) => {
+                        const where = [
+                            l.city ?? '—',
+                            l.region && l.region !== l.city ? l.region : null,
+                        ].filter(Boolean).join(', ');
+                        return (
+                            <button
+                                key={l.id}
+                                type="button"
+                                className="us-login-row"
+                                onClick={() => showLoginEventDetail(l.id, { onOpenDeviceByDuid: showUserDeviceDetailByDuid })}
+                            >
+                                <span className={`us-login-dot tone-${DOT_CLASS[loginRiskTone(l)] ?? 'muted'}`} />
+                                <span className="us-row-info">
+                                    <span className="us-row-title">
+                                        {where}
+                                        {l.country_code && <span className="dim"> · {l.country_code}</span>}
+                                        {l.is_new_country && <span className="chip chip-warning us-chip-sm">New country</span>}
+                                    </span>
+                                    <span className="us-row-meta">
+                                        {l.ip_address && <code>{l.ip_address}</code>}
+                                        {l.source && <> · {l.source}</>}
+                                    </span>
+                                </span>
+                                <span className="us-row-when" title={fmt.datetime(l.created)}>{fmt.relative(l.created)}</span>
+                            </button>
+                        );
+                    })}
+                </div>
+            ))}
+            <Pager state={list} count={data?.count ?? 0} />
+        </>
+    );
+}
+
+export function LoginsSection({ user }: { user: UserRow }) {
+    const canMap = useCan(LOGIN_SUMMARY_PERMS).can;
+    const [tab, setTab] = useState(canMap ? 'map' : 'logins');
+    const active = canMap ? tab : 'logins';
+
+    return (
+        <>
+            <Eyebrow>Login history</Eyebrow>
+            {canMap && (
+                <SectionTabs
+                    tabs={[{ key: 'map', label: 'Map' }, { key: 'logins', label: 'Logins' }]}
+                    active={active}
+                    onSelect={setTab}
+                />
+            )}
+            {/* The map is scoped to this user and mounts only when it can be
+                read — no denied background request when the grant is absent. */}
+            {canMap && (
+                <div hidden={active !== 'map'}>
+                    <LoginLocationMap userId={user.id} height={280} enabled={canMap} />
+                </div>
+            )}
+            {/* Kept mounted-but-hidden so page/search state survives a tab
+                switch (web-mojo TabView keep-alive semantic). */}
+            <div hidden={active !== 'logins'}><LoginList user={user} /></div>
+        </>
+    );
+}

package/src/admin/identity/users/sections/MetadataPanel.tsx

@@ -0,0 +1,36 @@
+// Metadata — two halves, both from the existing toolkit:
+//   · the editable metadata blob via ui's MetadataSection (which IS the
+//     AdminMetadataSection port — add/edit/remove, JSON-parsed values,
+//     rejected saves keep the editor open), saving through the model cache
+//     so every other section sees the new blob;
+//   · the whole-record JSON view via DataView (the source section's "JSON
+//     dump" reading) — inference-typed grid + collapsible JSON blocks.
+import { useQueryClient } from '@tanstack/react-query';
+import { DataView, Eyebrow, MetadataSection } from '../../../../ui';
+import { UserModel, type UserRow } from '../models';
+
+export function UserMetadataSection({ user, canManage }: { user: UserRow; canManage: boolean }) {
+    const qc = useQueryClient();
+    return (
+        <>
+            {canManage && <MetadataSection
+                endpoint={UserModel.endpoint}
+                id={user.id}
+                metadata={(user.metadata ?? {}) as Record<string, unknown>}
+                onSaved={(next) => {
+                    // Owner write-back: paint the new blob into the one-record
+                    // cache, then let invalidation refresh lists.
+                    qc.setQueryData(UserModel.keys.one(user.id), { ...user, metadata: next });
+                    void UserModel.invalidate(qc);
+                }}
+            />}
+
+            <Eyebrow>Raw record</Eyebrow>
+            <DataView
+                data={user as unknown as Record<string, unknown>}
+                exclude={['metadata']}
+                columns={2}
+            />
+        </>
+    );
+}

package/src/admin/identity/users/sections/NotificationsSection.tsx

@@ -0,0 +1,117 @@
+// Notifications — AdminNotificationsSection port (read in full 2026-08-05):
+// the per-kind × per-channel (In-App / Email / Push) toggle grid over
+// /api/account/notification/preferences. A toggle POSTs the PARTIAL update
+// {preferences: {kind: {channel: bool}}} optimistically and reverts on
+// failure (source semantics; absent channels read as ON — `!== false`).
+//
+// LIVE-SCOPE NOTE (django-mojo notification_prefs.py, read 2026-08-05): the
+// real handler reads request.user and IGNORES the user param — the
+// admin-views-another-user path is not a backend surface. Other-user detail
+// therefore stays explicitly unavailable and never issues this query.
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { mojoCall, useMe } from '../../../../client';
+import { Eyebrow, toast } from '../../../../ui';
+import type { UserRow } from '../models';
+
+const CHANNELS = ['in_app', 'email', 'push'] as const;
+const CHANNEL_LABELS: Record<string, string> = {
+    in_app: 'In-App',
+    email: 'Email',
+    push: 'Push',
+};
+
+type Preferences = Record<string, Record<string, boolean>>;
+
+const prefsKey = (userId: number) => ['/api/account/notification/preferences', userId] as const;
+
+export function NotificationsSection({ user }: { user: UserRow }) {
+    const qc = useQueryClient();
+    const { data: me } = useMe();
+    const isSelf = me?.id === user.id;
+    const { data: prefs, isPending, isError, error } = useQuery<Preferences>({
+        queryKey: prefsKey(user.id),
+        queryFn: async () => {
+            const body = await mojoCall('/api/account/notification/preferences');
+            const data = body.data as { preferences?: Preferences } | undefined;
+            return data?.preferences ?? {};
+        },
+        enabled: isSelf,
+    });
+
+    const toggle = async (kind: string, channel: string, next: boolean) => {
+        // Optimistic write into the query cache; revert + toast on rejection.
+        const prev = qc.getQueryData<Preferences>(prefsKey(user.id)) ?? {};
+        qc.setQueryData<Preferences>(prefsKey(user.id), {
+            ...prev,
+            [kind]: { ...(prev[kind] ?? {}), [channel]: next },
+        });
+        try {
+            await mojoCall('/api/account/notification/preferences', {
+                method: 'POST',
+                body: { preferences: { [kind]: { [channel]: next } } },
+            });
+        } catch (err) {
+            qc.setQueryData(prefsKey(user.id), prev);
+            toast.error(err instanceof Error ? err.message : 'Failed to update preference');
+        }
+    };
+
+    const kinds = Object.keys(prefs ?? {}).sort();
+    const kindLabel = (kind: string) =>
+        kind.replace(/[_-]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+    return (
+        <>
+            <Eyebrow>Notification preferences</Eyebrow>
+            {!isSelf && (
+                <div className="us-empty">
+                    <i className="bi bi-lock" />
+                    <div>Notification preferences are caller-only and cannot be administered for another user.</div>
+                </div>
+            )}
+            {isSelf && <>
+            {isPending && <p className="dim">Loading…</p>}
+            {isError && <p className="dim">{error instanceof Error ? error.message : 'Failed to load preferences.'}</p>}
+            {!isPending && !isError && kinds.length === 0 && (
+                <div className="us-empty">
+                    <i className="bi bi-bell" />
+                    <div>No notification preferences configured</div>
+                </div>
+            )}
+            {kinds.length > 0 && (
+                <table className="us-prefs-table">
+                    <thead>
+                        <tr>
+                            <th>Type</th>
+                            {CHANNELS.map((ch) => <th key={ch}>{CHANNEL_LABELS[ch]}</th>)}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {kinds.map((kind) => (
+                            <tr key={kind}>
+                                <td>{kindLabel(kind)}</td>
+                                {CHANNELS.map((ch) => {
+                                    // Absent channel == enabled (source `!== false`).
+                                    const checked = prefs?.[kind]?.[ch] !== false;
+                                    return (
+                                        <td key={ch}>
+                                            <input
+                                                type="checkbox"
+                                                role="switch"
+                                                className="switch"
+                                                checked={checked}
+                                                aria-label={`${kindLabel(kind)} via ${CHANNEL_LABELS[ch]}`}
+                                                onChange={(e) => void toggle(kind, ch, e.target.checked)}
+                                            />
+                                        </td>
+                                    );
+                                })}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            )}
+            </>}
+        </>
+    );
+}