@mohasinac/appkit 2.7.10 → 2.7.12

package/dist/features/pre-orders/components/PreOrdersIndexListing.js

@@ -4,7 +4,7 @@ import { useState, useCallback, useMemo } from "react";
 import { Columns, Heart, ShoppingCart, SlidersHorizontal, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Pagination, useToast, BulkActionsBar, ListingToolbar } from "../../../ui";
+import { Pagination, useToast, BulkActionBar, ListingToolbar } from "../../../ui";
 import { ACTION_ID, ACTION_META, COMPARE_MAX_ITEMS } from "../../products/constants/action-defs";
 import { CompareOverlay } from "../../products/components/CompareOverlay";
 import { ROUTES } from "../../../next";
@@ -16,23 +16,27 @@ import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
 import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hooks/useCategoryTree";
 import { useBrands } from "../../products/hooks/useBrands";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
+import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
+import { sortBy } from "../../../constants/sort";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
+const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
 const PREORDER_SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest First" },
-    { value: "createdAt", label: "Oldest First" },
-    { value: "preOrderDeliveryDate", label: "Delivery: Soonest" },
-    { value: "-preOrderDeliveryDate", label: "Delivery: Furthest" },
-    { value: "price", label: "Price: Low to High" },
-    { value: "-price", label: "Price: High to Low" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT), label: "Newest First" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
+    { value: sortBy(PRODUCT_FIELDS.PRE_ORDER_DELIVERY_DATE, "ASC"), label: "Delivery: Soonest" },
+    { value: sortBy(PRODUCT_FIELDS.PRE_ORDER_DELIVERY_DATE), label: "Delivery: Furthest" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE, "ASC"), label: "Price: Low to High" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE), label: "Price: High to Low" },
 ];
