@mohasinac/appkit 4.9.5 → 4.11.0

package/dist/features/seller/components/SellerPayoutMethodsView.js

@@ -1,18 +1,15 @@
 "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 { normalizeError } from "../../../errors/normalize";
-import { Row, Stack, sortBy } from "@mohasinac/appkit/client";
+import { sortBy } from "@mohasinac/appkit/client";
 import { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { Plus } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { Button, Badge, ConfirmDeleteModal, Div, ListingToolbar, Span, Text, useToast, } from "../../../ui";
+import { Badge, ConfirmDeleteModal, Div, Row, RowActionMenu, Span, Text, useToast } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-const CLS_TYPE_PILL = "inline-flex items-center rounded-full px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wide bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300";
 import { ROUTES } from "../../../constants/index";
-import { toRecordArray, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { TABLE_KEYS } from "../../../constants/table-keys";
-const PAGE_SIZE = 50;
+import { toRecordArray, toStringValue } from "../hooks/useSellerListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
+const CLS_TYPE_PILL = "inline-flex items-center rounded-full px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wide bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300";
 const DEFAULT_SORT = "-createdAt";
 const SORT_OPTIONS = [
     { value: sortBy("createdAt", "DESC"), label: "Newest" },
@@ -32,44 +29,28 @@ function getMaskedIdentifier(item) {
 function TypeBadge({ type }) {
     return (_jsx(Span, { className: CLS_TYPE_PILL, children: type === "upi" ? "UPI" : type === "bank" ? "Bank" : type.toUpperCase() }));
 }
+const COLUMNS = [
+    {
+        key: "label",
+        header: "Method",
+        render: (row) => (_jsxs(Div, { children: [_jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: row.label }), _jsx(TypeBadge, { type: row.type }), row.isDefault && (_jsx(Span, { layout: "inline-flex", color: "success", surface: "success-surface", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "Default" }))] }), _jsx(Text, { className: "mt-1 font-mono", color: "muted", size: "xs", children: row.maskedIdentifier })] })),
+    },
+    {
+        key: "isActive",
+        header: "Status",
+        render: (row) => (_jsx(Badge, { variant: row.isActive ? "active" : "inactive", size: "xs", children: row.isActive ? "Active" : "Inactive" })),
+    },
+];
 export function SellerPayoutMethodsView({ onCreateClick, onEditClick, onDelete, onSetDefault, }) {
-    const table = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [deleteTargetId, setDeleteTargetId] = useState(null);
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
         endpoint: SELLER_ENDPOINTS.PAYOUT_METHOD_BY_ID,
         deleteFn: onDelete,
         successMessage: "Payout method deleted.",
-        onSuccess: () => { refetch?.(); },
         fetchOptions: { credentials: "include" },
     });
     const [settingDefaultId, setSettingDefaultId] = useState(null);
     const { showToast } = useToast();
