@mohasinac/appkit 2.7.59 → 2.8.0

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

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

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

@@ -1,38 +1,31 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
-import { Plus } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { useBottomActions } from "../../layout";
-import { BulkActionBar, Button, FilterChipGroup, Heading, ListingFilterDrawer, ListingToolbar, ListingViewShell, Pagination, SideDrawer, Text, Toggle, useToast } from "../../../ui";
+import { ListingLayout, Text, Toggle, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_PRODUCT_STATUS_TABS, ADMIN_PRODUCT_LISTING_TYPE_TABS, } from "../constants/filter-tabs";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
-import { AdminViewCards } from "./AdminViewCards";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+import { FilterChipGroup } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { AdminProductEditorView } from "./AdminProductEditorView";
 import { QuickEditMenu } from "./QuickEditMenu";
-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 = ADMIN_PRODUCT_STATUS_TABS;
-const TYPE_OPTIONS = ADMIN_PRODUCT_LISTING_TYPE_TABS;
 const FLAG_DEFS = [
     { key: "featured", label: "Featured" },
     { key: "isPromoted", label: "Promoted" },
     { key: "isOnSale", label: "On Sale" },
     { key: "isSold", label: "Sold" },
 ];
+const TYPE_FILTER_MAP = {
+    Auctions: "listingType==auction",
+    "Pre-orders": "listingType==pre-order",
+    "Prize Draws": "listingType==prize-draw",
+    Products: "listingType==standard",
+    Classifieds: "listingType==classified",
+    "Digital Codes": "listingType==digital-code",
+    "Live Items": "listingType==live",
+};
 function buildBaseColumns() {
     return [
         {
@@ -57,93 +50,11 @@ function buildBaseColumns() {
         },
     ];
 }
-export function AdminProductsView({ children, actionHref, getRowHref, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
+export function AdminProductsView({ children, ...props }) {
     const [overrides, setOverrides] = useState({});
     const { showToast } = useToast();
-    const [view, setView] = useState("table");
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const { openCreatePanel, openEditPanel, closePanel, isCreateOpen, isEditOpen, editId } = usePanelUrlSync();
-    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: "", showSold: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
-        setSearchInput("");
-    }, [table]);
-    const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
-    }, [searchInput, table]);
-    const showSold = table.get("showSold") === "true";
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || activeFilterCount > 0 || showSold;
-    const filterParts = [];
-    if (!showSold)
-        filterParts.push("isSold==false");
-    const statusRaw = table.get("status");
-    if (statusRaw && statusRaw !== "All")
-        filterParts.push(`status==${statusRaw}`);
-    const typeRaw = table.get("type");
-    if (typeRaw && typeRaw !== "All") {
-        const TYPE_FILTER = {
-            Auctions: "listingType==auction",
-            "Pre-orders": "listingType==pre-order",
-            "Prize Draws": "listingType==prize-draw",
-            Products: "listingType==standard",
-            Classifieds: "listingType==classified",
-            "Digital Codes": "listingType==digital-code",
-            "Live Items": "listingType==live",
-        };
-        const typeFilter = TYPE_FILTER[typeRaw];
-        if (typeFilter)
-            filterParts.push(typeFilter);
-    }
-    const filters = filterParts.join(",") || undefined;
-    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: 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"),
-            secondary: [
-                toStringValue(item.sellerName, "Unknown seller"),
-                toStringValue(item.sku, "No SKU"),
-            ].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 selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    const handleToggle = async (id, field, value) => {
-        const prev = fetchedRows.find((r) => r.id === id)?.[field];
+    const handleToggle = useCallback(async (id, field, value) => {
+        const prev = overrides[id]?.[field];
         setOverrides((o) => ({ ...o, [id]: { ...o[id], [field]: value } }));
         try {
             await apiClient.patch(ADMIN_ENDPOINTS.PRODUCT_BY_ID(id), { [field]: value });
@@ -152,9 +63,9 @@ export function AdminProductsView({ children, actionHref, getRowHref, ...props }
             setOverrides((o) => ({ ...o, [id]: { ...o[id], [field]: prev } }));
             showToast(err?.message ?? "Failed to update product.", "error");
         }
-    };
+    }, [showToast, overrides]);
     const handleQuickEdit = useCallback(async (id, values) => {
-        const prev = fetchedRows.find((r) => r.id === id);
+        const prev = overrides[id];
         setOverrides((o) => ({ ...o, [id]: { ...o[id], ...values } }));
         try {
             await apiClient.patch(ADMIN_ENDPOINTS.PRODUCT_BY_ID(id), values);
@@ -166,65 +77,158 @@ export function AdminProductsView({ children, actionHref, getRowHref, ...props }
             showToast(err?.message ?? "Failed to update product.", "error");
             throw err;
         }
-    }, [fetchedRows, showToast]);
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    if (hasChildren) {
-        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    }, [showToast, overrides]);
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
     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))) })),
