@mohasinac/appkit 2.6.3 → 2.6.5

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

@@ -3,8 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState, useCallback } from "react";
 import { X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { ListingToolbar, Pagination, ListingViewShell, RowActionMenu } from "../../../ui";
+import { FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, RowActionMenu } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ADMIN_USER_STATUS_TABS, ADMIN_USER_ROLE_TABS } from "../constants/filter-tabs";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
 import { DataTable } from "./DataTable";
 import { AdminUserEditorView } from "./AdminUserEditorView";
@@ -16,13 +17,22 @@ const SORT_OPTIONS = [
     { value: "createdAt", label: "Oldest" },
     { value: "displayName", label: "Name A–Z" },
 ];
-const STATUS_OPTIONS = ["All", "Active", "Disabled"];
-const ROLE_OPTIONS = ["All", "admin", "seller", "buyer", "moderator"];
+const STATUS_OPTIONS = ADMIN_USER_STATUS_TABS;
+const ROLE_OPTIONS = ADMIN_USER_ROLE_TABS;
 export function AdminUsersView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get("q") || "");
     const [filterOpen, setFilterOpen] = useState(false);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const toggleSelect = (id, next) => setSelectedIds((prev) => {
+        const s = new Set(prev);
+        if (next)
+            s.add(id);
+        else
+            s.delete(id);
+        return s;
+    });
     const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState(null);
@@ -93,8 +103,8 @@ export function AdminUsersView({ children, ...props }) {
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search users, email, or seller handles", 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 users found", renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [{
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search users, email, or seller handles", 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 users found", selectedIds: selectedIds, onToggleSelect: toggleSelect, onToggleSelectAll: (next) => setSelectedIds(next ? new Set(rows.map((r) => r.id)) : new Set()), renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [{
                                             label: "Manage",
                                             onClick: () => { setSelectedRow(row); setDrawerOpen(true); },
-                                        }] })) })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _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: "Role" }), _jsx("div", { className: "flex flex-wrap gap-2", children: ROLE_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, role: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.role || "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(AdminUserEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), userId: selectedRow?.id, displayName: selectedRow?.primary, currentRole: toStringValue(selectedRow?._raw?.role, "user"), currentIsDisabled: selectedRow?.status === "Disabled", currentEmailVerified: Boolean(selectedRow?._raw?.emailVerified), ownedStoreId: toStringValue(selectedRow?._raw?.storeId, "") || undefined, ownedStoreName: toStringValue(selectedRow?._raw?.storeName, "") || undefined })] }));
+                                        }] })) })] }), 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: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Role", tabs: ROLE_OPTIONS, value: pendingFilters.role ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, role: id })) })] }), _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(AdminUserEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), userId: selectedRow?.id, displayName: selectedRow?.primary, currentRole: toStringValue(selectedRow?._raw?.role, "user"), currentIsDisabled: selectedRow?.status === "Disabled", currentEmailVerified: Boolean(selectedRow?._raw?.emailVerified), ownedStoreId: toStringValue(selectedRow?._raw?.storeId, "") || undefined, ownedStoreName: toStringValue(selectedRow?._raw?.storeName, "") || undefined })] }));
 }

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

@@ -17,6 +17,15 @@ export function AdminWishlistsView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const toggleSelect = (id, next) => setSelectedIds((prev) => {
+        const s = new Set(prev);
+        if (next)
+            s.add(id);
+        else
+            s.delete(id);
+        return s;
+    });
     const resetAll = useCallback(() => {
         table.setMany({ q: "", sort: "" });
         setSearchInput("");
@@ -51,5 +60,5 @@ export function AdminWishlistsView({ children, ...props }) {
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search by user ID", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No user wishlists found" })] })] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search by user ID", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No user wishlists found", selectedIds: selectedIds, onToggleSelect: toggleSelect, onToggleSelectAll: (next) => setSelectedIds(next ? new Set(rows.map((r) => r.id)) : new Set()) })] })] }));
 }

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