-    const commitSearch = useCallback(() => {
-        table.set(TABLE_KEYS.QUERY, searchInput.trim());
-    }, [searchInput, table]);
-    const resetAll = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
-        setSearchInput("");
-    }, [table]);
-    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) || table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT;
-    const { rows, isLoading, errorMessage, refetch } = useSellerListingData({
-        queryKey: ["seller", "payout-methods"],
-        endpoint: SELLER_ENDPOINTS.PAYOUT_METHODS,
-        page: 1,
-        pageSize: PAGE_SIZE,
-        sorts: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
-        q: table.get(TABLE_KEYS.QUERY) || undefined,
-        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
-            id: toStringValue(item.id, `pm-${index}`),
-            raw: item,
-            label: String(item.label ?? ""),
-            type: String(item.type ?? ""),
-            isDefault: Boolean(item.isDefault),
-            isActive: Boolean(item.isActive),
-            maskedIdentifier: getMaskedIdentifier(item),
-        })),
-    });
     const handleDelete = useCallback(async (id) => {
         try {
             await performDelete(id);
@@ -94,7 +75,6 @@ export function SellerPayoutMethodsView({ onCreateClick, onEditClick, onDelete,
                     body: JSON.stringify({ isDefault: true }),
                 });
             }
-            refetch?.();
             showToast("Default payout method updated.", "success");
         }
         catch (err) {
@@ -104,22 +84,54 @@ export function SellerPayoutMethodsView({ onCreateClick, onEditClick, onDelete,
         finally {
             setSettingDefaultId(null);
         }
-    }, [onSetDefault, refetch, showToast]);
+    }, [onSetDefault, showToast]);
     const handleCreate = useCallback(() => {
-        if (onCreateClick) {
+        if (onCreateClick)
             onCreateClick();
-        }
-        else {
+        else
             window.location.href = String(ROUTES.STORE.PAYOUT_METHODS_NEW);
-        }
     }, [onCreateClick]);
     const handleEdit = useCallback((id) => {
-        if (onEditClick) {
+        if (onEditClick)
             onEditClick(id);
-        }
-        else {
+        else
             window.location.href = String(ROUTES.STORE.PAYOUT_METHODS_EDIT(id));
-        }
     }, [onEditClick]);
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search payout methods...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { gap: "sm", size: "sm", onClick: handleCreate, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "New Method" })] }) }), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Stack, { gap: "3", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-20 animate-pulse", border: "subtle", surface: "muted", rounded: "xl" }, i))) })) : rows.length === 0 ? (_jsxs(Div, { className: "text-center", padding: "y-4xl", children: [_jsx(Text, { color: "faint", children: "No payout methods yet \u2014 add a UPI VPA or bank account to receive payouts" }), _jsx(Div, { className: "mt-4", children: _jsx(Button, { size: "sm", onClick: handleCreate, children: "Add payout method" }) })] })) : (_jsx(Stack, { gap: "3", children: rows.map((row) => (_jsx(Div, { rounded: "xl", border: "default", padding: "inline", className: "bg-[var(--appkit-color-surface)]", children: _jsxs(Row, { align: "start", justify: "between", gap: "md", children: [_jsx(Row, { className: "min-w-0", align: "start", gap: "3", children: _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: row.label }), _jsx(TypeBadge, { type: row.type }), row.isDefault && (_jsx(Span, { layout: "inline-flex", color: "success", surface: "success-surface", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "Default" })), _jsx(Badge, { variant: row.isActive ? "active" : "inactive", size: "xs", children: row.isActive ? "Active" : "Inactive" })] }), _jsx(Text, { className: "mt-1 font-mono", color: "muted", size: "xs", children: row.maskedIdentifier })] }) }), _jsxs(Row, { className: "shrink-0", align: "center", gap: "sm", children: [!row.isDefault && (_jsx(Button, { size: "sm", variant: "ghost", isLoading: settingDefaultId === row.id, onClick: () => handleSetDefault(row.id), children: "Set Default" })), _jsx(Button, { size: "sm", variant: "outline", onClick: () => handleEdit(row.id), children: "Edit" }), _jsx(Button, { size: "sm", variant: "danger", disabled: deletingId === row.id, onClick: () => setDeleteTargetId(row.id), children: "Delete" })] })] }) }, row.id))) }))] }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Payout Method", message: "Are you sure you want to delete this payout method? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+    const config = {
+        portal: "seller",
+        title: "Payout Methods",
+        searchPlaceholder: "Search payout methods...",
+        emptyLabel: "No payout methods yet — add a UPI VPA or bank account to receive payouts",
+        filterKeys: [],
+        defaultSort: DEFAULT_SORT,
+        queryKey: ["seller", "payout-methods", "listing"],
+        endpoint: SELLER_ENDPOINTS.PAYOUT_METHODS,
+        sortOptions: SORT_OPTIONS,
+        columns: COLUMNS,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `pm-${index}`),
+            raw: item,
+            label: String(item.label ?? ""),
+            type: String(item.type ?? ""),
+            isDefault: Boolean(item.isDefault),
+            isActive: Boolean(item.isActive),
+            maskedIdentifier: getMaskedIdentifier(item),
+        })),
+        getTotal: (response, mappedRows) => (typeof response.total === "number" ? response.total : mappedRows.length),
+        buildFilters: () => undefined,
+        primaryAction: { label: "New Method", onClick: handleCreate },
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                ...(!row.isDefault
+                    ? [{ label: "Set as Default", disabled: settingDefaultId === row.id, onClick: () => handleSetDefault(row.id) }]
+                    : []),
+                { label: "Edit", onClick: () => handleEdit(row.id) },
+                {
+                    label: "Delete",
+                    destructive: true,
+                    onClick: () => setDeleteTargetId(row.id),
+                    disabled: deletingId === row.id,
+                },
+            ] })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Payout Method", message: "Are you sure you want to delete this payout method? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }

