@modern-admin/react 0.1.0

package/dist/pages/settings-page.jsx

@@ -0,0 +1,787 @@
+// Admin Settings hub. Reachable from the user/profile dropdown menu and
+// rendered by the router for `/settings/<section>`. Currently three
+// sections: `api-keys`, `webhooks`, `ai-assistant`; the layout is built so
+// adding more sections is just a new entry in `SECTIONS` + a switch case.
+import * as React from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Badge, Button, Checkbox, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, InfoTooltip, Input, JsonEditor, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn, } from '@modern-admin/ui';
+import { AlertTriangle, Bot, Check, Copy, Edit, Eye, EyeOff, KeyRound, Plus, Settings as SettingsIcon, Trash2, X, } from 'lucide-react';
+import { useAdminClient } from '../provider.js';
+import { useFeatures, useResources } from '../hooks.js';
+import { useI18n } from '../i18n.js';
+import { Link, useNavigate } from '../router.js';
+import { useNotify } from '../notify.js';
+import { useDialogs } from '../dialogs.js';
+import { getSettingsSectionExtensions } from '../extension-registry.js';
+import { AiAssistantSettingsSection } from './ai-assistant-settings-section.js';
+import { SettingsCard, SettingsListState, SettingsTableScroll } from './settings-shared.js';
+const KEY_LIST = ['modern-admin', 'api-keys'];
+const KEY_WEBHOOKS = ['modern-admin', 'webhooks'];
+const BUILT_IN_SECTIONS = [
+    { key: 'api-keys', labelKey: 'settings:apiKeys.title', icon: KeyRound },
+    { key: 'webhooks', labelKey: 'settings:webhooks.title', icon: SettingsIcon },
+    { key: 'ai-assistant', labelKey: 'aiAssistant:title', icon: Bot },
+];
+export function SettingsPage({ section }) {
+    const { t } = useI18n();
+    const navigate = useNavigate();
+    const features = useFeatures();
+    // Only surface built-in sections whose backend subsystem is wired.
+    // Extension sections are always shown when registered.
+    const SECTIONS = React.useMemo(() => [
+        ...BUILT_IN_SECTIONS.filter((s) => s.key === 'api-keys' ? features.apiKeys
+            : s.key === 'webhooks' ? features.webhooks
+                : s.key === 'ai-assistant' ? features.aiAssistant
+                    : true),
+        ...getSettingsSectionExtensions().map((ext) => ({
+            key: ext.key,
+            labelKey: ext.labelKey,
+            icon: ext.icon,
+            isExtension: true,
+        })),
+    ], [features.apiKeys, features.webhooks, features.aiAssistant]);
+    // Resolve the requested section. If the URL is bogus or the section is
+    // disabled, fall back to the first enabled section.
+    const builtInKeys = ['api-keys', 'webhooks', 'ai-assistant'];
+    const isBuiltIn = (k) => builtInKeys.includes(k);
+    const requested = section ?? null;
+    const active = requested && SECTIONS.some((s) => s.key === requested)
+        ? requested
+        : (SECTIONS[0]?.key ?? null);
+    if (active === null) {
+        // Defensive: the user menu hides Settings entirely when no section is
+        // available, so users normally won't land here. Direct navigation to
+        // /settings without any configured section ends up showing this.
+        return (<div className="rounded-md border border-dashed bg-card p-8 text-center text-sm text-muted-foreground">
+        {t('settings:noSectionsConfigured')}
+      </div>);
+    }
+    return (
+    // `minmax(0,1fr)` (not bare `1fr`) lets the content column shrink below
+    // its intrinsic min-width — otherwise wide tables push the whole grid
+    // past the viewport at ~`lg` widths (~1000–1100px).
+    <div className="flex flex-col gap-4 lg:grid lg:grid-cols-[14rem_minmax(0,1fr)]">
+      {/* Mobile: dropdown selector (handles many sections gracefully) */}
+      <div className="lg:hidden">
+        <Select value={active ?? ''} onValueChange={(v) => navigate({ name: 'settings', section: v })}>
+          <SelectTrigger className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {SECTIONS.map(({ key, labelKey, icon: Icon }) => (<SelectItem key={key} value={key}>
+                <span className="flex items-center gap-2">
+                  <Icon className="size-4"/>
+                  <span>{t(labelKey)}</span>
+                </span>
+              </SelectItem>))}
+          </SelectContent>
+        </Select>
+      </div>
+      {/* Desktop: sidebar nav */}
+      <aside className="hidden lg:block">
+        <nav className="flex flex-col gap-1">
+          {SECTIONS.map(({ key, labelKey, icon: Icon }) => (<Link key={key} to={{ name: 'settings', section: key }} className={cn('flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent', active === key && 'bg-accent font-medium')}>
+              <Icon className="size-4"/>
+              <span>{t(labelKey)}</span>
+            </Link>))}
+        </nav>
+      </aside>
+      <section className="min-w-0">
+        {active && isBuiltIn(active) && active === 'api-keys' && <ApiKeysSection />}
+        {active && isBuiltIn(active) && active === 'webhooks' && <WebhooksSection />}
+        {active && isBuiltIn(active) && active === 'ai-assistant' && <AiAssistantSettingsSection />}
+        {active && !isBuiltIn(active) && (() => {
+            const extSection = getSettingsSectionExtensions().find((e) => e.key === active);
+            return extSection ? <extSection.component /> : null;
+        })()}
+      </section>
+    </div>);
+}
+// ─── API Keys section ─────────────────────────────────────────────────────────
+function ApiKeysSection() {
+    const { t } = useI18n();
+    const client = useAdminClient();
+    const qc = useQueryClient();
+    const notify = useNotify();
+    const dialogs = useDialogs();
+    const resources = useResources();
+    const [editorOpen, setEditorOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(null);
+    const [createdSecret, setCreatedSecret] = React.useState(null);
+    const list = useQuery({
+        queryKey: KEY_LIST,
+        queryFn: () => client.listApiKeys(),
+    });
+    const deleteMut = useMutation({
+        mutationFn: (id) => client.deleteApiKey(id),
+        onSuccess: () => {
+            qc.invalidateQueries({ queryKey: KEY_LIST });
+            notify.success({ key: 'settings:apiKeys.notice.revoked' });
+        },
+        onError: (err) => notify.error({ message: err instanceof Error ? err.message : String(err) }),
+    });
+    const toggleEnabledMut = useMutation({
+        mutationFn: (vars) => client.updateApiKey(vars.id, { enabled: vars.enabled }),
+        onSuccess: () => qc.invalidateQueries({ queryKey: KEY_LIST }),
+        onError: (err) => notify.error({ message: err instanceof Error ? err.message : String(err) }),
+    });
+    const onCreate = () => {
+        setEditing(null);
+        setEditorOpen(true);
+    };
+    const onEdit = (key) => {
+        setEditing(key);
+        setEditorOpen(true);
+    };
+    const onRevoke = async (key) => {
+        const ok = await dialogs.confirm({
+            title: t('settings:apiKeys.confirmRevoke.title'),
+            description: t('settings:apiKeys.confirmRevoke.description', { name: key.name ?? key.id }),
+            confirmLabel: t('settings:apiKeys.actions.revoke'),
+            destructive: true,
+        });
+        if (ok)
+            deleteMut.mutate(key.id);
+    };
+    const keys = list.data?.keys ?? [];
+    return (<div className="flex flex-col gap-4">
+      <SettingsCard icon={KeyRound} title={t('settings:apiKeys.title')} description={t('settings:apiKeys.description')} action={<Button onClick={onCreate} size="sm">
+            <Plus className="size-4"/>
+            <span>{t('settings:apiKeys.actions.create')}</span>
+          </Button>}>
+        <SettingsListState isLoading={list.isLoading} error={list.error} isEmpty={keys.length === 0} loadingLabel={t('common:loading')} empty={{
+            icon: KeyRound,
+            title: t('settings:apiKeys.empty.title'),
+            description: t('settings:apiKeys.empty.description'),
+        }}>
+          <SettingsTableScroll>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('settings:apiKeys.columns.name')}</TableHead>
+                  <TableHead className="hidden sm:table-cell">{t('settings:apiKeys.columns.start')}</TableHead>
+                  <TableHead className="hidden md:table-cell">{t('settings:apiKeys.columns.permissions')}</TableHead>
+                  <TableHead className="hidden md:table-cell">{t('settings:apiKeys.columns.expiresAt')}</TableHead>
+                  <TableHead>{t('settings:apiKeys.columns.enabled')}</TableHead>
+                  <TableHead className="text-right">{t('settings:apiKeys.columns.actions')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {keys.map((k) => (<TableRow key={k.id}>
+                    <TableCell className="font-medium">
+                      <div className="flex flex-col">
+                        <span>{k.name ?? k.id}</span>
+                        {k.lastRequest && (<span className="text-xs text-muted-foreground">
+                            {t('settings:apiKeys.lastUsed', { date: formatDate(k.lastRequest) })}
+                          </span>)}
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden font-mono text-xs sm:table-cell">
+                      {k.start ? `${k.start}…` : '—'}
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      <PermissionsSummary permissions={k.permissions}/>
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell text-xs">
+                      {k.expiresAt ? formatDate(k.expiresAt) : t('settings:apiKeys.expiresNever')}
+                    </TableCell>
+                    <TableCell>
+                      <Switch checked={k.enabled} onCheckedChange={(enabled) => toggleEnabledMut.mutate({ id: k.id, enabled })} aria-label={t('settings:apiKeys.columns.enabled')}/>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="inline-flex gap-1">
+                        <Button variant="ghost" size="sm" onClick={() => onEdit(k)} aria-label={t('settings:apiKeys.actions.edit')}>
+                          <Edit className="size-4"/>
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => onRevoke(k)} aria-label={t('settings:apiKeys.actions.revoke')} disabled={deleteMut.isPending}>
+                          <Trash2 className="size-4 text-destructive"/>
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>))}
+              </TableBody>
+            </Table>
+          </SettingsTableScroll>
+        </SettingsListState>
+      </SettingsCard>
+
+      <ApiKeyEditorDialog key={editing?.id ?? 'new'} open={editorOpen} onOpenChange={setEditorOpen} editing={editing} resources={resources} onCreated={(result) => {
+            setEditorOpen(false);
+            setCreatedSecret(result);
+            qc.invalidateQueries({ queryKey: KEY_LIST });
+        }} onUpdated={() => {
+            setEditorOpen(false);
+            qc.invalidateQueries({ queryKey: KEY_LIST });
+        }}/>
+
+      <CreatedSecretDialog secret={createdSecret} onClose={() => setCreatedSecret(null)}/>
+    </div>);
+}
+const buildState = (perms) => ({
+    byResource: Object.fromEntries(Object.entries(perms).map(([k, v]) => [k, new Set(v)])),
+});
+const stateToWire = (state) => {
+    const out = {};
+    for (const [k, set] of Object.entries(state.byResource)) {
+        if (set.size === 0)
+            continue;
+        out[k] = Array.from(set);
+    }
+    return out;
+};
+function PermissionsMatrix({ resources, state, onChange, }) {
+    const { t } = useI18n();
+    const toggle = (resourceId, action) => {
+        const set = new Set(state.byResource[resourceId] ?? []);
+        if (set.has(action))
+            set.delete(action);
+        else
+            set.add(action);
+        onChange({ byResource: { ...state.byResource, [resourceId]: set } });
+    };
+    const toggleAll = (resourceId, actions) => {
+        const current = state.byResource[resourceId] ?? new Set();
+        const allSelected = actions.every((a) => current.has(a));
+        const next = new Set(allSelected ? [] : actions);
+        onChange({ byResource: { ...state.byResource, [resourceId]: next } });
+    };
+    const resourcesWithActions = React.useMemo(() => resources.filter((r) => (r.actions ?? []).length > 0), [resources]);
+    const allGloballySelected = resourcesWithActions.length > 0 &&
+        resourcesWithActions.every((r) => {
+            const actions = (r.actions ?? []).map((a) => a.name);
+            const current = state.byResource[r.id] ?? new Set();
+            return actions.every((a) => current.has(a));
+        });
+    const toggleAllResources = () => {
+        const select = !allGloballySelected;
+        const next = { ...state.byResource };
+        for (const r of resources) {
+            const actions = (r.actions ?? []).map((a) => a.name);
+            next[r.id] = select ? new Set(actions) : new Set();
+        }
+        onChange({ byResource: next });
+    };
+    if (resources.length === 0) {
+        return (<p className="text-sm text-muted-foreground">{t('settings:apiKeys.permissions.noResources')}</p>);
+    }
+    return (<div className="rounded-md border border-border">
+      {resourcesWithActions.length > 0 && (<div className="flex flex-wrap items-center justify-end gap-2 border-b border-border bg-muted/30 px-3 py-2">
+          <Button type="button" variant="outline" size="sm" className="h-8" onClick={toggleAllResources}>
+            {allGloballySelected ? (<>
+                <X className="mr-1.5 size-3.5"/>
+                {t('settings:apiKeys.permissions.clearAllResources')}
+              </>) : (<>
+                <Check className="mr-1.5 size-3.5"/>
+                {t('settings:apiKeys.permissions.selectAllResources')}
+              </>)}
+          </Button>
+        </div>)}
+      <div className="max-h-[24rem] overflow-y-auto">
+        <Table>
+          <TableHeader className="sticky top-0 bg-card">
+            <TableRow>
+              <TableHead className="w-[14rem]">{t('settings:apiKeys.permissions.resource')}</TableHead>
+              <TableHead>{t('settings:apiKeys.permissions.actions')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {resources.map((r) => {
+            const actions = (r.actions ?? []).map((a) => a.name);
+            const current = state.byResource[r.id] ?? new Set();
+            const allSelected = actions.length > 0 && actions.every((a) => current.has(a));
+            return (<TableRow key={r.id}>
+                  <TableCell className="align-top">
+                    <div className="flex flex-col gap-1">
+                      <span className="font-medium">{r.name}</span>
+                      <span className="text-xs text-muted-foreground">{r.id}</span>
+                      <button type="button" className="mt-1 inline-flex items-center gap-1 self-start text-xs text-primary hover:underline" onClick={() => toggleAll(r.id, actions)}>
+                        {allSelected ? <X className="size-3"/> : <Check className="size-3"/>}
+                        {allSelected
+                    ? t('settings:apiKeys.permissions.clearAll')
+                    : t('settings:apiKeys.permissions.selectAll')}
+                      </button>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-2">
+                      {actions.map((a) => {
+                    const checked = current.has(a);
+                    return (<label key={a} className={cn('inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs', checked && 'border-primary bg-primary/10 text-primary')}>
+                            <Checkbox checked={checked} onCheckedChange={() => toggle(r.id, a)} className="size-3.5"/>
+                            <span>{a}</span>
+                          </label>);
+                })}
+                    </div>
+                  </TableCell>
+                </TableRow>);
+        })}
+          </TableBody>
+        </Table>
+      </div>
+    </div>);
+}
+function PermissionsSummary({ permissions }) {
+    const { t } = useI18n();
+    const entries = Object.entries(permissions);
+    if (entries.length === 0) {
+        return <Badge variant="outline">{t('settings:apiKeys.permissions.none')}</Badge>;
+    }
+    const totalActions = entries.reduce((sum, [, a]) => sum + a.length, 0);
+    return (<Badge variant="secondary">
+      {t('settings:apiKeys.permissions.summary', { resources: entries.length, actions: totalActions })}
+    </Badge>);
+}
+// ─── Editor dialog ────────────────────────────────────────────────────────────
+function ApiKeyEditorDialog({ open, onOpenChange, editing, resources, onCreated, onUpdated, }) {
+    const { t } = useI18n();
+    const client = useAdminClient();
+    const notify = useNotify();
+    const isEdit = !!editing;
+    const [name, setName] = React.useState(editing?.name ?? '');
+    const [expiresInDays, setExpiresInDays] = React.useState(() => {
+        if (!editing?.expiresAt)
+            return '';
+        const ms = new Date(editing.expiresAt).getTime() - Date.now();
+        return ms > 0 ? String(Math.max(1, Math.round(ms / (24 * 60 * 60 * 1000)))) : '';
+    });
+    const [permissions, setPermissions] = React.useState(() => buildState(editing?.permissions ?? {}));
+    const save = useMutation({
+        mutationFn: async () => {
+            const wire = stateToWire(permissions);
+            if (isEdit && editing) {
+                const expiry = expiresInDays.trim() === '' ? null : Number(expiresInDays);
+                const res = await client.updateApiKey(editing.id, {
+                    name: name.trim(),
+                    permissions: wire,
+                    expiresInDays: expiry === null ? null : Number.isFinite(expiry) && expiry > 0 ? expiry : undefined,
+                });
+                return { record: res.record };
+            }
+            const expiry = expiresInDays.trim() === '' ? null : Number(expiresInDays);
+            return client.createApiKey({
+                name: name.trim(),
+                permissions: wire,
+                expiresInDays: expiry === null ? null : Number.isFinite(expiry) && expiry > 0 ? expiry : undefined,
+            });
+        },
+        onSuccess: (result) => {
+            if (isEdit) {
+                notify.success({ key: 'settings:apiKeys.notice.updated' });
+                onUpdated(result.record);
+            }
+            else {
+                if (result.key)
+                    onCreated({ key: result.key, record: result.record });
+            }
+        },
+        onError: (err) => notify.error({ message: err instanceof Error ? err.message : String(err) }),
+    });
+    // Sync state when dialog re-opens against a different record.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        setName(editing?.name ?? '');
+        setPermissions(buildState(editing?.permissions ?? {}));
+        if (!editing?.expiresAt)
+            setExpiresInDays('');
+        else {
+            const ms = new Date(editing.expiresAt).getTime() - Date.now();
+            setExpiresInDays(ms > 0 ? String(Math.max(1, Math.round(ms / (24 * 60 * 60 * 1000)))) : '');
+        }
+    }, [open, editing]);
+    const totalSelected = Object.values(permissions.byResource).reduce((sum, set) => sum + (set?.size ?? 0), 0);
+    return (<Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>
+            {isEdit ? t('settings:apiKeys.editor.titleEdit') : t('settings:apiKeys.editor.titleCreate')}
+          </DialogTitle>
+          <DialogDescription>{t('settings:apiKeys.editor.description')}</DialogDescription>
+        </DialogHeader>
+        <form className="flex flex-col gap-4" onSubmit={(e) => {
+            e.preventDefault();
+            if (!name.trim())
+                return;
+            save.mutate();
+        }}>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="api-key-name">{t('settings:apiKeys.editor.name')}</Label>
+              <Input id="api-key-name" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('settings:apiKeys.editor.namePlaceholder')} required maxLength={64}/>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="api-key-expires">{t('settings:apiKeys.editor.expiresInDays')}</Label>
+              <Input id="api-key-expires" type="number" min={1} max={3650} value={expiresInDays} onChange={(e) => setExpiresInDays(e.target.value)} placeholder={t('settings:apiKeys.editor.expiresPlaceholder')}/>
+              <span className="text-xs text-muted-foreground">
+                {t('settings:apiKeys.editor.expiresHint')}
+              </span>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <Label>{t('settings:apiKeys.editor.permissions')}</Label>
+              <span className="text-xs text-muted-foreground">
+                {t('settings:apiKeys.editor.selectedActions', { count: totalSelected })}
+              </span>
+            </div>
+            <PermissionsMatrix resources={resources} state={permissions} onChange={setPermissions}/>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              {t('common:cancel')}
+            </Button>
+            <Button type="submit" disabled={save.isPending || !name.trim() || totalSelected === 0}>
+              {save.isPending ? t('common:saving') : isEdit ? t('common:save') : t('settings:apiKeys.actions.create')}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>);
+}
+// ─── Webhooks section ─────────────────────────────────────────────────────────
+const WEBHOOK_EVENTS = ['record.created', 'record.updated', 'record.deleted', '*'];
+function WebhooksSection() {
+    const { t } = useI18n();
+    const client = useAdminClient();
+    const qc = useQueryClient();
+    const notify = useNotify();
+    const dialogs = useDialogs();
+    const resources = useResources();
+    const [editorOpen, setEditorOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(null);
+    const [selectedId, setSelectedId] = React.useState(null);
+    const list = useQuery({
+        queryKey: KEY_WEBHOOKS,
+        queryFn: () => client.listWebhooks(),
+    });
+    const deliveries = useQuery({
+        queryKey: ['modern-admin', 'webhooks', selectedId, 'deliveries'],
+        queryFn: () => client.listWebhookDeliveries(selectedId),
+        enabled: !!selectedId,
+    });
+    const deleteMut = useMutation({
+        mutationFn: (id) => client.deleteWebhook(id),
+        onSuccess: () => {
+            qc.invalidateQueries({ queryKey: KEY_WEBHOOKS });
+            notify.success({ key: 'settings:webhooks.notice.deleted' });
+        },
+        onError: (err) => notify.error({ message: err instanceof Error ? err.message : String(err) }),
+    });
+    const testMut = useMutation({
+        mutationFn: (id) => client.testWebhook(id),
+        onSuccess: () => {
+            if (selectedId)
+                qc.invalidateQueries({ queryKey: ['modern-admin', 'webhooks', selectedId, 'deliveries'] });
+            notify.success({ key: 'settings:webhooks.notice.testQueued' });
+        },
+        onError: (err) => notify.error({ message: err instanceof Error ? err.message : String(err) }),
+    });
+    const webhooks = list.data?.webhooks ?? [];
+    const onDelete = async (webhook) => {
+        const ok = await dialogs.confirm({
+            title: t('settings:webhooks.confirmDelete.title'),
+            description: t('settings:webhooks.confirmDelete.description', { name: webhook.name }),
+            confirmLabel: t('common:delete'),
+            destructive: true,
+        });
+        if (ok)
+            deleteMut.mutate(webhook.id);
+    };
+    return (<div className="flex flex-col gap-4">
+      <SettingsCard icon={SettingsIcon} title={t('settings:webhooks.title')} description={t('settings:webhooks.description')} action={<Button size="sm" onClick={() => { setEditing(null); setEditorOpen(true); }}>
+            <Plus className="size-4"/>
+            {t('settings:webhooks.actions.create')}
+          </Button>}>
+        <SettingsListState isLoading={list.isLoading} error={list.error} isEmpty={webhooks.length === 0} loadingLabel={t('common:loading')} empty={{
+            icon: SettingsIcon,
+            title: t('settings:webhooks.empty.title'),
+            description: t('settings:webhooks.empty.description'),
+        }}>
+          <SettingsTableScroll>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('settings:webhooks.columns.name')}</TableHead>
+                  <TableHead>{t('settings:webhooks.columns.resource')}</TableHead>
+                  <TableHead>{t('settings:webhooks.columns.events')}</TableHead>
+                  <TableHead>{t('settings:webhooks.columns.enabled')}</TableHead>
+                  <TableHead className="text-right">{t('settings:webhooks.columns.actions')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {webhooks.map((webhook) => (<TableRow key={webhook.id}>
+                    <TableCell>
+                      <button type="button" className="text-left font-medium hover:underline" onClick={() => setSelectedId(webhook.id)}>
+                        {webhook.name}
+                      </button>
+                      <div className="max-w-xs truncate text-xs text-muted-foreground">{webhook.url}</div>
+                    </TableCell>
+                    <TableCell>{resourceName(resources, webhook.resourceId, t('settings:webhooks.editor.allResources'))}</TableCell>
+                    <TableCell className="max-w-xs">
+                      <div className="flex flex-wrap gap-1">
+                        {webhook.events.map((event) => <Badge key={event} variant="outline">{event}</Badge>)}
+                      </div>
+                    </TableCell>
+                    <TableCell>{webhook.enabled ? t('common:yes') : t('common:no')}</TableCell>
+                    <TableCell className="text-right">
+                      <div className="inline-flex gap-1">
+                        <Button variant="ghost" size="sm" onClick={() => testMut.mutate(webhook.id)}>
+                          {t('settings:webhooks.actions.test')}
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => { setEditing(webhook); setEditorOpen(true); }}>
+                          <Edit className="size-4"/>
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => void onDelete(webhook)}>
+                          <Trash2 className="size-4 text-destructive"/>
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>))}
+              </TableBody>
+            </Table>
+          </SettingsTableScroll>
+        </SettingsListState>
+      </SettingsCard>
+
+      {selectedId && (<SettingsCard icon={SettingsIcon} title={t('settings:webhooks.deliveries.title')}>
+          {deliveries.isLoading ? (<div className="py-4 text-sm text-muted-foreground">{t('common:loading')}</div>) : (<SettingsTableScroll>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('settings:webhooks.deliveries.status')}</TableHead>
+                    <TableHead>{t('settings:webhooks.deliveries.event')}</TableHead>
+                    <TableHead>{t('settings:webhooks.deliveries.attempt')}</TableHead>
+                    <TableHead>{t('settings:webhooks.deliveries.response')}</TableHead>
+                    <TableHead>{t('settings:webhooks.deliveries.createdAt')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {(deliveries.data?.deliveries ?? []).map((delivery) => (<TableRow key={delivery.id}>
+                      <TableCell>{delivery.status}</TableCell>
+                      <TableCell>{delivery.event}</TableCell>
+                      <TableCell>{delivery.attempt}</TableCell>
+                      <TableCell className="max-w-sm truncate">
+                        {delivery.responseStatus ?? delivery.error ?? delivery.responseBody ?? '—'}
+                      </TableCell>
+                      <TableCell>{formatDate(delivery.createdAt)}</TableCell>
+                    </TableRow>))}
+                </TableBody>
+              </Table>
+            </SettingsTableScroll>)}
+        </SettingsCard>)}
+
+      <WebhookEditorDialog key={editing?.id ?? 'new'} open={editorOpen} onOpenChange={setEditorOpen} webhook={editing} resources={resources}/>
+    </div>);
+}
+function WebhookEditorDialog({ open, onOpenChange, webhook, resources, }) {
+    const { t } = useI18n();
+    const client = useAdminClient();
+    const qc = useQueryClient();
+    const notify = useNotify();
+    const [name, setName] = React.useState(webhook?.name ?? '');
+    const [url, setUrl] = React.useState(webhook?.url ?? '');
+    const [resourceId, setResourceId] = React.useState(webhook?.resourceId ?? '');
+    const [enabled, setEnabled] = React.useState(webhook?.enabled ?? true);
+    const [secret, setSecret] = React.useState(webhook?.secret ?? '');
+    const [events, setEvents] = React.useState(webhook?.events ?? ['record.created', 'record.updated']);
+    const [headers, setHeaders] = React.useState(webhook?.headers ?? {});
+    const [filters, setFilters] = React.useState(webhook?.filters ?? {});
+    const [payloadFields, setPayloadFields] = React.useState(webhook?.payloadFields ?? []);
+    const selectedResource = resources.find((r) => r.id === resourceId);
+    const save = useMutation({
+        mutationFn: (payload) => webhook ? client.updateWebhook(webhook.id, payload) : client.createWebhook(payload),
+        onSuccess: () => {
+            qc.invalidateQueries({ queryKey: KEY_WEBHOOKS });
+            notify.success({ key: 'settings:webhooks.notice.saved' });
+            onOpenChange(false);
+        },
+        onError: (err) => notify.error({ message: err instanceof Error ? err.message : String(err) }),
+    });
+    const toggleEvent = (event) => {
+        setEvents((prev) => prev.includes(event) ? prev.filter((e) => e !== event) : [...prev, event]);
+    };
+    const onSubmit = (e) => {
+        e.preventDefault();
+        save.mutate({
+            name: name.trim(),
+            url: url.trim(),
+            events,
+            resourceId: resourceId || null,
+            enabled,
+            ...(secret.trim() ? { secret: secret.trim() } : {}),
+            headers: stringRecord(headers),
+            filters: stringRecord(filters),
+            payloadFields,
+        });
+    };
+    return (<Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>{webhook ? t('settings:webhooks.editor.titleEdit') : t('settings:webhooks.editor.titleCreate')}</DialogTitle>
+          <DialogDescription>{t('settings:webhooks.editor.description')}</DialogDescription>
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={onSubmit}>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="space-y-1.5">
+              <Label>{t('settings:webhooks.editor.name')}</Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} required/>
+            </div>
+            <div className="space-y-1.5">
+              <Label>{t('settings:webhooks.editor.url')}</Label>
+              <Input value={url} onChange={(e) => setUrl(e.target.value)} required type="url"/>
+            </div>
+            <div className="space-y-1.5">
+              <Label>{t('settings:webhooks.editor.resource')}</Label>
+              <Select value={resourceId || '__all__'} onValueChange={(v) => { setResourceId(v === '__all__' ? '' : v); setPayloadFields([]); }}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all__">{t('settings:webhooks.editor.allResources')}</SelectItem>
+                  {resources.map((resource) => (<SelectItem key={resource.id} value={resource.id}>
+                      {resource.name}
+                      {resource.name !== resource.id && (<span className="ml-1.5 text-xs text-muted-foreground">({resource.id})</span>)}
+                    </SelectItem>))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-1.5">
+                <Label>{t('settings:webhooks.editor.secret')}</Label>
+                <InfoTooltip content={t('settings:webhooks.editor.secretHint')} ariaLabel={t('settings:webhooks.editor.secret')} side="right"/>
+              </div>
+              <Input value={secret} onChange={(e) => setSecret(e.target.value)} type="password"/>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch checked={enabled} onCheckedChange={setEnabled}/>
+            <Label>{t('settings:webhooks.editor.enabled')}</Label>
+          </div>
+          <div className="space-y-2">
+            <Label>{t('settings:webhooks.editor.events')}</Label>
+            <div className="flex flex-wrap gap-2">
+              {WEBHOOK_EVENTS.map((event) => (<label key={event} className="flex items-center gap-2 rounded-md border px-3 py-2 text-sm">
+                  <Checkbox checked={events.includes(event)} onCheckedChange={() => toggleEvent(event)}/>
+                  {event}
+                </label>))}
+            </div>
+          </div>
+          {selectedResource && (<div className="space-y-2">
+              <div className="flex items-center gap-1.5">
+                <Label>{t('settings:webhooks.editor.payloadFields')}</Label>
+                <InfoTooltip content={t('settings:webhooks.editor.payloadFieldsHint')} ariaLabel={t('settings:webhooks.editor.payloadFields')} side="right"/>
+              </div>
+              <div className="grid gap-2 sm:grid-cols-2">
+                {selectedResource.properties.map((property) => (<label key={property.path} className="flex items-center gap-2 text-sm">
+                    <Checkbox checked={payloadFields.includes(property.path)} onCheckedChange={() => setPayloadFields((prev) => prev.includes(property.path)
+                    ? prev.filter((p) => p !== property.path)
+                    : [...prev, property.path])}/>
+                    {property.label}
+                  </label>))}
+              </div>
+            </div>)}
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-1.5">
+                <Label>{t('settings:webhooks.editor.headers')}</Label>
+                <InfoTooltip content={t('settings:webhooks.editor.headersHint')} ariaLabel={t('settings:webhooks.editor.headers')} side="top"/>
+              </div>
+              <JsonEditor value={headers} onChange={(next) => setHeaders(toJsonRecord(next))}/>
+            </div>
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-1.5">
+                <Label>{t('settings:webhooks.editor.filters')}</Label>
+                <InfoTooltip content={t('settings:webhooks.editor.filtersHint')} ariaLabel={t('settings:webhooks.editor.filters')} side="top"/>
+              </div>
+              <JsonEditor value={filters} onChange={(next) => setFilters(toJsonRecord(next))}/>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>{t('common:cancel')}</Button>
+            <Button type="submit" disabled={save.isPending || !name.trim() || !url.trim() || events.length === 0}>
+              {save.isPending ? t('common:saving') : t('common:save')}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>);
+}
+const resourceName = (resources, id, fallback) => id ? (resources.find((r) => r.id === id)?.name ?? id) : fallback;
+const toJsonRecord = (value) => value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+const stringRecord = (value) => {
+    const out = {};
+    for (const [key, item] of Object.entries(value)) {
+        if (item != null && item !== '')
+            out[key] = String(item);
+    }
+    return out;
+};
+// ─── Created-secret dialog ────────────────────────────────────────────────────
+function CreatedSecretDialog({ secret, onClose, }) {
+    const { t } = useI18n();
+    const notify = useNotify();
+    const [reveal, setReveal] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (!secret) {
+            setReveal(false);
+            setCopied(false);
+        }
+    }, [secret]);
+    const onCopy = async () => {
+        if (!secret)
+            return;
+        try {
+            await navigator.clipboard.writeText(secret.key);
+            setCopied(true);
+            notify.success({ key: 'settings:apiKeys.notice.copied' });
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            notify.error({ key: 'settings:apiKeys.notice.copyFailed' });
+        }
+    };
+    return (<Dialog open={!!secret} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <SettingsIcon className="size-5"/>
+            {t('settings:apiKeys.created.title')}
+          </DialogTitle>
+          <DialogDescription>{t('settings:apiKeys.created.description')}</DialogDescription>
+        </DialogHeader>
+        <div className="rounded-md border border-amber-300/60 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-300/30 dark:bg-amber-950/40 dark:text-amber-200">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="mt-0.5 size-4"/>
+            <p>{t('settings:apiKeys.created.warning')}</p>
+          </div>
+        </div>
+        <div className="flex items-stretch gap-2">
+          <div className="relative flex-1">
+            <Input readOnly type={reveal ? 'text' : 'password'} value={secret?.key ?? ''} className="pr-10 font-mono text-xs" onFocus={(e) => e.currentTarget.select()}/>
+            <Button type="button" variant="ghost" size="sm" className="absolute right-1 top-1/2 -translate-y-1/2" onClick={() => setReveal((v) => !v)} aria-label={reveal ? t('settings:apiKeys.created.hide') : t('settings:apiKeys.created.reveal')}>
+              {reveal ? <EyeOff className="size-4"/> : <Eye className="size-4"/>}
+            </Button>
+          </div>
+          <Button type="button" onClick={onCopy} variant="secondary">
+            {copied ? <Check className="size-4"/> : <Copy className="size-4"/>}
+            <span className="hidden sm:inline">
+              {copied ? t('settings:apiKeys.created.copied') : t('settings:apiKeys.created.copy')}
+            </span>
+          </Button>
+        </div>
+        <DialogFooter>
+          <Button onClick={onClose}>{t('common:done')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>);
+}
+const formatDate = (input) => {
+    try {
+        return new Date(input).toLocaleString();
+    }
+    catch {
+        return String(input);
+    }
+};
+//# sourceMappingURL=settings-page.jsx.map