@mohasinac/appkit 4.2.0 → 4.3.1

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

@@ -3,12 +3,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useMemo } from "react";
-import { FilterChipGroup, Heading, ListingLayout, Span, Text } from "../../../ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { FilterChipGroup, Heading, ListingLayout, RowActionMenu, Span, Text } from "../../../ui";
+import { apiClient } from "../../../http";
+import { useApiMutation } from "../../../client";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_BULK_ACTIONS, ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
 import { AdminTesterChecklistItemEditorView } from "./AdminTesterChecklistItemEditorView";
+const LISTING_QUERY_KEY = ["admin", "tester-checklist-items", "listing"];
 const COLUMNS = [
     {
         key: "primary",
@@ -36,14 +41,28 @@ const COLUMNS = [
     },
 ];
 export function AdminTesterChecklistView({ children, onBulkDelete, ...props }) {
+    const queryClient = useQueryClient();
+    const reopenMutation = useApiMutation({
+        mutationFn: async (id) => {
+            await apiClient.post(ADMIN_ENDPOINTS.TESTER_CHECKLIST_ITEM_REOPEN(id), {});
+        },
+        successMessage: "Case reopened for retest.",
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: LISTING_QUERY_KEY });
+        },
+    });
     const config = useMemo(() => ({
         portal: "admin",
         title: "Tester Checklist",
         searchPlaceholder: "Search test cases, groups, or pages",
         emptyLabel: "No checklist items found",
-        filterKeys: ["isActive"],
+        filterKeys: ["isActive", "bugConfirmed"],
+        // Bug-confirmed (and reopened-away) cases are always isActive:false —
+        // default to Active so they don't clutter the catalog; "Inactive" /
+        // "All" remain an explicit escape hatch via the filter chips below.
+        filterDefaults: { isActive: "true" },
         defaultSort: sortBy("order", "ASC"),
-        queryKey: ["admin", "tester-checklist-items", "listing"],
+        queryKey: LISTING_QUERY_KEY,
         endpoint: ADMIN_ENDPOINTS.TESTER_CHECKLIST_ITEMS,
         sortOptions: [
             { value: "order", label: "Order" },
@@ -52,20 +71,43 @@ export function AdminTesterChecklistView({ children, onBulkDelete, ...props }) {
             { value: "label", label: "Test case A–Z" },
         ],
         columns: COLUMNS,
-        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
-            id: toStringValue(item.id, `checklist-${index}`),
-            primary: toStringValue(item.label, "Untitled test case"),
-            secondary: `${toStringValue(item.groupLabel, "Uncategorized")} / ${toStringValue(item.pageLabel, "")}`,
-            phase: typeof item.phase === "number" ? item.phase : 1,
-            status: toStringValue(typeof item.isActive === "boolean"
-                ? item.isActive
-                    ? "Active"
-                    : "Inactive"
-                : item.status, "Active"),
-            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-        })),
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => {
+            const bugConfirmed = item.bugConfirmed === true;
+            const version = typeof item.version === "number" ? item.version : 1;
+            const status = bugConfirmed
+                ? "Bug Confirmed"
+                : toStringValue(typeof item.isActive === "boolean"
+                    ? item.isActive
+                        ? "Active"
+                        : "Inactive"
+                    : item.status, "Active");
+            const secondary = bugConfirmed
+                ? `${toStringValue(item.groupLabel, "Uncategorized")} / ${toStringValue(item.pageLabel, "")} — 🐛 found by ${toStringValue(item.bugHunterName, "unknown tester")} (v${version})`
+                : `${toStringValue(item.groupLabel, "Uncategorized")} / ${toStringValue(item.pageLabel, "")}`;
+            return {
+                id: toStringValue(item.id, `checklist-${index}`),
+                primary: toStringValue(item.label, "Untitled test case"),
+                secondary,
+                phase: typeof item.phase === "number" ? item.phase : 1,
+                status,
+                updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+                bugConfirmed,
+                supersededByItemId: item.supersededByItemId
+                    ? toStringValue(item.supersededByItemId, "")
+                    : undefined,
+            };
+        }),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-        buildFilters: (state) => state.isActive ? sieveFilter("isActive", SIEVE_OP.EQ, state.isActive) : undefined,
+        buildFilters: (state) => {
+            const parts = [];
+            if (state.isActive && state.isActive !== "All") {
+                parts.push(sieveFilter("isActive", SIEVE_OP.EQ, state.isActive));
+            }
+            if (state.bugConfirmed && state.bugConfirmed !== "All") {
+                parts.push(sieveFilter("bugConfirmed", SIEVE_OP.EQ, state.bugConfirmed));
+            }
+            return parts.join(",") || undefined;
+        },
         primaryAction: {
             label: "Add Test Case",
             onClick: ({ openCreatePanel }) => openCreatePanel(),
@@ -86,14 +128,24 @@ export function AdminTesterChecklistView({ children, onBulkDelete, ...props }) {
                 onClick: handlers[id],
             }));
         },
