portal-mojo 0.1.0

package/src/admin/credentials/secret-dialog.tsx

@@ -0,0 +1,77 @@
+import { useState, type ReactNode } from 'react';
+import { modal } from '../../ui';
+
+async function copyText(value: string): Promise<boolean> {
+    try {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(value);
+            return true;
+        }
+    } catch {
+        // Fall through for insecure contexts.
+    }
+    try {
+        const input = document.createElement('textarea');
+        input.value = value;
+        input.style.position = 'fixed';
+        input.style.opacity = '0';
+        document.body.appendChild(input);
+        input.select();
+        const copied = document.execCommand('copy');
+        input.remove();
+        return copied;
+    } catch {
+        return false;
+    }
+}
+
+export function SecretBox({ secret, ariaLabel }: { secret: string; ariaLabel: string }) {
+    const [copied, setCopied] = useState(false);
+    return (
+        <div className="ga-secret-box">
+            <code className="ga-secret-value" aria-label={ariaLabel}>{secret}</code>
+            <button
+                type="button"
+                className="btn btn-compact"
+                title="Copy to clipboard"
+                aria-label="Copy to clipboard"
+                onClick={() => {
+                    void copyText(secret).then((ok) => {
+                        if (!ok) return;
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1600);
+                    });
+                }}
+            >
+                <i className={`bi ${copied ? 'bi-check-lg' : 'bi-clipboard'}`} /> {copied ? 'Copied' : 'Copy'}
+            </button>
+        </div>
+    );
+}
+
+export interface SecretDialogOptions {
+    title: string;
+    warning: ReactNode;
+    intro?: ReactNode;
+    secret: string;
+    ariaLabel: string;
+    footer?: ReactNode;
+}
+
+export function showSecretDialog(options: SecretDialogOptions): Promise<unknown> {
+    return modal.open((close) => (
+        <div className="modal-pad">
+            <h2 className="modal-title">{options.title}</h2>
+            {options.intro && <div className="ga-secret-intro">{options.intro}</div>}
+            <div className="ga-secret-warning" role="alert">
+                <i className="bi bi-exclamation-triangle-fill" />
+                <span>{options.warning}</span>
+            </div>
+            <SecretBox secret={options.secret} ariaLabel={options.ariaLabel} />
+            {options.footer}
+            <div className="modal-actions">
+                <button className="btn" onClick={() => close(null)}>Close</button>
+            </div>
+        </div>
+    ), { size: 'lg' });
+}

package/src/admin/credentials/webhook-subscriptions.tsx

