@mohasinac/appkit 2.7.58 → 2.8.0

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

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Button, Div, Form, Grid, Input, Select, Stack, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
+import { Button, ConfirmDeleteModal, Div, Form, Grid, Input, Select, Stack, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ERROR_MESSAGES } from "../../../errors/messages";
@@ -29,6 +29,7 @@ export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, em
     const [productTypes, setProductTypes] = React.useState(["all"]);
     const [storeId, setStoreId] = React.useState(fixedStoreId ?? "");
     const [isActive, setIsActive] = React.useState(true);
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
     const [displayOrder, setDisplayOrder] = React.useState(String(PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER));
     const createEndpoint = endpointOverride?.create ?? ADMIN_ENDPOINTS.PRODUCT_FEATURES;
     const byIdEndpoint = endpointOverride?.byId ?? ADMIN_ENDPOINTS.PRODUCT_FEATURE_BY_ID;
@@ -138,13 +139,10 @@ export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, em
                                 const checked = productTypes.includes(opt.value);
                                 const pillClass = `${PILL_BASE_CLASS} ${checked ? PILL_CHECKED_CLASS : PILL_UNCHECKED_CLASS}`;
                                 return (_jsxs("label", { className: pillClass, children: [_jsx("input", { type: "checkbox", className: "sr-only", checked: checked, onChange: () => toggleProductType(opt.value) }), opt.label] }, opt.value));
-                            }) })] }), !fixedScope && (_jsx(Select, { label: "Scope", value: scope, onChange: (e) => setScope(e.target.value), options: PRODUCT_FEATURE_SCOPE_OPTIONS })), scope === "store" && !fixedStoreId && (_jsx(Select, { label: "Store", value: storeId, onChange: (e) => setStoreId(e.target.value), options: storeOptions, required: true, helperText: "Store-scope features are visible only on this store's listings." })), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Div, { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: isDisabled, children: isEdit ? "Save changes" : "Create feature" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                                if (confirm(DELETE_CONFIRM_TEXT)) {
-                                    deleteMutation.mutate();
-                                }
-                            }, children: "Delete" }))] })] }) }, "feature-form"));
+                            }) })] }), !fixedScope && (_jsx(Select, { label: "Scope", value: scope, onChange: (e) => setScope(e.target.value), options: PRODUCT_FEATURE_SCOPE_OPTIONS })), scope === "store" && !fixedStoreId && (_jsx(Select, { label: "Store", value: storeId, onChange: (e) => setStoreId(e.target.value), options: storeOptions, required: true, helperText: "Store-scope features are visible only on this store's listings." })), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Div, { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: isDisabled, children: isEdit ? "Save changes" : "Create feature" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete" }))] })] }) }, "feature-form"));
+    const deleteModal = deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Feature", message: DELETE_CONFIRM_TEXT, onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }));
     if (embedded) {
-        return _jsx(Div, { className: "overflow-y-auto p-4", children: formSection });
+        return _jsxs(Div, { className: "overflow-y-auto p-4", children: [formSection, deleteModal] });
     }
-    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Feature" : "New Feature", sections: [formSection] }));
+    return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Feature" : "New Feature", sections: [formSection] }), deleteModal] }));
 }

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

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

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

@@ -1,37 +1,22 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Plus } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
-import { BulkActionBar, Button, Div, ListingToolbar, ListingViewShell, Pagination, Row, SideDrawer, Text, } from "../../../ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { ListingLayout, Row } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 import { AdminFeatureEditorView } from "./AdminFeatureEditorView";
 import { PRODUCT_FEATURE_SCOPE_TABS } from "../../products/constants/product-features.constants";
-import { useBottomActions } from "../../layout";
 const PAGE_SIZE = 50;
-const DEFAULT_SORT = "displayOrder";
 const DEFAULT_SCOPE = "platform";
-const SORT_OPTIONS = [
-    { value: "displayOrder", label: "Display order" },
-    { value: "label", label: "Label A–Z" },
-    { value: "-label", label: "Label Z–A" },
-    { value: "-createdAt", label: "Newest" },
-];
 const STICKY_TABS_CLASS = "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex gap-2 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-2";
 const TAB_BASE_CLASS = "rounded-full px-3 py-1 text-xs font-medium border transition-colors";
 const TAB_ACTIVE_CLASS = "bg-primary text-white border-primary";
 const TAB_INACTIVE_CLASS = "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800";
