@mohasinac/appkit 2.7.58 → 2.8.0

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

@@ -1,27 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { Plus, X } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { Badge, BulkActionBar, Button, Heading, ListingToolbar, Pagination, Stack, Text, useToast, } from "../../../ui";
+import { Badge, Button, Stack, Text, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 import { BUNDLE_COPY, BUNDLE_STOCK_VARIANT, } from "../../../_internal/shared/features/categories/bundle-copy";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["isActive", "bundleStockStatus"];
-const DEFAULT_SORT = "name";
-const SORT_OPTIONS = [
-    { value: "name", label: "Name A–Z" },
-    { value: "-name", label: "Name Z–A" },
-    { value: "-bundlePriceInPaise", label: "Price high→low" },
-    { value: "bundlePriceInPaise", label: "Price low→high" },
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-];
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 function formatPrice(paise) {
     if (typeof paise !== "number" || paise <= 0)
         return "—";
@@ -51,71 +37,42 @@ const COLUMNS = [
     },
     { key: "updatedAt", header: "Updated", className: "w-28" },
 ];
-function BundlesFilterDrawer({ 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: [_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", value: "true" },
-                                            { label: "Inactive", value: "false" },
-                                        ].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isActive: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isActive || "") === opt.value
-                                                ? "bg-primary text-white border-primary"
-                                                : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt.label }, opt.label))) })] }), _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: "Stock" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [
-                                            { label: "All", value: "" },
-                                            { label: "Sold out", value: "out_of_stock" },
-                                        ].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, bundleStockStatus: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.bundleStockStatus || "") === 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 AdminBundlesView({ getEditHref, newHref }) {
-    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 [rebuildingId, setRebuildingId] = useState(null);
     const toast = useToast();
-    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 isActiveRaw = table.get("isActive");
-    if (isActiveRaw)
-        filterParts.push(`isActive==${isActiveRaw}`);
-    const stockStatusRaw = table.get("bundleStockStatus");
-    if (stockStatusRaw)
-        filterParts.push(`bundleStockStatus==${stockStatusRaw}`);
-    const filters = filterParts.join(",") || undefined;
-    const { rows, total, isLoading, errorMessage, refetch } = useAdminListingData({
+    const handleRebuild = useCallback(async (bundleId) => {
+        setRebuildingId(bundleId);
+        try {
+            const res = await fetch(ADMIN_ENDPOINTS.BUNDLE_REBUILD(bundleId), { method: "POST" });
+            if (!res.ok)
+                throw new Error("Rebuild failed");
+            toast.showToast("Bundle stock rebuilt.", "success");
+        }
+        catch {
+            toast.showToast("Failed to rebuild bundle stock.", "error");
+        }
+        finally {
+            setRebuildingId(null);
+        }
+    }, [toast]);
+    const config = {
+        portal: "admin",
+        title: "Bundles",
+        searchPlaceholder: "Search bundles by name or slug…",
+        emptyLabel: BUNDLE_COPY.adminList.empty,
+        filterKeys: ["isActive", "bundleStockStatus"],
+        defaultSort: "name",
         queryKey: ["admin", "bundles", "listing"],
         endpoint: ADMIN_ENDPOINTS.BUNDLES,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "name", label: "Name A–Z" },
+            { value: "-name", label: "Name Z–A" },
+            { value: "-bundlePriceInPaise", label: "Price high→low" },
+            { value: "bundlePriceInPaise", label: "Price low→high" },
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+        ],
+        columns: COLUMNS,
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `bundle-${index}`),
             primary: toStringValue(item.name, "Untitled bundle"),
@@ -130,70 +87,51 @@ export function AdminBundlesView({ getEditHref, newHref }) {
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
         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 });
