@mohasinac/appkit 2.7.58 → 2.8.0

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

@@ -1,26 +1,14 @@
 "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 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, ConfirmDeleteModal, ListingToolbar, ListingViewShell, Pagination, RowActionMenu, Text, useToast } from "../../../ui";
+import { ConfirmDeleteModal, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 import { apiClient } from "../../../http";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["isActive"];
-const DEFAULT_SORT = "-lastActivity";
-const SORT_OPTIONS = [
-    { value: "-lastActivity", label: "Most recent" },
-    { value: "lastActivity", label: "Least recent" },
-    { value: "-createdAt", label: "Newest" },
-];
 function maskIp(ip) {
     if (!ip)
         return "—";
@@ -29,57 +17,40 @@ function maskIp(ip) {
         return `${parts[0]}.${parts[1]}.${parts[2]}.*`;
     return ip.replace(/:\w+$/, ":*");
 }
-function SessionsFilterDrawer({ 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" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", 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: "Active only", value: "true" }].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("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 AdminSessionsView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const [revokeTarget, setRevokeTarget] = useState(null);
-    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 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 isActiveRaw = table.get("isActive");
-    const filters = isActiveRaw ? `isActive==${isActiveRaw}` : undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+    const revokeMutation = useMutation({
+        mutationFn: async (id) => {
+            await apiClient.delete(ADMIN_ENDPOINTS.SESSION_BY_ID(id));
+        },
+        onSuccess: () => {
+            showToast("Session revoked.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "sessions"] });
+            setRevokeTarget(null);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to revoke session.", "error");
+        },
+    });
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const config = {
+        portal: "admin",
+        title: "Sessions",
+        searchPlaceholder: "Search by user or device",
+        emptyLabel: "No sessions found",
+        filterKeys: ["isActive"],
+        defaultSort: "-lastActivity",
         queryKey: ["admin", "sessions", "listing"],
         endpoint: ADMIN_ENDPOINTS.SESSIONS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "-lastActivity", label: "Most recent" },
+            { value: "lastActivity", label: "Least recent" },
+            { value: "-createdAt", label: "Newest" },
+        ],
         mapRows: (response) => toRecordArray(response.sessions).map((item, index) => {
             const deviceInfo = (item.deviceInfo ?? {});
             const userLabel = toStringValue(item.user &&
@@ -93,43 +64,39 @@ export function AdminSessionsView({ children, ...props }) {
                     toStringValue(deviceInfo.os, ""),
                     toStringValue(deviceInfo.device, ""),
                     ipMasked,
-                ].filter(Boolean).join(" · "),
+                ]
+                    .filter(Boolean)
+                    .join(" · "),
                 status: Boolean(item.isActive) ? "Active" : "Expired",
                 updatedAt: toRelativeDate(item.lastActivity ?? item.createdAt),
             };
         }),
         getTotal: (response, mappedRows) => typeof response.count === "number" ? response.count : mappedRows.length,
-    });
-    const revokeMutation = useMutation({
-        mutationFn: async (id) => {
-            await apiClient.delete(ADMIN_ENDPOINTS.SESSION_BY_ID(id));
-        },
-        onSuccess: () => {
-            showToast("Session revoked.", "success");
-            queryClient.invalidateQueries({ queryKey: ["admin", "sessions"] });
-            setRevokeTarget(null);
-        },
-        onError: (err) => {
-            showToast(err?.message ?? "Failed to revoke session.", "error");
-        },
-    });
-    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 });
-    }
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: ROW_ACTION_ID.REVOKE, label: ACTIONS.ADMIN["revoke-session"].label, variant: "secondary", onClick: () => { selection.clearSelection(); } },
-            ] } } : {});
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by user or device", 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: ROW_ACTION_ID.REVOKE, label: ACTIONS.ADMIN["revoke-session"].label, variant: "secondary", onClick: () => { 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 })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No sessions found", renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
-                                        {
-                                            label: ROW_ACTION_META[ROW_ACTION_ID.REVOKE].label,
-                                            destructive: ROW_ACTION_META[ROW_ACTION_ID.REVOKE].destructive,
-                                            onClick: () => setRevokeTarget(row),
-                                        },
-                                    ] })) })] }), _jsx(SessionsFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters })] }), _jsx(ConfirmDeleteModal, { isOpen: Boolean(revokeTarget), onClose: () => setRevokeTarget(null), onConfirm: () => { if (revokeTarget)
-                    revokeMutation.mutate(revokeTarget.id); }, isDeleting: revokeMutation.isPending, confirmText: "Revoke", title: "Revoke session?", message: "This will sign the user out of this device immediately.", variant: "danger" })] }));
+        buildFilters: (state) => (state.isActive ? `isActive==${state.isActive}` : undefined),
+        buildBulkActions: (selection) => [
+            {
+                id: ROW_ACTION_ID.REVOKE,
+                label: ACTIONS.ADMIN["revoke-session"].label,
+                variant: "secondary",
+                onClick: () => selection.clearSelection(),
+            },
+        ],
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ROW_ACTION_META[ROW_ACTION_ID.REVOKE].label,
+                    destructive: ROW_ACTION_META[ROW_ACTION_ID.REVOKE].destructive,
+                    onClick: () => setRevokeTarget(row),
+                },
+            ] })),
+        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: "Active only", value: "true" },
+                    ].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))) })] })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(ConfirmDeleteModal, { isOpen: Boolean(revokeTarget), onClose: () => setRevokeTarget(null), onConfirm: () => {
+                    if (revokeTarget)
+                        revokeMutation.mutate(revokeTarget.id);
+                }, isDeleting: revokeMutation.isPending, confirmText: "Revoke", title: "Revoke session?", message: "This will sign the user out of this device immediately.", variant: "danger" })] }));
 }

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