-const PAGINATION_BAR_CLASS = "flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5";
-const ERROR_BANNER_CLASS = "mb-4 rounded-xl border border-red-200 bg-error-surface px-4 py-3 text-sm text-error dark:border-red-900/60";
 function mapFeatureRow(item, index) {
-    const productTypes = Array.isArray(item.productTypes)
-        ? item.productTypes
-        : [];
+    const productTypes = Array.isArray(item.productTypes) ? item.productTypes : [];
     const isActive = typeof item.isActive === "boolean" ? item.isActive : true;
     return {
         id: toStringValue(item.id, `feature-${index}`),
@@ -39,9 +24,7 @@ function mapFeatureRow(item, index) {
         secondary: [
             toStringValue(item.category, ""),
             productTypes.join(" · "),
-            item.scope === "store" && item.storeId
-                ? `store: ${item.storeId}`
-                : "",
+            item.scope === "store" && item.storeId ? `store: ${item.storeId}` : "",
         ]
             .filter(Boolean)
             .join(" — "),
@@ -50,53 +33,57 @@ function mapFeatureRow(item, index) {
     };
 }
 export function AdminFeaturesView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
-    const table = useUrlTable({
-        defaults: {
-            pageSize: String(PAGE_SIZE),
-            sort: DEFAULT_SORT,
-            scope: DEFAULT_SCOPE,
-        },
-    });
-    const { openCreatePanel, openEditPanel, closePanel, isCreateOpen, isEditOpen, editId, } = usePanelUrlSync();
-    const [searchInput, setSearchInput] = React.useState(table.get("q") || "");
-    const commitSearch = React.useCallback(() => {
-        table.set("q", searchInput.trim());
-    }, [searchInput, table]);
-    const resetAll = React.useCallback(() => {
-        table.setMany({ q: "", sort: "", scope: DEFAULT_SCOPE });
-        setSearchInput("");
-    }, [table]);
-    const scopeFilter = table.get("scope") || DEFAULT_SCOPE;
-    const hasActiveState = !!table.get("q") ||
-        table.get("sort") !== DEFAULT_SORT ||
-        scopeFilter !== DEFAULT_SCOPE;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+    const searchParams = useSearchParams();
+    const scopeFilter = searchParams.get("scope") || DEFAULT_SCOPE;
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const config = {
+        portal: "admin",
+        title: "Features",
+        searchPlaceholder: "Search features by label",
+        emptyLabel: "No features found",
+        filterKeys: [],
+        defaultSort: "displayOrder",
+        pageSize: PAGE_SIZE,
         queryKey: ["admin", "features", "listing", scopeFilter],
         endpoint: `${ADMIN_ENDPOINTS.PRODUCT_FEATURES}?scope=${scopeFilter}`,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "displayOrder", label: "Display order" },
+            { value: "label", label: "Label A–Z" },
+            { value: "-label", label: "Label Z–A" },
+            { value: "-createdAt", label: "Newest" },
+        ],
         mapRows: (response) => toRecordArray(response.items).map(mapFeatureRow),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    if (hasChildren) {
-        return (_jsx(ListingViewShell, { portal: "admin", ...props, children: children }));
-    }
-    const tabClass = (value) => `${TAB_BASE_CLASS} ${scopeFilter === value ? TAB_ACTIVE_CLASS : TAB_INACTIVE_CLASS}`;
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: "delete", label: ACTIONS.ADMIN["delete-feature"].label, variant: "secondary", onClick: () => { selection.clearSelection(); } },
-            ] } } : {});
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { searchValue: searchInput, searchPlaceholder: "Search features by label", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => {
-                    table.set("sort", v);
-                }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Feature"] }) }), _jsx(Row, { className: STICKY_TABS_CLASS, gap: "xs", children: PRODUCT_FEATURE_SCOPE_TABS.map((tab) => (_jsx("button", { type: "button", onClick: () => {
-                        table.set("scope", tab.value);
-                    }, className: tabClass(tab.value), children: tab.label }, tab.value))) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                    { id: "delete", label: ACTIONS.ADMIN["delete-feature"].label, variant: "secondary", onClick: () => { selection.clearSelection(); } },
-                ] }), totalPages > 1 && (_jsx(Div, { className: PAGINATION_BAR_CLASS, children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs(Div, { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Text, { as: "div", className: ERROR_BANNER_CLASS, children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No features found", onRowClick: (row) => openEditPanel(row.id) })] }), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Feature" : "Edit Feature", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminFeatureEditorView, { featureId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })) })] }));
+        buildFilters: () => undefined,
+        primaryAction: {
+            label: "Add Feature",
+            onClick: ({ openCreatePanel }) => openCreatePanel(),
+        },
+        buildBulkActions: (selection) => [
+            {
+                id: "delete",
+                label: ACTIONS.ADMIN["delete-feature"].label,
+                variant: "secondary",
+                onClick: () => selection.clearSelection(),
+            },
+        ],
+        renderAboveContent: () => (_jsx(Row, { className: STICKY_TABS_CLASS, gap: "xs", children: PRODUCT_FEATURE_SCOPE_TABS.map((tab) => (_jsx(ScopeTabButton, { value: tab.value, label: tab.label, current: scopeFilter }, tab.value))) })),
+        renderEditor: ({ editId, closePanel }) => (_jsx(AdminFeatureEditorView, { featureId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
+        resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Feature" : "Edit Feature"),
+    };
+    return _jsx(DataListingView, { config: config });
+}
+function ScopeTabButton({ value, label, current, }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const handleClick = () => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("scope", value);
+        router.replace(`${pathname}?${params.toString()}`);
+    };
+    const isActive = current === value;
+    return (_jsx("button", { type: "button", onClick: handleClick, className: `${TAB_BASE_CLASS} ${isActive ? TAB_ACTIVE_CLASS : TAB_INACTIVE_CLASS}`, children: label }));
 }

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