-        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: [
-                { id: "All", label: "All" },
-                { id: "true", label: "Active" },
-                { id: "false", label: "Inactive" },
-            ], value: pendingFilters.isActive || "", onChange: (v) => setPendingFilters((p) => ({ ...p, isActive: v })) })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Stack, { gap: "md", children: [_jsx(FilterChipGroup, { label: "Status", tabs: [
+                        { id: "All", label: "All" },
+                        { id: "true", label: "Active" },
+                        { id: "false", label: "Inactive" },
+                    ], value: pendingFilters.isActive || "", onChange: (v) => setPendingFilters((p) => ({ ...p, isActive: v })) }), _jsx(FilterChipGroup, { label: "Bug status", tabs: [
+                        { id: "All", label: "All" },
+                        { id: "true", label: "Bug Confirmed" },
+                    ], value: pendingFilters.bugConfirmed || "", onChange: (v) => setPendingFilters((p) => ({ ...p, bugConfirmed: v })) })] })),
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ACTIONS.ADMIN["reopen-checklist-item"].label,
+                    disabled: !row.bugConfirmed || !!row.supersededByItemId,
+                    onClick: () => reopenMutation.mutate(row.id),
+                },
+            ] })),
         renderEditor: ({ editId, closePanel }) => (_jsx(AdminTesterChecklistItemEditorView, { itemId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
         resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Test Case" : "Edit Test Case"),
-    }), [onBulkDelete]);
+    }), [onBulkDelete, reopenMutation]);
     if (React.Children.count(children) > 0) {
         return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Tester Checklist" }), children] }));
     }

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function AdminWhatsAppGuideView(): React.JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Building2, Smartphone, KeyRound, MessageSquare, Power, FlaskConical } from "lucide-react";
+import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Tr, Ul } from "../../../ui";
+import { GC } from "../../_guide-cls";
+export function AdminWhatsAppGuideView() {
+    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "xl", children: _jsx(MessageSquare, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "WhatsApp Integration" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Connecting a real Meta WhatsApp Business Cloud API account so the platform-level order-notification addon and admin purchase announcements actually deliver. Do these steps outside the codebase, then paste the resulting values into Site Settings \u2192 WhatsApp." })] }), [
+                {
+                    Icon: Building2, title: "Meta Business Manager & App",
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: ["Create or verify a Business account at ", _jsx(Span, { weight: "bold", children: "business.facebook.com" }), ". Complete Business Verification (legal name, address, phone) \u2014 most message-template categories require a verified business before they'll be approved."] }), _jsxs(Li, { children: ["In ", _jsx(Span, { weight: "bold", children: "developers.facebook.com" }), ", create an App and add the ", _jsx(Span, { weight: "bold", children: "WhatsApp" }), " product. This gives you a test phone number for development immediately."] })] })),
+                },
+                {
+                    Icon: Smartphone, title: "Register the Real Business Phone Number",
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsx(Li, { children: "WhatsApp Manager \u2192 Phone Numbers \u2192 Add phone number \u2192 verify via SMS or voice OTP." }), _jsx(Li, { children: "Complete Display Name review \u2014 Meta approves the shown business name before it goes live." })] })),
+                },
+                {
+                    Icon: KeyRound, title: "System User & Permanent Access Token",
+                    content: (_jsxs(_Fragment, { children: [_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: ["Business Settings \u2192 Users \u2192 System Users \u2192 create a System User with ", _jsx(Span, { weight: "bold", children: "Admin" }), " role."] }), _jsxs(Li, { children: ["Assign it the WhatsApp Business Account asset with ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "whatsapp_business_messaging" }), " + ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "whatsapp_business_management" }), " permissions, then generate a token. System User tokens don't expire the way personal User tokens do, so this is the one to use in production."] })] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mt-3", size: "sm", children: ["Copy the token into ", _jsx(Span, { weight: "bold", children: "Site Settings \u2192 WhatsApp \u2192 Cloud API System User Token" }), ", and the ", _jsx(Span, { weight: "bold", children: "Phone Number ID" }), " (WhatsApp Manager \u2192 API Setup) into ", _jsx(Span, { weight: "bold", children: "Site Settings \u2192 WhatsApp \u2192 Phone Number ID" }), "."] })] })),
+                },
+                {
+                    Icon: MessageSquare, title: "Message Templates",
+                    content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-3", size: "sm", children: "Meta's Cloud API only allows free-form text messages within a 24-hour window after the customer has messaged the business first. Any business-initiated proactive notification \u2014 order placed, shipped, delivered, cancelled, refund initiated \u2014 needs a pre-approved Message Template." }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mb-3", size: "sm", children: ["WhatsApp Manager \u2192 Message Templates \u2192 create one template per notification type, category ", _jsx(Span, { weight: "bold", children: "UTILITY" }), " (transactional order updates get cheaper, faster approval than MARKETING):"] }), _jsx(Div, { overflow: "x-auto", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "border-b border-[var(--appkit-color-border)]", children: [_jsx(Th, { align: "left", paddingSide: "pr-md", className: "text-[var(--appkit-color-text)]", padding: "xs-tall", weight: "semibold", children: "Notification type" }), _jsx(Th, { align: "left", className: "text-[var(--appkit-color-text)]", padding: "xs-tall", weight: "semibold", children: "Suggested template name" })] }) }), _jsx(Tbody, { size: "sm", color: "muted", children: [
+                                                ["Order placed", "order_placed_update"],
+                                                ["Order confirmed", "order_confirmed_update"],
+                                                ["Order shipped", "order_shipped_update"],
+                                                ["Order delivered", "order_delivered_update"],
+                                                ["Order cancelled", "order_cancelled_update"],
+                                                ["Refund initiated", "refund_initiated_update"],
+                                            ].map(([type, name]) => (_jsxs(Tr, { className: "border-b border-[var(--appkit-color-border)]/50", children: [_jsx(Td, { paddingSide: "pr-md", padding: "xs-tall", children: type }), _jsx(Td, { padding: "xs-tall", children: _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: name }) })] }, type))) })] }) }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mt-3", size: "sm", children: ["Give each template two ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "{{1}}" }), "/", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "{{2}}" }), " body variables \u2014 the runner substitutes the notification title and message text in that order. Submit for review; approval usually takes minutes to ~24 hours. Don't go live on a template until its status shows ", _jsx(Span, { weight: "bold", children: "APPROVED" }), "."] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mt-2", size: "sm", children: ["Once each template is approved, copy its exact template name (not the display label you gave it in Meta's UI) into ", _jsx(Span, { weight: "bold", children: "Site Settings \u2192 WhatsApp \u2192 [type] template name" }), ", and set the approved language code (e.g. ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "en" }), ") in ", _jsx(Span, { weight: "bold", children: "Template language code" }), "."] })] })),
+                },
+                {
+                    Icon: Power, title: "Enable the Addon & Test",
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Site Settings \u2192 Fees \u2192 \"Offer the WhatsApp order-updates addon at checkout\"" }), " \u2014 turn this on once credentials + at least one template are configured. Set the fee amount (default \u20B910)."] }), _jsx(Li, { children: "Place a real test order with the addon checked. Confirm the buyer receives the templated WhatsApp message. Until real credentials + an approved template exist, the async delivery job will fail at the Meta API call with a clear credential/template error \u2014 that's expected, not a code bug." })] })),
+                },
+            ].map(({ Icon, title, content }) => (_jsxs(Section, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", children: [_jsxs(Row, { className: "border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-2,var(--appkit-color-border))]/20", padding: "inlineLg", align: "center", gap: "3", children: [_jsx(Icon, { className: "w-5 h-5 text-[var(--appkit-color-primary)]" }), _jsx(Heading, { level: 2, size: "base", weight: "semibold", children: title })] }), _jsx(Div, { paddingY: "y-md-lg", padding: "x-lg", children: content })] }, title))), _jsx(Alert, { variant: "info", children: _jsxs(Row, { align: "center", gap: "sm", children: [_jsx(FlaskConical, { className: "w-4 h-4 flex-shrink-0" }), _jsx(Text, { size: "sm", children: "Store-level Meta Commerce Catalog sync (product catalog on WhatsApp) uses separate, per-store credentials \u2014 see the Seller Guide's \"WhatsApp Catalog Sync\" page (Store dashboard \u2192 Guides). It shares the same Meta Business Manager account but not the same access token. The inbound-reply webhook (buyer messages the business number within 24h) uses the free-text send path and doesn't need a template." })] }) })] }));
+}

