@mohasinac/appkit 4.9.5 → 4.11.0

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

@@ -10,10 +10,58 @@ import { QuickEditMenu } from "./QuickEditMenu";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ROUTES } from "../../../next/routing/route-map";
 import { ADMIN_BULK_ACTIONS, ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
-import { ADMIN_ORDER_STATUS_TABS } from "../constants/filter-tabs";
+import { ADMIN_ORDER_STATUS_TABS, ADMIN_ORDER_PAYMENT_REVIEW_TABS } from "../constants/filter-tabs";
+import { isManualPaymentMethod, isPaymentReviewQueueMode } from "../../orders/constants/payment-window";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
 import { AdminOrderEditorView } from "./AdminOrderEditorView";
+/**
+ * `OrderDocument` has no `orderNumber` field — the real item info an order
+ * list row should show lives in the denormalized `items[]` snapshot
+ * (`productTitle`/`image`), written at order time specifically so list/detail
+ * UI never needs an extra product fetch. Falling back to `Order {id}` (a raw
+ * GUID) instead was Root Cause Pattern #(order-guid) — see CLAUDE.md.
+ */
+function toOrderItemRows(item) {
+    const items = Array.isArray(item.items) ? item.items : [];
+    return items
+        .filter((entry) => Boolean(entry) && typeof entry === "object")
+        .map((entry) => ({
+        productId: typeof entry.productId === "string" ? entry.productId : "",
+        title: typeof entry.productTitle === "string" ? entry.productTitle : "Item",
+        image: typeof entry.image === "string" ? entry.image : undefined,
+        quantity: typeof entry.quantity === "number" ? entry.quantity : 1,
+        unitPrice: typeof entry.unitPrice === "number" ? entry.unitPrice : 0,
+        totalPrice: typeof entry.totalPrice === "number" ? entry.totalPrice : 0,
+    }));
+}
+function firstOrderItem(item) {
+    const items = toOrderItemRows(item);
+    return {
+        image: items[0]?.image,
+        title: items[0]?.title,
+        extraCount: Math.max(0, items.length - 1),
+    };
+}
+/**
+ * Short marker appended to a row's secondary line so a manual payment needing
+ * action is visible in the list itself, not only after opening the drawer.
+ * Mirrors the same `paymentProofUrl` / `paymentReviewOutcome` derivation the
+ * server-side queue uses (`listPaymentReviewQueue`) — kept in sync by reading
+ * the same two fields rather than a denormalised flag (Root Cause #42).
+ */
+function paymentReviewLabel(item) {
+    if (!isManualPaymentMethod(toStringValue(item.paymentMethod, "")))
+        return undefined;
+    if (toStringValue(item.paymentStatus, "") === "paid")
+        return "Payment verified";
+    const outcome = toStringValue(item.paymentReviewOutcome, "");
+    if (outcome === "rejected_fraud")
+        return "Payment rejected";
+    if (outcome === "reupload_requested")
+        return "Re-upload requested";
+    return item.paymentProofUrl ? "Awaiting verification" : "Awaiting payment";
+}
 export function AdminOrdersView({ children, ...props }) {
     const { showToast } = useToast();
     const router = useRouter();
@@ -37,7 +85,7 @@ export function AdminOrdersView({ children, ...props }) {
         title: "Orders",
         searchPlaceholder: "Search orders, buyers, or tracking IDs",
         emptyLabel: "No orders found",
-        filterKeys: ["status"],
+        filterKeys: ["status", "paymentReview"],
         defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "orders", "listing"],
         endpoint: ADMIN_ENDPOINTS.ORDERS,
@@ -45,27 +93,47 @@ export function AdminOrdersView({ children, ...props }) {
             { value: sortBy("createdAt", "DESC"), label: "Newest" },
             { value: sortBy("createdAt", "ASC"), label: "Oldest" },
         ],
-        mapRows: (response) => toRecordArray(response.orders).map((item, index) => ({
-            id: toStringValue(item.id, `order-${index}`),
-            primary: `Order ${toStringValue(item.orderNumber ?? item.id, "-")}`,
-            secondary: [
-                toStringValue(item.buyerName ?? item.customerName, "Unknown buyer"),
-                toCurrency(item.totalAmount ?? item.total ?? item.amount),
-            ].join(" · "),
-            status: toStringValue(item.status, "Unknown"),
-            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-            paymentProofUrl: toStringValue(item.paymentProofUrl, "") || undefined,
-            paymentTransactionId: toStringValue(item.paymentTransactionId, "") || undefined,
-            paymentMethod: toStringValue(item.paymentMethod, "") || undefined,
-            paymentStatus: toStringValue(item.paymentStatus, "") || undefined,
-            displayedUpiId: toStringValue(item.displayedUpiId, "") || undefined,
-            buyerReportedUpiId: toStringValue(item.buyerReportedUpiId, "") || undefined,
-            paymentUpiMismatch: Boolean(item.paymentUpiMismatch),
-            buyerMarkedPaid: Boolean(item.buyerMarkedPaid),
-            buyerFraudAgreementAccepted: Boolean(item.buyerFraudAgreementAccepted),
-        })),
+        mapRows: (response) => toRecordArray(response.orders).map((item, index) => {
+            const orderId = toStringValue(item.id, `order-${index}`);
+            const { image, title, extraCount } = firstOrderItem(item);
+            return {
+                id: orderId,
+                primary: title
+                    ? `${title}${extraCount > 0 ? ` +${extraCount} more` : ""}`
+                    : `Order ${orderId}`,
+                secondary: [
+                    toStringValue(item.buyerName ?? item.customerName, "Unknown buyer"),
+                    toCurrency(item.totalAmount ?? item.total ?? item.amount),
+                    orderId.slice(0, 14),
+                    paymentReviewLabel(item),
+                ]
+                    .filter(Boolean)
+                    .join(" · "),
+                status: toStringValue(item.status, "Unknown"),
+                updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+                image,
+                items: toOrderItemRows(item),
+                paymentProofUrl: toStringValue(item.paymentProofUrl, "") || undefined,
+                paymentTransactionId: toStringValue(item.paymentTransactionId, "") || undefined,
+                paymentMethod: toStringValue(item.paymentMethod, "") || undefined,
+                paymentStatus: toStringValue(item.paymentStatus, "") || undefined,
+                displayedUpiId: toStringValue(item.displayedUpiId, "") || undefined,
+                buyerReportedUpiId: toStringValue(item.buyerReportedUpiId, "") || undefined,
+                paymentUpiMismatch: Boolean(item.paymentUpiMismatch),
+                buyerMarkedPaid: Boolean(item.buyerMarkedPaid),
+                buyerFraudAgreementAccepted: Boolean(item.buyerFraudAgreementAccepted),
+            };
+        }),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-        buildFilters: (f) => (f.status && f.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, f.status) : undefined),
+        // The payment-review queue is always `status == pending` by definition, so
+        // a status chip on top of it could only ever narrow to zero rows. When the
+        // queue is active the status filter is dropped rather than combined.
+        buildFilters: (f) => {
+            if (isPaymentReviewQueueMode(f.paymentReview ?? ""))
+                return undefined;
+            return f.status && f.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, f.status) : undefined;
+        },
+        buildExtraParams: (f) => isPaymentReviewQueueMode(f.paymentReview ?? "") ? { paymentReview: f.paymentReview } : undefined,
         // Mirrors the row action's "View full details" entry so the row itself
         // is clickable, not just the overflow menu.
         onRowClick: (row) => {
@@ -128,7 +196,7 @@ export function AdminOrdersView({ children, ...props }) {
                     submitLabel: "Update",
                 },
             ] })),