@@ -0,0 +1,3 @@
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminGroupedListingsViewProps = ListingLayoutProps;
+export declare function AdminGroupedListingsView({ children, ...props }: AdminGroupedListingsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AdminGroupedListingsView — admin moderation view for grouped product listings.
+ * W1-29 — pairs with the new GET /api/admin/grouped-listings endpoint.
+ */
+import React from "react";
+import { ListingLayout } from "../../../ui";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+const ADMIN_GROUPED_LISTINGS_CONFIG = {
+    portal: "admin",
+    title: "Grouped Listings",
+    searchPlaceholder: "Search grouped listings by title or seller",
+    emptyLabel: "No grouped listings",
+    filterKeys: [],
+    defaultSort: "-createdAt",
+    queryKey: ["admin", "grouped-listings"],
+    endpoint: "/api/admin/grouped-listings",
+    sortOptions: [
+        { value: "-createdAt", label: "Newest" },
+        { value: "createdAt", label: "Oldest" },
+        { value: "title", label: "Title A–Z" },
+    ],
+    mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+        id: toStringValue(item.id, `grouped-listing-${index}`),
+        primary: toStringValue(item.title ?? item.name, "Untitled group"),
+        secondary: [
+            toStringValue(item.storeName ?? item.storeId, "Unknown store"),
+            `${Array.isArray(item.productIds) ? item.productIds.length : 0} items`,
+        ].join(" · "),
+        status: toStringValue(item.isActive === false ? "inactive" : "active", "active"),
+        updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+    })),
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: () => "",
+};
+export function AdminGroupedListingsView({ children, ...props }) {
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    return _jsx(DataListingView, { config: ADMIN_GROUPED_LISTINGS_CONFIG });
+}

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

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

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

@@ -1,61 +1,44 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * AdminHistoryView — read-only admin insights for the top-level `history` collection.
  * One row per user with item count + last visit. Mirrors AdminWishlistsView.
  */