package/dist/features/seller/components/SellerPayoutSettingsView.js

@@ -1,14 +1,56 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { z } from "zod";
 import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Stack, Text, Toggle } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { StepForm } from "../../shell";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { normalizeError } from "../../../errors/normalize";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
+// No accountNumber format check here on purpose — the UI supports "leave
+// blank to keep the existing saved account number" on re-save (see the
+// accountNumber field's helpText below), and the exact keep-existing
+// semantics live server-side; a client-side format requirement risks
+// blocking that legitimate blank-resave case.
+const payoutSettingsDraftSchema = z.object({
+    method: z.enum(["upi", "bank_transfer"]),
+    upiId: z.string(),
+    accountHolderName: z.string(),
+    accountNumber: z.string(),
+    ifscCode: z.string(),
+    bankName: z.string(),
+    accountType: z.enum(["savings", "current"]),
+    gstin: z.string(),
+    pan: z.string(),
+    businessType: z.string(),
+    autoPayout: z.boolean(),
+    minimumThreshold: z.string(),
+    emiEnabled: z.boolean(),
+}).superRefine((v, ctx) => {
+    if (v.method === "upi") {
+        if (!v.upiId.trim()) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["upiId"], message: "UPI ID is required" });
+        }
+        else if (!/^[\w.\-_]{2,256}@[a-zA-Z]{2,64}$/.test(v.upiId.trim())) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["upiId"], message: "Please enter a valid UPI ID" });
+        }
+    }
+    else {
+        if (!v.accountHolderName.trim()) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["accountHolderName"], message: "Account holder name is required" });
+        }
+        if (v.ifscCode.trim() && !/^[A-Z]{4}0[A-Z0-9]{6}$/.test(v.ifscCode.trim())) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["ifscCode"], message: "Invalid IFSC code" });
+        }
+        if (!v.bankName.trim()) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["bankName"], message: "Bank name is required" });
+        }
+    }
+});
 const DEFAULT_DRAFT = {
     method: "upi",
     upiId: "",
@@ -32,6 +74,11 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(false);
     const [currentStep, setCurrentStep] = useState(0);
+    const { shellCtx, setFieldError, clearErrors, validate } = useFormShellState(payoutSettingsDraftSchema);
+    useEffect(() => {
+        validate(draft);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft, validate]);
     useEffect(() => {
         fetch(apiBase)
             .then((r) => r.json())
@@ -97,8 +144,14 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
                 body: JSON.stringify(body),
             });
             const json = await res.json();
-            if (!res.ok)
-                throw new Error(json?.error ?? "Failed to save");
+            if (!res.ok) {
+                if (Array.isArray(json?.issues) && json.issues.length > 0) {
+                    applyZodIssues(json.issues, setFieldError);
+                }
+                setError(json?.error ?? "Failed to save");
+                return;
+            }
+            clearErrors();
             setSuccess(true);
             const updated = json?.data?.payoutDetails ?? { method: draft.method, isConfigured: false };
             setCurrent(updated);
@@ -116,6 +169,7 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
     const steps = [
         {
             label: "Payout Method",
+            fields: ["method", "upiId", "accountHolderName", "accountNumber", "ifscCode", "bankName", "accountType"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Method" }), current && (_jsx(Row, { className: "mb-2", align: "center", gap: "sm", children: _jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Payout configured" : "Not configured" }) })), current?.isConfigured && (_jsx(Alert, { variant: "info", children: current.method === "upi"
                             ? `Current UPI: ${current.upiId}`
                             : `Current bank: ${current.bankAccount?.bankName ?? ""} — ••••${current.bankAccount?.accountNumberMasked?.slice(-4) ?? "••••"} (${current.bankAccount?.accountType})` })), _jsx(Stack, { gap: "sm", children: ([
@@ -125,14 +179,25 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
         },
         {
             label: "Tax Info",
+            fields: ["gstin", "pan", "businessType"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Tax Information" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Optional \u2014 required only for GST invoice generation and TDS compliance." }), _jsx(FormField, { name: "gstin", label: "GSTIN (optional)", type: "text", value: values.gstin, onChange: (v) => onChange({ gstin: v.toUpperCase() }), placeholder: "e.g. 22AAAAA0000A1Z5", helpText: "15-character Goods and Services Tax Identification Number.", disabled: busy }), _jsx(FormField, { name: "pan", label: "PAN (optional)", type: "text", value: values.pan, onChange: (v) => onChange({ pan: v.toUpperCase() }), placeholder: "e.g. ABCDE1234F", helpText: "Required for payouts above \u20B950,000 per year (TDS threshold).", disabled: busy }), _jsx(FormField, { name: "businessType", label: "Business Type (optional)", type: "text", value: values.businessType, onChange: (v) => onChange({ businessType: v }), placeholder: "e.g. Individual, Sole Proprietor, Private Limited", disabled: busy })] })),
         },
         {
             label: "Preferences",
+            fields: ["autoPayout", "minimumThreshold", "emiEnabled"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Preferences" }), _jsx(Toggle, { checked: values.autoPayout, onChange: (checked) => onChange({ autoPayout: checked }), label: "Enable auto-payout \u2014 automatically transfer earnings on schedule", disabled: busy }), _jsx(FormField, { name: "minimumThreshold", label: "Minimum Payout Threshold (\u20B9)", type: "number", value: values.minimumThreshold, onChange: (v) => onChange({ minimumThreshold: v }), placeholder: "e.g. 500", helpText: "Payouts are held until your balance exceeds this amount. Leave blank for no minimum.", disabled: busy }), _jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-alt)] border border-[var(--appkit-color-border)]`, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Payout Schedule" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Auto-payouts run every Monday for the previous week's settled orders. Manual payouts can be requested from the Payouts page at any time." })] }), _jsx(Toggle, { checked: values.emiEnabled, onChange: (checked) => onChange({ emiEnabled: checked }), label: "Offer EMI financing on eligible orders", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Only shown to buyers when platform-wide EMI is also enabled and their cart subtotal from your store exceeds the site's minimum order value. Orders on an EMI plan hold your payout until every installment is paid, unless you mark the item \"ship before EMI completes\"." })] })),
         },
     ];