-const FILTER_KEYS = ["category", "brand", "minPrice", "maxPrice", "storeId", "preOrderProductionStatus", "dateFrom", "dateTo"];
+const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.BRAND, TABLE_KEYS.MIN_PRICE, TABLE_KEYS.MAX_PRICE, TABLE_KEYS.STORE_ID, TABLE_KEYS.PREORDER_STATUS, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO];
 export function PreOrdersIndexListing({ initialData, categorySlug, brandName }) {
-    const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
     const { showToast } = useToast();
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
     const [compareIds, setCompareIds] = useState([]);
-    const showClosed = table.get("showClosed") === "true";
-    const [view, setView] = useState(table.get("view") || "grid");
+    const showClosed = table.get(TABLE_KEYS.SHOW_CLOSED) === "true";
+    const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
     const localCart = useGuestCart();
     const localWishlist = useGuestWishlist();
     const { categories } = useCategoryTree();
@@ -81,45 +85,49 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
     }, []);
     const resetAll = useCallback(() => {
-        const updates = { q: "", sort: "", showClosed: "" };
+        const updates = { [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" };
         for (const k of FILTER_KEYS)
             updates[k] = "";
         table.setMany(updates);
         setSearchInput("");
     }, [table]);
     const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") ||
-        table.get("showClosed") === "true" ||
-        table.get("sort") !== "-createdAt" ||
+    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
+        table.get(TABLE_KEYS.SHOW_CLOSED) === "true" ||
+        table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
         activeFilterCount > 0;
     const params = {
-        q: table.get("q") || undefined,
-        category: table.get("category") || undefined,
+        q: table.get(TABLE_KEYS.QUERY) || undefined,
+        category: table.get(TABLE_KEYS.CATEGORY) || undefined,
         categorySlug: categorySlug || undefined,
-        brand: brandName || table.get("brand") || undefined,
-        minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
-        maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
-        storeId: table.get("storeId") || undefined,
-        preOrderProductionStatus: (table.get("preOrderProductionStatus") || undefined),
-        dateFrom: table.get("dateFrom") || undefined,
-        dateTo: table.get("dateTo") || undefined,
-        sort: table.get("sort") || "-createdAt",
-        page: table.getNumber("page", 1),
-        perPage: table.getNumber("pageSize", 24),
+        brand: brandName || table.get(TABLE_KEYS.BRAND) || undefined,
+        minPrice: table.get(TABLE_KEYS.MIN_PRICE) ? Number(table.get(TABLE_KEYS.MIN_PRICE)) : undefined,
+        maxPrice: table.get(TABLE_KEYS.MAX_PRICE) ? Number(table.get(TABLE_KEYS.MAX_PRICE)) : undefined,
+        storeId: table.get(TABLE_KEYS.STORE_ID) || undefined,
+        preOrderProductionStatus: (table.get(TABLE_KEYS.PREORDER_STATUS) || undefined),
+        dateFrom: table.get(TABLE_KEYS.DATE_FROM) || undefined,
+        dateTo: table.get(TABLE_KEYS.DATE_TO) || undefined,
+        sort: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
+        page: table.getNumber(TABLE_KEYS.PAGE, 1),
+        perPage: table.getNumber(TABLE_KEYS.PAGE_SIZE, 24),
         listingType: "pre-order",
-        status: showClosed ? undefined : "published",
+        // Hide out-of-stock pre-orders by default. Uses stockQuantity>0 (always-present field).
+        // Quota over-sign is intentional — never block pre-orders by availability.
+        inStock: showClosed ? undefined : true,
     };
     const { products: preOrders, totalPages, page, isLoading } = useProducts(params, { initialData });
     const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
+        table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
     const handleSearchKeyDown = (e) => {
         if (e.key === "Enter")
             commitSearch();
     };
     const handleViewToggle = (next) => {
+        if (next === VIEW_MODE.TABLE)
+            return;
         setView(next);
-        table.set("view", next);
+        table.set(TABLE_KEYS.VIEW, next);
     };
     const wishlistActions = {
         addToWishlist: (productId) => {
@@ -147,9 +155,9 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
     }, [localCart, showToast]);
     const selection = useBulkSelection({ items: preOrders, keyExtractor: (p) => p.id });
     const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get("sort") || "-createdAt", sortOptions: PREORDER_SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: preOrders.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show closed" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showClosed, onClick: () => table.set("showClosed", showClosed ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showClosed ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showClosed ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(BulkActionsBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: PREORDER_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: preOrders.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show closed" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showClosed, onClick: () => table.set(TABLE_KEYS.SHOW_CLOSED, showClosed ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showClosed ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showClosed ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                     {
-                        key: ACTION_ID.ADD_TO_CART,
+                        id: ACTION_ID.ADD_TO_CART,
                         label: ACTION_META[ACTION_ID.ADD_TO_CART].label,
                         icon: _jsx(ShoppingCart, { className: "h-3.5 w-3.5" }),
                         variant: "primary",
@@ -164,7 +172,7 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
                         },
                     },
                     {
-                        key: ACTION_ID.ADD_TO_WISHLIST,
+                        id: ACTION_ID.ADD_TO_WISHLIST,
                         label: ACTION_META[ACTION_ID.ADD_TO_WISHLIST].label,
                         icon: _jsx(Heart, { className: "h-3.5 w-3.5" }),
                         variant: "secondary",
@@ -179,7 +187,7 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
                         },
                     },
                     {
-                        key: ACTION_ID.COMPARE,
+                        id: ACTION_ID.COMPARE,
                         label: ACTION_META[ACTION_ID.COMPARE].label,
                         icon: _jsx(Columns, { className: "h-3.5 w-3.5" }),
                         variant: "secondary",
@@ -189,7 +197,7 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
                             setCompareIds(ids);
                         },
                     },
-                ] }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
+                ] }), 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
                     setCompareIds([]);
                     selection.clearSelection();
                 }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), 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: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "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 filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(PreOrderFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));

package/dist/features/pre-orders/schemas/index.d.ts

