@mohasinac/appkit 4.31.1 → 4.32.1

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

@@ -3,9 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Code, useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Button, Div, FormActions, HorizontalRule, Input, Label, Row, Select, SideDrawer, Span, Stack, Text, Textarea, Toggle, useToast } from "../../../ui";
+import { Button, Div, HorizontalRule, Input, Label, Row, Select, SideDrawer, Span, Stack, Text, Textarea, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS, SUPPORT_ENDPOINTS } from "../../../constants/api-endpoints";
+import { supportTicketUpdateSchema, toRelatedPartiesPayload, } from "../schemas/admin-ops-forms";
+import { SectionForm, useSectionFormNav, buildSectionsFromSchema, visibleValues, } from "../../shell";
+import { useFormShellState, FormShellContext } from "../../../ui/forms";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
 import { RecordStatusTimeline } from "../../status-history/components/RecordStatusTimeline";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
@@ -14,6 +19,23 @@ const __P = {
 const __O = {
     yAuto: "overflow-y-auto",
 };
+/**
+ * The drawer reopens for a different ticket without unmounting, so the draft is
+ * seeded in two places — initial state and the `open` effect. One function, so
+ * the two cannot disagree about what an absent field defaults to.
+ */
+function seedTicketDraft(status, priority, notes, parties) {
+    return {
+        status: (status ?? "open"),
+        priority: (priority ?? "normal"),
+        internalNotes: notes ?? "",
+        userId: parties?.userId ?? "",
+        storeId: parties?.storeId ?? "",
+        orderId: parties?.orderId ?? "",
+        productId: parties?.productId ?? "",
+        bidId: parties?.bidId ?? "",
+    };
+}
 const STATUS_OPTIONS = [
     { label: "Open", value: "open" },
     { label: "In Progress", value: "in_progress" },
@@ -42,44 +64,33 @@ const ROLE_LABEL = {
 export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject, userDisplayName, category, currentStatus, currentPriority, description, messages = [], internalNotes, orderId, relatedParties, statusHistory, statusHistoryTruncated, }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
-    const [status, setStatus] = React.useState(currentStatus ?? "open");
-    const [priority, setPriority] = React.useState(currentPriority ?? "normal");
-    const [notes, setNotes] = React.useState(internalNotes ?? "");
     const [replyBody, setReplyBody] = React.useState("");
-    // ST-6 — local edits for the linked-parties panel
-    const [parties, setParties] = React.useState(relatedParties ?? {});
+    const [draft, setDraft] = React.useState(() => seedTicketDraft(currentStatus, currentPriority, internalNotes, relatedParties));
     React.useEffect(() => {
         if (open) {
-            setStatus(currentStatus ?? "open");
-            setPriority(currentPriority ?? "normal");
-            setNotes(internalNotes ?? "");
             setReplyBody("");
-            setParties(relatedParties ?? {});
+            setDraft(seedTicketDraft(currentStatus, currentPriority, internalNotes, relatedParties));
         }
     }, [open, currentStatus, currentPriority, internalNotes, relatedParties]);
+    const sections = React.useMemo(() => buildSectionsFromSchema(supportTicketUpdateSchema, {
+        options: { status: STATUS_OPTIONS, priority: PRIORITY_OPTIONS },
+    }), []);
+    const nav = useSectionFormNav(sections, draft, { scope: "admin:support-ticket" });
+    const form = useFormShellState(supportTicketUpdateSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     const invalidate = () => queryClient.invalidateQueries({ queryKey: ["admin", "support-tickets"] });
-    const cleanedParties = React.useMemo(() => {
-        const out = {};
-        if (parties.userId?.trim())
-            out.userId = parties.userId.trim();
-        if (parties.storeId?.trim())
-            out.storeId = parties.storeId.trim();
-        if (parties.orderId?.trim())
-            out.orderId = parties.orderId.trim();
-        if (parties.productId?.trim())
-            out.productId = parties.productId.trim();
-        if (parties.bidId?.trim())
-            out.bidId = parties.bidId.trim();
-        return out;
-    }, [parties]);
     const updateMutation = useApiMutation({
         errorMessage: "Failed to update ticket.",
         mutationFn: async () => {
+            const v = visibleValues(supportTicketUpdateSchema, draft);
             await apiClient.patch(ADMIN_ENDPOINTS.SUPPORT_TICKET_BY_ID(ticketId), {
-                status,
-                priority,
-                internalNotes: notes || undefined,
-                relatedParties: Object.keys(cleanedParties).length > 0 ? cleanedParties : undefined,
+                status: v.status,
+                priority: v.priority,
+                internalNotes: v.internalNotes || undefined,
+                relatedParties: toRelatedPartiesPayload(v),
             });
         },
         onSuccess: () => {
@@ -91,7 +102,7 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
     const replyMutation = useApiMutation({
         errorMessage: "Failed to send reply.",
         mutationFn: async () => {
-            await apiClient.post(SUPPORT_ENDPOINTS.TICKET_MESSAGES(ticketId), { body: replyBody, newStatus: status });
+            await apiClient.post(SUPPORT_ENDPOINTS.TICKET_MESSAGES(ticketId), { body: replyBody, newStatus: draft.status });
         },
         onSuccess: () => {
             showToast("Reply sent.", "success");
@@ -104,7 +115,7 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
     const [storeStatus, setStoreStatus] = React.useState("active");
     const [storeIsVerified, setStoreIsVerified] = React.useState(false);
     const [storeIsFeatured, setStoreIsFeatured] = React.useState(false);
-    const linkedStoreId = parties.storeId?.trim();
+    const linkedStoreId = draft.storeId?.trim();
     const isStoreChangeRequest = category === "store_change_request";
     // Seed the panel from the store's REAL current values, not hardcoded
     // defaults — applyStoreChange below sends all three fields unconditionally,
@@ -140,7 +151,7 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
             // Append an internal note marking the action; non-fatal if it fails.
             apiClient
                 .patch(ADMIN_ENDPOINTS.SUPPORT_TICKET_BY_ID(ticketId), {
-                internalNotes: (notes ? notes + "\n" : "") +
+                internalNotes: (draft.internalNotes ? draft.internalNotes + "\n" : "") +
                     `[${new Date().toISOString()}] Applied store change to ${linkedStoreId}: status=${storeStatus}, verified=${storeIsVerified}, featured=${storeIsFeatured}`,
             })
                 .catch(console.error);
@@ -151,7 +162,7 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
     // admin edit quantity per line + remove lines, then PATCHes the order).
     const [orderItemsOpen, setOrderItemsOpen] = React.useState(false);
     const [orderItems, setOrderItems] = React.useState([]);
-    const linkedOrderId = parties.orderId?.trim() || orderId;
+    const linkedOrderId = draft.orderId?.trim() || orderId;
     const isOrderModificationRequest = category === "order_modification_request" || category === "order_issue";
     const loadOrderItems = useApiMutation({
         errorMessage: "Failed to load order.",
@@ -171,7 +182,7 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
         },
     });
     // ST-5 — Lift Ban actions for unban_request tickets
-    const linkedUserId = parties.userId?.trim();
+    const linkedUserId = draft.userId?.trim();
     const isUnbanRequest = category === "unban_request";
     const liftHardBan = useApiMutation({
         errorMessage: "Failed to lift hard ban.",
@@ -184,7 +195,7 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
             showToast("Hard ban lifted.", "success");
             apiClient
                 .patch(ADMIN_ENDPOINTS.SUPPORT_TICKET_BY_ID(ticketId), {
-                internalNotes: (notes ? notes + "\n" : "") +
+                internalNotes: (draft.internalNotes ? draft.internalNotes + "\n" : "") +
                     `[${new Date().toISOString()}] Lifted hard ban for ${linkedUserId}`,
                 status: "resolved",
             })
@@ -203,7 +214,7 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
             showToast("Ticket-creation soft ban lifted.", "success");
             apiClient
                 .patch(ADMIN_ENDPOINTS.SUPPORT_TICKET_BY_ID(ticketId), {
-                internalNotes: (notes ? notes + "\n" : "") +
+                internalNotes: (draft.internalNotes ? draft.internalNotes + "\n" : "") +
                     `[${new Date().toISOString()}] Lifted create_support_tickets soft ban for ${linkedUserId}`,
                 status: "resolved",
             })
@@ -235,7 +246,7 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
             showToast("Order items updated.", "success");
             apiClient
                 .patch(ADMIN_ENDPOINTS.SUPPORT_TICKET_BY_ID(ticketId), {
-                internalNotes: (notes ? notes + "\n" : "") +
+                internalNotes: (draft.internalNotes ? draft.internalNotes + "\n" : "") +
                     `[${new Date().toISOString()}] Modified order ${linkedOrderId} items: ${orderItems
                         .filter((it) => it.quantity > 0)
                         .map((it) => `${it.productId}x${it.quantity}`)
@@ -246,13 +257,17 @@ export function AdminSupportTicketDetailView({ open, onClose, ticketId, subject,
             setOrderItemsOpen(false);
         },
     });
-    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: subject ?? "Support Ticket", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "md", children: [_jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex ${STATUS_COLOR[currentStatus ?? "open"] ?? STATUS_COLOR.open}`, rounded: "full", padding: "pill-sm-tall", children: (currentStatus ?? "open").replace(/_/g, " ") }), _jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: category }), orderId && (_jsxs(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: ["Order: ", orderId] }))] }), _jsxs(Div, { textSize: "sm", color: "muted", children: ["From: ", _jsx(Span, { weight: "medium", color: "primary", children: userDisplayName })] }), description && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [_jsx(Text, { className: "mb-1 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", size: "sm", children: description })] })), messages.length > 0 && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Messages (", messages.length, ")"] }), _jsx(Stack, { className: `max-h-64 ${__O.yAuto}`, gap: "sm", children: messages.map((msg, i) => (_jsxs(Div, { textSize: "sm", surface: msg.authorRole === "user" ? "default" : "info-surface", className: msg.authorRole === "user" ? "border border-[var(--appkit-color-border)]" : "border border-[var(--appkit-color-info)]", rounded: "lg", padding: "sm", children: [_jsxs(Row, { color: "muted", textSize: "xs", className: "mb-1", align: "center", gap: "sm", children: [_jsx(Span, { weight: "medium", color: "muted", children: ROLE_LABEL[msg.authorRole ?? "user"] ?? msg.authorRole }), msg.createdAt && (_jsx(Span, { children: new Date(msg.createdAt).toLocaleString() }))] }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", children: msg.body })] }, msg.id ?? i))) })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "uppercase tracking-wide", color: "muted", size: "xs", weight: "semibold", children: "Reply to user" }), _jsx(Textarea, { value: replyBody, onChange: (e) => setReplyBody(e.target.value), rows: 3, placeholder: "Type a reply\u2026" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: replyMutation.isPending, disabled: !replyBody.trim() || !ticketId || replyMutation.isPending, onClick: () => replyMutation.mutate(), children: "Send reply" })] }), _jsx(HorizontalRule, { tone: "subtle", spacing: "comfortable" }), _jsx(RecordStatusTimeline, { entries: statusHistory, truncatedCount: statusHistoryTruncated }), _jsx(HorizontalRule, { tone: "subtle", spacing: "comfortable" }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsx(Select, { label: "Priority", options: PRIORITY_OPTIONS, value: priority, onValueChange: setPriority }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "uppercase tracking-wide", color: "muted", size: "xs", weight: "semibold", children: "Internal notes (staff only)" }), _jsx(Textarea, { value: notes, onChange: (e) => setNotes(e.target.value), rows: 3, placeholder: "Notes visible only to admins and employees\u2026" })] }), _jsxs(Stack, { padding: "sm", gap: "sm", rounded: "lg", border: "default", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Linked parties" }), _jsx(Text, { size: "xs", color: "muted", children: "Tag the buyer / store / order / product / bid this ticket concerns." }), [
-                            ["userId", "User slug"],
-                            ["storeId", "Store slug"],
-                            ["orderId", "Order ID"],
-                            ["productId", "Product slug"],
-                            ["bidId", "Bid ID"],
-                        ].map(([key, label]) => (_jsx(Input, { label: label, type: "text", value: parties[key] ?? "", onChange: (e) => setParties((p) => ({ ...p, [key]: e.target.value })), placeholder: label }, key)))] }), isOrderModificationRequest && (_jsx(OrderItemsPanel, { linkedOrderId: linkedOrderId, orderItemsOpen: orderItemsOpen, setOrderItemsOpen: setOrderItemsOpen, orderItems: orderItems, setOrderItems: setOrderItems, loadOrderItems: loadOrderItems, applyOrderItems: applyOrderItems })), isStoreChangeRequest && (_jsx(StoreChangePanel, { linkedStoreId: linkedStoreId, storeStatus: storeStatus, setStoreStatus: setStoreStatus, storeIsVerified: storeIsVerified, setStoreIsVerified: setStoreIsVerified, storeIsFeatured: storeIsFeatured, setStoreIsFeatured: setStoreIsFeatured, applyStoreChange: applyStoreChange, isLoadingStore: storeQuery.isLoading })), isUnbanRequest && (_jsx(UnbanRequestPanel, { linkedUserId: linkedUserId, liftHardBan: liftHardBan, liftSoftBanTickets: liftSoftBanTickets })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", isLoading: updateMutation.isPending, disabled: !ticketId || updateMutation.isPending, onClick: () => updateMutation.mutate(), children: "Save changes" })] })] }) }));
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: subject ?? "Support Ticket", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "md", children: [_jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex ${STATUS_COLOR[currentStatus ?? "open"] ?? STATUS_COLOR.open}`, rounded: "full", padding: "pill-sm-tall", children: (currentStatus ?? "open").replace(/_/g, " ") }), _jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: category }), orderId && (_jsxs(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: ["Order: ", orderId] }))] }), _jsxs(Div, { textSize: "sm", color: "muted", children: ["From: ", _jsx(Span, { weight: "medium", color: "primary", children: userDisplayName })] }), description && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [_jsx(Text, { className: "mb-1 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", size: "sm", children: description })] })), messages.length > 0 && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Messages (", messages.length, ")"] }), _jsx(Stack, { className: `max-h-64 ${__O.yAuto}`, gap: "sm", children: messages.map((msg, i) => (_jsxs(Div, { textSize: "sm", surface: msg.authorRole === "user" ? "default" : "info-surface", className: msg.authorRole === "user" ? "border border-[var(--appkit-color-border)]" : "border border-[var(--appkit-color-info)]", rounded: "lg", padding: "sm", children: [_jsxs(Row, { color: "muted", textSize: "xs", className: "mb-1", align: "center", gap: "sm", children: [_jsx(Span, { weight: "medium", color: "muted", children: ROLE_LABEL[msg.authorRole ?? "user"] ?? msg.authorRole }), msg.createdAt && (_jsx(Span, { children: new Date(msg.createdAt).toLocaleString() }))] }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", children: msg.body })] }, msg.id ?? i))) })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "uppercase tracking-wide", color: "muted", size: "xs", weight: "semibold", children: "Reply to user" }), _jsx(Textarea, { value: replyBody, onChange: (e) => setReplyBody(e.target.value), rows: 3, placeholder: "Type a reply\u2026" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: replyMutation.isPending, disabled: !replyBody.trim() || !ticketId || replyMutation.isPending, onClick: () => replyMutation.mutate(), children: "Send reply" })] }), _jsx(HorizontalRule, { tone: "subtle", spacing: "comfortable" }), _jsx(RecordStatusTimeline, { entries: statusHistory, truncatedCount: statusHistoryTruncated }), _jsx(HorizontalRule, { tone: "subtle", spacing: "comfortable" }), _jsxs(FormShellContext.Provider, { value: form.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: (partial) => setDraft((d) => ({ ...d, ...partial })), onSubmit: () => {
+                                // SectionForm scrolls to the first erroring section and then
+                                // submits regardless, so the guard lives here.
+                                form.clearErrors();
+                                const parsed = supportTicketUpdateSchema.safeParse(visibleValues(supportTicketUpdateSchema, draft));
+                                if (!parsed.success) {
+                                    applyZodIssues(parsed.error.issues, form.setFieldError);
+                                    return;
+                                }
+                                updateMutation.mutate();
+                            }, onValidationChange: () => form.validate(draft), schema: supportTicketUpdateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: "Save changes", cancelLabel: "Cancel", onCancel: onClose, isLoading: updateMutation.isPending })] }), isOrderModificationRequest && (_jsx(OrderItemsPanel, { linkedOrderId: linkedOrderId, orderItemsOpen: orderItemsOpen, setOrderItemsOpen: setOrderItemsOpen, orderItems: orderItems, setOrderItems: setOrderItems, loadOrderItems: loadOrderItems, applyOrderItems: applyOrderItems })), isStoreChangeRequest && (_jsx(StoreChangePanel, { linkedStoreId: linkedStoreId, storeStatus: storeStatus, setStoreStatus: setStoreStatus, storeIsVerified: storeIsVerified, setStoreIsVerified: setStoreIsVerified, storeIsFeatured: storeIsFeatured, setStoreIsFeatured: setStoreIsFeatured, applyStoreChange: applyStoreChange, isLoadingStore: storeQuery.isLoading })), isUnbanRequest && (_jsx(UnbanRequestPanel, { linkedUserId: linkedUserId, liftHardBan: liftHardBan, liftSoftBanTickets: liftSoftBanTickets }))] }) }));
 }
 function OrderItemsPanel(props) {
     const { linkedOrderId, orderItemsOpen, setOrderItemsOpen, orderItems, setOrderItems, loadOrderItems, applyOrderItems, } = props;

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

@@ -57,7 +57,17 @@ export function AdminSupportTicketsView({ children, ...props }) {
     const config = {
         portal: "admin",
         title: "Support Tickets",
-        searchPlaceholder: "Search by subject",
+        search: {
+            placeholder: "Search by subject (starts with)",
+            /*
+             * `/api/admin/support-tickets` builds `subject@=${q}`, and `@=` is
+             * PREFIX-only against Firestore. `searchTxt` on this collection is built
+             * from the subject alone on purpose — the description and every message
+             * body are PII-encrypted, and indexing them in plaintext would hand back
+             * exactly what the encryption withholds.
+             */
+            fields: ["subject"],
+        },
         emptyLabel: "No support tickets found",
         filterKeys: ["status", "priority", "showResolved"],
         defaultSort: sortBy("createdAt", "DESC"),

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

@@ -57,7 +57,17 @@ export function AdminTeamView({ children, onBulkRemove, ...props }) {
     const config = {
         portal: "admin",
         title: "Team",
-        searchPlaceholder: "Search by name or email",
+        search: {
+            placeholder: "Search by name or email",
+            /*
+             * Genuinely partial, and that is worth stating: `/api/admin/team`
+             * filters AFTER `mapDoc` has decrypted, with
+             * `(u.email ?? "").toLowerCase().includes(q)`. Most PII search in this
+             * codebase resolves an HMAC blind index and matches exactly; this one
+             * does not, which is why `mode` stays partial here.
+             */
+            fields: ["displayName", "email"],
+        },
         emptyLabel: "No employees found",
         filterKeys: ["group"],
         defaultSort: sortBy("createdAt", "DESC"),

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

@@ -54,7 +54,12 @@ export function AdminTesterChecklistView({ children, onBulkDelete, ...props }) {
     const config = useMemo(() => ({
         portal: "admin",
         title: "Tester Checklist",
-        searchPlaceholder: "Search test cases, groups, or pages",
+        search: {
+            placeholder: "Search test cases, descriptions, groups or pages",
+            // `TesterChecklistItemRepository` builds `searchTxt` from label,
+            // description, groupLabel and pageLabel.
+            fields: ["label", "description", "groupLabel", "pageLabel"],
+        },
         emptyLabel: "No checklist items found",
         filterKeys: ["isActive", "bugConfirmed"],
         // Bug-confirmed (and reopened-away) cases are always isActive:false —

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

@@ -3,10 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Code, useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { Avatar, Button, ConfirmDeleteModal, Div, Form, FormActions, Heading, Input, Row, Select, SideDrawer, Span, Stack, StackedViewShell, Text, Textarea, Toggle, useToast } from "../../../ui";
+import { Avatar, Button, ConfirmDeleteModal, Div, Heading, Input, Row, Select, SideDrawer, Span, Stack, StackedViewShell, Text, Textarea, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { adminUserUpdateSchema } from "../schemas/admin-user-form";
+import { adminUserUpdateSchema, toPublicProfilePayload, } from "../schemas/admin-user-form";
+import { SectionForm, useSectionFormNav, buildSectionsFromSchema, visibleValues, } from "../../shell";
+import { useFormShellState, FormShellContext } from "../../../ui/forms";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
 import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
 const ROLE_OPTIONS = [
     { label: "User (buyer)", value: "user" },
@@ -47,22 +50,9 @@ export function AdminUserEditorView({ open, onClose, userId, displayName, photoU
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     // --- General fields -------------------------------------------------------
-    const [role, setRole] = React.useState(currentRole ?? "user");
-    const [emailVerified, setEmailVerified] = React.useState(currentEmailVerified ?? false);
-    const [isTester, setIsTester] = React.useState(currentIsTester ?? false);
-    const [canTestAdmin, setCanTestAdmin] = React.useState(currentCanTestAdmin ?? false);
-    const [adminNotes, setAdminNotes] = React.useState("");
+    const [draft, setDraft] = React.useState({});
     const [deleteOpen, setDeleteOpen] = React.useState(false);
     // --- ST-2 profile fields --------------------------------------------------
-    const [editDisplayName, setEditDisplayName] = React.useState(displayName ?? "");
-    const [phoneNumber, setPhoneNumber] = React.useState(currentPhoneNumber ?? "");
-    const [bio, setBio] = React.useState(currentBio ?? "");
-    const [location, setLocation] = React.useState(currentLocation ?? "");
-    const [website, setWebsite] = React.useState(currentWebsite ?? "");
-    const [twitter, setTwitter] = React.useState(currentSocialLinks?.twitter ?? "");
-    const [instagram, setInstagram] = React.useState(currentSocialLinks?.instagram ?? "");
-    const [facebook, setFacebook] = React.useState(currentSocialLinks?.facebook ?? "");
-    const [linkedin, setLinkedin] = React.useState(currentSocialLinks?.linkedin ?? "");
     // --- Hard ban form --------------------------------------------------------
     const [showHardBanForm, setShowHardBanForm] = React.useState(false);
     const [hardBanReasonInput, setHardBanReasonInput] = React.useState("");
@@ -73,20 +63,22 @@ export function AdminUserEditorView({ open, onClose, userId, displayName, photoU
     const [softBanExpiry, setSoftBanExpiry] = React.useState("");
     React.useEffect(() => {
         if (open) {
-            setRole(currentRole ?? "user");
-            setEmailVerified(currentEmailVerified ?? false);
-            setIsTester(currentIsTester ?? false);
-            setCanTestAdmin(currentCanTestAdmin ?? false);
-            setAdminNotes("");
-            setEditDisplayName(displayName ?? "");
-            setPhoneNumber(currentPhoneNumber ?? "");
-            setBio(currentBio ?? "");
-            setLocation(currentLocation ?? "");
-            setWebsite(currentWebsite ?? "");
-            setTwitter(currentSocialLinks?.twitter ?? "");
-            setInstagram(currentSocialLinks?.instagram ?? "");
-            setFacebook(currentSocialLinks?.facebook ?? "");
-            setLinkedin(currentSocialLinks?.linkedin ?? "");
+            setDraft({
+                role: (currentRole ?? "user"),
+                emailVerified: currentEmailVerified ?? false,
+                isTester: currentIsTester ?? false,
+                canTestAdmin: currentCanTestAdmin ?? false,
+                adminNotes: "",
+                displayName: displayName ?? "",
+                phoneNumber: currentPhoneNumber ?? "",
+                bio: currentBio ?? "",
+                location: currentLocation ?? "",
+                website: currentWebsite ?? "",
+                twitter: currentSocialLinks?.twitter ?? "",
+                instagram: currentSocialLinks?.instagram ?? "",
+                facebook: currentSocialLinks?.facebook ?? "",
+                linkedin: currentSocialLinks?.linkedin ?? "",
+            });
             setShowHardBanForm(false);
             setHardBanReasonInput("");
             setShowAddSoftBan(false);
@@ -110,40 +102,34 @@ export function AdminUserEditorView({ open, onClose, userId, displayName, photoU
         currentSocialLinks?.facebook,
         currentSocialLinks?.linkedin,
     ]);
+    const sections = React.useMemo(() => buildSectionsFromSchema(adminUserUpdateSchema, {
+        options: { role: ROLE_OPTIONS },
+    }), []);
+    const nav = useSectionFormNav(sections, draft, { scope: "admin:user-editor" });
+    const form = useFormShellState(adminUserUpdateSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     const invalidate = () => queryClient.invalidateQueries({ queryKey: ["admin", "users"] });
     // --- Mutations ------------------------------------------------------------
     const saveMutation = useApiMutation({
         errorMessage: "Failed to update user.",
         mutationFn: async () => {
-            // ST-2 — build publicProfile partial only when something changed; keeps
-            // the PATCH payload minimal and avoids overwriting unrelated subkeys.
-            const socialLinks = {};
-            if (twitter.trim())
-                socialLinks.twitter = twitter.trim();
-            if (instagram.trim())
-                socialLinks.instagram = instagram.trim();
-            if (facebook.trim())
-                socialLinks.facebook = facebook.trim();
-            if (linkedin.trim())
-                socialLinks.linkedin = linkedin.trim();
-            const publicProfile = {};
-            if (bio.trim())
-                publicProfile.bio = bio.trim();
-            if (location.trim())
-                publicProfile.location = location.trim();
-            if (website.trim())
-                publicProfile.website = website.trim();
-            if (Object.keys(socialLinks).length > 0)
-                publicProfile.socialLinks = socialLinks;
+            const v = visibleValues(adminUserUpdateSchema, draft);
             await apiClient.patch(ADMIN_ENDPOINTS.USER_BY_ID(userId), {
-                role,
-                emailVerified,
-                isTester,
-                canTestAdmin: isTester ? canTestAdmin : false,
-                adminNotes: adminNotes || undefined,
-                displayName: editDisplayName.trim() || undefined,
-                phoneNumber: phoneNumber.trim() || undefined,
-                publicProfile: Object.keys(publicProfile).length > 0 ? publicProfile : undefined,
+                role: v.role,
+                emailVerified: v.emailVerified,
+                isTester: v.isTester,
+                // `when` already drops this once `isTester` is off; the `?? false` is
+                // what CLEARS a previously-granted flag rather than omitting the key.
+                canTestAdmin: v.canTestAdmin ?? false,
+                adminNotes: v.adminNotes || undefined,
+                displayName: v.displayName?.trim() || undefined,
+                phoneNumber: v.phoneNumber?.trim() || undefined,
+                // ST-2 — a partial: only the subkeys that were filled in, so an
+                // untouched field never overwrites what is stored.
+                publicProfile: toPublicProfilePayload(v),
             });
         },
         onSuccess: () => {
@@ -216,29 +202,26 @@ export function AdminUserEditorView({ open, onClose, userId, displayName, photoU
     const softBans = currentSoftBans ?? [];
     const renderAvatarHeader = () => userId ? (_jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Avatar, { src: photoURL ?? null, name: displayName ?? userId, size: "md" }), _jsx(Text, { size: "sm", weight: "semibold", children: displayName ?? userId })] })) : null;
     const renderInfoCard = () => userId ? (_jsx(Div, { textSize: "xs", surface: "muted", rounded: "lg", border: "default", padding: "inlineSm", children: _jsxs(Stack, { color: "primary", gap: "xs", children: [_jsxs(Text, { size: "xs", children: [_jsx(Span, { weight: "semibold", children: "Owner ID (Firebase UID):" }), " ", _jsx(Code, { className: "select-all font-mono", children: userId })] }), ownedStoreId && (_jsxs(Text, { size: "xs", children: [_jsx(Span, { weight: "semibold", children: "Owns store:" }), " ", _jsx(Code, { className: "select-all font-mono", children: ownedStoreId }), ownedStoreName ? ` — ${ownedStoreName}` : ""] }))] }) })) : null;
-    const renderRoleSection = () => (_jsx(Select, { label: "Role", options: ROLE_OPTIONS, value: role, onValueChange: setRole }));
-    const renderEmailVerifiedSection = () => (_jsx(Toggle, { label: "Email verified", checked: emailVerified, onChange: setEmailVerified }));
-    const renderIsTesterSection = () => (_jsxs(Stack, { gap: "sm", children: [_jsx(Toggle, { label: "Is Tester", checked: isTester, onChange: (next) => {
-                    setIsTester(next);
-                    if (!next)
-                        setCanTestAdmin(false);
-                } }), isTester && (_jsx(Toggle, { label: "Can Test Admin Areas", checked: canTestAdmin, onChange: setCanTestAdmin }))] }));
-    const renderProfileSection = () => (_jsxs(Stack, { border: "default", as: "section", gap: "sm", className: "border-t", padding: "t-sm", children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Profile details" }), _jsx(Input, { label: "Display name", value: editDisplayName, onChange: (e) => setEditDisplayName(e.target.value), placeholder: "Full name shown on profile" }), _jsx(Input, { label: "Phone number", type: "tel", value: phoneNumber, onChange: (e) => setPhoneNumber(e.target.value), placeholder: "+91 90000 00000" }), _jsx(Textarea, { label: "Bio", value: bio, onChange: (e) => setBio(e.target.value), rows: 3, placeholder: "Short bio shown on the public profile\u2026" }), _jsx(Input, { label: "Location", value: location, onChange: (e) => setLocation(e.target.value), placeholder: "City, Country" }), _jsx(Input, { label: "Website", type: "url", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://" }), _jsx(Text, { size: "xs", color: "muted", children: "Social links" }), _jsx(Input, { label: "Twitter / X", value: twitter, onChange: (e) => setTwitter(e.target.value), placeholder: "@handle or full URL" }), _jsx(Input, { label: "Instagram", value: instagram, onChange: (e) => setInstagram(e.target.value), placeholder: "@handle or full URL" }), _jsx(Input, { label: "Facebook", value: facebook, onChange: (e) => setFacebook(e.target.value), placeholder: "https://facebook.com/\u2026" }), _jsx(Input, { label: "LinkedIn", value: linkedin, onChange: (e) => setLinkedin(e.target.value), placeholder: "https://linkedin.com/in/\u2026" })] }));
-    const renderAdminNotesSection = () => (_jsx(Textarea, { label: "Admin notes (optional)", value: adminNotes, onChange: (e) => setAdminNotes(e.target.value), rows: 3, placeholder: "Internal notes about this user\u2026" }));
-    const renderActionsSection = () => (_jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "danger", onClick: () => setDeleteOpen(true), disabled: !userId, children: "Delete user" }), _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !userId || saveMutation.isPending, children: "Save changes" })] }));
+    const renderFieldsSection = () => (_jsx(SectionForm, { sections: sections, values: draft, onChange: (partial) => setDraft((d) => ({ ...d, ...partial })), onSubmit: () => {
+            // SectionForm scrolls to the first erroring section and then submits
+            // regardless, so the guard lives here.
+            form.clearErrors();
+            const parsed = adminUserUpdateSchema.safeParse(visibleValues(adminUserUpdateSchema, draft));
+            if (!parsed.success) {
+                applyZodIssues(parsed.error.issues, form.setFieldError);
+                return;
+            }
+            saveMutation.mutate();
+        }, onValidationChange: () => form.validate(draft), schema: adminUserUpdateSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: "Save changes", cancelLabel: "Cancel", onCancel: onClose, isLoading: saveMutation.isPending, destructiveAction: {
+            label: "Delete user",
+            onClick: () => setDeleteOpen(true),
+            disabled: !userId,
+        } }));
     const renderModerationSection = () => (_jsxs(Stack, { border: "default", as: "section", gap: "sm", className: "border-t", padding: "t-md", children: [_jsx(Heading, { level: 3, className: "mb-3", color: "muted", size: "sm", weight: "semibold", children: "Moderation" }), _jsx(HardBanPanel, { userId: userId, isHardBanned: isHardBanned, currentHardBanReason: currentHardBanReason, showHardBanForm: showHardBanForm, setShowHardBanForm: setShowHardBanForm, hardBanReasonInput: hardBanReasonInput, setHardBanReasonInput: setHardBanReasonInput, hardBanPending: hardBanMutation.isPending, unbanPending: unbanMutation.isPending, onHardBan: (reason) => hardBanMutation.mutate(reason), onUnban: () => unbanMutation.mutate() }), _jsx(SoftBanPanel, { userId: userId, softBans: softBans, showAddSoftBan: showAddSoftBan, setShowAddSoftBan: setShowAddSoftBan, softBanAction: softBanAction, setSoftBanAction: setSoftBanAction, softBanReason: softBanReason, setSoftBanReason: setSoftBanReason, softBanExpiry: softBanExpiry, setSoftBanExpiry: setSoftBanExpiry, softBanPending: softBanMutation.isPending, liftPending: liftSoftBanMutation.isPending, onAddSoftBan: (payload) => softBanMutation.mutate(payload), onLiftSoftBan: (action) => liftSoftBanMutation.mutate(action) })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayName ? `Manage: ${displayName}` : "Manage User", children: _jsxs(Form, { schema: adminUserUpdateSchema, onSubmit: (e) => {
-                        e.preventDefault();
-                        saveMutation.mutate();
-                    }, padding: "md", children: [_jsx(FormErrorSummary, {}), _jsx(StackedViewShell, { portal: "admin", className: "space-y-4", sections: [
-                                renderAvatarHeader,
-                                renderInfoCard,
-                                renderRoleSection,
-                                renderEmailVerifiedSection,
-                                renderIsTesterSection,
-                                renderProfileSection,
-                                renderAdminNotesSection,
-                                renderActionsSection,
-                                renderModerationSection,
-                            ] })] }) }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => setDeleteOpen(false), onConfirm: () => deleteMutation.mutate(), isDeleting: deleteMutation.isPending, title: `Delete ${displayName ?? "user"}?`, message: "This action cannot be undone. The user's account and all associated data will be permanently removed.", confirmText: "Delete user", variant: "danger" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayName ? `Manage: ${displayName}` : "Manage User", children: _jsx(FormShellContext.Provider, { value: form.shellCtx, children: _jsxs(Div, { padding: "md", children: [_jsx(FormErrorSummary, {}), _jsx(StackedViewShell, { portal: "admin", className: "space-y-4", sections: [
+                                    renderAvatarHeader,
+                                    renderInfoCard,
+                                    renderFieldsSection,
+                                    renderModerationSection,
+                                ] })] }) }) }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => setDeleteOpen(false), onConfirm: () => deleteMutation.mutate(), isDeleting: deleteMutation.isPending, title: `Delete ${displayName ?? "user"}?`, message: "This action cannot be undone. The user's account and all associated data will be permanently removed.", confirmText: "Delete user", variant: "danger" })] }));
 }

package/dist/features/admin/components/analytics/AdminPageViewsReportView.js

@@ -33,7 +33,12 @@ export function AdminPageViewsReportView() {
     const config = {
         portal: "admin",
         title: "Page Views",
-        searchPlaceholder: "Search by entity or URL",
+        search: {
+            placeholder: "Search by entity or URL",
+            // `/api/admin/analytics/pageviews` filters in memory on `row.entityId`
+            // and `row.url`.
+            fields: ["entityId", "url"],
+        },
         emptyLabel: "No page views recorded for this range.",
         filterKeys: ["entityType"],
         defaultSort: sortBy("count", "DESC"),

package/dist/features/admin/constants/admin-page-tabs.d.ts

@@ -0,0 +1,36 @@
+export interface AdminPageTab {
+    id: string;
+    label: string;
+    description: string;
+}
+/**
+ * Roles, and the permission catalogue you consult while building one.
+ *
+ * The catalogue is a REFERENCE SHEET, not a second editor: it lists what each
+ * permission string grants. Reading it is something you do mid-task, with the
+ * role you are editing still on screen — which is the argument for a tab
+ * rather than a separate page.
+ */
+export declare const ROLES_TABS: readonly [{
+    readonly id: "roles";
+    readonly label: "Roles";
+    readonly description: "Who can do what, as named roles.";
+}, {
+    readonly id: "permissions";
+    readonly label: "Permission catalogue";
+    readonly description: "Every permission string and what it grants.";
+}];
+export type RolesTabId = (typeof ROLES_TABS)[number]["id"];
+export declare function isRolesTabId(value: string | null | undefined): value is RolesTabId;
+/** Both toggle platform surfaces on and off, into the same settings document. */
+export declare const ADMIN_SETTINGS_TABS: readonly [{
+    readonly id: "actions";
+    readonly label: "Actions";
+    readonly description: "Turn individual CTAs and bulk actions on or off.";
+}, {
+    readonly id: "navigation";
+    readonly label: "Navigation";
+    readonly description: "Turn nav entries on or off across the portals.";
+}];
+export type AdminSettingsTabId = (typeof ADMIN_SETTINGS_TABS)[number]["id"];
+export declare function isAdminSettingsTabId(value: string | null | undefined): value is AdminSettingsTabId;

package/dist/features/admin/constants/admin-page-tabs.js

@@ -0,0 +1,45 @@
+/*
+ * WHY: The admin half of W8's C2. Two consolidations, each between pages that
+ *      already share one permission — which is the test that decides whether
+ *      two pages CAN be tabs at all: one page has one `requiredPermission`, so
+ *      merging across a permission line either widens or narrows access
+ *      silently.
+ *
+ *      `roles` and `permissions` are both `admin:roles:read`; `settings/actions`
+ *      and `settings/navigation` are both `admin:settings:write`. Pairs that
+ *      failed that test were left alone — see the plan's "deliberately NOT
+ *      consolidated" list.
+ *
+ * EXPORTS:
+ *   ROLES_TABS / isRolesTabId, ADMIN_SETTINGS_TABS / isAdminSettingsTabId
+ *
+ * @tag domain:admin
+ * @tag layer:constants
+ * @tag pattern:registry
+ * @tag access:isomorphic
+ * @tag consumers:admin roles + settings/actions pages,action index
+ * @tag sideEffects:none
+ */
+/**
+ * Roles, and the permission catalogue you consult while building one.
+ *
+ * The catalogue is a REFERENCE SHEET, not a second editor: it lists what each
+ * permission string grants. Reading it is something you do mid-task, with the
+ * role you are editing still on screen — which is the argument for a tab
+ * rather than a separate page.
+ */
+export const ROLES_TABS = [
+    { id: "roles", label: "Roles", description: "Who can do what, as named roles." },
+    { id: "permissions", label: "Permission catalogue", description: "Every permission string and what it grants." },
+];
+export function isRolesTabId(value) {
+    return !!value && ROLES_TABS.some((t) => t.id === value);
+}
+/** Both toggle platform surfaces on and off, into the same settings document. */
+export const ADMIN_SETTINGS_TABS = [
+    { id: "actions", label: "Actions", description: "Turn individual CTAs and bulk actions on or off." },
+    { id: "navigation", label: "Navigation", description: "Turn nav entries on or off across the portals." },
+];
+export function isAdminSettingsTabId(value) {
+    return !!value && ADMIN_SETTINGS_TABS.some((t) => t.id === value);
+}