@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -0,0 +1,119 @@
+"use client";
+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 { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ListingToolbar, Pagination, ListingViewShell, RowActionMenu, ConfirmDeleteModal, useToast } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { DataTable } from "./DataTable";
+import { apiClient } from "../../../http";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["type"];
+const DEFAULT_SORT = "-createdAt";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest" },
+    { value: "createdAt", label: "Oldest" },
+];
+const NOTIF_TYPES = [
+    "All", "order_placed", "order_shipped", "order_delivered", "order_cancelled",
+    "bid_placed", "bid_outbid", "bid_won", "review_posted", "payout_processed",
+];
+export function AdminNotificationsView({ children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const [deleteTarget, setDeleteTarget] = 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 typeRaw = table.get("type");
+    const filters = typeRaw && typeRaw !== "All" ? `type==${typeRaw}` : undefined;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "notifications", "listing"],
+        endpoint: ADMIN_ENDPOINTS.ADMIN_NOTIFICATIONS,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        filters,
+        q: table.get("q") || undefined,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `notif-${index}`),
+            primary: toStringValue(item.title, "Notification"),
+            secondary: [
+                toStringValue(item.userId, ""),
+                toStringValue(item.type, ""),
+            ].filter(Boolean).join(" · "),
+            status: Boolean(item.isRead) ? "Read" : "Unread",
+            updatedAt: toRelativeDate(item.createdAt),
+            type: toStringValue(item.type, ""),
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    });
+    const deleteMutation = useMutation({
+        mutationFn: async (id) => {
+            await apiClient.delete(ADMIN_ENDPOINTS.ADMIN_NOTIFICATION_BY_ID(id));
+        },
+        onSuccess: () => {
+            showToast("Notification deleted.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "notifications"] });
+            setDeleteTarget(null);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to delete notification.", "error");
+        },
+    });
+    const resendMutation = useMutation({
+        mutationFn: async (id) => {
+            await apiClient.post(ADMIN_ENDPOINTS.ADMIN_NOTIFICATION_RESEND(id), {});
+        },
+        onSuccess: () => {
+            showToast("Notification resent.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "notifications"] });
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to resend notification.", "error");
+        },
+    });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
+    if (hasChildren) {
+        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by title or user ID", 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 notifications found", renderRowActions: (row) => {
+                                    const nr = row;
+                                    return (_jsx(RowActionMenu, { actions: [
+                                            { label: "Resend", onClick: () => resendMutation.mutate(nr.id) },
+                                            { label: "Delete", destructive: true, onClick: () => setDeleteTarget(nr) },
+                                        ] }));
+                                } })] }), 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: "Type" }), _jsx("div", { className: "flex flex-wrap gap-2", children: NOTIF_TYPES.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "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})` : ""] }) })] })] }))] }), _jsx(ConfirmDeleteModal, { isOpen: Boolean(deleteTarget), onClose: () => setDeleteTarget(null), onConfirm: () => { if (deleteTarget)
+                    deleteMutation.mutate(deleteTarget.id); }, isDeleting: deleteMutation.isPending, title: "Delete notification?", message: "This notification will be permanently removed.", confirmText: "Delete", variant: "danger" })] }));
+}

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

@@ -0,0 +1,8 @@
+export interface AdminOrderEditorViewProps {
+    open: boolean;
+    onClose: () => void;
+    orderId?: string;
+    orderLabel?: string;
+    currentStatus?: string;
+}
+export declare function AdminOrderEditorView({ open, onClose, orderId, orderLabel, currentStatus, }: AdminOrderEditorViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button, Form, FormActions, Input, Select, SideDrawer, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+const STATUS_OPTIONS = [
+    { label: "Pending", value: "PENDING" },
+    { label: "Processing", value: "PROCESSING" },
+    { label: "Shipped", value: "SHIPPED" },
+    { label: "Delivered", value: "DELIVERED" },
+    { label: "Cancelled", value: "CANCELLED" },
+    { label: "Refunded", value: "REFUNDED" },
+    { label: "Return requested", value: "RETURN_REQUESTED" },
+];
+const CARRIER_OPTIONS = [
+    { label: "Select carrier…", value: "" },
+    { label: "Delhivery", value: "Delhivery" },
+    { label: "BlueDart", value: "BlueDart" },
+    { label: "DTDC", value: "DTDC" },
+    { label: "Ekart", value: "Ekart" },
+    { label: "India Post", value: "India Post" },
+    { label: "Other", value: "Other" },
+];
+// --- Component ---------------------------------------------------------------
+export function AdminOrderEditorView({ open, onClose, orderId, orderLabel, currentStatus, }) {
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const [status, setStatus] = React.useState(currentStatus ?? "PENDING");
+    const [trackingNumber, setTrackingNumber] = React.useState("");
+    const [carrier, setCarrier] = React.useState("");
+    const [notes, setNotes] = React.useState("");
+    const [refundAmount, setRefundAmount] = React.useState("");
+    React.useEffect(() => {
+        if (open) {
+            setStatus(currentStatus ?? "PENDING");
+            setTrackingNumber("");
+            setCarrier("");
+            setNotes("");
+            setRefundAmount("");
+        }
+    }, [open, currentStatus]);
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                status,
+                notes: notes || undefined,
+            };
+            if (trackingNumber)
+                payload.trackingNumber = trackingNumber;
+            if (carrier)
+                payload.carrier = carrier;
+            if (refundAmount) {
+                const paise = Math.round(parseFloat(refundAmount) * 100);
+                if (!isNaN(paise) && paise > 0)
+                    payload.refundAmount = paise;
+            }
+            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(orderId), payload);
+        },
+        onSuccess: () => {
+            showToast("Order updated.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "orders"] });
+            onClose();
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to update order.", "error");
+        },
+    });
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: orderLabel ? `Order: ${orderLabel}` : "Update Order", children: _jsxs(Form, { onSubmit: (e) => {
+                e.preventDefault();
+                saveMutation.mutate();
+            }, className: "space-y-4 p-4", children: [_jsx(Select, { label: "Order status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsx(Input, { label: "Tracking number (optional)", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. DEL1234567890IN" }), _jsx(Select, { label: "Carrier (optional)", options: CARRIER_OPTIONS, value: carrier, onValueChange: setCarrier }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Internal note (optional)" }), _jsx("textarea", { value: notes, onChange: (e) => setNotes(e.target.value), rows: 3, placeholder: "Reason for status change, escalation notes\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), (status === "REFUNDED" || status === "RETURN_REQUESTED") && (_jsx(Input, { label: "Refund amount \u20B9 (optional)", type: "number", min: "0", step: "0.01", value: refundAmount, onChange: (e) => setRefundAmount(e.target.value), placeholder: "e.g. 499.00" })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !orderId || saveMutation.isPending, children: "Save changes" })] })] }) }));
+}

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

@@ -1,15 +1,65 @@
 "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, RowActionMenu } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
+import { DataTable } from "./DataTable";
+import { AdminOrderEditorView } from "./AdminOrderEditorView";
+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", "RETURN_REQUESTED"];
 export function AdminOrdersView({ 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 [drawerOpen, setDrawerOpen] = useState(false);
+    const [selectedRow, setSelectedRow] = useState(null);
+    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 } = useAdminListingData({
         queryKey: ["admin", "orders", "listing"],
         endpoint: ADMIN_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) => ({
             id: toStringValue(item.id, `order-${index}`),
             primary: `Order ${toStringValue(item.orderNumber ?? item.id, "-")}`,
@@ -19,13 +69,19 @@ export function AdminOrdersView({ children, ...props }) {
             ].join(" · "),
             status: toStringValue(item.status, "Unknown"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            _raw: item,
         })),
-        getTotal: (response, mappedRows) => typeof response.meta?.total === "number"
-            ? response.meta.total
-            : mappedRows.length,
+        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: "admin", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Order Operations", subtitle: "Track payment, fulfillment, and delivery exceptions across the marketplace.", actionLabel: "Export orders", searchPlaceholder: "Search orders, buyers, or tracking IDs", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No orders found", resultSummary: `Showing ${rows.length} of ${total} orders` }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search orders, buyers, or tracking IDs", 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 orders found", renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [{
+                                            label: "Update order",
+                                            onClick: () => { setSelectedRow(row); setDrawerOpen(true); },
+                                        }] })) })] }), 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})` : ""] }) })] })] }))] }), _jsx(AdminOrderEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), orderId: selectedRow?.id, orderLabel: selectedRow?.primary, currentStatus: selectedRow?.status })] }));
 }

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

@@ -1,31 +1,140 @@
 "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 { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { Button, Form, FormActions, Input, ListingToolbar, ListingViewShell, Modal, Pagination, RowActionMenu, useToast, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
+import { DataTable } from "./DataTable";
+import { apiClient } from "../../../http";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["status"];
+const DEFAULT_SORT = "-createdAt";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest" },
+    { value: "createdAt", label: "Oldest" },
+    { value: "-amount", label: "Highest amount" },
+];
+const STATUS_OPTIONS = ["All", "PENDING", "PROCESSING", "PAID", "FAILED"];
 export function AdminPayoutsView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    const [markPaidOpen, setMarkPaidOpen] = useState(false);
+    const [selectedPayoutId, setSelectedPayoutId] = useState(null);
+    const [transactionId, setTransactionId] = useState("");
+    const toast = useToast();
+    const queryClient = useQueryClient();
+    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 } = useAdminListingData({
         queryKey: ["admin", "payouts", "listing"],
         endpoint: ADMIN_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.id, "-")}`,
