@mohasinac/appkit 4.30.18 → 4.31.0

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

@@ -1,17 +1,33 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
-import { Button, ConfirmDeleteModal, Div, Form, Input, StackedViewShell, useToast, } from "../../../ui";
-import { FieldInput, FormErrorSummary } from "../../../ui/forms";
+import { ConfirmDeleteModal, Div, Input, Stack, StackedViewShell, useToast, } from "../../../ui";
+import { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms";
+import { SectionForm, useSectionFormNav } from "../../shell";
+/**
+ * Describes the fields this form actually edits.
+ *
+ * It previously declared `slug` and `parentId` — neither of which the form has
+ * a control for or ever sends — while omitting `itemCode`, `description` and
+ * `coverImage`, which it does send. `.passthrough()` let the three real fields
+ * through unvalidated, and the two phantom ones were `.optional()`, so the
+ * mismatch never produced an error: validation was only ever checking `name`.
+ */
 const sublistingCategoryFormSchema = z.object({
-    name: z.string().min(1, "Name is required").max(120),
-    slug: z.string().regex(/^[a-z0-9-]+$/, "Lowercase letters, digits and hyphens only").optional().or(z.literal("")),
-    parentId: z.string().nullable().optional(),
-}).passthrough();
+    name: z.string().min(1, "Category name is required").max(120),
+    itemCode: z.string().max(60, "Keep the item code under 60 characters").optional().or(z.literal("")),
+    description: z.string().max(500, "Keep the description under 500 characters").optional().or(z.literal("")),
+    coverImage: z.string().optional().or(z.literal("")),
+});
+const EMPTY_VALUES = {
+    name: "",
+    itemCode: "",
+    description: "",
+    coverImage: "",
+};
 import { ImageUpload } from "../../media/upload/ImageUpload";
 import { useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
@@ -19,11 +35,11 @@ import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 export function AdminSublistingCategoryEditorView({ categoryId, onSaved, onDeleted, ...rest }) {
     const isEdit = Boolean(categoryId);
     const { showToast } = useToast();
-    const [name, setName] = React.useState("");
-    const [itemCode, setItemCode] = React.useState("");
-    const [description, setDescription] = React.useState("");
-    const [coverImage, setCoverImage] = React.useState("");
+    const [values, setValues] = React.useState(EMPTY_VALUES);
     const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
+    const handleChange = React.useCallback((partial) => {
+        setValues((prev) => Object.assign({}, prev, partial));
+    }, []);
     const categoryQuery = useQuery({
         queryKey: ["admin", "sublisting-category", categoryId],
         queryFn: async () => {
@@ -36,19 +52,21 @@ export function AdminSublistingCategoryEditorView({ categoryId, onSaved, onDelet
         const cat = categoryQuery.data;
         if (!cat)
             return;
-        setName(cat.name ?? "");
-        setItemCode(cat.itemCode ?? "");
-        setDescription(cat.description ?? "");
-        setCoverImage(cat.coverImage ?? "");
+        setValues({
+            name: cat.name ?? "",
+            itemCode: cat.itemCode ?? "",
+            description: cat.description ?? "",
+            coverImage: cat.coverImage ?? "",
+        });
     }, [categoryQuery.data]);
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save category.",
         mutationFn: async () => {
             const payload = {
-                name,
-                itemCode: itemCode || undefined,
-                description: description || undefined,
-                coverImage: coverImage || undefined,
+                name: values.name,
+                itemCode: values.itemCode || undefined,
+                description: values.description || undefined,
+                coverImage: values.coverImage || undefined,
             };
             if (isEdit) {
                 return apiClient.put(ADMIN_ENDPOINTS.SUBLISTING_CATEGORY_BY_ID(categoryId), payload);
@@ -73,17 +91,40 @@ export function AdminSublistingCategoryEditorView({ categoryId, onSaved, onDelet
     });
     const { upload } = useMediaUpload();
     const isSubmitting = saveMutation.isPending || categoryQuery.isLoading;
+    const sections = React.useMemo(() => [
+        {
+            id: "basics",
+            label: "Details",
+            required: true,
+            fields: ["name", "itemCode", "description"],
+            render: ({ values: v, onChange, errors }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(FieldInput, { name: "name", label: "Category name", value: String(v.name ?? ""), onChange: (val) => onChange({ name: val }), required: true, placeholder: "e.g. Base Set Charizard 108/120", error: errors.name }), _jsx(Input, { label: "Item code", value: String(v.itemCode ?? ""), onChange: (e) => onChange({ itemCode: e.target.value }), placeholder: "e.g. PSA 10, 108/120, STH", helperText: "Grade, card number, or series code. Optional.", error: errors.itemCode })] }), _jsx(Input, { label: "Description", value: String(v.description ?? ""), onChange: (e) => onChange({ description: e.target.value }), placeholder: "Brief description shown on the public category page", error: errors.description })] })),
+        },
+        {
+            id: "media",
+            label: "Cover image",
+            fields: ["coverImage"],
+            // The upload holds uncommitted state while a file is in flight, so the
+            // panel must survive being collapsed.
+            keepMounted: true,
+            render: ({ values: v, onChange }) => (_jsx(ImageUpload, { label: "Cover image", currentImage: String(v.coverImage ?? ""), onUpload: (file) => upload(file, "sublisting-categories", true, {
+                    type: "category-image",
+                    name: String(v.name ?? "") || "sublisting",
+                }), onChange: (url) => onChange({ coverImage: url }) })),
+        },
+    ], [upload]);
+    const nav = useSectionFormNav(sections, values);
+    const { shellCtx } = useFormShellState(sublistingCategoryFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Sub-listing Category" : "New Sub-listing Category", sections: [
-                    _jsx(Form, { schema: sublistingCategoryFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(FieldInput, { name: "name", label: "Category name", value: name, onChange: (v) => setName(v), required: true, placeholder: "e.g. Base Set Charizard 108/120" }), _jsx(Input, { label: "Item code", value: itemCode, onChange: (e) => setItemCode(e.target.value), placeholder: "e.g. PSA 10, 108/120, STH", helperText: "Grade, card number, or series code. Optional." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description shown on the public category page" }), _jsx(ImageUpload, { label: "Cover image", currentImage: coverImage, onUpload: (file) => upload(file, "sublisting-categories", true, {
-                                        type: "category-image",
-                                        name: name || "sublisting",
-                                    }), onChange: setCoverImage }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, onClick: () => {
-                                                clearErrors();
-                                                if (!name.trim()) {
-                                                    setFieldError("name", "Category name is required");
-                                                    return;
-                                                }
-                                                saveMutation.mutate();
-                                            }, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete" }))] })] })) }, "sc-editor-form"),
+                    _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: values, onChange: handleChange, onSubmit: () => saveMutation.mutate(), schema: sublistingCategoryFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isEdit ? "Save changes" : "Create category", destructiveAction: isEdit
+                                    ? {
+                                        label: "Delete",
+                                        onClick: () => setDeleteConfirmOpen(true),
+                                        disabled: deleteMutation.isPending,
+                                    }
+                                    : undefined })] }, "sc-editor-form"),
                 ] }), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Sublisting Category", message: "Delete this category? All linked listings will be unlinked. This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
 }

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

@@ -3,25 +3,35 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { z } from "zod";
-import { Button, ConfirmDeleteModal, Div, Form, Input, Row, Stack, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
-import { FieldInput, FieldTextarea, FormErrorSummary } from "../../../ui/forms";
+import { ConfirmDeleteModal, Div, StackedViewShell, useToast } from "../../../ui";
+import { FieldInput, FormErrorSummary } from "../../../ui/forms";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-const checklistItemFormSchema = z.object({
-    groupKey: z.string().min(1, "Group key is required").max(100),
-    groupLabel: z.string().min(1, "Group label is required").max(200),
-    pageKey: z.string().min(1, "Page key is required").max(100),
-    pageLabel: z.string().min(1, "Page label is required").max(200),
-    label: z.string().min(3, "Label must be at least 3 characters").max(500),
-}).passthrough();
+import { checklistItemFormSchema } from "../../tester/schemas/checklist-item-form";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
 const __O = {
     yAuto: "overflow-y-auto",
 };
+const EMPTY_FORM = {
+    label: "",
+    description: "",
+    href: "",
+    groupLabel: "",
+    groupKey: "",
+    pageLabel: "",
+    pageKey: "",
+    order: 0,
+    phase: 1,
+    isActive: true,
+    adminOnly: false,
+};
 function slugifyKey(str) {
     return str
         .toLowerCase()
@@ -31,24 +41,16 @@ function slugifyKey(str) {
 }
 export function AdminTesterChecklistItemEditorView({ itemId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(itemId);
-    const [groupKey, setGroupKey] = React.useState("");
-    const [groupLabel, setGroupLabel] = React.useState("");
-    const [pageKey, setPageKey] = React.useState("");
-    const [pageLabel, setPageLabel] = React.useState("");
-    const [label, setLabel] = React.useState("");
-    const [description, setDescription] = React.useState("");
-    const [href, setHref] = React.useState("");
-    const [order, setOrder] = React.useState(0);
-    const [phase, setPhase] = React.useState(1);
-    const [isActive, setIsActive] = React.useState(true);
-    const [adminOnly, setAdminOnly] = React.useState(false);
+    const [form, setForm] = React.useState(EMPTY_FORM);
     const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
+    const patch = (partial) => setForm((prev) => Object.assign({}, prev, partial));
     const { showToast } = useToast();
     const itemQuery = useQuery({
         queryKey: ["admin", "tester-checklist-items", itemId],
         queryFn: async () => {
             const res = await apiClient.get(ADMIN_ENDPOINTS.TESTER_CHECKLIST_ITEM_BY_ID(itemId));
-            return res?.data ?? res;
+            return (res?.data ??
+                res);
         },
         enabled: isEdit,
     });
@@ -56,43 +58,37 @@ export function AdminTesterChecklistItemEditorView({ itemId, onSaved, onDeleted,
         const item = itemQuery.data;
         if (!item)
             return;
-        setGroupKey(item.groupKey ?? "");
-        setGroupLabel(item.groupLabel ?? "");
-        setPageKey(item.pageKey ?? "");
-        setPageLabel(item.pageLabel ?? "");
-        setLabel(item.label ?? "");
-        setDescription(item.description ?? "");
-        setHref(item.href ?? "");
-        setOrder(typeof item.order === "number" ? item.order : 0);
-        setPhase(typeof item.phase === "number" ? item.phase : 1);
-        setIsActive(item.isActive ?? true);
-        setAdminOnly(item.adminOnly ?? false);
+        patch({
+            label: item.label ?? "",
+            description: item.description ?? "",
+            href: item.href ?? "",
+            groupLabel: item.groupLabel ?? "",
+            groupKey: item.groupKey ?? "",
+            pageLabel: item.pageLabel ?? "",
+            pageKey: item.pageKey ?? "",
+            order: typeof item.order === "number" ? item.order : 0,
+            phase: typeof item.phase === "number" ? item.phase : 1,
+            isActive: item.isActive ?? true,
+            adminOnly: item.adminOnly ?? false,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [itemQuery.data]);
-    const handleGroupLabelChange = (value) => {
-        setGroupLabel(value);
-        if (!isEdit)
-            setGroupKey(slugifyKey(value));
-    };
-    const handlePageLabelChange = (value) => {
-        setPageLabel(value);
-        if (!isEdit)
-            setPageKey(slugifyKey(value));
-    };
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save checklist item.",
         mutationFn: async () => {
+            const draft = visibleValues(checklistItemFormSchema, form);
             const payload = {
-                groupKey: groupKey || slugifyKey(groupLabel),
-                groupLabel,
-                pageKey: pageKey || slugifyKey(pageLabel),
-                pageLabel,
-                label,
-                description: description || "",
-                href: href || "",
-                order,
-                phase,
-                isActive,
-                adminOnly,
+                groupKey: draft.groupKey,
+                groupLabel: draft.groupLabel,
+                pageKey: draft.pageKey,
+                pageLabel: draft.pageLabel,
+                label: draft.label,
+                description: draft.description,
+                href: draft.href,
+                order: draft.order,
+                phase: draft.phase,
+                isActive: draft.isActive,
+                adminOnly: draft.adminOnly,
             };
             if (isEdit) {
                 return apiClient.put(ADMIN_ENDPOINTS.TESTER_CHECKLIST_ITEM_BY_ID(itemId), payload);
@@ -100,7 +96,8 @@ export function AdminTesterChecklistItemEditorView({ itemId, onSaved, onDeleted,
             return apiClient.post(ADMIN_ENDPOINTS.TESTER_CHECKLIST_ITEMS, payload);
         },
         onSuccess: (res) => {
-            const id = res?.data?.id ?? res?.id ?? itemId;
+            const created = res?.data?.id;
+            const id = itemId ?? created;
             showToast(isEdit ? "Checklist item updated." : "Checklist item created.", "success");
             if (onSaved && id)
                 onSaved(id);
@@ -116,16 +113,49 @@ export function AdminTesterChecklistItemEditorView({ itemId, onSaved, onDeleted,
         },
     });
     const isSubmitting = saveMutation.isPending || itemQuery.isLoading;
-    const canSave = Boolean(groupLabel.trim()) && Boolean(pageLabel.trim()) && Boolean(label.trim());
-    const formSection = (_jsxs(_Fragment, { children: [_jsx(Form, { schema: checklistItemFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(FieldInput, { name: "groupLabel", label: "Group", value: groupLabel, onChange: handleGroupLabelChange, required: true, placeholder: "e.g. Buying", hint: "Top-level accordion section on the Tester Hub." }), _jsx(Input, { label: "Group key", value: groupKey, onChange: (e) => setGroupKey(e.target.value), placeholder: "buying", helperText: "Auto-generated from the group name." })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(FieldInput, { name: "pageLabel", label: "Page", value: pageLabel, onChange: handlePageLabelChange, required: true, placeholder: "e.g. Checkout", hint: "Sub-accordion within the group." }), _jsx(Input, { label: "Page key", value: pageKey, onChange: (e) => setPageKey(e.target.value), placeholder: "checkout", helperText: "Auto-generated from the page name." })] }), _jsx(FieldInput, { name: "label", label: "Test case (Yes/No question)", value: label, onChange: setLabel, required: true, placeholder: "e.g. Coupon discount is correctly reflected in the order total" }), _jsx(FieldTextarea, { name: "description", label: "Description (optional)", value: description, onChange: setDescription, placeholder: "Extra context for the tester." }), _jsx(FieldInput, { name: "href", label: "Deep link (optional)", value: href, onChange: setHref, placeholder: "/cart", hint: "Jumps the tester straight to the feature being tested." }), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Input, { label: "Display order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower = shown first within the page." }), _jsx(Input, { label: "Phase", value: String(phase), onChange: (e) => setPhase(Math.max(1, parseInt(e.target.value, 10) || 1)), type: "number", min: 1, helperText: "Test batch this case belongs to \u2014 testers work through one phase at a time." })] }), _jsxs(Stack, { className: `${__P.p4}`, gap: "3", rounded: "lg", border: "default", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Visibility" }), _jsx(Toggle, { label: "Active (visible to testers)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Admin-only (requires canTestAdmin)", checked: adminOnly, onChange: setAdminOnly })] }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, onClick: () => {
-                                        clearErrors();
-                                        if (!label.trim()) {
-                                            setFieldError("label", "Test case label is required");
-                                            return;
-                                        }
-                                        saveMutation.mutate();
-                                    }, children: isEdit ? "Save changes" : "Create checklist item" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete" }))] })] })) }, "tester-checklist-item-form"), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: ACTIONS.ADMIN["delete-checklist-item"].confirmation?.title ?? "Delete checklist item", message: ACTIONS.ADMIN["delete-checklist-item"].confirmation?.body ??
-                    "Delete this checklist item? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
+    const sections = React.useMemo(() => buildSectionsFromSchema(checklistItemFormSchema, {
+        renderers: {
+            /*
+             * The two keys stay editable, and typing a LABEL fills the matching
+             * key until the item exists — after that a key is what responses are
+             * grouped by, so an edit would orphan them.
+             */
+            groupLabel: ({ values, onChange, errors }) => (_jsx(FieldInput, { name: "groupLabel", label: "Group", required: true, hint: "Top-level accordion section on the Tester Hub.", value: values.groupLabel, error: errors.groupLabel, onChange: (v) => onChange(isEdit
+                    ? { groupLabel: v }
+                    : { groupLabel: v, groupKey: slugifyKey(v) }) })),
+            pageLabel: ({ values, onChange, errors }) => (_jsx(FieldInput, { name: "pageLabel", label: "Page", required: true, hint: "Sub-accordion within the group.", value: values.pageLabel, error: errors.pageLabel, onChange: (v) => onChange(isEdit
+                    ? { pageLabel: v }
+                    : { pageLabel: v, pageKey: slugifyKey(v) }) })),
+        },
+    }), [isEdit]);
+    const nav = useSectionFormNav(sections, form, {
+        scope: "admin:tester-checklist-item-editor",
+    });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(checklistItemFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const onSubmit = () => {
+        clearErrors();
+        const parsed = checklistItemFormSchema.safeParse(visibleValues(checklistItemFormSchema, form));
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        saveMutation.mutate();
+    };
+    const formSection = (_jsxs(_Fragment, { children: [_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: onSubmit, schema: checklistItemFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isEdit ? "Save changes" : "Create checklist item", destructiveAction: isEdit
+                            ? {
+                                label: "Delete checklist item",
+                                onClick: () => setDeleteConfirmOpen(true),
+                            }
+                            : undefined })] }), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: ACTIONS.ADMIN["delete-checklist-item"].confirmation?.title ??
+                    "Delete checklist item", message: ACTIONS.ADMIN["delete-checklist-item"].confirmation?.body ??
+                    "Delete this checklist item? This cannot be undone.", onConfirm: () => {
+                    deleteMutation.mutate();
+                    setDeleteConfirmOpen(false);
+                }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formSection });
     }

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

@@ -1,3 +1,13 @@
+/**
+ * The "+ Create Brand" drawer behind every brand `PaginatedSelect`.
+ *
+ * Fields come from `quickCreateTaxonomySchema`'s annotations — the same schema
+ * `CategoryQuickCreateForm` derives from, since both drawers post
+ * `{ name, description, isActive }` and differ only in endpoint and slug prefix.
+ *
+ * `slug` is deliberately not a field: it is derived from the name here and
+ * treated as create-only everywhere else in this codebase (Root Cause #39).
+ */
 import React from "react";
 export interface BrandQuickCreateFormProps {
     onSaved: (id: string, name: string) => void;

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

@@ -1,43 +1,66 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
-import { useApiMutation } from "@mohasinac/appkit/client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The "+ Create Brand" drawer behind every brand `PaginatedSelect`.
+ *
+ * Fields come from `quickCreateTaxonomySchema`'s annotations — the same schema
+ * `CategoryQuickCreateForm` derives from, since both drawers post
+ * `{ name, description, isActive }` and differ only in endpoint and slug prefix.
+ *
+ * `slug` is deliberately not a field: it is derived from the name here and
+ * treated as create-only everywhere else in this codebase (Root Cause #39).
+ */
 import React from "react";
-import { Button, Form, Input, Toggle, useToast } from "../../../ui";
-import { apiClient } from "../../../http";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { quickCreateTaxonomySchema } from "../schemas/small-forms";
-import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { apiClient } from "../../../http";
 import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { buildSectionsFromSchema } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
+import { quickCreateTaxonomySchema } from "../schemas/small-forms";
+const EMPTY = { name: "", description: "", isActive: true };
 function toBrandSlug(str) {
-    const base = str.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    const base = str
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
     return base.startsWith("brand-") ? base : `brand-${base}`;
 }
 export function BrandQuickCreateForm({ onSaved, onCancel }) {
-    const [name, setName] = React.useState("");
-    const [description, setDescription] = React.useState("");
-    const [isActive, setIsActive] = React.useState(true);
-    const { showToast } = useToast();
+    const [form, setForm] = React.useState(EMPTY);
+    const sections = React.useMemo(() => buildSectionsFromSchema(quickCreateTaxonomySchema), []);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:brand-quick-create" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(quickCreateTaxonomySchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     const mutation = useApiMutation({
+        // Authored copy goes here, never a toast in `onError` — the mutation
+        // already owns exactly one failure surface (audit-usemutation-onerror).
         errorMessage: "Failed to create brand.",
         mutationFn: async () => apiClient.post(ADMIN_ENDPOINTS.BRANDS, {
-            name,
-            slug: toBrandSlug(name),
-            description: description || undefined,
-            isActive,
+            name: form.name,
+            slug: toBrandSlug(form.name),
+            description: form.description || undefined,
+            isActive: form.isActive,
         }),
         onSuccess: (res) => {
             const id = res?.data?.id ?? res?.id ?? "";
-            onSaved(id, name);
+            onSaved(id, form.name);
         },
     });
-    return (_jsx(Form, { schema: quickCreateTaxonomySchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FormErrorSummary, {}), _jsx(Input, { label: "Brand name", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Hot Wheels", autoFocus: true }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional brief description" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: mutation.isPending, disabled: mutation.isPending, onClick: () => {
-                                clearErrors();
-                                const parsed = quickCreateTaxonomySchema.safeParse({ name, description, isActive });
-                                if (!parsed.success) {
-                                    applyZodIssues(parsed.error.issues, setFieldError);
-                                    return;
-                                }
-                                mutation.mutate();
-                            }, children: "Create brand" }), _jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: "Cancel" })] })] })) }));
+    const onSubmit = () => {
+        clearErrors();
+        const parsed = quickCreateTaxonomySchema.safeParse(form);
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        mutation.mutate();
+    };
+    return (_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: (partial) => setForm((prev) => Object.assign({}, prev, partial)), onSubmit: onSubmit, schema: quickCreateTaxonomySchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: mutation.isPending, submitLabel: "Create brand", onCancel: onCancel, cancelLabel: "Cancel" })] }));
 }

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

