@mohasinac/appkit 4.10.0 → 4.11.1

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

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

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

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

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

@@ -14,9 +14,10 @@ import { normalizeError } from "../../../errors/normalize";
  * static).
  */
 import React, { useCallback, useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 import { Button, Checkbox, ConfirmDeleteModal, Container, Form, Heading, Input, Row, Section, Select, Stack, Text, Textarea, useToast, } from "../../../ui";
-import { FieldInput } from "../../../ui/forms";
+import { FieldInput, FormErrorSummary } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS, SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { BundleDynamicRuleEditor } from "../../categories/components/BundleDynamicRuleEditor";
@@ -42,7 +43,9 @@ const EMPTY_FORM = {
     dynamicRule: DEFAULT_DYNAMIC_RULE,
     isActive: true,
     coverImage: "",
+    brandSlug: "",
 };
+const NO_BRAND_OPTION_VALUE = "";
 const bundleFormSchema = z.object({
     name: z.string().min(1, "Bundle name is required").max(150),
     description: z.string().max(2000).optional().or(z.literal("")),
@@ -70,6 +73,7 @@ function bundleToForm(bundle) {
         dynamicRule: isDynamic ? rule : DEFAULT_DYNAMIC_RULE,
         isActive: bundle.isActive !== false,
         coverImage: bundle.display?.coverImage ?? "",
+        brandSlug: bundle.brandSlug ?? "",
     };
 }
 function parsePriceRupees(input) {
@@ -96,6 +100,17 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "a
     const setFieldError = (path, message) => formHelpersRef.current?.setFieldError(path, message);
     const clearErrors = () => formHelpersRef.current?.clearErrors();
     const { showToast } = useToast();
+    const brandsQuery = useQuery({
+        queryKey: ["admin", "brands", "picker"],
+        queryFn: async () => {
+            const res = (await apiClient.get(ADMIN_ENDPOINTS.BRANDS));
+            return res?.data?.items ?? [];
+        },
+    });
+    const brandOptions = [
+        { label: "No specific brand", value: NO_BRAND_OPTION_VALUE },
+        ...(brandsQuery.data ?? []).map((b) => ({ label: b.name, value: b.slug ?? b.id })),
+    ];
     // Load existing bundle on mount when editing
     useEffect(() => {
         if (!bundleId)
@@ -166,6 +181,7 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "a
                     ? { coverImage: form.coverImage.trim() }
                     : undefined,
                 isActive: form.isActive,
+                brandSlug: form.brandSlug || undefined,
             };
             if (isEdit && bundleId) {
                 await apiClient.put(endpoints.byId(encodeURIComponent(bundleId)), body);
@@ -218,6 +234,6 @@ export function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope = "a
             formHelpersRef.current = helpers;
             return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "lg", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsx(Heading, { level: 1, size: "2xl", weight: "semibold", color: "primary", children: isEdit
                                             ? BUNDLE_COPY.adminEditorTitleEdit
-                                            : BUNDLE_COPY.adminEditorTitleNew }), isEdit && (_jsx(Button, { variant: "danger", onClick: () => setDeleteConfirmOpen(true), disabled: deleting, children: BUNDLE_COPY.adminEditor.deleteButton(deleting) }))] }), _jsx(ConfirmDeleteModal, { isOpen: deleteConfirmOpen, onClose: () => setDeleteConfirmOpen(false), onConfirm: handleDelete, title: "Delete this bundle?", message: BUNDLE_COPY.adminEditor.deleteConfirm, isDeleting: deleting }), apiError && (_jsx(Text, { color: "danger", role: "alert", children: apiError })), _jsxs(Stack, { gap: "md", children: [_jsx(FieldInput, { name: "name", label: BUNDLE_COPY.adminEditor.fields.nameLabel, value: form.name, onChange: (v) => setForm((f) => ({ ...f, name: v })), placeholder: BUNDLE_COPY.adminEditor.fields.namePlaceholder, disabled: saving, required: true }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.descriptionLabel }), _jsx(Textarea, { value: form.description, onChange: (e) => setForm((f) => ({ ...f, description: e.target.value })), placeholder: BUNDLE_COPY.adminEditor.fields.descriptionPlaceholder, rows: 4, disabled: saving })] }), _jsx(Stack, { gap: "xs", children: _jsx(FieldInput, { name: "price", label: BUNDLE_COPY.adminEditor.fields.priceLabel, type: "number", inputMode: "decimal", min: 1, step: 1, value: form.priceRupees, onChange: (v) => setForm((f) => ({ ...f, priceRupees: v })), placeholder: BUNDLE_COPY.adminEditor.fields.pricePlaceholder, disabled: saving, required: true }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.coverImageLabel }), _jsx(Input, { type: "url", value: form.coverImage, onChange: (e) => setForm((f) => ({ ...f, coverImage: e.target.value })), placeholder: "https://\u2026", disabled: saving })] }), _jsx(Checkbox, { checked: form.isActive, onChange: (e) => setForm((f) => ({ ...f, isActive: e.target.checked })), disabled: saving, label: BUNDLE_COPY.adminEditor.fields.activeLabel }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.ruleTypeLabel }), _jsx(Select, { options: RULE_TYPE_OPTIONS, value: form.ruleType, onValueChange: (next) => setForm((f) => ({ ...f, ruleType: next })), disabled: saving, "aria-label": BUNDLE_COPY.adminEditor.ruleTypeLabel })] }), form.ruleType === "static" ? (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: [BUNDLE_COPY.adminEditor.ruleTypeStatic, " products (", BUNDLE_MIN_ITEMS, "\u2013", BUNDLE_MAX_ITEMS, ")"] }), _jsx(ProductInlineSelect, { scope: scope, multiple: true, value: form.productIds, onChange: (ids) => setForm((f) => ({ ...f, productIds: ids })), disabled: saving, placeholder: "Search and select products\u2026" }), form.productIds.length > 0 && form.productIds.length < BUNDLE_MIN_ITEMS && (_jsxs(Text, { size: "xs", color: "danger", children: ["Select at least ", BUNDLE_MIN_ITEMS, " products (currently ", form.productIds.length, ")."] })), form.productIds.length > BUNDLE_MAX_ITEMS && (_jsxs(Text, { size: "xs", color: "danger", children: ["Maximum ", BUNDLE_MAX_ITEMS, " products allowed (currently ", form.productIds.length, ")."] }))] })) : (_jsx(BundleDynamicRuleEditor, { value: form.dynamicRule, onChange: (next) => setForm((f) => ({ ...f, dynamicRule: next })), disabled: saving }))] }), _jsx(Row, { gap: "sm", align: "center", justify: "end", children: _jsx(Button, { variant: "primary", onClick: handleSave, disabled: saving, "aria-busy": saving, children: BUNDLE_COPY.adminEditor.saveButton(saving, isEdit) }) })] }) }) }));
+                                            : BUNDLE_COPY.adminEditorTitleNew }), isEdit && (_jsx(Button, { variant: "danger", onClick: () => setDeleteConfirmOpen(true), disabled: deleting, children: BUNDLE_COPY.adminEditor.deleteButton(deleting) }))] }), _jsx(ConfirmDeleteModal, { isOpen: deleteConfirmOpen, onClose: () => setDeleteConfirmOpen(false), onConfirm: handleDelete, title: "Delete this bundle?", message: BUNDLE_COPY.adminEditor.deleteConfirm, isDeleting: deleting }), apiError && (_jsx(Text, { color: "danger", role: "alert", children: apiError })), _jsxs(Stack, { gap: "md", children: [_jsx(FieldInput, { name: "name", label: BUNDLE_COPY.adminEditor.fields.nameLabel, value: form.name, onChange: (v) => setForm((f) => ({ ...f, name: v })), placeholder: BUNDLE_COPY.adminEditor.fields.namePlaceholder, disabled: saving, required: true }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.descriptionLabel }), _jsx(Textarea, { value: form.description, onChange: (e) => setForm((f) => ({ ...f, description: e.target.value })), placeholder: BUNDLE_COPY.adminEditor.fields.descriptionPlaceholder, rows: 4, disabled: saving })] }), _jsx(Stack, { gap: "xs", children: _jsx(FieldInput, { name: "price", label: BUNDLE_COPY.adminEditor.fields.priceLabel, type: "number", inputMode: "decimal", min: 1, step: 1, value: form.priceRupees, onChange: (v) => setForm((f) => ({ ...f, priceRupees: v })), placeholder: BUNDLE_COPY.adminEditor.fields.pricePlaceholder, disabled: saving, required: true }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.fields.coverImageLabel }), _jsx(Input, { type: "url", value: form.coverImage, onChange: (e) => setForm((f) => ({ ...f, coverImage: e.target.value })), placeholder: "https://\u2026", disabled: saving })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Brand" }), _jsx(Select, { options: brandOptions, value: form.brandSlug, onValueChange: (next) => setForm((f) => ({ ...f, brandSlug: next })), disabled: saving || brandsQuery.isLoading, "aria-label": "Brand" })] }), _jsx(Checkbox, { checked: form.isActive, onChange: (e) => setForm((f) => ({ ...f, isActive: e.target.checked })), disabled: saving, label: BUNDLE_COPY.adminEditor.fields.activeLabel }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "semibold", children: BUNDLE_COPY.adminEditor.ruleTypeLabel }), _jsx(Select, { options: RULE_TYPE_OPTIONS, value: form.ruleType, onValueChange: (next) => setForm((f) => ({ ...f, ruleType: next })), disabled: saving, "aria-label": BUNDLE_COPY.adminEditor.ruleTypeLabel })] }), form.ruleType === "static" ? (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: [BUNDLE_COPY.adminEditor.ruleTypeStatic, " products (", BUNDLE_MIN_ITEMS, "\u2013", BUNDLE_MAX_ITEMS, ")"] }), _jsx(ProductInlineSelect, { scope: scope, multiple: true, value: form.productIds, onChange: (ids) => setForm((f) => ({ ...f, productIds: ids })), disabled: saving, placeholder: "Search and select products\u2026" }), form.productIds.length > 0 && form.productIds.length < BUNDLE_MIN_ITEMS && (_jsxs(Text, { size: "xs", color: "danger", children: ["Select at least ", BUNDLE_MIN_ITEMS, " products (currently ", form.productIds.length, ")."] })), form.productIds.length > BUNDLE_MAX_ITEMS && (_jsxs(Text, { size: "xs", color: "danger", children: ["Maximum ", BUNDLE_MAX_ITEMS, " products allowed (currently ", form.productIds.length, ")."] }))] })) : (_jsx(BundleDynamicRuleEditor, { value: form.dynamicRule, onChange: (next) => setForm((f) => ({ ...f, dynamicRule: next })), disabled: saving }))] }), _jsx(FormErrorSummary, {}), _jsx(Row, { gap: "sm", align: "center", justify: "end", children: _jsx(Button, { variant: "primary", onClick: handleSave, disabled: saving, "aria-busy": saving, children: BUNDLE_COPY.adminEditor.saveButton(saving, isEdit) }) })] }) }) }));
         } }));
 }

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

