@mohasinac/appkit 2.7.58 → 2.8.0

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

@@ -1,44 +1,18 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
-import { X } from "lucide-react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, Button, FilterChipGroup, Form, FormActions, Input, ListingToolbar, Modal, Pagination, ListingViewShell, RowActionMenu, Text as AppText, useToast } from "../../../ui";
-import { AdminViewCards } from "./AdminViewCards";
+import { Button, FilterChipGroup, Form, FormActions, Input, ListingLayout, Modal, RowActionMenu, Text as AppText, useToast, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_USER_STATUS_TABS, ADMIN_USER_ROLE_TABS } from "../constants/filter-tabs";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 import { apiClient } from "../../../http";
-import { DataTable } from "./DataTable";
 import { AdminUserEditorView } from "./AdminUserEditorView";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status", "role"];
-const DEFAULT_SORT = "-createdAt";
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-    { value: "displayName", label: "Name A–Z" },
-];
-const STATUS_OPTIONS = ADMIN_USER_STATUS_TABS;
-const ROLE_OPTIONS = ADMIN_USER_ROLE_TABS;
-function UsersFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, pendingFilters, setPendingFilters, applyFilters, }) {
-    if (!filterOpen)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Role", tabs: ROLE_OPTIONS, value: pendingFilters.role ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, role: id })) })] }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }));
-}
 export function AdminUsersView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     const toast = useToast();
     const queryClient = useQueryClient();
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
-    const [filterOpen, setFilterOpen] = useState(false);
-    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState(null);
     const [banModalOpen, setBanModalOpen] = useState(false);
@@ -57,7 +31,9 @@ export function AdminUsersView({ children, ...props }) {
             setBanReason("");
             void queryClient.invalidateQueries({ queryKey: ["admin", "users", "listing"] });
         },
-        onError: () => { toast.showToast("Failed to ban user.", "error"); },
+        onError: () => {
+            toast.showToast("Failed to ban user.", "error");
+        },
     });
     const unbanUser = useMutation({
         mutationFn: (uid) => apiClient.post(ADMIN_ENDPOINTS.USER_UNBAN(uid), {}),
@@ -65,51 +41,27 @@ export function AdminUsersView({ children, ...props }) {
             toast.showToast("Ban lifted.", "success");
             void queryClient.invalidateQueries({ queryKey: ["admin", "users", "listing"] });
         },
-        onError: () => { toast.showToast("Failed to lift ban.", "error"); },
+        onError: () => {
+            toast.showToast("Failed to lift ban.", "error");
+        },
     });