package/dist/features/admin/hooks/useAdminListing.d.ts

@@ -10,6 +10,10 @@ export interface AdminListingConfig<TResponse, TRow extends {
     getTotal?: (response: TResponse, rows: TRow[]) => number;
     buildFilters: (filterState: Record<string, string>) => string | undefined;
     initialView?: "grid" | "list" | "table";
+    /** Values used for filterKeys absent from the URL — lets a view default to
+     * a non-"All" filter state (e.g. hide inactive rows) on first load, while
+     * "Clear filters" (which writes an explicit "") still shows everything. */
+    filterDefaults?: Record<string, string>;
 }
 export declare function useAdminListing<TResponse, TRow extends {
     id: string;

package/dist/features/admin/hooks/useAdminListing.js

@@ -6,13 +6,15 @@ import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
 import { useDataViewMode } from "../../account/hooks/useDataViewMode";
 import { useAdminListingData } from "./useAdminListingData";
 export function useAdminListing(config) {
-    const { filterKeys, defaultSort, pageSize: defaultPageSize = 25, queryKey, endpoint, mapRows, getTotal, buildFilters, } = config;
+    const { filterKeys, defaultSort, pageSize: defaultPageSize = 25, queryKey, endpoint, mapRows, getTotal, buildFilters, filterDefaults = {}, } = config;
     // Persisted, viewport-aware view-mode: below 768px defaults to "list"
     // (AdminViewCards' one-full-width-card-per-row layout) unless the caller
     // explicitly pins hideTableView (grid-only views like coupons); the user's
     // own explicit choice, once made, always wins and persists across visits.
     const { view, setView } = useDataViewMode(config.initialView ?? "table");
-    const table = useUrlTable({ defaults: { pageSize: String(defaultPageSize), sort: defaultSort } });
+    const table = useUrlTable({
+        defaults: { pageSize: String(defaultPageSize), sort: defaultSort, ...filterDefaults },
+    });
     // Reactive — table.getNumber reads the URL param, so a page-size selector
     // (Pagination's pageSize/onPageSizeChange) actually takes effect instead
     // of always falling back to the static config default.

package/dist/features/admin/schemas/firestore.d.ts

@@ -4,7 +4,7 @@
  */
 import type { AboutContentDocument } from "../../about/schemas/firestore";
 export declare const ADMIN_CHECKOUT_BYPASS_FLAG_KEY: "adminCheckoutBypass";
-export type NotificationType = "order_placed" | "order_confirmed" | "order_shipped" | "order_delivered" | "order_cancelled" | "bid_placed" | "bid_outbid" | "bid_won" | "bid_lost" | "review_approved" | "review_replied" | "product_available" | "promotion" | "system" | "welcome" | "account_action" | "offer_received" | "offer_responded" | "offer_expired" | "offer_counter_accepted" | "refund_initiated" | "prize_reveal_ready" | "prize_reveal_expired" | "prize_reveal_reminder" | "emi_installment_due_soon" | "emi_installment_overdue" | "payment_review";
+export type NotificationType = "order_placed" | "order_confirmed" | "order_shipped" | "order_delivered" | "order_cancelled" | "bid_placed" | "bid_outbid" | "bid_won" | "bid_lost" | "review_approved" | "review_replied" | "product_available" | "promotion" | "system" | "welcome" | "account_action" | "offer_received" | "offer_responded" | "offer_expired" | "offer_counter_accepted" | "refund_initiated" | "prize_won" | "prize_reveal_expired" | "emi_installment_due_soon" | "emi_installment_overdue" | "payment_review";
 import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 export type NotificationPriority = "low" | "normal" | "high";
 export interface NotificationDocument extends BaseDocument {
@@ -65,9 +65,8 @@ export declare const NOTIFICATION_FIELDS: {
         readonly OFFER_COUNTER_ACCEPTED: NotificationType;
         readonly REFUND_INITIATED: NotificationType;
         readonly ACCOUNT_ACTION: NotificationType;
-        readonly PRIZE_REVEAL_READY: NotificationType;
+        readonly PRIZE_WON: NotificationType;
         readonly PRIZE_REVEAL_EXPIRED: NotificationType;
-        readonly PRIZE_REVEAL_REMINDER: NotificationType;
     };
     readonly PRIORITY_VALUES: {
         readonly LOW: NotificationPriority;
@@ -489,7 +488,7 @@ export interface SiteSettingsDocument extends BaseDocument {
     /**
      * Image watermark configuration applied by the `/api/media/[...slug]` CDN
      * proxy. When absent the proxy falls back to text watermark "letitrip.in" at
-     * 30% width with 20% opacity.
+     * 10% width with 10% opacity, centered.
      */
     watermark?: {
         /** `"text"` renders the `text` field; `"image"` overlays `imageUrl`. */
@@ -504,8 +503,17 @@ export interface SiteSettingsDocument extends BaseDocument {
         imageUrl?: string;
         /** Percentage of target image width (0–100). 0 disables the watermark. */
         size?: number;
-        /** Percentage opacity (0–100). Default 20. */
+        /** Percentage opacity (0–100). Default 10. */
         opacity?: number;
+        /**
+         * Anchor preset: 4 corners + center, or `"custom"` to use `offsetX`/
+         * `offsetY` instead. Default `"center"`.
+         */
+        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | "custom";
+        /** `position: "custom"` only — % of image width from center. +right / -left. Default 0. */
+        offsetX?: number;
+        /** `position: "custom"` only — % of image height from center. +down / -up. Default 0. */
+        offsetY?: number;
     };
     /** Encrypted provider credentials � never return raw to the client. */
     credentials?: SiteSettingsCredentials;

package/dist/features/admin/schemas/firestore.js

@@ -52,9 +52,8 @@ export const NOTIFICATION_FIELDS = {
         OFFER_COUNTER_ACCEPTED: "offer_counter_accepted",
         REFUND_INITIATED: "refund_initiated",
         ACCOUNT_ACTION: "account_action",
-        PRIZE_REVEAL_READY: "prize_reveal_ready",
+        PRIZE_WON: "prize_won",
         PRIZE_REVEAL_EXPIRED: "prize_reveal_expired",
-        PRIZE_REVEAL_REMINDER: "prize_reveal_reminder",
     },
     PRIORITY_VALUES: {
         LOW: "low",

package/dist/features/auctions/actions/bid-actions.js

@@ -130,13 +130,15 @@ export async function placeBid(userId, userEmail, input) {
         });
     });
     const finalVisibleForRtdb = newBidWins ? visibleBid : (bumpedPreviousVisible ?? prevVisible);
+    const finalBidCountForRtdb = (product.bidCount ?? 0) + 1;
     try {
         const rtdb = getAdminRealtimeDb();
         await rtdb.ref(`/auction-bids/${productId}`).set({
             currentBid: finalVisibleForRtdb,
+            bidCount: finalBidCountForRtdb,
             lastBid: {
                 amount: finalVisibleForRtdb,
-                bidderName: "Bidder",
+                bidderName: bid.userName,
                 timestamp: Date.now(),
             },
             updatedAt: Date.now(),

package/dist/features/auctions/components/AuctionBidsTable.d.ts

@@ -9,5 +9,10 @@ export interface AuctionBidsTableProps {
     bids: BidDocument[];
     portal?: "buyer" | "store" | "admin";
     emptyLabel?: React.ReactNode;
+    /** Server-side pagination — the auction groups shown are already just the
+     *  current page's worth of bids grouped by auction, not the full history. */
+    totalPages?: number;
+    currentPage?: number;
+    onPageChange?: (page: number) => void;
 }
-export declare function AuctionBidsTable({ bids, portal, emptyLabel, }: AuctionBidsTableProps): React.JSX.Element;
+export declare function AuctionBidsTable({ bids, portal, emptyLabel, totalPages, currentPage, onPageChange, }: AuctionBidsTableProps): React.JSX.Element;

package/dist/features/auctions/components/AuctionBidsTable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { Badge, Button, Div, Row, Span, Stack, Text } from "../../../ui";
+import { Pagination } from "../../../ui/components/Pagination";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -51,15 +52,18 @@ function groupByAuction(bids) {
 }
 function AuctionRow({ auction, portal, }) {
     const [expanded, setExpanded] = useState(false);
-    const sorted = useMemo(() => [...auction.bids].sort((a, b) => b.bidAmount - a.bidAmount), [auction.bids]);
-    const highest = sorted[0]?.bidAmount ?? 0;
+    // Most-recent bid first — matches the caller's own newest-first ordering
+    // (see UserBidsPage) instead of re-sorting by amount, which silently threw
+    // that ordering away for the expanded per-auction row list.
+    const sorted = useMemo(() => [...auction.bids].sort((a, b) => +new Date(b.bidDate) - +new Date(a.bidDate)), [auction.bids]);
+    const highest = auction.bids.reduce((max, b) => Math.max(max, b.bidAmount), 0);
     const isWinning = auction.bids.some((b) => b.isWinning);
     return (_jsxs(Div, { className: `border border-[var(--appkit-color-border)] ${__O.hidden} bg-[var(--appkit-color-surface)]`, rounded: "xl", shadow: "sm", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setExpanded((v) => !v), gap: "lg", paddingX: "md", paddingY: "md", className: "w-full text-left", "aria-expanded": expanded, children: [_jsx(ChevronRight, { className: `shrink-0 text-[var(--appkit-color-text-muted)] transition-transform ${expanded ? "rotate-90" : ""}`, size: 16 }), _jsx(Div, { className: "flex-1 min-w-0", children: _jsx(Text, { className: "text-[var(--appkit-color-text)] line-clamp-1", size: "sm", weight: "semibold", children: auction.productTitle }) }), _jsxs(Row, { gap: "sm", className: "shrink-0", children: [isWinning && (_jsx(Badge, { variant: "active", children: "Winning" })), _jsxs(Text, { variant: "secondary", size: "xs", children: [auction.bids.length, " bid", auction.bids.length !== 1 ? "s" : ""] }), _jsx(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "semibold", children: formatBidAmount(highest) })] })] }), expanded && (_jsxs(Div, { className: "border-t border-[var(--appkit-color-border)]", children: [_jsxs(Div, { textSize: "xs", textWeight: "medium", paddingX: "x-md", paddingY: "y-xs", className: `grid text-[var(--appkit-color-text-muted)] uppercase tracking-wide border-b border-[var(--appkit-color-border-subtle)] ${portal === "buyer" ? "[grid-template-columns:1fr_auto_auto]" : "[grid-template-columns:1fr_1fr_auto_auto]"}`, children: [_jsx(Span, { children: portal === "buyer" ? "Amount" : "Bidder" }), portal !== "buyer" && _jsx(Span, { children: "Amount" }), _jsx(Span, { children: "Status" }), _jsx(Span, { className: "text-right", children: "Time" })] }), sorted.map((bid) => (_jsxs(Div, { layout: "grid", align: "center", paddingX: "x-md", paddingY: "y-xs-tall", className: `border-b border-[var(--appkit-color-border-subtle)] last:border-0 hover:bg-[var(--appkit-color-border-subtle)] transition-colors ${portal === "buyer" ? "[grid-template-columns:1fr_auto_auto]" : "[grid-template-columns:1fr_1fr_auto_auto]"}`, children: [portal !== "buyer" && (_jsx(Text, { className: "text-[var(--appkit-color-text)] truncate pr-[0.75rem]", size: "sm", children: bid.userName || bid.userId })), _jsx(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "medium", children: formatBidAmount(bid.bidAmount) }), _jsx(Badge, { variant: STATUS_VARIANT[bid.status] ?? "pending", className: "capitalize", children: bid.status }), _jsx(Text, { variant: "secondary", size: "xs", align: "end", children: relDate(bid.bidDate) })] }, bid.id)))] }))] }));
 }
-export function AuctionBidsTable({ bids, portal = "buyer", emptyLabel = "No bids found.", }) {
+export function AuctionBidsTable({ bids, portal = "buyer", emptyLabel = "No bids found.", totalPages, currentPage, onPageChange, }) {
     const auctions = useMemo(() => groupByAuction(bids), [bids]);
     if (auctions.length === 0) {
         return (_jsx(Div, { padding: "y-6xl", className: "text-left", children: _jsx(Text, { variant: "secondary", children: emptyLabel }) }));
     }
-    return (_jsx(Stack, { gap: "3", children: auctions.map((auction) => (_jsx(AuctionRow, { auction: auction, portal: portal }, auction.productId))) }));
+    return (_jsxs(Stack, { gap: "3", children: [auctions.map((auction) => (_jsx(AuctionRow, { auction: auction, portal: portal }, auction.productId))), totalPages !== undefined && totalPages > 1 && currentPage !== undefined && onPageChange && (_jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }) }))] }));
 }