+    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]);
     return (_jsx(StackedViewShell, { portal: "seller", title: "Payout Settings", sections: [
-            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Payout details saved." }), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-payout-settings", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Payout Details", isLoading: busy })] }, "payout"),
+            _jsxs(Div, { children: [error && _jsx(Alert, { variant: "error", className: "mb-4", children: error }), success && _jsx(Alert, { variant: "success", className: "mb-4", children: "Payout details saved." }), _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handleSave, formId: "seller-payout-settings", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: "Save Payout Details", isLoading: busy })] })] }, "payout"),
         ] }));
 }

package/dist/features/seller/components/SellerPayoutsView.d.ts

@@ -1,4 +1,16 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
+/**
+ * SellerPayoutDetailContent — the payout detail body (status progress,
+ * amount breakdown, refund deductions, dates, orders, reminder toggle).
+ * Shared by the seller payouts list's SideDrawer and the standalone
+ * `/store/payouts/[id]/view` page so the two surfaces can't drift — same
+ * pattern as SellerOrderDetailPanel for orders.
+ */
+export declare function SellerPayoutDetailContent({ payout, onToggleReminder, reminderPending, }: {
+    payout: Record<string, unknown>;
+    onToggleReminder: (next: boolean) => void;
+    reminderPending: boolean;
+}): React.JSX.Element;
 export type SellerPayoutsViewProps = ListingLayoutProps;
 export declare function SellerPayoutsView({ children, ...props }: SellerPayoutsViewProps): React.JSX.Element;

