@mohasinac/appkit 4.10.0 → 4.11.0

package/dist/features/admin/components/AdminAdsView.js

@@ -1,65 +1,30 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { useApiMutation } from "@mohasinac/appkit/client";
+import { useApiMutation, sieveFilter, SIEVE_OP, sortBy } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Button, Checkbox, Div, Input, Label, Row, Select, Stack, StackedViewShell, Text, TextLink } from "../../../ui";
+import { Alert, Button, Checkbox, Div, Input, Label, PaginatedSelect, Row, Select, Stack, Text, TextLink } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { DataTable } from "./DataTable";
+import { DataListingView } from "./DataListingView";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
 function AdsSettingsPanel({ adsenseClientId, setAdsenseClientId, thirdPartyScriptUrl, setThirdPartyScriptUrl, consentRequired, setConsentRequired, serverCredentialIssues, localCredentialIssues, credentialStatus, providerCredentialsMasked, settingsMutation, hasPendingCredentialInput, currentConsentRequired, settingsMessage, onSave, }) {
     return (_jsxs(Stack, { border: "default", className: __P.p3, gap: "3", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Provider and publish settings" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "Save provider credentials here before publishing AdSense or third-party inventory." }), serverCredentialIssues.length > 0 ? (_jsx(Alert, { variant: "warning", title: "Provider credentials need attention", children: serverCredentialIssues.join("; ") })) : null, _jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 md:grid-cols-2", children: [_jsx(Input, { label: "AdSense client id", value: adsenseClientId, onChange: (event) => setAdsenseClientId(event.target.value), placeholder: providerCredentialsMasked?.adsenseClientId || "ca-pub-XXXXXXXXXX" }), _jsx(Input, { label: "Third-party script URL", value: thirdPartyScriptUrl, onChange: (event) => setThirdPartyScriptUrl(event.target.value), placeholder: providerCredentialsMasked?.thirdPartyScriptUrl || "https://..." })] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: ["Stored credentials: AdSense ", credentialStatus?.hasAdsenseClientId ? "configured" : "missing", " \u00B7 Third-party ", credentialStatus?.hasThirdPartyScriptUrl ? "configured" : "missing"] }), _jsxs(Row, { align: "center", justify: "between", gap: "3", children: [_jsxs(Label, { layout: "flex", gap: "md", size: "sm", children: [_jsx(Checkbox, { bare: true, checked: consentRequired, onChange: (event) => setConsentRequired(event.target.checked) }), "Require consent globally for ad rendering"] }), _jsx(Button, { size: "sm", variant: "outline", disabled: settingsMutation.isPending || localCredentialIssues.length > 0 || (!hasPendingCredentialInput && consentRequired === Boolean(currentConsentRequired)), onClick: onSave, children: settingsMutation.isPending ? "Saving..." : "Save settings" })] }), localCredentialIssues.length > 0 ? (_jsx(Alert, { variant: "error", title: "Fix settings before saving", children: localCredentialIssues.join("; ") })) : null, settingsMessage ? (_jsx(Alert, { variant: settingsMessage.toLowerCase().includes("failed") ? "error" : "success", title: "Settings", children: settingsMessage })) : null] }));
 }