package/dist/features/auctions/components/AuctionDetailPageView.js

@@ -31,6 +31,7 @@ import { MarketplaceAuctionGrid } from "./MarketplaceAuctionGrid";
 import { listReviewsBySeller } from "../../reviews/actions/review-actions";
 import { PlaceBidModalButton } from "./PlaceBidFormClient";
 import { CollapsibleBidHistory } from "./CollapsibleBidHistory";
+import { LiveBidPrice } from "./LiveBidPrice";
 import { SublistingCarouselSection } from "../../products/components/SublistingCarouselSection";
 function toDescriptionHtml(raw) {
     if (!raw)
@@ -39,8 +40,8 @@ function toDescriptionHtml(raw) {
     return normalizeRichTextHtml(s);
 }
 function renderAuctionInfoPanel(props) {
-    const { title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref } = props;
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_BADGE, children: "\uD83C\uDFF7\uFE0F Live Auction" }), isEnded ? (_jsx(Span, { color: "error", surface: "danger-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Ended" })) : (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Active" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-0.5", color: "muted", size: "xs", children: "Current bid" }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { weight: "bold", className: "text-primary-600 dark:text-primary-400", size: "2xl", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "sm", weight: "medium", rounded: "full", padding: "pill-md", surface: "subtle", color: "muted", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids"] })] }), endDate && _jsxs(Text, { className: "mt-1.5", color: "muted", size: "sm", children: [isEnded ? "Ended" : "Ends", " ", _jsx(Span, { weight: "medium", color: "muted", children: endDate.toLocaleString() })] })] }), buyNowPrice !== null && !isEnded && (_jsxs(Row, { align: "center", gap: "sm", className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)] bg-primary-50 dark:bg-primary-900/20", padding: "inlineSm", rounded: "lg", children: [_jsx(Span, { size: "xs", color: "muted", children: "Buy Now:" }), _jsx(Span, { size: "base", weight: "bold", className: "text-primary-700 dark:text-primary-300", children: formatCurrency(buyNowPrice, currency) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, labels: { featured: "Featured", fasterDelivery: "Faster Delivery", ratedSeller: "Rated Seller", condition: "Condition", conditionNew: "New", conditionUsed: "Used", conditionBroken: "For Parts", conditionRefurbished: "Refurbished", returnable: "Returnable", freeShipping: "Free Shipping", codAvailable: "Cash on Delivery", emiAvailable: "EMI Available", wishlistCount: (n) => `${n} wishlisted`, categoryProductCount: (n, cat) => `${n} in ${cat}` } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryName || category }), !category && categoryName && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: categoryName }), brand && brandSlug && _jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand }), brand && !brandSlug && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand })] })), productFeatures && features.length > 0 && _jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures }), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this item" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => _jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i)) })] })), descriptionHtml && _jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" }), safeSeller && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Listed by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && _jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" })] }) }))] }));
+    const { productId, title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref } = props;
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_BADGE, children: "\uD83C\uDFF7\uFE0F Live Auction" }), isEnded ? (_jsx(Span, { color: "error", surface: "danger-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Ended" })) : (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Active" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-0.5", color: "muted", size: "xs", children: "Current bid" }), _jsx(LiveBidPrice, { productId: productId, currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "2xl", badgeSize: "sm" }), endDate && _jsxs(Text, { className: "mt-1.5", color: "muted", size: "sm", children: [isEnded ? "Ended" : "Ends", " ", _jsx(Span, { weight: "medium", color: "muted", children: endDate.toLocaleString() })] })] }), buyNowPrice !== null && !isEnded && (_jsxs(Row, { align: "center", gap: "sm", className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)] bg-primary-50 dark:bg-primary-900/20", padding: "inlineSm", rounded: "lg", children: [_jsx(Span, { size: "xs", color: "muted", children: "Buy Now:" }), _jsx(Span, { size: "base", weight: "bold", className: "text-primary-700 dark:text-primary-300", children: formatCurrency(buyNowPrice, currency) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, labels: { featured: "Featured", fasterDelivery: "Faster Delivery", ratedSeller: "Rated Seller", condition: "Condition", conditionNew: "New", conditionUsed: "Used", conditionBroken: "For Parts", conditionRefurbished: "Refurbished", returnable: "Returnable", freeShipping: "Free Shipping", codAvailable: "Cash on Delivery", emiAvailable: "EMI Available", wishlistCount: (n) => `${n} wishlisted`, categoryProductCount: (n, cat) => `${n} in ${cat}` } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryName || category }), !category && categoryName && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: categoryName }), brand && brandSlug && _jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand }), brand && !brandSlug && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand })] })), productFeatures && features.length > 0 && _jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures }), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this item" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => _jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i)) })] })), descriptionHtml && _jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" }), safeSeller && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Listed by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && _jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" })] }) }))] }));
 }
 function renderAuctionStoreReviews(storeReviews) {
     if (storeReviews.length === 0)
@@ -53,7 +54,7 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
         ? (initialAuction ?? undefined)
         : await productRepository.findByIdOrSlug(id).catch(() => undefined);
     const bidsResult = product
-        ? await listBidsByProduct(String(product.id), { pageSize: 20 }).catch(() => null)
+        ? await listBidsByProduct(String(product.id), { pageSize: 5 }).catch(() => null)
         : null;
     const storeId = product?.storeId;
     const storeReviews = storeId
@@ -83,6 +84,7 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
         : typeof p.mainImage === "string"
             ? [p.mainImage]
             : [];
+    const productVideo = p.video;
     const endDate = p.auctionEndDate ? new Date(p.auctionEndDate) : null;
     const isEnded = endDate ? endDate < new Date() : false;
     const bidCount = typeof p.bidCount === "number" ? p.bidCount : 0;
@@ -125,23 +127,18 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
                     price: typeof p.price === "number" ? p.price : undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: typeof p.storeName === "string" ? p.storeName : undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: CLS_BREADCRUMB_LINK, children: "Auctions" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(AuctionDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title })), renderInfo: () => renderAuctionInfoPanel({ title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref }), renderBidForm: () => onPlaceBid ? (_jsx(Stack, { id: "auction-bid-form", gap: "3", children: _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(Span, { size: "xl", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids", !isEnded && _jsxs(_Fragment, { children: [" \u00B7 min increment ", formatCurrency(minBidIncrement, currency)] })] })] }), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, minBidIncrement: minBidIncrement, currency: currency, isEnded: isEnded, buyNowPrice: buyNowPrice, bidsHaveStarted: bidsHaveStarted, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] }) })) : (
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: CLS_BREADCRUMB_LINK, children: "Auctions" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(AuctionDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title })), renderInfo: () => renderAuctionInfoPanel({ productId: String(product.id), title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref }), renderBidForm: () => onPlaceBid ? (_jsx(Stack, { id: "auction-bid-form", gap: "3", children: _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(LiveBidPrice, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "xl", badgeSize: "xs" }), !isEnded && (_jsxs(Span, { size: "xs", color: "muted", children: ["min increment ", formatCurrency(minBidIncrement, currency)] }))] }), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, minBidIncrement: minBidIncrement, currency: currency, isEnded: isEnded, buyNowPrice: buyNowPrice, bidsHaveStarted: bidsHaveStarted, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] }) })) : (
                         /* Read-only bid panel — shown when no bid action is wired (preview/demo) */
-                        _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [_jsx(Stack, { gap: "xs", children: _jsxs(Text, { size: "xs", color: "muted", children: ["Starting bid: ", formatCurrency(startingBid, currency), !isEnded && _jsxs(_Fragment, { children: [" \u00B7 min increment ", formatCurrency(minBidIncrement, currency)] })] }) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Input, { type: "number", placeholder: `At least ${formatCurrency(currentBid + minBidIncrement, currency)}`, min: currentBid + minBidIncrement, "aria-label": "Your bid amount", disabled: isEnded }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isEnded, children: isEnded ? "Auction Ended" : "Place Bid" }), buyNowPrice !== null && !isEnded && !bidsHaveStarted && (_jsxs(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, children: ["Buy Now \u2014 ", formatCurrency(buyNowPrice, currency)] }))] }), tags.length > 0 && (_jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: tag }, tag))) }) }))] })), renderMobileBidForm: () => !isEnded && onPlaceBid ? (_jsxs(Stack, { className: `lg:hidden ${__P.p4}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { size: "base", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " bids"] })] }), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, minBidIncrement: minBidIncrement, currency: currency, isEnded: isEnded, buyNowPrice: buyNowPrice, bidsHaveStarted: bidsHaveStarted, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] })) : !isEnded ? (_jsxs(Div, { className: `${__P.p4} lg:hidden`, border: "subtle", rounded: "xl", surface: "muted", children: [_jsxs(Row, { align: "center", gap: "sm", className: "mb-3", children: [_jsx(Span, { size: "base", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " bids"] })] }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Place Bid" })] })) : null, renderSublistingSection: sublistingCategoryId
+                        _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [_jsx(Stack, { gap: "xs", children: _jsxs(Text, { size: "xs", color: "muted", children: ["Starting bid: ", formatCurrency(startingBid, currency), !isEnded && _jsxs(_Fragment, { children: [" \u00B7 min increment ", formatCurrency(minBidIncrement, currency)] })] }) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Input, { type: "number", placeholder: `At least ${formatCurrency(currentBid + minBidIncrement, currency)}`, min: currentBid + minBidIncrement, "aria-label": "Your bid amount", disabled: isEnded }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isEnded, children: isEnded ? "Auction Ended" : "Place Bid" }), buyNowPrice !== null && !isEnded && !bidsHaveStarted && (_jsxs(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, children: ["Buy Now \u2014 ", formatCurrency(buyNowPrice, currency)] }))] }), tags.length > 0 && (_jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: tag }, tag))) }) }))] })), renderMobileBidForm: () => !isEnded && onPlaceBid ? (_jsxs(Stack, { className: `lg:hidden ${__P.p4}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsx(LiveBidPrice, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "base", badgeSize: "xs" }), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, minBidIncrement: minBidIncrement, currency: currency, isEnded: isEnded, buyNowPrice: buyNowPrice, bidsHaveStarted: bidsHaveStarted, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] })) : !isEnded ? (_jsxs(Div, { className: `${__P.p4} lg:hidden`, border: "subtle", rounded: "xl", surface: "muted", children: [_jsxs(Row, { align: "center", gap: "sm", className: "mb-3", children: [_jsx(Span, { size: "base", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " bids"] })] }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Place Bid" })] })) : null, renderSublistingSection: sublistingCategoryId
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, customTabs: customSections.map((s) => ({
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),
                             })) })), renderBidHistory: () => {
-                            const bids = (bidsResult?.items ?? []).map((b) => ({
-                                id: String(b.id ?? ""),
-                                bidderId: String(b.userId ?? b.bidderId ?? ""),
-                                bidderName: (b.bidderName ?? b.userName),
-                                amount: (typeof b.bidAmount === "number" ? b.bidAmount : typeof b.amount === "number" ? b.amount : 0),
-                                placedAt: (b.bidDate ?? b.createdAt ?? b.bidAt ?? ""),
-                            }));
-                            return _jsx(CollapsibleBidHistory, { bids: bids, currency: currency });
+                            if (!bidsResult)
+                                return null;
+                            return (_jsx(CollapsibleBidHistory, { productId: String(product.id), initialData: bidsResult, currency: currency }));
                         }, renderRelated: () => {
                             const now = new Date();
                             const related = relatedDocs

package/dist/features/auctions/components/CollapsibleBidHistory.d.ts

@@ -1,8 +1,29 @@
 import React from "react";
 import type { BidHistoryEntry } from "../../products/components/BidHistory";
+import { type BidListResponse } from "../hooks/useBids";
+interface RawBidLike {
+    id?: string | number;
+    userId?: string;
+    bidderId?: string;
+    userName?: string;
+    bidderName?: string;
+    bidAmount?: number;
+    amount?: number;
+    bidDate?: string | Date;
+    createdAt?: string | Date;
+    bidAt?: string | Date;
+}
+/** Shared shape mapper — SSR's raw bid docs and useBids()'s client-fetched
+ *  pages both go through this so every page (SSR page 1, client pages 2+)
+ *  renders identically. */
+export declare function toBidHistoryEntry(b: RawBidLike): BidHistoryEntry;
 interface CollapsibleBidHistoryProps {
-    bids: BidHistoryEntry[];
+    productId: string;
+    /** SSR page-1 result — seeds `useBids()`'s cache so opening the section
+     *  doesn't trigger a redundant fetch for the page already rendered. */
+    initialData: BidListResponse;
     currency: string;
+    pageSize?: number;
 }
-export declare function CollapsibleBidHistory({ bids, currency }: CollapsibleBidHistoryProps): React.JSX.Element;
+export declare function CollapsibleBidHistory({ productId, initialData, currency, pageSize }: CollapsibleBidHistoryProps): React.JSX.Element;
 export {};

package/dist/features/auctions/components/CollapsibleBidHistory.js

@@ -1,12 +1,31 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div, Span } from "../../../ui";
+import { Button, Div, Row, Span } from "../../../ui";
+import { Pagination } from "../../../ui/components/Pagination";
 import { BidHistory } from "../../products/components/BidHistory";
