@mohasinac/appkit 4.10.0 → 4.11.1

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

@@ -1,31 +1,25 @@
 "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, SIEVE_OP, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState, useCallback } from "react";
-import { Eye, Printer, MapPin, Truck } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
+import { Eye, ExternalLink, Printer, MapPin, Truck } from "lucide-react";
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-import { BulkActionBar, Badge, Button, Div, FilterChipGroup, Heading, Input, ListingFilterDrawer, ListingToolbar, Pagination, ListingLayout, Select, SideDrawer, Span, Stack, Text, useToast, StickyToolbar } from "../../../ui";
+import { Badge, Button, Div, FilterChipGroup, Heading, Input, Select, SideDrawer, Span, Stack, Text, useToast } from "../../../ui";
 import { SELLER_ORDER_STATUS_TABS } from "../../admin/constants/filter-tabs";
+import { isManualPaymentMethod } from "../../orders/constants/payment-window";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 import { PhysicalLocationModal } from "./PhysicalLocationModal";
 import { ROUTES } from "../../../constants";
-import { toRecordArray, toRelativeDate, toCurrency, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { DataTable } from "../../admin/components/DataTable";
-import { useBottomActions } from "../../layout";
+import { toRecordArray, toRelativeDate, toCurrency, toStringValue } from "../hooks/useSellerListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
+import { MediaImage } from "../../media/MediaImage";
 const __O = {
     yAuto: "overflow-y-auto",
 };
-// ---------------------------------------------------------------------------
-// Config
-// ---------------------------------------------------------------------------
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
 const DEFAULT_SORT = "-createdAt";
 const SORT_OPTIONS = [
     { value: sortBy("createdAt", "DESC"), label: "Newest" },
@@ -48,15 +42,37 @@ const UPDATE_STATUS_OPTIONS = [
     { value: "delivered", label: "Delivered" },
     { value: "cancelled", label: "Cancelled" },
 ];
+/**
+ * Manual-payment state for the seller's read-only badge. Derived from the same
+ * two fields the admin queue uses (`paymentProofUrl` + `paymentReviewOutcome`)
+ * rather than a denormalised flag, so seller and admin can't disagree about
+ * whether an order is waiting on the buyer or on us (Root Cause #42).
+ */
+function sellerPaymentBadge(order) {
+    if (order.paymentStatus === "paid")
+        return { label: "Verified", variant: "success" };
+    if (order.paymentReviewOutcome === "rejected_fraud")
+        return { label: "Rejected", variant: "danger" };
+    if (order.paymentReviewOutcome === "reupload_requested")
+        return { label: "Re-upload requested", variant: "warning" };
+    if (order.paymentProofUrl)
+        return { label: "Awaiting verification", variant: "info" };
+    return { label: "Awaiting payment", variant: "warning" };
+}
 const EMI_INSTALLMENT_BADGE_VARIANT = {
     paid: "success",
     pending: "warning",
     overdue: "danger",
 };
-// ---------------------------------------------------------------------------
-// Order Detail Drawer
-// ---------------------------------------------------------------------------
-function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
+/**
+ * Fetches + renders one order's full detail content (items, address,
+ * payment, EMI, status/tracking update form). Shared by the seller orders
+ * list's `OrderDetailDrawer` (SideDrawer chrome) and the standalone
+ * `/store/orders/[id]/view` page (full-page chrome) so the two surfaces
+ * can't drift — see CLAUDE.md Root Cause Pattern list for the order-detail
+ * duplication class of bug this avoids.
+ */
+export function SellerOrderDetailPanel({ orderId, apiBase, onClose, }) {
     const [order, setOrder] = useState(null);
     const [loading, setLoading] = useState(true);
     const [fetchError, setFetchError] = useState(null);
@@ -151,131 +167,21 @@ function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
     };
     const addr = order?.shippingAddress ?? {};
     const addrLine = [addr.addressLine1, addr.city, addr.state, addr.pincode].filter(Boolean).join(", ");
-    return (_jsxs(SideDrawer, { isOpen: true, title: `Order ${order?.id ?? orderId}`, onClose: onClose, children: [loading && (_jsx(Row, { align: "center", justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })), fetchError && (_jsx(Div, { textSize: "sm", className: "mx-4 mt-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "lg", children: fetchError })), order && !loading && (_jsxs(Stack, { gap: "none", children: [_jsxs(Stack, { className: `flex-1 ${__O.yAuto}`, gap: "5", padding: "md", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsx(Badge, { variant: STATUS_BADGE_VARIANT[order.status?.toUpperCase()] ?? "default", children: order.status ?? "Unknown" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: toRelativeDate(order.createdAt) })] }), (order.items ?? []).length > 0 && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-primary)] mb-2", weight: "semibold", children: "Items" }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.items ?? []).map((item, i) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { size: "sm", className: "truncate", weight: "medium", children: item.title ?? item.productId ?? "Item" }), _jsxs(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: ["Qty: ", item.quantity ?? 1] })] }), _jsx(Text, { size: "sm", className: "shrink-0", weight: "medium", children: toCurrency(item.price ?? 0) })] }, i))) })] })), order.giftWrapAddon && (_jsxs(Div, { className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)]", surface: "subtle", padding: "inline", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "\uD83C\uDF81 Gift wrap requested" }), order.giftWrapMessage && (_jsxs(Text, { size: "sm", className: "mt-1 text-[var(--appkit-color-text-secondary)]", children: ["\u201C", order.giftWrapMessage, "\u201D"] }))] })), _jsxs(Row, { surface: "muted", padding: "inline", align: "center", justify: "between", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Total" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-primary)]", weight: "bold", children: toCurrency(order.totalAmount ?? 0) })] }), addrLine && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Shipping address" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: [String(addr.fullName ?? ""), addrLine].filter(Boolean).join(" · ") })] })), order.paymentMethod && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Payment" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", transform: "capitalize", children: order.paymentMethod })] })), order.emiEnabled && (_jsxs(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: ["EMI plan ", order.emiTenureMonths ? `· ${order.emiTenureMonths} months` : ""] }), _jsx(Badge, { variant: order.emiComplete ? "success" : "warning", children: order.emiComplete ? "Fully paid" : "In progress" })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsx(Text, { size: "xs", color: "muted", children: "Token collected" }), _jsx(Text, { size: "xs", weight: "medium", children: toCurrency(order.emiTokenAmount ?? 0) })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-3", children: [_jsx(Text, { size: "xs", color: "muted", children: "Remaining balance" }), _jsx(Text, { size: "xs", weight: "medium", children: toCurrency(order.emiRemainingBalance ?? 0) })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.emiInstallments ?? []).map((inst) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0", children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["Installment ", inst.index, " \u00B7 ", toCurrency(inst.amount)] }), _jsx(Text, { size: "xs", color: "muted", children: inst.status === "paid" && inst.paidAt
+    return (_jsxs(_Fragment, { children: [loading && (_jsx(Row, { align: "center", justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })), fetchError && (_jsx(Div, { textSize: "sm", className: "mx-4 mt-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "lg", children: fetchError })), order && !loading && (_jsxs(Stack, { gap: "none", children: [_jsxs(Stack, { className: `flex-1 ${__O.yAuto}`, gap: "5", padding: "md", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsx(Badge, { variant: STATUS_BADGE_VARIANT[order.status?.toUpperCase()] ?? "default", children: order.status ?? "Unknown" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: toRelativeDate(order.createdAt) })] }), (order.items ?? []).length > 0 && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-primary)] mb-2", weight: "semibold", children: "Items" }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.items ?? []).map((item, i) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Row, { align: "center", gap: "sm", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: item.image, alt: item.title ?? "Order item", size: "thumbnail" }) }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { size: "sm", className: "truncate", weight: "medium", children: item.title ?? item.productId ?? "Item" }), _jsxs(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: ["Qty: ", item.quantity ?? 1] })] })] }), _jsx(Text, { size: "sm", className: "shrink-0", weight: "medium", children: toCurrency(item.price ?? 0) })] }, i))) })] })), order.giftWrapAddon && (_jsxs(Div, { className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)]", surface: "subtle", padding: "inline", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "\uD83C\uDF81 Gift wrap requested" }), order.giftWrapMessage && (_jsxs(Text, { size: "sm", className: "mt-1 text-[var(--appkit-color-text-secondary)]", children: ["\u201C", order.giftWrapMessage, "\u201D"] }))] })), _jsxs(Row, { surface: "muted", padding: "inline", align: "center", justify: "between", rounded: "lg", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Total" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-primary)]", weight: "bold", children: toCurrency(order.totalAmount ?? 0) })] }), addrLine && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "mb-1", weight: "semibold", children: "Shipping address" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", children: [String(addr.fullName ?? ""), addrLine].filter(Boolean).join(" · ") })] })), order.paymentMethod && (_jsxs(Div, { children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-1", gap: "3", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Payment" }), isManualPaymentMethod(order.paymentMethod) && (_jsx(Badge, { variant: sellerPaymentBadge(order).variant, children: sellerPaymentBadge(order).label }))] }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)]", transform: "capitalize", children: order.paymentMethod }), isManualPaymentMethod(order.paymentMethod) && order.paymentTransactionId && (_jsxs(Text, { size: "xs", color: "muted", className: "mt-1", children: ["UTR: ", order.paymentTransactionId] }))] })), order.emiEnabled && (_jsxs(Div, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", children: [_jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsxs(Text, { size: "sm", weight: "semibold", children: ["EMI plan ", order.emiTenureMonths ? `· ${order.emiTenureMonths} months` : ""] }), _jsx(Badge, { variant: order.emiComplete ? "success" : "warning", children: order.emiComplete ? "Fully paid" : "In progress" })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-2", children: [_jsx(Text, { size: "xs", color: "muted", children: "Token collected" }), _jsx(Text, { size: "xs", weight: "medium", children: toCurrency(order.emiTokenAmount ?? 0) })] }), _jsxs(Row, { align: "center", justify: "between", className: "mb-3", children: [_jsx(Text, { size: "xs", color: "muted", children: "Remaining balance" }), _jsx(Text, { size: "xs", weight: "medium", children: toCurrency(order.emiRemainingBalance ?? 0) })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: (order.emiInstallments ?? []).map((inst) => (_jsxs(Row, { paddingY: "y-xs-tall", padding: "x-sm", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { className: "min-w-0", children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["Installment ", inst.index, " \u00B7 ", toCurrency(inst.amount)] }), _jsx(Text, { size: "xs", color: "muted", children: inst.status === "paid" && inst.paidAt
                                                                 ? `Paid ${toRelativeDate(inst.paidAt)}`
                                                                 : inst.dueDate
                                                                     ? `Due ${toRelativeDate(inst.dueDate)}`
                                                                     : "" })] }), _jsxs(Row, { align: "center", gap: "sm", className: "shrink-0", children: [_jsx(Badge, { variant: EMI_INSTALLMENT_BADGE_VARIANT[inst.status] ?? "default", children: inst.status }), inst.status !== "paid" && (_jsx(Button, { action: ACTIONS.STORE["mark-installment-paid"], size: "sm", variant: "outline", isLoading: markingPaidIndex === inst.index, disabled: markingPaidIndex !== null, onClick: () => handleMarkInstallmentPaid(inst.index), children: "Mark paid" }))] })] }, inst.index))) }), emiError && (_jsx(Div, { textSize: "xs", className: "mt-2 border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: emiError }))] })), _jsxs(Stack, { className: "border-t border-[var(--appkit-color-border)]", padding: "t-md", gap: "3", children: [_jsx(Heading, { level: 4, size: "sm", weight: "semibold", children: "Update order" }), _jsx(Select, { label: "New status", value: newStatus, options: UPDATE_STATUS_OPTIONS, onChange: (e) => setNewStatus(e.target.value) }), _jsx(Input, { label: "Tracking number", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. 12345678901234" }), _jsx(Input, { label: "Carrier", value: carrier, onChange: (e) => setCarrier(e.target.value), placeholder: "e.g. Delhivery, Bluedart" }), _jsx(Input, { label: "Tracking URL (optional)", value: trackingUrl, onChange: (e) => setTrackingUrl(e.target.value), placeholder: "https://...", type: "url" }), saveError && (_jsx(Div, { textSize: "xs", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError }))] })] }), _jsxs(Row, { border: "top", paddingY: "y-sm-tall", padding: "x-md", align: "center", justify: "end", gap: "3", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: saving, children: "Close" }), _jsx(Button, { onClick: handleSave, isLoading: saving, disabled: saving, children: "Save" })] })] }))] }));
 }