-function AdsFilterRow({ q, setQ, status, setStatus, provider, setProvider, placement, setPlacement, placements, onPageReset }) {
-    return (_jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 md:grid-cols-4", children: [_jsx(Input, { label: "Search", value: q, onChange: (event) => { onPageReset(); setQ(event.target.value); }, placeholder: "Search ads" }), _jsx(Select, { label: "Status", value: status, options: [
-                    { label: "All", value: "all" },
-                    { label: "Draft", value: "draft" },
-                    { label: "Active", value: "active" },
-                    { label: "Scheduled", value: "scheduled" },
-                    { label: "Paused", value: "paused" },
-                ], onChange: (event) => { onPageReset(); setStatus(event.target.value); } }), _jsx(Select, { label: "Provider", value: provider, options: [
-                    { label: "All", value: "all" },
-                    { label: "Manual", value: "manual" },
-                    { label: "AdSense", value: "adsense" },
-                    { label: "Third Party", value: "thirdParty" },
-                ], onChange: (event) => { onPageReset(); setProvider(event.target.value); } }), _jsx(Select, { label: "Placement", value: placement, options: [
-                    { label: "All", value: "all" },
-                    ...placements.map((item) => ({ label: item.label, value: item.id })),
-                ], onChange: (event) => { onPageReset(); setPlacement(event.target.value); } })] }));
-}
-export function AdminAdsView({ endpoint = ADMIN_ENDPOINTS.ADS, labels = {}, createHref = "/admin/ads/new", renderEditLink, ...rest }) {
+export function AdminAdsView({ endpoint = ADMIN_ENDPOINTS.ADS, labels = {}, createHref = "/admin/ads/new", renderEditLink, }) {
     const queryClient = useQueryClient();
-    const [page, setPage] = React.useState(1);
-    const [pageSize] = React.useState(20);
-    const [q, setQ] = React.useState("");
-    const [status, setStatus] = React.useState("all");
-    const [provider, setProvider] = React.useState("all");
-    const [placement, setPlacement] = React.useState("all");
     const [consentRequired, setConsentRequired] = React.useState(false);
     const [adsenseClientId, setAdsenseClientId] = React.useState("");
     const [thirdPartyScriptUrl, setThirdPartyScriptUrl] = React.useState("");
     const [settingsMessage, setSettingsMessage] = React.useState(null);
-    const queryKey = ["admin-ads", endpoint, page, pageSize, q, status, provider, placement];
-    const adsQuery = useQuery({
-        queryKey,
-        queryFn: () => {
-            const sp = new URLSearchParams();
-            sp.set("page", String(page));
-            sp.set("pageSize", String(pageSize));
-            if (q.trim())
-                sp.set("q", q.trim());
-            if (status !== "all")
-                sp.set("status", status);
-            if (provider !== "all")
-                sp.set("provider", provider);
-            if (placement !== "all")
-                sp.set("placement", placement);
-            return apiClient.get(`${endpoint}?${sp.toString()}`);
-        },
+    // Lightweight metadata-only fetch (placements, consent, credential status) —
+    // decoupled from the paginated listing query DataListingView owns internally.
+    const metaQuery = useQuery({
+        queryKey: ["admin-ads-meta", endpoint],
+        queryFn: () => apiClient.get(`${endpoint}?page=1&pageSize=1`),
         staleTime: 10000,
     });
     const statusMutation = useApiMutation({
@@ -68,13 +33,14 @@ export function AdminAdsView({ endpoint = ADMIN_ENDPOINTS.ADS, labels = {}, crea
         },
         onSuccess: async () => {
             await queryClient.invalidateQueries({ queryKey: ["admin-ads"] });
+            await queryClient.invalidateQueries({ queryKey: ["admin-ads-meta"] });
         },
     });
     React.useEffect(() => {
-        if (!adsQuery.data)
+        if (!metaQuery.data)
             return;
-        setConsentRequired(Boolean(adsQuery.data.consentRequired));
-    }, [adsQuery.data]);
+        setConsentRequired(Boolean(metaQuery.data.consentRequired));
+    }, [metaQuery.data]);
     const settingsMutation = useApiMutation({
         mutationFn: async (payload) => {
             await apiClient.patch(endpoint, payload);
@@ -83,46 +49,14 @@ export function AdminAdsView({ endpoint = ADMIN_ENDPOINTS.ADS, labels = {}, crea
             setSettingsMessage("Ad settings saved.");
             setAdsenseClientId("");
             setThirdPartyScriptUrl("");
-            await queryClient.invalidateQueries({ queryKey: ["admin-ads"] });
+            await queryClient.invalidateQueries({ queryKey: ["admin-ads-meta"] });
         },
         onError: (error) => {
             setSettingsMessage(error instanceof Error ? error.message : "Failed to save ad settings");
         },
     });
-    const rows = (adsQuery.data?.items ?? []);
-    const columns = React.useMemo(() => [
-        {
-            key: "name",
-            header: "Ad",
-            render: (row) => (_jsxs(Div, { children: [_jsx(Text, { weight: "medium", children: row.name }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: row.id })] })),
-        },
-        {
-            key: "provider",
-            header: "Provider",
-            render: (row) => _jsx(Text, { className: "tracking-wide", size: "xs", transform: "uppercase", children: row.provider }),
-        },
-        {
-            key: "status",
-            header: "Status",
-            render: (row) => (_jsxs(Div, { children: [_jsx(Text, { className: "tracking-wide", size: "xs", transform: "uppercase", children: row.status }), row.publishReady === false ? (_jsx(Text, { className: "text-[11px] text-error", children: "Publish blocked" })) : null] })),
-        },
-        {
-            key: "placementIds",
-            header: "Placements",
-            render: (row) => (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: row.placementIds.join(", ") })),
-        },
-        {
-            key: "actions",
-            header: "Actions",
-            render: (row) => {
-                const nextStatus = row.status === "active" ? "paused" : "active";
-                const cannotPublish = nextStatus === "active" && row.publishReady === false;
-                return (_jsxs(Row, { align: "center", gap: "sm", children: [renderEditLink ? renderEditLink(row) : (_jsx(TextLink, { variant: "bare", href: `/admin/ads/${row.id}/edit`, rounded: "md", paddingX: "sm", size: "xs", layout: "inline-flex", align: "center", className: "h-8 border border-neutral-200 border-[var(--appkit-color-border)]", children: "Edit" })), _jsx(Button, { size: "sm", variant: "outline", disabled: statusMutation.isPending || cannotPublish, onClick: () => statusMutation.mutate({ id: row.id, nextStatus }), children: row.status === "active" ? "Pause" : "Publish" })] }));
-            },
-        },
-    ], [renderEditLink, statusMutation]);
-    const placements = adsQuery.data?.placements ?? [];
-    const credentialStatus = adsQuery.data?.providerCredentialStatus;
+    const placements = metaQuery.data?.placements ?? [];
+    const credentialStatus = metaQuery.data?.providerCredentialStatus;
     const serverCredentialIssues = credentialStatus?.issues ?? [];
     const localCredentialIssues = React.useMemo(() => {
         const issues = [];
@@ -155,11 +89,74 @@ export function AdminAdsView({ endpoint = ADMIN_ENDPOINTS.ADS, labels = {}, crea
         };
         settingsMutation.mutate(payload);
     };
-    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Ad Inventory", sections: [
-            _jsxs(Row, { align: "center", justify: "between", gap: "3", children: [_jsx(Text, { variant: "secondary", children: "Manage ad inventory, placement mapping, and publishing state." }), _jsx(TextLink, { variant: "bare", href: createHref, rounded: "md", paddingX: "sm", size: "sm", weight: "medium", layout: "inline-flex", align: "center", className: "h-9 bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text)]", children: "New ad" })] }),
-            adsQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load ads", children: adsQuery.error instanceof Error ? adsQuery.error.message : "Unknown error" })) : null,
-            _jsx(AdsSettingsPanel, { adsenseClientId: adsenseClientId, setAdsenseClientId: setAdsenseClientId, thirdPartyScriptUrl: thirdPartyScriptUrl, setThirdPartyScriptUrl: setThirdPartyScriptUrl, consentRequired: consentRequired, setConsentRequired: setConsentRequired, serverCredentialIssues: serverCredentialIssues, localCredentialIssues: localCredentialIssues, credentialStatus: credentialStatus, providerCredentialsMasked: adsQuery.data?.providerCredentialsMasked, settingsMutation: settingsMutation, hasPendingCredentialInput: hasPendingCredentialInput, currentConsentRequired: Boolean(adsQuery.data?.consentRequired), settingsMessage: settingsMessage, onSave: saveSettings }),
-            _jsx(AdsFilterRow, { q: q, setQ: setQ, status: status, setStatus: setStatus, provider: provider, setProvider: setProvider, placement: placement, setPlacement: setPlacement, placements: placements, onPageReset: () => setPage(1) }),
-            _jsx(DataTable, { columns: columns, rows: rows, isLoading: adsQuery.isLoading, currentPage: adsQuery.data?.page ?? page, totalPages: adsQuery.data?.totalPages ?? 1, onPageChange: setPage, emptyLabel: "No ads found" }),
-        ] }));
+    const columns = [
+        {
+            key: "name",
+            header: "Ad",
+            render: (row) => (_jsxs(Div, { children: [_jsx(Text, { weight: "medium", children: row.name }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: row.id })] })),
+        },
+        {
+            key: "provider",
+            header: "Provider",
+            render: (row) => _jsx(Text, { className: "tracking-wide", size: "xs", transform: "uppercase", children: row.provider }),
+        },
+        {
+            key: "status",
+            header: "Status",
+            render: (row) => (_jsxs(Div, { children: [_jsx(Text, { className: "tracking-wide", size: "xs", transform: "uppercase", children: row.status }), row.publishReady === false ? (_jsx(Text, { className: "text-[11px] text-error", children: "Publish blocked" })) : null] })),
+        },
+        {
+            key: "placementIds",
+            header: "Placements",
+            render: (row) => (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: row.placementIds.join(", ") })),
+        },
+        {
+            key: "actions",
+            header: "Actions",
+            render: (row) => {
+                const nextStatus = row.status === "active" ? "paused" : "active";
+                const cannotPublish = nextStatus === "active" && row.publishReady === false;
+                return (_jsxs(Row, { align: "center", gap: "sm", children: [renderEditLink ? renderEditLink(row) : (_jsx(TextLink, { variant: "bare", href: `/admin/ads/${row.id}/edit`, rounded: "md", paddingX: "sm", size: "xs", layout: "inline-flex", align: "center", className: "h-8 border border-neutral-200 border-[var(--appkit-color-border)]", children: "Edit" })), _jsx(Button, { size: "sm", variant: "outline", disabled: statusMutation.isPending || cannotPublish, onClick: () => statusMutation.mutate({ id: row.id, nextStatus }), children: row.status === "active" ? "Pause" : "Publish" })] }));
+            },
+        },
+    ];
+    const config = {
+        portal: "admin",
+        title: labels.title ?? "Ad Inventory",
+        searchPlaceholder: "Search ads",
+        emptyLabel: "No ads found",
+        filterKeys: ["status", "provider", "placement"],
+        defaultSort: sortBy("updatedAt", "DESC"),
+        queryKey: ["admin-ads", endpoint],
+        endpoint,
+        sortOptions: [{ value: sortBy("updatedAt", "DESC"), label: "Recently updated" }],
+        columns,
+        mapRows: (response) => response.items,
+        getTotal: (response) => response.total,
+        buildFilters: (state) => {
+            const clauses = [];
+            if (state.status)
+                clauses.push(sieveFilter("status", SIEVE_OP.EQ, state.status));
+            if (state.provider)
+                clauses.push(sieveFilter("provider", SIEVE_OP.EQ, state.provider));
+            if (state.placement)
+                clauses.push(sieveFilter("placement", SIEVE_OP.EQ, state.placement));
+            return clauses.length ? clauses.join(",") : undefined;
+        },
+        toolbarExtra: (_jsx(TextLink, { variant: "bare", href: createHref, rounded: "md", paddingX: "sm", size: "sm", weight: "medium", layout: "inline-flex", align: "center", className: "h-9 bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text)]", children: "New ad" })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Select, { label: "Status", value: pendingFilters.status || "all", options: [
+                        { label: "All", value: "all" },
+                        { label: "Draft", value: "draft" },
+                        { label: "Active", value: "active" },
+                        { label: "Scheduled", value: "scheduled" },
+                        { label: "Paused", value: "paused" },
+                    ], onChange: (e) => setPendingFilters((p) => ({ ...p, status: e.target.value === "all" ? "" : e.target.value })) }), _jsx(Select, { label: "Provider", value: pendingFilters.provider || "all", options: [
+                        { label: "All", value: "all" },
+                        { label: "Manual", value: "manual" },
+                        { label: "AdSense", value: "adsense" },
+                        { label: "Third Party", value: "thirdParty" },
+                    ], onChange: (e) => setPendingFilters((p) => ({ ...p, provider: e.target.value === "all" ? "" : e.target.value })) }), _jsx(Label, { size: "sm", color: "muted", children: "Placement" }), _jsx(PaginatedSelect, { value: pendingFilters.placement || undefined, onChange: (v) => setPendingFilters((p) => ({ ...p, placement: v ?? "" })), options: placements.map((item) => ({ value: item.id, label: item.label })) })] })),
+        renderAboveContent: () => (_jsxs(Stack, { gap: "md", className: __P.p3, children: [metaQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load ads", children: metaQuery.error instanceof Error ? metaQuery.error.message : "Unknown error" })) : null, _jsx(AdsSettingsPanel, { adsenseClientId: adsenseClientId, setAdsenseClientId: setAdsenseClientId, thirdPartyScriptUrl: thirdPartyScriptUrl, setThirdPartyScriptUrl: setThirdPartyScriptUrl, consentRequired: consentRequired, setConsentRequired: setConsentRequired, serverCredentialIssues: serverCredentialIssues, localCredentialIssues: localCredentialIssues, credentialStatus: credentialStatus, providerCredentialsMasked: metaQuery.data?.providerCredentialsMasked, settingsMutation: settingsMutation, hasPendingCredentialInput: hasPendingCredentialInput, currentConsentRequired: Boolean(metaQuery.data?.consentRequired), settingsMessage: settingsMessage, onSave: saveSettings })] })),
+    };
+    return _jsx(DataListingView, { config: config });
 }

package/dist/features/admin/components/AdminAllEventEntriesView.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
+import { FilterChipGroup, ListingLayout, RecordDetailModal, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_EVENT_ENTRY_STATUS_TABS } from "../constants/filter-tabs";
@@ -15,6 +15,7 @@ import { apiClient } from "../../../http";
 export function AdminAllEventEntriesView({ children, ...props }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
+    const [selected, setSelected] = React.useState(null);
     const updateMutation = useApiMutation({
         mutationFn: async ({ id, status }) => {
             await apiClient.patch(ADMIN_ENDPOINTS.ADMIN_EVENT_ENTRY_BY_ID(id), { status });
@@ -52,10 +53,18 @@ export function AdminAllEventEntriesView({ children, ...props }) {
             status: toStringValue(item.status ?? item.reviewStatus, "PENDING"),
             updatedAt: toRelativeDate(item.submittedAt ?? item.createdAt),
             eventId: toStringValue(item.eventId, ""),
+            _raw: item,
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
         buildFilters: (state) => state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined,
+        // Confirm/waitlist/cancel used to be the only affordances — an admin
+        // decided an entry's fate without ever seeing the entrant's answers.
+        onRowClick: (row) => setSelected(row),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: "View details",
+                    onClick: () => setSelected(row),
+                },
                 {
                     label: ACTIONS.ADMIN["confirm-entry"].label,
                     onClick: () => updateMutation.mutate({ id: row.id, status: "CONFIRMED" }),
@@ -72,5 +81,11 @@ export function AdminAllEventEntriesView({ children, ...props }) {
             ] })),
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_EVENT_ENTRY_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
     };
-    return _jsx(DataListingView, { config: config });
+    const raw = selected?._raw ?? {};
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: Boolean(selected), onClose: () => setSelected(null), title: selected?.primary ?? "Event Entry", badges: [{ label: selected?.status ?? "PENDING", variant: "default" }], fields: [
+                    { label: "Event", value: toStringValue(raw.eventId, "—") },
+                    { label: "Email", value: toStringValue(raw.userEmail, "—") },
+                    { label: "Points", value: String(raw.points ?? "—") },
+                    { label: "Submitted", value: selected?.updatedAt ?? "—" },
+                ], metadata: raw.responses ?? undefined })] }));
 }