@@ -5,7 +5,7 @@ import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 import { Alert, Button, ConfirmDeleteModal, Div, Form, FormActions, Heading, Input, Row, Select, Slider, Stack, StackedViewShell, Text, Toggle } from "../../../ui";
-import { FieldInput } from "../../../ui/forms";
+import { FieldInput, FormErrorSummary } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ROUTES } from "../../../next/routing/route-map";
@@ -210,7 +210,7 @@ export function AdminCarouselEditorView({ slideId, onSaved, onDeleted, onCancel,
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Carousel Slide" : "New Carousel Slide", sections: [
             errorMsg ? _jsx(Alert, { variant: "error", children: errorMsg }, "err") : null,
             successMsg ? _jsx(Alert, { variant: "success", children: successMsg }, "ok") : null,
-            _jsx(Form, { schema: carouselSlideSchema, onSubmit: (e) => e.preventDefault(), spacing: "lg", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Slide info" }), _jsx(FieldInput, { name: "title", label: "Title", value: title, onChange: (v) => setTitle(v), required: true, placeholder: "e.g. Hot Wheels RLC Exclusives" }), _jsx(Toggle, { label: "Active (visible on homepage)", checked: active, onChange: setActive }), _jsx(Input, { label: "Display order", type: "number", value: order, onChange: (e) => setOrder(e.target.value), min: 0, placeholder: "1" }), _jsx(Select, { label: "Slide height", value: height, onChange: (e) => setHeight(e.target.value), options: HEIGHT_OPTIONS }), _jsx(Input, { label: "Autoplay delay (ms)", type: "number", value: autoplayDelayMs, onChange: (e) => setAutoplayDelayMs(e.target.value), min: 1000, max: 15000, placeholder: "4000", helperText: "How long this slide shows before auto-advancing. Default: 4000 ms." })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Background" }), _jsx(BackgroundEditor, { value: background, onChange: setBackground })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Overlay text (optional)" }), _jsx(Text, { size: "sm", color: "muted", children: "Centred text layered over the background. Leave blank to use cards only." }), _jsx(Input, { label: "Heading", value: overlayTitle, onChange: (e) => setOverlayTitle(e.target.value), placeholder: "India's #1 Collectibles Marketplace" }), _jsx(Input, { label: "Subtitle", value: overlaySubtitle, onChange: (e) => setOverlaySubtitle(e.target.value), placeholder: "Pok\u00E9mon TCG \u00B7 Hot Wheels \u00B7 Beyblade X" }), _jsx(Input, { label: "Description", value: overlayDesc, onChange: (e) => setOverlayDesc(e.target.value), placeholder: "One sentence description..." }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "lg", border: "default", children: [_jsx(Text, { size: "sm", weight: "medium", children: "CTA button" }), _jsx(Input, { label: "Button text", value: overlayBtnText, onChange: (e) => setOverlayBtnText(e.target.value), placeholder: "Shop Now" }), _jsx(Input, { label: "Button link", value: overlayBtnLink, onChange: (e) => setOverlayBtnLink(e.target.value), placeholder: String(ROUTES.PUBLIC.PRODUCTS) }), _jsx(Select, { label: "Variant", value: overlayBtnVariant, onChange: (e) => setOverlayBtnVariant(e.target.value), options: VARIANT_OPTIONS.filter((v) => ["primary", "secondary", "outline"].includes(v.value)) }), _jsx(Toggle, { label: "Open in new tab", checked: overlayBtnNewTab, onChange: setOverlayBtnNewTab })] })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsxs(Row, { className: CLS_ROW_BETWEEN, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Cards (0\u20132)" }), cards.length < 2 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddCard, children: "+ Add card" }))] }), cards.length === 0 && (_jsx(Text, { size: "sm", color: "faint", children: "No cards \u2014 the overlay text covers the whole slide." })), cards.map((card, i) => (_jsx(CardEditor, { card: card, index: i, otherZones: occupiedZones.filter((z) => z !== card.zone), onChange: (updated) => setCards(cards.map((c, ci) => (ci === i ? updated : c))), onRemove: () => setCards(cards.filter((_, ci) => ci !== i)) }, card.id)))] }), _jsxs(FormActions, { children: [_jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !title || saveMutation.isPending, onClick: () => {
+            _jsx(Form, { schema: carouselSlideSchema, onSubmit: (e) => e.preventDefault(), spacing: "lg", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Slide info" }), _jsx(FieldInput, { name: "title", label: "Title", value: title, onChange: (v) => setTitle(v), required: true, placeholder: "e.g. Hot Wheels RLC Exclusives" }), _jsx(Toggle, { label: "Active (visible on homepage)", checked: active, onChange: setActive }), _jsx(Input, { label: "Display order", type: "number", value: order, onChange: (e) => setOrder(e.target.value), min: 0, placeholder: "1" }), _jsx(Select, { label: "Slide height", value: height, onChange: (e) => setHeight(e.target.value), options: HEIGHT_OPTIONS }), _jsx(Input, { label: "Autoplay delay (ms)", type: "number", value: autoplayDelayMs, onChange: (e) => setAutoplayDelayMs(e.target.value), min: 1000, max: 15000, placeholder: "4000", helperText: "How long this slide shows before auto-advancing. Default: 4000 ms." })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Background" }), _jsx(BackgroundEditor, { value: background, onChange: setBackground })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Overlay text (optional)" }), _jsx(Text, { size: "sm", color: "muted", children: "Centred text layered over the background. Leave blank to use cards only." }), _jsx(Input, { label: "Heading", value: overlayTitle, onChange: (e) => setOverlayTitle(e.target.value), placeholder: "India's #1 Collectibles Marketplace" }), _jsx(Input, { label: "Subtitle", value: overlaySubtitle, onChange: (e) => setOverlaySubtitle(e.target.value), placeholder: "Pok\u00E9mon TCG \u00B7 Hot Wheels \u00B7 Beyblade X" }), _jsx(Input, { label: "Description", value: overlayDesc, onChange: (e) => setOverlayDesc(e.target.value), placeholder: "One sentence description..." }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "lg", border: "default", children: [_jsx(Text, { size: "sm", weight: "medium", children: "CTA button" }), _jsx(Input, { label: "Button text", value: overlayBtnText, onChange: (e) => setOverlayBtnText(e.target.value), placeholder: "Shop Now" }), _jsx(Input, { label: "Button link", value: overlayBtnLink, onChange: (e) => setOverlayBtnLink(e.target.value), placeholder: String(ROUTES.PUBLIC.PRODUCTS) }), _jsx(Select, { label: "Variant", value: overlayBtnVariant, onChange: (e) => setOverlayBtnVariant(e.target.value), options: VARIANT_OPTIONS.filter((v) => ["primary", "secondary", "outline"].includes(v.value)) }), _jsx(Toggle, { label: "Open in new tab", checked: overlayBtnNewTab, onChange: setOverlayBtnNewTab })] })] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsxs(Row, { className: CLS_ROW_BETWEEN, children: [_jsx(Heading, { level: 3, className: CLS_SECTION_HEADING, children: "Cards (0\u20132)" }), cards.length < 2 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddCard, children: "+ Add card" }))] }), cards.length === 0 && (_jsx(Text, { size: "sm", color: "faint", children: "No cards \u2014 the overlay text covers the whole slide." })), cards.map((card, i) => (_jsx(CardEditor, { card: card, index: i, otherZones: occupiedZones.filter((z) => z !== card.zone), onChange: (updated) => setCards(cards.map((c, ci) => (ci === i ? updated : c))), onRemove: () => setCards(cards.filter((_, ci) => ci !== i)) }, card.id)))] }), _jsx(FormErrorSummary, {}), _jsxs(FormActions, { children: [_jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !title || saveMutation.isPending, onClick: () => {
                                         clearErrors();
                                         if (!title.trim()) {
                                             setFieldError("title", "Title is required");

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

@@ -4,7 +4,7 @@ import React from "react";
 import { z } from "zod";
 import { useRouter } from "next/navigation";
 import { Button, Form, Row, StackedViewShell, useToast } from "../../../ui";
-import { FieldInput, FieldSelect } from "../../../ui/forms";
+import { FieldInput, FieldSelect, FormErrorSummary } from "../../../ui/forms";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -38,7 +38,7 @@ export function AdminCarouselGroupEditorView({ onCreated, ...rest }) {
             _jsx(Form, { schema: carouselGroupFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "name", label: "Carousel name", value: name, onChange: (v) => setName(v), required: true, placeholder: "e.g. Homepage Hero" }), _jsx(FieldSelect, { name: "status", label: "Status", value: status, onChange: (v) => setStatus(v), options: [
                                 { value: "draft", label: "Draft" },
                                 { value: "active", label: "Active" },
-                            ] }), _jsx(Row, { gap: "3", padding: "t-xs", children: _jsx(Button, { type: "submit", isLoading: createMutation.isPending, disabled: !name || createMutation.isPending, onClick: () => {
+                            ] }), _jsx(FormErrorSummary, {}), _jsx(Row, { gap: "3", padding: "t-xs", children: _jsx(Button, { type: "submit", isLoading: createMutation.isPending, disabled: !name || createMutation.isPending, onClick: () => {
                                     clearErrors();
                                     if (!name.trim()) {
                                         setFieldError("name", "Carousel name is required");

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

@@ -1,12 +1,34 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { SIEVE_OP, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
-import React from "react";
-import { FilterChipGroup, ListingLayout } from "../../../ui";
+import React, { useState } from "react";
+import { FilterChipGroup, ListingLayout, RecordDetailModal } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
+/**
+ * The cart's `items[]` is already in the list response — mapRows only ever
+ * read `.length` for the row subtitle and discarded the rest, leaving no way
+ * to see what's actually in a cart (Root Cause #52). This maps it for the
+ * detail modal.
+ */
+function toCartItemEntries(raw) {
+    const items = Array.isArray(raw.items) ? raw.items : [];
+    return items
+        .filter((e) => Boolean(e) && typeof e === "object")
+        .map((e) => {
+        const qty = typeof e.quantity === "number" ? e.quantity : 1;
+        const price = typeof e.price === "number" ? e.price : undefined;
+        return {
+            image: typeof e.image === "string" ? e.image : undefined,
+            title: typeof e.title === "string" ? e.title : String(e.productId ?? "Item"),
+            subtitle: `Qty: ${qty}`,
+            trailing: price !== undefined ? formatCurrency(price * qty) : undefined,
+        };
+    });
+}
 const ADMIN_CARTS_CONFIG = {
     portal: "admin",
     title: "Carts",
@@ -32,6 +54,7 @@ const ADMIN_CARTS_CONFIG = {
             secondary: `${itemCount} item${itemCount !== 1 ? "s" : ""}`,
             status: isGuest ? "Guest" : "Authenticated",
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            _raw: item,
         };
     }),
     getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
@@ -50,8 +73,15 @@ const ADMIN_CARTS_CONFIG = {
         ], value: pendingFilters.ownership ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, ownership: id })), allId: "" })),
 };
 export function AdminCartsView({ children, ...props }) {
+    const [selected, setSelected] = useState(null);
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    return _jsx(DataListingView, { config: ADMIN_CARTS_CONFIG });
+    const raw = selected?._raw ?? {};
+    const isGuest = !raw.userId;
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: { ...ADMIN_CARTS_CONFIG, onRowClick: (row) => setSelected(row) } }), _jsx(RecordDetailModal, { isOpen: Boolean(selected), onClose: () => setSelected(null), title: "Cart Details", badges: [{ label: isGuest ? "Guest" : "Authenticated", variant: isGuest ? "default" : "info" }], fields: [
+                    { label: isGuest ? "Session" : "User", value: String(raw.sessionId ?? raw.userId ?? "—") },
+                    { label: "Last updated", value: selected?.updatedAt ?? "—" },
+                    { label: "Cart ID", value: selected?.id ?? "—" },
+                ], items: { heading: "Items in cart", entries: toCartItemEntries(raw) } })] }));
 }

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