-// ---------------------------------------------------------------------------
-// Main view
-// ---------------------------------------------------------------------------
-export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS, children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
+function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
+    return (_jsx(SideDrawer, { isOpen: true, title: `Order ${orderId}`, onClose: onClose, children: _jsx(SellerOrderDetailPanel, { orderId: orderId, apiBase: apiBase, onClose: onClose }) }));
+}
+export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS, }) {
     const [selectedOrderId, setSelectedOrderId] = useState(null);
     const [setLocationOpen, setSetLocationOpen] = useState(false);
+    const [shippingRowId, setShippingRowId] = useState(null);
     const dispatch = useActionDispatch();
     const { showToast } = useToast();
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
-    const [filterOpen, setFilterOpen] = useState(false);
-    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-    const openFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-        setFilterOpen(true);
-    }, [table]);
-    const applyFilters = useCallback(() => {
-        const updates = { page: "1" };
-        for (const k of FILTER_KEYS)
-            updates[k] = pendingFilters[k] ?? "";
-        table.setMany(updates);
-        setFilterOpen(false);
-    }, [pendingFilters, table]);
-    const clearFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
-    }, []);
-    const resetAll = useCallback(() => {
-        const updates = { q: "", sort: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
-        setSearchInput("");
-    }, [table]);
-    const commitSearch = useCallback(() => { table.set("q", searchInput.trim()); }, [searchInput, table]);
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || activeFilterCount > 0;
-    const statusRaw = table.get("status");
-    const filters = statusRaw && statusRaw !== "All" ? sieveFilter("status", SIEVE_OP.EQ, statusRaw) : undefined;
-    const { rows, total, isLoading, errorMessage } = useSellerListingData({
-        queryKey: ["seller", "orders", "listing"],
-        endpoint: SELLER_ENDPOINTS.ORDERS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
-        mapRows: (response) => toRecordArray(response.orders).map((item, index) => {
-            const itemsArr = Array.isArray(item.items) ? item.items : [];
-            const loc = item.physicalLocation;
-            return {
-                id: toStringValue(item.id, `order-${index}`),
-                primary: toStringValue(item.id, "Order"),
-                secondary: toStringValue(item.buyerName ?? item.buyerDisplayName, "Unknown buyer"),
-                status: toStringValue(item.status, "PENDING"),
-                updatedAt: toRelativeDate(item.updatedAt ?? item.orderDate ?? item.createdAt),
-                itemCount: itemsArr.length,
-                totalAmount: Number(item.totalAmount ?? item.total ?? 0),
-                buyerName: toStringValue(item.buyerName ?? item.buyerDisplayName, "Unknown buyer"),
-                physicalLocation: loc && typeof loc.zone === "string"
-                    ? { zone: loc.zone, shelf: loc.shelf ?? "", bin: loc.bin ?? "" }
-                    : undefined,
-            };
-        }),
-        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const columns = [
-        {
-            key: "primary",
-            header: "Order",
-            render: (row) => (_jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { className: "font-mono truncate", color: "primary", size: "xs", weight: "semibold", children: row.primary }), _jsxs(Text, { size: "xs", color: "muted", children: [row.buyerName, " \u00B7 ", row.itemCount, " item", row.itemCount !== 1 ? "s" : ""] })] })),
-        },
-        {
-            key: "totalAmount",
-            header: "Total",
-            className: "w-28",
-            render: (row) => _jsx(Span, { size: "sm", weight: "semibold", children: toCurrency(row.totalAmount) }),
-        },
-        {
-            key: "status",
-            header: "Status",
-            className: "w-32",
-            render: (row) => (_jsx(Badge, { variant: STATUS_BADGE_VARIANT[row.status?.toUpperCase()] ?? "default", children: row.status })),
-        },
-        {
-            key: "physicalLocation",
-            header: "Staging",
-            className: "w-28",
-            render: (row) => row.physicalLocation ? (_jsxs(Span, { size: "xs", className: "font-mono", color: "muted", children: [row.physicalLocation.zone, "/", row.physicalLocation.shelf, "/", row.physicalLocation.bin] })) : (_jsx(Span, { size: "xs", color: "muted", children: "\u2014" })),
-        },
-        {
-            key: "shipping",
-            header: "Shipping",
-            className: "w-32",
-            render: (row) => {
-                const r = row;
-                return (_jsx(Span, { size: "xs", color: "muted", children: r.shippingMethod ?? r.carrier ?? "—" }));
-            },
-        },
-        {
-            key: "weight",
-            header: "Weight",
-            className: "w-20 text-right",
-            render: (row) => {
-                const r = row;
-                return (_jsx(Span, { size: "xs", className: "tabular-nums", color: "muted", children: r.weightGrams ? `${r.weightGrams} g` : "—" }));
-            },
-        },
-        {
-            key: "updatedAt",
-            header: "Date",
-            className: "w-28",
-            render: (row) => _jsx(Span, { size: "xs", color: "muted", children: row.updatedAt }),
-        },
-    ];
-    const [shippingRowId, setShippingRowId] = useState(null);
     const handleQuickShip = useCallback(async (row, e) => {
         e.stopPropagation();
         setShippingRowId(row.id);
@@ -300,24 +206,12 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             setShippingRowId(null);
         }
     }, [orderDetailApiBase, showToast]);
