@mohasinac/appkit 4.10.0 → 4.11.1

package/dist/features/seller/components/SellerProductsView.js

@@ -3,30 +3,26 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { normalizeError } from "../../../errors/normalize";
 import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
-import React, { useState, useCallback } from "react";
+import { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
 import { Eye, EyeOff, Pencil, Trash2, Printer, MapPin } from "lucide-react";
 import { PhysicalLocationModal } from "./PhysicalLocationModal";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { Alert, Badge, BulkActionBar, Button, Div, ListingToolbar, ListingLayout, Pagination, Row, Select, Span, Text, useToast, StickyToolbar } from "../../../ui";
+import { Badge, Button, Div, Row, Select, Span, Text, useToast } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { SELLER_PRODUCT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ROUTES } from "../../../constants";
 import { normalizeListingType } from "../../products/utils/listing-type";
-import { toRecordArray, toRelativeDate, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { DataTable } from "../../admin/components/DataTable";
-import { useDataViewMode } from "../../account/hooks/useDataViewMode";
-import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
+import { toRecordArray, toRelativeDate, toStringValue } from "../hooks/useSellerListingData";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags";
 import { SellerProductsCards } from "./SellerProductsCards";
-import { SellerProductsFilterDrawer } from "./SellerProductsFilterDrawer";
+import { SellerProductsFilterFields } from "./SellerProductsFilterDrawer";
 import { LISTING_BADGE_VARIANT } from "../../products/utils/listing-badge-variant";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
+import { DataListingView } from "../../admin/components/DataListingView";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 const FILTER_KEYS = [
     "status",
     "category",
@@ -36,6 +32,8 @@ const FILTER_KEYS = [
     "maxPrice",
     "tags",
     "badges",
+    "listingType",
+    "showSold",
 ];
 const DEFAULT_SORT = "-createdAt";
 const SORT_OPTIONS = [
@@ -47,13 +45,8 @@ const SORT_OPTIONS = [
     { value: sortBy("price", "ASC"), label: "Price Low" },
 ];
 const STATUS_OPTIONS = SELLER_PRODUCT_STATUS_TABS;
-// S-STORE-2-A — `<TypeDropdown>` replaces the legacy chip strip. Same width on
-// mobile, narrower on desktop. Drives the `?listingType=` query param.
 function TypeDropdown({ active, onChange, }) {
     const flags = useListingTypeFlags();
-    // W1-43 — hide disabled types so the seller can't filter for an
-    // inactive listing surface. Bundle is a categoryType (not a listingType)
-    // and stays unconditionally available.
     const options = [
         { value: "all", label: "All listings" },
         flags.standard && { value: "standard", label: "Standard" },
@@ -90,23 +83,19 @@ const PRODUCT_COLUMNS = [
         header: "Status",
         className: "w-28",
         render: (row) => {
-            // Real ProductStatus is draft|published|in_review|archived — "active"
-            // and "sold" are not stored status values (sold is tracked separately
-            // via isSold, shown via the "Show sold" toolbar toggle, not this
-            // column), so those two branches never matched and were dead code.
             const variant = row.status === "published"
                 ? "success"
                 : row.status === "draft"
                     ? "default"
                     : "danger";
-            return (_jsx(Badge, { variant: variant, children: row.status }));
+            return _jsx(Badge, { variant: variant, children: row.status });
         },
     },
     {
         key: "updatedAt",
         header: "Updated",
         className: "w-28",
-        render: (row) => (_jsx(Span, { size: "xs", color: "muted", children: row.updatedAt })),
+        render: (row) => _jsx(Span, { size: "xs", color: "muted", children: row.updatedAt }),
     },
     {
         key: "physicalLocation",
@@ -115,16 +104,15 @@ const PRODUCT_COLUMNS = [
         render: (row) => row.physicalLocation ? (_jsxs(Span, { size: "xs", className: "font-mono text-[var(--appkit-color-text-muted)]", children: [row.physicalLocation.zone, "/", row.physicalLocation.shelf, "/", row.physicalLocation.bin] })) : (_jsx(Span, { size: "xs", color: "faint", children: "\u2014" })),
     },
 ];
-export function SellerProductsView({ onDeleteProduct, onCreateClick, children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const { view, setView } = useDataViewMode("list");
+export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
     const dispatch = useActionDispatch();
     const { showToast } = useToast();
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
-    const [filterOpen, setFilterOpen] = useState(false);
-    // listingKind is URL-driven so it survives navigation and back/forward
-    const listingKind = (table.get("listingType") || "all");
+    // Independent useUrlTable() instance for the type-dropdown + "Show sold"
+    // toggle (Root Cause #35) — reads/writes the same URL params DataListingView's
+    // own internal table also reads via `filterKeys`, so both stay in sync.
+    const sideTable = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
+    const listingKind = (sideTable.get("listingType") || "all");
+    const showSold = sideTable.get("showSold") === "true";
     const { deletingId, handleDelete: performDelete } = useEntityDelete({
         deleteFn: onDeleteProduct,
         onSuccess: (id) => { setDeletedIds((prev) => new Set([...prev, id])); },
@@ -133,148 +121,10 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
     const [publishingId, setPublishingId] = useState(null);
     const [statusOverrides, setStatusOverrides] = useState(new Map());
     const [setLocationOpen, setSetLocationOpen] = useState(false);
-    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-    const openFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-        setFilterOpen(true);
-    }, [table]);
-    const applyFilters = useCallback(() => {
-        const updates = { page: "1" };
-        for (const k of FILTER_KEYS)
-            updates[k] = pendingFilters[k] ?? "";
-        table.setMany(updates);
-        setFilterOpen(false);
-    }, [pendingFilters, table]);
-    const clearFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
-    }, []);
-    const resetAll = useCallback(() => {
-        const updates = { q: "", sort: "", listingType: "", showSold: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
-        setSearchInput("");
-    }, [table]);
-    const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
-    }, [searchInput, table]);
+    const [selectedIdsForLocation, setSelectedIdsForLocation] = useState([]);
     const handleKindChange = useCallback((kind) => {
-        // setMany prevents the double router.replace race condition (audit-double-navigation)
-        table.setMany({ listingType: kind === "all" ? "" : kind, page: "1" });
-    }, [table]);
-    const showSold = table.get("showSold") === "true";
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") ||
-        table.get("sort") !== DEFAULT_SORT ||
-        activeFilterCount > 0 ||
-        listingKind !== "all" ||
-        showSold;
-    const statusRaw = table.get("status");
-    const statusFilter = statusRaw && statusRaw !== "All" ? sieveFilter("status", SIEVE_OP.EQ, statusRaw) : undefined;
-    // SB1-G — single-field listingType clause. The repository's Sieve aliases
-    // accept both `==auction|preorder|standard` and `==pre-order` directly.
-    const kindFilter = listingKind === "all" ? undefined : sieveFilter("listingType", SIEVE_OP.EQ, listingKind);
-    const soldFilter = showSold ? undefined : "isSold==false";
-    const filters = [statusFilter, kindFilter, soldFilter].filter(Boolean).join(",") || undefined;
-    const { rows, total, isLoading, errorMessage } = useSellerListingData({
-        queryKey: ["seller", "products", "listing", listingKind],
-        endpoint: SELLER_ENDPOINTS.PRODUCTS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
-        mapRows: (response) => toRecordArray(response.products).map((item, index) => {
-            // SB1-G — derive kind from canonical listingType with legacy fallback.
-            const lt = normalizeListingType(item);
-            const kind = lt === "auction"
-                ? "auction"
-                : lt === "pre-order"
-                    ? "pre-order"
-                    : lt === "prize-draw"
-                        ? "prize-draw"
-                        : "standard";
-            const priceRaw = typeof item.price === "number" ? item.price : 0;
-            // Auction listings lost their reserve/bid/end-date summary when this
-            // view was consolidated from the old dedicated SellerAuctionsView —
-            // restore it into `secondary` (the one line every row/card renders)
-            // instead of the generic condition string, which auction sellers
-            // care about far less than bid activity.
-            const auctionSecondary = kind === "auction"
-                ? [
-                    typeof item.reservePrice === "number"
-                        ? `Reserve ₹${item.reservePrice.toLocaleString("en-IN")}`
-                        : null,
-                    `${typeof item.bidCount === "number" ? item.bidCount : 0} bids`,
-                    item.auctionEndDate
-                        ? `Ends ${new Date(item.auctionEndDate).toLocaleDateString("en-IN", { month: "short", day: "numeric" })}`
-                        : null,
-                ]
-                    .filter(Boolean)
-                    .join(" · ")
-                : "";
-            return {
-                id: toStringValue(item.id, `product-${index}`),
-                primary: toStringValue(item.title ?? item.name, "Untitled product"),
-                secondary: auctionSecondary || toStringValue(item.condition, ""),
-                status: toStringValue(item.status, "draft"),
-                updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-                imageUrl: toStringValue(item.mainImage ?? item.images?.[0], undefined),
-                image: toStringValue(item.mainImage ?? item.images?.[0], undefined),
-                listingKind: kind,
-                price: priceRaw ? `₹${priceRaw.toLocaleString("en-IN")}` : "—",
-                physicalLocation: item.physicalLocation &&
-                    typeof item.physicalLocation.zone === "string"
-                    ? item.physicalLocation
-                    : undefined,
-            };
-        }),
-        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const visibleRows = rows
-        .filter((r) => !deletedIds.has(r.id))
-        .map((r) => statusOverrides.has(r.id) ? { ...r, status: statusOverrides.get(r.id) } : r);
-    const selection = useBulkSelection({ items: visibleRows, keyExtractor: (r) => r.id });
-    // handleBulkPrintLabels/handleSetLocation (useCallback) and useBottomActions
-    // must run unconditionally on every render — they were previously declared
-    // after the `hasChildren` early return below, which skips these hook calls
-    // in passthrough mode, violating the Rules of Hooks.
-    const handleBulkPrintLabels = useCallback(() => {
-        const ids = selection.selectedIds.join(",");
-        void dispatch({
-            type: "NAVIGATE",
-            href: `${String(ROUTES.STORE.PRINT_CENTER)}?type=product&ids=${ids}&autoprint=1`,
-        });
-    }, [selection.selectedIds, dispatch]);
-    const handleSetLocation = useCallback(async (loc) => {
-        try {
-            const res = await fetch(SELLER_ENDPOINTS.PRODUCTS_BULK_LOCATION, {
-                method: "PATCH",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ productIds: selection.selectedIds, physicalLocation: loc }),
-            });
-            if (!res.ok) {
-                const body = await res.json().catch(() => null);
-                throw new Error(body?.error ?? "Failed to update location");
-            }
-            showToast("Location updated.", "success");
-            setSetLocationOpen(false);
-        }
-        catch (err) {
-            void normalizeError(err);
-            showToast(err instanceof Error ? err.message : "Failed to update location.", "error");
-        }
-    }, [selection.selectedIds, showToast]);
-    const bulkActions = [
-        buildBulkAction(ACTIONS.STORE["print-labels"], handleBulkPrintLabels, { icon: _jsx(Printer, { className: "w-4 h-4" }) }),
-        buildBulkAction(ACTIONS.STORE["set-location"], () => setSetLocationOpen(true), { icon: _jsx(MapPin, { className: "w-4 h-4" }) }),
-    ];
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    if (hasChildren) {
-        return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
-    }
+        sideTable.setMany({ listingType: kind === "all" ? "" : kind, page: "1" });
+    }, [sideTable]);
     const handleEdit = (row) => {
         const href = row.listingKind === "auction"
             ? String(ROUTES.STORE.AUCTIONS_EDIT(row.id))
@@ -290,7 +140,6 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
             return;
         await performDelete(row.id);
     };
-    // S-STORE-2-C — Duplicate verb. Server-side endpoint is /api/store/products/[id]/duplicate.
     const handleDuplicate = async (row) => {
         const res = await fetch(SELLER_ENDPOINTS.PRODUCT_DUPLICATE(row.id), {
             method: "POST",
@@ -320,21 +169,114 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
             setPublishingId(null);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search products by name\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
-                            { label: "Show sold", active: showSold, onChange: (next) => table.set("showSold", next ? "true" : "") },
-                        ], extra: onCreateClick ? (_jsx(Button, { variant: "primary", size: "sm", onClick: onCreateClick, children: "+ New Listing" })) : null }), _jsx(TypeDropdown, { active: listingKind, onChange: handleKindChange }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "default", border: true, padding: "sm", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedIds.length > 0 && (_jsx(StickyToolbar, { offset: "header+bulk-actions", tone: "default", border: true, padding: "sm", z: "above-toolbar", children: _jsx(BulkActionBar, { selectedCount: selection.selectedIds.length, onClearSelection: selection.clearSelection, actions: bulkActions }) })), _jsxs(Div, { paddingX: "x-sm-lg-md", padding: "y-md", children: [errorMessage && (_jsx(Alert, { variant: "error", className: "mb-4", children: errorMessage })), view !== "table" && (_jsx(SellerProductsCards, { view: view, rows: visibleRows, isLoading: isLoading, listingKind: listingKind, selectedIds: selection.selectedIdSet, toggle: selection.toggle, onEdit: handleEdit, onDuplicate: (row) => void handleDuplicate(row), onDelete: onDeleteProduct ? (row) => void handleDelete(row) : undefined })), view === "table" && (_jsx(DataTable, { columns: PRODUCT_COLUMNS, rows: visibleRows, isLoading: isLoading, emptyLabel: listingKind !== "all"
-                                    ? `No ${listingKind} listings found`
-                                    : "No products listed yet", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: () => selection.toggleAll(), rowHrefTemplate: (row) => 
-                                // S-STORE-2-D — row click → public detail/preview, not edit.
-                                // A function is safe here: both this view and DataTable are
-                                // already client components, and the target varies per row
-                                // (not expressible as a single {id} template string).
-                                row.listingKind === "auction"
-                                    ? `/auctions/${row.id}`
-                                    : row.listingKind === "pre-order"
-                                        ? `/pre-orders/${row.id}`
-                                        : `/products/${row.id}`, renderRowActions: (row) => {
-                                    const isPublished = (statusOverrides.get(row.id) ?? row.status) === "published";
-                                    return (_jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); handleEdit(row); }, "aria-label": ACTIONS.STORE["edit-listing"].ariaLabel, children: _jsx(Pencil, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleTogglePublish(row); }, "aria-label": isPublished ? "Unpublish" : "Publish", title: isPublished ? "Unpublish" : "Publish", disabled: publishingId === row.id, children: isPublished ? _jsx(EyeOff, { className: "w-4 h-4" }) : _jsx(Eye, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleDuplicate(row); }, "aria-label": "Duplicate listing", title: "Duplicate", children: "\u29C9" }), onDeleteProduct && (_jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-listing"], onClick: (e) => { e.stopPropagation(); void handleDelete(row); }, disabled: deletingId === row.id, className: "text-[var(--appkit-color-error)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(Trash2, { className: "w-4 h-4" }) }))] }));
-                                } }))] }), _jsx(SellerProductsFilterDrawer, { isOpen: filterOpen, pendingFilters: pendingFilters, statusOptions: STATUS_OPTIONS, activeFilterCount: activeFilterCount, onChange: setPendingFilters, onClear: clearFilters, onApply: applyFilters, onClose: () => setFilterOpen(false) })] }), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selection.selectedIds.length, onSave: handleSetLocation, onClose: () => setSetLocationOpen(false) }))] }));
+    const handleSetLocation = useCallback(async (loc, ids) => {
+        try {
+            const res = await fetch(SELLER_ENDPOINTS.PRODUCTS_BULK_LOCATION, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ productIds: ids, physicalLocation: loc }),
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => null);
+                throw new Error(body?.error ?? "Failed to update location");
+            }
+            showToast("Location updated.", "success");
+            setSetLocationOpen(false);
+        }
+        catch (err) {
+            void normalizeError(err);
+            showToast(err instanceof Error ? err.message : "Failed to update location.", "error");
+        }
+    }, [showToast]);
+    const config = {
+        portal: "seller",
+        title: "Products",
+        searchPlaceholder: "Search products by name…",
+        emptyLabel: listingKind !== "all" ? `No ${listingKind} listings found` : "No products listed yet",
+        filterKeys: FILTER_KEYS,
+        defaultSort: DEFAULT_SORT,
+        queryKey: ["seller", "products", "listing", listingKind],
+        endpoint: SELLER_ENDPOINTS.PRODUCTS,
+        sortOptions: SORT_OPTIONS,
+        columns: PRODUCT_COLUMNS,
+        toggles: [
+            { label: "Show sold", active: showSold, onChange: (next) => sideTable.set("showSold", next ? "true" : "") },
+        ],
+        primaryAction: onCreateClick ? { label: "New Listing", onClick: onCreateClick } : undefined,
+        mapRows: (response) => {
+            const rows = toRecordArray(response.products).map((item, index) => {
+                const lt = normalizeListingType(item);
+                const kind = lt === "auction"
+                    ? "auction"
+                    : lt === "pre-order"
+                        ? "pre-order"
+                        : lt === "prize-draw"
+                            ? "prize-draw"
+                            : "standard";
+                const priceRaw = typeof item.price === "number" ? item.price : 0;
+                const auctionSecondary = kind === "auction"
+                    ? [
+                        typeof item.reservePrice === "number"
+                            ? `Reserve ₹${item.reservePrice.toLocaleString("en-IN")}`
+                            : null,
+                        `${typeof item.bidCount === "number" ? item.bidCount : 0} bids`,
+                        item.auctionEndDate
+                            ? `Ends ${new Date(item.auctionEndDate).toLocaleDateString("en-IN", { month: "short", day: "numeric" })}`
+                            : null,
+                    ]
+                        .filter(Boolean)
+                        .join(" · ")
+                    : "";
+                return {
+                    id: toStringValue(item.id, `product-${index}`),
+                    primary: toStringValue(item.title ?? item.name, "Untitled product"),
+                    secondary: auctionSecondary || toStringValue(item.condition, ""),
+                    status: toStringValue(item.status, "draft"),
+                    updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+                    imageUrl: toStringValue(item.mainImage ?? item.images?.[0], undefined),
+                    image: toStringValue(item.mainImage ?? item.images?.[0], undefined),
+                    listingKind: kind,
+                    price: priceRaw ? `₹${priceRaw.toLocaleString("en-IN")}` : "—",
+                    physicalLocation: item.physicalLocation &&
+                        typeof item.physicalLocation.zone === "string"
+                        ? item.physicalLocation
+                        : undefined,
+                };
+            });
+            return rows.filter((r) => !deletedIds.has(r.id)).map((r) => statusOverrides.has(r.id) ? { ...r, status: statusOverrides.get(r.id) } : r);
+        },
+        getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
+        buildFilters: (state) => {
+            const statusFilter = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined;
+            const kindFilter = !state.listingType || state.listingType === "all" ? undefined : sieveFilter("listingType", SIEVE_OP.EQ, state.listingType);
+            const soldFilter = state.showSold === "true" ? undefined : "isSold==false";
+            return [statusFilter, kindFilter, soldFilter].filter(Boolean).join(",") || undefined;
+        },
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(SellerProductsFilterFields, { pendingFilters: pendingFilters, statusOptions: STATUS_OPTIONS, onChange: setPendingFilters })),
+        renderAboveContent: () => _jsx(TypeDropdown, { active: listingKind, onChange: handleKindChange }),
+        buildBulkActions: (selection) => {
+            const handleBulkPrintLabels = () => {
+                const ids = selection.selectedIds.join(",");
+                void dispatch({
+                    type: "NAVIGATE",
+                    href: `${String(ROUTES.STORE.PRINT_CENTER)}?type=product&ids=${ids}&autoprint=1`,
+                });
+            };
+            return [
+                buildBulkAction(ACTIONS.STORE["print-labels"], handleBulkPrintLabels, { icon: _jsx(Printer, { className: "w-4 h-4" }) }),
+                buildBulkAction(ACTIONS.STORE["set-location"], () => { setSelectedIdsForLocation(selection.selectedIds); setSetLocationOpen(true); }, { icon: _jsx(MapPin, { className: "w-4 h-4" }) }),
+            ];
+        },
+        renderCards: (rows, view, selection, isLoading) => (_jsx(SellerProductsCards, { view: view, rows: rows, isLoading: isLoading, listingKind: listingKind, selectedIds: new Set(selection.selectedIds), toggle: selection.toggleSelect, onEdit: handleEdit, onDuplicate: (row) => void handleDuplicate(row), onDelete: onDeleteProduct ? (row) => void handleDelete(row) : undefined })),
+        rowHrefTemplate: (row) => row.listingKind === "auction"
+            ? `/auctions/${row.id}`
+            : row.listingKind === "pre-order"
+                ? `/pre-orders/${row.id}`
+                : `/products/${row.id}`,
+        renderRowActions: (row) => {
+            const isPublished = (statusOverrides.get(row.id) ?? row.status) === "published";
+            return (_jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); handleEdit(row); }, "aria-label": ACTIONS.STORE["edit-listing"].ariaLabel, children: _jsx(Pencil, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleTogglePublish(row); }, "aria-label": isPublished ? "Unpublish" : "Publish", title: isPublished ? "Unpublish" : "Publish", disabled: publishingId === row.id, children: isPublished ? _jsx(EyeOff, { className: "w-4 h-4" }) : _jsx(Eye, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleDuplicate(row); }, "aria-label": "Duplicate listing", title: "Duplicate", children: "\u29C9" }), onDeleteProduct && (_jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-listing"], onClick: (e) => { e.stopPropagation(); void handleDelete(row); }, disabled: deletingId === row.id, className: "text-[var(--appkit-color-error)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(Trash2, { className: "w-4 h-4" }) }))] }));
+        },
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), setLocationOpen && (_jsx(PhysicalLocationModal, { count: selectedIdsForLocation.length, onSave: (loc) => handleSetLocation(loc, selectedIdsForLocation), onClose: () => setSetLocationOpen(false) }))] }));
 }