@@ -9,7 +9,7 @@ import { Button, Card, CardBody, ConfirmDeleteModal, Div, Form, Input, Paginated
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
-import { FieldInput } from "../../../ui/forms";
+import { FieldInput, FormErrorSummary, FormShellContext, useFormShellState } from "../../../ui/forms";
 const categoryFormSchema = z.object({
     name: z.string().min(1, "Category name is required").max(120),
     slug: z.string().regex(/^[a-z0-9-]+$/, "Lowercase letters, digits and hyphens only").optional().or(z.literal("")),
@@ -45,6 +45,7 @@ function toCategorySlug(str) {
 export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(categoryId);
     const [deleteOpen, setDeleteOpen] = React.useState(false);
+    const { shellCtx } = useFormShellState(categoryFormSchema);
     const [name, setName] = React.useState("");
     const [slug, setSlug] = React.useState("");
     const [slugManual, setSlugManual] = React.useState(false);
@@ -116,11 +117,11 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
         onError: (err) => showToast(err?.message ?? "Failed to delete category.", "error"),
     });
     const isSubmitting = saveMutation.isPending || categoryQuery.isLoading;
-    const actionSidebar = (_jsxs(Card, { variant: "outlined", padding: "md", spacing: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: isEdit ? (isActive ? "Active" : "Inactive") : "New" }), _jsx(Button, { type: "submit", form: "category-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete category" }))] }));
-    const formContent = (_jsx(Form, { id: "category-editor-form", schema: categoryFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "lg", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Identity" }), _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: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Toys & Games" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+    const actionSidebar = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Card, { variant: "outlined", padding: "md", spacing: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: isEdit ? (isActive ? "Active" : "Inactive") : "New" }), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "submit", form: "category-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete category" }))] }) }));
+    const formContent = (_jsx(Form, { id: "category-editor-form", schema: categoryFormSchema, shellCtx: shellCtx, onSubmit: (e) => e.preventDefault(), spacing: "lg", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Identity" }), _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: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Toys & Games" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
                                                 setSlug(e.target.value);
                                                 setSlugManual(true);
-                                            }, placeholder: "toys-and-games", helperText: "Auto-generated from name. Used in URLs." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the category" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Parent category" }), _jsx(PaginatedSelect, { value: parentId || null, onChange: (v) => setParentId(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (leave empty for root)", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: "Parent category", createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, n) => { setParentId(id); onCreated({ value: id, label: n }); }, onCancel: onCancel })) }), _jsx(Text, { size: "xs", color: "muted", children: "Leave empty to create a root category." })] })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Display" }), _jsxs(Stack, { gap: "md", children: [_jsx(Input, { label: "Display order", value: order, onChange: (e) => setOrder(e.target.value), type: "number", min: 0, placeholder: "0" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Show in menu", checked: showInMenu, onChange: setShowInMenu })] })] }), _jsxs(Row, { gap: "3", className: "lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, onClick: () => {
+                                            }, placeholder: "toys-and-games", helperText: "Auto-generated from name. Used in URLs." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the category" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Parent category" }), _jsx(PaginatedSelect, { value: parentId || null, onChange: (v) => setParentId(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (leave empty for root)", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: "Parent category", createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, n) => { setParentId(id); onCreated({ value: id, label: n }); }, onCancel: onCancel })) }), _jsx(Text, { size: "xs", color: "muted", children: "Leave empty to create a root category." })] })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Display" }), _jsxs(Stack, { gap: "md", children: [_jsx(Input, { label: "Display order", value: order, onChange: (e) => setOrder(e.target.value), type: "number", min: 0, placeholder: "0" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Show in menu", checked: showInMenu, onChange: setShowInMenu })] })] }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", className: "lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, onClick: () => {
                                 clearErrors();
                                 if (!name.trim()) {
                                     setFieldError("name", "Category name is required");

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

@@ -7,7 +7,7 @@ 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 { FieldInput } from "../../../ui/forms";
+import { FieldInput, FormErrorSummary } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
@@ -212,7 +212,7 @@ export function AdminCouponEditorView({ couponId, onSaved, onDeleted, embedded,
                                         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." })] }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, onClick: () => {
+                                    }, 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");

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

@@ -6,7 +6,7 @@ import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 import { Button, ConfirmDeleteModal, Div, Form, Input, RichTextEditor, Select, Stack, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
-import { FieldInput } from "../../../ui/forms";
+import { FieldInput, FormErrorSummary } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const faqFormSchema = z.object({
@@ -135,7 +135,7 @@ export function AdminFaqEditorView({ faqId, onSaved, onDeleted, embedded, ...res
     const formSection = (_jsxs(_Fragment, { children: [_jsx(Form, { schema: faqFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "question", label: "Question", value: question, onChange: (v) => handleQuestionChange(v), required: true, placeholder: "e.g. How does bidding work on LetItRip?" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
                                 setSlug(e.target.value);
                                 setSlugManual(true);
-                            }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from question. Must start with 'faq-'." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Answer" }), _jsx(RichTextEditor, { value: answer, onChange: setAnswer, placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: setCategory }), _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 category." })] }), _jsx(Input, { label: "Priority", value: String(priority), onChange: (e) => setPriority(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results." }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. shipping, pokemon, returns" }), _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 users)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: isPinned, onChange: setIsPinned }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: showOnHomepage, onChange: setShowOnHomepage }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: showInFooter, onChange: setShowInFooter })] }), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, onClick: () => {
+                            }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from question. Must start with 'faq-'." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Answer" }), _jsx(RichTextEditor, { value: answer, onChange: setAnswer, placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: setCategory }), _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 category." })] }), _jsx(Input, { label: "Priority", value: String(priority), onChange: (e) => setPriority(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results." }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. shipping, pokemon, returns" }), _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 users)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: isPinned, onChange: setIsPinned }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: showOnHomepage, onChange: setShowOnHomepage }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: showInFooter, onChange: setShowInFooter })] }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, onClick: () => {
                                         clearErrors();
                                         if (!question.trim()) {
                                             setFieldError("question", "Question is required");

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

@@ -6,8 +6,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { sortBy } from "@mohasinac/appkit/client";
 import React from "react";
+import { useRouter } from "next/navigation";
 import { ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../next/routing/route-map";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
 const ADMIN_HISTORY_CONFIG = {
@@ -32,14 +34,22 @@ const ADMIN_HISTORY_CONFIG = {
             secondary: `${itemCount} of ${limit} items`,
             status: itemCount >= limit ? "At cap" : itemCount >= limit - 5 ? "Near cap" : "OK",
             updatedAt: toRelativeDate(item.updatedAt),
+            userId: toStringValue(item.userId, ""),
         };
     }),
     getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
     buildFilters: () => undefined,
 };
 export function AdminHistoryView({ children, ...props }) {
+    const router = useRouter();
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    return _jsx(DataListingView, { config: ADMIN_HISTORY_CONFIG });
+    // Same shape as AdminWishlistsView: the list API returns only a per-user
+    // summary (never the viewed items), so the row already shows its whole
+    // record and the useful destination is the owning user's admin page.
+    return (_jsx(DataListingView, { config: {
+            ...ADMIN_HISTORY_CONFIG,
+            onRowClick: (row) => row.userId && router.push(String(ROUTES.ADMIN.USER_DETAIL(row.userId))),
+        } }));
 }

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

@@ -14,6 +14,7 @@ import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdmin
 import { DataListingView } from "./DataListingView";
 import { apiClient } from "../../../http";
 import { NOTIFICATION_TYPES } from "../../../constants/notification-types";
+import { ViewNotificationModal } from "./ViewNotificationModal";
 // W1-33 — sourced from shared NOTIFICATION_TYPES registry, prefixed with "All".
 const NOTIF_TYPES = ["All", ...NOTIFICATION_TYPES];
 export function AdminNotificationsView({ children, ...props }) {
@@ -21,6 +22,7 @@ export function AdminNotificationsView({ children, ...props }) {
     const { showToast } = useToast();
     const [deleteTarget, setDeleteTarget] = useState(null);
     const [bulkDeleteIds, setBulkDeleteIds] = useState(null);
+    const [viewNotification, setViewNotification] = useState(null);
     const bulkNotifs = useBulkAction({
         mutationFn: (payload) => apiClient.post(ADMIN_ENDPOINTS.ADMIN_NOTIFICATIONS_BULK, payload),
         onSuccess: (result) => {
@@ -59,6 +61,24 @@ export function AdminNotificationsView({ children, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
+    const openNotification = (row) => {
+        const raw = row._raw;
+        setViewNotification({
+            id: row.id,
+            userId: toStringValue(raw.userId, ""),
+            type: toStringValue(raw.type, ""),
+            priority: toStringValue(raw.priority, "") || undefined,
+            title: toStringValue(raw.title, "Notification"),
+            message: toStringValue(raw.message, ""),
+            imageUrl: toStringValue(raw.imageUrl, "") || undefined,
+            actionUrl: toStringValue(raw.actionUrl, "") || undefined,
+            actionLabel: toStringValue(raw.actionLabel, "") || undefined,
+            isRead: Boolean(raw.isRead),
+            relatedId: toStringValue(raw.relatedId, "") || undefined,
+            relatedType: toStringValue(raw.relatedType, "") || undefined,
+            createdAt: toStringValue(raw.createdAt, "") || undefined,
+        });
+    };
     const config = {
         portal: "admin",
         title: "Notifications",
@@ -81,6 +101,7 @@ export function AdminNotificationsView({ children, ...props }) {
             status: Boolean(item.isRead) ? "Read" : "Unread",
             updatedAt: toRelativeDate(item.createdAt),
             type: toStringValue(item.type, ""),
+            _raw: item,
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
         buildFilters: (state) => {
@@ -93,6 +114,7 @@ export function AdminNotificationsView({ children, ...props }) {
                 parts.push(sieveFilter("isRead", SIEVE_OP.EQ, true));
             return parts.join(",") || undefined;
         },
+        onRowClick: (row) => openNotification(row),
         // Rule #7: bulk-action array sourced from the ADMIN_BULK_ACTIONS preset.
         buildBulkActions: (selection) => ADMIN_BULK_ACTIONS.notifications.map((id) => ({
             id,
@@ -111,6 +133,10 @@ export function AdminNotificationsView({ children, ...props }) {
             },
         })),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: "View details",
+                    onClick: () => openNotification(row),
+                },
                 {
                     label: ACTIONS.ADMIN["resend-notification"].label,
                     onClick: () => resendMutation.mutate(row.id),
@@ -139,5 +165,5 @@ export function AdminNotificationsView({ children, ...props }) {
                     }
                 }, isDeleting: deleteMutation.isPending || bulkNotifs.isLoading, title: bulkDeleteIds ? "Delete these notifications?" : "Delete notification?", message: bulkDeleteIds
                     ? `${bulkDeleteIds.length} notification(s) will be permanently removed.`
-                    : "This notification will be permanently removed.", confirmText: "Delete", variant: "danger" })] }));
+                    : "This notification will be permanently removed.", confirmText: "Delete", variant: "danger" }), _jsx(ViewNotificationModal, { notification: viewNotification, isOpen: Boolean(viewNotification), onClose: () => setViewNotification(null) })] }));
 }

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

@@ -1,10 +1,19 @@
 import React from "react";
+export interface AdminOrderItemRow {
+    productId: string;
+    title: string;
+    image?: string;
+    quantity: number;
+    unitPrice: number;
+    totalPrice: number;
+}
 export interface AdminOrderEditorViewProps {
     open: boolean;
     onClose: () => void;
     orderId?: string;
     orderLabel?: string;
     currentStatus?: string;
+    items?: AdminOrderItemRow[];
     paymentProofUrl?: string;
     paymentTransactionId?: string;
     paymentMethod?: string;
@@ -15,4 +24,4 @@ export interface AdminOrderEditorViewProps {
     buyerMarkedPaid?: boolean;
     buyerFraudAgreementAccepted?: boolean;
 }
-export declare function AdminOrderEditorView({ open, onClose, orderId, orderLabel, currentStatus, paymentProofUrl, paymentTransactionId, paymentMethod, paymentStatus, displayedUpiId, buyerReportedUpiId, paymentUpiMismatch, buyerMarkedPaid, buyerFraudAgreementAccepted, }: AdminOrderEditorViewProps): React.JSX.Element;
+export declare function AdminOrderEditorView({ open, onClose, orderId, orderLabel, currentStatus, items, paymentProofUrl, paymentTransactionId, paymentMethod, paymentStatus, displayedUpiId, buyerReportedUpiId, paymentUpiMismatch, buyerMarkedPaid, buyerFraudAgreementAccepted, }: AdminOrderEditorViewProps): React.JSX.Element;