-        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_ORDER_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_ORDER_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id, paymentReview: "" })) }), _jsx(FilterChipGroup, { label: "Manual payment", tabs: ADMIN_ORDER_PAYMENT_REVIEW_TABS, value: pendingFilters.paymentReview ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, paymentReview: id, status: "" })) })] })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminOrderEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), orderId: selectedRow?.id, orderLabel: selectedRow?.primary, currentStatus: selectedRow?.status, paymentProofUrl: selectedRow?.paymentProofUrl, paymentTransactionId: selectedRow?.paymentTransactionId, paymentMethod: selectedRow?.paymentMethod, paymentStatus: selectedRow?.paymentStatus, displayedUpiId: selectedRow?.displayedUpiId, buyerReportedUpiId: selectedRow?.buyerReportedUpiId, paymentUpiMismatch: selectedRow?.paymentUpiMismatch, buyerMarkedPaid: selectedRow?.buyerMarkedPaid, buyerFraudAgreementAccepted: selectedRow?.buyerFraudAgreementAccepted })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminOrderEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), orderId: selectedRow?.id, orderLabel: selectedRow?.primary, currentStatus: selectedRow?.status, items: selectedRow?.items, paymentProofUrl: selectedRow?.paymentProofUrl, paymentTransactionId: selectedRow?.paymentTransactionId, paymentMethod: selectedRow?.paymentMethod, paymentStatus: selectedRow?.paymentStatus, displayedUpiId: selectedRow?.displayedUpiId, buyerReportedUpiId: selectedRow?.buyerReportedUpiId, paymentUpiMismatch: selectedRow?.paymentUpiMismatch, buyerMarkedPaid: selectedRow?.buyerMarkedPaid, buyerFraudAgreementAccepted: selectedRow?.buyerFraudAgreementAccepted })] }));
 }

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