@@ -2,4 +2,4 @@ import React from "react";
 export interface AdminStoreAddressesViewProps {
     children?: React.ReactNode;
 }
-export declare function AdminStoreAddressesView({ children: _children }: AdminStoreAddressesViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminStoreAddressesView(_props: AdminStoreAddressesViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,56 +1,42 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { ListingToolbar, Pagination } from "../../../ui";
-import { toRecordArray, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
-import { AdminViewCards } from "./AdminViewCards";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toRecordArray, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-const PAGE_SIZE = 25;
-const DEFAULT_SORT = "storeId";
-const SORT_OPTIONS = [
-    { value: "storeId", label: "Store ID" },
-    { value: "city", label: "City A–Z" },
-];
-export function AdminStoreAddressesView({ children: _children }) {
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
-    const [view, setView] = useState("table");
-    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", "store-addresses", "listing"],
-        endpoint: ADMIN_ENDPOINTS.STORE_ADDRESSES,
-        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) => ({
-            id: toStringValue(item.id, `addr-${index}`),
-            primary: [
-                toStringValue(item.label, "Address"),
-                toStringValue(item.city, ""),
-                toStringValue(item.state, ""),
-            ].filter(Boolean).join(", "),
-            secondary: [
-                toStringValue(item.storeId ?? item.storeName, "Unknown store"),
-                toStringValue(item.pincode, ""),
-            ].filter(Boolean).join(" · "),
-            status: item.isPickupLocation ? "pickup" : "standard",
-            updatedAt: toStringValue(item.storeId, ""),
-        })),
-        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 });
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search by label, city, or store 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 store addresses found" })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No store addresses found", onRowClick: undefined, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] })] }));
+const ADMIN_STORE_ADDRESSES_CONFIG = {
+    portal: "admin",
+    title: "Store Addresses",
+    searchPlaceholder: "Search by label, city, or store ID",
+    emptyLabel: "No store addresses found",
+    filterKeys: [],
+    defaultSort: "storeId",
+    queryKey: ["admin", "store-addresses", "listing"],
+    endpoint: ADMIN_ENDPOINTS.STORE_ADDRESSES,
+    sortOptions: [
+        { value: "storeId", label: "Store ID" },
+        { value: "city", label: "City A–Z" },
+    ],
+    mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+        id: toStringValue(item.id, `addr-${index}`),
+        primary: [
+            toStringValue(item.label, "Address"),
+            toStringValue(item.city, ""),
+            toStringValue(item.state, ""),
+        ]
+            .filter(Boolean)
+            .join(", "),
+        secondary: [
+            toStringValue(item.storeId ?? item.storeName, "Unknown store"),
+            toStringValue(item.pincode, ""),
+        ]
+            .filter(Boolean)
+            .join(" · "),
+        status: item.isPickupLocation ? "pickup" : "standard",
+        updatedAt: toStringValue(item.storeId, ""),
+    })),
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: () => undefined,
+};
+export function AdminStoreAddressesView(_props) {
+    return _jsx(DataListingView, { config: ADMIN_STORE_ADDRESSES_CONFIG });
 }

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