+        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))) })),
+    };
+    // We need showSold state to be derived from URL — read it via a small inner component
+    // that uses the listing's own table state. To keep things simple, use a ref into the
+    // config's render-prop chain via `renderAboveContent` which has no useUrlTable.
+    // Simplest: use buildFilters which gets the full filterState, and add showSold to filterKeys.
+    const config = {
+        portal: "admin",
+        title: "Products",
+        searchPlaceholder: "Search products, SKUs, or seller names",
+        emptyLabel: "No products found",
+        filterKeys: ["status", "type", "showSold"],
+        defaultSort: "-createdAt",
+        queryKey: ["admin", "products", "listing"],
+        endpoint: ADMIN_ENDPOINTS.PRODUCTS,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+            { value: "title", label: "Title A–Z" },
+            { value: "-price", label: "Highest price" },
+        ],
+        columns: [...buildBaseColumns(), flagColumn],
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => {
+            const id = toStringValue(item.id, `product-${index}`);
+            const base = {
+                id,
+                primary: toStringValue(item.title ?? item.name, "Untitled product"),
+                secondary: [
+                    toStringValue(item.sellerName, "Unknown seller"),
+                    toStringValue(item.sku, "No SKU"),
+                ].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),
+            };
+            return overrides[id] ? { ...base, ...overrides[id] } : base;
+        }),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        buildFilters: (state) => {
+            const parts = [];
+            if (state.showSold !== "true")
+                parts.push("isSold==false");
+            if (state.status && state.status !== "All")
+                parts.push(`status==${state.status}`);
+            const typeFilter = TYPE_FILTER_MAP[state.type];
+            if (typeFilter)
+                parts.push(typeFilter);
+            return parts.join(",") || undefined;
+        },
+        primaryAction: {
+            label: "Add Product",
+            onClick: ({ openCreatePanel }) => openCreatePanel(),
+        },
+        buildBulkActions: (selection) => [
+            {
+                id: "feature",
+                label: ACTIONS.ADMIN["toggle-featured"].label,
+                variant: "secondary",
+                onClick: () => {
+                    for (const id of selection.selectedIds) {
+                        const row = selection.rows.find((r) => r.id === id);
+                        if (row)
+                            void handleToggle(id, "featured", !row.featured);
+                    }
+                    selection.clearSelection();
+                },
+            },
+            {
+                id: "promote",
+                label: ACTIONS.ADMIN["toggle-promoted"].label,
+                variant: "secondary",
+                onClick: () => {
+                    for (const id of selection.selectedIds) {
+                        const row = selection.rows.find((r) => r.id === id);
+                        if (row)
+                            void handleToggle(id, "isPromoted", !row.isPromoted);
+                    }
+                    selection.clearSelection();
+                },
+            },
+            {
+                id: "sale",
+                label: ACTIONS.ADMIN["toggle-on-sale"].label,
+                variant: "secondary",
+                onClick: () => {
+                    for (const id of selection.selectedIds) {
+                        const row = selection.rows.find((r) => r.id === id);
+                        if (row)
+                            void handleToggle(id, "isOnSale", !row.isOnSale);
+                    }
+                    selection.clearSelection();
+                },
+            },
+        ],
+        renderRowActions: (row) => (_jsx(QuickEditMenu, { actions: [
+                {
+                    label: ACTIONS.ADMIN["approve-product"].label,
+                    onClick: () => handleQuickEdit(row.id, { status: "published" }),
+                    disabled: row.status === "published",
+                },
+                {
+                    label: ACTIONS.ADMIN["reject-product"].label,
+                    destructive: true,
+                    onClick: () => handleQuickEdit(row.id, { status: "rejected" }),
+                    disabled: row.status === "rejected",
+                },
+                {
+                    label: "Quick edit",
+                    separator: true,
+                    formTitle: "Quick Edit Product",
+                    fields: [
+                        {
+                            name: "status",
+                            label: "Status",
+                            type: "select",
+                            required: true,
+                            options: ADMIN_PRODUCT_STATUS_TABS.filter((t) => t.id !== "All").map((t) => ({
+                                value: t.id,
+                                label: t.label,
+                            })),
+                        },
+                        { name: "featured", label: "Featured", type: "toggle" },
+                        { name: "isPromoted", label: "Promoted", type: "toggle" },
+                    ],
+                    defaultValues: {
+                        status: row.status,
+                        featured: row.featured,
+                        isPromoted: row.isPromoted,
+                    },
+                    onSubmit: (vals) => handleQuickEdit(row.id, vals),
+                    submitLabel: "Save",
+                },
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_PRODUCT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: ADMIN_PRODUCT_LISTING_TYPE_TABS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) }), _jsx(FilterChipGroup, { label: "Sold", tabs: [
+                        { id: "", label: "Hide sold" },
+                        { id: "true", label: "Show sold" },
+                    ], value: pendingFilters.showSold ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showSold: id })), allId: "" })] })),
+        renderEditor: ({ editId, closePanel }) => (_jsx(AdminProductEditorView, { productId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
+        resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Product" : "Edit Product"),
     };
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: "feature", label: ACTIONS.ADMIN["toggle-featured"].label, variant: "secondary", onClick: () => { for (const id of selection.selectedIds)
-                        void handleToggle(id, "featured", !rows.find(r => r.id === id)?.featured); selection.clearSelection(); } },
-                { id: "promote", label: ACTIONS.ADMIN["toggle-promoted"].label, variant: "secondary", onClick: () => { for (const id of selection.selectedIds)
-                        void handleToggle(id, "isPromoted", !rows.find(r => r.id === id)?.isPromoted); selection.clearSelection(); } },
-                { id: "sale", label: ACTIONS.ADMIN["toggle-on-sale"].label, variant: "secondary", onClick: () => { for (const id of selection.selectedIds)
-                        void handleToggle(id, "isOnSale", !rows.find(r => r.id === id)?.isOnSale); selection.clearSelection(); } },
-            ] } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Products" }), _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); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
-                    { label: "Show sold", active: showSold, onChange: (next) => table.set("showSold", next ? "true" : "") },
-                ], extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Product"] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                    { id: "feature", label: ACTIONS.ADMIN["toggle-featured"].label, variant: "secondary", onClick: () => { for (const id of selection.selectedIds)
-                            void handleToggle(id, "featured", !rows.find(r => r.id === id)?.featured); selection.clearSelection(); } },
-                    { id: "promote", label: ACTIONS.ADMIN["toggle-promoted"].label, variant: "secondary", onClick: () => { for (const id of selection.selectedIds)
-                            void handleToggle(id, "isPromoted", !rows.find(r => r.id === id)?.isPromoted); selection.clearSelection(); } },
-                    { id: "sale", label: ACTIONS.ADMIN["toggle-on-sale"].label, variant: "secondary", onClick: () => { for (const id of selection.selectedIds)
-                            void handleToggle(id, "isOnSale", !rows.find(r => r.id === id)?.isOnSale); selection.clearSelection(); } },
-                ] }), 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-error-surface px-4 py-3 text-sm text-error dark:border-red-900/60", children: errorMessage })), view === "table" ? (_jsx(DataTable, { rows: rows, columns: [...buildBaseColumns(), flagColumn], isLoading: isLoading, emptyLabel: "No products found", onRowClick: (row) => openEditPanel(row.id), selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next ? selection.setSelectedIds(rows.map(r => r.id)) : selection.clearSelection(), renderRowActions: (row) => (_jsx(QuickEditMenu, { actions: [
-                                {
-                                    label: ACTIONS.ADMIN["approve-product"].label,
-                                    onClick: () => handleQuickEdit(row.id, { status: "published" }),
-                                    disabled: row.status === "published",
-                                },
-                                {
-                                    label: ACTIONS.ADMIN["reject-product"].label,
-                                    destructive: true,
-                                    onClick: () => handleQuickEdit(row.id, { status: "rejected" }),
-                                    disabled: row.status === "rejected",
-                                },
-                                {
-                                    label: "Quick edit",
-                                    separator: true,
-                                    formTitle: "Quick Edit Product",
-                                    fields: [
-                                        { name: "status", label: "Status", type: "select", required: true,
-                                            options: STATUS_OPTIONS.filter((t) => t.id !== "All").map((t) => ({ value: t.id, label: t.label })) },
-                                        { name: "featured", label: "Featured", type: "toggle" },
-                                        { name: "isPromoted", label: "Promoted", type: "toggle" },
-                                    ],
-                                    defaultValues: { status: row.status, featured: row.featured, isPromoted: row.isPromoted },
-                                    onSubmit: (vals) => handleQuickEdit(row.id, vals),
-                                    submitLabel: "Save",
-                                },
-                                {
-                                    label: "Open full editor",
-                                    separator: true,
-                                    onClick: () => openEditPanel(row.id),
-                                },
-                            ] })) })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No products found", onRowClick: (row) => openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsxs(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })] }), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Product" : "Edit Product", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminProductEditorView, { productId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })) })] }));
+    return _jsx(DataListingView, { config: config });
 }

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

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

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