-import React, { useState, useCallback } from "react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
+import React from "react";
+import { ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
-import { AdminViewCards } from "./AdminViewCards";
-const PAGE_SIZE = 25;
-const DEFAULT_SORT = "-updatedAt";
-const SORT_OPTIONS = [
-    { value: "-updatedAt", label: "Recently active" },
-    { value: "-itemCount", label: "Largest first" },
-];
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+const ADMIN_HISTORY_CONFIG = {
+    portal: "admin",
+    title: "History",
+    searchPlaceholder: "Search by user ID",
+    emptyLabel: "No user history records found",
+    filterKeys: [],
+    defaultSort: "-updatedAt",
+    queryKey: ["admin", "history", "listing"],
+    endpoint: ADMIN_ENDPOINTS.ADMIN_HISTORY,
+    sortOptions: [
+        { value: "-updatedAt", label: "Recently active" },
+        { value: "-itemCount", label: "Largest first" },
+    ],
+    mapRows: (response) => toRecordArray(response.items).map((item, index) => {
+        const itemCount = typeof item.itemCount === "number" ? item.itemCount : 0;
+        const limit = typeof item.limit === "number" ? item.limit : 50;
+        return {
+            id: toStringValue(item.id, `hist-${index}`),
+            primary: toStringValue(item.userId, "Unknown user"),
+            secondary: `${itemCount} of ${limit} items`,
+            status: itemCount >= limit ? "At cap" : itemCount >= limit - 5 ? "Near cap" : "OK",
+            updatedAt: toRelativeDate(item.updatedAt),
+        };
+    }),
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: () => undefined,
+};
 export function AdminHistoryView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
-    const resetAll = useCallback(() => {
-        table.setMany({ q: "", sort: "" });
-        setSearchInput("");
-    }, [table]);
-    const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
-    }, [searchInput, table]);
-    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "history", "listing"],
-        endpoint: ADMIN_ENDPOINTS.ADMIN_HISTORY,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        q: table.get("q") || undefined,
-        mapRows: (response) => toRecordArray(response.items).map((item, index) => {
-            const itemCount = typeof item.itemCount === "number" ? item.itemCount : 0;
-            const limit = typeof item.limit === "number" ? item.limit : 50;
-            return {
-                id: toStringValue(item.id, `hist-${index}`),
-                primary: toStringValue(item.userId, "Unknown user"),
-                secondary: `${itemCount} of ${limit} items`,
-                status: itemCount >= limit ? "At cap" : itemCount >= limit - 5 ? "Near cap" : "OK",
-                updatedAt: toRelativeDate(item.updatedAt),
-            };
-        }),
-        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    if (hasChildren) {
-        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search by user ID", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-error-surface px-4 py-3 text-sm text-error dark:border-red-900/60", children: errorMessage })), view === "table" ? (_jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No user history records found" })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No user history records found", onRowClick: undefined, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] })] }));
+    return _jsx(DataListingView, { config: ADMIN_HISTORY_CONFIG });
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { type ListingViewShellProps } from "../../../ui";
+import { type ListingLayoutProps } from "../../../ui";
 import type { AdminTableColumn } from "../types";
 export interface AdminListingScaffoldRow {
     id: string;
@@ -12,7 +12,7 @@ export interface AdminListingScaffoldRow {
     isOnSale?: boolean;
     isSold?: boolean;
 }
-interface AdminListingScaffoldProps extends ListingViewShellProps {
+interface AdminListingScaffoldProps extends ListingLayoutProps {
     title: string;
     subtitle: string;
     actionLabel?: string;

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Button, Div, Input, ListingViewShell, Span, Text, } from "../../../ui";
+import { Button, Div, Input, ListingLayout, Span, Text, } from "../../../ui";
 import { AdminPageHeader } from "./AdminPageHeader";
 import { DataTable } from "./DataTable";
 const DEFAULT_FILTER_GROUPS = [
@@ -50,7 +50,7 @@ function renderActiveFilters(activeFilters) {
 export function AdminListingScaffold({ title, subtitle, actionLabel, actionHref, columns, getRowHref, searchPlaceholder, rows, isLoading, errorMessage, emptyLabel, filterGroups, activeFilters, resultSummary, onSearch, searchValue, onClearFilters, renderRowActions, children, headerSlot, filterContent, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, actionsSlot, ...props }) {
     const [localSearch, setLocalSearch] = React.useState(searchValue ?? "");
     const hasChildren = React.Children.count(children) > 0;
-    return (_jsx(ListingViewShell, { ...props, portal: "admin", headerSlot: headerSlot ?? (_jsx(AdminPageHeader, { title: title, subtitle: subtitle, actionLabel: actionLabel, onAction: () => undefined, themeConfig: {
+    return (_jsx(ListingLayout, { ...props, portal: "admin", headerSlot: headerSlot ?? (_jsx(AdminPageHeader, { title: title, subtitle: subtitle, actionLabel: actionLabel, onAction: () => undefined, themeConfig: {
                 gradient: "rounded-3xl border border-zinc-200 bg-gradient-to-r from-white to-zinc-50 dark:border-slate-800 dark:from-slate-950 dark:to-slate-900",
                 titleClass: "text-3xl font-bold text-zinc-950 dark:text-zinc-50",
                 subtitleClass: "text-sm text-zinc-600 dark:text-zinc-300",
@@ -64,5 +64,5 @@ export function AdminListingScaffold({ title, subtitle, actionLabel, actionHref,
             } })), sortSlot: sortSlot ?? (_jsx(Button, { type: "button", variant: "outline", size: "sm", children: "Newest first" })), actionsSlot: actionsSlot ??
             (actionLabel ? (actionHref ? (_jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => {
                     window.location.href = actionHref;
-                }, children: actionLabel })) : (_jsx(Button, { type: "button", variant: "primary", size: "sm", children: actionLabel }))) : undefined), filterActiveCount: activeFilters?.length ?? 0, filterPendingCount: 0, errorSlot: errorMessage ? (_jsx(Div, { className: "rounded-xl border border-red-200 bg-error-surface px-4 py-3 text-sm text-error dark:border-red-900/60", children: errorMessage })) : undefined, children: hasChildren ? (children) : (_jsx(DataTable, { columns: columns ?? buildColumns(), rows: rows, isLoading: isLoading, emptyLabel: emptyLabel, getRowHref: getRowHref, renderRowActions: renderRowActions })) }));
+                }, children: actionLabel })) : (_jsx(Button, { type: "button", variant: "primary", size: "sm", children: actionLabel }))) : undefined), filterActiveCount: activeFilters?.length ?? 0, filterPendingCount: 0, errorSlot: errorMessage ? (_jsx(Div, { className: "rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })) : undefined, children: hasChildren ? (children) : (_jsx(DataTable, { columns: columns ?? buildColumns(), rows: rows, isLoading: isLoading, emptyLabel: emptyLabel, getRowHref: getRowHref, renderRowActions: renderRowActions })) }));
 }

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

@@ -0,0 +1,3 @@
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminLiveViewProps = ListingLayoutProps;
+export declare function AdminLiveView({ children, ...props }: AdminLiveViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AdminLiveView — admin browse of live-item listings (W1-29).
+ */
+import React from "react";
+import { ListingLayout } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+const ADMIN_LIVE_CONFIG = {
+    portal: "admin",
+    title: "Live Items",
+    searchPlaceholder: "Search live items",
+    emptyLabel: "No live item listings",
+    filterKeys: [],
+    defaultSort: "-createdAt",
+    queryKey: ["admin", "live-items", "listing"],
+    endpoint: ADMIN_ENDPOINTS.PRODUCTS,
+    sortOptions: [
+        { value: "-createdAt", label: "Newest" },
+        { value: "createdAt", label: "Oldest" },
+        { value: "title", label: "Title A–Z" },
+    ],
+    mapRows: (response) => toRecordArray(response.items).map((item, index) => {
+        const live = (item.liveItem ?? {});
+        return {
+            id: toStringValue(item.id, `live-${index}`),
+            primary: toStringValue(item.title ?? item.productTitle, "Untitled live item"),
+            secondary: [
+                toStringValue(item.sellerName, "Unknown seller"),
+                toRupees(item.price),
+                toStringValue(live.species, ""),
+                Boolean(live.vendorVerified) ? "verified" : "pending",
+            ]
+                .filter(Boolean)
+                .join(" · "),
+            status: toStringValue(item.status, "draft"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        };
+    }),
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: () => "listingType==live",
+};
+export function AdminLiveView({ children, ...props }) {
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    return _jsx(DataListingView, { config: ADMIN_LIVE_CONFIG });
+}

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

@@ -1,5 +1,5 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface AdminNewsletterViewProps extends ListingViewShellProps {
+import type { ListingLayoutProps } from "../../../ui";
+export interface AdminNewsletterViewProps extends ListingLayoutProps {
     onBulkUnsubscribe?: (ids: string[]) => Promise<void>;
 }
 export declare function AdminNewsletterView({ children, onBulkUnsubscribe, ...props }: AdminNewsletterViewProps): import("react/jsx-runtime").JSX.Element;