@@ -1,11 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Form, FormActions, Select, SideDrawer, Toggle, useToast, } from "../../../ui";
+import { Button, Form, FormActions, Label, Select, SideDrawer, StackedViewShell, Toggle, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-// --- Capability groups -------------------------------------------------------
 const CAPABILITY_GROUPS = [
     {
         label: "Listings",
@@ -47,6 +46,7 @@ const STATUS_OPTIONS = [
     { label: "Suspended", value: "suspended" },
     { label: "Rejected", value: "rejected" },
 ];
+const TEXTAREA_CHROME = "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500";
 // --- Component ---------------------------------------------------------------
 export function AdminStoreEditorView({ open, onClose, storeId, storeName, currentStatus, currentIsVerified, currentCapabilities, }) {
     const queryClient = useQueryClient();
@@ -97,11 +97,24 @@ export function AdminStoreEditorView({ open, onClose, storeId, storeName, curren
             showToast(err?.message ?? "Failed to update store.", "error");
         },
     });
-    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: storeName ? `Manage: ${storeName}` : "Manage Store", children: _jsxs(Form, { onSubmit: (e) => {
+    const renderStatusSection = () => (_jsx(Select, { label: "Store status", options: STATUS_OPTIONS, value: storeStatus, onValueChange: setStoreStatus }));
+    const renderNotesSection = () => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { children: "Admin notes (optional)" }), _jsx("textarea", { value: adminNotes, onChange: (e) => setAdminNotes(e.target.value), rows: 3, placeholder: "e.g. Reason for suspension, approval notes\u2026", className: TEXTAREA_CHROME })] }));
+    const renderTogglesSection = () => (_jsxs(_Fragment, { children: [_jsx(Toggle, { label: "Verified store", checked: isVerified, onChange: setIsVerified }), _jsx(Toggle, { label: "Featured store", checked: isFeatured, onChange: setIsFeatured })] }));
+    const renderSuspensionSection = () => storeStatus === "suspended" ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { children: "Suspension reason (optional)" }), _jsx("textarea", { value: suspensionReason, onChange: (e) => setSuspensionReason(e.target.value), rows: 2, placeholder: "e.g. Policy violation, fraudulent activity\u2026", className: TEXTAREA_CHROME })] })) : null;
+    const renderCapabilitiesSection = () => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: ["Capabilities", _jsxs("span", { className: "ml-2 text-xs font-normal text-zinc-500 dark:text-zinc-400", children: ["(", capabilities.size, " active)"] })] }), _jsx("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 divide-y divide-zinc-100 dark:divide-slate-700", children: CAPABILITY_GROUPS.map((group) => {
+                    const checked = group.caps.filter((c) => capabilities.has(c.key)).length;
+                    return (_jsxs("details", { className: "group", children: [_jsxs("summary", { className: "flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-semibold uppercase tracking-wide text-zinc-600 dark:text-zinc-400 select-none hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx("span", { children: group.label }), _jsxs("span", { className: "text-xs font-normal normal-case text-zinc-400 dark:text-zinc-400", children: [checked, "/", group.caps.length] })] }), _jsx("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1.5 px-3 py-2.5 bg-zinc-50/60 dark:bg-slate-800/40", children: group.caps.map((cap) => (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer text-xs text-zinc-700 dark:text-zinc-300", children: [_jsx("input", { type: "checkbox", checked: capabilities.has(cap.key), onChange: () => toggleCapability(cap.key), className: "h-3.5 w-3.5 rounded border-zinc-300 dark:border-slate-600 accent-primary" }), cap.label] }, cap.key))) })] }, group.label));
+                }) })] }));
+    const renderActionsSection = () => (_jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !storeId || saveMutation.isPending, children: "Save changes" })] }));
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: storeName ? `Manage: ${storeName}` : "Manage Store", children: _jsx(Form, { onSubmit: (e) => {
                 e.preventDefault();
                 saveMutation.mutate();
-            }, className: "space-y-4 p-4", children: [_jsx(Select, { label: "Store status", options: STATUS_OPTIONS, value: storeStatus, onValueChange: setStoreStatus }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Admin notes (optional)" }), _jsx("textarea", { value: adminNotes, onChange: (e) => setAdminNotes(e.target.value), rows: 3, placeholder: "e.g. Reason for suspension, approval notes\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), _jsx(Toggle, { label: "Verified store", checked: isVerified, onChange: setIsVerified }), _jsx(Toggle, { label: "Featured store", checked: isFeatured, onChange: setIsFeatured }), storeStatus === "suspended" && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Suspension reason (optional)" }), _jsx("textarea", { value: suspensionReason, onChange: (e) => setSuspensionReason(e.target.value), rows: 2, placeholder: "e.g. Policy violation, fraudulent activity\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: ["Capabilities", _jsxs("span", { className: "ml-2 text-xs font-normal text-zinc-500 dark:text-zinc-400", children: ["(", capabilities.size, " active)"] })] }), _jsx("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 divide-y divide-zinc-100 dark:divide-slate-700", children: CAPABILITY_GROUPS.map((group) => {
-                                const checked = group.caps.filter((c) => capabilities.has(c.key)).length;
-                                return (_jsxs("details", { className: "group", children: [_jsxs("summary", { className: "flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-semibold uppercase tracking-wide text-zinc-600 dark:text-zinc-400 select-none hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx("span", { children: group.label }), _jsxs("span", { className: "text-xs font-normal normal-case text-zinc-400 dark:text-zinc-400", children: [checked, "/", group.caps.length] })] }), _jsx("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1.5 px-3 py-2.5 bg-zinc-50/60 dark:bg-slate-800/40", children: group.caps.map((cap) => (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer text-xs text-zinc-700 dark:text-zinc-300", children: [_jsx("input", { type: "checkbox", checked: capabilities.has(cap.key), onChange: () => toggleCapability(cap.key), className: "h-3.5 w-3.5 rounded border-zinc-300 dark:border-slate-600 accent-primary" }), cap.label] }, cap.key))) })] }, group.label));
-                            }) })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !storeId || saveMutation.isPending, children: "Save changes" })] })] }) }));
+            }, className: "p-4", children: _jsx(StackedViewShell, { portal: "admin", className: "space-y-4", sections: [
+                    renderStatusSection,
+                    renderNotesSection,
+                    renderTogglesSection,
+                    renderSuspensionSection,
+                    renderCapabilitiesSection,
+                    renderActionsSection,
+                ] }) }) }));
 }

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

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

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

