portal-mojo 0.1.0

package/src/admin/network/IPSetEditor.tsx

@@ -0,0 +1,191 @@
+// IPSetEditor — the focused create/edit dialogs, ported from web-mojo
+// `admin/models/IPSet.js` (IPSetForms) + `IPSetTablePage._handleAdd`'s
+// country-code transform.
+//
+// TWO SAFETY FIXES over the source, both forced by the backend:
+//
+//  1. **Records are created DISABLED, and `is_enabled` is never written as a
+//     plain field — here or in the edit form.** `on_action_enable` is the only
+//     path that runs the cache-only rejection; a plain field write produces a
+//     row that reads "Enabled" and silently never syncs (`sync()` no-ops for
+//     cache-only sets without raising). Direct #1097 lineage. The source's
+//     create form defaulted `is_enabled` to true and its edit form carried a
+//     switch — both bypassed `on_action_enable` entirely.
+//
+//  2. **`data` is posted as a JSON LIST, never as a string.** `IPSet` defines
+//     `set_data(cidr_list)` and `on_rest_save_field` prefers a `set_<key>`
+//     method over a plain assignment, so a posted `data` runs
+//     `"\n".join(value)`. A string therefore gets a newline interleaved
+//     between every CHARACTER and `cidr_count` becomes the character count.
+//     The source posted the raw textarea string.
+import { formModal, type Field, type FormData } from '../../ui';
+import { COUNTRY_OPTIONS, countryName } from '../../charts/worldmap/countryCentroids';
+import {
+    IPSET_COMMON_BLOCK_COUNTRIES, IPSET_KIND_BADGE_OPTIONS, IPSET_KIND_OPTIONS,
+    IPSET_SOURCE_OPTIONS, parseCidrLines, type IPSetRow,
+} from './models';
+
+/**
+ * The FULL ISO2 list with the twenty `CommonBlockCountries` pinned on top.
+ * The source offered ONLY those twenty, so no other country could be blocked
+ * from the UI at all.
+ */
+const COUNTRY_PICKER_OPTIONS: { value: string; label: string }[] = (() => {
+    const common = IPSET_COMMON_BLOCK_COUNTRIES
+        .filter((code) => COUNTRY_OPTIONS.some((option) => option.value === code))
+        .map((code) => ({ value: code, label: `${countryName(code)} — commonly blocked` }));
+    const rest = COUNTRY_OPTIONS.filter((option) => !IPSET_COMMON_BLOCK_COUNTRIES.includes(option.value));
+    return [...common, ...rest.map((option) => ({ value: option.value, label: option.label }))];
+})();
+
+const CIDR_PLACEHOLDER = '# One CIDR per line\n192.0.2.0/24\n198.51.100.0/24\n203.0.113.0/24';
+
+export const IPSET_CREATE_FIELDS: Field[] = [
+    {
+        name: 'kind', type: 'select', label: 'What do you want to block?',
+        required: true, options: IPSET_KIND_OPTIONS, columns: 12,
+    },
+    {
+        name: 'country_code', type: 'select', label: 'Country', required: true,
+        options: COUNTRY_PICKER_OPTIONS, columns: 12,
+        showWhen: { field: 'kind', value: 'country' },
+        help: 'CIDRs are fetched from IPDeny. The set is named country_<code>, which is exactly what the backend derives the zone-file URL from.',
+    },
+    {
+        name: 'source_key', type: 'text', label: 'AbuseIPDB API key', required: true,
+        placeholder: 'Your AbuseIPDB API key', columns: 12,
+        showWhen: { field: 'kind', value: 'abuse' },
+        help: 'Write-only — the key is excluded from every serializer graph and can never be read back.',
+    },
+    {
+        name: 'source_url', type: 'text', label: 'Source URL', required: true,
+        placeholder: 'https://example.com/datacenter-ranges.txt', columns: 12,
+        showWhen: { field: 'kind', value: 'datacenter' },
+        help: 'A plain-text file with one CIDR per line.',
+    },
+    {
+        name: 'data', type: 'textarea', label: 'CIDR list', columns: 12,
+        placeholder: CIDR_PLACEHOLDER,
+        showWhen: { field: 'kind', value: 'custom' },
+        help: 'One range per line in CIDR notation. Blank lines and # comments are dropped before the list is sent.',
+    },
+    {
+        name: 'name', type: 'text', label: 'Name', required: true,
+        placeholder: 'abuse_ips, dc_aws…', columns: 6,
+        showWhen: { field: 'kind', value: 'country', negate: true },
+        help: 'Unique — used verbatim as the kernel ipset name.',
+    },
+    {
+        name: 'description', type: 'text', label: 'Description',
+        placeholder: 'Human-readable label', columns: 6,
+        showWhen: { field: 'kind', value: 'country', negate: true },
+    },
+];
+
+/**
+ * The edit form. `kind` is disabled (changing it would orphan the source
+ * plumbing) and `is_enabled` is ABSENT — enabling and disabling are actions.
+ */
+export const IPSET_EDIT_FIELDS: Field[] = [
+    { name: 'name', type: 'text', label: 'Name', required: true, columns: 6 },
+    { name: 'kind', type: 'select', label: 'Kind', options: IPSET_KIND_BADGE_OPTIONS, disabled: true, columns: 6 },
+    { name: 'description', type: 'text', label: 'Description', columns: 12 },
+    { name: 'source', type: 'select', label: 'Source', options: IPSET_SOURCE_OPTIONS, columns: 6 },
+    { name: 'source_url', type: 'text', label: 'Source URL', columns: 6 },
+    {
+        name: 'source_key', type: 'text', label: 'API key', columns: 12,
+        placeholder: 'Leave blank to keep the current key',
+        help: 'Write-only — the stored value is never serialized, so this box is always empty.',
+    },
+    {
+        name: 'data', type: 'textarea', label: 'CIDR list', columns: 12,
+        placeholder: CIDR_PLACEHOLDER,
+        showWhen: { field: 'kind', value: 'custom' },
+        help: 'Saved as a list, so the stored CIDR count is recomputed by the server.',
+    },
+];
+
+export interface IPSetCreatePayload {
+    name: string;
+    kind: string;
+    source: string;
+    description?: string;
+    source_url?: string;
+    source_key?: string;
+    data?: string[];
+}
+
+/**
+ * Reproduce the source's kind→fields transform. Returns null when the dialog
+ * was cancelled or the derived country code is not the `[a-z]{2}` the backend
+ * requires to build an ipdeny URL.
+ */
+export function buildIPSetCreatePayload(data: FormData): IPSetCreatePayload | null {
+    const kind = String(data.kind ?? '');
+    if (kind === 'country') {
+        const code = String(data.country_code ?? '').toLowerCase();
+        // `_fetch_ipdeny` raises unless the derived code matches [a-z]{2}.
+        if (!/^[a-z]{2}$/.test(code)) return null;
+        return {
+            kind,
+            name: `country_${code}`,
+            source: 'ipdeny',
+            description: `Country block: ${countryName(code.toUpperCase())}`,
+        };
+    }
+    const base: IPSetCreatePayload = {
+        kind,
+        name: String(data.name ?? '').trim(),
+        source: kind === 'abuse' ? 'abuseipdb' : 'manual',
+        description: String(data.description ?? '').trim() || undefined,
+    };
+    if (kind === 'abuse') base.source_key = String(data.source_key ?? '').trim();
+    if (kind === 'datacenter') base.source_url = String(data.source_url ?? '').trim();
+    if (kind === 'custom') base.data = parseCidrLines(String(data.data ?? ''));
+    return base;
+}
+
+/** Open the create dialog and return the ready-to-POST body (or null). */
+export async function promptCreateIPSet(): Promise<IPSetCreatePayload | null> {
+    const data = await formModal({
+        title: 'Create IP set',
+        fields: IPSET_CREATE_FIELDS,
+        submitText: 'Create (disabled)',
+        intro: 'The set is created DISABLED. Enabling it is a separate, armed action — that is the only path that runs the backend’s cache-only safety check and pushes CIDRs to the fleet.',
+    });
+    if (!data) return null;
+    return buildIPSetCreatePayload(data);
+}
+
+/** Open the edit dialog and return the changed fields (or null). */
+export async function promptEditIPSet(row: IPSetRow): Promise<Record<string, unknown> | null> {
+    const data = await formModal({
+        title: `Edit ${row.name}`,
+        fields: IPSET_EDIT_FIELDS,
+        submitText: 'Save',
+        initial: {
+            name: row.name,
+            kind: row.kind,
+            description: row.description ?? '',
+            source: row.source,
+            source_url: row.source_url ?? '',
+            source_key: '',
+            data: '',
+        },
+    });
+    if (!data) return null;
+    const changes: Record<string, unknown> = {
+        name: String(data.name ?? '').trim(),
+        description: String(data.description ?? '').trim(),
+        source: String(data.source ?? ''),
+        source_url: String(data.source_url ?? '').trim(),
+    };
+    // Write-only: an empty box means "keep the stored key", never "clear it".
+    const key = String(data.source_key ?? '').trim();
+    if (key) changes.source_key = key;
+    // Only send `data` when the operator actually typed a list, and always as
+    // an array — see the file header.
+    const raw = String(data.data ?? '').trim();
+    if (raw) changes.data = parseCidrLines(raw);
+    return changes;
+}

