@mohasinac/appkit 4.14.0 → 4.15.0

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

@@ -2,25 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
 import { useApiMutation } from "@mohasinac/appkit/client";
-import React, { useEffect, useMemo } from "react";
-import { z } from "zod";
+import React, { useEffect } from "react";
 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();
+import { blogDraftSchema } from "../../blog/schemas/blog-form";
+import { SectionForm, useSectionFormNav } from "../../shell";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -62,7 +52,12 @@ function toSlug(str) {
         .trim()
         .replace(/[^a-z0-9]+/g, "-")
         .replace(/^-+|-+$/g, "");
-    return base.startsWith("blog-") ? base : `blog-${base}`;
+    // Deliberately NOT prefixed with `blog-`. That prefix belongs to the
+    // document ID (`generateBlogPostId` adds it); the `slug` FIELD is what
+    // `findBySlug` queries and what appears in the public URL, and all 20 stored
+    // posts hold it bare. Prefixing here made every newly created post's URL
+    // disagree with every existing one.
+    return base;
 }
 function toDateInputValue(val) {
     if (!val)
@@ -80,15 +75,9 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
     const isEdit = Boolean(postId);
     const [draft, setDraft] = React.useState(DEFAULT_DRAFT);
     const [slugManual, setSlugManual] = React.useState(false);
-    const [currentStep, setCurrentStep] = React.useState(0);
     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,13 +135,21 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                 metaTitle: draft.metaTitle || undefined,
                 metaDescription: draft.metaDescription || undefined,
             };
+            // T1 calculated field. It used to be computed ONLY on create, so editing
+            // a post's body left its "N min read" frozen at whatever the first draft
+            // happened to be — Root Cause #39, a CREATE transform with no UPDATE
+            // counterpart. Computed once here and sent on both paths.
+            const readTimeMinutes = Math.max(1, Math.round(draft.content.replace(/<[^>]*>/g, "").split(/\s+/).filter(Boolean).length / 200));
             if (isEdit) {
-                return apiClient.patch(ADMIN_ENDPOINTS.BLOG_BY_ID(postId), payload);
+                return apiClient.patch(ADMIN_ENDPOINTS.BLOG_BY_ID(postId), {
+                    ...payload,
+                    readTimeMinutes,
+                });
             }
             return apiClient.post(ADMIN_ENDPOINTS.BLOG, {
                 ...payload,
                 authorId: "admin",
-                readTimeMinutes: Math.max(1, Math.round(draft.content.replace(/<[^>]*>/g, "").split(/\s+/).filter(Boolean).length / 200)),
+                readTimeMinutes,
                 views: 0,
             });
         },
@@ -181,11 +178,29 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
         onError: (err) => showToast(err?.message ?? "Failed to delete post.", "error"),
     });
     const isLoading = saveMutation.isPending || postQuery.isLoading;
-    const steps = [
+    /**
+     * Sections, not steps. Every field is reachable at once and one submit at
+     * the bottom saves the lot — the old wizard blocked step 2 until step 1
+     * validated, so a typo in the title made the whole post uneditable.
+     *
+     * The `render` bodies are unchanged: this form's controls are genuinely
+     * bespoke (a slug that auto-follows the title until touched, a read-time
+     * estimate, a live preview). What is no longer hand-written is which field
+     * belongs where — that is read off the schema's annotations, and the ids
+     * below match them exactly so `<FormErrorSummary>` can jump to the right
+     * section.
+     *
+     * The per-step `validate` callbacks are gone: they duplicated rules the Zod
+     * schema already states, and only ran as a gate to the NEXT step, which no
+     * longer exists.
+     */
+    const sections = [
         {
+            id: "content",
             label: "Content",
+            required: true,
+            quick: true,
             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;
                             onChange({ title: v, ...(!slugManual && { slug: toSlug(v) }) });
@@ -195,7 +210,11 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                         }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsx(Input, { label: "Excerpt", value: values.excerpt, onChange: (e) => onChange({ excerpt: e.target.value }), placeholder: "Short summary shown in listings and cards" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Content" }), _jsx(RichTextEditor, { value: values.content, onChange: (v) => onChange({ content: v }), placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] })] })),
         },
         {
+            id: "media",
             label: "Media",
+            // Media sections MUST stay mounted while collapsed: <Collapse> unmounts
+            // its children, which would abort an in-flight upload.
+            keepMounted: true,
             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",
@@ -204,7 +223,9 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                         }), onChange: (url) => onChange({ coverImage: url }) }), _jsx(Input, { label: "YouTube Video ID (optional)", value: values.youtubeId, onChange: (e) => onChange({ youtubeId: e.target.value }), placeholder: "e.g. dQw4w9WgXcQ", helperText: "The 11-character video ID from the YouTube URL." })] })),
         },
         {
+            id: "seo",
             label: "SEO & Tags",
+            quick: true,
             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));