@@ -1,49 +1,28 @@
 "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 { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, RowActionMenu, useToast } from "../../../ui";
-import { AdminViewCards } from "./AdminViewCards";
+import { FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_STORE_STATUS_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 { AdminStoreEditorView } from "./AdminStoreEditorView";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
-const DEFAULT_SORT = "-createdAt";
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-    { value: "storeName", label: "Name A–Z" },
-];
-const STATUS_OPTIONS = ADMIN_STORE_STATUS_TABS;
-function StoresFilterDrawer({ 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" }) })] })] }), _jsx("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("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 AdminStoresView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
+    const [editorRow, setEditorRow] = useState(null);
     const toast = useToast();
     const queryClient = useQueryClient();
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const { openEditPanel, closePanel, isEditOpen, editId } = usePanelUrlSync();
     const verifyStore = useMutation({
         mutationFn: (storeId) => apiClient.patch(ADMIN_ENDPOINTS.STORE_BY_ID(storeId), { isVerified: true }),
         onSuccess: () => {
             toast.showToast("Store verified.", "success");
             void queryClient.invalidateQueries({ queryKey: ["admin", "stores", "listing"] });
         },
-        onError: () => { toast.showToast("Failed to verify store.", "error"); },
+        onError: () => {
+            toast.showToast("Failed to verify store.", "error");
+        },
     });
     const suspendStore = useMutation({
         mutationFn: (storeId) => apiClient.patch(ADMIN_ENDPOINTS.STORE_BY_ID(storeId), { storeStatus: "suspended" }),
@@ -51,47 +30,27 @@ export function AdminStoresView({ children, ...props }) {
             toast.showToast("Store suspended.", "success");
             void queryClient.invalidateQueries({ queryKey: ["admin", "stores", "listing"] });
         },
-        onError: () => { toast.showToast("Failed to suspend store.", "error"); },
+        onError: () => {
+            toast.showToast("Failed to suspend store.", "error");
+        },
     });
-    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 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 statusRaw = table.get("status");
-    const filters = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const config = {
+        portal: "admin",
+        title: "Stores",
+        searchPlaceholder: "Search stores, slugs, or owner names",
+        emptyLabel: "No stores found",
+        filterKeys: ["status"],
+        defaultSort: "-createdAt",
         queryKey: ["admin", "stores", "listing"],
         endpoint: ADMIN_ENDPOINTS.STORES,
-        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: "storeName", label: "Name A–Z" },
+        ],
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `store-${index}`),
             primary: toStringValue(item.storeName, "Unnamed store"),
@@ -104,42 +63,45 @@ export function AdminStoresView({ children, ...props }) {
             _raw: item,
         })),
         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 panelRow = editId ? (rows.find((r) => r.id === editId) ?? null) : null;