package/dist/features/seller/components/SellerPayoutsView.js

@@ -4,8 +4,10 @@ import { normalizeError } from "../../../errors/normalize";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState } from "react";
+import { useRouter } from "next/navigation";
 import { Badge, Div, FilterChipGroup, ListingLayout, Row, RowActionMenu, SideDrawer, Span, Stack, Text, Toggle, useToast } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../next/routing/route-map";
 import { ADMIN_PAYOUT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { SELLER_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
@@ -28,7 +30,25 @@ function StatusProgress({ status }) {
     const currentIndex = PAYOUT_STAGES.indexOf(normalized);
     return (_jsx(Row, { gap: "xs", align: "center", children: PAYOUT_STAGES.map((stage, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Div, { className: `h-0.5 w-6 ${i <= currentIndex ? "bg-primary" : "bg-[var(--appkit-color-border)]"}` }), _jsx(Span, { size: "xs", weight: i === currentIndex ? "bold" : "medium", className: i <= currentIndex ? "text-primary" : "text-[var(--appkit-color-text-muted)]", children: stage[0].toUpperCase() + stage.slice(1) })] }, stage))) }));
 }
+/**
+ * SellerPayoutDetailContent — the payout detail body (status progress,
+ * amount breakdown, refund deductions, dates, orders, reminder toggle).
+ * Shared by the seller payouts list's SideDrawer and the standalone
+ * `/store/payouts/[id]/view` page so the two surfaces can't drift — same
+ * pattern as SellerOrderDetailPanel for orders.
+ */
+export function SellerPayoutDetailContent({ payout, onToggleReminder, reminderPending, }) {
+    const expectedByDate = payout.requestedAt
+        ? new Date(new Date(payout.requestedAt).getTime() + PAYOUT_CYCLE_DAYS * 24 * 60 * 60 * 1000)
+        : null;
+    const orderIds = Array.isArray(payout.orderIds) ? payout.orderIds : [];
+    const refundDeductions = Array.isArray(payout.refundDeductions)
+        ? payout.refundDeductions
+        : [];
+    return (_jsxs(Stack, { gap: "lg", children: [_jsx(StatusProgress, { status: toStringValue(payout.status, "pending") }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Amount" }), _jsx(Text, { size: "xl", weight: "bold", children: toCurrency(payout.netAmount ?? payout.amount ?? payout.totalAmount) })] }), (payout.grossAmount != null || payout.platformFee != null) && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Breakdown" }), _jsxs(Stack, { gap: "none", children: [payout.grossAmount != null && (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", color: "muted", children: "Gross amount" }), _jsx(Text, { size: "xs", children: toCurrency(payout.grossAmount) })] })), payout.platformFee != null && (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", color: "muted", children: "Platform fee" }), _jsxs(Text, { size: "xs", children: ["-", toCurrency(payout.platformFee)] })] })), refundDeductions.length > 0 && (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", color: "muted", children: "Refund deductions" }), _jsxs(Text, { size: "xs", className: "text-error", children: ["-", toCurrency(refundDeductions.reduce((sum, d) => sum + Number(d.deductedAmount ?? 0), 0))] })] }))] })] })), refundDeductions.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Refund deductions (", refundDeductions.length, ")"] }), _jsx(Stack, { gap: "xs", children: refundDeductions.map((d, i) => (_jsxs(Div, { rounded: "lg", padding: "inlineSm", surface: "muted", border: "default", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", className: "font-mono", children: d.orderId }), _jsxs(Text, { size: "xs", className: "text-error", children: ["-", toCurrency(d.deductedAmount)] })] }), _jsx(Text, { size: "xs", color: "muted", children: d.reason })] }, `${d.orderId}-${i}`))) })] })), payout.transactionId ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Transaction / reference ID" }), _jsx(Text, { size: "sm", className: "font-mono", children: String(payout.transactionId) })] })) : null, _jsxs(Row, { gap: "lg", wrap: true, children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Requested" }), _jsx(Text, { size: "sm", children: formatDate(payout.requestedAt ?? payout.createdAt) })] }), payout.status === "paid" ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Paid on" }), _jsx(Text, { size: "sm", children: formatDate(payout.processedAt) })] })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Expected by" }), _jsx(Text, { size: "sm", children: expectedByDate ? formatDate(expectedByDate.toISOString()) : "—" })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Payment method" }), _jsx(Text, { size: "sm", className: "capitalize", children: toStringValue(payout.paymentMethod, "—").replace("_", " ") })] })] }), orderIds.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Orders included (", orderIds.length, ")"] }), _jsx(Div, { className: "max-h-40", overflow: "y-auto", children: _jsx(Stack, { gap: "xs", children: orderIds.map((oid) => (_jsx(Text, { size: "xs", className: "font-mono", color: "muted", children: oid }, oid))) }) })] })), _jsxs(Row, { align: "center", justify: "between", border: "default", rounded: "lg", padding: "inline", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Remind me" }), _jsx(Text, { size: "xs", color: "muted", children: "Flag this payout for a personal follow-up" })] }), _jsx(Toggle, { checked: Boolean(payout.sellerReminderFlag), onChange: onToggleReminder, disabled: reminderPending, size: "md", "aria-label": ACTIONS.STORE["set-payout-reminder"].ariaLabel })] })] }));
+}
 export function SellerPayoutsView({ children, ...props }) {
+    const router = useRouter();
     const { showToast } = useToast();
     const [selectedPayout, setSelectedPayout] = useState(null);
     const [reminderPending, setReminderPending] = useState(false);
@@ -132,6 +152,10 @@ export function SellerPayoutsView({ children, ...props }) {
                     label: ACTIONS.STORE["view-payout"].label,
                     onClick: () => setSelectedPayout(rawByIdRef.current[row.id] ?? { id: row.id }),
                 },
+                {
+                    label: "Open full page",
+                    onClick: () => router.push(String(ROUTES.STORE.PAYOUT_DETAIL(row.id))),
+                },
                 {
                     label: ACTIONS.STORE["export-payout"].label,
                     onClick: () => handleExport([rawByIdRef.current[row.id] ?? { id: row.id }]),
@@ -142,9 +166,5 @@ export function SellerPayoutsView({ children, ...props }) {
                         { id: "true", label: "Show all" },
                     ], value: pendingFilters.showAllPayouts ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showAllPayouts: id })), allId: "" })] })),
     };