-    const renderRowActions = useCallback((row) => {
-        const isShippable = ["PENDING", "PROCESSING", "CONFIRMED"].includes(row.status?.toUpperCase() ?? "");
-        return (_jsxs(Row, { align: "center", gap: "xs", children: [isShippable && (_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => void handleQuickShip(row, e), "aria-label": "Mark as shipped", title: "Mark shipped", isLoading: shippingRowId === row.id, disabled: shippingRowId !== null, children: _jsx(Truck, { className: "h-4 w-4" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); setSelectedOrderId(row.id); }, title: "View order details", "aria-label": "View order details", children: _jsx(Eye, { className: "h-4 w-4" }) })] }));
-    }, [handleQuickShip, shippingRowId]);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    const handlePrintPackingSlips = useCallback(() => {
-        const ids = selection.selectedIds.join(",");
-        void dispatch({
-            type: "NAVIGATE",
-            href: `${String(ROUTES.STORE.PRINT_CENTER)}?type=order&ids=${ids}&autoprint=1`,
-        });
-    }, [selection.selectedIds, dispatch]);
-    const handleSetLocation = useCallback(async (loc) => {
+    const handleSetLocation = useCallback(async (loc, ids) => {
         try {
             const res = await fetch(SELLER_ENDPOINTS.ORDERS_BULK_LOCATION, {
                 method: "PATCH",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ orderIds: selection.selectedIds, physicalLocation: loc }),
+                body: JSON.stringify({ orderIds: ids, physicalLocation: loc }),
             });
             if (!res.ok) {
                 const body = await res.json().catch(() => null);
@@ -330,9 +224,8 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             void normalizeError(err);
             showToast(err instanceof Error ? err.message : "Failed to update location.", "error");
         }
-    }, [selection.selectedIds, showToast]);
-    // S-STORE-5-A — bulk order selection → single payout request.
-    const requestPayoutForSelection = useCallback(async () => {
+    }, [showToast]);
+    const requestPayoutForSelection = useCallback(async (selection) => {
         if (!selection.selectedIds.length)
             return;
         try {
@@ -352,18 +245,96 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             void normalizeError(err);
             showToast(err instanceof Error ? err.message : "Failed to request payout.", "error");
         }
-    }, [selection, showToast]);
-    const bulkActions = [
-        buildBulkAction(ACTIONS.STORE["print-packing-slips"], handlePrintPackingSlips, { icon: _jsx(Printer, { className: "w-4 h-4" }) }),
-        buildBulkAction(ACTIONS.STORE["set-location"], () => setSetLocationOpen(true), { icon: _jsx(MapPin, { className: "w-4 h-4" }) }),
-        buildBulkAction(ACTIONS.STORE["request-payout"], () => void requestPayoutForSelection(), { variant: "primary" }),
+    }, [showToast]);
+    const [selectedIdsForLocation, setSelectedIdsForLocation] = useState([]);
+    const columns = [
+        {
+            key: "primary",
+            header: "Order",
+            render: (row) => (_jsxs(Row, { gap: "sm", align: "center", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: row.itemImage, alt: row.itemTitle ?? "Order item", size: "thumbnail" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "semibold", children: row.itemTitle
+                                    ? `${row.itemTitle}${row.itemCount > 1 ? ` +${row.itemCount - 1} more` : ""}`
+                                    : row.primary }), _jsxs(Text, { size: "xs", color: "muted", children: [row.buyerName, " \u00B7 ", row.itemCount, " item", row.itemCount !== 1 ? "s" : ""] })] })] })),
+        },
+        {
+            key: "totalAmount",
+            header: "Total",
+            className: "w-28",
+            render: (row) => _jsx(Span, { size: "sm", weight: "semibold", children: toCurrency(row.totalAmount) }),
+        },
+        {
+            key: "status",
+            header: "Status",
+            className: "w-32",
+            render: (row) => (_jsx(Badge, { variant: STATUS_BADGE_VARIANT[row.status?.toUpperCase()] ?? "default", children: row.status })),
+        },
+        {
+            key: "physicalLocation",
+            header: "Staging",
+            className: "w-28",
+            render: (row) => row.physicalLocation ? (_jsxs(Span, { size: "xs", className: "font-mono", color: "muted", children: [row.physicalLocation.zone, "/", row.physicalLocation.shelf, "/", row.physicalLocation.bin] })) : (_jsx(Span, { size: "xs", color: "muted", children: "\u2014" })),
+        },
+        {
+            key: "updatedAt",
+            header: "Date",
+            className: "w-28",
+            render: (row) => _jsx(Span, { size: "xs", color: "muted", children: row.updatedAt }),
+        },
     ];