@@ -0,0 +1,423 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCan, type PermSpec } from '../../client';
+import {
+    ArmedButton, Badge, DetailView, Eyebrow, FlatRow, ModelTable,
+    SchemaForm, fmt, modal, toast,
+    type Column, type Field, type FilterDef,
+} from '../../ui';
+import {
+    GLOBAL_CREDENTIAL_PERMS, GROUP_CREDENTIAL_PERMS,
+    WebhookSubscriptionModel, fetchWebhookSecret, normalizeWebhookEvents,
+    type CredentialGroup, type WebhookSecretInfo, type WebhookSubscriptionRow,
+} from './models';
+import { showSecretDialog } from './secret-dialog';
+
+function groupId(group: WebhookSubscriptionRow['group']): number | null {
+    if (typeof group === 'number') return group;
+    return group?.id ?? null;
+}
+
+function groupLabel(group: WebhookSubscriptionRow['group']): string {
+    if (group && typeof group === 'object') return group.name;
+    return group == null ? '—' : `Group #${group}`;
+}
+
+function isoRelative(value: string | null): string {
+    if (!value) return '—';
+    const milliseconds = Date.parse(value);
+    return Number.isNaN(milliseconds) ? value : fmt.relative(Math.floor(milliseconds / 1000));
+}
+
+export function WebhookSecretPanel({ group, permission = GROUP_CREDENTIAL_PERMS }: {
+    group: CredentialGroup;
+    permission?: PermSpec;
+}) {
+    const { can } = useCan(permission);
+    const [metadata, setMetadata] = useState<Omit<WebhookSecretInfo, 'secret'> | null>(null);
+    const [busy, setBusy] = useState(false);
+
+    const reveal = async () => {
+        if (!can) return;
+        setBusy(true);
+        try {
+            const info = await fetchWebhookSecret(group.id);
+            setMetadata({ created_at: info.created_at, last_rotated_at: info.last_rotated_at });
+            await showSecretDialog({
+                title: 'Webhook signing secret',
+                warning: 'This explicit reveal may mint the first secret. Store it securely.',
+                secret: info.secret,
+                ariaLabel: 'Webhook signing secret',
+                footer: <div className="ga-secret-footnote dim">Consumers use this value to verify webhook signatures.</div>,
+            });
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Failed to reveal webhook secret');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const rotate = async () => {
+        if (!can) return;
+        const confirmed = await modal.confirm({
+            title: 'Rotate webhook secret',
+            message: 'Rotation immediately invalidates the old secret. Consumers fail verification until updated. Continue?',
+            confirmText: 'Rotate',
+            danger: true,
+        });
+        if (!confirmed) return;
+        setBusy(true);
+        try {
+            const info = await fetchWebhookSecret(group.id, true);
+            setMetadata({ created_at: info.created_at, last_rotated_at: info.last_rotated_at });
+            await showSecretDialog({
+                title: 'Secret rotated — save the new value',
+                warning: 'The old secret is already invalid. Store this replacement now.',
+                secret: info.secret,
+                ariaLabel: 'Webhook signing secret',
+            });
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Failed to rotate webhook secret');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <div className="ga-secret-panel">
+            <div className="ga-secret-panel-info">
+                <div className="ga-secret-panel-title"><i className="bi bi-key" /> Signing secret</div>
+                <div className="dim">
+                    {metadata
+                        ? <>Created <b>{isoRelative(metadata.created_at)}</b> · Last rotated <b>{isoRelative(metadata.last_rotated_at)}</b></>
+                        : 'Not fetched — Reveal may mint the first group secret.'}
+                </div>
+            </div>
+            {can && (
+                <div className="ga-secret-panel-actions">
+                    <button className="btn btn-compact" disabled={busy} onClick={() => void reveal()}>
+                        <i className="bi bi-eye" /> Reveal Secret
+                    </button>
+                    <button className="btn btn-compact btn-danger-ghost" disabled={busy} onClick={() => void rotate()}>
+                        <i className="bi bi-arrow-clockwise" /> Rotate
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+const WEBHOOK_FIELDS: Field[] = [
+    {
+        name: 'url', type: 'text', label: 'URL', required: true,
+        placeholder: 'https://example.com/webhooks/mojo',
+        help: 'HTTPS only. Embedded credentials are rejected server-side.',
+    },
+    {
+        name: 'events', type: 'tags', label: 'Events',
+        placeholder: 'Press Enter or comma to add',
+        help: 'Free-form event names published by the emitting service.',
+    },
+    { name: 'is_active', type: 'switch', label: 'Active', help: 'Inactive subscriptions are skipped.' },
+];
+
+function useWebhookActions(permission: PermSpec) {
+    const save = WebhookSubscriptionModel.useSave();
+    const destroy = WebhookSubscriptionModel.useDelete();
+    const { can } = useCan(permission);
+
+    const createSubscription = async (fixedGroup?: CredentialGroup) => {
+        if (!can) return;
+        const result = await modal.open<Record<string, unknown> | null>((close) => (
+            <div className="modal-pad">
+                <h2 className="modal-title">Create webhook subscription</h2>
+                <SchemaForm
+                    fields={[
+                        ...WEBHOOK_FIELDS,
+                        ...(!fixedGroup ? [{
+                            name: 'group', type: 'collection', label: 'Group', required: true,
+                            endpoint: '/api/group', labelField: 'name', valueField: 'id',
+                            placeholder: 'Search groups…',
+                        } satisfies Field] : []),
+                    ]}
+                    initial={{ is_active: true }}
+                    submitText="Create subscription"
+                    onCancel={() => close(null)}
+                    onSubmit={(form) => close(form)}
+                />
+            </div>
+        ), { size: 'md' });
+        if (!result) return;
+        const group = fixedGroup?.id ?? Number(result.group);
+        if (!Number.isFinite(group) || group <= 0) {
+            toast.error('Choose a group');
+            return;
+        }
+        try {
+            await save.mutateAsync({
+                id: null,
+                changes: {
+                    group,
+                    url: String(result.url ?? ''),
+                    events: normalizeWebhookEvents(result.events),
+                    is_active: result.is_active === true,
+                },
+            });
+            toast.success('Webhook subscription created');
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Failed to create webhook subscription');
+        }
+    };
+
+    const editSubscription = async (row: WebhookSubscriptionRow) => {
+        if (!can) return;
+        const result = await modal.open<Record<string, unknown> | null>((close) => (
+            <div className="modal-pad">
+                <h2 className="modal-title">Edit webhook subscription</h2>
+                <SchemaForm
+                    fields={WEBHOOK_FIELDS}
+                    initial={{ url: row.url, events: row.events.join(','), is_active: row.is_active }}
+                    submitText="Save changes"
+                    onCancel={() => close(null)}
+                    onSubmit={(form) => close(form)}
+                />
+            </div>
+        ), { size: 'md' });
+        if (!result) return;
+        const changes: Record<string, unknown> = {};
+        const url = String(result.url ?? '');
+        const events = normalizeWebhookEvents(result.events);
+        const isActive = result.is_active === true;
+        if (url !== row.url) changes.url = url;
+        if (events.join('\u0000') !== row.events.join('\u0000')) changes.events = events;
+        if (isActive !== row.is_active) changes.is_active = isActive;
+        if (!Object.keys(changes).length) return;
+        try {
+            await save.mutateAsync({ id: row.id, changes });
+            toast.success('Webhook subscription updated');
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Failed to update webhook subscription');
+        }
+    };
+
+    const toggleSubscription = async (row: WebhookSubscriptionRow, next: boolean) => {
+        if (!can) return;
+        try {
+            await save.mutateAsync({ id: row.id, changes: { is_active: next } });
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Failed to update subscription');
+        }
+    };
+
+    const deleteSubscription = async (row: WebhookSubscriptionRow) => {
+        if (!can) return false;
+        try {
+            await destroy.mutateAsync({ id: row.id });
+            toast.success('Webhook subscription deleted');
+            return true;
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Failed to delete subscription');
+            return false;
+        }
+    };
+
+    return { canManage: can, createSubscription, editSubscription, toggleSubscription, deleteSubscription };
+}
+
+function WebhookCard({ row, actions }: {
+    row: WebhookSubscriptionRow;
+    actions: ReturnType<typeof useWebhookActions>;
+}) {
+    const [toggling, setToggling] = useState(false);
+    return (
+        <div
+            className={`ga-card-row${actions.canManage ? ' ga-click-row' : ''}`}
+            role={actions.canManage ? 'button' : undefined}
+            tabIndex={actions.canManage ? 0 : undefined}
+            onClick={actions.canManage ? () => void actions.editSubscription(row) : undefined}
+            onKeyDown={actions.canManage ? (event) => {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    void actions.editSubscription(row);
+                }
+            } : undefined}
+        >
+            <i className="bi bi-broadcast-pin ga-card-icon" />
+            <div className="ga-card-main">
+                <div className="ga-card-title">
+                    <code className="ga-url">{row.url || '—'}</code>
+                    <Badge tone={row.is_active ? 'success' : 'muted'}>{row.is_active ? 'Active' : 'Inactive'}</Badge>
+                </div>
+                <div className="chip-row">
+                    {row.events.length
+                        ? row.events.map((event) => <Badge key={event} tone="info">{event}</Badge>)
+                        : <span className="dim-italic">No events configured</span>}
+                </div>
+                <div className="dim ga-card-meta">Created {fmt.datetime(row.created)}</div>
+            </div>
+            {actions.canManage && (
+                <div className="ga-card-actions" onClick={(event) => event.stopPropagation()}>
+                    <label className="switch-inline" title="Toggle delivery">
+                        <input
+                            type="checkbox"
+                            role="switch"
+                            className="switch"
+                            checked={row.is_active}
+                            disabled={toggling}
+                            onChange={(event) => {
+                                setToggling(true);
+                                void actions.toggleSubscription(row, event.target.checked)
+                                    .finally(() => setToggling(false));
+                            }}
+                        />
+                    </label>
+                    <ArmedButton
+                        className="btn-compact"
+                        label={<i className="bi bi-trash" aria-label="Delete this subscription" />}
+                        armedLabel="Click again — deliveries stop"
+                        title="Delete this subscription"
+                        onConfirm={async () => { await actions.deleteSubscription(row); }}
+                    />
+                </div>
+            )}
+        </div>
+    );
+}
+
+function WebhookSubscriptionsContent({ group, permission }: { group: CredentialGroup; permission: PermSpec }) {
+    const { data, isPending } = WebhookSubscriptionModel.useList({ group: group.id, size: 25, sort: '-created' });
+    const actions = useWebhookActions(permission);
+    const rows = data?.rows ?? [];
+    return (
+        <>
+            <Eyebrow>Webhooks</Eyebrow>
+            <WebhookSecretPanel group={group} permission={permission} />
+            <div className="ga-section-gap" />
+            <Eyebrow>Subscriptions</Eyebrow>
+            {actions.canManage && (
+                <div className="ga-toolbar">
+                    <button className="btn btn-primary btn-compact" onClick={() => void actions.createSubscription(group)}>
+                        <i className="bi bi-broadcast" /> Create Subscription
+                    </button>
+                </div>
+            )}
+            {!isPending && rows.length === 0 && <p className="dim-italic">No webhook subscriptions yet.</p>}
+            {rows.map((row) => <WebhookCard key={row.id} row={row} actions={actions} />)}
+        </>
+    );
+}
+
+export function WebhookSubscriptionsSection({ group, permission = GROUP_CREDENTIAL_PERMS }: {
+    group: CredentialGroup;
+    permission?: PermSpec;
+}) {
+    const { can } = useCan(permission);
+    if (!can) return <p className="dim-italic">Webhooks are unavailable for this account.</p>;
+    return <WebhookSubscriptionsContent group={group} permission={permission} />;
+}
+
+export function WebhookSubscriptionDetail({ id, onClose }: { id: number; onClose: () => void }) {
+    const { data: row, isPending, error } = WebhookSubscriptionModel.useOne(id);
+    const actions = useWebhookActions(GLOBAL_CREDENTIAL_PERMS);
+    if (isPending) return <div className="modal-pad dim">Loading webhook subscription…</div>;
+    if (!row || error) return <div className="modal-pad text-bad">{error?.message ?? 'Subscription not found'}</div>;
+    const idForGroup = groupId(row.group);
+    const group = idForGroup == null ? null : {
+        id: idForGroup,
+        name: groupLabel(row.group),
+        ...(typeof row.group === 'object' && row.group?.kind ? { kind: row.group.kind } : {}),
+    };
+    return (
+        <DetailView
+            icon="bi-broadcast-pin"
+            title={row.url}
+            subtitle={`${groupLabel(row.group)} · webhook subscription`}
+            chips={[{ text: row.is_active ? 'Active' : 'Inactive', tone: row.is_active ? 'success' : 'muted' }]}
+            sections={[
+                {
+                    key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
+                        <>
+                            <Eyebrow>Subscription</Eyebrow>
+                            <FlatRow label="Group">{groupLabel(row.group)}</FlatRow>
+                            <FlatRow label="URL"><code>{row.url}</code></FlatRow>
+                            <FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow>
+                            <FlatRow label="Modified">{fmt.datetime(row.modified)}</FlatRow>
+                            <div className="ga-toolbar" style={{ marginTop: 16 }}>
+                                <button className="btn btn-compact" onClick={() => void actions.editSubscription(row)}>
+                                    <i className="bi bi-pencil" /> Edit URL, events, and status
+                                </button>
+                                <ArmedButton
+                                    className="btn-compact"
+                                    label="Delete"
+                                    armedLabel="Click again — delete now"
+                                    onConfirm={async () => {
+                                        if (await actions.deleteSubscription(row)) onClose();
+                                    }}
+                                />
+                            </div>
+                        </>
+                    ),
+                },
+                {
+                    key: 'events', label: 'Events', icon: 'bi-tags', render: () => (
+                        <div className="chip-row">
+                            {row.events.length
+                                ? row.events.map((event) => <Badge key={event} tone="info">{event}</Badge>)
+                                : <span className="dim-italic">No events configured</span>}
+                        </div>
+                    ),
+                },
+                ...(group ? [{
+                    key: 'secret', label: 'Signing Secret', icon: 'bi-key',
+                    render: () => <WebhookSecretPanel group={group} permission={GLOBAL_CREDENTIAL_PERMS} />,
+                }] : []),
+            ]}
+            onClose={onClose}
+        />
+    );
+}
+
+const WEBHOOK_COLUMNS: Column<WebhookSubscriptionRow>[] = [
+    { key: 'url', label: 'URL', sortable: true, hideable: false, render: (row) => <code className="ga-url">{row.url}</code> },
+    { key: 'group', label: 'Group', render: (row) => groupLabel(row.group) },
+    { key: 'events', label: 'Events', render: (row) => row.events.slice(0, 3).map((event) => <Badge key={event} tone="info">{event}</Badge>) },
+    { key: 'is_active', label: 'Status', render: (row) => <Badge tone={row.is_active ? 'success' : 'muted'}>{row.is_active ? 'Active' : 'Inactive'}</Badge> },
+    { key: 'created', label: 'Created', sortable: true, render: (row) => fmt.date(row.created) },
+];
+
+const WEBHOOK_FILTERS: FilterDef[] = [
+    { key: 'url', label: 'URL', type: 'text', placeholder: 'Contains…' },
+    { key: 'group', label: 'Group ID', type: 'number', lookup: 'exact' },
+    { key: 'is_active', label: 'Status', type: 'boolean', trueLabel: 'Active', falseLabel: 'Inactive' },
+    { key: 'created', label: 'Created', type: 'daterange' },
+];
+
+export function WebhookSubscriptionsPage() {
+    const queryClient = useQueryClient();
+    const actions = useWebhookActions(GLOBAL_CREDENTIAL_PERMS);
+    const openDetail = (row: WebhookSubscriptionRow) => {
+        void WebhookSubscriptionModel.fetchOne(queryClient, row.id).catch(() => undefined);
+        void modal.detail((close) => <WebhookSubscriptionDetail id={row.id} onClose={() => close(null)} />);
+    };
+    return (
+        <ModelTable<WebhookSubscriptionRow>
+            model={WebhookSubscriptionModel}
+            eyebrow="Account"
+            title="Webhook Subscriptions"
+            searchable={false}
+            columns={WEBHOOK_COLUMNS}
+            filters={WEBHOOK_FILTERS}
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'active', label: 'Active', params: { is_active: 'true' } },
+                { key: 'inactive', label: 'Inactive', params: { is_active: 'false' } },
+            ]}
+            defaultSort="-created"
+            columnChooser
+            persistState
+            onRowClick={openDetail}
+            addLabel="New Subscription"
+            onAdd={actions.canManage ? () => void actions.createSubscription() : undefined}
+        />
+    );
+}

package/src/admin/dashboard/AdminDashboardPage.tsx

@@ -0,0 +1,101 @@
+import { Link } from 'react-router-dom';
+import { MetricsChart } from '../../charts';
+import { modal } from '../../ui';
+import { useAuthSnapshot, useCan } from '../../client';
+import { UserDetail } from '../identity';
+import { SECURITY_VIEW_PERMS } from '../security-permissions';
+import { JOBS_VIEW_PERMS } from '../jobs';
+import { EMAIL_ADMIN_PERMISSIONS } from '../messaging';
+import {
+    LOGIN_SUMMARY_PERMS, LoginLocationMap, showLoginEventDetail,
+    showUserDeviceDetailByDuid,
+} from '../security/devices';
+import {
+    DASHBOARD_METRIC_PERMISSIONS, DASHBOARD_SERIES, dashboardLoginStart,
+    useDashboardCount, useDashboardScalars,
+} from './data';
+
+export const ADMIN_DASHBOARD_PERMISSIONS = [...new Set([
+    ...DASHBOARD_METRIC_PERMISSIONS,
+    ...SECURITY_VIEW_PERMS,
+    ...JOBS_VIEW_PERMS,
+    ...EMAIL_ADMIN_PERMISSIONS,
+    ...LOGIN_SUMMARY_PERMS,
+])];
+
+function MetricOverview() {
+    const { can } = useCan(DASHBOARD_METRIC_PERMISSIONS);
+    const auth = useAuthSnapshot();
+    const scalars = useDashboardScalars(can);
+    if (!can) return null;
+    return <>
+        <div className="admin-dashboard-kpis">
+            {(['total_users', 'total_groups'] as const).map((slug) => (
+                <div className="panel panel-pad admin-dashboard-kpi" key={slug}>
+                    <div className="eyebrow">Directory</div>
+                    <div className="admin-dashboard-kpi-value">{scalars.isPending ? '…' : scalars.data?.[slug].toLocaleString() ?? '—'}</div>
+                    <div className="dim">{slug === 'total_users' ? 'Total users' : 'Total groups'}</div>
+                </div>
+            ))}
+        </div>
+        {scalars.error && <div className="panel panel-pad text-bad">{scalars.error.message}</div>}
+        <MetricsChart
+            title="Platform activity"
+            account="global"
+            slugs={[...DASHBOARD_SERIES]}
+            seriesLabels={{ user_activity_day: 'User activity', group_activity_day: 'Group activity', api_calls: 'API calls', api_errors: 'API errors' }}
+            seriesCacheKey={`admin-dashboard:${auth.uid ?? 'anonymous'}:activity`}
+            defaultRange="30d"
+            defaultGranularity="days"
+            height={300}
+        />
+    </>;
+}
+
+function AttentionCard({ permission, endpoint, params, to, icon, label }: {
+    permission: string[]; endpoint: string; params: Record<string, string>; to: string; icon: string; label: string;
+}) {
+    const { can } = useCan(permission);
+    const count = useDashboardCount(endpoint, params, can);
+    if (!can) return null;
+    return <Link className="panel panel-pad admin-dashboard-attention" to={to}>
+        <i className={`bi ${icon}`} />
+        <span><strong>{count.isPending ? '…' : count.data?.toLocaleString() ?? '—'}</strong><small>{label}</small></span>
+        <i className="bi bi-arrow-right" />
+    </Link>;
+}
+
+function AttentionOverview() {
+    return <section>
+        <div className="admin-dashboard-section-heading"><div><div className="eyebrow">Attention</div><h2>Needs review</h2></div></div>
+        <div className="admin-dashboard-attention-grid">
+            <AttentionCard permission={SECURITY_VIEW_PERMS} endpoint="/api/incident/incident" params={{ status: 'open' }} to="/security/incidents?status=open" icon="bi-shield-exclamation" label="Open incidents" />
+            <AttentionCard permission={JOBS_VIEW_PERMS} endpoint="/api/jobs/job" params={{ status: 'failed' }} to="/jobs/list?status=failed" icon="bi-cpu" label="Failed jobs" />
+            <AttentionCard permission={EMAIL_ADMIN_PERMISSIONS} endpoint="/api/aws/email/sent" params={{ status: 'bounced' }} to="/email/sent?status=bounced" icon="bi-envelope-exclamation" label="Bounced messages" />
+        </div>
+    </section>;
+}
+
+function LoginOverview() {
+    const { can } = useCan(LOGIN_SUMMARY_PERMS);
+    if (!can) return null;
+    const openUser = (id: number) => { void modal.detail((close) => <UserDetail id={id} onClose={() => close(null)} />); };
+    return <section className="panel panel-pad dashboard-login-map">
+        <div><div className="eyebrow">Security</div><h2>Login locations · last 30 days</h2></div>
+        <LoginLocationMap
+            height={360}
+            drStart={dashboardLoginStart()}
+            onOpenUser={openUser}
+            onOpenLogin={(id) => showLoginEventDetail(id, { onOpenUser: openUser, onOpenDeviceByDuid: showUserDeviceDetailByDuid })}
+        />
+    </section>;
+}
+
+export function AdminDashboardPage() {
+    return <div className="admin-dashboard">
+        <header className="admin-dashboard-header"><div className="eyebrow">Overview</div><h1>Admin dashboard</h1><p className="dim">Authoritative operational signals for this django-mojo deployment.</p></header>
+        <MetricOverview />
+        <AttentionOverview />
+        <LoginOverview />
+    </div>;
+}

package/src/admin/dashboard/data.ts

@@ -0,0 +1,60 @@
+import { useQuery } from '@tanstack/react-query';
+import { mojoCall, mojoList, useAuthSnapshot, type Params } from '../../client';
+
+export const DASHBOARD_METRIC_PERMISSIONS = ['sys.view_metrics', 'sys.metrics'];
+export const DASHBOARD_SERIES = ['user_activity_day', 'group_activity_day', 'api_calls', 'api_errors'] as const;
+export const DASHBOARD_SCALARS = ['total_users', 'total_groups'] as const;
+
+export type DashboardScalar = typeof DASHBOARD_SCALARS[number];
+export type DashboardScalars = Record<DashboardScalar, number>;
+
+export function parseDashboardScalar(value: unknown, slug: string): number {
+    if (typeof value !== 'string' && typeof value !== 'number') {
+        throw new Error(`Metric ${slug} did not return a scalar string or number.`);
+    }
+    if (typeof value === 'string' && value.trim() === '') {
+        throw new Error(`Metric ${slug} returned an empty value.`);
+    }
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed) || parsed < 0) {
+        throw new Error(`Metric ${slug} did not return a finite non-negative value.`);
+    }
+    return parsed;
+}
+
+export async function fetchDashboardScalars(): Promise<DashboardScalars> {
+    const body = await mojoCall('/api/metrics/value/get', {
+        params: { account: 'global', slugs: DASHBOARD_SCALARS.join(',') },
+    });
+    const data = body.data;
+    if (!data || typeof data !== 'object' || Array.isArray(data)) {
+        throw new Error('Dashboard scalar metrics returned a malformed payload.');
+    }
+    const values = data as Record<string, unknown>;
+    return {
+        total_users: parseDashboardScalar(values.total_users, 'total_users'),
+        total_groups: parseDashboardScalar(values.total_groups, 'total_groups'),
+    };
+}
+
+export function useDashboardScalars(enabled = true) {
+    const auth = useAuthSnapshot();
+    return useQuery({
+        queryKey: ['admin-dashboard', 'scalars', auth.uid],
+        queryFn: fetchDashboardScalars,
+        enabled: enabled && auth.authenticated && Boolean(auth.uid),
+    });
+}
+
+export function useDashboardCount(endpoint: string, params: Params, enabled = true) {
+    const auth = useAuthSnapshot();
+    return useQuery({
+        queryKey: ['admin-dashboard', 'count', auth.uid, endpoint, params],
+        queryFn: async () => (await mojoList(endpoint, { ...params, start: 0, size: 0 })).count,
+        enabled: enabled && auth.authenticated && Boolean(auth.uid),
+    });
+}
+
+export function dashboardLoginStart(now = Date.now()): string {
+    return new Date(now - 30 * 86_400_000).toISOString().slice(0, 10);
+}

package/src/admin/dashboard/index.ts

@@ -0,0 +1,2 @@
+export * from './data';
+export * from './AdminDashboardPage';