-    const handleRebuild = useCallback(async (bundleId) => {
-        setRebuildingId(bundleId);
-        try {
-            const res = await fetch(ADMIN_ENDPOINTS.BUNDLE_REBUILD(bundleId), { method: "POST" });
-            if (!res.ok)
-                throw new Error("Rebuild failed");
-            toast.showToast("Bundle stock rebuilt.", "success");
-        }
-        catch {
-            toast.showToast("Failed to rebuild bundle stock.", "error");
-        }
-        finally {
-            setRebuildingId(null);
-            refetch();
-        }
-    }, [refetch, toast]);
-    const bulkActions = [
-        {
-            id: "activate",
-            label: ACTIONS.ADMIN["activate-bundle"].label,
-            variant: "primary",
-            onClick: async () => {
+        buildFilters: (filterState) => {
+            const parts = [];
+            if (filterState.isActive)
+                parts.push(`isActive==${filterState.isActive}`);
+            if (filterState.bundleStockStatus)
+                parts.push(`bundleStockStatus==${filterState.bundleStockStatus}`);
+            return parts.join(",") || undefined;
+        },
+        getRowHref: getEditHref,
+        toolbarExtra: (_jsx(Button, { asChild: true, size: "sm", variant: "primary", children: _jsxs("a", { href: newHref, className: "flex items-center gap-1.5", children: ["+ ", BUNDLE_COPY.adminList.newButton] }) })),
+        buildBulkActions: (selection) => [
+            buildBulkAction(ACTIONS.ADMIN["activate-bundle"], async () => {
                 await Promise.all(selection.selectedIds.map((id) => fetch(ADMIN_ENDPOINTS.BUNDLE_BY_ID(id), {
                     method: "PUT",
                     headers: { "Content-Type": "application/json" },
                     body: JSON.stringify({ isActive: true }),
                 })));
                 selection.clearSelection();
-                refetch();
-            },
-        },
-        {
-            id: "deactivate",
-            label: ACTIONS.ADMIN["deactivate-bundle"].label,
-            variant: "secondary",
-            onClick: async () => {
+            }),
+            buildBulkAction(ACTIONS.ADMIN["deactivate-bundle"], async () => {
                 await Promise.all(selection.selectedIds.map((id) => fetch(ADMIN_ENDPOINTS.BUNDLE_BY_ID(id), {
                     method: "PUT",
                     headers: { "Content-Type": "application/json" },
                     body: JSON.stringify({ isActive: false }),
                 })));
                 selection.clearSelection();
-                refetch();
-            },
-        },
-        {
-            id: "delete",
-            label: ACTIONS.ADMIN["delete-bundle"].label,
-            variant: "danger",
-            onClick: async () => {
+            }),
+            buildBulkAction(ACTIONS.ADMIN["delete-bundle"], async () => {
                 await Promise.all(selection.selectedIds.map((id) => fetch(ADMIN_ENDPOINTS.BUNDLE_BY_ID(id), { method: "DELETE" })));
                 selection.clearSelection();
-                refetch();
-            },
-        },
-    ];
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Bundles" }), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search bundles by name or slug\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => {
-                    table.set("sort", v);
-                }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsx(Button, { asChild: true, size: "sm", variant: "primary", children: _jsxs("a", { href: newHref, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), BUNDLE_COPY.adminList.newButton] }) }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions }), 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, { columns: COLUMNS, rows: rows, isLoading: isLoading, emptyLabel: BUNDLE_COPY.adminList.empty, getRowHref: getEditHref, selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next
-                            ? selection.setSelectedIds(rows.map((r) => r.id))
-                            : selection.clearSelection(), renderRowActions: (row) => (_jsx(Button, { variant: "ghost", size: "sm", isLoading: rebuildingId === row.id, disabled: rebuildingId === row.id, onClick: () => void handleRebuild(row.id), children: ACTIONS.ADMIN["rebuild-bundle"].label })) })] }), _jsx(BundlesFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters })] }));
+            }),
+        ],
+        renderRowActions: (row) => (_jsx(Button, { variant: "ghost", size: "sm", isLoading: rebuildingId === row.id, disabled: rebuildingId === row.id, onClick: () => void handleRebuild(row.id), children: ACTIONS.ADMIN["rebuild-bundle"].label })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { 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", value: "true" },
+                                { label: "Inactive", value: "false" },
+                            ].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isActive: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isActive || "") === opt.value
+                                    ? "bg-primary text-white border-primary"
+                                    : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt.label }, opt.label))) })] }), _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: "Stock" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [
+                                { label: "All", value: "" },
+                                { label: "Sold out", value: "out_of_stock" },
+                            ].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, bundleStockStatus: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.bundleStockStatus || "") === 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 _jsx(DataListingView, { config: config });
 }

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

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

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