@@ -0,0 +1,7 @@
+export interface AdminPayoutMarkPaidModalProps {
+    isOpen: boolean;
+    payoutId: string | null;
+    onClose: () => void;
+    onSuccess?: () => void;
+}
+export declare function AdminPayoutMarkPaidModal({ isOpen, payoutId, onClose, onSuccess }: AdminPayoutMarkPaidModalProps): import("react").JSX.Element;

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

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AdminPayoutMarkPaidModal — the single "mark payout as paid" form + mutation,
+ * shared by the payouts list row action and the standalone payout detail
+ * page so the two surfaces can't drift (same class of fix as
+ * SellerOrderDetailPanel for orders — see CLAUDE.md Root Cause list).
+ */
+import { useState } from "react";
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button, Form, FormActions, Input, Modal, useToast } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+export function AdminPayoutMarkPaidModal({ isOpen, payoutId, onClose, onSuccess }) {
+    const [transactionId, setTransactionId] = useState("");
+    const { showToast } = useToast();
+    const queryClient = useQueryClient();
+    const markPaid = useApiMutation({
+        mutationFn: () => {
+            if (!payoutId)
+                throw new Error("No payout selected");
+            return apiClient.patch(ADMIN_ENDPOINTS.PAYOUT_BY_ID(payoutId), {
+                status: "paid",
+                transactionId: transactionId.trim() || undefined,
+            });
+        },
+        onSuccess: () => {
+            showToast("Payout marked as paid.", "success");
+            setTransactionId("");
+            void queryClient.invalidateQueries({ queryKey: ["admin", "payouts", "listing"] });
+            onSuccess?.();
+            onClose();
+        },
+        onError: () => {
+            showToast("Failed to update payout.", "error");
+        },
+    });
+    const handleClose = () => {
+        setTransactionId("");
+        onClose();
+    };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: handleClose, title: "Mark payout as paid", children: _jsxs(Form, { onSubmit: (e) => {
+                e.preventDefault();
+                markPaid.mutate();
+            }, spacing: "md", children: [_jsx(Input, { label: "Transaction / reference ID", value: transactionId, onChange: (e) => setTransactionId(e.target.value), placeholder: "UTR, UPI ref, or bank transfer ID (optional)" }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: handleClose, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: markPaid.isPending, children: markPaid.isPending ? "Saving..." : "Confirm paid" })] })] }) }));
+}

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

@@ -1,13 +1,16 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { useApiMutation, useBulkEvent, RTDB_PATHS } from "@mohasinac/appkit/client";
+import { useBulkEvent, RTDB_PATHS } from "@mohasinac/appkit/client";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState, useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { Button, FilterChipGroup, Form, FormActions, Input, ListingLayout, Modal, RowActionMenu, useToast, } from "../../../ui";
+import { Button, FilterChipGroup, ListingLayout, RowActionMenu, useToast, } from "../../../ui";
+import { AdminPayoutMarkPaidModal } from "./AdminPayoutMarkPaidModal";
+import { useRouter } from "next/navigation";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../next/routing/route-map";
 import { ADMIN_PAYOUT_STATUS_TABS } from "../constants/filter-tabs";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