@@ -1,3 +1,14 @@
+/**
+ * The "+ Create Category" drawer behind every category `PaginatedSelect`.
+ *
+ * Twin of `BrandQuickCreateForm` and deliberately kept as two files: they share
+ * a schema but differ in endpoint, slug prefix and copy, which is exactly two
+ * copies with different domain semantics — the Duplication Decision Framework
+ * says extract on the third, not the second.
+ *
+ * `slug` is not a field: derived from the name here, create-only everywhere
+ * else in this codebase (Root Cause #39).
+ */
 import React from "react";
 export interface CategoryQuickCreateFormProps {
     onSaved: (id: string, name: string) => void;

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

@@ -1,42 +1,64 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
-import { useApiMutation } from "@mohasinac/appkit/client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The "+ Create Category" drawer behind every category `PaginatedSelect`.
+ *
+ * Twin of `BrandQuickCreateForm` and deliberately kept as two files: they share
+ * a schema but differ in endpoint, slug prefix and copy, which is exactly two
+ * copies with different domain semantics — the Duplication Decision Framework
+ * says extract on the third, not the second.
+ *
+ * `slug` is not a field: derived from the name here, create-only everywhere
+ * else in this codebase (Root Cause #39).
+ */
 import React from "react";
-import { Button, Form, Input, Toggle, useToast } from "../../../ui";
-import { apiClient } from "../../../http";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { quickCreateTaxonomySchema } from "../schemas/small-forms";
-import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { apiClient } from "../../../http";
 import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { buildSectionsFromSchema } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
+import { quickCreateTaxonomySchema } from "../schemas/small-forms";
+const EMPTY = { name: "", description: "", isActive: true };
 function toCategorySlug(str) {
-    return str.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    return str
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
 }
 export function CategoryQuickCreateForm({ onSaved, onCancel }) {
-    const [name, setName] = React.useState("");
-    const [description, setDescription] = React.useState("");
-    const [isActive, setIsActive] = React.useState(true);
-    const { showToast } = useToast();
+    const [form, setForm] = React.useState(EMPTY);
+    const sections = React.useMemo(() => buildSectionsFromSchema(quickCreateTaxonomySchema), []);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:category-quick-create" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(quickCreateTaxonomySchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     const mutation = useApiMutation({
         errorMessage: "Failed to create category.",
         mutationFn: async () => apiClient.post(ADMIN_ENDPOINTS.CATEGORIES, {
-            name,
-            slug: toCategorySlug(name),
-            description: description || undefined,
-            isActive,
+            name: form.name,
+            slug: toCategorySlug(form.name),
+            description: form.description || undefined,
+            isActive: form.isActive,
         }),
         onSuccess: (res) => {
             const id = res?.data?.id ?? res?.id ?? "";
-            onSaved(id, name);
+            onSaved(id, form.name);
         },
     });
-    return (_jsx(Form, { schema: quickCreateTaxonomySchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FormErrorSummary, {}), _jsx(Input, { label: "Category name", value: name, onChange: (e) => setName(e.target.value), required: true, placeholder: "e.g. Trading Cards", autoFocus: true }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional brief description" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: mutation.isPending, disabled: mutation.isPending, onClick: () => {
-                                clearErrors();
-                                const parsed = quickCreateTaxonomySchema.safeParse({ name, description, isActive });
-                                if (!parsed.success) {
-                                    applyZodIssues(parsed.error.issues, setFieldError);
-                                    return;
-                                }
-                                mutation.mutate();
-                            }, children: "Create category" }), _jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: "Cancel" })] })] })) }));
+    const onSubmit = () => {
+        clearErrors();
+        const parsed = quickCreateTaxonomySchema.safeParse(form);
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        mutation.mutate();
+    };
+    return (_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: (partial) => setForm((prev) => Object.assign({}, prev, partial)), onSubmit: onSubmit, schema: quickCreateTaxonomySchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: mutation.isPending, submitLabel: "Create category", onCancel: onCancel, cancelLabel: "Cancel" })] }));
 }

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