+import { useBids } from "../hooks/useBids";
 const __O = {
     hidden: "overflow-hidden",
 };
-export function CollapsibleBidHistory({ bids, currency }) {
+/** Shared shape mapper — SSR's raw bid docs and useBids()'s client-fetched
+ *  pages both go through this so every page (SSR page 1, client pages 2+)
+ *  renders identically. */
+export function toBidHistoryEntry(b) {
+    const placedAtRaw = b.bidDate ?? b.createdAt ?? b.bidAt ?? "";
+    return {
+        id: String(b.id ?? ""),
+        bidderId: String(b.userId ?? b.bidderId ?? ""),
+        bidderName: b.bidderName ?? b.userName,
+        amount: typeof b.bidAmount === "number" ? b.bidAmount : typeof b.amount === "number" ? b.amount : 0,
+        placedAt: placedAtRaw instanceof Date ? placedAtRaw.toISOString() : placedAtRaw,
+    };
+}
+export function CollapsibleBidHistory({ productId, initialData, currency, pageSize = 5 }) {
     const [open, setOpen] = useState(false);
-    return (_jsxs(Div, { className: `mt-6 ${__O.hidden}`, border: "subtle", rounded: "xl", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setOpen((v) => !v), paddingX: "md", paddingY: "md", rounded: "none", className: "w-full justify-between bg-[var(--appkit-color-surface)]/60 hover:bg-[var(--appkit-color-surface-elevated)]", "aria-expanded": open, children: [_jsxs(Span, { size: "sm", weight: "semibold", className: "tracking-wide", color: "muted", transform: "uppercase", children: ["Bid History", bids.length > 0 && (_jsx(Span, { size: "xs", weight: "medium", className: "ml-2 normal-case tracking-normal", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: bids.length }))] }), _jsx("svg", { className: `h-4 w-4 text-zinc-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Div, { surface: "default", padding: "md", children: _jsx(BidHistory, { bids: bids, isEmpty: bids.length === 0, currency: currency }) }))] }));
+    const [page, setPage] = useState(1);
+    const { bids: rawBids, totalPages, isLoading } = useBids({ productId, page, pageSize }, { initialData, enabled: open });
+    const bids = rawBids.map(toBidHistoryEntry);
+    const total = initialData.total;
+    return (_jsxs(Div, { className: `mt-6 ${__O.hidden}`, border: "subtle", rounded: "xl", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setOpen((v) => !v), paddingX: "md", paddingY: "md", rounded: "none", className: "w-full justify-between bg-[var(--appkit-color-surface)]/60 hover:bg-[var(--appkit-color-surface-elevated)]", "aria-expanded": open, children: [_jsxs(Span, { size: "sm", weight: "semibold", className: "tracking-wide", color: "muted", transform: "uppercase", children: ["Bid History", total > 0 && (_jsx(Span, { size: "xs", weight: "medium", className: "ml-2 normal-case tracking-normal", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: total }))] }), _jsx("svg", { className: `h-4 w-4 text-zinc-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsxs(Div, { surface: "default", padding: "md", children: [_jsx(BidHistory, { bids: bids, isLoading: isLoading && bids.length === 0, isEmpty: !isLoading && bids.length === 0, currency: currency }), totalPages > 1 && (_jsx(Row, { justify: "center", className: "mt-4", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: setPage, size: "sm" }) }))] }))] }));
 }