package/dist/features/admin/components/AdminAuditLogView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * AdminAuditLogView — read-only list of admin action audit entries.
+ * Entries are written exclusively via `recordAdminAction()` from the
+ * instrumented privileged-action call sites (bans, checkout bypass, coupon
+ * edits, payout mark-paid, store status changes, role changes) — this view
+ * has no create/edit/delete affordance, only "view details".
+ */
+import React from "react";
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminAuditLogViewProps = ListingLayoutProps;
+export declare function AdminAuditLogView({ children, ...props }: AdminAuditLogViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminAuditLogView.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AdminAuditLogView — read-only list of admin action audit entries.
+ * Entries are written exclusively via `recordAdminAction()` from the
+ * instrumented privileged-action call sites (bans, checkout bypass, coupon
+ * edits, payout mark-paid, store status changes, role changes) — this view
+ * has no create/edit/delete affordance, only "view details".
+ */
+import React, { useState } from "react";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
+import { sortBy } from "@mohasinac/appkit/client";
+import { FilterChipGroup, Input, ListingLayout, RowActionMenu, Stack } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ADMIN_AUDIT_LOG_ACTION_TABS } from "../constants/filter-tabs";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+import { ViewAuditLogEntryModal } from "./ViewAuditLogEntryModal";
+const ACTION_LABELS = {
+    user_hard_ban: "User hard-banned",
+    user_soft_ban: "User soft-banned",
+    user_unban: "User unbanned",
+    checkout_bypass: "Admin checkout bypass",
+    coupon_update: "Coupon updated",
+    payout_mark_paid: "Payout marked paid",
+    store_status_change: "Store status changed",
+    user_role_change: "User role changed",
+};
+export function AdminAuditLogView({ children, ...props }) {
+    const [viewEntry, setViewEntry] = useState(null);
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const openEntry = (row) => {
+        const raw = row._raw;
+        setViewEntry({
+            id: row.id,
+            actorUid: toStringValue(raw.actorUid, ""),
+            actorName: toStringValue(raw.actorName, "") || undefined,
+            action: toStringValue(raw.action, ""),
+            targetType: toStringValue(raw.targetType, ""),
+            targetId: toStringValue(raw.targetId, ""),
+            targetLabel: toStringValue(raw.targetLabel, "") || undefined,
+            reason: toStringValue(raw.reason, "") || undefined,
+            metadata: raw.metadata ?? undefined,
+            createdAt: toStringValue(raw.createdAt, "") || undefined,
+        });
+    };
+    const config = {
+        portal: "admin",
+        title: "Audit Log",
+        searchPlaceholder: "Search by actor uid",
+        emptyLabel: "No audit log entries found",
+        filterKeys: ["action", "actorUid"],
+        defaultSort: sortBy("createdAt", "DESC"),
+        queryKey: ["admin", "audit-log", "listing"],
+        endpoint: ADMIN_ENDPOINTS.AUDIT_LOG,
+        sortOptions: [
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
+        ],
+        mapRows: (response) => toRecordArray(response.entries).map((item, index) => {
+            const action = toStringValue(item.action, "unknown");
+            return {
+                id: toStringValue(item.id, `audit-${index}`),
+                primary: ACTION_LABELS[action] ?? action,
+                secondary: [
+                    toStringValue(item.actorName ?? item.actorUid, "Unknown actor"),
+                    `${toStringValue(item.targetType, "")}: ${toStringValue(item.targetLabel ?? item.targetId, "")}`,
+                ].join(" · "),
+                status: action,
+                updatedAt: toRelativeDate(item.createdAt),
+                _raw: item,
+            };
+        }),
+        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
+        onRowClick: (row) => openEntry(row),
+        buildFilters: (state) => {
+            const parts = [];
+            if (state.action && state.action !== "All")
+                parts.push(sieveFilter("action", SIEVE_OP.EQ, state.action));
+            if (state.actorUid)
+                parts.push(sieveFilter("actorUid", SIEVE_OP.EQ, state.actorUid));
+            return parts.length > 0 ? parts.join(",") : undefined;
+        },
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: "View details",
+                    onClick: () => openEntry(row),
+                },
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Stack, { gap: "md", children: [_jsx(FilterChipGroup, { label: "Action", tabs: ADMIN_AUDIT_LOG_ACTION_TABS, value: pendingFilters.action ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, action: id })) }), _jsx(Input, { label: "Actor UID", value: pendingFilters.actorUid ?? "", onChange: (e) => setPendingFilters((p) => ({ ...p, actorUid: e.target.value })), placeholder: "Filter by actor uid" })] })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(ViewAuditLogEntryModal, { entry: viewEntry, isOpen: Boolean(viewEntry), onClose: () => setViewEntry(null) })] }));
+}