package/src/admin/network/IPSetsPage.tsx

@@ -0,0 +1,177 @@
+// IP Sets — kernel-level firewall sets synced fleet-wide via ipset + iptables.
+// Port of web-mojo `admin/security/IPSetTablePage.js`.
+//
+// Deliberately ABSENT: batch delete. The source offered it. Multi-selecting
+// kernel firewall sets and deleting them in one action is precisely the "one
+// careless action changes the fleet" shape #1097 warned about, and the
+// operation is irreversible. Delete stays single-record and armed, from the
+// detail modal.
+import { useQueryClient } from '@tanstack/react-query';
+import {
+    Badge, ModelTable, fmt, toast,
+    type BatchAction, type Column, type FilterDef,
+} from '../../ui';
+import { useCan } from '../../client';
+import {
+    IPSET_CACHE_ONLY_HELP, IPSET_KIND_BADGE_OPTIONS, IPSET_MANAGE_PERMS,
+    IPSET_SOURCE_OPTIONS, IPSetModel, isCacheOnlyIPSet, type IPSetRow,
+} from './models';
+import { ipSetSourceLabel, showIPSetDetail } from './IPSetDetail';
+import { promptCreateIPSet } from './IPSetEditor';
+
+const COLUMNS: Column<IPSetRow>[] = [
+    {
+        key: 'is_enabled', label: 'Active', align: 'center', sortable: true, hideable: false,
+        render: (row) => row.is_enabled
+            ? <Badge tone="success"><i className="bi bi-check-lg" /> Enabled</Badge>
+            : <Badge tone="muted">Disabled</Badge>,
+    },
+    {
+        key: 'name', label: 'Name', sortable: true, hideable: false,
+        render: (row) => (
+            <>
+                <code>{row.name}</code>
+                {isCacheOnlyIPSet(row) && (
+                    <span className="chip chip-warning netsec-cache-chip" title={IPSET_CACHE_ONLY_HELP}>
+                        <i className="bi bi-database-lock" /> CACHE-ONLY
+                    </span>
+                )}
+            </>
+        ),
+    },
+    {
+        key: 'kind', label: 'Kind', sortable: true,
+        render: (row) => <Badge tone="info">{IPSET_KIND_BADGE_OPTIONS.find((o) => o.value === row.kind)?.label ?? row.kind}</Badge>,
+    },
+    {
+        key: 'description', label: 'Description',
+        render: (row) => row.description
+            ? <span title={row.description}>{fmt.truncate(row.description, 40)}</span>
+            : <span className="dim">—</span>,
+    },
+    {
+        // Labelled honestly: the column is only recomputed when the list is
+        // WRITTEN (a source refresh, or saving the list from the editor).
+        key: 'cidr_count', label: 'CIDRs', sortable: true, align: 'end',
+        render: (row) => <span title="Recorded when the CIDR list was last written">{row.cidr_count.toLocaleString()}</span>,
+    },
+    {
+        key: 'source', label: 'Source', sortable: true,
+        render: (row) => ipSetSourceLabel(row.source),
+    },
+    {
+        key: 'last_synced', label: 'Last synced', sortable: true,
+        render: (row) => row.last_synced == null
+            ? <span className="dim">Never</span>
+            : <span title={fmt.datetime(row.last_synced)}>{fmt.relative(row.last_synced)}</span>,
+    },
+    {
+        key: 'sync_error', label: 'Status', align: 'center',
+        render: (row) => row.sync_error
+            ? <span className="text-bad" title={row.sync_error}><i className="bi bi-exclamation-triangle" /> Error</span>
+            : <span className="text-ok"><i className="bi bi-check-circle" /></span>,
+    },
+];
+
+const FILTERS: FilterDef[] = [
+    { key: 'kind', label: 'Kind', type: 'select', options: IPSET_KIND_BADGE_OPTIONS },
+    { key: 'is_enabled', label: 'Enabled', type: 'boolean', trueLabel: 'Enabled', falseLabel: 'Disabled' },
+    { key: 'source', label: 'Source', type: 'select', options: IPSET_SOURCE_OPTIONS },
+    { key: 'name', label: 'Name contains', type: 'text' },
+    { key: 'description', label: 'Description contains', type: 'text' },
+    { key: 'sync_error__isnull', label: 'Sync health', type: 'boolean', trueLabel: 'No error', falseLabel: 'Has an error' },
+    { key: 'last_synced', label: 'Last synced', type: 'daterange' },
+];
+
+export function IPSetsPage() {
+    const qc = useQueryClient();
+    const canManage = useCan(IPSET_MANAGE_PERMS).can;
+    const save = IPSetModel.useSave();
+    const enable = IPSetModel.useAction('enable');
+    const disable = IPSetModel.useAction('disable');
+    const sync = IPSetModel.useAction('sync');
+    const refresh = IPSetModel.useAction('refresh_source');
+
+    const onAdd = async () => {
+        const payload = await promptCreateIPSet();
+        if (!payload) return;
+        try {
+            // No `is_enabled` in the body — a set is created disabled and
+            // enabling runs through the `enable` action, the only path that
+            // performs the backend's cache-only check.
+            await save.mutateAsync({ id: null, changes: payload as unknown as Record<string, unknown> });
+            await IPSetModel.invalidate(qc);
+            toast.success(`${payload.name} created — disabled. Enable it when you are ready to push it to the fleet.`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Could not create the IP set');
+        }
+    };
+
+    const batchActions: BatchAction<IPSetRow>[] = [
+        {
+            key: 'enable',
+            label: 'Enable',
+            icon: 'bi-toggle-on',
+            // The backend refuses cache-only sets outright; excluding them here
+            // means a mixed selection still succeeds for the rest.
+            eligible: (row) => !row.is_enabled && !isCacheOnlyIPSet(row),
+            confirm: 'Enable the selected sets? Their CIDRs are loaded into iptables on every fleet instance immediately.',
+            run: (row) => enable.mutateAsync({ id: row.id }),
+        },
+        {
+            key: 'disable',
+            label: 'Disable',
+            icon: 'bi-toggle-off',
+            eligible: (row) => row.is_enabled,
+            confirm: 'Disable the selected sets? Every fleet instance drops them from iptables.',
+            run: (row) => disable.mutateAsync({ id: row.id }),
+        },
+        {
+            key: 'sync',
+            label: 'Sync to fleet',
+            icon: 'bi-broadcast',
+            // `sync()` is a silent no-op for a disabled or cache-only set — it
+            // does not raise, so a "success" toast would be a lie.
+            eligible: (row) => row.is_enabled && !isCacheOnlyIPSet(row),
+            confirm: 'Push the selected sets to every fleet instance now?',
+            run: (row) => sync.mutateAsync({ id: row.id }),
+        },
+        {
+            key: 'refresh',
+            label: 'Refresh source',
+            icon: 'bi-arrow-clockwise',
+            // `refresh_from_source()` returns False immediately for
+            // source=manual — nothing is fetched and nothing changes.
+            eligible: (row) => row.source !== 'manual',
+            confirm: 'Refetch the provider list for the selected sets and replace their stored CIDRs?',
+            run: (row) => refresh.mutateAsync({ id: row.id }),
+        },
+    ];
+
+    return (
+        <ModelTable<IPSetRow>
+            model={IPSetModel}
+            eyebrow="Security · Network"
+            title="IP Sets"
+            searchPlaceholder="Search name or description"
+            columns={COLUMNS}
+            filters={FILTERS}
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'enabled', label: 'Enforcing', params: { is_enabled: 'true' } },
+                { key: 'staged', label: 'Staged', params: { is_enabled: 'false' } },
+                { key: 'errors', label: 'Sync errors', params: { sync_error__isnull: 'false' } },
+            ]}
+            defaultSort="name"
+            selectable={canManage}
+            batchActions={canManage ? batchActions : []}
+            columnChooser
+            persistState
+            persistKey="admin:network:ip-sets"
+            exportFormats={['csv', 'json']}
+            rowTone={(row) => row.sync_error ? 'danger' : isCacheOnlyIPSet(row) ? 'warning' : null}
+            onRowClick={(row) => showIPSetDetail(row.id)}
+            {...(canManage ? { addLabel: 'Create IP set', onAdd: () => void onAdd() } : {})}
+        />
+    );
+}

