@mohasinac/appkit 4.13.1 → 4.15.0

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

@@ -2,25 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
 import { useApiMutation } from "@mohasinac/appkit/client";
-import React, { useEffect, useMemo } from "react";
-import { z } from "zod";
+import React, { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Button, ConfirmDeleteModal, Div, Heading, Input, RichTextEditor, RichTextRenderer, Row, Select, Span, Stack, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { ImageUpload, MediaImage, useMediaUpload } from "../../media";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { blogPostCategorySchema } from "../../blog/schemas";
-import { StepForm } from "../../shell";
-// Form-input subset — `blogPostSchema` (blog schemas) requires `id` and uses
-// a `MediaField` shape for `coverImage`, neither of which this draft has
-// (coverImage here is a plain uploaded-URL string; id doesn't exist pre-save).
-const blogDraftSchema = z.object({
-    title: z.string().min(1, "Title is required"),
-    slug: z.string().min(1, "Slug is required").regex(/^blog-/, "Slug must start with 'blog-'"),
-    category: blogPostCategorySchema,
-    metaDescription: z.string().max(160).optional().or(z.literal("")),
-}).passthrough();
+import { blogDraftSchema } from "../../blog/schemas/blog-form";
+import { SectionForm, useSectionFormNav } from "../../shell";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -62,7 +52,12 @@ function toSlug(str) {
         .trim()
         .replace(/[^a-z0-9]+/g, "-")
         .replace(/^-+|-+$/g, "");
-    return base.startsWith("blog-") ? base : `blog-${base}`;
+    // Deliberately NOT prefixed with `blog-`. That prefix belongs to the
+    // document ID (`generateBlogPostId` adds it); the `slug` FIELD is what
+    // `findBySlug` queries and what appears in the public URL, and all 20 stored
+    // posts hold it bare. Prefixing here made every newly created post's URL
+    // disagree with every existing one.
+    return base;
 }
 function toDateInputValue(val) {
     if (!val)
@@ -80,15 +75,9 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
     const isEdit = Boolean(postId);
     const [draft, setDraft] = React.useState(DEFAULT_DRAFT);
     const [slugManual, setSlugManual] = React.useState(false);
-    const [currentStep, setCurrentStep] = React.useState(0);
     const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
     const { showToast } = useToast();
     const { upload } = useMediaUpload();
-    const { shellCtx, setFieldError, validate } = useFormShellState(blogDraftSchema);
-    useEffect(() => {
-        validate(draft);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [draft, validate]);
     const update = React.useCallback((partial) => {
         setDraft((prev) => ({ ...prev, ...partial }));
     }, []);
@@ -146,13 +135,21 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                 metaTitle: draft.metaTitle || undefined,
                 metaDescription: draft.metaDescription || undefined,
             };
+            // T1 calculated field. It used to be computed ONLY on create, so editing
+            // a post's body left its "N min read" frozen at whatever the first draft
+            // happened to be — Root Cause #39, a CREATE transform with no UPDATE
+            // counterpart. Computed once here and sent on both paths.
+            const readTimeMinutes = Math.max(1, Math.round(draft.content.replace(/<[^>]*>/g, "").split(/\s+/).filter(Boolean).length / 200));
             if (isEdit) {
-                return apiClient.patch(ADMIN_ENDPOINTS.BLOG_BY_ID(postId), payload);
+                return apiClient.patch(ADMIN_ENDPOINTS.BLOG_BY_ID(postId), {
+                    ...payload,
+                    readTimeMinutes,
+                });
             }
             return apiClient.post(ADMIN_ENDPOINTS.BLOG, {
                 ...payload,
                 authorId: "admin",
-                readTimeMinutes: Math.max(1, Math.round(draft.content.replace(/<[^>]*>/g, "").split(/\s+/).filter(Boolean).length / 200)),
+                readTimeMinutes,
                 views: 0,
             });
         },
@@ -181,11 +178,29 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
         onError: (err) => showToast(err?.message ?? "Failed to delete post.", "error"),
     });
     const isLoading = saveMutation.isPending || postQuery.isLoading;