@@ -16,8 +16,12 @@ interface DataTableProps<T extends {
     currentPage?: number;
     onPageChange?: (page: number) => void;
     emptyLabel?: string;
+    /** When provided, renders a leading checkbox column + long-press to toggle. */
+    selectedIds?: Set<string>;
+    onToggleSelect?: (id: string, selected: boolean) => void;
+    onToggleSelectAll?: (nextAllSelected: boolean) => void;
 }
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages, currentPage, onPageChange, emptyLabel, getRowHref, onRowClick, renderRowActions, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages, currentPage, onPageChange, emptyLabel, getRowHref, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Div, Span } from "../../../ui";
+import { BaseListingCard, Button, Div, Span } from "../../../ui";
+import { useLongPress } from "../../../react/hooks/useLongPress";
 const DEFAULT_COLUMNS = [
     {
         key: "primary",
@@ -20,24 +21,27 @@ const DEFAULT_COLUMNS = [
         render: (row) => _jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: String(row.updatedAt ?? "") }),
     },
 ];
-export function DataTable({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No records found", getRowHref, onRowClick, renderRowActions, }) {
+function SelectableRow({ row, columns, isSelected, onToggle, renderRowActions, onRowClick, rowHref, selectionEnabled, }) {
+    const longPress = useLongPress(() => onToggle?.(row.id, !isSelected));
+    const handleClick = onRowClick
+        ? () => onRowClick(row)
+        : rowHref
+            ? () => { window.location.href = rowHref; }
+            : undefined;
+    const handleKeyDown = handleClick
+        ? (event) => {
+            if (event.key === "Enter" || event.key === " ")
+                handleClick();
+        }
+        : undefined;
+    const isInteractive = Boolean(onRowClick ?? rowHref);
+    return (_jsxs("tr", { onClick: handleClick, onKeyDown: handleKeyDown, role: isInteractive ? "link" : undefined, tabIndex: isInteractive ? 0 : undefined, onMouseDown: selectionEnabled && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: selectionEnabled && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: selectionEnabled && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: selectionEnabled && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: selectionEnabled && !isSelected ? longPress.onTouchEnd : undefined, className: `border-b border-neutral-100 dark:border-slate-700 hover:bg-neutral-50 dark:hover:bg-slate-800 ${isInteractive ? "cursor-pointer" : ""} ${isSelected ? "bg-primary/5 dark:bg-primary/10" : ""}`, children: [selectionEnabled && (_jsx("td", { className: "relative w-10 px-2 py-3", onClick: (e) => e.stopPropagation(), children: _jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onToggle?.(row.id, !isSelected); }, label: isSelected ? "Deselect row" : "Select row", position: "top-1/2 left-2 -translate-y-1/2" }) })), columns.map((col) => (_jsx("td", { className: `px-4 py-3 text-neutral-700 dark:text-zinc-300 ${col.className ?? ""}`, children: col.render
+                    ? col.render(row)
+                    : String(row[col.key] ?? "") }, col.key))), renderRowActions && (_jsx("td", { className: "px-2 py-3", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] }));
+}
+export function DataTable({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No records found", getRowHref, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }) {
     const columns = (columnsProp ?? DEFAULT_COLUMNS);
-    return (_jsxs(Div, { className: "overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900", children: [_jsx(Div, { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-neutral-200 dark:border-slate-700 bg-neutral-50 dark:bg-slate-800", children: [columns.map((col) => (_jsxs("th", { scope: "col", onClick: col.sortable && onSort ? () => onSort(col.key) : undefined, className: `px-4 py-3 text-left font-semibold text-neutral-900 dark:text-zinc-100 ${col.sortable && onSort ? "cursor-pointer select-none hover:text-primary" : ""} ${col.className ?? ""}`, children: [col.header, col.sortable && sortKey === col.key && (_jsx(Span, { className: "ml-1", children: sortDir === "asc" ? "↑" : "↓" }))] }, col.key))), renderRowActions && _jsx("th", { scope: "col", className: "w-12 px-2 py-3" })] }) }), _jsx("tbody", { children: isLoading ? (Array.from({ length: 5 }).map((_, i) => (_jsx("tr", { className: "border-b border-neutral-100 dark:border-slate-700", children: columns.map((col) => (_jsx("td", { className: "px-4 py-3", children: _jsx(Div, { className: "h-4 w-full animate-pulse rounded bg-neutral-200 dark:bg-slate-700" }) }, col.key))) }, i)))) : rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "px-4 py-12 text-center text-neutral-500 dark:text-zinc-400", children: emptyLabel }) })) : (rows.map((row) => {
-                                const rowHref = getRowHref?.(row);
-                                const handleClick = onRowClick
-                                    ? () => onRowClick(row)
-                                    : rowHref
-                                        ? () => { window.location.href = rowHref; }
-                                        : undefined;
-                                const handleKeyDown = handleClick
-                                    ? (event) => {
-                                        if (event.key === "Enter" || event.key === " ")
-                                            handleClick();
-                                    }
-                                    : undefined;
-                                const isInteractive = Boolean(onRowClick ?? rowHref);
-                                return (_jsxs("tr", { onClick: handleClick, onKeyDown: handleKeyDown, role: isInteractive ? "link" : undefined, tabIndex: isInteractive ? 0 : undefined, className: `border-b border-neutral-100 dark:border-slate-700 hover:bg-neutral-50 dark:hover:bg-slate-800 ${isInteractive ? "cursor-pointer" : ""}`, children: [columns.map((col) => (_jsx("td", { className: `px-4 py-3 text-neutral-700 dark:text-zinc-300 ${col.className ?? ""}`, children: col.render
-                                                ? col.render(row)
-                                                : String(row[col.key] ?? "") }, col.key))), renderRowActions && (_jsx("td", { className: "px-2 py-3", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] }, row.id));
-                            })) })] }) }), totalPages > 1 && onPageChange && (_jsx(Div, { className: "flex items-center justify-end gap-2 border-t border-neutral-200 dark:border-slate-700 px-4 py-3", children: Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (_jsx(Button, { onClick: () => onPageChange(p), variant: p === currentPage ? "primary" : "ghost", size: "sm", className: `h-8 w-8 rounded text-xs font-medium transition ${p === currentPage ? "bg-neutral-900 text-white" : "text-neutral-600 dark:text-zinc-300 hover:bg-neutral-100 dark:hover:bg-slate-800"}`, children: p }, p))) }))] }));
+    const selectionEnabled = Boolean(onToggleSelect);
+    const allRowsSelected = selectionEnabled && rows.length > 0 && rows.every((r) => selectedIds?.has(r.id));
+    return (_jsxs(Div, { className: "overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900", children: [_jsx(Div, { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-neutral-200 dark:border-slate-700 bg-neutral-50 dark:bg-slate-800", children: [selectionEnabled && (_jsx("th", { scope: "col", className: "w-10 px-2 py-3", children: onToggleSelectAll && (_jsx("input", { type: "checkbox", "aria-label": allRowsSelected ? "Deselect all" : "Select all", checked: allRowsSelected, onChange: () => onToggleSelectAll(!allRowsSelected), className: "h-4 w-4 rounded border-zinc-300 dark:border-slate-600 accent-zinc-900 dark:accent-zinc-100" })) })), columns.map((col) => (_jsxs("th", { scope: "col", onClick: col.sortable && onSort ? () => onSort(col.key) : undefined, className: `px-4 py-3 text-left font-semibold text-neutral-900 dark:text-zinc-100 ${col.sortable && onSort ? "cursor-pointer select-none hover:text-primary" : ""} ${col.className ?? ""}`, children: [col.header, col.sortable && sortKey === col.key && (_jsx(Span, { className: "ml-1", children: sortDir === "asc" ? "↑" : "↓" }))] }, col.key))), renderRowActions && _jsx("th", { scope: "col", className: "w-12 px-2 py-3" })] }) }), _jsx("tbody", { children: isLoading ? (Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "border-b border-neutral-100 dark:border-slate-700", children: [selectionEnabled && _jsx("td", { className: "w-10 px-2 py-3" }), columns.map((col) => (_jsx("td", { className: "px-4 py-3", children: _jsx(Div, { className: "h-4 w-full animate-pulse rounded bg-neutral-200 dark:bg-slate-700" }) }, col.key)))] }, i)))) : rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectionEnabled ? 1 : 0) + (renderRowActions ? 1 : 0), className: "px-4 py-12 text-center text-neutral-500 dark:text-zinc-400", children: emptyLabel }) })) : (rows.map((row) => (_jsx(SelectableRow, { row: row, columns: columns, isSelected: selectedIds?.has(row.id) ?? false, onToggle: onToggleSelect, renderRowActions: renderRowActions, onRowClick: onRowClick, rowHref: getRowHref?.(row), selectionEnabled: selectionEnabled }, row.id)))) })] }) }), totalPages > 1 && onPageChange && (_jsx(Div, { className: "flex items-center justify-end gap-2 border-t border-neutral-200 dark:border-slate-700 px-4 py-3", children: Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (_jsx(Button, { onClick: () => onPageChange(p), variant: p === currentPage ? "primary" : "ghost", size: "sm", className: `h-8 w-8 rounded text-xs font-medium transition ${p === currentPage ? "bg-neutral-900 text-white" : "text-neutral-600 dark:text-zinc-300 hover:bg-neutral-100 dark:hover:bg-slate-800"}`, children: p }, p))) }))] }));
 }

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

@@ -30,6 +30,12 @@ export { AdminBrandsView } from "./AdminBrandsView";
 export type { AdminBrandsViewProps } from "./AdminBrandsView";
 export { AdminBrandEditorView } from "./AdminBrandEditorView";
 export type { AdminBrandEditorViewProps } from "./AdminBrandEditorView";
+export { AdminPrizeDrawsView } from "./AdminPrizeDrawsView";
+export type { AdminPrizeDrawsViewProps } from "./AdminPrizeDrawsView";
+export { AdminBundlesView } from "./AdminBundlesView";
+export type { AdminBundlesViewProps } from "./AdminBundlesView";
+export { AdminBundleEditorView } from "./AdminBundleEditorView";
+export type { AdminBundleEditorViewProps } from "./AdminBundleEditorView";
 export { AdminSublistingCategoriesView } from "./AdminSublistingCategoriesView";
 export { AdminSublistingCategoryEditorView } from "./AdminSublistingCategoryEditorView";
 export type { AdminSublistingCategoryEditorViewProps } from "./AdminSublistingCategoryEditorView";

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

@@ -15,6 +15,11 @@ export { AdminCategoriesView } from "./AdminCategoriesView";
 export { AdminCategoryEditorView } from "./AdminCategoryEditorView";
 export { AdminBrandsView } from "./AdminBrandsView";
 export { AdminBrandEditorView } from "./AdminBrandEditorView";
+// SB4-E 2026-05-14 — admin prize draws listing view.
+export { AdminPrizeDrawsView } from "./AdminPrizeDrawsView";
+// S-SBUNI-4 2026-05-13 — admin bundle CRUD views.
+export { AdminBundlesView } from "./AdminBundlesView";
+export { AdminBundleEditorView } from "./AdminBundleEditorView";
 export { AdminSublistingCategoriesView } from "./AdminSublistingCategoriesView";
 export { AdminSublistingCategoryEditorView } from "./AdminSublistingCategoryEditorView";
 export { AdminFeaturesView } from "./AdminFeaturesView";

package/dist/features/admin/constants/filter-tabs.d.ts

@@ -0,0 +1,435 @@
+/**
+ * Admin filter-chip tab sets (SB10-C completion, S8 2026-05-13).
+ *
+ * Match current view-filter values exactly so migrating an inline
+ * `STATUS_OPTIONS` array to one of these constants is a behaviour-preserving
+ * rename. The `ALL_TAB` sentinel collapses to an empty filter string when
+ * clicked.
+ *
+ * Each entry is a typed `{ id, label }` row so views render with one
+ * primitive and stay in sync when statuses are added.
+ */
+export interface AdminFilterTab {
+    /** Filter value — empty when `id === "All"`. */
+    id: string;
+    /** Display text. */
+    label: string;
+}
+export declare const ALL_TAB: {
+    readonly id: "All";
+    readonly label: "All";
+};
+/** Admin > Products — listing status filter chip set. */
+export declare const ADMIN_PRODUCT_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "pending";
+    readonly label: "Pending";
+}, {
+    readonly id: "published";
+    readonly label: "Published";
+}, {
+    readonly id: "draft";
+    readonly label: "Draft";
+}, {
+    readonly id: "archived";
+    readonly label: "Archived";
+}];
+/** Admin > Products — listing-type filter chip set. Legacy label-as-id IDs
+ *  preserved so the existing Sieve filter values keep matching. */
+export declare const ADMIN_PRODUCT_LISTING_TYPE_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "Products";
+    readonly label: "Products";
+}, {
+    readonly id: "Auctions";
+    readonly label: "Auctions";
+}, {
+    readonly id: "Pre-orders";
+    readonly label: "Pre-orders";
+}, {
+    readonly id: "Prize Draws";
+    readonly label: "Prize Draws";
+}];
+/** Admin > Blog — post status filter chip set. */
+export declare const ADMIN_BLOG_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "published";
+    readonly label: "Published";
+}, {
+    readonly id: "draft";
+    readonly label: "Draft";
+}, {
+    readonly id: "archived";
+    readonly label: "Archived";
+}];
+/** Admin > Users — account-state filter chip set. */
+export declare const ADMIN_USER_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "Active";
+    readonly label: "Active";
+}, {
+    readonly id: "Disabled";
+    readonly label: "Disabled";
+}];
+/** Admin > Users — role filter chip set. */
+export declare const ADMIN_USER_ROLE_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "admin";
+    readonly label: "Admin";
+}, {
+    readonly id: "seller";
+    readonly label: "Seller";
+}, {
+    readonly id: "buyer";
+    readonly label: "Buyer";
+}, {
+    readonly id: "moderator";
+    readonly label: "Moderator";
+}];
+/** Admin > Stores — seller-onboarding state filter chip set. */
+export declare const ADMIN_STORE_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "pending";
+    readonly label: "Pending";
+}, {
+    readonly id: "suspended";
+    readonly label: "Suspended";
+}, {
+    readonly id: "rejected";
+    readonly label: "Rejected";
+}];
+/** Admin > Payouts — payout state filter chip set. Uppercase IDs match the
+ *  `PayoutDocument.status` enum on the server. */
+export declare const ADMIN_PAYOUT_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "PENDING";
+    readonly label: "Pending";
+}, {
+    readonly id: "PROCESSING";
+    readonly label: "Processing";
+}, {
+    readonly id: "PAID";
+    readonly label: "Paid";
+}, {
+    readonly id: "FAILED";
+    readonly label: "Failed";
+}];
+/** Admin > Orders — order-state filter chip set. Uppercase IDs match the
+ *  `OrderDocument.status` enum on the server. */
+export declare const ADMIN_ORDER_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "PENDING";
+    readonly label: "Pending";
+}, {
+    readonly id: "PROCESSING";
+    readonly label: "Processing";
+}, {
+    readonly id: "SHIPPED";
+    readonly label: "Shipped";
+}, {
+    readonly id: "DELIVERED";
+    readonly label: "Delivered";
+}, {
+    readonly id: "CANCELLED";
+    readonly label: "Cancelled";
+}, {
+    readonly id: "REFUNDED";
+    readonly label: "Refunded";
+}, {
+    readonly id: "RETURN_REQUESTED";
+    readonly label: "Return Requested";
+}];
+/** Admin > Reviews — moderation state filter chip set. */
+export declare const ADMIN_REVIEW_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "approved";
+    readonly label: "Approved";
+}, {
+    readonly id: "pending";
+    readonly label: "Pending";
+}, {
+    readonly id: "rejected";
+    readonly label: "Rejected";
+}];
+/** Admin > Reviews — star-rating filter chip set. */
+export declare const ADMIN_REVIEW_RATING_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "5";
+    readonly label: "5★";
+}, {
+    readonly id: "4";
+    readonly label: "4★";
+}, {
+    readonly id: "3";
+    readonly label: "3★";
+}, {
+    readonly id: "2";
+    readonly label: "2★";
+}, {
+    readonly id: "1";
+    readonly label: "1★";
+}];
+/** Admin > Bids — bid-state filter chip set. */
+export declare const ADMIN_BID_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "outbid";
+    readonly label: "Outbid";
+}, {
+    readonly id: "won";
+    readonly label: "Won";
+}, {
+    readonly id: "cancelled";
+    readonly label: "Cancelled";
+}];
+/** Admin > Contact — submission triage state filter chip set. */
+export declare const ADMIN_CONTACT_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "new";
+    readonly label: "New";
+}, {
+    readonly id: "read";
+    readonly label: "Read";
+}, {
+    readonly id: "resolved";
+    readonly label: "Resolved";
+}];
+/** Admin > Newsletter — subscription state filter chip set. */
+export declare const ADMIN_NEWSLETTER_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "unsubscribed";
+    readonly label: "Unsubscribed";
+}];
+/** Admin > Event Entries — entry-state filter chip set. Uppercase IDs match
+ *  the canonical `EventEntryDocument.status` enum. */
+export declare const ADMIN_EVENT_ENTRY_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "CONFIRMED";
+    readonly label: "Confirmed";
+}, {
+    readonly id: "WAITLISTED";
+    readonly label: "Waitlisted";
+}, {
+    readonly id: "CANCELLED";
+    readonly label: "Cancelled";
+}];
+/** Admin > Events — event-state filter chip set. */
+export declare const ADMIN_EVENT_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "published";
+    readonly label: "Published";
+}, {
+    readonly id: "draft";
+    readonly label: "Draft";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "ended";
+    readonly label: "Ended";
+}];
+/** Admin > Carts — cart-ownership filter chip set. */
+export declare const ADMIN_CART_OWNERSHIP_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "guest";
+    readonly label: "Guest";
+}, {
+    readonly id: "auth";
+    readonly label: "Authenticated";
+}];
+/** Admin > Coupons — coupon-type filter chip set. Matches the
+ *  `CouponDocument.type` discriminator. */
+export declare const ADMIN_COUPON_TYPE_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "percentage";
+    readonly label: "Percentage";
+}, {
+    readonly id: "fixed";
+    readonly label: "Fixed";
+}, {
+    readonly id: "free_shipping";
+    readonly label: "Free Shipping";
+}, {
+    readonly id: "buy_x_get_y";
+    readonly label: "Buy X Get Y";
+}];
+/** Empty-sentinel variant for views (like SellerBidsView) that drive the
+ *  filter URL with `""` instead of `"All"` so the `"" == no filter` invariant
+ *  stays a single shape across queries. */
+export declare const EMPTY_TAB: {
+    readonly id: "";
+    readonly label: "All";
+};
+/** Seller > Products — listing-state filter chip set. */
+export declare const SELLER_PRODUCT_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "draft";
+    readonly label: "Draft";
+}, {
+    readonly id: "archived";
+    readonly label: "Archived";
+}, {
+    readonly id: "sold";
+    readonly label: "Sold";
+}];
+/** Seller > Auctions — auction-state filter chip set. */
+export declare const SELLER_AUCTION_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "draft";
+    readonly label: "Draft";
+}, {
+    readonly id: "ended";
+    readonly label: "Ended";
+}, {
+    readonly id: "cancelled";
+    readonly label: "Cancelled";
+}];
+/** Seller > Pre-orders — pre-order-state filter chip set. */
+export declare const SELLER_PRE_ORDER_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "draft";
+    readonly label: "Draft";
+}, {
+    readonly id: "archived";
+    readonly label: "Archived";
+}, {
+    readonly id: "cancelled";
+    readonly label: "Cancelled";
+}];
+/** Seller > Prize Draws — draw-state filter chip set. */
+export declare const SELLER_PRIZE_DRAW_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "draft";
+    readonly label: "Draft";
+}, {
+    readonly id: "ended";
+    readonly label: "Ended";
+}, {
+    readonly id: "cancelled";
+    readonly label: "Cancelled";
+}];
+/** Seller > Orders — order-state filter chip set. Subset of
+ *  `ADMIN_ORDER_STATUS_TABS` — sellers don't see `RETURN_REQUESTED` until
+ *  the buyer initiates one through support. */
+export declare const SELLER_ORDER_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "PENDING";
+    readonly label: "Pending";
+}, {
+    readonly id: "PROCESSING";
+    readonly label: "Processing";
+}, {
+    readonly id: "SHIPPED";
+    readonly label: "Shipped";
+}, {
+    readonly id: "DELIVERED";
+    readonly label: "Delivered";
+}, {
+    readonly id: "CANCELLED";
+    readonly label: "Cancelled";
+}, {
+    readonly id: "REFUNDED";
+    readonly label: "Refunded";
+}];
+/** Seller > Offers — offer-state filter chip set. */
+export declare const SELLER_OFFER_STATUS_TABS: readonly [{
+    readonly id: "All";
+    readonly label: "All";
+}, {
+    readonly id: "pending";
+    readonly label: "Pending";
+}, {
+    readonly id: "accepted";
+    readonly label: "Accepted";
+}, {
+    readonly id: "rejected";
+    readonly label: "Rejected";
+}, {
+    readonly id: "expired";
+    readonly label: "Expired";
+}];
+/** Seller > Bids — bid-state filter chip set. Uses the empty-sentinel
+ *  variant (see `EMPTY_TAB`). */
+export declare const SELLER_BID_STATUS_TABS: readonly [{
+    readonly id: "";
+    readonly label: "All";
+}, {
+    readonly id: "active";
+    readonly label: "Active";
+}, {
+    readonly id: "outbid";
+    readonly label: "Outbid";
+}, {
+    readonly id: "won";
+    readonly label: "Won";
+}, {
+    readonly id: "lost";
+    readonly label: "Lost";
+}, {
+    readonly id: "cancelled";
+    readonly label: "Cancelled";
+}];