package/dist/features/admin/components/AdminBlogEditorView.js

@@ -1,14 +1,26 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
 import { useApiMutation } from "@mohasinac/appkit/client";
-import React from "react";
+import React, { useEffect, useMemo } from "react";
+import { z } from "zod";
 import { useQuery } from "@tanstack/react-query";
 import { Button, ConfirmDeleteModal, Div, Heading, Input, RichTextEditor, RichTextRenderer, Row, Select, Span, Stack, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { ImageUpload, MediaImage, useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { blogPostCategorySchema } from "../../blog/schemas";
 import { StepForm } from "../../shell";
+// Form-input subset — `blogPostSchema` (blog schemas) requires `id` and uses
+// a `MediaField` shape for `coverImage`, neither of which this draft has
+// (coverImage here is a plain uploaded-URL string; id doesn't exist pre-save).
+const blogDraftSchema = z.object({
+    title: z.string().min(1, "Title is required"),
+    slug: z.string().min(1, "Slug is required").regex(/^blog-/, "Slug must start with 'blog-'"),
+    category: blogPostCategorySchema,
+    metaDescription: z.string().max(160).optional().or(z.literal("")),
+}).passthrough();
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -72,6 +84,11 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
     const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
     const { showToast } = useToast();
     const { upload } = useMediaUpload();
+    const { shellCtx, setFieldError, validate } = useFormShellState(blogDraftSchema);
+    useEffect(() => {
+        validate(draft);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft, validate]);
     const update = React.useCallback((partial) => {
         setDraft((prev) => ({ ...prev, ...partial }));
     }, []);
@@ -146,6 +163,10 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                 onSaved(id);
         },
         onError: (err) => {
+            const issues = err?.issues;
+            if (issues && issues.length > 0) {
+                applyZodIssues(issues, setFieldError);
+            }
             showToast(err?.message ?? "Failed to save post.", "error");
         },
     });