-    // useBottomActions must run unconditionally on every render — it was
-    // previously called after the `hasChildren` early return below, which
-    // skips the hook call in passthrough mode, violating the Rules of Hooks.
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    if (hasChildren) {
-        return _jsx(ListingLayout, { portal: "seller", ...props, children: children });
-    }
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by order ID or buyer name", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedIds.length > 0 && (_jsx(StickyToolbar, { offset: "header+bulk-actions", tone: "default", border: true, padding: "sm", z: "above-toolbar", children: _jsx(BulkActionBar, { selectedCount: selection.selectedIds.length, onClearSelection: selection.clearSelection, actions: bulkActions }) })), _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 })), _jsx(DataTable, { rows: rows, columns: columns, isLoading: isLoading, emptyLabel: "No orders yet", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: () => selection.toggleAll(), renderRowActions: renderRowActions })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }) }), selectedOrderId && (_jsx(OrderDetailDrawer, { orderId: selectedOrderId, apiBase: orderDetailApiBase, onClose: () => setSelectedOrderId(null) })), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selection.selectedIds.length, onSave: handleSetLocation, onClose: () => setSetLocationOpen(false) }))] }));
+    const config = {
+        portal: "seller",
+        title: "Orders",
+        searchPlaceholder: "Search by order ID or buyer name",
+        emptyLabel: "No orders yet",
+        filterKeys: ["status"],
+        defaultSort: DEFAULT_SORT,
+        queryKey: ["seller", "orders", "listing"],
+        endpoint: SELLER_ENDPOINTS.ORDERS,
+        sortOptions: SORT_OPTIONS,
+        columns,
+        mapRows: (response) => toRecordArray(response.orders).map((item, index) => {
+            const itemsArr = Array.isArray(item.items) ? item.items : [];
+            const firstItem = itemsArr[0] && typeof itemsArr[0] === "object" ? itemsArr[0] : {};
+            const loc = item.physicalLocation;
+            return {
+                id: toStringValue(item.id, `order-${index}`),
+                primary: `Order ${toStringValue(item.id, "-").slice(0, 14)}`,
+                secondary: toStringValue(item.buyerName ?? item.buyerDisplayName, "Unknown buyer"),
+                status: toStringValue(item.status, "PENDING"),
+                updatedAt: toRelativeDate(item.updatedAt ?? item.orderDate ?? item.createdAt),
+                itemCount: itemsArr.length,
+                totalAmount: Number(item.totalAmount ?? item.total ?? 0),
+                buyerName: toStringValue(item.buyerName ?? item.buyerDisplayName, "Unknown buyer"),
+                itemImage: typeof firstItem.image === "string" ? firstItem.image : undefined,
+                itemTitle: typeof firstItem.productTitle === "string" ? firstItem.productTitle : undefined,
+                physicalLocation: loc && typeof loc.zone === "string"
+                    ? { zone: loc.zone, shelf: loc.shelf ?? "", bin: loc.bin ?? "" }
+                    : undefined,
+            };
+        }),
+        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
+        buildFilters: (state) => (state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+        buildBulkActions: (selection) => {
+            const handlePrintPackingSlips = () => {
+                const ids = selection.selectedIds.join(",");
+                void dispatch({
+                    type: "NAVIGATE",
+                    href: `${String(ROUTES.STORE.PRINT_CENTER)}?type=order&ids=${ids}&autoprint=1`,
+                });
+            };
+            return [
+                buildBulkAction(ACTIONS.STORE["print-packing-slips"], handlePrintPackingSlips, { icon: _jsx(Printer, { className: "w-4 h-4" }) }),
+                buildBulkAction(ACTIONS.STORE["set-location"], () => { setSelectedIdsForLocation(selection.selectedIds); setSetLocationOpen(true); }, { icon: _jsx(MapPin, { className: "w-4 h-4" }) }),
+                buildBulkAction(ACTIONS.STORE["request-payout"], () => void requestPayoutForSelection(selection), { variant: "primary" }),
+            ];
+        },
+        renderRowActions: (row) => {
+            const isShippable = ["PENDING", "PROCESSING", "CONFIRMED"].includes(row.status?.toUpperCase() ?? "");
+            return (_jsxs(Row, { align: "center", gap: "xs", children: [isShippable && (_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => void handleQuickShip(row, e), "aria-label": "Mark as shipped", title: "Mark shipped", isLoading: shippingRowId === row.id, disabled: shippingRowId !== null, children: _jsx(Truck, { className: "h-4 w-4" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); setSelectedOrderId(row.id); }, title: "View order details", "aria-label": "View order details", children: _jsx(Eye, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
+                            e.stopPropagation();
+                            void dispatch({ type: "NAVIGATE", href: String(ROUTES.STORE.ORDER_DETAIL(row.id)) });
+                        }, title: "Open full page", "aria-label": "Open full page", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] }));
+        },
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), selectedOrderId && (_jsx(OrderDetailDrawer, { orderId: selectedOrderId, apiBase: orderDetailApiBase, onClose: () => setSelectedOrderId(null) })), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selectedIdsForLocation.length, onSave: (loc) => handleSetLocation(loc, selectedIdsForLocation), onClose: () => setSetLocationOpen(false) }))] }));
 }

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 }))] }));
 }