@@ -212,7 +233,9 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
             },
         },
         {
+            id: "publish",
             label: "Publish",
+            quick: true,
             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" }) }))] })),
         },
@@ -221,16 +244,25 @@ 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 fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
+    // Replaces the hand-rolled fieldToStepIndex + goToStep pair. The hook owns
+    // expand-then-scroll ordering, which a raw setState could not: a collapsed
+    // panel has to MOUNT before scrollIntoView/focus can reach the field. That
+    // jump was dead before W0 — `steps: []` was hardcoded in both context paths,
+    // so FormErrorSummary's label resolved to undefined for every form.
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    const { shellCtx, setFieldError, validate } = useFormShellState(blogDraftSchema, {
+        sections: sectionMeta,
+        onGoToSection: goToSection,
+        fieldToSectionIndex,
+    });
+    // Live validation. Must sit AFTER useFormShellState — it used to run above
+    // the hook, which only compiled because the wizard declared the hook higher
+    // up the component.
+    useEffect(() => {
+        validate(draft);
         // 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] }));
+    }, [draft, validate]);
+    const formContent = (_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: () => { saveMutation.mutate(); }, schema: blogDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: 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/AdminFeatureEditorView.js

@@ -8,6 +8,8 @@ import { Button, Checkbox, ConfirmDeleteModal, Div, Form, Grid, Input, Label, Se
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ERROR_MESSAGES } from "../../../errors/messages";
+import { FormErrorSummary, applyZodIssues } from "../../../ui/forms";
+import { productFeatureFormSchema } from "../../products/schemas/product-features.validators";
 import { PRODUCT_FEATURE_CATEGORY_OPTIONS, PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER, PRODUCT_FEATURE_ICON_COLOR_OPTIONS, PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS, PRODUCT_FEATURE_SCOPE_OPTIONS, } from "../../products/constants/product-features.constants";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
@@ -139,15 +141,42 @@ export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, em
             label: s.storeName ?? s.id,
         })),
     ], [storesQuery.data]);