-    const steps = [
+    /**
+     * Sections, not steps. Every field is reachable at once and one submit at
+     * the bottom saves the lot — the old wizard blocked step 2 until step 1
+     * validated, so a typo in the title made the whole post uneditable.
+     *
+     * The `render` bodies are unchanged: this form's controls are genuinely
+     * bespoke (a slug that auto-follows the title until touched, a read-time
+     * estimate, a live preview). What is no longer hand-written is which field
+     * belongs where — that is read off the schema's annotations, and the ids
+     * below match them exactly so `<FormErrorSummary>` can jump to the right
+     * section.
+     *
+     * The per-step `validate` callbacks are gone: they duplicated rules the Zod
+     * schema already states, and only ran as a gate to the NEXT step, which no
+     * longer exists.
+     */
+    const sections = [
         {
+            id: "content",
             label: "Content",
+            required: true,
+            quick: true,
             fields: ["title", "slug", "excerpt", "content"],
-            validate: (values) => !values.title.trim() ? "Title is required" : null,
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Content" }), _jsx(Input, { label: "Title", value: values.title, onChange: (e) => {
                             const v = e.target.value;
                             onChange({ title: v, ...(!slugManual && { slug: toSlug(v) }) });
@@ -195,7 +210,11 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                         }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsx(Input, { label: "Excerpt", value: values.excerpt, onChange: (e) => onChange({ excerpt: e.target.value }), placeholder: "Short summary shown in listings and cards" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Content" }), _jsx(RichTextEditor, { value: values.content, onChange: (v) => onChange({ content: v }), placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] })] })),
         },
         {
+            id: "media",
             label: "Media",
+            // Media sections MUST stay mounted while collapsed: <Collapse> unmounts
+            // its children, which would abort an in-flight upload.
+            keepMounted: true,
             fields: ["coverImage", "youtubeId"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Media" }), _jsx(ImageUpload, { label: "Cover Image", currentImage: values.coverImage, onUpload: (file) => upload(file, "blog", true, {
                             type: "blog-cover",
@@ -204,7 +223,9 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                         }), onChange: (url) => onChange({ coverImage: url }) }), _jsx(Input, { label: "YouTube Video ID (optional)", value: values.youtubeId, onChange: (e) => onChange({ youtubeId: e.target.value }), placeholder: "e.g. dQw4w9WgXcQ", helperText: "The 11-character video ID from the YouTube URL." })] })),
         },
         {
+            id: "seo",
             label: "SEO & Tags",
+            quick: true,
             fields: ["category", "tags", "metaTitle", "metaDescription"],
             render: ({ values, onChange }) => {
                 const readTime = Math.max(1, Math.round(values.content.replace(/<[^>]*>/g, "").split(/\s+/).filter(Boolean).length / 200));
@@ -212,7 +233,9 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
             },
         },
         {
+            id: "publish",
             label: "Publish",
+            quick: true,
             fields: ["status", "publishedAt", "authorName", "isFeatured"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "5", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Publish Settings" }), _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-2", children: [_jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: values.status, onValueChange: (v) => onChange({ status: v }) }), _jsx(Input, { label: "Publish date (optional)", value: values.publishedAt, onChange: (e) => onChange({ publishedAt: e.target.value }), type: "date", helperText: "Auto-set to now when publishing." })] }), _jsx(Input, { label: "Author Name", value: values.authorName, onChange: (e) => onChange({ authorName: e.target.value }), placeholder: "Author display name" }), _jsx(Toggle, { label: "Featured post", checked: values.isFeatured, onChange: (checked) => onChange({ isFeatured: checked }) }), isEdit && (_jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", children: _jsx(Button, { type: "button", variant: "danger", size: "sm", onClick: () => setShowDeleteConfirm(true), isLoading: deleteMutation.isPending, children: "Delete post" }) }))] })),
         },
@@ -221,16 +244,25 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
             setShowDeleteConfirm(false);
             deleteMutation.mutate();
         }, onClose: () => setShowDeleteConfirm(false), title: "Delete post", message: "This will permanently delete the blog post. This cannot be undone." }));
-    const fieldToStepIndex = useMemo(() => {
-        const map = {};
-        steps.forEach((step, i) => {
-            step.fields?.forEach((field) => { map[field] = i; });
-        });
-        return map;
+    // Replaces the hand-rolled fieldToStepIndex + goToStep pair. The hook owns
+    // expand-then-scroll ordering, which a raw setState could not: a collapsed
+    // panel has to MOUNT before scrollIntoView/focus can reach the field. That
+    // jump was dead before W0 — `steps: []` was hardcoded in both context paths,
+    // so FormErrorSummary's label resolved to undefined for every form.
+    const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);
+    const { shellCtx, setFieldError, validate } = useFormShellState(blogDraftSchema, {
+        sections: sectionMeta,
+        onGoToSection: goToSection,
+        fieldToSectionIndex,
+    });
+    // Live validation. Must sit AFTER useFormShellState — it used to run above
+    // the hook, which only compiled because the wizard declared the hook higher
+    // up the component.
+    useEffect(() => {
+        validate(draft);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [steps.length]);
-    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
-    const formContent = (_jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: () => { saveMutation.mutate(); }, formId: "admin-blog", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: isEdit ? "Save Changes" : "Create Post", isLoading: isLoading }), deleteModal] }));
+    }, [draft, validate]);
+    const formContent = (_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draft, onChange: update, onSubmit: () => { saveMutation.mutate(); }, schema: blogDraftSchema, openIds: openIds, onOpenChange: setOpenIds, submitLabel: isEdit ? "Save Changes" : "Create Post", isLoading: isLoading }), deleteModal] }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }

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

