@mohasinac/appkit 2.7.59 → 2.8.0

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

@@ -1,52 +1,96 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Plus } from "lucide-react";
-import { BulkActionBar, Button, Heading, ListingToolbar, ListingViewShell, Pagination, SideDrawer, Text, ListingFilterDrawer } from "../../../ui";
-import { useBottomActions } from "../../layout";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { Heading, ListingLayout, Span, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
-import { useAdminListing } from "../hooks/useAdminListing";
-import { DataTable } from "./DataTable";
-import { AdminViewCards } from "./AdminViewCards";
+import { DataListingView } from "./DataListingView";
 import { AdminFaqEditorView } from "./AdminFaqEditorView";
-const FILTER_KEYS = ["isActive"];
-const DEFAULT_SORT = "priority";
-const SORT_OPTIONS = [
-    { value: "priority", label: "Priority" },
-    { value: "-createdAt", label: "Newest" },
-    { value: "question", label: "Question A–Z" },
+const COLUMNS = [
+    {
+        key: "primary",
+        header: "Question",
+        sortable: true,
+        render: (row) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
+    },
+    {
+        key: "status",
+        header: "Status",
+        className: "w-32",
+        render: (row) => (_jsx(Span, { className: "inline-flex rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", children: row.status })),
+    },
+    {
+        key: "updatedAt",
+        header: "Updated",
+        className: "w-32",
+        render: (row) => (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: row.updatedAt })),
+    },
 ];
-export function AdminFaqsView({ children, getRowHref, onBulkArchive, onBulkDelete, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const listing = useAdminListing({
-        filterKeys: FILTER_KEYS,
-        defaultSort: DEFAULT_SORT,
+export function AdminFaqsView({ children, onBulkArchive, onBulkDelete, ...props }) {
+    const config = useMemo(() => ({
+        portal: "admin",
+        title: "FAQs",
+        searchPlaceholder: "Search questions, categories, or tokens",
+        emptyLabel: "No FAQs found",
+        filterKeys: ["isActive"],
+        defaultSort: "priority",
         queryKey: ["admin", "faqs", "listing"],
         endpoint: ADMIN_ENDPOINTS.FAQS,
+        sortOptions: [
+            { value: "priority", label: "Priority" },
+            { value: "-createdAt", label: "Newest" },
+            { value: "question", label: "Question A–Z" },
+        ],
+        columns: COLUMNS,
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `faq-${index}`),
             primary: toStringValue(item.question, "Untitled question"),
             secondary: toStringValue(item.category, "Uncategorized"),
-            status: toStringValue(typeof item.isActive === "boolean" ? (item.isActive ? "Published" : "Draft") : item.status, "Draft"),
+            status: toStringValue(typeof item.isActive === "boolean"
+                ? item.isActive
+                    ? "Published"
+                    : "Draft"
+                : item.status, "Draft"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-        buildFilters: (filterState) => {
-            const isActiveRaw = filterState.isActive;
-            return isActiveRaw ? `isActive==${isActiveRaw}` : undefined;
+        buildFilters: (state) => state.isActive ? `isActive==${state.isActive}` : undefined,
+        primaryAction: {
+            label: "Add FAQ",
+            onClick: ({ openCreatePanel }) => openCreatePanel(),
         },
-    });
-    const { view, setView, table, panel, searchInput, setSearchInput, commitSearch, filterOpen, setFilterOpen, openFilters, applyFilters, clearFilters, pendingFilters, setPendingFilters, activeFilterCount, hasActiveState, resetAll, rows, isLoading, errorMessage, refetch, currentPage, totalPages, selection } = listing;
-    const bulkActions = [
-        ...(onBulkArchive ? [buildBulkAction(ACTIONS.ADMIN["archive-faq"], async () => { await onBulkArchive(selection.selectedIds); selection.clearSelection(); refetch?.(); })] : []),
-        ...(onBulkDelete ? [buildBulkAction(ACTIONS.ADMIN["delete-faq"], async () => { await onBulkDelete(selection.selectedIds); selection.clearSelection(); refetch?.(); })] : []),
-    ];
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    if (hasChildren) {
-        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+        buildBulkActions: (selection) => [
+            ...(onBulkArchive
+                ? [
+                    buildBulkAction(ACTIONS.ADMIN["archive-faq"], async () => {
+                        await onBulkArchive(selection.selectedIds);
+                        selection.clearSelection();
+                    }),
+                ]
+                : []),
+            ...(onBulkDelete
+                ? [
+                    buildBulkAction(ACTIONS.ADMIN["delete-faq"], async () => {
+                        await onBulkDelete(selection.selectedIds);
+                        selection.clearSelection();
+                    }),
+                ]
+                : []),
+        ],
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [
+                        { label: "All", value: "" },
+                        { label: "Published", value: "true" },
+                        { label: "Draft", value: "false" },
+                    ].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isActive: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isActive || "") === opt.value
+                            ? "bg-primary text-white border-primary"
+                            : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt.label }, opt.label))) })] })),
+        renderEditor: ({ editId, closePanel }) => (_jsx(AdminFaqEditorView, { faqId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
+        resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add FAQ" : "Edit FAQ"),
+    }), [onBulkArchive, onBulkDelete]);
+    if (React.Children.count(children) > 0) {
+        return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "FAQs" }), children] }));
     }
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(Heading, { level: 1, className: "sr-only", children: "FAQs" }), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search questions, categories, or tokens", 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: panel.openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add FAQ"] }) }), 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) }) })), selection.selectedCount > 0 && bulkActions.length > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _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 FAQs found", onRowClick: (row) => panel.openEditPanel(row.id) })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No FAQs found", onRowClick: undefined, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [{ label: "All", value: "" }, { label: "Published", value: "true" }, { label: "Draft", value: "false" }].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isActive: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isActive || "") === opt.value ? "bg-primary text-white border-primary" : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt.label }, opt.label))) })] }) }), _jsx(SideDrawer, { isOpen: panel.isCreateOpen || panel.isEditOpen, onClose: panel.closePanel, title: panel.isCreateOpen ? "Add FAQ" : "Edit FAQ", mode: panel.isCreateOpen ? "create" : "edit", children: (panel.isCreateOpen || panel.isEditOpen) && (_jsx(AdminFaqEditorView, { faqId: panel.editId ?? undefined, onSaved: panel.closePanel, onDeleted: panel.closePanel, embedded: true })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, className: "sr-only", children: "FAQs" }), _jsx(DataListingView, { config: config })] }));
 }

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;