-    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: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
-        setSearchInput("");
-    }, [table]);
-    const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
-    }, [searchInput, table]);
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || activeFilterCount > 0;
-    const filterParts = [];
-    const statusRaw = table.get("status");
-    if (statusRaw && statusRaw !== "All") {
-        filterParts.push(statusRaw === "Active" ? "disabled==false" : "disabled==true");
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    const roleRaw = table.get("role");
-    if (roleRaw && roleRaw !== "All")
-        filterParts.push(`role==${roleRaw}`);
-    const filters = filterParts.join(",") || undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+    const config = {
+        portal: "admin",
+        title: "Users",
+        searchPlaceholder: "Search users, email, or seller handles",
+        emptyLabel: "No users found",
+        filterKeys: ["status", "role"],
+        defaultSort: "-createdAt",
         queryKey: ["admin", "users", "listing"],
         endpoint: ADMIN_ENDPOINTS.USERS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+            { value: "displayName", label: "Name A–Z" },
+        ],
         mapRows: (response) => toRecordArray(response.users).map((item, index) => {
             const isDisabled = Boolean(item.isDisabled ?? item.disabled);
             const isHardBanned = isDisabled && Boolean(item.hardBanReason);
@@ -140,38 +92,64 @@ export function AdminUsersView({ children, ...props }) {
                 return response.total;
             return 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 });
-    }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search users, email, or seller handles", 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 }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                            { id: "manage", label: ACTIONS.ADMIN["manage-user"].label, variant: "primary", onClick: () => { setSelectedRow(rows.find(r => r.id === selection.selectedIds[0]) ?? null); setDrawerOpen(true); selection.clearSelection(); } },
-                        ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: 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 users found", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next ? selection.setSelectedIds(rows.map(r => r.id)) : selection.clearSelection(), renderRowActions: (row) => {
-                                    const ur = row;
-                                    const isBanned = ur.status === "Hard banned";
-                                    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                                                { id: "manage", label: ACTIONS.ADMIN["manage-user"].label, variant: "primary", onClick: () => { setSelectedRow(rows.find(r => r.id === selection.selectedIds[0]) ?? null); setDrawerOpen(true); selection.clearSelection(); } },
-                                            ] } } : {});
-                                    return (_jsx(RowActionMenu, { actions: [
-                                            {
-                                                label: ACTIONS.ADMIN["manage-user"].label,
-                                                onClick: () => { setSelectedRow(ur); setDrawerOpen(true); },
-                                            },
-                                            {
-                                                label: ACTIONS.ADMIN["ban-user"].label,
-                                                onClick: () => { setBanTargetId(ur.id); setBanReason(""); setBanModalOpen(true); },
-                                                disabled: isBanned,
-                                            },
-                                            {
-                                                label: ACTIONS.ADMIN["unban-user"].label,
-                                                onClick: () => unbanUser.mutate(ur.id),
-                                                disabled: !isBanned || unbanUser.isPending,
-                                            },
-                                        ] }));
-                                } })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No users found", onRowClick: (row) => { setSelectedRow(row); setDrawerOpen(true); }, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsx(UsersFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters })] }), _jsx(AdminUserEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), userId: selectedRow?.id, displayName: selectedRow?.primary, currentRole: toStringValue(selectedRow?._raw?.role, "user"), currentEmailVerified: Boolean(selectedRow?._raw?.emailVerified), ownedStoreId: toStringValue(selectedRow?._raw?.storeId, "") || undefined, ownedStoreName: toStringValue(selectedRow?._raw?.storeName, "") || undefined, currentIsHardBanned: Boolean((selectedRow?._raw?.isDisabled ?? selectedRow?._raw?.disabled) &&
+        buildFilters: (f) => {
+            const parts = [];
+            if (f.status && f.status !== "All") {
+                parts.push(f.status === "Active" ? "disabled==false" : "disabled==true");
+            }
+            if (f.role && f.role !== "All")
+                parts.push(`role==${f.role}`);
+            return parts.join(",") || undefined;
+        },
+        onRowClick: (row) => {
+            setSelectedRow(row);
+            setDrawerOpen(true);
+        },
+        buildBulkActions: (selection) => [
+            {
+                id: "manage",
+                label: ACTIONS.ADMIN["manage-user"].label,
+                variant: "primary",
+                onClick: () => {
+                    const id = selection.selectedIds[0];
+                    const row = selection.rows.find((r) => r.id === id) ?? null;
+                    if (row) {
+                        setSelectedRow(row);
+                        setDrawerOpen(true);
+                    }
+                    selection.clearSelection();
+                },
+            },
+        ],
+        renderRowActions: (row) => {
+            const isBanned = row.status === "Hard banned";
+            return (_jsx(RowActionMenu, { actions: [
+                    {
+                        label: ACTIONS.ADMIN["manage-user"].label,
+                        onClick: () => {
+                            setSelectedRow(row);
+                            setDrawerOpen(true);
+                        },
+                    },
+                    {
+                        label: ACTIONS.ADMIN["ban-user"].label,
+                        onClick: () => {
+                            setBanTargetId(row.id);
+                            setBanReason("");
+                            setBanModalOpen(true);
+                        },
+                        disabled: isBanned,
+                    },
+                    {
+                        label: ACTIONS.ADMIN["unban-user"].label,
+                        onClick: () => unbanUser.mutate(row.id),
+                        disabled: !isBanned || unbanUser.isPending,
+                    },
+                ] }));
+        },
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_USER_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Role", tabs: ADMIN_USER_ROLE_TABS, value: pendingFilters.role ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, role: id })) })] })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminUserEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), userId: selectedRow?.id, displayName: selectedRow?.primary, currentRole: toStringValue(selectedRow?._raw?.role, "user"), currentEmailVerified: Boolean(selectedRow?._raw?.emailVerified), ownedStoreId: toStringValue(selectedRow?._raw?.storeId, "") || undefined, ownedStoreName: toStringValue(selectedRow?._raw?.storeName, "") || undefined, currentIsHardBanned: Boolean((selectedRow?._raw?.isDisabled ?? selectedRow?._raw?.disabled) &&
                     selectedRow?._raw?.hardBanReason), currentHardBanReason: toStringValue(selectedRow?._raw?.hardBanReason, "") || undefined, currentSoftBans: Array.isArray(selectedRow?._raw?.softBans)
                     ? selectedRow._raw.softBans.map((b) => ({
                         action: toStringValue(b.action, ""),
@@ -186,5 +164,29 @@ export function AdminUsersView({ children, ...props }) {
                             : null,
                         bannedBy: toStringValue(b.bannedBy, ""),
                     }))
-                    : undefined }), _jsxs(Modal, { isOpen: banModalOpen, onClose: () => { setBanModalOpen(false); setBanTargetId(null); setBanReason(""); }, title: ACTIONS.ADMIN["ban-user"].confirmation.title, children: [_jsx(AppText, { size: "sm", color: "muted", className: "mb-4", children: ACTIONS.ADMIN["ban-user"].confirmation.body }), _jsxs(Form, { onSubmit: (e) => { e.preventDefault(); banUser.mutate(); }, children: [_jsx(Input, { label: "Reason", value: banReason, onChange: (e) => setBanReason(e.target.value), placeholder: "e.g. Repeated fraud, scam activity\u2026", required: true }), _jsxs(FormActions, { children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => { setBanModalOpen(false); setBanTargetId(null); setBanReason(""); }, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "danger", isLoading: banUser.isPending, disabled: !banReason.trim() || banUser.isPending, children: ACTIONS.ADMIN["ban-user"].confirmation.confirmLabel })] })] })] })] }));
+                    : undefined, 
+                // ST-2 — extended profile fields
+                currentPhoneNumber: toStringValue(selectedRow?._raw?.phoneNumber, "") || undefined, currentBio: toStringValue(selectedRow?._raw?.publicProfile?.bio, "") || undefined, currentLocation: toStringValue(selectedRow?._raw?.publicProfile?.location, "") || undefined, currentWebsite: toStringValue(selectedRow?._raw?.publicProfile?.website, "") || undefined, currentSocialLinks: (() => {
+                    const pp = selectedRow?._raw?.publicProfile;
+                    const sl = pp?.socialLinks;
+                    if (!sl)
+                        return undefined;
+                    return {
+                        twitter: toStringValue(sl.twitter, "") || undefined,
+                        instagram: toStringValue(sl.instagram, "") || undefined,
+                        facebook: toStringValue(sl.facebook, "") || undefined,
+                        linkedin: toStringValue(sl.linkedin, "") || undefined,
+                    };
+                })() }), _jsxs(Modal, { isOpen: banModalOpen, onClose: () => {
+                    setBanModalOpen(false);
+                    setBanTargetId(null);
+                    setBanReason("");
+                }, title: ACTIONS.ADMIN["ban-user"].confirmation.title, children: [_jsx(AppText, { size: "sm", color: "muted", className: "mb-4", children: ACTIONS.ADMIN["ban-user"].confirmation.body }), _jsxs(Form, { onSubmit: (e) => {
+                            e.preventDefault();
+                            banUser.mutate();
+                        }, children: [_jsx(Input, { label: "Reason", value: banReason, onChange: (e) => setBanReason(e.target.value), placeholder: "e.g. Repeated fraud, scam activity\u2026", required: true }), _jsxs(FormActions, { children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
+                                            setBanModalOpen(false);
+                                            setBanTargetId(null);
+                                            setBanReason("");
+                                        }, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "danger", isLoading: banUser.isPending, disabled: !banReason.trim() || banUser.isPending, children: ACTIONS.ADMIN["ban-user"].confirmation.confirmLabel })] })] })] })] }));
 }

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