@@ -1,61 +1,22 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { ListingToolbar, Pagination, ConfirmDeleteModal, RowActionMenu, useToast } from "../../../ui";
+import { ConfirmDeleteModal, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 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 }) {
+export function AdminReturnRequestsView(_props) {
     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 [view, setView] = useState("table");
-    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" });
+            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(orderId), { status: "refunded" });
         },
         onSuccess: () => {
             showToast("Return approved — order marked as Refunded.", "success");
@@ -70,7 +31,7 @@ export function AdminReturnRequestsView({ children: _children }) {
     });
     const rejectMutation = useMutation({
         mutationFn: async (orderId) => {
-            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(orderId), { status: "DELIVERED" });
+            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(orderId), { status: "delivered" });
         },
         onSuccess: () => {
             showToast("Return rejected — order reverted to Delivered.", "success");
@@ -83,23 +44,60 @@ export function AdminReturnRequestsView({ children: _children }) {
             showToast(err?.message ?? "Failed to reject return.", "error");
         },
     });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows ?? [], keyExtractor: (r) => r.id });
-    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); }, showTableView: true, view: view, onViewChange: (v) => setView(v), 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-error-surface px-4 py-3 text-sm text-error dark:border-red-900/60", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No return requests", renderRowActions: (row) => {
-                                    const rr = row;
-                                    return (_jsx(RowActionMenu, { actions: [
-                                            {
-                                                label: ACTIONS.ADMIN["approve-return"].label,
-                                                onClick: () => { setSelectedRow(rr); setApproveOpen(true); },
-                                            },
-                                            {
-                                                label: ACTIONS.ADMIN["reject-return"].label,
-                                                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: ACTIONS.ADMIN["approve-return"].confirmation.title, message: "The order status will be updated to Refunded. The buyer will be notified and the refund process will begin.", confirmText: ACTIONS.ADMIN["approve-return"].confirmation.confirmLabel, variant: "primary" }), _jsx(ConfirmDeleteModal, { isOpen: rejectOpen, onClose: () => { setRejectOpen(false); setSelectedRow(null); }, onConfirm: () => { if (selectedRow)
-                    rejectMutation.mutate(selectedRow.id); }, isDeleting: rejectMutation.isPending, title: ACTIONS.ADMIN["reject-return"].confirmation.title, message: "The order status will be reverted to Delivered. The buyer's return request will be declined.", confirmText: ACTIONS.ADMIN["reject-return"].confirmation.confirmLabel, variant: "danger" })] }));
+    const config = {
+        portal: "admin",
+        title: "Return Requests",
+        searchPlaceholder: "Search by order ID or buyer",
+        emptyLabel: "No return requests",
+        filterKeys: [],
+        defaultSort: "-createdAt",
+        queryKey: ["admin", "return-requests", "listing"],
+        endpoint: `${ADMIN_ENDPOINTS.ORDERS}?status=return_requested`,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+        ],
+        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),
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        buildFilters: () => undefined,
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ACTIONS.ADMIN["approve-return"].label,
+                    onClick: () => {
+                        setSelectedRow(row);
+                        setApproveOpen(true);
+                    },
+                },
+                {
+                    label: ACTIONS.ADMIN["reject-return"].label,
+                    destructive: true,
+                    onClick: () => {
+                        setSelectedRow(row);
+                        setRejectOpen(true);
+                    },
+                },
+            ] })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(ConfirmDeleteModal, { isOpen: approveOpen, onClose: () => {
+                    setApproveOpen(false);
+                    setSelectedRow(null);
+                }, onConfirm: () => {
+                    if (selectedRow)
+                        approveMutation.mutate(selectedRow.id);
+                }, isDeleting: approveMutation.isPending, title: ACTIONS.ADMIN["approve-return"].confirmation.title, message: "The order status will be updated to Refunded. The buyer will be notified and the refund process will begin.", confirmText: ACTIONS.ADMIN["approve-return"].confirmation.confirmLabel, variant: "primary" }), _jsx(ConfirmDeleteModal, { isOpen: rejectOpen, onClose: () => {
+                    setRejectOpen(false);
+                    setSelectedRow(null);
+                }, onConfirm: () => {
+                    if (selectedRow)
+                        rejectMutation.mutate(selectedRow.id);
+                }, isDeleting: rejectMutation.isPending, title: ACTIONS.ADMIN["reject-return"].confirmation.title, message: "The order status will be reverted to Delivered. The buyer's return request will be declined.", confirmText: ACTIONS.ADMIN["reject-return"].confirmation.confirmLabel, variant: "danger" })] }));
 }

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

@@ -1,7 +1,3 @@
-import React from "react";
-import type { ListingViewShellProps } from "../../../ui";
-export interface AdminReviewsViewProps extends ListingViewShellProps {
-    /** @deprecated Use `detailView` instead. */
-    renderDetailView?: () => React.ReactNode;
-}
-export declare function AdminReviewsView({ renderDetailView, children, ...props }: AdminReviewsViewProps): import("react/jsx-runtime").JSX.Element;
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminReviewsViewProps = ListingLayoutProps;
+export declare function AdminReviewsView({ children, ...props }: AdminReviewsViewProps): import("react/jsx-runtime").JSX.Element;