-    const expectedByDate = selectedPayout?.requestedAt
-        ? new Date(new Date(selectedPayout.requestedAt).getTime() + PAYOUT_CYCLE_DAYS * 24 * 60 * 60 * 1000)
-        : null;
-    const orderIds = Array.isArray(selectedPayout?.orderIds) ? selectedPayout.orderIds : [];
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: Boolean(selectedPayout), onClose: () => setSelectedPayout(null), title: selectedPayout ? `Payout #${toStringValue(selectedPayout.payoutNumber ?? selectedPayout.id, "")}` : "Payout", mode: "view", children: selectedPayout && (_jsxs(Stack, { gap: "lg", children: [_jsx(StatusProgress, { status: toStringValue(selectedPayout.status, "pending") }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Amount" }), _jsx(Text, { size: "xl", weight: "bold", children: toCurrency(selectedPayout.amount ?? selectedPayout.totalAmount) })] }), selectedPayout.transactionId ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Transaction / reference ID" }), _jsx(Text, { size: "sm", className: "font-mono", children: String(selectedPayout.transactionId) })] })) : null, _jsxs(Row, { gap: "lg", wrap: true, children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Requested" }), _jsx(Text, { size: "sm", children: formatDate(selectedPayout.requestedAt ?? selectedPayout.createdAt) })] }), selectedPayout.status === "paid" ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Paid on" }), _jsx(Text, { size: "sm", children: formatDate(selectedPayout.processedAt) })] })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Expected by" }), _jsx(Text, { size: "sm", children: expectedByDate ? formatDate(expectedByDate.toISOString()) : "—" })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Payment method" }), _jsx(Text, { size: "sm", className: "capitalize", children: toStringValue(selectedPayout.paymentMethod, "—").replace("_", " ") })] })] }), orderIds.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Orders included (", orderIds.length, ")"] }), _jsx(Div, { className: "max-h-40", overflow: "y-auto", children: _jsx(Stack, { gap: "xs", children: orderIds.map((oid) => (_jsx(Text, { size: "xs", className: "font-mono", color: "muted", children: oid }, oid))) }) })] })), _jsxs(Row, { align: "center", justify: "between", border: "default", rounded: "lg", padding: "inline", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Remind me" }), _jsx(Text, { size: "xs", color: "muted", children: "Flag this payout for a personal follow-up" })] }), _jsx(Toggle, { checked: Boolean(selectedPayout.sellerReminderFlag), onChange: handleToggleReminder, disabled: reminderPending, size: "md", "aria-label": ACTIONS.STORE["set-payout-reminder"].ariaLabel })] })] })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: Boolean(selectedPayout), onClose: () => setSelectedPayout(null), title: selectedPayout ? `Payout #${toStringValue(selectedPayout.payoutNumber ?? selectedPayout.id, "")}` : "Payout", mode: "view", children: selectedPayout && (_jsx(SellerPayoutDetailContent, { payout: selectedPayout, onToggleReminder: handleToggleReminder, reminderPending: reminderPending })) })] }));
 }