@@ -163,6 +184,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
     const steps = [
         {
             label: "Content",
+            fields: ["title", "slug", "excerpt", "content"],
             validate: (values) => !values.title.trim() ? "Title is required" : null,
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Content" }), _jsx(Input, { label: "Title", value: values.title, onChange: (e) => {
                             const v = e.target.value;
@@ -174,6 +196,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
         },
         {
             label: "Media",
+            fields: ["coverImage", "youtubeId"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Media" }), _jsx(ImageUpload, { label: "Cover Image", currentImage: values.coverImage, onUpload: (file) => upload(file, "blog", true, {
                             type: "blog-cover",
                             title: values.title || values.slug,
@@ -182,6 +205,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
         },
         {
             label: "SEO & Tags",
+            fields: ["category", "tags", "metaTitle", "metaDescription"],
             render: ({ values, onChange }) => {
                 const readTime = Math.max(1, Math.round(values.content.replace(/<[^>]*>/g, "").split(/\s+/).filter(Boolean).length / 200));
                 return (_jsxs(Stack, { gap: "5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "SEO & Tags" }), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: values.category, onValueChange: (v) => onChange({ category: v }) }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-1.5", size: "sm", weight: "medium", children: "Estimated Read Time" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["~", readTime, " min (auto-calculated from content)"] })] })] }), _jsx(TagInput, { label: "Tags", value: values.tags, onChange: (t) => onChange({ tags: t }), placeholder: "e.g. pokemon, grading, tcg" }), _jsx(Input, { label: "Meta Title (optional)", value: values.metaTitle, onChange: (e) => onChange({ metaTitle: e.target.value }), placeholder: "Defaults to post title" }), _jsx(Input, { label: "Meta Description (optional)", value: values.metaDescription, onChange: (e) => onChange({ metaDescription: e.target.value }), placeholder: "SEO description \u2014 max 160 chars", maxLength: 160 })] }));