-    const isDisabled = !label || !icon || (scope === "store" && !storeId) || isSubmitting;
-    const formSection = (_jsx(Form, { onSubmit: (e) => {
-            e.preventDefault();
-            saveMutation.mutate();
-        }, children: _jsxs(Stack, { gap: "md", children: [_jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Free Shipping", helperText: "Shown on product cards and detail pages." }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional \u2014 shown as a tooltip on the badge." }), _jsxs(Grid, { cols: "halves", gap: "md", children: [_jsx(Input, { label: "Icon", value: icon, onChange: (e) => setIcon(e.target.value), required: true, placeholder: "truck", helperText: "Icon-set name key (e.g. truck, star, trophy) OR an SVG path starting with M." }), _jsx(Select, { label: "Icon colour", value: iconColor, onChange: (e) => setIconColor(e.target.value), options: PRODUCT_FEATURE_ICON_COLOR_OPTIONS })] }), _jsxs(Grid, { cols: "halves", gap: "md", children: [_jsx(Select, { label: "Category", value: category, onChange: (e) => setCategory(e.target.value), options: PRODUCT_FEATURE_CATEGORY_OPTIONS, required: true }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0 })] }), _jsxs(Div, { children: [_jsx(Text, { className: FIELD_LABEL_CLASS, children: "Applies to" }), _jsx(Row, { gap: "sm", wrap: true, className: "mt-2", children: PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS.map((opt) => {
+    /**
+     * Submit is gated on SUBMISSION, not on a truthiness guess.
+     *
+     * This used to be `!label || !icon || (scope === "store" && !storeId)` — a
+     * hand-rolled restatement of three of the schema's rules, which silently
+     * disagreed with it on every other rule (max lengths, displayOrder bounds,
+     * the productTypes minimum). The button now stays enabled and the schema
+     * reports what is actually wrong, on the field itself.
+     */
+    const isDisabled = isSubmitting;
+    const formSection = (_jsx(Form, { schema: productFeatureFormSchema, onSubmit: (e) => e.preventDefault(), children: ({ setFieldError, clearErrors }) => (_jsxs(Stack, { gap: "md", children: [_jsx(FormErrorSummary, {}), _jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Free Shipping", helperText: "Shown on product cards and detail pages." }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional \u2014 shown as a tooltip on the badge." }), _jsxs(Grid, { cols: "halves", gap: "md", children: [_jsx(Input, { label: "Icon", value: icon, onChange: (e) => setIcon(e.target.value), required: true, placeholder: "truck", helperText: "Icon-set name key (e.g. truck, star, trophy) OR an SVG path starting with M." }), _jsx(Select, { label: "Icon colour", value: iconColor, onChange: (e) => setIconColor(e.target.value), options: PRODUCT_FEATURE_ICON_COLOR_OPTIONS })] }), _jsxs(Grid, { cols: "halves", gap: "md", children: [_jsx(Select, { label: "Category", value: category, onChange: (e) => setCategory(e.target.value), options: PRODUCT_FEATURE_CATEGORY_OPTIONS, required: true }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0 })] }), _jsxs(Div, { children: [_jsx(Text, { className: FIELD_LABEL_CLASS, children: "Applies to" }), _jsx(Row, { gap: "sm", wrap: true, className: "mt-2", children: PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS.map((opt) => {
                                 const checked = productTypes.includes(opt.value);
                                 const pillClass = `${PILL_BASE_CLASS} ${checked ? PILL_CHECKED_CLASS : PILL_UNCHECKED_CLASS}`;
                                 return (_jsxs(Label, { className: pillClass, children: [_jsx(Checkbox, { bare: true, className: "sr-only", checked: checked, onChange: () => toggleProductType(opt.value) }), opt.label] }, opt.value));
-                            }) })] }), !fixedScope && (_jsx(Select, { label: "Scope", value: scope, onChange: (e) => setScope(e.target.value), options: PRODUCT_FEATURE_SCOPE_OPTIONS })), scope === "store" && !fixedStoreId && (_jsx(Select, { label: "Store", value: storeId, onChange: (e) => setStoreId(e.target.value), options: storeOptions, required: true, helperText: "Store-scope features are visible only on this store's listings." })), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: isDisabled, children: isEdit ? "Save changes" : "Create feature" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete" }))] })] }) }, "feature-form"));
+                            }) })] }), !fixedScope && (_jsx(Select, { label: "Scope", value: scope, onChange: (e) => setScope(e.target.value), options: PRODUCT_FEATURE_SCOPE_OPTIONS })), scope === "store" && !fixedStoreId && (_jsx(Select, { label: "Store", value: storeId, onChange: (e) => setStoreId(e.target.value), options: storeOptions, required: true, helperText: "Store-scope features are visible only on this store's listings." })), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: isDisabled, onClick: () => {
+                                // Parse before saving. This form had NO validation at all: the
+                                // only guard was `required` on the inputs, an HTML attribute
+                                // that any programmatic submit bypasses, and the max lengths /
+                                // displayOrder bounds / productTypes minimum were never checked
+                                // client-side at all.
+                                clearErrors();
+                                const parsed = productFeatureFormSchema.safeParse({
+                                    label, description: description || undefined,
+                                    icon, iconColor: iconColor || undefined,
+                                    category, scope,
+                                    productTypes: productTypes.length === 0 ? ["all"] : productTypes,
+                                    storeId: scope === "store" ? storeId || undefined : undefined,
+                                    isActive,
+                                    displayOrder: Number(displayOrder) || PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER,
+                                });
+                                if (!parsed.success) {
+                                    applyZodIssues(parsed.error.issues, setFieldError);
+                                    return;
+                                }
+                                saveMutation.mutate();
+                            }, children: isEdit ? "Save changes" : "Create feature" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete" }))] })] })) }, "feature-form"));
     const deleteModal = deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Feature", message: DELETE_CONFIRM_TEXT, onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }));
     if (embedded) {
         return _jsxs(Div, { className: `${__O.yAuto} ${__P.p4}`, children: [formSection, deleteModal] });

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

@@ -1,8 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { Button, Form, FormActions, Input, Select, SideDrawer, Toggle, useToast, } from "../../../ui";
+import { FormErrorSummary, applyZodIssues } from "../../../ui/forms";
+import { navItemFormSchema } from "../schemas/nav-item-form";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ROUTES } from "../../../next/routing/route-map";
@@ -78,8 +80,16 @@ export function AdminNavEditorView({ open, onClose, onSaved, item, parentOptions
         { label: "None (top-level)", value: "" },
         ...parentOptions,
     ];
-    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: isEdit ? "Edit Nav Item" : "New Nav Item", children: _jsxs(Form, { onSubmit: (e) => {
-                e.preventDefault();
-                saveMutation.mutate();
-            }, spacing: "md", padding: "md", children: [_jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Products" }), _jsx(Input, { label: "URL / href", value: href, onChange: (e) => setHref(e.target.value), required: true, placeholder: String(ROUTES.PUBLIC.PRODUCTS), helperText: "Use relative paths (e.g. /products) or full URLs." }), _jsx(Select, { label: "Icon (optional)", options: ICON_OPTIONS, value: icon, onValueChange: setIcon }), parentOptions.length > 0 && (_jsx(Select, { label: "Parent item (for nested nav)", options: parentSelectOptions, value: parentId, onValueChange: setParentId })), _jsx(Input, { label: "Order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower numbers appear first." }), _jsx(Toggle, { label: "Visible in navigation", checked: isVisible, onChange: setIsVisible }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !canSave || saveMutation.isPending, children: isEdit ? "Save changes" : "Create item" })] })] }) }));
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: isEdit ? "Edit Nav Item" : "New Nav Item", children: _jsx(Form, { schema: navItemFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", padding: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FormErrorSummary, {}), _jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Products" }), _jsx(Input, { label: "URL / href", value: href, onChange: (e) => setHref(e.target.value), required: true, placeholder: String(ROUTES.PUBLIC.PRODUCTS), helperText: "Use relative paths (e.g. /products) or full URLs." }), _jsx(Select, { label: "Icon (optional)", options: ICON_OPTIONS, value: icon, onValueChange: setIcon }), parentOptions.length > 0 && (_jsx(Select, { label: "Parent item (for nested nav)", options: parentSelectOptions, value: parentId, onValueChange: setParentId })), _jsx(Input, { label: "Order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower numbers appear first." }), _jsx(Toggle, { label: "Visible in navigation", checked: isVisible, onChange: setIsVisible }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: saveMutation.isPending, onClick: () => {
+                                    clearErrors();
+                                    const parsed = navItemFormSchema.safeParse({
+                                        label, href, icon: icon || undefined, order,
+                                        parentId: parentId || undefined, isVisible,
+                                    });
+                                    if (!parsed.success) {
+                                        applyZodIssues(parsed.error.issues, setFieldError);
+                                        return;
+                                    }
+                                    saveMutation.mutate();
+                                }, children: isEdit ? "Save changes" : "Create item" })] })] })) }) }));
 }

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