@@ -15,9 +18,9 @@ import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../ho
 import { DataListingView } from "./DataListingView";
 import { apiClient } from "../../../http";
 export function AdminPayoutsView({ children, ...props }) {
+    const router = useRouter();
     const [markPaidOpen, setMarkPaidOpen] = useState(false);
     const [selectedPayoutId, setSelectedPayoutId] = useState(null);
-    const [transactionId, setTransactionId] = useState("");
     const [calculating, setCalculating] = useState(false);
     const toast = useToast();
     const queryClient = useQueryClient();
@@ -57,26 +60,6 @@ export function AdminPayoutsView({ children, ...props }) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [bulkEvent.status]);
-    const markPaid = useApiMutation({
-        mutationFn: () => {
-            if (!selectedPayoutId)
-                throw new Error("No payout selected");
-            return apiClient.patch(ADMIN_ENDPOINTS.PAYOUT_BY_ID(selectedPayoutId), {
-                status: "paid",
-                transactionId: transactionId.trim() || undefined,
-            });
-        },
-        onSuccess: () => {
-            toast.showToast("Payout marked as paid.", "success");
-            setMarkPaidOpen(false);
-            setSelectedPayoutId(null);
-            setTransactionId("");
-            void queryClient.invalidateQueries({ queryKey: ["admin", "payouts", "listing"] });
-        },
-        onError: () => {
-            toast.showToast("Failed to update payout.", "error");
-        },
-    });
     const handleExportCsv = async () => {
         try {
             const blob = await apiClient.blob(ADMIN_ENDPOINTS.PAYOUTS_EXPORT);
@@ -92,10 +75,6 @@ export function AdminPayoutsView({ children, ...props }) {
             toast.showToast("CSV export failed.", "error");
         }
     };
-    const closePaidModal = () => {
-        setMarkPaidOpen(false);
-        setTransactionId("");
-    };
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
@@ -121,6 +100,7 @@ export function AdminPayoutsView({ children, ...props }) {
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
+        onRowClick: (row) => router.push(String(ROUTES.ADMIN.PAYOUT_DETAIL(row.id))),
         buildFilters: (state) => {
             // An explicit status chip always wins. Otherwise, hide the noise
             // (already-paid payouts) by default — mirrors the isSold-hide-by-
@@ -143,6 +123,10 @@ export function AdminPayoutsView({ children, ...props }) {
             onClick: () => selection.clearSelection(),
         })),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: "View full page",
+                    onClick: () => router.push(String(ROUTES.ADMIN.PAYOUT_DETAIL(row.id))),
+                },
                 {
                     label: ACTIONS.ADMIN["grant-payout"].label,
                     onClick: () => {
@@ -157,8 +141,8 @@ export function AdminPayoutsView({ children, ...props }) {
                         { id: "true", label: "Show all" },
                     ], value: pendingFilters.showAllPayouts ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showAllPayouts: id })), allId: "" })] })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(Modal, { isOpen: markPaidOpen, onClose: closePaidModal, title: "Mark payout as paid", children: _jsxs(Form, { onSubmit: (e) => {
-                        e.preventDefault();
-                        markPaid.mutate();
-                    }, spacing: "md", children: [_jsx(Input, { label: "Transaction / reference ID", value: transactionId, onChange: (e) => setTransactionId(e.target.value), placeholder: "UTR, UPI ref, or bank transfer ID (optional)" }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: closePaidModal, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: markPaid.isPending, children: markPaid.isPending ? "Saving..." : "Confirm paid" })] })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminPayoutMarkPaidModal, { isOpen: markPaidOpen, payoutId: selectedPayoutId, onClose: () => {
+                    setMarkPaidOpen(false);
+                    setSelectedPayoutId(null);
+                } })] }));
 }

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

@@ -6,8 +6,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Row } from "@mohasinac/appkit/ui";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
+import { z } from "zod";
 import { useQuery } from "@tanstack/react-query";
 import { Button, Card, CardBody, ConfirmDeleteModal, Div, PaginatedSelect, Form, Stack, StackedViewShell, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast, Show, StickyToolbar, } from "../../../ui";
+import { useFormShellState, applyZodIssues, FormErrorSummary, FormShellContext } from "../../../ui/forms";
+// Admin form-input validation — deliberately a small local schema, not the
+// broader `productItemSchema` (that one requires `id`/`price`/`status` as
+// non-optional, since it's the full read/display shape used across many
+// features — applying it directly here would show false "required" errors
+// on every keystroke while creating a new product, before an id exists).
+const adminProductFormSchema = z.object({
+    title: z.string().min(1, "Product title is required"),
+    price: z.number().min(0).optional(),
+    images: z.array(z.string()).max(5, "Up to 5 gallery images allowed").optional(),
+    video: z.object({ url: z.string(), thumbnailUrl: z.string().optional() }).optional(),
+}).passthrough();
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ProductForm } from "../../products/components/ProductForm";
@@ -106,6 +119,12 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
     const [mode, setMode] = React.useState("standard");
     const [deleteOpen, setDeleteOpen] = React.useState(false);
     const { showToast } = useToast();