@@ -48,8 +48,8 @@ export declare const preorderItemSchema: z.ZodObject<{
     id: string;
     name: string;
     active: boolean;
-    slug: string;
     isFeatured: boolean;
+    slug: string;
     salePrice: number;
     regularPrice: number;
     createdAt?: string | undefined;
@@ -61,8 +61,8 @@ export declare const preorderItemSchema: z.ZodObject<{
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     }[] | undefined;
-    images?: string[] | undefined;
     brand?: string | undefined;
+    images?: string[] | undefined;
     franchise?: string | undefined;
     preorderShipDate?: string | undefined;
 }, {
@@ -81,9 +81,9 @@ export declare const preorderItemSchema: z.ZodObject<{
         youtubeId?: string | undefined;
     }[] | undefined;
     active?: boolean | undefined;
-    images?: string[] | undefined;
     brand?: string | undefined;
     isFeatured?: boolean | undefined;
+    images?: string[] | undefined;
     franchise?: string | undefined;
     preorderShipDate?: string | undefined;
 }>;

package/dist/features/products/components/AuctionsIndexListing.js

@@ -4,29 +4,34 @@ import { useState, useCallback, useMemo } from "react";
 import { SlidersHorizontal, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../hooks/useProducts";
-import { Pagination, useToast, ListingToolbar } from "../../../ui";
+import { Pagination, useToast, ListingToolbar, BulkActionBar } from "../../../ui";
+import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
 import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
 import { AuctionFilters } from "../../auctions/components/AuctionFilters";
 import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
 import { pushWishlistOp } from "../../cart/utils/pending-ops";
 import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hooks/useCategoryTree";
 import { useBrands } from "../hooks/useBrands";
+import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
+import { sortBy } from "../../../constants/sort";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
+const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.AUCTION_END_DATE, "ASC");
 const AUCTION_SORT_OPTIONS = [
-    { value: "auctionEndDate", label: "Ending Soonest" },
-    { value: "-auctionEndDate", label: "Ending Latest" },
-    { value: "currentBid", label: "Bid: Low to High" },
-    { value: "-currentBid", label: "Bid: High to Low" },
-    { value: "-createdAt", label: "Newly Listed" },
-    { value: "createdAt", label: "Oldest Listed" },
+    { value: sortBy(PRODUCT_FIELDS.AUCTION_END_DATE, "ASC"), label: "Ending Soonest" },
+    { value: sortBy(PRODUCT_FIELDS.AUCTION_END_DATE), label: "Ending Latest" },
+    { value: sortBy(PRODUCT_FIELDS.CURRENT_BID, "ASC"), label: "Bid: Low to High" },
+    { value: sortBy(PRODUCT_FIELDS.CURRENT_BID), label: "Bid: High to Low" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT), label: "Newly Listed" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT, "ASC"), label: "Oldest Listed" },
 ];
-const FILTER_KEYS = ["category", "brand", "minBid", "maxBid", "storeId", "dateFrom", "dateTo", "condition"];
+const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.BRAND, TABLE_KEYS.MIN_BID, TABLE_KEYS.MAX_BID, TABLE_KEYS.STORE_ID, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO];
 export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
-    const table = useUrlTable({ defaults: { pageSize: "24", sort: "auctionEndDate" } });
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
     const { showToast } = useToast();
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
-    const showEnded = table.get("showEnded") === "true";
-    const [view, setView] = useState(table.get("view") || "grid");
+    const showEnded = table.get(TABLE_KEYS.SHOW_ENDED) === "true";
+    const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
     const localWishlist = useGuestWishlist();
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "auction").map((i) => i.itemId));
     const { categories } = useCategoryTree();
@@ -74,47 +79,50 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
     }, []);
     const resetAll = useCallback(() => {
-        const updates = { q: "", sort: "", showEnded: "" };
+        const updates = { [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_ENDED]: "" };
         for (const k of FILTER_KEYS)
             updates[k] = "";
         table.setMany(updates);
         setSearchInput("");
     }, [table]);
     const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") ||
