@mohasinac/appkit 4.30.18 → 4.31.0

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

@@ -1,33 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-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, IconButton, Input, Label, Select, Span, Stack, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
+import { ConfirmDeleteModal, Div, StackedViewShell, useToast } from "../../../ui";
 import { FieldInput, FormErrorSummary } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { adminCouponFormSchema } from "../../seller/schemas/coupon-form";
+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 { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
-import { CategoryInlineSelect } from "../../seller/components/CategoryInlineSelect";
+import { CategoryChipPicker } from "../../seller/components/CategoryChipPicker";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
 const __O = {
     yAuto: "overflow-y-auto",
 };
-// --- Types -------------------------------------------------------------------
-const couponFormSchema = z.object({
-    code: z.string().min(2, "Coupon code is required").max(40).regex(/^[A-Z0-9_-]+$/i),
-    name: z.string().min(1).max(120),
-    type: z.enum(["percentage", "fixed", "free_shipping", "buy_x_get_y"]),
-    scope: z.enum(["admin", "seller"]),
-    validity: z.object({
-        isActive: z.boolean(),
-    }).passthrough(),
-}).passthrough();
 const TYPE_OPTIONS = [
     { label: "Percentage Discount", value: "percentage" },
     { label: "Fixed Amount Discount", value: "fixed" },
@@ -49,42 +42,33 @@ function toDateInputValue(val) {
         return "";
     }
 }
-function CouponDiscountFields({ type, discountValue, setDiscountValue, maxDiscount, setMaxDiscount, minPurchase, setMinPurchase, buyQty, setBuyQty, getQty, setGetQty, discountLabel, }) {
-    return (_jsxs(_Fragment, { children: [type !== "free_shipping" && type !== "buy_x_get_y" && (_jsx(Input, { label: discountLabel, value: discountValue, onChange: (e) => setDiscountValue(e.target.value), type: "number", min: 0, required: true, placeholder: type === "percentage" ? "e.g. 20" : "e.g. 5000" })), type === "percentage" && (_jsx(Input, { label: "Max discount cap (\u20B9, optional)", value: maxDiscount, onChange: (e) => setMaxDiscount(e.target.value), type: "number", min: 0, placeholder: "e.g. 200", helperText: "Leave blank for no cap." })), (type === "percentage" || type === "fixed") && (_jsx(Input, { label: "Min order value (\u20B9, optional)", value: minPurchase, onChange: (e) => setMinPurchase(e.target.value), type: "number", min: 0, placeholder: "e.g. 500", helperText: "Leave blank for no minimum." })), type === "buy_x_get_y" && (_jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Input, { label: "Buy quantity", value: buyQty, onChange: (e) => setBuyQty(e.target.value), type: "number", min: 1, required: true }), _jsx(Input, { label: "Get quantity", value: getQty, onChange: (e) => setGetQty(e.target.value), type: "number", min: 1, required: true })] }))] }));
-}
-function CouponValidityFields({ startDate, setStartDate, endDate, setEndDate, isActive, setIsActive, totalLimit, setTotalLimit, perUserLimit, setPerUserLimit, isEdit, currentUsage, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Input, { label: "Total usage limit (optional)", value: totalLimit, onChange: (e) => setTotalLimit(e.target.value), type: "number", min: 0, placeholder: "Unlimited" }), _jsx(Input, { label: "Per-user limit (optional)", value: perUserLimit, onChange: (e) => setPerUserLimit(e.target.value), type: "number", min: 0, placeholder: "Unlimited" })] }), isEdit && (_jsx(Input, { label: "Current usage", value: String(currentUsage), disabled: true, helperText: "Read-only \u2014 updated by orders." })), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Input, { label: "Start date", value: startDate, onChange: (e) => setStartDate(e.target.value), type: "date", required: true }), _jsx(Input, { label: "End date (optional)", value: endDate, onChange: (e) => setEndDate(e.target.value), type: "date", helperText: "Leave blank for no expiry." })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive })] }));
-}
 // --- Component ---------------------------------------------------------------
 export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded, initialData, ...rest }) {
     const isEdit = Boolean(couponId);
-    // --- form state ---
-    const [code, setCode] = React.useState("");
+    const [form, setForm] = React.useState({
+        code: "",
+        name: "",
+        description: "",
+        type: "percentage",
+        value: "",
+        maxDiscount: "",
+        minPurchase: "",
+        buyQuantity: "1",
+        getQuantity: "1",
+        totalLimit: "",
+        perUserLimit: "",
+        currentUsage: 0,
+        startDate: new Date().toISOString().split("T")[0],
+        endDate: "",
+        isActive: true,
+        firstTimeUserOnly: false,
+        appliesToAuctions: false,
+        applicableProducts: [],
+        applicableCategories: [],
+    });
     const [codeManual, setCodeManual] = React.useState(false);
-    const [name, setName] = React.useState("");
-    const [description, setDescription] = React.useState("");
-    const [type, setType] = React.useState("percentage");
-    // discount
-    const [discountValue, setDiscountValue] = React.useState("");
-    const [maxDiscount, setMaxDiscount] = React.useState("");
-    const [minPurchase, setMinPurchase] = React.useState("");
-    // bxgy (buy_x_get_y only)
-    const [buyQty, setBuyQty] = React.useState("1");
-    const [getQty, setGetQty] = React.useState("1");
-    // usage
-    const [totalLimit, setTotalLimit] = React.useState("");
-    const [perUserLimit, setPerUserLimit] = React.useState("");
-    const [currentUsage, setCurrentUsage] = React.useState(0);
-    // validity
-    const [startDate, setStartDate] = React.useState(new Date().toISOString().split("T")[0]);
-    const [endDate, setEndDate] = React.useState("");
-    const [isActive, setIsActive] = React.useState(true);
-    // restrictions
-    const [firstTimeOnly, setFirstTimeOnly] = React.useState(false);
-    const [appliesToAuctions, setAppliesToAuctions] = React.useState(false);
-    const [applicableProducts, setApplicableProducts] = React.useState([]);
-    const [applicableCategories, setApplicableCategories] = React.useState([]);
     const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
+    const patch = (partial) => setForm((prev) => Object.assign({}, prev, partial));
     const { showToast } = useToast();
     // --- load existing data (edit mode) ---
     const couponQuery = useQuery({
@@ -104,74 +88,91 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
         const c = couponQuery.data;
         if (!c)
             return;
-        setCode(c.code ?? "");
         setCodeManual(true);
-        setName(c.name ?? "");
-        setDescription(c.description ?? "");
-        setType(c.type ?? "percentage");
-        setDiscountValue(c.discount?.value !== undefined ? String(c.discount.value) : "");
-        setMaxDiscount(c.discount?.maxDiscount !== undefined ? String(c.discount.maxDiscount) : "");
-        setMinPurchase(c.discount?.minPurchase !== undefined ? String(c.discount.minPurchase) : "");
-        setBuyQty(c.bxgy?.buyQuantity !== undefined ? String(c.bxgy.buyQuantity) : "1");
-        setGetQty(c.bxgy?.getQuantity !== undefined ? String(c.bxgy.getQuantity) : "1");
-        setTotalLimit(c.usage?.totalLimit !== undefined ? String(c.usage.totalLimit) : "");
-        setPerUserLimit(c.usage?.perUserLimit !== undefined ? String(c.usage.perUserLimit) : "");
-        setCurrentUsage(c.usage?.currentUsage ?? 0);
-        setStartDate(toDateInputValue(c.validity?.startDate));
-        setEndDate(toDateInputValue(c.validity?.endDate));
-        setIsActive(c.validity?.isActive ?? false);
-        setFirstTimeOnly(c.restrictions?.firstTimeUserOnly ?? false);
-        setApplicableProducts(Array.isArray(c.restrictions?.applicableProducts) ? c.restrictions.applicableProducts : []);
-        setApplicableCategories(Array.isArray(c.restrictions?.applicableCategories) ? c.restrictions.applicableCategories : []);
-        setAppliesToAuctions(c.applicableToAuctions ?? false);
+        patch({
+            code: c.code ?? "",
+            name: c.name ?? "",
+            description: c.description ?? "",
+            type: c.type ?? "percentage",
+            value: c.discount?.value !== undefined ? String(c.discount.value) : "",
+            maxDiscount: c.discount?.maxDiscount !== undefined ? String(c.discount.maxDiscount) : "",
+            minPurchase: c.discount?.minPurchase !== undefined ? String(c.discount.minPurchase) : "",
+            buyQuantity: c.bxgy?.buyQuantity !== undefined ? String(c.bxgy.buyQuantity) : "1",
+            getQuantity: c.bxgy?.getQuantity !== undefined ? String(c.bxgy.getQuantity) : "1",
+            totalLimit: c.usage?.totalLimit !== undefined ? String(c.usage.totalLimit) : "",
+            perUserLimit: c.usage?.perUserLimit !== undefined ? String(c.usage.perUserLimit) : "",
+            currentUsage: c.usage?.currentUsage ?? 0,
+            startDate: toDateInputValue(c.validity?.startDate),
+            endDate: toDateInputValue(c.validity?.endDate),
+            isActive: c.validity?.isActive ?? false,
+            firstTimeUserOnly: c.restrictions?.firstTimeUserOnly ?? false,
+            applicableProducts: Array.isArray(c.restrictions?.applicableProducts)
+                ? c.restrictions.applicableProducts
+                : [],
+            applicableCategories: Array.isArray(c.restrictions?.applicableCategories)
+                ? c.restrictions.applicableCategories
+                : [],
+            appliesToAuctions: c.applicableToAuctions ?? false,
+        });
     }, [couponQuery.data]);
     const handleNameChange = (value) => {
-        setName(value);
-        if (!codeManual)
-            setCode(toCouponCode(value));
+        patch(codeManual ? { name: value } : { name: value, code: toCouponCode(value) });
     };
     // --- save ---
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save coupon.",
         mutationFn: async () => {
+            /*
+             * `visibleValues` is what makes hidden-implies-not-sent structural here.
+             * The cap, the minimum and the buy/get pair each render only for certain
+             * types and used to be filtered again by a hand-written ternary in this
+             * builder — correct, but a second statement of the same rule, which is
+             * how it drifted on the seller side and then here.
+             */
+            const draft = visibleValues(adminCouponFormSchema, form);
+            const num = (v) => (v && v.trim() !== "" ? Number(v) : undefined);
             const payload = {
-                name,
-                description: description || undefined,
-                type,
+                name: form.name,
+                description: form.description || undefined,
+                type: form.type,
                 discount: {
-                    value: discountValue !== "" ? Number(discountValue) : 0,
-                    maxDiscount: maxDiscount !== "" ? Number(maxDiscount) : undefined,
-                    minPurchase: minPurchase !== "" ? Number(minPurchase) : undefined,
+                    value: num(draft.value) ?? 0,
+                    maxDiscount: num(draft.maxDiscount),
+                    minPurchase: num(draft.minPurchase),
                 },
-                ...(type === "buy_x_get_y" && {
+                ...(form.type === "buy_x_get_y" && {
                     bxgy: {
-                        buyQuantity: Number(buyQty) || 1,
-                        getQuantity: Number(getQty) || 1,
+                        buyQuantity: num(draft.buyQuantity) ?? 1,
+                        getQuantity: num(draft.getQuantity) ?? 1,
                     },
                 }),
                 usage: {
-                    totalLimit: totalLimit !== "" ? Number(totalLimit) : undefined,
-                    perUserLimit: perUserLimit !== "" ? Number(perUserLimit) : undefined,
-                    currentUsage,
+                    totalLimit: num(form.totalLimit),
+                    perUserLimit: num(form.perUserLimit),
+                    currentUsage: form.currentUsage,
                 },
                 validity: {
-                    startDate,
-                    endDate: endDate || undefined,
-                    isActive,
+                    startDate: form.startDate,
+                    endDate: form.endDate || undefined,
+                    isActive: form.isActive,
                 },
                 restrictions: {
-                    firstTimeUserOnly: firstTimeOnly,
-                    ...(applicableProducts.length > 0 && { applicableProducts }),
-                    ...(applicableCategories.length > 0 && { applicableCategories }),
+                    firstTimeUserOnly: form.firstTimeUserOnly,
+                    ...(form.applicableProducts.length > 0 && {
+                        applicableProducts: form.applicableProducts,
+                    }),
+                    ...(form.applicableCategories.length > 0 && {
+                        applicableCategories: form.applicableCategories,
+                    }),
                 },
-                applicableToAuctions: appliesToAuctions,
+                applicableToAuctions: form.appliesToAuctions,
             };
             if (isEdit) {
                 return apiClient.patch(ADMIN_ENDPOINTS.COUPON_BY_ID(couponId), payload);
             }
             return apiClient.post(ADMIN_ENDPOINTS.COUPONS, {
                 ...payload,
-                code: code || toCouponCode(name),
+                code: form.code || toCouponCode(form.name),
                 createdBy: "admin",
             });
         },
@@ -193,28 +194,63 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
         },
     });
     const isSubmitting = saveMutation.isPending || couponQuery.isLoading;
