@mohasinac/appkit 2.7.59 → 2.8.0

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

@@ -1,73 +1,45 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, useToast, ListingFilterDrawer } from "../../../ui";
+import { FilterChipGroup, ListingLayout, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { QuickEditMenu } from "./QuickEditMenu";
-import { AdminViewCards } from "./AdminViewCards";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_ORDER_STATUS_TABS } from "../constants/filter-tabs";
-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 { AdminOrderEditorView } from "./AdminOrderEditorView";
-import { useBottomActions } from "../../layout";
-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 = ADMIN_ORDER_STATUS_TABS;
 export function AdminOrdersView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
     const { showToast } = useToast();
-    const [view, setView] = useState("table");
-    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({
+    const handleQuickStatus = useCallback(async (id, status) => {
+        try {
+            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(id), { status });
+            showToast("Order status updated.", "success");
+        }
+        catch (err) {
+            showToast(err?.message ?? "Failed to update order.", "error");
+            throw err;
+        }
+    }, [showToast]);
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const config = {
+        portal: "admin",
+        title: "Orders",
+        searchPlaceholder: "Search orders, buyers, or tracking IDs",
+        emptyLabel: "No orders found",
+        filterKeys: ["status"],
+        defaultSort: "-createdAt",
         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,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+        ],
         mapRows: (response) => toRecordArray(response.orders).map((item, index) => ({
             id: toStringValue(item.id, `order-${index}`),
             primary: `Order ${toStringValue(item.orderNumber ?? item.id, "-")}`,
@@ -77,57 +49,71 @@ 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,
-    });
-    const handleQuickStatus = useCallback(async (id, status) => {
-        try {
-            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(id), { status });
-            showToast("Order status updated.", "success");
-        }
-        catch (err) {
-            showToast(err?.message ?? "Failed to update order.", "error");
-            throw err;
-        }
-    }, [showToast]);
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    if (hasChildren) {
-        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
-    }
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: "mark-shipped", label: ACTIONS.ADMIN["mark-shipped"].label, variant: "secondary", onClick: () => { for (const id of selection.selectedIds)
-                        void handleQuickStatus(id, "SHIPPED"); selection.clearSelection(); } },
-                { id: "mark-delivered", label: ACTIONS.ADMIN["mark-delivered"].label, variant: "primary", onClick: () => { for (const id of selection.selectedIds)
-                        void handleQuickStatus(id, "DELIVERED"); selection.clearSelection(); } },
-                { id: "mark-cancelled", label: ACTIONS.ADMIN["cancel-order"].label, variant: "danger", onClick: () => { for (const id of selection.selectedIds)
-                        void handleQuickStatus(id, "CANCELLED"); selection.clearSelection(); } },
-            ] } } : {});
-    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); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                            { id: "mark-shipped", label: ACTIONS.ADMIN["mark-shipped"].label, variant: "secondary", onClick: () => { for (const id of selection.selectedIds)
-                                    void handleQuickStatus(id, "SHIPPED"); selection.clearSelection(); } },
-                            { id: "mark-delivered", label: ACTIONS.ADMIN["mark-delivered"].label, variant: "primary", onClick: () => { for (const id of selection.selectedIds)
-                                    void handleQuickStatus(id, "DELIVERED"); selection.clearSelection(); } },
-                            { id: "mark-cancelled", label: ACTIONS.ADMIN["cancel-order"].label, variant: "danger", onClick: () => { for (const id of selection.selectedIds)
-                                    void handleQuickStatus(id, "CANCELLED"); 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, isLoading: isLoading, emptyLabel: "No orders found", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next ? selection.setSelectedIds(rows.map(r => r.id)) : selection.clearSelection(), renderRowActions: (row) => (_jsx(QuickEditMenu, { actions: [
-                                        {
-                                            label: "View full details",
-                                            onClick: () => { setSelectedRow(row); setDrawerOpen(true); },
-                                        },
-                                        {
-                                            label: "Update status",
-                                            separator: true,
-                                            formTitle: "Update Order Status",
-                                            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 })) },
-                                            ],
-                                            defaultValues: { status: row.status },
-                                            onSubmit: (vals) => handleQuickStatus(row.id, String(vals.status ?? "")),
-                                            submitLabel: "Update",
-                                        },
-                                    ] })) })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No orders found", onRowClick: (row) => { setSelectedRow(row); setDrawerOpen(true); }, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }) })] }), _jsx(AdminOrderEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), orderId: selectedRow?.id, orderLabel: selectedRow?.primary, currentStatus: selectedRow?.status })] }));
+        buildFilters: (f) => (f.status && f.status !== "All" ? `status==${f.status}` : undefined),
+        buildBulkActions: (selection) => [
+            {
+                id: "mark-shipped",
+                label: ACTIONS.ADMIN["mark-shipped"].label,
+                variant: "secondary",
+                onClick: () => {
+                    for (const id of selection.selectedIds)
+                        void handleQuickStatus(id, "shipped");
+                    selection.clearSelection();
+                },
+            },
+            {
+                id: "mark-delivered",
+                label: ACTIONS.ADMIN["mark-delivered"].label,
+                variant: "primary",
+                onClick: () => {
+                    for (const id of selection.selectedIds)
+                        void handleQuickStatus(id, "delivered");
+                    selection.clearSelection();
+                },
+            },
+            {
+                id: "mark-cancelled",
+                label: ACTIONS.ADMIN["cancel-order"].label,
+                variant: "danger",
+                onClick: () => {
+                    for (const id of selection.selectedIds)
+                        void handleQuickStatus(id, "cancelled");
+                    selection.clearSelection();
+                },
+            },
+        ],
+        renderRowActions: (row) => (_jsx(QuickEditMenu, { actions: [
+                {
+                    label: "View full details",
+                    onClick: () => {
+                        setSelectedRow(row);
+                        setDrawerOpen(true);
+                    },
+                },
+                {
+                    label: "Update status",
+                    separator: true,
+                    formTitle: "Update Order Status",
+                    fields: [
+                        {
+                            name: "status",
+                            label: "Status",
+                            type: "select",
+                            required: true,
+                            options: ADMIN_ORDER_STATUS_TABS.filter((t) => t.id !== "All").map((t) => ({
+                                value: t.id,
+                                label: t.label,
+                            })),
+                        },
+                    ],
+                    defaultValues: { status: row.status },
+                    onSubmit: (vals) => handleQuickStatus(row.id, String(vals.status ?? "")),
+                    submitLabel: "Update",
+                },
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_ORDER_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminOrderEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), orderId: selectedRow?.id, orderLabel: selectedRow?.primary, currentStatus: selectedRow?.status })] }));
 }

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