@@ -189,6 +213,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
         },
         {
             label: "Publish",
+            fields: ["status", "publishedAt", "authorName", "isFeatured"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Publish Settings" }), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: values.status, onValueChange: (v) => onChange({ status: v }) }), _jsx(Input, { label: "Publish date (optional)", value: values.publishedAt, onChange: (e) => onChange({ publishedAt: e.target.value }), type: "date", helperText: "Auto-set to now when publishing." })] }), _jsx(Input, { label: "Author Name", value: values.authorName, onChange: (e) => onChange({ authorName: e.target.value }), placeholder: "Author display name" }), _jsx(Toggle, { label: "Featured post", checked: values.isFeatured, onChange: (checked) => onChange({ isFeatured: checked }) }), isEdit && (_jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", children: _jsx(Button, { type: "button", variant: "danger", size: "sm", onClick: () => setShowDeleteConfirm(true), isLoading: deleteMutation.isPending, children: "Delete post" }) }))] })),
         },
     ];
@@ -196,7 +221,16 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
             setShowDeleteConfirm(false);
             deleteMutation.mutate();
         }, onClose: () => setShowDeleteConfirm(false), title: "Delete post", message: "This will permanently delete the blog post. This cannot be undone." }));
-    const formContent = (_jsxs(_Fragment, { children: [_jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: () => { saveMutation.mutate(); }, formId: "admin-blog", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: isEdit ? "Save Changes" : "Create Post", isLoading: isLoading }), deleteModal] }));
+    const fieldToStepIndex = useMemo(() => {
+        const map = {};
+        steps.forEach((step, i) => {
+            step.fields?.forEach((field) => { map[field] = i; });
+        });
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [steps.length]);
+    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
+    const formContent = (_jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: () => { saveMutation.mutate(); }, formId: "admin-blog", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: isEdit ? "Save Changes" : "Create Post", isLoading: isLoading }), deleteModal] }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }

package/dist/features/admin/components/AdminBrandEditorView.js

@@ -6,7 +6,7 @@ import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 import { Button, ConfirmDeleteModal, Div, Form, Input, StackedViewShell, Toggle, useToast, } from "../../../ui";
-import { FieldInput } from "../../../ui/forms";
+import { FieldInput, FormErrorSummary } from "../../../ui/forms";
 import { ImageUpload } from "../../media/upload/ImageUpload";
 import { useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
@@ -16,8 +16,9 @@ const brandFormSchema = z.object({
     slug: z.string().regex(/^[a-z0-9-]+$/i).optional().or(z.literal("")),
     description: z.string().max(2000).optional().or(z.literal("")),
     logoURL: z.string().url().optional().or(z.literal("")),
-    bannerURL: z.string().url().optional().or(z.literal("")),
     website: z.string().url().optional().or(z.literal("")),
+    country: z.string().max(80).optional().or(z.literal("")),
+    founded: z.number().int().min(1800).max(new Date().getFullYear()).optional(),
     isActive: z.boolean(),
     displayOrder: z.number().int().min(0).optional(),
 });
@@ -38,8 +39,9 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
     const [slugManual, setSlugManual] = React.useState(false);
     const [description, setDescription] = React.useState("");
     const [logoURL, setLogoURL] = React.useState("");
-    const [bannerURL, setBannerURL] = React.useState("");
     const [website, setWebsite] = React.useState("");
+    const [country, setCountry] = React.useState("");
+    const [founded, setFounded] = React.useState("");
     const [isActive, setIsActive] = React.useState(true);
     const [displayOrder, setDisplayOrder] = React.useState("");
     const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
@@ -61,8 +63,9 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
         setSlugManual(true);
         setDescription(brand.description ?? "");
         setLogoURL(brand.logoURL ?? "");
-        setBannerURL(brand.bannerURL ?? "");
         setWebsite(brand.website ?? "");
+        setCountry(brand.country ?? "");
+        setFounded(brand.founded !== undefined ? String(brand.founded) : "");
         setIsActive(brand.isActive ?? true);
         setDisplayOrder(brand.displayOrder !== undefined ? String(brand.displayOrder) : "");
     }, [brandQuery.data]);