@@ -6,7 +6,7 @@ import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useCallback, useEffect, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { Button, ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
+import { Button, ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, useToast, RecordDetailModal, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
@@ -15,6 +15,7 @@ import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdmin
 import { DataListingView } from "./DataListingView";
 import { apiClient } from "../../../http";
 export function AdminNewsletterView({ children, onBulkUnsubscribe, ...props }) {
+    const [detail, setDetail] = useState(null);
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const [unsubscribeOpen, setUnsubscribeOpen] = useState(false);
@@ -98,6 +99,9 @@ export function AdminNewsletterView({ children, onBulkUnsubscribe, ...props }) {
             { value: sortBy("subscribedAt", "DESC"), label: "Newest" },
             { value: "subscribedAt", label: "Oldest" },
         ],
+        // Opening a row is what makes the destructive actions beside it
+        // safe to offer at all.
+        onRowClick: (row) => setDetail(row),
         mapRows: (response) => toRecordArray(response.subscribers).map((item, index) => ({
             id: toStringValue(item.id, `sub-${index}`),
             primary: toStringValue(item.email, "Unknown email"),
@@ -105,6 +109,7 @@ export function AdminNewsletterView({ children, onBulkUnsubscribe, ...props }) {
                 .filter(Boolean)
                 .join(" · ") || "—",
             status: toStringValue(item.status, "unknown"),
+            detail: item,
             updatedAt: toRelativeDate(item.subscribedAt ??
                 item.createdAt),
         })),
@@ -138,7 +143,18 @@ export function AdminNewsletterView({ children, onBulkUnsubscribe, ...props }) {
             ] })),
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_NEWSLETTER_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(ConfirmDeleteModal, { isOpen: unsubscribeOpen, onClose: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: detail !== null, onClose: () => setDetail(null), title: toStringValue(detail?.detail?.email, "Subscriber"), fields: (() => {
+                    const d = (detail?.detail ?? {});
+                    return detail ? [
+                        { label: "Email", value: toStringValue(d.email, "—") },
+                        { label: "Status", value: toStringValue(d.status, "—") },
+                        { label: "Source", value: toStringValue(d.source, "—") },
+                        { label: "Subscribed", value: toRelativeDate(d.subscribedAt ?? d.createdAt) },
+                        { label: "Unsubscribed", value: toRelativeDate(d.unsubscribedAt) },
+                        { label: "IP address", value: d.ipAddress ? "Logged" : "Not logged" },
+                        { label: "Subscriber ID", value: detail?.id ?? "—" },
+                    ] : undefined;
+                })() }), _jsx(ConfirmDeleteModal, { isOpen: unsubscribeOpen, onClose: () => {
                     setUnsubscribeOpen(false);
                     setSelectedRow(null);
                 }, onConfirm: () => {

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

@@ -34,15 +34,19 @@ import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { ConfirmDeleteModal, FilterChipGroup, ListingLayout, RecordDetailModal, RowActionMenu, useToast, } from "../../../ui";
+import { FilterChipGroup, ListingLayout, RecordDetailModal, RowActionMenu, useToast, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_OFFER_STATUS_TABS } from "../constants/filter-tabs";
+import { OfferPhaseTimeline } from "../../seller/components/OfferPhaseTimeline";
+import { QuickFormDrawer } from "../../shell/QuickFormDrawer";
+import { cancelOfferFormSchema } from "../../seller/schemas/offer-forms";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
 import { ROUTES } from "../../../next/routing/route-map";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
 import { apiClient } from "../../../http";
+import { normalizeError } from "../../../errors/normalize";
 /** Terminal states — an offer here has nothing left to cancel. */
 const TERMINAL_STATUSES = new Set(["paid", "declined", "expired", "withdrawn"]);
 export function AdminOffersView({ children, ...props }) {
@@ -51,9 +55,39 @@ export function AdminOffersView({ children, ...props }) {
     const [detailRow, setDetailRow] = useState(null);
     const [cancelOpen, setCancelOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState(null);
+    /**
+     * Open on the SINGLE-ITEM response, not the row's cached list blob.
+     *
+     * Two reasons. The list payload has no `chain`, so a three-round negotiation
+     * would render as one orphan round; and a modal opened on a list snapshot
+     * shows whatever the last refetch happened to hold, which is the stale-editor
+     * shape of Root Cause #38.
+     *
+     * The row is shown immediately and enriched when the fetch lands, so the
+     * modal never blocks on the network.
+     */
+    const openDetail = async (row) => {
+        setDetailRow(row);
+        try {
+            const full = await apiClient.get(ADMIN_ENDPOINTS.OFFER_BY_ID(row.id));
+            const detail = (full?.data ?? full);
+            if (detail && typeof detail === "object") {
+                setDetailRow((prev) => (prev?.id === row.id ? { ...prev, detail } : prev));
+            }
+        }
+        catch (err) {
+            // The row's own data is already on screen, so this degrades to "no
+            // chain" rather than to an empty modal. Say so instead of failing silently.
+            const normalized = normalizeError(err);
+            showToast(normalized.message || "Couldn't load the full offer history.", "error");
+        }
+    };
     const cancelMutation = useApiMutation({
-        mutationFn: async (offerId) => {
-            await apiClient.patch(ADMIN_ENDPOINTS.OFFER_BY_ID(offerId), { status: "expired" });
+        mutationFn: async ({ offerId, reason }) => {
+            await apiClient.patch(ADMIN_ENDPOINTS.OFFER_BY_ID(offerId), {
+                status: "expired",
+                reason,
+            });
         },
         onSuccess: () => {
             showToast("Offer cancelled and cleared from the buyer's cart.", "success");
@@ -100,20 +134,17 @@ export function AdminOffersView({ children, ...props }) {
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
         // A menu of pure mutations is not a detail affordance (Root Cause #56) —
         // cancelling an offer without first reading it is acting blind.
-        onRowClick: (row) => setDetailRow(row),
+        onRowClick: (row) => void openDetail(row),
         buildFilters: (state) => state.status && state.status !== "All"
             ? sieveFilter("status", SIEVE_OP.EQ, state.status)
             : undefined,
-        buildBulkActions: (selection) => [
-            {
-                id: ROW_ACTION_ID.CANCEL,
-                label: ACTIONS.ADMIN["cancel-offer"].label,
-                variant: "secondary",
-                onClick: () => selection.clearSelection(),
-            },
-        ],
+        // No bulk actions, deliberately. There was a destructively-labelled
+        // "Cancel offer" entry here whose onClick only called clearSelection() — a
+        // registry-backed control that read as working and did nothing. Cancel now
+        // requires a per-offer reason, and one shared reason across a mixed
+        // selection is worse audit data than no bulk action at all.
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
-                { label: ROW_ACTION_META[ROW_ACTION_ID.VIEW].label, onClick: () => setDetailRow(row) },
+                { label: ROW_ACTION_META[ROW_ACTION_ID.VIEW].label, onClick: () => void openDetail(row) },
                 {
                     label: ACTIONS.ADMIN["cancel-offer"].label,
                     destructive: true,
@@ -176,11 +207,24 @@ export function AdminOffersView({ children, ...props }) {
                                 : []),
                         ],
                     }
-                    : undefined }), _jsx(ConfirmDeleteModal, { isOpen: cancelOpen, onClose: () => {
+                    : undefined, extra: _jsx(OfferPhaseTimeline, { status: toStringValue(d.status, "pending"), timeline: d.timeline, timelineTruncated: d.timelineTruncated, superseded: Boolean(d.superseded), createdAt: toStringValue(d.createdAt, ""), respondedAt: toStringValue(d.respondedAt, ""), acceptedAt: toStringValue(d.acceptedAt, ""), paidAt: toStringValue(d.paidAt, ""), chain: d.chain }) }), _jsx(QuickFormDrawer, { isOpen: cancelOpen, onClose: () => {
                     setCancelOpen(false);
                     setSelectedRow(null);
-                }, onConfirm: () => {
-                    if (selectedRow)
-                        cancelMutation.mutate(selectedRow.id);
-                }, isDeleting: cancelMutation.isPending, title: ACTIONS.ADMIN["cancel-offer"].confirmation.title, message: ACTIONS.ADMIN["cancel-offer"].confirmation.body, confirmText: ACTIONS.ADMIN["cancel-offer"].confirmation.confirmLabel, variant: "warning" })] }));
+                }, title: ACTIONS.ADMIN["cancel-offer"].confirmation.title, schema: cancelOfferFormSchema, fields: [
+                    {
+                        name: "reason",
+                        label: "Reason for cancelling",
+                        type: "textarea",
+                        required: true,
+                        placeholder: "e.g. Listing withdrawn by the seller after a pricing error",
+                        helperText: `${ACTIONS.ADMIN["cancel-offer"].confirmation.body} The buyer sees this reason, and it is recorded in the audit log.`,
+                    },
+                ], submitLabel: ACTIONS.ADMIN["cancel-offer"].confirmation.confirmLabel, isLoading: cancelMutation.isPending, onSubmit: (values) => {
+                    if (!selectedRow)
+                        return;
+                    cancelMutation.mutate({
+                        offerId: selectedRow.id,
+                        reason: String(values.reason ?? ""),
+                    });
+                } })] }));
 }

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { sortBy } from "@mohasinac/appkit/client";
+import { useState } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useQueryClient } from "@tanstack/react-query";
-import { Badge, Div, FilterChipGroup, Span, Stack, Text, useToast } from "../../../ui";
+import { Badge, Div, FilterChipGroup, Span, Stack, Text, useToast, RecordDetailModal, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { toRecordArray, toRelativeDate, toStringValue } from "../hooks/useAdminListingData";
@@ -44,7 +45,10 @@ const PM_COLUMNS = [
         render: (row) => _jsx(Span, { size: "sm", color: "muted", children: row.updatedAt }),
     },
 ];