+    const { shellCtx, setFieldError, validate } = useFormShellState(adminProductFormSchema);
+    // Live validation — re-run on every product change, not just on submit.
+    React.useEffect(() => {
+        validate(product);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [product, validate]);
     const productQuery = useQuery({
         queryKey: ["admin", "product", productId],
         queryFn: async () => {
@@ -153,6 +172,10 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
                 onSaved(id);
         },
         onError: (err) => {
+            const issues = err?.issues;
+            if (issues && issues.length > 0) {
+                applyZodIssues(issues, setFieldError);
+            }
             showToast(err?.message ?? "Failed to save product.", "error");
         },
     });
@@ -168,13 +191,13 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
         },
     });
     const isSubmitting = saveMutation.isPending || productQuery.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 ? product.status ?? "—" : "New" }), _jsx(Button, { type: "submit", form: "product-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] }));
-    const formContent = (_jsxs(Form, { id: "product-editor-form", onSubmit: (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 ? product.status ?? "—" : "New" }), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "submit", form: "product-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] }) }));
+    const formContent = (_jsxs(Form, { id: "product-editor-form", shellCtx: shellCtx, onSubmit: (e) => {
             e.preventDefault();
             saveMutation.mutate();
         }, spacing: "lg", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: __P.sectionLabel, color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Listing Type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [(!enabledListingTypes || enabledListingTypes.includes("standard")) && (_jsx(TabsTrigger, { value: "standard", children: "Standard" })), (!enabledListingTypes || enabledListingTypes.includes("auction")) && (_jsx(TabsTrigger, { value: "auction", children: "Auction" })), (!enabledListingTypes || enabledListingTypes.includes("pre-order")) && (_jsx(TabsTrigger, { value: "preorder", children: "Pre-order" })), (!enabledListingTypes || enabledListingTypes.includes("prize-draw")) && (_jsx(TabsTrigger, { value: "prize-draw", children: "Prize Draw" })), (!enabledListingTypes || enabledListingTypes.includes("classified")) && (_jsx(TabsTrigger, { value: "classified", children: "Classified" })), (!enabledListingTypes || enabledListingTypes.includes("digital-code")) && (_jsx(TabsTrigger, { value: "digital-code", children: "Digital Code" })), (!enabledListingTypes || enabledListingTypes.includes("live")) && (_jsx(TabsTrigger, { value: "live", children: "Live Item" }))] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" }), _jsx(TabsContent, { value: "prize-draw" }), _jsx(TabsContent, { value: "classified" }), _jsx(TabsContent, { value: "digital-code" }), _jsx(TabsContent, { value: "live" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: __P.sectionLabel, color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Classification" }), _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: "Store" }), _jsx(PaginatedSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderGroupSettings: isEdit && productId
                                     ? (p) => (_jsx(GroupSettingsPanel, { productId: productId, productSlug: p.slug ?? productId, groupId: p.groupId, isGroupParent: p.isGroupParent, groupParentSlug: p.groupParentSlug, groupChildSlugs: p.groupChildSlugs, groupTitle: p.groupTitle, isAuction: modeFromProduct(p) === "auction", storeProductsEndpoint: ADMIN_ENDPOINTS.PRODUCTS, onGroupChanged: () => productQuery.refetch() }))
-                                    : undefined, renderGroupJoinField: ({ label, value, onChange, disabled }) => (_jsx(GroupInlineSelect, { scope: "admin", value: value ?? "", onChange: (id) => onChange(id || undefined), disabled: disabled, label: label, placeholder: "None (standalone product)", allowCreate: false })), renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: label }), _jsx(PaginatedSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: args.label }), _jsx(PaginatedSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: __P.sectionLabel, color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Inventory" }), _jsx(BarcodeField, { value: product.barcodeId ?? "", onChange: (v) => setProduct((prev) => ({ ...prev, barcodeId: v || undefined })), onScan: (v) => setProduct((prev) => ({ ...prev, barcodeId: v })), helperText: "Leave blank to auto-generate. Scan a pre-printed sticker to link it." })] }), _jsxs(Row, { gap: "3", className: "lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] })] }, "product-form"));
+                                    : undefined, renderGroupJoinField: ({ label, value, onChange, disabled }) => (_jsx(GroupInlineSelect, { scope: "admin", value: value ?? "", onChange: (id) => onChange(id || undefined), disabled: disabled, label: label, placeholder: "None (standalone product)", allowCreate: false })), renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: label }), _jsx(PaginatedSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: args.label }), _jsx(PaginatedSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: __P.sectionLabel, color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Inventory" }), _jsx(BarcodeField, { value: product.barcodeId ?? "", onChange: (v) => setProduct((prev) => ({ ...prev, barcodeId: v || undefined })), onScan: (v) => setProduct((prev) => ({ ...prev, barcodeId: v })), helperText: "Leave blank to auto-generate. Scan a pre-printed sticker to link it." })] }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", className: "lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] })] }, "product-form"));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }