@mohasinac/appkit 2.3.2 → 2.4.0

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;

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

@@ -1,30 +1,108 @@
 "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, ListingViewShell, Pagination, Toggle, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
-export function AdminProductsView({ children, ...props }) {
+import { DataTable } from "./DataTable";
+import { apiClient } from "../../../http";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["status", "type"];
+const DEFAULT_SORT = "-createdAt";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest" },
+    { value: "createdAt", label: "Oldest" },
+    { value: "title", label: "Title A–Z" },
+    { value: "-price", label: "Highest price" },
+];
+const STATUS_OPTIONS = ["All", "pending", "published", "draft", "archived"];
+const TYPE_OPTIONS = ["All", "Products", "Auctions", "Pre-orders"];
+const FLAG_DEFS = [
+    { key: "featured", label: "Featured" },
+    { key: "isPromoted", label: "Promoted" },
+    { key: "isOnSale", label: "On Sale" },
+    { key: "isSold", label: "Sold" },
+];
+function buildBaseColumns() {
+    return [
+        {
+            key: "primary",
+            header: "Item",
+            sortable: true,
+            render: (row) => (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
+        },
+        {
+            key: "status",
+            header: "Status",
+            sortable: true,
+            className: "w-36",
+            render: (row) => (_jsx("span", { className: "inline-flex rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", children: row.status })),
+        },
+        {
+            key: "updatedAt",
+            header: "Updated",
+            sortable: true,
+            className: "w-36",
+            render: (row) => (_jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-300", children: row.updatedAt })),
+        },
+    ];
+}
+export function AdminProductsView({ children, actionHref, getRowHref, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
-    const [q, setQ] = React.useState("");
-    const [statusFilter, setStatusFilter] = React.useState("");
-    const [typeFilter, setTypeFilter] = React.useState("");
+    const [overrides, setOverrides] = useState({});
+    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 filterParts = [];
-    if (statusFilter && statusFilter !== "All")
-        filterParts.push(`status==${statusFilter}`);
-    if (typeFilter && typeFilter !== "All") {
-        if (typeFilter === "Auctions")
+    const statusRaw = table.get("status");
+    if (statusRaw && statusRaw !== "All")
+        filterParts.push(`status==${statusRaw}`);
+    const typeRaw = table.get("type");
+    if (typeRaw && typeRaw !== "All") {
+        if (typeRaw === "Auctions")
             filterParts.push("isAuction==true");
-        else if (typeFilter === "Pre-orders")
+        else if (typeRaw === "Pre-orders")
             filterParts.push("isPreOrder==true");
     }
     const filters = filterParts.join(",") || undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "products", "listing", q, filters ?? ""],
+    const { rows: fetchedRows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "products", "listing"],
         endpoint: ADMIN_ENDPOINTS.PRODUCTS,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
         filters,
-        q,
+        q: table.get("q") || undefined,
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `product-${index}`),
             primary: toStringValue(item.title ?? item.name, "Untitled product"),
@@ -34,24 +112,35 @@ export function AdminProductsView({ children, ...props }) {
             ].join(" · "),
             status: toStringValue(item.status, "Unknown"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            featured: Boolean(item.featured),
+            isPromoted: Boolean(item.isPromoted),
+            isOnSale: Boolean(item.isOnSale),
+            isSold: Boolean(item.isSold),
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
     });
+    const rows = fetchedRows.map((r) => overrides[r.id] ? { ...r, ...overrides[r.id] } : r);
+    const handleToggle = async (id, field, value) => {
+        const prev = fetchedRows.find((r) => r.id === id)?.[field];
+        setOverrides((o) => ({ ...o, [id]: { ...o[id], [field]: value } }));
+        try {
+            await apiClient.patch(ADMIN_ENDPOINTS.PRODUCT_BY_ID(id), { [field]: value });
+        }
+        catch (err) {
+            setOverrides((o) => ({ ...o, [id]: { ...o[id], [field]: prev } }));
+            showToast(err?.message ?? "Failed to update product.", "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 (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Product Management", subtitle: "Review catalogue health, publishing state, and merchandising issues from one queue.", actionLabel: "New product", searchPlaceholder: "Search products, SKUs, or seller names", onSearch: setQ, searchValue: q, rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No products found", resultSummary: `Showing ${rows.length} of ${total} products`, filterGroups: [
-            {
-                title: "Status",
-                options: ["All", "published", "draft", "archived"],
-                active: statusFilter || "All",
-                onSelect: (opt) => setStatusFilter(opt === "All" ? "" : opt),
-            },
-            {
-                title: "Type",
-                options: ["All", "Products", "Auctions", "Pre-orders"],
-                active: typeFilter || "All",
-                onSelect: (opt) => setTypeFilter(opt === "All" ? "" : opt),
-            },
-        ] }));
+    const flagColumn = {
+        key: "flags",
+        header: "Flags",
+        className: "w-56",
+        render: (row) => (_jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), role: "presentation", children: FLAG_DEFS.map(({ key, label }) => (_jsx(Toggle, { size: "sm", label: label, checked: !!row[key], onChange: (v) => { void handleToggle(row.id, key, v); } }, key))) })),
+    };
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search products, SKUs, or seller names", 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, columns: [...buildBaseColumns(), flagColumn], isLoading: isLoading, emptyLabel: "No products found", getRowHref: getRowHref })] }), 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" }) })] })] }), _jsxs("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))) })] }), _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: TYPE_OPTIONS.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})` : ""] }) })] })] }))] }));
 }

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