@@ -115,6 +115,8 @@ export { AdminSessionsManager } from "./AdminSessionsManager";
 export type { AdminSessionsManagerProps } from "./AdminSessionsManager";
 export { AdminNavigationView } from "./AdminNavigationView";
 export type { AdminNavigationViewProps } from "./AdminNavigationView";
+export { AdminActionIndexView } from "./AdminActionIndexView";
+export type { AdminActionIndexViewProps } from "./AdminActionIndexView";
 export { AdminAdsView } from "./AdminAdsView";
 export type { AdminAdsViewProps, AdminAdItem, AdminAdProvider, AdminAdStatus } from "./AdminAdsView";
 export { AdminAdEditorView } from "./AdminAdEditorView";
@@ -144,8 +146,6 @@ export type { AdminRevenueChartProps, AdminOrdersChartProps, } from "./analytics
 export { AdminTopProductsTable } from "./analytics/AdminTopProductsTable";
 export type { AdminTopProductsTableProps, AdminTopProductsTableLabels, } from "./analytics/AdminTopProductsTable";
 export { AdminPageViewsReportView } from "./analytics/AdminPageViewsReportView";
-export { AdminFeatureFlagsView } from "./AdminFeatureFlagsView";
-export type { AdminFeatureFlagsViewProps } from "./AdminFeatureFlagsView";
 export { AdminNewsletterView } from "./AdminNewsletterView";
 export type { AdminNewsletterViewProps } from "./AdminNewsletterView";
 export { AdminContactView } from "./AdminContactView";

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

@@ -62,6 +62,7 @@ export { AdminReviewsView } from "./AdminReviewsView";
 export { AdminSectionsView } from "./AdminSectionsView";
 export { AdminSessionsManager } from "./AdminSessionsManager";
 export { AdminNavigationView } from "./AdminNavigationView";
+export { AdminActionIndexView } from "./AdminActionIndexView";
 export { AdminAdsView } from "./AdminAdsView";
 export { AdminAdEditorView } from "./AdminAdEditorView";
 export { AdminCarouselView } from "./AdminCarouselView";
@@ -77,7 +78,6 @@ export { DrawerFormFooter } from "./DrawerFormFooter";
 export { AdminRevenueChart, AdminOrdersChart, } from "./analytics/AdminAnalyticsCharts";
 export { AdminTopProductsTable } from "./analytics/AdminTopProductsTable";
 export { AdminPageViewsReportView } from "./analytics/AdminPageViewsReportView";
-export { AdminFeatureFlagsView } from "./AdminFeatureFlagsView";
 export { AdminNewsletterView } from "./AdminNewsletterView";
 export { AdminContactView } from "./AdminContactView";
 export { AdminContactEditorView } from "./AdminContactEditorView";