@@ -1,4 +1,3 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface AdminPayoutsViewProps extends ListingViewShellProps {
-}
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminPayoutsViewProps = ListingLayoutProps;
 export declare function AdminPayoutsView({ children, ...props }: AdminPayoutsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,83 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
+import React, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, Button, Form, FormActions, FilterChipGroup, Input, ListingToolbar, ListingViewShell, Modal, Pagination, RowActionMenu, useToast, ListingFilterDrawer } from "../../../ui";
+import { Button, FilterChipGroup, Form, FormActions, Input, ListingLayout, Modal, RowActionMenu, useToast, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_PAYOUT_STATUS_TABS } from "../constants/filter-tabs";
 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";
-import { useBottomActions } from "../../layout";
-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 = ADMIN_PAYOUT_STATUS_TABS;
 export function AdminPayoutsView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     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.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,
-    });
     const markPaid = useMutation({
         mutationFn: () => {
             if (!selectedPayoutId)
@@ -119,31 +56,54 @@ export function AdminPayoutsView({ children, ...props }) {
         setMarkPaidOpen(false);
         setTransactionId("");
     };
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    if (hasChildren) {
-        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { 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 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); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleExportCsv, children: ACTIONS.ADMIN["export-csv"].label }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                            { id: "mark-paid", label: ACTIONS.ADMIN["mark-paid"].label, variant: "primary", onClick: () => { 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 })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No payouts found", renderRowActions: (row) => {
-                                    const pr = row;
-                                    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                                                { id: "mark-paid", label: ACTIONS.ADMIN["mark-paid"].label, variant: "primary", onClick: () => { selection.clearSelection(); } },
-                                            ] } } : {});
-                                    return (_jsx(RowActionMenu, { actions: [
-                                            {
-                                                label: ACTIONS.ADMIN["grant-payout"].label,
-                                                onClick: () => {
-                                                    setSelectedPayoutId(pr.id);
-                                                    setMarkPaidOpen(true);
-                                                },
-                                                disabled: pr.status.toLowerCase() === "paid" ||
-                                                    pr.status.toLowerCase() === "cancelled",
-                                            },
-                                        ] }));
-                                } })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }) })] }), _jsx(Modal, { isOpen: markPaidOpen, onClose: closePaidModal, title: "Mark payout as paid", children: _jsxs(Form, { className: "space-y-4", onSubmit: (e) => {
+    const config = {
+        portal: "admin",
+        title: "Payouts",
+        searchPlaceholder: "Search stores, payout IDs, or order groups",
+        emptyLabel: "No payouts found",
+        filterKeys: ["status"],
+        defaultSort: "-createdAt",
+        queryKey: ["admin", "payouts", "listing"],
+        endpoint: ADMIN_ENDPOINTS.PAYOUTS,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+            { value: "-amount", label: "Highest amount" },
+        ],
+        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.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,
+        buildFilters: (state) => state.status && state.status !== "All" ? `status==${state.status}` : undefined,
+        toolbarExtra: (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleExportCsv, children: ACTIONS.ADMIN["export-csv"].label })),
+        buildBulkActions: (selection) => [
+            {
+                id: "mark-paid",
+                label: ACTIONS.ADMIN["mark-paid"].label,
+                variant: "primary",
+                onClick: () => selection.clearSelection(),
+            },
+        ],
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ACTIONS.ADMIN["grant-payout"].label,
+                    onClick: () => {
+                        setSelectedPayoutId(row.id);
+                        setMarkPaidOpen(true);
+                    },
+                    disabled: row.status.toLowerCase() === "paid" || row.status.toLowerCase() === "cancelled",
+                },
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_PAYOUT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _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/AdminPrizeDrawsView.d.ts

@@ -1,4 +1,3 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface AdminPrizeDrawsViewProps extends ListingViewShellProps {
-}
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminPrizeDrawsViewProps = ListingLayoutProps;
 export declare function AdminPrizeDrawsView({ children, ...props }: AdminPrizeDrawsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,29 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
+import React from "react";
 import { Pencil } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { Alert, Badge, BulkActionBar, Button, FilterChipGroup, ListingToolbar, ListingViewShell, Pagination, Text, ListingFilterDrawer } from "../../../ui";
+import { Badge, Button, FilterChipGroup, ListingLayout, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_PRODUCT_STATUS_TABS } from "../constants/filter-tabs";
 import { ROUTES } from "../../../constants";
-import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
-const DEFAULT_SORT = "-createdAt";
-// Hardcoded sieve clause — this view only ever shows prize draws.
-const LISTING_TYPE_FILTER = "listingType==prize-draw";
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-    { value: "title", label: "Title A–Z" },
-    { value: "prizeDrawEndDate", label: "Draw Date Soon" },
-];
-const STATUS_OPTIONS = ADMIN_PRODUCT_STATUS_TABS;
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 const STATUS_VARIANT = {
     published: "success",
     active: "success",
@@ -50,7 +35,7 @@ const PRIZE_DRAW_COLUMNS = [
         header: "Status",
         sortable: true,
         className: "w-28",
-        render: (row) => (_jsx(Badge, { variant: STATUS_VARIANT[row.status] ?? "default", children: row.status })),
+        render: (row) => _jsx(Badge, { variant: STATUS_VARIANT[row.status] ?? "default", children: row.status }),
     },
     {
         key: "drawDate",
@@ -67,49 +52,25 @@ const PRIZE_DRAW_COLUMNS = [
     },
 ];
 export function AdminPrizeDrawsView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
-    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 statusFilter = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
-    const filters = [LISTING_TYPE_FILTER, statusFilter].filter(Boolean).join(",") || undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const config = {
+        portal: "admin",
+        title: "Prize Draws",
+        searchPlaceholder: "Search prize draws by name or store…",
+        emptyLabel: "No prize draws found",
+        filterKeys: ["status"],
+        defaultSort: "-createdAt",
         queryKey: ["admin", "prize-draws", "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,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+            { value: "title", label: "Title A–Z" },
+            { value: "prizeDrawEndDate", label: "Draw Date Soon" },
+        ],
+        columns: PRIZE_DRAW_COLUMNS,
         mapRows: (response) => toRecordArray(response.items).map((item, index) => {
             const priceRaw = typeof item.price === "number" ? item.price : 0;
             return {
@@ -126,19 +87,21 @@ export function AdminPrizeDrawsView({ children, ...props }) {
             };
         }),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    if (hasChildren) {
-        return (_jsx(ListingViewShell, { portal: "admin", ...props, children: children }));
-    }
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: "delete", label: ACTIONS.ADMIN["delete-prize-draw"].label, variant: "secondary", onClick: () => { selection.clearSelection(); } },
-            ] } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search prize draws by name or store\u2026", 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 }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                    { id: "delete", label: ACTIONS.ADMIN["delete-prize-draw"].label, variant: "secondary", onClick: () => { selection.clearSelection(); } },
-                ] }), totalPages > 1 && (_jsx("div", { className: "sticky z-10 flex justify-center bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm border-b border-[var(--appkit-color-border)] px-3 py-1.5", style: { top: "calc(var(--header-height, 0px) + 44px)" }, 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(Alert, { variant: "error", className: "mb-4", children: errorMessage })), _jsx(DataTable, { columns: PRIZE_DRAW_COLUMNS, rows: rows, isLoading: isLoading, emptyLabel: "No prize draws found", getRowHref: (row) => String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)), renderRowActions: (row) => (_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsx("a", { href: String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)), "aria-label": "Edit", children: _jsx(Pencil, { className: "w-4 h-4" }) }) })) })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }) })] }));
+        buildFilters: (state) => {
+            const status = state.status && state.status !== "All" ? `status==${state.status}` : null;
+            return ["listingType==prize-draw", status].filter(Boolean).join(",");
+        },
+        getRowHref: (row) => String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)),
+        buildBulkActions: (selection) => [
+            {
+                id: "delete",
+                label: ACTIONS.ADMIN["delete-prize-draw"].label,
+                variant: "secondary",
+                onClick: () => selection.clearSelection(),
+            },
+        ],
+        renderRowActions: (row) => (_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsx("a", { href: String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)), "aria-label": "Edit", children: _jsx(Pencil, { className: "w-4 h-4" }) }) })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_PRODUCT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return _jsx(DataListingView, { config: config });
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Button, Card, CardBody, ConfirmDeleteModal, DynamicSelect, InlineCreateSelect, Form, Stack, StackedViewShell, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast, } from "../../../ui";
+import { Button, Card, CardBody, ConfirmDeleteModal, PaginatedSelect, 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";
@@ -145,9 +145,9 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
     const formContent = (_jsxs(Form, { id: "product-editor-form", onSubmit: (e) => {
             e.preventDefault();
             saveMutation.mutate();
-        }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Listing Type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [(!enabledListingTypes || enabledListingTypes.includes("standard")) && (_jsx(TabsTrigger, { value: "standard", children: "Standard" })), (!enabledListingTypes || enabledListingTypes.includes("auction")) && (_jsx(TabsTrigger, { value: "auction", children: "Auction" })), (!enabledListingTypes || enabledListingTypes.includes("pre-order")) && (_jsx(TabsTrigger, { value: "preorder", children: "Pre-order" }))] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Classification" }), _jsxs("div", { className: "space-y-4", children: [_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, renderGroupSettings: isEdit && productId
+        }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Listing Type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [(!enabledListingTypes || enabledListingTypes.includes("standard")) && (_jsx(TabsTrigger, { value: "standard", children: "Standard" })), (!enabledListingTypes || enabledListingTypes.includes("auction")) && (_jsx(TabsTrigger, { value: "auction", children: "Auction" })), (!enabledListingTypes || enabledListingTypes.includes("pre-order")) && (_jsx(TabsTrigger, { value: "preorder", children: "Pre-order" }))] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Classification" }), _jsxs("div", { className: "space-y-4", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(PaginatedSelect, { 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, renderGroupSettings: isEdit && productId
                                     ? (p) => (_jsx(GroupSettingsPanel, { productId: productId, productSlug: p.slug ?? productId, groupId: p.groupId, isGroupParent: p.isGroupParent, groupParentSlug: p.groupParentSlug, groupChildSlugs: p.groupChildSlugs, groupTitle: p.groupTitle, isAuction: modeFromProduct(p) === "auction", storeProductsEndpoint: "/api/admin/products", onGroupChanged: () => productQuery.refetch() }))
-                                    : undefined, 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 lg:hidden", 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: () => setDeleteOpen(true), children: "Delete product" }))] })] }, "product-form"));
+                                    : undefined, 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(PaginatedSelect, { 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(PaginatedSelect, { 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 lg:hidden", 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: () => setDeleteOpen(true), children: "Delete product" }))] })] }, "product-form"));
     if (embedded) {
         return _jsx("div", { className: "overflow-y-auto p-4", children: formContent });
     }