@@ -0,0 +1,5 @@
+import React from "react";
+export interface AdminReturnRequestsViewProps {
+    children?: React.ReactNode;
+}
+export declare function AdminReturnRequestsView({ children: _children }: AdminReturnRequestsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ListingToolbar, Pagination, ConfirmDeleteModal, RowActionMenu, useToast } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { DataTable } from "./DataTable";
+import { apiClient } from "../../../http";
+const PAGE_SIZE = 25;
+const DEFAULT_SORT = "-createdAt";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest" },
+    { value: "createdAt", label: "Oldest" },
+];
+export function AdminReturnRequestsView({ children: _children }) {
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const [approveOpen, setApproveOpen] = useState(false);
+    const [rejectOpen, setRejectOpen] = useState(false);
+    const [selectedRow, setSelectedRow] = useState(null);
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const resetAll = useCallback(() => {
+        table.setMany({ q: "", sort: "" });
+        setSearchInput("");
+    }, [table]);
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+    }, [searchInput, table]);
+    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "return-requests", "listing"],
+        endpoint: `${ADMIN_ENDPOINTS.ORDERS}?status=RETURN_REQUESTED`,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        q: table.get("q") || undefined,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `order-${index}`),
+            primary: toStringValue(item.id, "Unknown order"),
+            secondary: [
+                toStringValue(item.buyerName ?? item.buyerId, "Unknown buyer"),
+                toRupees(item.totalAmount),
+            ].join(" · "),
+            status: toStringValue(item.status, "RETURN_REQUESTED"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            _raw: item,
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    });
+    const approveMutation = useMutation({
+        mutationFn: async (orderId) => {
+            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(orderId), { status: "REFUNDED" });
+        },
+        onSuccess: () => {
+            showToast("Return approved — order marked as Refunded.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "return-requests"] });
+            queryClient.invalidateQueries({ queryKey: ["admin", "orders"] });
+            setApproveOpen(false);
+            setSelectedRow(null);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to approve return.", "error");
+        },
+    });
+    const rejectMutation = useMutation({
+        mutationFn: async (orderId) => {
+            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(orderId), { status: "DELIVERED" });
+        },
+        onSuccess: () => {
+            showToast("Return rejected — order reverted to Delivered.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "return-requests"] });
+            queryClient.invalidateQueries({ queryKey: ["admin", "orders"] });
+            setRejectOpen(false);
+            setSelectedRow(null);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to reject return.", "error");
+        },
+    });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search by order ID or buyer", 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 return requests", renderRowActions: (row) => {
+                                    const rr = row;
+                                    return (_jsx(RowActionMenu, { actions: [
+                                            {
+                                                label: "Approve return",
+                                                onClick: () => { setSelectedRow(rr); setApproveOpen(true); },
+                                            },
+                                            {
+                                                label: "Reject return",
+                                                destructive: true,
+                                                onClick: () => { setSelectedRow(rr); setRejectOpen(true); },
+                                            },
+                                        ] }));
+                                } })] })] }), _jsx(ConfirmDeleteModal, { isOpen: approveOpen, onClose: () => { setApproveOpen(false); setSelectedRow(null); }, onConfirm: () => { if (selectedRow)
+                    approveMutation.mutate(selectedRow.id); }, isDeleting: approveMutation.isPending, title: "Approve return request?", message: "The order status will be updated to Refunded. The buyer will be notified and the refund process will begin.", confirmText: "Approve return", variant: "primary" }), _jsx(ConfirmDeleteModal, { isOpen: rejectOpen, onClose: () => { setRejectOpen(false); setSelectedRow(null); }, onConfirm: () => { if (selectedRow)
+                    rejectMutation.mutate(selectedRow.id); }, isDeleting: rejectMutation.isPending, title: "Reject return request?", message: "The order status will be reverted to Delivered. The buyer's return request will be declined.", confirmText: "Reject return", variant: "danger" })] }));
+}