-    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 stores, slugs, or owner names", 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-store"].label, variant: "primary", onClick: () => { const id = selection.selectedIds[0]; if (id)
-                                    openEditPanel(id); 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 stores found", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next ? selection.setSelectedIds(rows.map(r => r.id)) : selection.clearSelection(), renderRowActions: (row) => {
-                                    const sr = row;
-                                    const isSuspended = sr.status?.toLowerCase() === "suspended";
-                                    const isVerified = Boolean(sr._raw?.isVerified);
-                                    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                                                { id: "manage", label: ACTIONS.ADMIN["manage-store"].label, variant: "primary", onClick: () => { const id = selection.selectedIds[0]; if (id)
-                                                        openEditPanel(id); selection.clearSelection(); } },
-                                            ] } } : {});
-                                    return (_jsx(RowActionMenu, { actions: [
-                                            {
-                                                label: ACTIONS.ADMIN["manage-store"].label,
-                                                onClick: () => openEditPanel(sr.id),
-                                            },
-                                            {
-                                                label: ACTIONS.ADMIN["verify-store"].label,
-                                                onClick: () => verifyStore.mutate(sr.id),
-                                                disabled: isVerified || verifyStore.isPending,
-                                            },
-                                            {
-                                                label: ACTIONS.ADMIN["suspend-store"].label,
-                                                onClick: () => suspendStore.mutate(sr.id),
-                                                disabled: isSuspended || suspendStore.isPending,
-                                            },
-                                        ] }));
-                                } })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No stores found", onRowClick: (row) => openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsx(StoresFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters })] }), _jsx(AdminStoreEditorView, { open: isEditOpen, onClose: closePanel, storeId: editId ?? undefined, storeName: panelRow?.primary, currentStatus: panelRow?.status?.toLowerCase(), currentIsVerified: Boolean(panelRow?._raw?.isVerified), currentCapabilities: Array.isArray(panelRow?._raw?.capabilities)
-                    ? panelRow._raw.capabilities
+        buildFilters: (state) => state.status && state.status !== "All" ? `status==${state.status}` : undefined,
+        onRowClick: (row) => setEditorRow(row),
+        buildBulkActions: (selection) => [
+            {
+                id: "manage",
+                label: ACTIONS.ADMIN["manage-store"].label,
+                variant: "primary",
+                onClick: () => {
+                    const id = selection.selectedIds[0];
+                    const row = selection.rows.find((r) => r.id === id) ?? null;
+                    if (row)
+                        setEditorRow(row);
+                    selection.clearSelection();
+                },
+            },
+        ],
+        renderRowActions: (row) => {
+            const isSuspended = row.status?.toLowerCase() === "suspended";
+            const isVerified = Boolean(row._raw?.isVerified);
+            return (_jsx(RowActionMenu, { actions: [
+                    {
+                        label: ACTIONS.ADMIN["manage-store"].label,
+                        onClick: () => setEditorRow(row),
+                    },
+                    {
+                        label: ACTIONS.ADMIN["verify-store"].label,
+                        onClick: () => verifyStore.mutate(row.id),
+                        disabled: isVerified || verifyStore.isPending,
+                    },
+                    {
+                        label: ACTIONS.ADMIN["suspend-store"].label,
+                        onClick: () => suspendStore.mutate(row.id),
+                        disabled: isSuspended || suspendStore.isPending,
+                    },
+                ] }));
+        },
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_STORE_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminStoreEditorView, { open: Boolean(editorRow), onClose: () => setEditorRow(null), storeId: editorRow?.id, storeName: editorRow?.primary, currentStatus: editorRow?.status?.toLowerCase(), currentIsVerified: Boolean(editorRow?._raw?.isVerified), currentCapabilities: Array.isArray(editorRow?._raw?.capabilities)
+                    ? editorRow._raw.capabilities
                     : undefined })] }));
 }

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

@@ -1,5 +1,5 @@
 interface AdminSublistingCategoriesViewProps {
     onBulkDelete?: (ids: string[]) => Promise<void>;
 }
-export declare function AdminSublistingCategoriesView({ onBulkDelete }: AdminSublistingCategoriesViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminSublistingCategoriesView({ onBulkDelete, }: AdminSublistingCategoriesViewProps): import("react/jsx-runtime").JSX.Element;
 export {};