package/src/admin/network/geofence/BlocksTab.tsx

@@ -0,0 +1,289 @@
+// BlocksTab — the evidence surface. Port of web-mojo `GeofenceBlocksView.js`.
+//
+// Activity strip: the two KPI tiles the backend really records
+// (`geofence:blocks`, `geofence:exempt`, both dual-written to `global` and
+// `group-<pk>`), a chart over both with PNG export for compliance evidence,
+// and a server-derived "top blocked countries" list from the
+// `geofence:blocks:country:*` slug family. Every metrics read is gated on
+// METRICS_GLOBAL_VIEW_PERMS — `check_view_permissions` demands a GLOBAL
+// view_metrics/metrics grant for `account="global"`, so a geofence-only
+// operator would otherwise fire three requests that all 403.
+//
+// TWO CORRECTIONS over the source:
+//   · the table offered ONLY `geofence_block` while the second KPI tile
+//     counted exemptions, so the table could never explain the tile. A
+//     category segment now covers Blocks · Exemptions used · Both.
+//   · the Endpoint column read `metadata.scope`, which the reporter never
+//     writes (`scope` is the top-level Event column and stays "global" for
+//     every geofence row). It is `metadata.geofence_scope`, and the column
+//     rendered "—" on every deployment until now.
+import { useRef, useState } from 'react';
+import {
+    Badge, ModelTable, fmt, groupByDay,
+    type Column, type FilterDef, type Tone,
+} from '../../../ui';
+import { useCan } from '../../../client';
+import { MetricsChart, MetricsMiniWidget, exportChartPng } from '../../../charts';
+import { COUNTRY_OPTIONS, countryName } from '../../../charts/worldmap/countryCentroids';
+import { countryFlag } from '../../security/geoip';
+import { showEventDetail, type EventRow } from '../../incidents';
+import {
+    GEOFENCE_EVENT_CATEGORIES, GEOFENCE_LEVEL_OPTIONS, GeofenceEventModel,
+    METRICS_GLOBAL_VIEW_PERMS, useGeofenceCountryTotals,
+} from '../models';
+import { SECURITY_EVENTS_PERMS, describeDecision, regionName } from './geofence-data';
+
+const SLUG_BLOCKS = 'geofence:blocks';
+const SLUG_EXEMPT = 'geofence:exempt';
+
+function metaString(row: EventRow, key: string): string {
+    const value = row.metadata?.[key];
+    return typeof value === 'string' ? value : value == null ? '' : String(value);
+}
+
+/**
+ * Plain-language cell text for a block event's reason code. `lookup_failed`
+ * gets its own copy: the log genuinely cannot distinguish a fail-open
+ * pass-through (level 6) from a fail-closed block (level 5) — the level column
+ * carries that, and pretending otherwise here would be a guess.
+ */
+export function blockReasonText(reason: string): string {
+    if (!reason) return '—';
+    if (reason === 'lookup_failed') return 'Location lookups were unavailable — the fail posture applied.';
+    return describeDecision({ reason, allowed: false });
+}
+
+const COLUMNS: Column<EventRow>[] = [
+    {
+        key: 'created', label: 'When', sortable: true, hideable: false,
+        render: (row) => <span title={fmt.datetime(row.created)}>{fmt.relative(row.created)}</span>,
+    },
+    {
+        key: 'category', label: 'Kind',
+        render: (row) => row.category === GEOFENCE_EVENT_CATEGORIES.exempt
+            ? <Badge tone="info"><i className="bi bi-shield-check" /> Exempt</Badge>
+            : <Badge tone="danger"><i className="bi bi-slash-circle" /> Block</Badge>,
+    },
+    {
+        key: 'metadata__reason', label: 'What happened', hideable: false,
+        render: (row) => {
+            const text = blockReasonText(metaString(row, 'reason'));
+            return <span title={text}>{fmt.truncate(text, 72)}</span>;
+        },
+    },
+    {
+        // The INDEXED top-level column, populated by Event.sync_metadata from
+        // the geolocated source IP — not the metadata copy.
+        key: 'country_code', label: 'Country',
+        render: (row) => {
+            const code = row.country_code || metaString(row, 'country_code');
+            if (!code) return <span className="dim">—</span>;
+            const flag = countryFlag(code);
+            return <span title={countryName(code)}>{flag && <span className="geoip-flag">{flag}</span>}{code}</span>;
+        },
+    },
+    {
+        key: 'metadata__region_code', label: 'Region',
+        render: (row) => {
+            const code = metaString(row, 'region_code');
+            return code ? regionName(code) : <span className="dim">—</span>;
+        },
+    },
+    {
+        key: 'source_ip', label: 'Source IP',
+        render: (row) => row.source_ip ? <code>{row.source_ip}</code> : <span className="dim">—</span>,
+    },
+    {
+        key: 'metadata__geofence_scope', label: 'Endpoint scope',
+        render: (row) => {
+            const scope = metaString(row, 'geofence_scope');
+            return scope ? <code className="dim">{scope}</code> : <span className="dim">—</span>;
+        },
+    },
+    {
+        key: 'level', label: 'Level', sortable: true, align: 'center',
+        render: (row) => <Badge tone={levelTone(row.level)}>L{row.level}</Badge>,
+    },
+];
+
+function levelTone(level: number): Tone {
+    return level >= 7 ? 'danger' : level >= 5 ? 'warning' : 'muted';
+}
+
+const FILTERS: FilterDef[] = [
+    { key: 'created', label: 'When', type: 'daterange' },
+    { key: 'level', label: 'Level', type: 'select', options: GEOFENCE_LEVEL_OPTIONS },
+    { key: 'country_code', label: 'Country', type: 'select', options: [...COUNTRY_OPTIONS] },
+    { key: 'source_ip', label: 'Source IP contains', type: 'text' },
+    { key: 'metadata__geofence_scope', label: 'Endpoint scope', type: 'text', lookup: 'exact' },
+    { key: 'metadata__reason', label: 'Reason code', type: 'text', lookup: 'exact' },
+];
+
+function TopCountries({ days }: { days: number }) {
+    const query = useGeofenceCountryTotals(days);
+    if (query.isPending) return <p className="dim">Loading country totals…</p>;
+    if (query.error) return <p className="text-bad">{query.error.message}</p>;
+    const rows = query.data ?? [];
+    if (rows.length === 0) return <p className="dim">No per-country block counters recorded in this window.</p>;
+    const max = rows[0]!.total || 1;
+    return (
+        <ol className="geo-country-bars">
+            {rows.slice(0, 12).map((row) => (
+                <li key={row.country_code}>
+                    <span className="geo-country-label">
+                        {countryFlag(row.country_code) && <span className="geoip-flag">{countryFlag(row.country_code)}</span>}
+                        {countryName(row.country_code)}
+                    </span>
+                    <span className="geo-country-bar">
+                        <span className="geo-country-fill" style={{ width: `${Math.max(3, (row.total / max) * 100)}%` }} />
+                    </span>
+                    <b>{row.total.toLocaleString()}</b>
+                </li>
+            ))}
+        </ol>
+    );
+}
+
+export function BlocksTab() {
+    const { can: canMetrics } = useCan(METRICS_GLOBAL_VIEW_PERMS);
+    const { can: canEvents } = useCan(SECURITY_EVENTS_PERMS);
+    const chartRef = useRef<HTMLDivElement>(null);
+    const [category, setCategory] = useState<'block' | 'exempt' | 'both'>('block');
+
+    const categoryParams: Record<string, string> = category === 'both'
+        ? { category__in: `${GEOFENCE_EVENT_CATEGORIES.block},${GEOFENCE_EVENT_CATEGORIES.exempt}` }
+        : { category: GEOFENCE_EVENT_CATEGORIES[category] };
+
+    return (
+        <>
+            {canMetrics ? (
+                <>
+                    <div className="geo-kpis">
+                        <MetricsMiniWidget
+                            title="Geofence blocks"
+                            icon="bi bi-slash-circle"
+                            slugs={[SLUG_BLOCKS]}
+                            account="global"
+                            granularity="days"
+                            defaultRange="30d"
+                            chartType="bar"
+                            tone="bad"
+                            height={72}
+                            showTrending
+                            subtitle={(ctx) => <><b>{ctx.total.toLocaleString()}</b> in 30d</>}
+                        />
+                        <MetricsMiniWidget
+                            title="Exempt passes"
+                            icon="bi bi-shield-check"
+                            slugs={[SLUG_EXEMPT]}
+                            account="global"
+                            granularity="days"
+                            defaultRange="30d"
+                            chartType="bar"
+                            tone="info"
+                            height={72}
+                            showTrending
+                            subtitle={(ctx) => <><b>{ctx.total.toLocaleString()}</b> in 30d</>}
+                        />
+                    </div>
+
+                    <div className="geo-chart-head">
+                        <span className="dim">
+                            Counters increment on every block, including the repeats that are deduped
+                            in the log below — so the tiles will read higher than the row count.
+                        </span>
+                        <button
+                            type="button"
+                            className="btn btn-compact"
+                            onClick={() => exportChartPng(chartRef.current, { filename: 'geofence-blocks.png' })}
+                        >
+                            <i className="bi bi-download" /> Export PNG
+                        </button>
+                    </div>
+                    <div ref={chartRef} className="geo-chart">
+                        <MetricsChart
+                            title="Blocks over time"
+                            slugs={[SLUG_BLOCKS, SLUG_EXEMPT]}
+                            seriesLabels={{ [SLUG_BLOCKS]: 'Blocks', [SLUG_EXEMPT]: 'Exempt passes' }}
+                            account="global"
+                            defaultRange="30d"
+                            defaultGranularity="days"
+                            defaultType="bar"
+                            height={220}
+                        />
+                    </div>
+
+                    <div className="panel netsec-card">
+                        <div className="netsec-card-head">
+                            <span>Top blocked countries</span>
+                            <span className="eyebrow">server-derived · 30 days</span>
+                        </div>
+                        <div className="netsec-card-body">
+                            <TopCountries days={30} />
+                            <p className="dim">
+                                Totals come from the per-country metric counters, not from the rows below —
+                                a page of events could never account for a whole window.
+                            </p>
+                        </div>
+                    </div>
+                </>
+            ) : (
+                <div className="netsec-note netsec-note-info">
+                    <i className="bi bi-bar-chart" />
+                    <div>
+                        Block counters and the country breakdown read global metrics, which need the
+                        <code> view_metrics</code> or <code>metrics</code> grant. No request was issued.
+                    </div>
+                </div>
+            )}
+
+            {canEvents ? (
+                <>
+                    <div className="geo-cat-seg">
+                        <div className="seg">
+                            {([
+                                ['block', 'Blocks'],
+                                ['exempt', 'Exemptions used'],
+                                ['both', 'Both'],
+                            ] as const).map(([value, label]) => (
+                                <button
+                                    key={value}
+                                    type="button"
+                                    className={`seg-btn${category === value ? ' seg-active' : ''}`}
+                                    onClick={() => setCategory(value)}
+                                >
+                                    {label}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                    <ModelTable<EventRow>
+                        key={category}
+                        model={GeofenceEventModel}
+                        eyebrow="Geofencing"
+                        title="Blocks log"
+                        searchable={false}
+                        columns={COLUMNS}
+                        filters={FILTERS}
+                        defaultParams={categoryParams}
+                        defaultSort="-created"
+                        columnChooser
+                        persistState
+                        persistKey={`admin:network:geofence-blocks:${category}`}
+                        rowTone={(row) => row.level >= 7 ? 'danger' : row.level >= 5 ? 'warning' : null}
+                        onRowClick={(row) => showEventDetail(row.id)}
+                        {...groupByDay<EventRow>('created')}
+                    />
+                </>
+            ) : (
+                <div className="netsec-note netsec-note-info">
+                    <i className="bi bi-eye-slash" />
+                    <div>
+                        The block log reads security events — it requires security-events access
+                        (<code>view_security</code>). No request was issued.
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}