@@ -1,4 +1,4 @@
-import type { AdminListingScaffoldRow } from "./AdminListingScaffold";
+import type { AdminListingScaffoldRow } from "./DataListingView";
 interface AdminViewCardsProps {
     rows: AdminListingScaffoldRow[];
     view: "grid" | "list";

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

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

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

@@ -1,67 +1,41 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { jsx as _jsx } from "react/jsx-runtime";
+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";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = [];
-const DEFAULT_SORT = "-updatedAt";
-const SORT_OPTIONS = [
-    { value: "-updatedAt", label: "Recently updated" },
-    { value: "-itemCount", label: "Largest first" },
-];
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+const ADMIN_WISHLISTS_CONFIG = {
+    portal: "admin",
+    title: "Wishlists",
+    searchPlaceholder: "Search by user ID",
+    emptyLabel: "No user wishlists found",
+    filterKeys: [],
+    defaultSort: "-updatedAt",
+    queryKey: ["admin", "wishlists", "listing"],
+    endpoint: ADMIN_ENDPOINTS.ADMIN_WISHLISTS,
+    sortOptions: [
+        { value: "-updatedAt", label: "Recently updated" },
+        { 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 : 20;
+        const isFull = item.isFull === true;
+        return {
+            id: toStringValue(item.id, `wish-${index}`),
+            primary: toStringValue(item.userId, "Unknown user"),
+            secondary: `${itemCount} item${itemCount === 1 ? "" : "s"} of ${limit}`,
+            status: isFull ? "Full" : itemCount >= limit - 2 ? "Near cap" : "OK",
+            updatedAt: toRelativeDate(item.updatedAt),
+        };
+    }),
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: () => undefined,
+};
 export function AdminWishlistsView({ 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 [selectedIds, setSelectedIds] = useState(new Set());
-    const toggleSelect = (id, next) => setSelectedIds((prev) => {
-        const s = new Set(prev);
-        if (next)
-            s.add(id);
-        else
-            s.delete(id);
-        return s;
-    });
-    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", "wishlists", "listing"],
-        endpoint: ADMIN_ENDPOINTS.ADMIN_WISHLISTS,
-        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 : 20;
-            const isFull = item.isFull === true;
-            return {
-                id: toStringValue(item.id, `wish-${index}`),
-                primary: toStringValue(item.userId, "Unknown user"),
-                secondary: `${itemCount} item${itemCount === 1 ? "" : "s"} of ${limit}`,
-                status: isFull ? "Full" : itemCount >= limit - 2 ? "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 })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No user wishlists found", selectedIds: selectedIds, onToggleSelect: toggleSelect, onToggleSelectAll: (next) => setSelectedIds(next ? new Set(rows.map((r) => r.id)) : new Set()) })] })] }));
+    return _jsx(DataListingView, { config: ADMIN_WISHLISTS_CONFIG });
 }

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