-                toRupees(item.amount),
-            ].join(" · "),
-            secondary: toStringValue(item.sellerName ?? item.sellerEmail, "Unknown seller"),
+            primary: [`Payout ${toStringValue(item.id, "-")}`, toRupees(item.amount)].join(" · "),
+            secondary: toStringValue(item.storeName ?? item.sellerName, "Unknown store"),
             status: toStringValue(item.status, "Pending"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
-        getTotal: (response, mappedRows) => typeof response.meta?.total === "number"
-            ? response.meta.total
-            : mappedRows.length,
+        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
     });
+    const markPaid = useMutation({
+        mutationFn: () => {
+            if (!selectedPayoutId)
+                throw new Error("No payout selected");
+            return apiClient.patch(ADMIN_ENDPOINTS.PAYOUT_BY_ID(selectedPayoutId), {
+                status: "paid",
+                transactionId: transactionId.trim() || undefined,
+            });
+        },
+        onSuccess: () => {
+            toast.showToast("Payout marked as paid.", "success");
+            setMarkPaidOpen(false);
+            setSelectedPayoutId(null);
+            setTransactionId("");
+            void queryClient.invalidateQueries({ queryKey: ["admin", "payouts", "listing"] });
+        },
+        onError: () => {
+            toast.showToast("Failed to update payout.", "error");
+        },
+    });
+    const handleExportCsv = async () => {
+        try {
+            const res = await fetch(ADMIN_ENDPOINTS.PAYOUTS_EXPORT);
+            if (!res.ok)
+                throw new Error("Export failed");
+            const blob = await res.blob();
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `payouts-${new Date().toISOString().slice(0, 10)}.csv`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        catch {
+            toast.showToast("CSV export failed.", "error");
+        }
+    };
+    const closePaidModal = () => {
+        setMarkPaidOpen(false);
+        setTransactionId("");
+    };
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Payout Operations", subtitle: "Monitor payout eligibility, dispatch readiness, and failure follow-up in one operational queue.", actionLabel: "Run payout batch", searchPlaceholder: "Search sellers, payout IDs, or order groups", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No payouts found", resultSummary: `Showing ${rows.length} of ${total} payouts` }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search stores, payout IDs, or order groups", 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, extra: _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleExportCsv, children: "Export CSV" }) }), 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", renderRowActions: (row) => {
+                                    const pr = row;
+                                    return (_jsx(RowActionMenu, { actions: [
+                                            {
+                                                label: "Mark paid",
+                                                onClick: () => {
+                                                    setSelectedPayoutId(pr.id);
+                                                    setMarkPaidOpen(true);
+                                                },
+                                                disabled: pr.status.toLowerCase() === "paid" ||
+                                                    pr.status.toLowerCase() === "cancelled",
+                                            },
+                                        ] }));
+                                } })] }), 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})` : ""] }) })] })] }))] }), _jsx(Modal, { isOpen: markPaidOpen, onClose: closePaidModal, title: "Mark payout as paid", children: _jsxs(Form, { className: "space-y-4", onSubmit: (e) => {
+                        e.preventDefault();
+                        markPaid.mutate();
+                    }, children: [_jsx(Input, { label: "Transaction / reference ID", value: transactionId, onChange: (e) => setTransactionId(e.target.value), placeholder: "UTR, UPI ref, or bank transfer ID (optional)" }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: closePaidModal, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: markPaid.isPending, children: markPaid.isPending ? "Saving..." : "Confirm paid" })] })] }) })] }));
 }

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

@@ -0,0 +1,7 @@
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminProductEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
+    productId?: string;
+    onSaved?: (id: string) => void;
+    onDeleted?: () => void;
+}
+export declare function AdminProductEditorView({ productId, onSaved, onDeleted, ...rest }: AdminProductEditorViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Button, DynamicSelect, InlineCreateSelect, Form, Stack, StackedViewShell, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ProductForm } from "../../products/components/ProductForm";
+import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
+import { BrandQuickCreateForm } from "./BrandQuickCreateForm";
+function modeFromProduct(product) {
+    if (product.isAuction)
+        return "auction";
+    if (product.isPreOrder)
+        return "preorder";
+    return "standard";
+}
+function applyMode(product, mode) {
+    return {
+        ...product,
+        isAuction: mode === "auction",
+        isPreOrder: mode === "preorder",
+    };
+}
+async function loadStoreOptions(query, page) {
+    const params = new URLSearchParams({ page: String(page), pageSize: "25" });
+    if (query)
+        params.set("q", query);
+    const res = await apiClient.get(`${ADMIN_ENDPOINTS.STORES}?${params.toString()}`);
+    const data = res ?? {};
+    const items = (data.items ?? []).map((s) => ({
+        value: s.id,
+        label: s.storeName,
+        meta: { ownerId: s.ownerId, storeName: s.storeName },
+    }));
+    return {
+        items,
+        hasMore: data.hasMore ?? false,
+    };
+}
+async function loadCategoryOptions(query, page) {
+    const params = new URLSearchParams({ page: String(page), pageSize: "25" });
+    if (query)
+        params.set("q", query);
+    const res = await apiClient.get(`${ADMIN_ENDPOINTS.CATEGORIES}?${params.toString()}`);
+    const data = res ?? {};
+    return {
+        items: (data.items ?? []).map((c) => ({ value: c.id, label: c.name })),
+        hasMore: data.hasMore ?? false,
+    };
+}
+async function loadBrandOptions(query, page) {
+    const params = new URLSearchParams({ page: String(page), pageSize: "25" });
+    if (query)
+        params.set("q", query);
+    const res = await apiClient.get(`${ADMIN_ENDPOINTS.BRANDS}?${params.toString()}`);
+    const data = res ?? {};
+    return {
+        items: (data.items ?? []).map((b) => ({ value: b.id, label: b.name })),
+        hasMore: data.hasMore ?? false,
+    };
+}
+const EMPTY_PRODUCT = {
+    title: "",
+    status: "draft",
+    isAuction: false,
+    isPreOrder: false,
+};
+export function AdminProductEditorView({ productId, onSaved, onDeleted, ...rest }) {
+    const isEdit = Boolean(productId);
+    const [product, setProduct] = React.useState(EMPTY_PRODUCT);
+    const [mode, setMode] = React.useState("standard");
+    const { showToast } = useToast();
+    const productQuery = useQuery({
+        queryKey: ["admin", "product", productId],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.PRODUCT_BY_ID(productId));
+            return res?.data ?? res;
+        },
+        enabled: isEdit,
+    });
+    React.useEffect(() => {
+        const data = productQuery.data;
+        if (!data)
+            return;
+        setProduct(data);
+        setMode(modeFromProduct(data));
+    }, [productQuery.data]);
+    const handleModeChange = (next) => {
+        const m = next;
+        setMode(m);
+        setProduct((prev) => applyMode(prev, m));
+    };
+    const handleStoreSelect = (value, option) => {
+        setProduct((prev) => ({
+            ...prev,
+            storeId: value ?? undefined,
+            sellerName: option?.meta?.storeName ?? undefined,
+        }));
+    };
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = applyMode(product, mode);
+            if (isEdit) {
+                return apiClient.patch(ADMIN_ENDPOINTS.PRODUCT_BY_ID(productId), payload);
+            }
+            return apiClient.post(ADMIN_ENDPOINTS.PRODUCTS, payload);
+        },
+        onSuccess: (res) => {
+            const id = res?.data?.id ??
+                res?.id ??
+                productId;
+            showToast(isEdit ? "Product updated." : "Product created.", "success");
+            if (onSaved && id)
+                onSaved(id);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to save product.", "error");
+        },
+    });
+    const deleteMutation = useMutation({
+        mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.PRODUCT_BY_ID(productId)),
+        onSuccess: () => {
+            showToast("Product deleted.", "success");
+            if (onDeleted)
+                onDeleted();
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to delete product.", "error");
+        },
+    });
+    const isSubmitting = saveMutation.isPending || productQuery.isLoading;
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Product" : "Create Product", sections: [
+            _jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    saveMutation.mutate();
+                }, className: "space-y-6", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Listing type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "standard", children: "Standard" }), _jsx(TabsTrigger, { value: "auction", children: "Auction" }), _jsx(TabsTrigger, { value: "preorder", children: "Pre-order" })] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(DynamicSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(InlineCreateSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(InlineCreateSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                    if (confirm("Delete this product? This cannot be undone.")) {
+                                        deleteMutation.mutate();
+                                    }
+                                }, children: "Delete product" }))] })] }, "product-form"),
+        ] }));
+}

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

@@ -1,4 +1,7 @@
 import type { ListingViewShellProps } from "../../../ui";
+import type { AdminListingScaffoldRow } from "./AdminListingScaffold";
 export interface AdminProductsViewProps extends ListingViewShellProps {
+    actionHref?: string;
+    getRowHref?: (row: AdminListingScaffoldRow) => string;
 }
-export declare function AdminProductsView({ children, ...props }: AdminProductsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminProductsView({ children, actionHref, getRowHref, ...props }: AdminProductsViewProps): import("react/jsx-runtime").JSX.Element;