@mohasinac/appkit 2.7.59 → 2.8.1

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

@@ -1,38 +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 { 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, ListingFilterDrawer } 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;
 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);
@@ -51,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), {}),
@@ -59,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);
@@ -134,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 }))] }), _jsxs(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, 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(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, ""),
@@ -180,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/AdminViewCards.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from "../../../ui";
+import { Div, Grid, Row, Span, Stack, Text } from "../../../ui";
 const FLAG_BADGES = [
     { key: "featured", label: "Featured", color: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300" },
     { key: "isPromoted", label: "Promoted", color: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300" },
@@ -8,13 +8,13 @@ const FLAG_BADGES = [
     { key: "isSold", label: "Sold", color: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400" },
 ];
 function StatusBadge({ status }) {
-    return (_jsx("span", { className: "inline-flex rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300 truncate max-w-[120px]", children: status }));
+    return (_jsx(Span, { className: "inline-flex rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300 truncate max-w-[120px]", children: status }));
 }
 function SkeletonCard({ view }) {
     if (view === "list") {
-        return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 animate-pulse", children: [_jsx("div", { className: "h-4 w-4 rounded bg-zinc-200 dark:bg-slate-700 shrink-0" }), _jsxs("div", { className: "flex-1 space-y-1.5", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _jsx("div", { className: "h-2.5 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] }), _jsx("div", { className: "h-5 w-16 bg-zinc-200 dark:bg-slate-700 rounded-full shrink-0" }), _jsx("div", { className: "h-3 w-20 bg-zinc-200 dark:bg-slate-700 rounded shrink-0" })] }));
+        return (_jsxs(Row, { gap: "sm", className: "px-4 py-3 animate-pulse", children: [_jsx(Div, { className: "h-4 w-4 rounded bg-zinc-200 dark:bg-slate-700 shrink-0" }), _jsxs(Stack, { gap: "xs", className: "flex-1", children: [_jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _jsx(Div, { className: "h-2.5 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] }), _jsx(Div, { className: "h-5 w-16 bg-zinc-200 dark:bg-slate-700 rounded-full shrink-0" }), _jsx(Div, { className: "h-3 w-20 bg-zinc-200 dark:bg-slate-700 rounded shrink-0" })] }));
     }
-    return (_jsx("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: _jsxs("div", { className: "p-4 space-y-2.5", children: [_jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-5 bg-zinc-200 dark:bg-slate-700 rounded-full w-20 mt-1" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] }) }));
+    return (_jsx(Div, { rounded: "xl", border: "subtle", className: "overflow-hidden animate-pulse", children: _jsxs(Stack, { gap: "xs", padding: "md", children: [_jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx(Div, { className: "h-5 bg-zinc-200 dark:bg-slate-700 rounded-full w-20 mt-1" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] }) }));
 }
 function AdminCardItem({ row, view, selected, onToggleSelect, onRowClick, }) {
     const flags = FLAG_BADGES.filter(({ key }) => Boolean(row[key]));
@@ -24,31 +24,31 @@ function AdminCardItem({ row, view, selected, onToggleSelect, onRowClick, }) {
         onRowClick?.(row);
     };
     if (view === "list") {
-        return (_jsxs("div", { className: [
-                "flex items-center gap-3 px-4 py-3 cursor-pointer transition-colors hover:bg-zinc-50 dark:hover:bg-slate-800/50",
+        return (_jsxs(Row, { gap: "sm", className: [
+                "px-4 py-3 cursor-pointer transition-colors hover:bg-zinc-50 dark:hover:bg-slate-800/50",
                 selected ? "bg-primary-50/40 dark:bg-primary-900/10" : "",
-            ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsx("div", { "data-checkbox": true, className: "shrink-0", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: _jsx("input", { type: "checkbox", checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }) })), _jsxs("div", { className: "flex-1 min-w-0 space-y-0.5", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: row.secondary })] }), flags.length > 0 && (_jsx("div", { className: "hidden sm:flex items-center gap-1 shrink-0", children: flags.map(({ key, label, color }) => (_jsx("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[10px] font-medium ${color}`, children: label }, key))) })), _jsx(StatusBadge, { status: row.status }), _jsx("span", { className: "hidden sm:block text-xs text-zinc-400 dark:text-zinc-400 shrink-0 w-24 text-right", children: row.updatedAt })] }));
+            ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsx(Div, { "data-checkbox": true, className: "shrink-0", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: _jsx("input", { type: "checkbox", checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }) })), _jsxs(Stack, { gap: "none", className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "truncate text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary })] }), flags.length > 0 && (_jsx(Row, { gap: "xs", className: "hidden sm:flex shrink-0", children: flags.map(({ key, label, color }) => (_jsx(Span, { className: `inline-flex rounded-full px-1.5 py-0.5 text-[10px] font-medium ${color}`, children: label }, key))) })), _jsx(StatusBadge, { status: row.status }), _jsx(Span, { size: "xs", color: "muted", className: "hidden sm:block shrink-0 w-24 text-right", children: row.updatedAt })] }));
     }
-    return (_jsxs("div", { className: [
-            "rounded-xl border overflow-hidden cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5",
+    return (_jsxs(Div, { rounded: "xl", className: [
+            "border overflow-hidden cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5",
             selected
                 ? "border-primary ring-1 ring-primary/20 bg-primary-50/30 dark:bg-primary-900/10"
                 : "border-zinc-100 dark:border-slate-700 bg-white dark:bg-slate-900",
-        ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsxs("div", { "data-checkbox": true, className: "flex items-center gap-2 px-3 pt-3", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }), flags.length > 0 && (_jsx("div", { className: "flex items-center gap-1 flex-wrap", children: flags.map(({ key, label, color }) => (_jsx("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[10px] font-medium ${color}`, children: label }, key))) }))] })), _jsxs("div", { className: "p-3.5 space-y-2", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 line-clamp-2 leading-snug", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: row.secondary })] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(StatusBadge, { status: row.status }), _jsx("span", { className: "text-[11px] text-zinc-400 dark:text-zinc-400 shrink-0", children: row.updatedAt })] })] })] }));
+        ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsxs(Row, { gap: "xs", "data-checkbox": true, className: "px-3 pt-3", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }), flags.length > 0 && (_jsx(Row, { gap: "xs", wrap: true, children: flags.map(({ key, label, color }) => (_jsx(Span, { className: `inline-flex rounded-full px-1.5 py-0.5 text-[10px] font-medium ${color}`, children: label }, key))) }))] })), _jsxs(Stack, { gap: "xs", className: "p-3.5", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "line-clamp-2 leading-snug text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary })] }), _jsxs(Row, { justify: "between", gap: "xs", children: [_jsx(StatusBadge, { status: row.status }), _jsx(Span, { color: "muted", className: "text-[11px] shrink-0", children: row.updatedAt })] })] })] }));
 }
 export function AdminViewCards({ rows, view, isLoading, emptyLabel = "No items found", onRowClick, selectedIdSet, onToggleSelect, }) {
     if (isLoading) {
         const count = view === "grid" ? 12 : 8;
         if (view === "list") {
-            return (_jsx("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden divide-y divide-zinc-100 dark:divide-slate-700", children: Array.from({ length: count }).map((_, i) => _jsx(SkeletonCard, { view: "list" }, i)) }));
+            return (_jsx(Div, { rounded: "xl", border: "subtle", className: "overflow-hidden divide-y divide-zinc-100 dark:divide-slate-700", children: Array.from({ length: count }).map((_, i) => _jsx(SkeletonCard, { view: "list" }, i)) }));
         }
-        return (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", children: Array.from({ length: count }).map((_, i) => _jsx(SkeletonCard, { view: "grid" }, i)) }));
+        return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: count }).map((_, i) => _jsx(SkeletonCard, { view: "grid" }, i)) }));
     }
     if (rows.length === 0) {
-        return (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: emptyLabel }));
+        return (_jsx(Text, { size: "sm", color: "muted", className: "py-12 text-center", children: emptyLabel }));
     }
     if (view === "list") {
-        return (_jsx("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden divide-y divide-zinc-100 dark:divide-slate-700", children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "list", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick }, row.id))) }));
+        return (_jsx(Div, { rounded: "xl", border: "subtle", className: "overflow-hidden divide-y divide-zinc-100 dark:divide-slate-700", children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "list", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick }, row.id))) }));
     }
-    return (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "grid", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick }, row.id))) }));
+    return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "grid", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick }, row.id))) }));
 }

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;