-function buildConfig(onAction) {
+function buildConfig(onAction, 
+// Threaded in rather than closed over: this factory sits OUTSIDE the
+// component, so the component's state setter is not in scope here.
+onOpen) {
     return {
         portal: "admin",
         title: "Payment Methods",
@@ -65,6 +69,9 @@ function buildConfig(onAction) {
             { value: "type", label: "Type" },
         ],
         columns: PM_COLUMNS,
+        // Opening a row is what makes the destructive actions beside it
+        // safe to offer at all.
+        onRowClick: onOpen,
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `pm-${index}`),
             primary: `${toStringValue(item.type, "unknown").toUpperCase()} · ${toStringValue(item.displayLabel, "—")}`,
@@ -72,6 +79,7 @@ function buildConfig(onAction) {
             status: toStringValue(item.banStatus, ""),
             updatedAt: toRelativeDate(item.bannedAt ?? item.updatedAt),
             _raw: item,
+            detail: item,
         })),
         getTotal: (response, rows) => typeof response.total === "number" ? response.total : rows.length,
         buildFilters: () => undefined,
@@ -111,6 +119,7 @@ function buildConfig(onAction) {
     };
 }
 export function AdminPaymentMethodsView(_props) {
+    const [detail, setDetail] = useState(null);
     // Independent useUrlTable() against the same URL param the listing reads
     // via filterKeys (Root Cause #35 pattern).
     const chipTable = useUrlTable({ defaults: {} });
@@ -132,6 +141,17 @@ export function AdminPaymentMethodsView(_props) {
     const handleAction = (id, action) => {
         actionMutation.mutate({ id, action });
     };
-    const config = buildConfig(handleAction);
-    return (_jsxs(Stack, { gap: "md", children: [_jsx(Div, { padding: "inline", border: "default", className: "border-b", children: _jsx(FilterChipGroup, { label: "Status", tabs: BAN_STATUS_TABS, value: banStatus, onChange: (v) => chipTable.set("banStatus", v) }) }), _jsx(DataListingView, { config: config })] }));
+    const config = buildConfig(handleAction, setDetail);
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(RecordDetailModal, { isOpen: detail !== null, onClose: () => setDetail(null), title: toStringValue(detail?.detail?.displayLabel, "Payment method"), fields: (() => {
+                    const d = (detail?.detail ?? {});
+                    return detail ? [
+                        { label: "Type", value: toStringValue(d.type, "—").toUpperCase() },
+                        { label: "Label", value: toStringValue(d.displayLabel, "—") },
+                        { label: "Owner", value: toStringValue(d.userId, "—") },
+                        { label: "Ban status", value: toStringValue(d.banStatus, "Not banned") },
+                        { label: "Ban reason", value: toStringValue(d.banReason, "—") },
+                        { label: "Banned at", value: toRelativeDate(d.bannedAt) },
+                        { label: "Method ID", value: detail?.id ?? "—" },
+                    ] : undefined;
+                })() }), _jsx(Div, { padding: "inline", border: "default", className: "border-b", children: _jsx(FilterChipGroup, { label: "Status", tabs: BAN_STATUS_TABS, value: banStatus, onChange: (v) => chipTable.set("banStatus", v) }) }), _jsx(DataListingView, { config: config })] }));
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { type ScammerStatus } from "../../scams/schemas/firestore";
 export interface AdminScammerEditorViewProps {
     open: boolean;
     onClose: () => void;
@@ -8,7 +9,7 @@ export interface AdminScammerEditorViewProps {
     description?: string;
     phones?: string[];
     upiIds?: string[];
-    currentStatus?: string;
+    currentStatus?: ScammerStatus;
     verificationNote?: string;
     reportedBy?: string;
     reportedByAnon?: boolean;

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

@@ -6,23 +6,13 @@ import { useQueryClient } from "@tanstack/react-query";
 import { Button, Code, Div, FormActions, HorizontalRule, Label, Row, Select, SideDrawer, Span, Stack, Text, Textarea, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ScammerStatusValues, } from "../../scams/schemas/firestore";
+import { SCAMMER_STATUS_BADGE, SCAMMER_STATUS_LABEL, SCAMMER_STATUS_OPTIONS, } from "../../scams/constants/scammer-status-display";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
     p4: "p-[var(--appkit-space-4)]",
 };
 const CLS_SECTION_LABEL = "text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] uppercase tracking-wide";
-const STATUS_OPTIONS = [
-    { label: "Pending review", value: "pending_review" },
-    { label: "Verified", value: "verified" },
-    { label: "Rejected", value: "rejected" },
-    { label: "Removed", value: "removed" },
-];
-const STATUS_COLOR = {
-    pending_review: "bg-warning-surface text-warning",
-    verified: "bg-success-surface text-success",
-    rejected: "bg-error-surface text-error",
-    removed: "bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)] bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]",
-};
 export function AdminScammerEditorView({ open, onClose, scammerId, displayNames = [], scamType, description, phones = [], upiIds = [], currentStatus, verificationNote, reportedBy, reportedByAnon, }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
@@ -63,5 +53,5 @@ export function AdminScammerEditorView({ open, onClose, scammerId, displayNames
             showToast(err?.message ?? "Failed to delete profile.", "error");
         },
     });
-    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayNames.length > 0 ? displayNames[0] : "Scammer Profile", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "md", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex ${STATUS_COLOR[currentStatus ?? "pending_review"] ?? STATUS_COLOR.pending_review}`, rounded: "full", padding: "pill-sm-tall", children: (currentStatus ?? "pending_review").replace(/_/g, " ") }), scamType && (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: scamType.replace(/_/g, " ") }))] }), displayNames.length > 0 && (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Names / Aliases" }), _jsx(Row, { wrap: true, gap: "xs", children: displayNames.map((name, i) => (_jsx(Span, { size: "xs", rounded: "full", surface: "subtle", padding: "pill-sm", children: name }, i))) })] })), (phones.length > 0 || upiIds.length > 0) && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [phones.length > 0 && (_jsxs(Div, { className: "mb-2", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Phone numbers" }), _jsx(Row, { wrap: true, gap: "xs", children: phones.map((p, i) => (_jsx(Code, { size: "xs", rounded: "default", padding: "sm", surface: "subtle", children: p }, i))) })] })), upiIds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "UPI IDs" }), _jsx(Row, { wrap: true, gap: "xs", children: upiIds.map((u, i) => (_jsx(Code, { size: "xs", rounded: "default", padding: "sm", surface: "subtle", children: u }, i))) })] }))] })), description && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", size: "sm", children: description })] })), _jsxs(Div, { textSize: "xs", color: "muted", children: ["Reported by:", " ", _jsx(Span, { weight: "medium", color: "muted", children: reportedByAnon ? "Anonymous" : (reportedBy ?? "Unknown") })] }), _jsx(HorizontalRule, { tone: "subtle", spacing: "comfortable" }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "uppercase tracking-wide", color: "muted", size: "xs", weight: "semibold", children: "Verification note (internal)" }), _jsx(Textarea, { value: note, onChange: (e) => setNote(e.target.value), rows: 3, placeholder: "e.g. Verified via 3 independent reports\u2026" })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "danger", size: "sm", disabled: !scammerId, isLoading: deleteMutation.isPending, onClick: () => deleteMutation.mutate(), children: "Delete" }), _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", isLoading: updateMutation.isPending, disabled: !scammerId || updateMutation.isPending, onClick: () => updateMutation.mutate(), children: "Save changes" })] })] }) }));
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayNames.length > 0 ? displayNames[0] : "Scammer Profile", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "md", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex ${SCAMMER_STATUS_BADGE[currentStatus ?? ScammerStatusValues.PENDING_REVIEW]}`, rounded: "full", padding: "pill-sm-tall", children: SCAMMER_STATUS_LABEL[currentStatus ?? ScammerStatusValues.PENDING_REVIEW] }), scamType && (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: scamType.replace(/_/g, " ") }))] }), displayNames.length > 0 && (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Names / Aliases" }), _jsx(Row, { wrap: true, gap: "xs", children: displayNames.map((name, i) => (_jsx(Span, { size: "xs", rounded: "full", surface: "subtle", padding: "pill-sm", children: name }, i))) })] })), (phones.length > 0 || upiIds.length > 0) && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [phones.length > 0 && (_jsxs(Div, { className: "mb-2", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Phone numbers" }), _jsx(Row, { wrap: true, gap: "xs", children: phones.map((p, i) => (_jsx(Code, { size: "xs", rounded: "default", padding: "sm", surface: "subtle", children: p }, i))) })] })), upiIds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "UPI IDs" }), _jsx(Row, { wrap: true, gap: "xs", children: upiIds.map((u, i) => (_jsx(Code, { size: "xs", rounded: "default", padding: "sm", surface: "subtle", children: u }, i))) })] }))] })), description && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", size: "sm", children: description })] })), _jsxs(Div, { textSize: "xs", color: "muted", children: ["Reported by:", " ", _jsx(Span, { weight: "medium", color: "muted", children: reportedByAnon ? "Anonymous" : (reportedBy ?? "Unknown") })] }), _jsx(HorizontalRule, { tone: "subtle", spacing: "comfortable" }), _jsx(Select, { label: "Status", options: SCAMMER_STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "uppercase tracking-wide", color: "muted", size: "xs", weight: "semibold", children: "Verification note (internal)" }), _jsx(Textarea, { value: note, onChange: (e) => setNote(e.target.value), rows: 3, placeholder: "e.g. Verified via 3 independent reports\u2026" })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "danger", size: "sm", disabled: !scammerId, isLoading: deleteMutation.isPending, onClick: () => deleteMutation.mutate(), children: "Delete" }), _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", isLoading: updateMutation.isPending, disabled: !scammerId || updateMutation.isPending, onClick: () => updateMutation.mutate(), children: "Save changes" })] })] }) }));
 }