@@ -0,0 +1,122 @@
+/**
+ * DataListingView — config-driven listing scaffold for admin + seller dashboards.
+ *
+ * Replaces ~30 hand-wired admin/seller view components (AdminBrandsView, AdminCategoriesView,
+ * SellerCouponsView, etc.) by accepting a single `config` object describing:
+ *   - data layer (endpoint, queryKey, mapRows, buildFilters, sortOptions)
+ *   - presentation (title, subtitle, columns, searchPlaceholder, emptyLabel)
+ *   - actions (bulkActions, primaryAction, renderRowActions)
+ *   - filter panel (renderFilterPanel)
+ *   - editor side-drawer (renderEditor)
+ *
+ * Composes: useAdminListing (data + state) + ListingToolbar + BulkActionBar + Pagination
+ *         + DataTable | AdminViewCards + ListingFilterDrawer + SideDrawer
+ *         + useBottomActions (mobile bulk bar)
+ *
+ * Usage:
+ *   const ADMIN_BRANDS_CONFIG: ListingViewConfig<BrandsResponse, BrandRow> = { ... };
+ *   <DataListingView config={ADMIN_BRANDS_CONFIG} />
+ *
+ * Created 2026-05-23 as part of W6-12 (plan: read-this-files-and-modular-storm.md).
+ */
+import React from "react";
+import type { BulkActionItem } from "../../../ui";
+import type { AdminListingConfig } from "../hooks/useAdminListing";
+import type { AdminTableColumn } from "../types";
+/**
+ * Generic admin data row shape used by DataListingView and AdminViewCards.
+ * Moved here from AdminListingScaffold (which is now deleted) so views that
+ * need the base row type can import from this module instead.
+ */
+export interface AdminListingScaffoldRow {
+    id: string;
+    primary: string;
+    secondary: string;
+    status: string;
+    updatedAt: string;
+    featured?: boolean;
+    isPromoted?: boolean;
+    isOnSale?: boolean;
+    isSold?: boolean;
+}
+export interface ListingSortOption {
+    value: string;
+    label: string;
+}
+/**
+ * Render context passed to filter panel + editor render-props.
+ * Mirrors the shape returned by `useAdminListing`.
+ */
+export interface ListingPanelContext {
+    pendingFilters: Record<string, string>;
+    setPendingFilters: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+    applyFilters: () => void;
+    clearFilters: () => void;
+}
+export interface ListingEditorContext {
+    isCreate: boolean;
+    editId: string | null;
+    closePanel: () => void;
+}
+export interface ListingSelectionContext<TRow extends {
+    id: string;
+}> {
+    selectedIds: string[];
+    selectedCount: number;
+    clearSelection: () => void;
+    toggleSelect: (id: string) => void;
+    rows: TRow[];
+    openEditPanel: (id: string) => void;
+}
+export interface ListingViewConfig<TResponse, TRow extends {
+    id: string;
+}> extends AdminListingConfig<TResponse, TRow> {
+    /** Portal context — currently admin/seller share the same chrome. */
+    portal: "admin" | "seller";
+    title: string;
+    subtitle?: string;
+    searchPlaceholder: string;
+    emptyLabel?: string;
+    sortOptions: ListingSortOption[];
+    columns?: AdminTableColumn<TRow>[];
+    /** Optional alt-view (grid/list) renderer. When omitted, AdminViewCards is used. */
+    renderCards?: (rows: TRow[], view: "grid" | "list", selection: ListingSelectionContext<TRow>, isLoading: boolean) => React.ReactNode;
+    primaryAction?: {
+        label: string;
+        onClick: (panel: {
+            openCreatePanel: () => void;
+        }) => void;
+        icon?: React.ReactNode;
+    };
+    /** Extra arbitrary content in the toolbar (e.g. export buttons). Rendered alongside primaryAction. */
+    toolbarExtra?: React.ReactNode;
+    /** Slot rendered between the toolbar and the table content (e.g. URL-driven scope tabs). */
+    renderAboveContent?: () => React.ReactNode;
+    /** Pill toggles displayed alongside the search/sort/filter row in ListingToolbar. */
+    toggles?: Array<{
+        label: string;
+        active: boolean;
+        onChange: (next: boolean) => void;
+    }>;
+    renderRowActions?: (row: TRow) => React.ReactNode;
+    buildBulkActions?: (selection: ListingSelectionContext<TRow>) => BulkActionItem[];
+    renderFilterPanel?: (ctx: ListingPanelContext) => React.ReactNode;
+    renderEditor?: (ctx: ListingEditorContext) => React.ReactNode;
+    /** Drawer title resolver — defaults to "Add X" / "Edit X" using `title`. */
+    resolveEditorTitle?: (ctx: ListingEditorContext) => string;
+    onRowClick?: (row: TRow, panel: {
+        openEditPanel: (id: string) => void;
+    }) => void;
+    /** When set, the table renders rows as anchor links to this href. */
+    getRowHref?: (row: TRow) => string;
+    /** Hide the table toggle in the toolbar; views with no table column set should use this. */
+    hideTableView?: boolean;
+    /** Initial view mode (defaults to "table" when not hidden, "grid" when hidden). */
+    initialView?: "grid" | "list" | "table";
+    className?: string;
+}
+export declare function DataListingView<TResponse, TRow extends {
+    id: string;
+}>({ config, }: {
+    config: ListingViewConfig<TResponse, TRow>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+import { BulkActionBar, Button, ListingFilterDrawer, ListingToolbar, Pagination, SideDrawer, } from "../../../ui";
+import { useBottomActions } from "../../layout";
+import { useAdminListing } from "../hooks/useAdminListing";
+import { AdminViewCards } from "./AdminViewCards";
+import { DataTable } from "./DataTable";
+export function DataListingView({ config, }) {
+    const effectiveInitialView = config.initialView ?? (config.hideTableView ? "grid" : "table");
+    const listing = useAdminListing({
+        ...config,
+        initialView: effectiveInitialView,
+    });
+    const { view, setView, table, panel, searchInput, setSearchInput, commitSearch, filterOpen, setFilterOpen, openFilters, applyFilters, clearFilters, pendingFilters, setPendingFilters, activeFilterCount, hasActiveState, resetAll, rows, isLoading, errorMessage, currentPage, totalPages, selection, } = listing;
+    const selectionContext = {
+        selectedIds: selection.selectedIds,
+        selectedCount: selection.selectedCount,
+        clearSelection: selection.clearSelection,
+        toggleSelect: selection.toggle,
+        rows,
+        openEditPanel: panel.openEditPanel,
+    };
+    const bulkActionItems = config.buildBulkActions?.(selectionContext);
+    // Mobile bulk bar
+    useBottomActions(selection.selectedCount > 0 && bulkActionItems
+        ? {
+            bulk: {
+                selectedCount: selection.selectedCount,
+                onClearSelection: selection.clearSelection,
+                actions: bulkActionItems,
+            },
+        }
+        : {});
+    const editorTitle = config.resolveEditorTitle
+        ? config.resolveEditorTitle({
+            isCreate: panel.isCreateOpen,
+            editId: panel.editId,
+            closePanel: panel.closePanel,
+        })
+        : panel.isCreateOpen
+            ? `Add ${config.title.replace(/s$/, "")}`
+            : `Edit ${config.title.replace(/s$/, "")}`;
+    const isEditorOpen = panel.isCreateOpen || panel.isEditOpen;
+    return (_jsxs("div", { className: config.className ?? "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: config.searchPlaceholder, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || config.defaultSort, sortOptions: config.sortOptions, onSortChange: (v) => table.set("sort", v), showTableView: !config.hideTableView, toggles: config.toggles, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: config.primaryAction || config.toolbarExtra ? (_jsxs("div", { className: "flex items-center gap-2", children: [config.toolbarExtra, config.primaryAction && (_jsxs(Button, { size: "sm", onClick: () => config.primaryAction.onClick({
+                                openCreatePanel: panel.openCreatePanel,
+                            }), className: "flex items-center gap-1.5", children: [config.primaryAction.icon ?? _jsx(Plus, { className: "h-4 w-4" }), config.primaryAction.label] }))] })) : undefined }), config.renderAboveContent?.(), bulkActionItems && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActionItems })), 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-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), view === "table" ? (_jsx(DataTable, { columns: config.columns, rows: rows, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next
+                            ? selection.setSelectedIds(rows.map((r) => r.id))
+                            : selection.clearSelection(), getRowHref: config.getRowHref, onRowClick: config.onRowClick
+                            ? (row) => config.onRowClick(row, {
+                                openEditPanel: panel.openEditPanel,
+                            })
+                            : config.renderEditor
+                                ? (row) => panel.openEditPanel(row.id)
+                                : undefined, renderRowActions: config.renderRowActions })) : config.renderCards ? (config.renderCards(rows, view, selectionContext, isLoading)) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, onRowClick: (row) => panel.openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), config.renderFilterPanel && (_jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: config.renderFilterPanel({
+                    pendingFilters,
+                    setPendingFilters,
+                    applyFilters,
+                    clearFilters,
+                }) })), config.renderEditor && (_jsx(SideDrawer, { isOpen: isEditorOpen, onClose: panel.closePanel, title: editorTitle, mode: panel.isCreateOpen ? "create" : "edit", children: isEditorOpen &&
+                    config.renderEditor({
+                        isCreate: panel.isCreateOpen,
+                        editId: panel.editId,
+                        closePanel: panel.closePanel,
+                    }) }))] }));
+}

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