-        table.get("showEnded") === "true" ||
-        table.get("sort") !== "auctionEndDate" ||
+    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
+        table.get(TABLE_KEYS.SHOW_ENDED) === "true" ||
+        table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
         activeFilterCount > 0;
     const params = {
-        q: table.get("q") || undefined,
-        category: table.get("category") || undefined,
+        q: table.get(TABLE_KEYS.QUERY) || undefined,
+        category: table.get(TABLE_KEYS.CATEGORY) || undefined,
         categorySlug: categorySlug || undefined,
-        brand: brandName || table.get("brand") || undefined,
-        minBid: table.get("minBid") ? Number(table.get("minBid")) : undefined,
-        maxBid: table.get("maxBid") ? Number(table.get("maxBid")) : undefined,
-        storeId: table.get("storeId") || undefined,
+        brand: brandName || table.get(TABLE_KEYS.BRAND) || undefined,
+        minBid: table.get(TABLE_KEYS.MIN_BID) ? Number(table.get(TABLE_KEYS.MIN_BID)) : undefined,
+        maxBid: table.get(TABLE_KEYS.MAX_BID) ? Number(table.get(TABLE_KEYS.MAX_BID)) : undefined,
+        storeId: table.get(TABLE_KEYS.STORE_ID) || undefined,
         // When showEnded is false (default), force dateFrom=now so only live auctions appear.
         // When showEnded is true, respect the filter-drawer value (or show all if none set).
         dateFrom: showEnded
-            ? (table.get("dateFrom") || undefined)
+            ? (table.get(TABLE_KEYS.DATE_FROM) || undefined)
             : new Date().toISOString(),
-        dateTo: table.get("dateTo") || undefined,
-        sort: table.get("sort") || "auctionEndDate",
-        page: table.getNumber("page", 1),
-        perPage: table.getNumber("pageSize", 24),
+        dateTo: table.get(TABLE_KEYS.DATE_TO) || undefined,
+        sort: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
+        page: table.getNumber(TABLE_KEYS.PAGE, 1),
+        perPage: table.getNumber(TABLE_KEYS.PAGE_SIZE, 24),
         listingType: "auction",
     };
     const { products: auctions, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const selection = useBulkSelection({ items: auctions, keyExtractor: (a) => a.id });
     const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
+        table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
     const handleSearchKeyDown = (e) => {
         if (e.key === "Enter")
             commitSearch();
     };
     const handleViewToggle = (next) => {
+        if (next === VIEW_MODE.TABLE)
+            return;
         setView(next);
-        table.set("view", next);
+        table.set(TABLE_KEYS.VIEW, next);
     };
     const wishlistActions = {
         addToWishlist: (productId) => {
@@ -132,5 +140,30 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
         isWishlisted: (productId) => wishlistedIds.has(productId),
     };
     const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-4";
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get("sort") || "auctionEndDate", sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show ended" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showEnded, onClick: () => table.set("showEnded", showEnded ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showEnded ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showEnded ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })) }), 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: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "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 filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _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})` : ""] }) })] })] }))] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: auctions.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show ended" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showEnded, onClick: () => table.set(TABLE_KEYS.SHOW_ENDED, showEnded ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showEnded ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showEnded ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
+                    {
+                        id: "watchlist",
+                        label: "Add to Watchlist",
+                        variant: "primary",
+                        onClick: () => {
+                            const selected = auctions.filter((a) => selection.selectedIdSet.has(a.id));
+                            selected.forEach((a) => {
+                                wishlistActions.addToWishlist(a.id);
+                            });
+                            selection.clearSelection();
+                        },
+                    },
+                    {
+                        id: "remove-watchlist",
+                        label: "Remove from Watchlist",
+                        variant: "secondary",
+                        onClick: () => {
+                            const selected = auctions.filter((a) => selection.selectedIdSet.has(a.id));
+                            selected.forEach((a) => {
+                                wishlistActions.removeFromWishlist(a.id);
+                            });
+                            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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })) }), 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: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "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 filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
 }

package/dist/features/products/components/BidHistory.d.ts

@@ -20,7 +20,6 @@ export interface BidHistoryProps {
     labels?: {
         title?: string;
         noHistory?: string;
-        bidder?: string;
         amount?: string;
         time?: string;
     };

package/dist/features/products/components/BidHistory.js

@@ -30,5 +30,5 @@ export function BidHistory({ isLoading = false, isEmpty = false, renderList, ren
     }
     if (renderList)
         return _jsx("div", { className: className, "data-section": "bidhistory-div-420", children: renderList() });
-    return (_jsxs("div", { className: className, "data-section": "bidhistory-div-421", children: [labels.title && (_jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: labels.title })), _jsx("div", { className: "space-y-2", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { className: "font-medium text-zinc-700 dark:text-zinc-300 truncate max-w-[40%]", children: bid.bidderName ?? bid.bidderId }), _jsx(Span, { className: "font-bold text-primary-600 dark:text-primary-400", children: currency ? formatCurrency(bid.amount, currency) : bid.amount.toLocaleString() }), _jsx(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: formatBidDate(bid.placedAt) })] }, bid.id))) })] }));
+    return (_jsxs("div", { className: className, "data-section": "bidhistory-div-421", children: [labels.title && (_jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: labels.title })), _jsx("div", { className: "space-y-2", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { className: "font-bold text-primary-600 dark:text-primary-400", children: currency ? formatCurrency(bid.amount, currency) : bid.amount.toLocaleString() }), _jsx(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: formatBidDate(bid.placedAt) })] }, bid.id))) })] }));
 }

package/dist/features/products/components/PrizeDrawsIndexListing.js

@@ -9,28 +9,32 @@ import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hook
 import { useBrands } from "../hooks/useBrands";
 import { MarketplacePrizeDrawCard } from "./MarketplacePrizeDrawCard";
 import { ProductFilters } from "./ProductFilters";
+import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
+import { sortBy } from "../../../constants/sort";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
+const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
 const PRIZE_DRAW_SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest First" },
-    { value: "createdAt", label: "Oldest First" },
-    { value: "prizeRevealWindowStart", label: "Reveal: Soonest" },
-    { value: "-prizeRevealWindowStart", label: "Reveal: Furthest" },
-    { value: "pricePerEntry", label: "Entry: Low to High" },
-    { value: "-pricePerEntry", label: "Entry: High to Low" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT), label: "Newest First" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
+    { value: sortBy(PRODUCT_FIELDS.PRIZE_REVEAL_WINDOW_START, "ASC"), label: "Reveal: Soonest" },
+    { value: sortBy(PRODUCT_FIELDS.PRIZE_REVEAL_WINDOW_START), label: "Reveal: Furthest" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE, "ASC"), label: "Entry: Low to High" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE), label: "Entry: High to Low" },
 ];
 const FILTER_KEYS = [
-    "category",
-    "brand",
-    "minPrice",
-    "maxPrice",
-    "storeId",
-    "prizeRevealStatus",
+    TABLE_KEYS.CATEGORY,
+    TABLE_KEYS.BRAND,
+    TABLE_KEYS.MIN_PRICE,
+    TABLE_KEYS.MAX_PRICE,
+    TABLE_KEYS.STORE_ID,
+    TABLE_KEYS.PRIZE_REVEAL_STATUS,
 ];
 export function PrizeDrawsIndexListing({ initialData, categorySlug, brandName, storeId: forcedStoreId, }) {
-    const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
-    const showClosed = table.get("showClosed") === "true";
-    const [view, setView] = useState(table.get("view") || "grid");
+    const showClosed = table.get(TABLE_KEYS.SHOW_CLOSED) === "true";
+    const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
     const { categories } = useCategoryTree();
     const categoryOptions = categoriesToFacetOptions(categories);
     const { brandOptions } = useBrands();
@@ -75,50 +79,53 @@ export function PrizeDrawsIndexListing({ initialData, categorySlug, brandName, s
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
     }, []);
     const resetAll = useCallback(() => {
-        const updates = { q: "", sort: "", showClosed: "" };
+        const updates = { [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" };
         for (const k of FILTER_KEYS)
             updates[k] = "";
         table.setMany(updates);
         setSearchInput("");
     }, [table]);
     const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") ||
+    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
         showClosed ||
-        table.get("sort") !== "-createdAt" ||
+        table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
         activeFilterCount > 0;
+    const revealFilter = (table.get(TABLE_KEYS.PRIZE_REVEAL_STATUS) || undefined);
     const params = {
-        q: table.get("q") || undefined,
-        category: table.get("category") || undefined,
+        q: table.get(TABLE_KEYS.QUERY) || undefined,
+        category: table.get(TABLE_KEYS.CATEGORY) || undefined,
         categorySlug: categorySlug || undefined,
-        brand: brandName || table.get("brand") || undefined,
-        minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
-        maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
-        storeId: forcedStoreId || table.get("storeId") || undefined,
-        sort: table.get("sort") || "-createdAt",
-        page: table.getNumber("page", 1),
-        perPage: table.getNumber("pageSize", 24),
+        brand: brandName || table.get(TABLE_KEYS.BRAND) || undefined,
+        minPrice: table.get(TABLE_KEYS.MIN_PRICE) ? Number(table.get(TABLE_KEYS.MIN_PRICE)) : undefined,
+        maxPrice: table.get(TABLE_KEYS.MAX_PRICE) ? Number(table.get(TABLE_KEYS.MAX_PRICE)) : undefined,
+        storeId: forcedStoreId || table.get(TABLE_KEYS.STORE_ID) || undefined,
+        prizeRevealStatus: revealFilter,
+        sort: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
+        page: table.getNumber(TABLE_KEYS.PAGE, 1),
+        perPage: table.getNumber(TABLE_KEYS.PAGE_SIZE, 24),
         listingType: "prize-draw",
-        status: showClosed ? undefined : "published",
     };
     const { products: draws, totalPages, page, isLoading } = useProducts(params, { initialData });
-    // Client-side filter for prizeRevealStatus until the server query supports it.
-    const revealFilter = table.get("prizeRevealStatus");
-    const filteredDraws = revealFilter
-        ? draws.filter((d) => d.prizeRevealStatus === revealFilter)
+    // When no explicit reveal-status filter is set, hide closed draws client-side
+    // as a UX default (showClosed toggle). Server handles explicit status filters.
+    const filteredDraws = !revealFilter && !showClosed
+        ? draws.filter((d) => d.prizeRevealStatus !== PRODUCT_FIELDS.PRIZE_REVEAL_STATUS_VALUES.CLOSED)
         : draws;
     const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
+        table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
     const handleSearchKeyDown = (e) => {
         if (e.key === "Enter")
             commitSearch();
     };
     const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search prize draws...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get("sort") || "-createdAt", sortOptions: PRIZE_DRAW_SORT_OPTIONS, onSortChange: (v) => {
-                    table.set("sort", v);
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search prize draws...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: PRIZE_DRAW_SORT_OPTIONS, onSortChange: (v) => {
+                    table.set(TABLE_KEYS.SORT, v);
                 }, view: view, onViewChange: (v) => {
+                    if (v === VIEW_MODE.TABLE)
+                        return;
                     setView(v);
-                    table.set("view", v);
+                    table.set(TABLE_KEYS.VIEW, v);
                 }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show closed" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showClosed, onClick: () => table.set("showClosed", showClosed ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showClosed ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showClosed ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : filteredDraws.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No prize draws found." })) : (_jsx("div", { className: gridClass, children: filteredDraws.map((product) => (_jsx(MarketplacePrizeDrawCard, { product: product, variant: view }, product.id))) })) }), 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: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "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 filters", 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-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "prizeRevealStatusFilter", className: "block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5", children: "Reveal status" }), _jsxs("select", { id: "prizeRevealStatusFilter", value: pendingFilters.prizeRevealStatus ?? "", onChange: (e) => setPendingFilters((p) => ({
                                                     ...p,
                                                     prizeRevealStatus: e.target.value,

package/dist/features/products/components/ProductDetailPageView.js

@@ -259,7 +259,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderGroupSection: groupId
                             ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
-                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx("ul", { className: "space-y-2", children: ingredients.map((item, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 rounded-full bg-primary-400" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx("ol", { className: "space-y-3", children: howToUse.map((step, i) => (_jsxs("li", { className: "flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30 text-xs font-bold text-primary-700 dark:text-primary-300", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
+                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx("ul", { className: "space-y-2", children: ingredients.map((item, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 rounded-full bg-primary-400" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx("ol", { className: "space-y-3", children: howToUse.map((step, i) => (_jsxs("li", { className: "flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30 text-xs font-bold text-primary-700 dark:text-primary-300", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, context: "listing", emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),