@@ -78,8 +81,9 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
                 slug: slug || toBrandSlug(name),
                 description: description || undefined,
                 logoURL: logoURL || undefined,
-                bannerURL: bannerURL || undefined,
                 website: website || undefined,
+                country: country || undefined,
+                founded: founded !== "" ? Number(founded) : undefined,
                 isActive,
                 displayOrder: displayOrder !== "" ? Number(displayOrder) : undefined,
             };
@@ -112,7 +116,7 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
     const formSection = (_jsxs(_Fragment, { children: [_jsx(Form, { schema: brandFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(FieldInput, { name: "name", label: "Brand name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Hot Wheels" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
                                         setSlug(e.target.value);
                                         setSlugManual(true);
-                                    }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(ImageUpload, { label: "Logo", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsx(ImageUpload, { label: "Banner", currentImage: bannerURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-banner", brand: name || slug }), onChange: setBannerURL })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, onClick: () => {
+                                    }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsx(ImageUpload, { label: "Cover Image", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Country of origin", value: country, onChange: (e) => setCountry(e.target.value), placeholder: "e.g. Japan" }), _jsx(Input, { label: "Founded year", value: founded, onChange: (e) => setFounded(e.target.value), type: "number", min: 1800, max: new Date().getFullYear(), placeholder: "e.g. 1999" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, onClick: () => {
                                         clearErrors();
                                         if (!name.trim()) {
                                             setFieldError("name", "Brand name is required");