package/dist/features/seller/components/SellerProductShell.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { MediaField } from "../../media/types";
 export type ProductListingMode = "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | "classified" | "digital-code" | "live" | "art" | "stickers";
 export interface SellerProductDraft {
     title?: string;
@@ -10,7 +11,7 @@ export interface SellerProductDraft {
     tags?: string[];
     mainImage?: string;
     images?: string[];
-    video?: string;
+    video?: MediaField;
     youtubeId?: string;
     price?: number;
     compareAtPrice?: number;
@@ -70,13 +71,19 @@ export interface SellerProductDraft {
     printFinish?: string;
     printEditionSize?: number;
 }
+/** Shape returned by `onSave`/`onPublish` — structurally compatible with appkit's `ActionResult<T>` failure/success arms, without importing the server-only type into this client component. */
+export interface ProductActionResult {
+    ok: boolean;
+    error?: string;
+    issues?: unknown[];
+}
 export interface SellerProductShellProps {
     mode: "create" | "edit";
     listingType?: ProductListingMode;
     initialValues?: SellerProductDraft;
     productId?: string;
-    onSave: (draft: SellerProductDraft) => void | Promise<void>;
-    onPublish: (draft: SellerProductDraft) => void | Promise<void>;
+    onSave: (draft: SellerProductDraft) => Promise<ProductActionResult>;
+    onPublish: (draft: SellerProductDraft) => Promise<ProductActionResult>;
     onDiscard?: () => void;
     isLoading?: boolean;
     storeSlug?: string;