@@ -1,76 +1,32 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
-import { X } from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, ListingToolbar, ListingViewShell, Pagination, Text } from "../../../ui";
+import { BulkActionBar, ConfirmDeleteModal, ListingFilterDrawer, ListingToolbar, ListingLayout, Pagination, Text } from "../../../ui";
 import { useBottomActions } from "../../layout";
 import { ADMIN_ENDPOINTS, HOMEPAGE_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { useAdminListing } from "../hooks/useAdminListing";
 import { DataTable } from "./DataTable";
 import { RowActionMenu } from "../../../ui/components/RowActionMenu";
 import { apiClient } from "../../../http";
 const PAGE_SIZE = 50;
 const FILTER_KEYS = ["active"];
 const DEFAULT_SORT = "order";
-function CarouselFilterDrawer({ 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", value: "true" }, { label: "Inactive", value: "false" }].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, active: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.active || "") === 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 AdminCarouselView({ children, onBulkDelete, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     const [draggingId, setDraggingId] = useState(null);
+    const [deleteTargetId, setDeleteTargetId] = useState(null);
     const [localRows, setLocalRows] = useState([]);
     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 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") || activeFilterCount > 0;
-    const activeRaw = table.get("active");
-    const filterParts = [];
-    if (activeRaw === "true")
-        filterParts.push("active==true");
-    else if (activeRaw === "false")
-        filterParts.push("active==false");
-    const filters = filterParts.join(",") || undefined;
-    const { rows: fetchedRows, total, isLoading, errorMessage } = useAdminListingData({
+    const { view, setView, table, searchInput, setSearchInput, commitSearch, filterOpen, setFilterOpen, openFilters, applyFilters, clearFilters, pendingFilters, setPendingFilters, activeFilterCount, hasActiveState, resetAll, rows: fetchedRows, total, isLoading, errorMessage, currentPage, totalPages, selection, } = useAdminListing({
+        filterKeys: FILTER_KEYS,
+        defaultSort: DEFAULT_SORT,
+        pageSize: PAGE_SIZE,
         queryKey: ["admin", "carousel", "listing"],
         endpoint: `${HOMEPAGE_ENDPOINTS.CAROUSEL}?includeInactive=true`,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        filters,
-        q: table.get("q") || undefined,
         mapRows: (response) => {
             const sourceItems = Array.isArray(response.data) ? response.data : response.items;
             return toRecordArray(sourceItems)
@@ -93,6 +49,14 @@ export function AdminCarouselView({ children, onBulkDelete, ...props }) {
             });
         },
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        buildFilters: (filterState) => {
+            const activeRaw = filterState.active;
+            if (activeRaw === "true")
+                return "active==true";
+            if (activeRaw === "false")
+                return "active==false";
+            return undefined;
+        },
     });
     React.useEffect(() => {
         setLocalRows(fetchedRows);
@@ -109,11 +73,7 @@ export function AdminCarouselView({ children, onBulkDelete, ...props }) {
             queryClient.invalidateQueries({ queryKey: ["admin", "carousel", "listing"] });
         },
     });
-    const handleDeleteSlide = useCallback((id) => {
-        if (confirm("Delete this carousel slide? This cannot be undone.")) {
-            deleteMutation.mutate(id);
-        }
-    }, [deleteMutation]);
+    const handleDeleteSlide = useCallback((id) => setDeleteTargetId(id), []);
     const handleDragStart = (id) => setDraggingId(id);
     const handleDrop = (targetId) => {
         if (!draggingId || draggingId === targetId) {
@@ -133,20 +93,12 @@ export function AdminCarouselView({ children, onBulkDelete, ...props }) {
         setDraggingId(null);
         reorderMutation.mutate(next.map((r) => r.id));
     };
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: fetchedRows, keyExtractor: (r) => r.id });
     const bulkActions = [
-        ...(onBulkDelete ? [{
-                id: "bulk-delete",
-                label: ACTIONS.ADMIN["delete-carousel"].label,
-                variant: "danger",
-                onClick: async () => { await onBulkDelete(selection.selectedIds); selection.clearSelection(); },
-            }] : []),
+        ...(onBulkDelete ? [buildBulkAction(ACTIONS.ADMIN["delete-carousel"], async () => { await onBulkDelete(selection.selectedIds); selection.clearSelection(); })] : []),
     ];
     useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
     if (hasChildren) {
-        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+        return _jsx(ListingLayout, { portal: "admin", ...props, children: children });
     }
     const displayRows = (localRows.length > 0 ? localRows : fetchedRows).map((row) => ({
         ...row,
@@ -191,5 +143,5 @@ export function AdminCarouselView({ children, onBulkDelete, ...props }) {
                 ] })),
         },
     ];
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search slide titles", onSearchChange: setSearchInput, onSearchCommit: commitSearch, 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) }) })), selection.selectedCount > 0 && bulkActions.length > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-error-surface px-4 py-3 text-sm text-error dark:border-red-900/60", children: errorMessage })), _jsx(DataTable, { rows: displayRows, columns: columns, isLoading: isLoading, emptyLabel: "No carousel slides \u2014 use 'New slide' to add one", getRowHref: (row) => `/admin/carousel/${row.id}/edit` })] }), _jsx(CarouselFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters })] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search slide titles", onSearchChange: setSearchInput, onSearchCommit: commitSearch, 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) }) })), selection.selectedCount > 0 && bulkActions.length > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), _jsx(DataTable, { rows: displayRows, columns: columns, isLoading: isLoading, emptyLabel: "No carousel slides \u2014 use 'New slide' to add one", getRowHref: (row) => `/admin/carousel/${row.id}/edit` })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [{ label: "All", value: "" }, { label: "Active", value: "true" }, { label: "Inactive", value: "false" }].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, active: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.active || "") === 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))) })] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Carousel Slide", message: "Delete this carousel slide? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(deleteTargetId); setDeleteTargetId(null); }, onClose: () => setDeleteTargetId(null), isDeleting: deleteMutation.isPending }))] }));
 }

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

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

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