package/dist/features/auctions/components/LiveBidPrice.d.ts

@@ -0,0 +1,19 @@
+export interface LiveBidPriceProps {
+    productId: string;
+    currentBid: number;
+    bidCount: number;
+    currency: string;
+    isEnded: boolean;
+    /** Matches the appkit `<Span size>` scale — pick to match the call site. */
+    priceSize?: "base" | "lg" | "xl" | "2xl";
+    badgeSize?: "xs" | "sm";
+}
+/**
+ * LiveBidPrice — the current-bid + bid-count pill, kept live via the
+ * `/auction-bids/{id}` SSE channel. Replaces 3 near-identical static
+ * SSR-only displays on the auction detail page (info panel, desktop and
+ * mobile compact bid-summary cards) so every viewer watching the page sees
+ * a new bid the instant it's placed, not just after their own bid or a
+ * page reload.
+ */
+export declare function LiveBidPrice({ productId, currentBid, bidCount, currency, isEnded, priceSize, badgeSize, }: LiveBidPriceProps): import("react").JSX.Element;

package/dist/features/auctions/components/LiveBidPrice.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row, Span } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { useLiveAuctionBid } from "../hooks/useLiveAuctionBid";
+/**
+ * LiveBidPrice — the current-bid + bid-count pill, kept live via the
+ * `/auction-bids/{id}` SSE channel. Replaces 3 near-identical static
+ * SSR-only displays on the auction detail page (info panel, desktop and
+ * mobile compact bid-summary cards) so every viewer watching the page sees
+ * a new bid the instant it's placed, not just after their own bid or a
+ * page reload.
+ */
+export function LiveBidPrice({ productId, currentBid, bidCount, currency, isEnded, priceSize = "xl", badgeSize = "xs", }) {
+    const live = useLiveAuctionBid(productId, currentBid, bidCount, { enabled: !isEnded });
+    return (_jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { weight: "bold", className: "text-primary-600 dark:text-primary-400", size: priceSize, children: formatCurrency(live.currentBid, currency) }), _jsxs(Span, { size: badgeSize, weight: "medium", rounded: "full", padding: "pill-md", surface: "subtle", color: "muted", children: [live.bidCount, " ", live.bidCount === 1 ? "bid" : "bids"] })] }));
+}

package/dist/features/auctions/components/PlaceBidFormClient.d.ts

@@ -18,7 +18,7 @@ export interface PlaceBidFormClientProps {
     onPlaceBid: (input: PlaceBidInput) => Promise<unknown>;
     onBuyNow?: () => Promise<unknown>;
 }
-export declare function PlaceBidFormClient({ productId, currentBid, startingBid, minBidIncrement, currency, isEnded, buyNowPrice, bidsHaveStarted, bidCount, tags, onPlaceBid, onBuyNow, }: PlaceBidFormClientProps): React.JSX.Element;
+export declare function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, startingBid, minBidIncrement, currency, isEnded, buyNowPrice, bidsHaveStarted, bidCount: ssrBidCount, tags, onPlaceBid, onBuyNow, }: PlaceBidFormClientProps): React.JSX.Element;
 /**
  * `PlaceBidModalButton` — opens a modal that hosts the same PlaceBidFormClient.
  *