-    const canSave = Boolean(name && (isEdit ? true : code) && discountValue !== "" && startDate);
-    // discount label varies by type
-    const discountLabel = type === "percentage"
-        ? "Discount percentage (%)"
-        : type === "fixed"
-            ? "Discount amount (₹)"
-            : "Discount value";
-    const formSection = (_jsxs(_Fragment, { children: [_jsx(Form, { schema: couponFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Coupon type", options: TYPE_OPTIONS, value: type, onValueChange: (v) => setType(v), required: true }), _jsx(FieldInput, { name: "name", label: "Campaign name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Summer Sale 20%" }), !isEdit && (_jsx(Input, { label: "Coupon code", value: code, onChange: (e) => {
-                                setCode(toCouponCode(e.target.value));
-                                setCodeManual(true);
-                            }, required: true, placeholder: "e.g. SUMMER20", helperText: "Auto-generated from name. Uppercase alphanumeric + hyphens only." })), isEdit && (_jsx(Input, { label: "Coupon code", value: code, disabled: true, helperText: "Code cannot be changed after creation." })), _jsx(Input, { label: "Description (optional)", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Internal notes about this coupon" }), _jsx(CouponDiscountFields, { type: type, discountValue: discountValue, setDiscountValue: setDiscountValue, maxDiscount: maxDiscount, setMaxDiscount: setMaxDiscount, minPurchase: minPurchase, setMinPurchase: setMinPurchase, buyQty: buyQty, setBuyQty: setBuyQty, getQty: getQty, setGetQty: setGetQty, discountLabel: discountLabel }), _jsx(CouponValidityFields, { startDate: startDate, setStartDate: setStartDate, endDate: endDate, setEndDate: setEndDate, isActive: isActive, setIsActive: setIsActive, totalLimit: totalLimit, setTotalLimit: setTotalLimit, perUserLimit: perUserLimit, setPerUserLimit: setPerUserLimit, isEdit: isEdit, currentUsage: currentUsage }), _jsx(Toggle, { label: "First-time users only", checked: firstTimeOnly, onChange: setFirstTimeOnly }), _jsx(Toggle, { label: "Applies to auctions", checked: appliesToAuctions, onChange: setAppliesToAuctions }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "medium", color: "primary", children: "Applicable products (optional)" }), _jsx(ProductInlineSelect, { scope: "admin", multiple: true, value: applicableProducts, onChange: setApplicableProducts, placeholder: "Restrict to specific products\u2026" }), _jsx(Text, { size: "xs", color: "muted", children: "Leave empty to apply the coupon to every eligible product." })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "medium", color: "primary", children: "Applicable categories (optional)" }), _jsx(CategoryInlineSelect, { value: "", onChange: (id) => {
-                                        if (!id || applicableCategories.includes(id))
-                                            return;
-                                        setApplicableCategories([...applicableCategories, id]);
-                                    }, allowCreate: true, placeholder: "Add a category\u2026" }), applicableCategories.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", padding: "t-2xs", children: applicableCategories.map((cid) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", border: "strong", padding: "pill-sm", rounded: "full", surface: "muted", color: "primary", size: "xs", children: [cid, _jsx(IconButton, { "aria-label": `Remove ${cid}`, variant: "ghost", size: "sm", onClick: () => setApplicableCategories(applicableCategories.filter((c) => c !== cid)), icon: "\u00D7" })] }, cid))) })), _jsx(Text, { size: "xs", color: "muted", children: "Leave empty to apply the coupon to every category." })] }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, onClick: () => {
-                                        clearErrors();
-                                        if (!name.trim()) {
-                                            setFieldError("name", "Campaign name is required");
-                                            return;
-                                        }
-                                        saveMutation.mutate();
-                                    }, children: isEdit ? "Save changes" : "Create coupon" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete coupon" }))] })] })) }, "coupon-form"), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Coupon", message: "Delete this coupon? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
+    /*
+     * `canSave` is gone.
+     *
+     * It was `name && (isEdit || code) && discountValue !== "" && startDate` — a
+     * hand-rolled restatement of four rules that disagreed with the schema on
+     * every other one, disabling the button with no way to tell WHICH field it
+     * was waiting on. Safe to delete only now, in the same commit that makes the
+     * schema actually execute: before this the form parsed a five-field
+     * `.passthrough()` stub, so removing the gate would have replaced a
+     * too-strict check with none at all.
+     */
+    const sections = React.useMemo(() => buildSectionsFromSchema(adminCouponFormSchema, {
+        options: { type: TYPE_OPTIONS.map((o) => ({ value: String(o.value), label: o.label })) },
+        renderers: {
+            // Typing the campaign name fills the code until the admin edits it.
+            name: ({ values, errors }) => (_jsx(FieldInput, { name: "name", label: "Campaign name", required: true, value: values.name, error: errors.name, onChange: handleNameChange })),
+            code: ({ values, onChange, errors }) => (_jsx(FieldInput, { name: "code", label: "Coupon code", required: true, disabled: isEdit, hint: isEdit ? "A code cannot change once customers have it." : undefined, value: values.code, error: errors.code, onChange: (v) => {
+                    setCodeManual(true);
+                    onChange({ code: toCouponCode(v) });
+                } })),
+            // The label names the unit, which the type decides.
+            value: ({ values, onChange, errors }) => (_jsx(FieldInput, { name: "value", label: values.type === "percentage"
+                    ? "Discount percentage (%)"
+                    : values.type === "fixed"
+                        ? "Discount amount (₹)"
+                        : "Discount value", type: "number", required: true, value: values.value, error: errors.value, onChange: (v) => onChange({ value: v }) })),
+            applicableProducts: ({ values, onChange }) => (_jsx(ProductInlineSelect, { multiple: true, scope: "admin", value: values.applicableProducts, onChange: (ids) => onChange({ applicableProducts: ids }) })),
+            /*
+             * `CategoryInlineSelect` is single-select, so the multi-value list
+             * needs an add-one/remove-one chip arrangement around it. That was
+             * written identically here and in the SELLER coupon editor, so it is
+             * now one shared `CategoryChipPicker`.
+             */
+            applicableCategories: ({ values, onChange }) => (_jsx(CategoryChipPicker, { selected: values.applicableCategories, onSelectedChange: (next) => onChange({ applicableCategories: next }) })),
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isEdit, codeManual]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:coupon-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(adminCouponFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const onSubmit = () => {
+        clearErrors();
+        const parsed = adminCouponFormSchema.safeParse(visibleValues(adminCouponFormSchema, 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: adminCouponFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isSubmitting, submitLabel: isEdit ? "Save changes" : "Create coupon", destructiveAction: isEdit ? { label: "Delete coupon", onClick: () => setDeleteConfirmOpen(true) } : undefined })] }), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Coupon", message: "Delete this coupon? 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/AdminEmployeeEditorView.js

@@ -1,87 +1,119 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } 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 { useQueryClient } from "@tanstack/react-query";
-import { Button, Checkbox, ConfirmDeleteModal, Details, Div, Form, FormActions, Input, Label, Select, SideDrawer, Span, Stack, Summary, Text, useToast } from "../../../ui";
+import { Checkbox, ConfirmDeleteModal, Details, Div, PaginatedSelect, SideDrawer, Span, Stack, Summary, Text, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { PERMISSION_GROUPS, PERMISSION_DOMAINS, getPermissionsForDomain, formatPermLabel, } from "../../auth/permissions/constants";
-import { employeeInviteSchema } from "../schemas/admin-ops-forms";
+import { employeeInviteSchema, employeePermissionsSchema, } from "../schemas/admin-ops-forms";
 import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+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";
 const __O = {
     yAuto: "overflow-y-auto",
 };
 // --- Helpers -----------------------------------------------------------------
+/** Two acronyms the generic humaniser would render as "Seo" / "Qa". */
+const GROUP_LABEL_OVERRIDES = {
+    seo_manager: "SEO Manager",
+    trust_and_safety: "Trust & Safety",
+};
+/**
+ * Permission groups, DERIVED from the presets rather than restated.
+ *
+ * The hand-written array this replaces listed eighteen of the nineteen —
+ * `maintenance_employee` was simply absent, so that preset could never be
+ * assigned from this drawer even though `PERMISSION_GROUPS` defines it and the
+ * route accepts it. Root Cause #61, on the permission-group axis.
+ *
+ * Nineteen options is well over the five-option threshold, so the generator
+ * renders it as a `PaginatedSelect`: it was a native `<Select>` with no
+ * `name`, which is both unsearchable and unreachable by `applyZodIssues`.
+ */
 const GROUP_OPTIONS = [
-    { label: "Content Moderator", value: "content_moderator" },
-    { label: "Review Manager", value: "review_manager" },
-    { label: "Blog Poster", value: "blog_poster" },
-    { label: "Community Manager", value: "community_manager" },
-    { label: "Event Handler", value: "event_handler" },
-    { label: "Newsletter Manager", value: "newsletter_manager" },
-    { label: "SEO Manager", value: "seo_manager" },
-    { label: "Ad Manager", value: "ad_manager" },
-    { label: "Site Manager", value: "site_manager" },
-    { label: "Catalog Manager", value: "catalog_manager" },
-    { label: "Finance Manager", value: "finance_manager" },
-    { label: "Data Analyst", value: "data_analyst" },
-    { label: "Customer Support", value: "customer_support" },
-    { label: "Support Agent", value: "support_agent" },
-    { label: "Store Onboarding", value: "store_onboarding" },
-    { label: "Trust & Safety", value: "trust_and_safety" },
-    { label: "Auction Monitor", value: "auction_monitor" },
-    { label: "Scam Moderator", value: "scam_moderator" },
+    ...Object.keys(PERMISSION_GROUPS).map((value) => ({
+        value,
+        label: GROUP_LABEL_OVERRIDES[value] ??
+            value.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+    })),
     { label: "Custom", value: "custom" },
 ];
+/**
+ * The permission-group picker.
+ *
+ * Its own component because choosing a group is not a plain field write — it
+ * replaces the permission set with that group's preset, which the generator's
+ * default `onChange` cannot know about. Module level rather than inline for
+ * the DEEP_NESTING reason.
+ */
+function FieldSelectGroup({ value, error, onChange, }) {
+    return (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Permission group *" }), _jsx(PaginatedSelect, { value: value, options: GROUP_OPTIONS, onChange: (next) => onChange(next ?? "custom"), placeholder: "Choose a permission group\u2026", searchPlaceholder: "Search groups\u2026", ariaLabel: "Permission group" }), _jsx(Text, { size: "xs", color: "muted", children: "Selecting a group auto-fills the permissions below. You can still customise individual permissions." }), error && (_jsx(Text, { size: "xs", color: "error", role: "alert", children: error }))] }));
+}
+/**
+ * The permission matrix.
+ *
+ * An array rather than a `Set` now: it is a schema field, and a `Set` is not
+ * JSON — it would serialise to `{}` at any payload boundary that forgot to
+ * convert it, which the two mutations previously did by hand.
+ */
 function PermissionDomainsPanel({ permissions, togglePerm }) {
-    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Span, { size: "sm", weight: "medium", color: "muted", children: ["Permissions", _jsxs(Span, { size: "xs", weight: "normal", className: "ml-2", color: "muted", children: ["(", permissions.size, " selected)"] })] }), _jsx(Div, { className: `divide-y divide-zinc-100 divide-[var(--appkit-color-border)] max-h-[42vh] ${__O.yAuto}`, rounded: "xl", border: "default", children: PERMISSION_DOMAINS.map((domain) => {
+    const selected = new Set(permissions);
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Span, { size: "sm", weight: "medium", color: "muted", children: ["Permissions", _jsxs(Span, { size: "xs", weight: "normal", className: "ml-2", color: "muted", children: ["(", selected.size, " selected)"] })] }), _jsx(Div, { className: `divide-y divide-zinc-100 divide-[var(--appkit-color-border)] max-h-[42vh] ${__O.yAuto}`, rounded: "xl", border: "default", children: PERMISSION_DOMAINS.map((domain) => {
                     const domainPerms = getPermissionsForDomain(domain.prefix);
                     if (domainPerms.length === 0)
                         return null;
-                    const checked = domainPerms.filter((p) => permissions.has(p)).length;
-                    return (_jsxs(Details, { className: "group", children: [_jsxs(Summary, { paddingX: "x-sm", paddingY: "y-xs", weight: "semibold", color: "muted", layout: "flex", align: "center", justify: "between", className: "uppercase tracking-wide hover:bg-[var(--appkit-color-bg)] transition-colors", children: [_jsx(Span, { size: "xs", children: domain.label }), _jsxs(Span, { size: "xs", weight: "normal", className: "normal-case", color: "faint", children: [checked, "/", domainPerms.length] })] }), _jsx(Div, { layout: "grid", paddingY: "y-xs-tall", className: "grid-cols-2 gap-x-2 gap-y-1.5", surface: "muted", padding: "x-sm", children: domainPerms.map((perm) => (_jsxs("label", { className: "flex items-center gap-[var(--appkit-space-2)] cursor-pointer text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)]", children: [_jsx(Checkbox, { bare: true, checked: permissions.has(perm), onChange: () => togglePerm(perm), className: "h-3.5 w-3.5 rounded border-[var(--appkit-color-border)] accent-primary" }), formatPermLabel(perm)] }, perm))) })] }, domain.prefix));
+                    const checked = domainPerms.filter((p) => selected.has(p)).length;
+                    return (_jsxs(Details, { className: "group", children: [_jsxs(Summary, { paddingX: "x-sm", paddingY: "y-xs", weight: "semibold", color: "muted", layout: "flex", align: "center", justify: "between", className: "uppercase tracking-wide hover:bg-[var(--appkit-color-bg)] transition-colors", children: [_jsx(Span, { size: "xs", children: domain.label }), _jsxs(Span, { size: "xs", weight: "normal", className: "normal-case", color: "faint", children: [checked, "/", domainPerms.length] })] }), _jsx(Div, { layout: "grid", paddingY: "y-xs-tall", className: "grid-cols-2 gap-x-2 gap-y-1.5", surface: "muted", padding: "x-sm", children: domainPerms.map((perm) => (_jsxs("label", { className: "flex items-center gap-[var(--appkit-space-2)] cursor-pointer text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)]", children: [_jsx(Checkbox, { bare: true, checked: selected.has(perm), onChange: () => togglePerm(perm), className: "h-3.5 w-3.5 rounded border-[var(--appkit-color-border)] accent-primary" }), formatPermLabel(perm)] }, perm))) })] }, domain.prefix));
                 }) })] }));
 }
 // --- Component ---------------------------------------------------------------
 export function AdminEmployeeEditorView({ open, onClose, mode, userId, displayName, currentPermissionGroup, currentPermissions = [], }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
-    const [email, setEmail] = React.useState("");
-    const [group, setGroup] = React.useState(currentPermissionGroup ?? "custom");
-    const [permissions, setPermissions] = React.useState(new Set(currentPermissions));
+    const [form, setForm] = React.useState({
+        email: "",
+        permissionGroup: currentPermissionGroup ?? "custom",
+        permissions: currentPermissions,
+    });
     const [revokeOpen, setRevokeOpen] = React.useState(false);
     React.useEffect(() => {
         if (open) {
-            setEmail("");
-            setGroup(currentPermissionGroup ?? "custom");
-            setPermissions(new Set(currentPermissions));
-        }
-    }, [open, currentPermissionGroup, currentPermissions]);
-    const applyGroupPreset = (newGroup) => {
-        setGroup(newGroup);
-        if (newGroup !== "custom") {
-            const preset = PERMISSION_GROUPS[newGroup] ?? [];
-            setPermissions(new Set(preset));
+            setForm({
+                email: "",
+                permissionGroup: currentPermissionGroup ?? "custom",
+                permissions: currentPermissions,
+            });
         }
-    };
-    const togglePerm = (perm) => {
-        setPermissions((prev) => {
-            const next = new Set(prev);
-            if (next.has(perm))
-                next.delete(perm);
-            else
-                next.add(perm);
-            return next;
-        });
-    };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, currentPermissionGroup]);
+    /**
+     * Choosing a group replaces the permission set with its preset; "Custom"
+     * leaves whatever is ticked alone, which is what makes it custom.
+     */
+    const applyGroupPreset = (newGroup) => setForm((prev) => ({
+        ...prev,
+        permissionGroup: newGroup,
+        permissions: newGroup === "custom"
+            ? prev.permissions
+            : [...(PERMISSION_GROUPS[newGroup] ?? [])],
+    }));
+    const togglePerm = (perm) => setForm((prev) => ({
+        ...prev,
+        permissions: prev.permissions.includes(perm)
+            ? prev.permissions.filter((p) => p !== perm)
+            : [...prev.permissions, perm],
+    }));
     const inviteMutation = useApiMutation({
         errorMessage: "Failed to invite employee",
         mutationFn: async () => {
             await apiClient.post(ADMIN_ENDPOINTS.TEAM, {
-                email: email.trim(),
-                permissionGroup: group,
-                permissions: Array.from(permissions),
+                email: form.email.trim(),
+                permissionGroup: form.permissionGroup,
+                permissions: form.permissions,
             });
         },
         onSuccess: () => {
@@ -94,8 +126,8 @@ export function AdminEmployeeEditorView({ open, onClose, mode, userId, displayNa
         errorMessage: "Failed to update permissions",
         mutationFn: async () => {
             await apiClient.put(ADMIN_ENDPOINTS.TEAM_MEMBER(userId), {
-                permissionGroup: group,
-                permissions: Array.from(permissions),
+                permissionGroup: form.permissionGroup,
+                permissions: form.permissions,
             });
         },
         onSuccess: () => {
@@ -119,12 +151,49 @@ export function AdminEmployeeEditorView({ open, onClose, mode, userId, displayNa
     const isBusy = inviteMutation.isPending ||
         updateMutation.isPending ||
         revokeMutation.isPending;
-    const handleSubmit = (e) => {
-        e.preventDefault();
+    /*
+     * Two schemas, one derived from the other by omission.
+     *
+     * The email input renders only while inviting, and the full schema was
+     * parsed regardless — so an edit could only ever have failed on a control
+     * that was not on screen. Nothing noticed, because nothing parsed it.
+     */
+    const schema = mode === "invite" ? employeeInviteSchema : employeePermissionsSchema;
+    const sections = React.useMemo(() => buildSectionsFromSchema(schema, {
+        options: { permissionGroup: GROUP_OPTIONS },
+        renderers: {
+            /*
+             * The generator's own `onChange` is deliberately unused: choosing a
+             * group also replaces the permission set with its preset, which a
+             * plain field write cannot do.
+             */
+            permissionGroup: ({ values, errors }) => (_jsx(FieldSelectGroup, { value: values.permissionGroup, error: errors.permissionGroup, onChange: applyGroupPreset })),
+            permissions: ({ values }) => (_jsx(PermissionDomainsPanel, { permissions: values.permissions, togglePerm: togglePerm })),
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [schema]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:employee-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(schema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
+    const handleSubmit = () => {
+        clearErrors();
+        const parsed = schema.safeParse(visibleValues(schema, form));
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
         if (mode === "invite")
             inviteMutation.mutate();
         else
             updateMutation.mutate();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: mode === "invite" ? "Invite Employee" : `Edit — ${displayName ?? "Employee"}`, children: _jsxs(Form, { schema: employeeInviteSchema, onSubmit: handleSubmit, spacing: "lg", padding: "md", children: [_jsx(FormErrorSummary, {}), mode === "invite" && (_jsxs(Stack, { gap: "xs", className: "", children: [_jsx(Label, { size: "sm", weight: "medium", color: "primary", children: "Email address" }), _jsx(Input, { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "employee@example.com" })] })), _jsxs(Stack, { gap: "xs", className: "", children: [_jsx(Label, { size: "sm", weight: "medium", color: "primary", children: "Permission group" }), _jsx(Select, { value: group, onChange: (e) => applyGroupPreset(e.target.value), options: GROUP_OPTIONS }), _jsx(Text, { size: "xs", color: "muted", children: "Selecting a group auto-fills the permissions below. You can still customise individual permissions." })] }), _jsx(PermissionDomainsPanel, { permissions: permissions, togglePerm: togglePerm }), _jsxs(FormActions, { children: [_jsx(Button, { type: "submit", variant: "primary", disabled: isBusy, isLoading: isBusy, children: mode === "invite" ? "Send Invite" : "Save" }), mode === "edit" && userId && (_jsx(Button, { type: "button", variant: "danger", disabled: isBusy, onClick: () => setRevokeOpen(true), children: "Revoke Access" }))] })] }) }), mode === "edit" && (_jsx(ConfirmDeleteModal, { isOpen: revokeOpen, onClose: () => setRevokeOpen(false), onConfirm: () => revokeMutation.mutate(), isDeleting: revokeMutation.isPending, title: "Revoke employee access?", message: `${displayName ?? "This employee"} will lose admin panel access immediately. Their user account remains active — only their role is reset to user.`, confirmText: "Revoke Access", variant: "danger" }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: mode === "invite" ? "Invite Employee" : `Edit — ${displayName ?? "Employee"}`, children: _jsx(Div, { padding: "md", children: _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: (partial) => setForm((prev) => ({ ...prev, ...partial })), onSubmit: handleSubmit, schema: schema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: isBusy, submitLabel: mode === "invite" ? "Send invite" : "Save", onCancel: onClose, 
+                                /* A drawer owns its own footer — see `useIsInsideOverlay`. */
+                                bottomBar: false, destructiveAction: mode === "edit" && userId
+                                    ? { label: "Revoke access", onClick: () => setRevokeOpen(true), disabled: isBusy }
+                                    : undefined })] }) }) }), mode === "edit" && (_jsx(ConfirmDeleteModal, { isOpen: revokeOpen, onClose: () => setRevokeOpen(false), onConfirm: () => revokeMutation.mutate(), isDeleting: revokeMutation.isPending, title: "Revoke employee access?", message: `${displayName ?? "This employee"} will lose admin panel access immediately. Their user account remains active — only their role is reset to user.`, confirmText: "Revoke Access", variant: "danger" }))] }));
 }