@@ -1,95 +1,45 @@
 "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 { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { FilterChipGroup, ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { FilterChipGroup, ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_CART_OWNERSHIP_TABS } from "../constants/filter-tabs";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["type"];
-const DEFAULT_SORT = "-updatedAt";
-const SORT_OPTIONS = [
-    { value: "-updatedAt", label: "Recently updated" },
-    { value: "updatedAt", label: "Oldest" },
-];
-const TYPE_OPTIONS = ADMIN_CART_OWNERSHIP_TABS;
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+const ADMIN_CARTS_CONFIG = {
+    portal: "admin",
+    title: "Carts",
+    searchPlaceholder: "Search by user ID or session",
+    emptyLabel: "No carts found",
+    filterKeys: ["type"],
+    defaultSort: "-updatedAt",
+    queryKey: ["admin", "carts", "listing"],
+    endpoint: ADMIN_ENDPOINTS.ADMIN_CARTS,
+    sortOptions: [
+        { value: "-updatedAt", label: "Recently updated" },
+        { value: "updatedAt", label: "Oldest" },
+    ],
+    mapRows: (response) => toRecordArray(response.items).map((item, index) => {
+        const isGuest = !item.userId;
+        const itemCount = Array.isArray(item.items) ? item.items.length : 0;
+        const sessionShort = toStringValue(item.sessionId, "").slice(0, 8);
+        return {
+            id: toStringValue(item.id, `cart-${index}`),
+            primary: isGuest
+                ? `Guest · ${sessionShort || "—"}`
+                : toStringValue(item.userId, `user-${index}`),
+            secondary: `${itemCount} item${itemCount !== 1 ? "s" : ""}`,
+            status: isGuest ? "Guest" : "Authenticated",
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        };
+    }),
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: (state) => state.type && state.type !== "All" ? `type==${state.type}` : undefined,
+    renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Type", tabs: ADMIN_CART_OWNERSHIP_TABS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })),
+};
 export function AdminCartsView({ 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 [filterOpen, setFilterOpen] = useState(false);
-    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 [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 typeRaw = table.get("type");
-    const filters = typeRaw && typeRaw !== "All" ? `type==${typeRaw}` : undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "carts", "listing"],
-        endpoint: ADMIN_ENDPOINTS.ADMIN_CARTS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
-        mapRows: (response) => toRecordArray(response.items).map((item, index) => {
-            const isGuest = !item.userId;
-            const itemCount = Array.isArray(item.items) ? item.items.length : 0;
-            const sessionShort = toStringValue(item.sessionId, "").slice(0, 8);
-            return {
-                id: toStringValue(item.id, `cart-${index}`),
-                primary: isGuest
-                    ? `Guest · ${sessionShort || "—"}`
-                    : toStringValue(item.userId, `user-${index}`),
-                secondary: `${itemCount} item${itemCount !== 1 ? "s" : ""}`,
-                status: isGuest ? "Guest" : "Authenticated",
-                updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-            };
-        }),
-        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: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by user ID or session", 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 carts found", selectedIds: selectedIds, onToggleSelect: toggleSelect, onToggleSelectAll: (next) => setSelectedIds(next ? new Set(rows.map((r) => r.id)) : new Set()) })] }), filterOpen && (_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: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: 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})` : ""] }) })] })] }))] }));
+    return _jsx(DataListingView, { config: ADMIN_CARTS_CONFIG });
 }

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

@@ -1,7 +1,7 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface AdminCategoriesViewProps extends ListingViewShellProps {
+import type { ListingLayoutProps } from "../../../ui";
+export interface AdminCategoriesViewProps extends ListingLayoutProps {
     getRowHref?: (row: {
         id: string;
     }) => string;
 }
-export declare function AdminCategoriesView({ children, getRowHref, ...props }: AdminCategoriesViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminCategoriesView({ children, getRowHref: _getRowHref, ...props }: AdminCategoriesViewProps): import("react/jsx-runtime").JSX.Element;