@@ -13,14 +13,19 @@ import React from "react";
 import { ListingLayout } from "../../../ui";
 import { buildListingTypeListingConfig } from "../../products/config/listing-type-listing-config";
 import { DataListingView } from "./DataListingView";
-const CONFIG = buildListingTypeListingConfig("classified", {
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const LISTING_TYPES = ["classified"];
+const CONFIG_OPTS = {
     title: "Classified",
     searchPlaceholder: "Search classified by name or seller",
     emptyLabel: "No classified listings",
-});
+};
 export function AdminClassifiedView({ children, ...props }) {
+    const scope = useAvailabilityScope(LISTING_TYPES);
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    return _jsx(DataListingView, { config: CONFIG });
+    // Built per-render rather than at module scope: the availability scope
+    // reads the URL through a hook, which cannot run outside a component.
+    return (_jsx(DataListingView, { config: buildListingTypeListingConfig("classified", { ...CONFIG_OPTS, scope }) }));
 }

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

@@ -13,14 +13,19 @@ import React from "react";
 import { ListingLayout } from "../../../ui";
 import { buildListingTypeListingConfig } from "../../products/config/listing-type-listing-config";
 import { DataListingView } from "./DataListingView";
-const CONFIG = buildListingTypeListingConfig("digital-code", {
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const LISTING_TYPES = ["digital-code"];
+const CONFIG_OPTS = {
     title: "Digital Codes",
     searchPlaceholder: "Search digital code listings",
     emptyLabel: "No digital code listings",
-});
+};
 export function AdminDigitalCodesView({ children, ...props }) {
+    const scope = useAvailabilityScope(LISTING_TYPES);
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    return _jsx(DataListingView, { config: CONFIG });
+    // Built per-render rather than at module scope: the availability scope
+    // reads the URL through a hook, which cannot run outside a component.
+    return (_jsx(DataListingView, { config: buildListingTypeListingConfig("digital-code", { ...CONFIG_OPTS, scope }) }));
 }

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

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

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

@@ -16,6 +16,7 @@ const PLATFORM_FLAGS = [
     { key: "reviews", label: "Reviews", desc: "Product review system" },
     { key: "wishlists", label: "Wishlists", desc: "Per-user saved lists" },
     { key: "coupons", label: "Coupons", desc: "Discount code system" },
+    { key: "offers", label: "Buyer Offers", desc: "Make-an-offer price negotiation" },
     { key: "notifications", label: "Notifications", desc: "In-app notification feed" },
     { key: "chats", label: "Live Chat", desc: "Buyer-seller messaging" },
     { key: "sellerRegistration", label: "Seller Reg.", desc: "New vendor registration" },

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

@@ -13,14 +13,19 @@ import React from "react";
 import { ListingLayout } from "../../../ui";
 import { buildListingTypeListingConfig } from "../../products/config/listing-type-listing-config";
 import { DataListingView } from "./DataListingView";
-const CONFIG = buildListingTypeListingConfig("live", {
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const LISTING_TYPES = ["live"];
+const CONFIG_OPTS = {
     title: "Live Items",
     searchPlaceholder: "Search live items",
     emptyLabel: "No live item listings",
-});
+};
 export function AdminLiveView({ children, ...props }) {
+    const scope = useAvailabilityScope(LISTING_TYPES);
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    return _jsx(DataListingView, { config: CONFIG });
+    // Built per-render rather than at module scope: the availability scope
+    // reads the URL through a hook, which cannot run outside a component.
+    return (_jsx(DataListingView, { config: buildListingTypeListingConfig("live", { ...CONFIG_OPTS, scope }) }));
 }

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

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

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminOffersViewProps = ListingLayoutProps;
+export declare function AdminOffersView({ children, ...props }: AdminOffersViewProps): React.JSX.Element;