@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -1,29 +1,198 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { ListingViewShell } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import { X, Eye } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { Badge, Button, Div, Heading, Input, ListingToolbar, Pagination, ListingViewShell, Select, SideDrawer, Stack, Text } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toRupees, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { AdminListingScaffold } from "../../admin/components/AdminListingScaffold";
-export function SellerOrdersView({ children, ...props }) {
+import { DataTable } from "../../admin/components/DataTable";
+// ---------------------------------------------------------------------------
+// Config
+// ---------------------------------------------------------------------------
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["status"];
+const DEFAULT_SORT = "-createdAt";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest" },
+    { value: "createdAt", label: "Oldest" },
+];
+const STATUS_OPTIONS = ["All", "PENDING", "PROCESSING", "SHIPPED", "DELIVERED", "CANCELLED", "REFUNDED"];
+const STATUS_BADGE_VARIANT = {
+    DELIVERED: "success",
+    SHIPPED: "info",
+    PROCESSING: "warning",
+    PENDING: "default",
+    CANCELLED: "danger",
+    REFUNDED: "danger",
+};
+const UPDATE_STATUS_OPTIONS = [
+    { value: "", label: "— keep current —" },
+    { value: "processing", label: "Processing" },
+    { value: "shipped", label: "Shipped" },
+];
+// ---------------------------------------------------------------------------
+// Order Detail Drawer
+// ---------------------------------------------------------------------------
+function OrderDetailDrawer({ orderId, apiBase, onClose, }) {
+    const [order, setOrder] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [fetchError, setFetchError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [newStatus, setNewStatus] = useState("");
+    const [trackingNumber, setTrackingNumber] = useState("");
+    const [carrier, setCarrier] = useState("");
+    const [trackingUrl, setTrackingUrl] = useState("");
+    React.useEffect(() => {
+        setLoading(true);
+        setFetchError(null);
+        fetch(`${apiBase}/${orderId}`)
+            .then((r) => r.json())
+            .then((json) => {
+            const o = (json?.data ?? json);
+            setOrder(o);
+            setTrackingNumber(o.trackingNumber ?? "");
+            setCarrier(o.carrier ?? "");
+            setTrackingUrl(o.trackingUrl ?? "");
+        })
+            .catch(() => setFetchError("Failed to load order details"))
+            .finally(() => setLoading(false));
+    }, [orderId, apiBase]);
+    const handleSave = async () => {
+        if (!order)
+            return;
+        setSaving(true);
+        setSaveError(null);
+        try {
+            const payload = {};
+            if (newStatus)
+                payload.status = newStatus;
+            if (trackingNumber !== (order.trackingNumber ?? ""))
+                payload.trackingNumber = trackingNumber;
+            if (carrier !== (order.carrier ?? ""))
+                payload.shippingCarrier = carrier;
+            if (trackingUrl !== (order.trackingUrl ?? ""))
+                payload.trackingUrl = trackingUrl;
+            if (Object.keys(payload).length === 0) {
+                onClose();
+                return;
+            }
+            const res = await fetch(`${apiBase}/${orderId}`, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload),
+            });
+            if (!res.ok) {
+                const d = await res.json().catch(() => ({}));
+                throw new Error(d?.error ?? "Failed to update order");
+            }
+            const updated = await res.json();
+            setOrder((updated?.data ?? updated));
+            setNewStatus("");
+        }
+        catch (err) {
+            setSaveError(err.message);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    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(Div, { className: "flex items-center justify-center py-16", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-[var(--appkit-color-primary)] border-t-transparent" }) })), fetchError && (_jsx(Div, { className: "mx-4 mt-4 rounded-lg border border-red-200 bg-red-50 dark:bg-red-950/40 dark:border-red-900/60 px-4 py-3 text-sm text-red-700 dark:text-red-200", children: fetchError })), order && !loading && (_jsxs(Stack, { gap: "none", className: "flex flex-col", children: [_jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: [_jsxs(Div, { className: "flex items-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: "font-semibold text-[var(--appkit-color-text-primary)] mb-2", children: "Items" }), _jsx("div", { className: "divide-y divide-[var(--appkit-color-border)] dark:divide-slate-700 rounded-lg border border-[var(--appkit-color-border)] dark:border-slate-700", children: (order.items ?? []).map((item, i) => (_jsxs("div", { className: "flex items-center justify-between px-3 py-2.5 gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Text, { size: "sm", className: "font-medium truncate", 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 font-medium", children: toRupees(item.price ?? 0) })] }, i))) })] })), _jsxs(Div, { className: "flex items-center justify-between rounded-lg bg-zinc-50 dark:bg-slate-800/60 px-4 py-3", children: [_jsx(Text, { size: "sm", className: "font-semibold", children: "Total" }), _jsx(Text, { size: "sm", className: "font-bold text-[var(--appkit-color-primary)]", children: toRupees(order.totalAmount ?? 0) })] }), addrLine && (_jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "font-semibold mb-1", 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: "font-semibold mb-1", children: "Payment" }), _jsx(Text, { size: "sm", className: "text-[var(--appkit-color-text-secondary)] capitalize", children: order.paymentMethod })] })), _jsxs("div", { className: "border-t border-[var(--appkit-color-border)] dark:border-slate-700 pt-4 space-y-3", children: [_jsx(Heading, { level: 4, className: "text-sm font-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, { className: "rounded-lg border border-red-200 bg-red-50 dark:bg-red-950/40 dark:border-red-900/60 px-3 py-2 text-xs text-red-700 dark:text-red-200", children: saveError }))] })] }), _jsxs("div", { className: "border-t border-[var(--appkit-color-border)] dark:border-slate-700 px-4 py-3.5 flex items-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 [selectedOrderId, setSelectedOrderId] = useState(null);
+    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" ? `status==${statusRaw}` : undefined;
     const { rows, total, isLoading, errorMessage } = useSellerListingData({
         queryKey: ["seller", "orders", "listing"],
         endpoint: SELLER_ENDPOINTS.ORDERS,
-        mapRows: (response) => toRecordArray(response.orders).map((item, index) => ({
-            id: toStringValue(item.id, `order-${index}`),
-            primary: toStringValue(item.orderNumber ?? `#${item.id}`, "Order"),
-            secondary: [
-                toStringValue(item.buyerName ?? "Unknown buyer", "Unknown buyer"),
-                toRupees(item.totalAmount ?? item.total),
-            ].join(" · "),
-            status: toStringValue(item.status, "Unknown"),
-            updatedAt: toRelativeDate(item.updatedAt ?? item.orderDate ?? item.createdAt),
-        })),
+        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 : [];
+            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"),
+            };
+        }),
         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("div", { className: "space-y-0.5 min-w-0", children: [_jsx("p", { className: "font-mono text-xs font-semibold text-zinc-900 dark:text-zinc-100 truncate", children: row.primary }), _jsxs("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [row.buyerName, " \u00B7 ", row.itemCount, " item", row.itemCount !== 1 ? "s" : ""] })] })),
+        },
+        {
+            key: "totalAmount",
+            header: "Total",
+            className: "w-28",
+            render: (row) => _jsx("span", { className: "text-sm font-semibold", children: toRupees(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: "updatedAt",
+            header: "Date",
+            className: "w-28",
+            render: (row) => _jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.updatedAt }),
+        },
+    ];
+    const renderRowActions = useCallback((row) => (_jsx("button", { type: "button", onClick: () => setSelectedOrderId(row.id), title: "View order details", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: _jsx(Eye, { className: "h-4 w-4" }) })), []);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "seller", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "seller", ...props, title: "Orders", subtitle: "Track all orders for your products", actionLabel: "", searchPlaceholder: "Search by order #, buyer name, or product", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No orders found", resultSummary: `Showing ${rows.length} of ${total} orders` }));
+    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); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-red-200 bg-red-50 dark:bg-red-950/40 dark:border-red-900/60 px-4 py-3 text-sm text-red-700 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, columns: columns, isLoading: isLoading, emptyLabel: "No orders yet", renderRowActions: renderRowActions })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt
+                                                    ? "bg-[var(--appkit-color-primary)] text-white border-[var(--appkit-color-primary)]"
+                                                    : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-[var(--appkit-color-primary)] py-2.5 text-sm font-semibold text-white transition-colors active:scale-[0.98]", children: ["Apply", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] })), selectedOrderId && (_jsx(OrderDetailDrawer, { orderId: selectedOrderId, apiBase: orderDetailApiBase, onClose: () => setSelectedOrderId(null) }))] }));
 }

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

@@ -0,0 +1,7 @@
+export interface SellerPayoutRequestViewProps {
+    payoutsApiBase?: string;
+    payoutSettingsApiBase?: string;
+    requestApiBase?: string;
+    onRequested?: () => void;
+}
+export declare function SellerPayoutRequestView({ payoutsApiBase, payoutSettingsApiBase, requestApiBase, onRequested, }: SellerPayoutRequestViewProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Alert, Badge, Button, Div, Modal, Stack, Text, } from "../../../ui";
+function rupees(paise) {
+    return `₹${(paise / 100).toLocaleString("en-IN", { minimumFractionDigits: 2 })}`;
+}
+export function SellerPayoutRequestView({ payoutsApiBase = "/api/store/payouts", payoutSettingsApiBase = "/api/store/payout-settings", requestApiBase = "/api/store/payouts/request", onRequested, }) {
+    const [summary, setSummary] = useState(null);
+    const [payoutDetails, setPayoutDetails] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [modalOpen, setModalOpen] = useState(false);
+    const [notes, setNotes] = useState("");
+    const [submitting, setSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+    const [submitted, setSubmitted] = useState(false);
+    useEffect(() => {
+        Promise.all([
+            fetch(payoutsApiBase).then((r) => r.json()),
+            fetch(payoutSettingsApiBase).then((r) => r.json()),
+        ])
+            .then(([payoutsJson, settingsJson]) => {
+            setSummary(payoutsJson?.data?.summary ?? null);
+            setPayoutDetails(settingsJson?.data?.payoutDetails ?? null);
+        })
+            .catch(() => { })
+            .finally(() => setLoading(false));
+    }, [payoutsApiBase, payoutSettingsApiBase]);
+    const handleRequest = async () => {
+        if (!payoutDetails?.method)
+            return;
+        setSubmitting(true);
+        setSubmitError(null);
+        try {
+            const res = await fetch(requestApiBase, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ paymentMethod: payoutDetails.method, notes: notes.trim() || undefined }),
+            });
+            const json = await res.json();
+            if (!res.ok)
+                throw new Error(json?.error ?? "Failed to submit request");
+            setSubmitted(true);
+            setModalOpen(false);
+            setNotes("");
+            onRequested?.();
+        }
+        catch (err) {
+            setSubmitError(err.message);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    if (loading)
+        return null;
+    if (!summary)
+        return null;
+    const canRequest = !summary.hasPendingPayout && summary.availableEarnings > 0 && payoutDetails?.isConfigured;
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: "p-4 rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: _jsxs(Div, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Available for Payout" }), _jsx(Text, { className: "text-2xl font-bold text-[var(--appkit-color-primary)]", children: rupees(summary.availableEarnings) }), _jsxs(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] mt-0.5", children: [summary.eligibleOrderCount, " eligible order", summary.eligibleOrderCount !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: "flex items-center gap-2 flex-wrap", children: [summary.hasPendingPayout && _jsx(Badge, { variant: "warning", children: "Payout in progress" }), submitted && _jsx(Badge, { variant: "success", children: "Payout requested!" }), !payoutDetails?.isConfigured && (_jsx(Text, { className: "text-sm text-[var(--appkit-color-warning,#f59e0b)]", children: "Set up payout details first" })), _jsx(Button, { variant: "primary", onClick: () => setModalOpen(true), disabled: !canRequest, children: "Request Payout" })] })] }) }), _jsx(Modal, { isOpen: modalOpen, onClose: () => { setModalOpen(false); setSubmitError(null); }, title: "Request Payout", children: _jsxs(Stack, { gap: "md", className: "p-4", children: [_jsxs(Div, { className: "p-3 rounded bg-[var(--appkit-color-surface-muted)]", children: [_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "Amount to be paid" }), _jsx(Text, { className: "text-xl font-bold", children: rupees(summary?.availableEarnings ?? 0) }), _jsxs(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: ["Via ", payoutDetails?.method === "upi"
+                                            ? `UPI — ${payoutDetails.upiId}`
+                                            : `Bank — ${payoutDetails?.bankAccount?.bankName ?? ""} ••••${payoutDetails?.bankAccount?.accountNumberMasked?.slice(-4) ?? "••••"}`] })] }), submitError && _jsx(Alert, { variant: "error", children: submitError }), _jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium mb-1.5", children: "Notes (optional)" }), _jsx("textarea", { className: "w-full rounded-md border border-[var(--appkit-color-border)] bg-[var(--appkit-color-input-bg,var(--appkit-color-surface))] p-2.5 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)] dark:bg-[var(--appkit-color-surface-dark,#1e2330)] dark:border-[var(--appkit-color-border-dark)]", rows: 3, value: notes, onChange: (e) => setNotes(e.target.value), maxLength: 500, placeholder: "Any notes for the payout request\u2026" })] }), _jsxs(Div, { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "outline", onClick: () => setModalOpen(false), disabled: submitting, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleRequest, disabled: submitting, isLoading: submitting, children: "Confirm Request" })] })] }) })] }));
+}

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

@@ -1,11 +1,4 @@
-import React from "react";
-import type { StackedViewShellProps } from "../../../ui";
-export interface SellerPayoutSettingsViewProps extends Omit<StackedViewShellProps, "sections"> {
-    labels?: {
-        title?: string;
-        saveButton?: string;
-    };
-    renderForm?: (isLoading: boolean) => React.ReactNode;
-    isLoading?: boolean;
+export interface SellerPayoutSettingsViewProps {
+    apiBase?: string;
 }
-export declare function SellerPayoutSettingsView({ labels, renderForm, isLoading, ...rest }: SellerPayoutSettingsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SellerPayoutSettingsView({ apiBase }: SellerPayoutSettingsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,91 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Badge, Button, Div, FormField, FormGroup, Heading, Stack, Text, } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
-export function SellerPayoutSettingsView({ labels = {}, renderForm, isLoading = false, ...rest }) {
-    return (_jsx(StackedViewShell, { portal: "seller", ...rest, title: labels.title, sections: [renderForm?.(isLoading)] }));
+const DEFAULT_DRAFT = {
+    method: "upi",
+    upiId: "",
+    accountHolderName: "",
+    accountNumber: "",
+    ifscCode: "",
+    bankName: "",
+    accountType: "savings",
+};
+export function SellerPayoutSettingsView({ apiBase = "/api/store/payout-settings" }) {
+    const [draft, setDraft] = useState(DEFAULT_DRAFT);
+    const [current, setCurrent] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+    useEffect(() => {
+        fetch(apiBase)
+            .then((r) => r.json())
+            .then((res) => {
+            const details = res?.data?.payoutDetails ?? { method: "upi", isConfigured: false };
+            setCurrent(details);
+            setDraft({
+                method: details.method,
+                upiId: details.upiId ?? "",
+                accountHolderName: details.bankAccount?.accountHolderName ?? "",
+                accountNumber: "",
+                ifscCode: details.bankAccount?.ifscCode ?? "",
+                bankName: details.bankAccount?.bankName ?? "",
+                accountType: details.bankAccount?.accountType ?? "savings",
+            });
+        })
+            .catch(() => { })
+            .finally(() => setLoading(false));
+    }, [apiBase]);
+    const update = useCallback((key, value) => {
+        setDraft((prev) => ({ ...prev, [key]: value }));
+        setSuccess(false);
+    }, []);
+    const handleSave = async () => {
+        setError(null);
+        setSuccess(false);
+        setSaving(true);
+        try {
+            const body = draft.method === "upi"
+                ? { method: "upi", upiId: draft.upiId.trim() }
+                : {
+                    method: "bank_transfer",
+                    accountHolderName: draft.accountHolderName.trim(),
+                    accountNumber: draft.accountNumber.trim(),
+                    ifscCode: draft.ifscCode.trim().toUpperCase(),
+                    bankName: draft.bankName.trim(),
+                    accountType: draft.accountType,
+                };
+            const res = await fetch(apiBase, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(body),
+            });
+            const json = await res.json();
+            if (!res.ok)
+                throw new Error(json?.error ?? "Failed to save");
+            setSuccess(true);
+            const updated = json?.data?.payoutDetails ?? { method: draft.method, isConfigured: false };
+            setCurrent(updated);
+            // clear sensitive field
+            setDraft((prev) => ({ ...prev, accountNumber: "" }));
+        }
+        catch (err) {
+            setError(err.message);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const isUpi = draft.method === "upi";
+    const busy = loading || saving;
+    return (_jsx(StackedViewShell, { portal: "seller", title: "Payout Settings", sections: [
+            _jsxs(Stack, { gap: "lg", children: [current && (_jsx(Div, { className: "flex items-center gap-2", children: _jsx(Badge, { variant: current.isConfigured ? "success" : "warning", children: current.isConfigured ? "Payout configured" : "Not configured" }) })), error && _jsx(Alert, { variant: "error", children: error }), success && _jsx(Alert, { variant: "success", children: "Payout details saved." }), 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})` })), _jsxs("section", { children: [_jsx(Heading, { level: 3, className: "mb-3", children: "Payout Method" }), _jsx(Stack, { gap: "sm", children: ([
+                                    { value: "upi", label: "UPI", desc: "Instant payouts via UPI VPA (e.g. name@upi)." },
+                                    { value: "bank_transfer", label: "Bank Transfer", desc: "NEFT/RTGS to your bank account within 2–3 business days." },
+                                ]).map(({ value, label, desc }) => (_jsxs("label", { className: "flex items-center gap-3 p-3 rounded-lg border border-[var(--appkit-color-border)] cursor-pointer has-[:checked]:border-[var(--appkit-color-primary)] has-[:checked]:bg-[var(--appkit-color-primary)]/5", children: [_jsx("input", { type: "radio", name: "payoutMethod", value: value, checked: draft.method === value, onChange: () => update("method", value), className: "accent-[var(--appkit-color-primary)]", disabled: busy }), _jsxs(Div, { children: [_jsx(Text, { className: "font-medium", children: label }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: desc })] })] }, value))) })] }), isUpi && (_jsxs("section", { children: [_jsx(Heading, { level: 3, className: "mb-3", children: "UPI Details" }), _jsx(FormField, { name: "upiId", label: "UPI ID (VPA)", type: "text", value: draft.upiId, onChange: (v) => update("upiId", v), placeholder: "yourname@upi", helpText: "Ensure this VPA is registered and active.", disabled: busy })] })), !isUpi && (_jsxs("section", { children: [_jsx(Heading, { level: 3, className: "mb-3", children: "Bank Account Details" }), _jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "accountHolderName", label: "Account Holder Name", type: "text", value: draft.accountHolderName, onChange: (v) => update("accountHolderName", v), placeholder: "Name as on bank account", disabled: busy }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "accountNumber", label: "Account Number", type: "text", value: draft.accountNumber, onChange: (v) => update("accountNumber", v), placeholder: "Enter full account number", helpText: current?.bankAccount ? `Saved: ••••${current.bankAccount.accountNumberMasked?.slice(-4) ?? "••••"}` : "Stored securely, never displayed in full.", disabled: busy }), _jsx(FormField, { name: "ifscCode", label: "IFSC Code", type: "text", value: draft.ifscCode, onChange: (v) => update("ifscCode", v.toUpperCase()), placeholder: "e.g. SBIN0001234", disabled: busy })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "bankName", label: "Bank Name", type: "text", value: draft.bankName, onChange: (v) => update("bankName", v), placeholder: "e.g. State Bank of India", disabled: busy }), _jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium mb-1.5", children: "Account Type" }), _jsx(Stack, { gap: "xs", className: "flex-row", children: ["savings", "current"].map((t) => (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "radio", name: "accountType", value: t, checked: draft.accountType === t, onChange: () => update("accountType", t), className: "accent-[var(--appkit-color-primary)]", disabled: busy }), _jsx(Text, { className: "capitalize text-sm", children: t })] }, t))) })] })] })] })] })), _jsx(Div, { className: "flex justify-end pt-2 border-t border-[var(--appkit-color-border)]", children: _jsx(Button, { variant: "primary", onClick: handleSave, disabled: busy, isLoading: saving, children: "Save Payout Details" }) })] }, "payout"),
+        ] }));
 }

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

@@ -1,15 +1,62 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { ListingViewShell } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import { X } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toRupees, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { AdminListingScaffold } from "../../admin/components/AdminListingScaffold";
+import { DataTable } from "../../admin/components/DataTable";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["status"];
+const DEFAULT_SORT = "-createdAt";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest" },
+    { value: "createdAt", label: "Oldest" },
+];
+const STATUS_OPTIONS = ["All", "PENDING", "PROCESSING", "PAID", "FAILED"];
 export function SellerPayoutsView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    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" ? `status==${statusRaw}` : undefined;
     const { rows, total, isLoading, errorMessage } = useSellerListingData({
         queryKey: ["seller", "payouts", "listing"],
         endpoint: SELLER_ENDPOINTS.PAYOUTS,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        filters,
+        q: table.get("q") || undefined,
         mapRows: (response) => toRecordArray(response.payouts).map((item, index) => ({
             id: toStringValue(item.id, `payout-${index}`),
             primary: `Payout #${toStringValue(item.payoutNumber ?? item.id, "Unknown")}`,
@@ -22,8 +69,12 @@ export function SellerPayoutsView({ children, ...props }) {
         })),
         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);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "seller", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "seller", ...props, title: "Payout History", subtitle: "Track all payouts to your bank account", actionLabel: "Request Payout", searchPlaceholder: "Search payouts by payout # or amount", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No payouts found", resultSummary: `Showing ${rows.length} of ${total} payouts` }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search payouts by payout # or amount", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No payouts found" })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt
+                                                    ? "bg-primary text-white border-primary"
+                                                    : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
 }

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

@@ -0,0 +1,68 @@
+import React from "react";
+export type ProductListingMode = "standard" | "auction" | "pre-order";
+export interface SellerProductDraft {
+    title?: string;
+    slug?: string;
+    description?: string;
+    category?: string;
+    brand?: string;
+    condition?: string;
+    tags?: string[];
+    mainImage?: string;
+    images?: string[];
+    youtubeId?: string;
+    price?: number;
+    compareAtPrice?: number;
+    stockQuantity?: number;
+    featured?: boolean;
+    isPromoted?: boolean;
+    isNew?: boolean;
+    isOnSale?: boolean;
+    shippingPaidBy?: "buyer" | "seller";
+    pickupAddressId?: string;
+    insurance?: boolean;
+    insuranceCost?: number;
+    status?: "draft" | "published";
+    seoTitle?: string;
+    seoDescription?: string;
+    startingBid?: number;
+    reservePrice?: number;
+    buyNowPrice?: number;
+    minBidIncrement?: number;
+    auctionEndDate?: string;
+    auctionShippingPaidBy?: "winner" | "seller";
+    autoExtendable?: boolean;
+    auctionExtensionMinutes?: number;
+    preOrderDeliveryDate?: string;
+    preOrderDepositPercent?: number;
+    preOrderMaxQuantity?: number;
+    preOrderProductionStatus?: "upcoming" | "in_production" | "ready_to_ship";
+    preOrderCancellable?: boolean;
+}
+export interface SellerProductShellProps {
+    mode: "create" | "edit";
+    listingType?: ProductListingMode;
+    initialValues?: SellerProductDraft;
+    productId?: string;
+    onSave: (draft: SellerProductDraft) => void | Promise<void>;
+    onPublish: (draft: SellerProductDraft) => void | Promise<void>;
+    onDiscard?: () => void;
+    isLoading?: boolean;
+    storeSlug?: string;
+    /** Render a custom category selector (e.g. InlineCreateSelect). */
+    renderCategorySelector?: (props: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => React.ReactNode;
+    /** Render a custom brand selector. */
+    renderBrandSelector?: (props: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => React.ReactNode;
+    /** Render a custom pickup address selector. */
+    renderAddressSelector?: (props: {
+        value: string;
+        onChange: (v: string) => void;
+    }) => React.ReactNode;
+}
+export declare function SellerProductShell({ mode, listingType, initialValues, onSave, onPublish, onDiscard, isLoading, storeSlug, renderCategorySelector, renderBrandSelector, renderAddressSelector, }: SellerProductShellProps): import("react/jsx-runtime").JSX.Element;