@@ -1,8 +1,8 @@
 export { DataTable } from "./DataTable";
 export { QuickEditMenu } from "./QuickEditMenu";
 export type { QuickEditAction, QuickEditMenuProps } from "./QuickEditMenu";
-export { AdminListingScaffold } from "./AdminListingScaffold";
-export type { AdminListingScaffoldRow } from "./AdminListingScaffold";
+export { DataListingView } from "./DataListingView";
+export type { AdminListingScaffoldRow, ListingViewConfig, ListingSortOption, ListingPanelContext, ListingEditorContext, ListingSelectionContext, } from "./DataListingView";
 export { DashboardStatsGrid } from "./DashboardStats";
 export { AdminUsersView } from "./AdminUsersView";
 export type { AdminUsersViewProps } from "./AdminUsersView";
@@ -34,6 +34,14 @@ export { AdminAddressEditorView } from "./AdminAddressEditorView";
 export type { AdminAddressEditorViewProps } from "./AdminAddressEditorView";
 export { AdminPrizeDrawsView } from "./AdminPrizeDrawsView";
 export type { AdminPrizeDrawsViewProps } from "./AdminPrizeDrawsView";
+export { AdminClassifiedView } from "./AdminClassifiedView";
+export type { AdminClassifiedViewProps } from "./AdminClassifiedView";
+export { AdminDigitalCodesView } from "./AdminDigitalCodesView";
+export type { AdminDigitalCodesViewProps } from "./AdminDigitalCodesView";
+export { AdminLiveView } from "./AdminLiveView";
+export type { AdminLiveViewProps } from "./AdminLiveView";
+export { AdminGroupedListingsView } from "./AdminGroupedListingsView";
+export type { AdminGroupedListingsViewProps } from "./AdminGroupedListingsView";
 export { AdminBundlesView } from "./AdminBundlesView";
 export type { AdminBundlesViewProps } from "./AdminBundlesView";
 export { AdminBundleEditorView } from "./AdminBundleEditorView";
@@ -133,8 +141,6 @@ export { AdminSidebar } from "./AdminSidebar";
 export type { AdminSidebarProps, AdminNavItem, AdminNavGroup } from "./AdminSidebar";
 export { AdminTopBar } from "./AdminTopBar";
 export type { AdminTopBarProps } from "./AdminTopBar";
-export { DemoSeedView } from "./DemoSeedView";
-export type { DemoSeedViewProps } from "./DemoSeedView";
 export { AdminTeamView } from "./AdminTeamView";
 export type { AdminTeamViewProps } from "./AdminTeamView";
 export { AdminEmployeeEditorView } from "./AdminEmployeeEditorView";