@mohasinac/appkit 2.7.59 → 2.8.0

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

@@ -1,82 +1,17 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, RowActionMenu, useToast, ListingFilterDrawer } from "../../../ui";
+import { FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_EVENT_ENTRY_STATUS_TABS } from "../constants/filter-tabs";
-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";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
-const DEFAULT_SORT = "-submittedAt";
-const SORT_OPTIONS = [
-    { value: "-submittedAt", label: "Newest" },
-    { value: "submittedAt", label: "Oldest" },
-];
-const STATUS_OPTIONS = ADMIN_EVENT_ENTRY_STATUS_TABS;
 export function AdminAllEventEntriesView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     const queryClient = useQueryClient();
     const { showToast } = useToast();
-    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 statusRaw = table.get("status");
-    const filters = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "event-entries", "listing"],
-        endpoint: ADMIN_ENDPOINTS.ADMIN_EVENT_ENTRIES,
-        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) => ({
-            id: toStringValue(item.id, `entry-${index}`),
-            primary: toStringValue(item.userDisplayName ?? item.userName, "Unknown user"),
-            secondary: [
-                toStringValue(item.eventId, ""),
-                toStringValue(item.userEmail, ""),
-            ].filter(Boolean).join(" · "),
-            status: toStringValue(item.status ?? item.reviewStatus, "PENDING"),
-            updatedAt: toRelativeDate(item.submittedAt ?? item.createdAt),
-            eventId: toStringValue(item.eventId, ""),
-        })),
-        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    });
     const updateMutation = useMutation({
         mutationFn: async ({ id, status }) => {
             await apiClient.patch(ADMIN_ENDPOINTS.ADMIN_EVENT_ENTRY_BY_ID(id), { status });
@@ -89,18 +24,50 @@ export function AdminAllEventEntriesView({ children, ...props }) {
             showToast(err?.message ?? "Failed to update entry.", "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 });
+    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 name or event 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 entries found", renderRowActions: (row) => {
-                            const er = row;
-                            return (_jsx(RowActionMenu, { actions: [
-                                    { label: ACTIONS.ADMIN["confirm-entry"].label, onClick: () => updateMutation.mutate({ id: er.id, status: "CONFIRMED" }) },
-                                    { label: ACTIONS.ADMIN["waitlist-entry"].label, onClick: () => updateMutation.mutate({ id: er.id, status: "WAITLISTED" }) },
-                                    { label: ACTIONS.ADMIN["cancel-entry"].label, destructive: true, onClick: () => updateMutation.mutate({ id: er.id, status: "CANCELLED" }) },
-                                ] }));
-                        } })] }), _jsx(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 })) }) })] }));
+    const config = {
+        portal: "admin",
+        title: "Event Entries",
+        searchPlaceholder: "Search by user name or event ID",
+        emptyLabel: "No entries found",
+        filterKeys: ["status"],
+        defaultSort: "-submittedAt",
+        queryKey: ["admin", "event-entries", "listing"],
+        endpoint: ADMIN_ENDPOINTS.ADMIN_EVENT_ENTRIES,
+        sortOptions: [
+            { value: "-submittedAt", label: "Newest" },
+            { value: "submittedAt", label: "Oldest" },
+        ],
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `entry-${index}`),
+            primary: toStringValue(item.userDisplayName ?? item.userName, "Unknown user"),
+            secondary: [toStringValue(item.eventId, ""), toStringValue(item.userEmail, "")]
+                .filter(Boolean)
+                .join(" · "),
+            status: toStringValue(item.status ?? item.reviewStatus, "PENDING"),
+            updatedAt: toRelativeDate(item.submittedAt ?? item.createdAt),
+            eventId: toStringValue(item.eventId, ""),
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        buildFilters: (state) => state.status && state.status !== "All" ? `status==${state.status}` : undefined,
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ACTIONS.ADMIN["confirm-entry"].label,
+                    onClick: () => updateMutation.mutate({ id: row.id, status: "CONFIRMED" }),
+                },
+                {
+                    label: ACTIONS.ADMIN["waitlist-entry"].label,
+                    onClick: () => updateMutation.mutate({ id: row.id, status: "WAITLISTED" }),
+                },
+                {
+                    label: ACTIONS.ADMIN["cancel-entry"].label,
+                    destructive: true,
+                    onClick: () => updateMutation.mutate({ id: row.id, status: "CANCELLED" }),
+                },
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_EVENT_ENTRY_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return _jsx(DataListingView, { config: config });
 }

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

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

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

@@ -1,87 +1,20 @@
 "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, FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, ConfirmDeleteModal, RowActionMenu, useToast, ListingFilterDrawer } from "../../../ui";
+import { ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_BID_STATUS_TABS } from "../constants/filter-tabs";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
-import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 import { apiClient } from "../../../http";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
-const DEFAULT_SORT = "-bidTime";
-const SORT_OPTIONS = [
-    { value: "-bidTime", label: "Newest" },
-    { value: "bidTime", label: "Oldest" },
-    { value: "-amount", label: "Highest amount" },
-];
-const STATUS_OPTIONS = ADMIN_BID_STATUS_TABS;
 export function AdminBidsView({ children, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const [cancelOpen, setCancelOpen] = useState(false);
     const [selectedRow, setSelectedRow] = 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 statusRaw = table.get("status");
-    const filters = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "bids", "listing"],
-        endpoint: ADMIN_ENDPOINTS.BIDS,
-        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) => ({
-            id: toStringValue(item.id, `bid-${index}`),
-            primary: [
-                toStringValue(item.productName ?? item.productTitle, "Unknown item"),
-                toRupees(item.amount),
-            ].join(" · "),
-            secondary: toStringValue(item.bidderId ?? item.bidderName ?? item.userId, "Unknown bidder"),
-            status: toStringValue(item.status, "active"),
-            updatedAt: toRelativeDate(item.bidTime ?? item.bidDate ?? item.updatedAt ?? item.createdAt),
-            _raw: item,
-        })),
-        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    });
     const cancelMutation = useMutation({
         mutationFn: async (bidId) => {
             await apiClient.patch(ADMIN_ENDPOINTS.BID_BY_ID(bidId), { status: "cancelled" });
@@ -96,31 +29,64 @@ export function AdminBidsView({ children, ...props }) {
             showToast(err?.message ?? "Failed to cancel bid.", "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 });
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { 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 bids, products, or bidder IDs", 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.CANCEL, label: ACTIONS.ADMIN["cancel-bid"].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 bids found", renderRowActions: (row) => {
-                                    const bidRow = row;
-                                    const isCancelled = bidRow.status === "cancelled" || bidRow.status === "voided";
-                                    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                                                { id: ROW_ACTION_ID.CANCEL, label: ACTIONS.ADMIN["cancel-bid"].label, variant: "secondary", onClick: () => { selection.clearSelection(); } },
-                                            ] } } : {});
-                                    return (_jsx(RowActionMenu, { actions: [
-                                            {
-                                                label: ROW_ACTION_META[ROW_ACTION_ID.CANCEL].label,
-                                                destructive: ROW_ACTION_META[ROW_ACTION_ID.CANCEL].destructive,
-                                                disabled: isCancelled,
-                                                onClick: () => {
-                                                    setSelectedRow(bidRow);
-                                                    setCancelOpen(true);
-                                                },
-                                            },
-                                        ] }));
-                                } })] }), _jsx(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(ConfirmDeleteModal, { isOpen: cancelOpen, onClose: () => { setCancelOpen(false); setSelectedRow(null); }, onConfirm: () => { if (selectedRow)
-                    cancelMutation.mutate(selectedRow.id); }, isDeleting: cancelMutation.isPending, title: "Cancel this bid?", message: "This will mark the bid as cancelled and notify the bidder. The auction will continue with remaining active bids.", confirmText: "Cancel bid", variant: "warning" })] }));
+    const config = {
+        portal: "admin",
+        title: "Bids",
+        searchPlaceholder: "Search bids, products, or bidder IDs",
+        emptyLabel: "No bids found",
+        filterKeys: ["status"],
+        defaultSort: "-bidTime",
+        queryKey: ["admin", "bids", "listing"],
+        endpoint: ADMIN_ENDPOINTS.BIDS,
+        sortOptions: [
+            { value: "-bidTime", label: "Newest" },
+            { value: "bidTime", label: "Oldest" },
+            { value: "-amount", label: "Highest amount" },
+        ],
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `bid-${index}`),
+            primary: [
+                toStringValue(item.productName ?? item.productTitle, "Unknown item"),
+                toRupees(item.amount),
+            ].join(" · "),
+            secondary: toStringValue(item.bidderId ?? item.bidderName ?? item.userId, "Unknown bidder"),
+            status: toStringValue(item.status, "active"),
+            updatedAt: toRelativeDate(item.bidTime ?? item.bidDate ?? item.updatedAt ?? item.createdAt),
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        buildFilters: (state) => state.status && state.status !== "All" ? `status==${state.status}` : undefined,
+        buildBulkActions: (selection) => [
+            {
+                id: ROW_ACTION_ID.CANCEL,
+                label: ACTIONS.ADMIN["cancel-bid"].label,
+                variant: "secondary",
+                onClick: () => selection.clearSelection(),
+            },
+        ],
+        renderRowActions: (row) => {
+            const isCancelled = row.status === "cancelled" || row.status === "voided";
+            return (_jsx(RowActionMenu, { actions: [
+                    {
+                        label: ROW_ACTION_META[ROW_ACTION_ID.CANCEL].label,
+                        destructive: ROW_ACTION_META[ROW_ACTION_ID.CANCEL].destructive,
+                        disabled: isCancelled,
+                        onClick: () => {
+                            setSelectedRow(row);
+                            setCancelOpen(true);
+                        },
+                    },
+                ] }));
+        },
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_BID_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(ConfirmDeleteModal, { isOpen: cancelOpen, onClose: () => {
+                    setCancelOpen(false);
+                    setSelectedRow(null);
+                }, onConfirm: () => {
+                    if (selectedRow)
+                        cancelMutation.mutate(selectedRow.id);
+                }, isDeleting: cancelMutation.isPending, title: "Cancel this bid?", message: "This will mark the bid as cancelled and notify the bidder. The auction will continue with remaining active bids.", confirmText: "Cancel bid", variant: "warning" })] }));
 }

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

@@ -1,7 +1,3 @@
-import type { ListingViewShellProps } from "../../../ui";
-import type { AdminListingScaffoldRow } from "./AdminListingScaffold";
-export interface AdminBlogViewProps extends ListingViewShellProps {
-    actionHref?: string;
-    getRowHref?: (row: AdminListingScaffoldRow) => string;
-}
-export declare function AdminBlogView({ children, getRowHref, ...props }: AdminBlogViewProps): import("react/jsx-runtime").JSX.Element;
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminBlogViewProps = ListingLayoutProps;
+export declare function AdminBlogView({ children, ...props }: AdminBlogViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,82 +1,36 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
-import { Plus } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, Button, FilterChipGroup, Heading, ListingToolbar, ListingViewShell, Pagination, SideDrawer, ListingFilterDrawer } from "../../../ui";
-import { AdminViewCards } from "./AdminViewCards";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { FilterChipGroup, ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_BLOG_STATUS_TABS } from "../constants/filter-tabs";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { DataTable } from "./DataTable";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 import { AdminBlogEditorView } from "./AdminBlogEditorView";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status", "isFeatured"];
-const DEFAULT_SORT = "-publishedAt";
-const SORT_OPTIONS = [
-    { value: "-publishedAt", label: "Latest" },
-    { value: "publishedAt", label: "Oldest" },
-    { value: "-createdAt", label: "Newest draft" },
-    { value: "title", label: "Title A–Z" },
-];
-const STATUS_OPTIONS = ADMIN_BLOG_STATUS_TABS;
 const FEATURED_TABS = [
     { id: "", label: "All" },
     { id: "true", label: "Featured only" },
 ];
-export function AdminBlogView({ children, getRowHref, ...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 { openCreatePanel, openEditPanel, closePanel, isCreateOpen, isEditOpen, editId } = usePanelUrlSync();
-    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 filterParts = [];
-    const statusRaw = table.get("status");
-    if (statusRaw && statusRaw !== "All")
-        filterParts.push(`status==${statusRaw}`);
-    if (table.get("isFeatured") === "true")
-        filterParts.push("isFeatured==true");
-    const filters = filterParts.join(",") || undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+export function AdminBlogView({ children, ...props }) {
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const config = {
+        portal: "admin",
+        title: "Blog Posts",
+        searchPlaceholder: "Search articles, authors, or tags",
+        emptyLabel: "No blog posts found",
+        filterKeys: ["status", "isFeatured"],
+        defaultSort: "-publishedAt",
         queryKey: ["admin", "blog", "listing"],
         endpoint: ADMIN_ENDPOINTS.BLOG,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "-publishedAt", label: "Latest" },
+            { value: "publishedAt", label: "Oldest" },
+            { value: "-createdAt", label: "Newest draft" },
+            { value: "title", label: "Title A–Z" },
+        ],
         mapRows: (response) => toRecordArray(response.posts).map((item, index) => ({
             id: toStringValue(item.id, `post-${index}`),
             primary: toStringValue(item.title, "Untitled post"),
@@ -94,19 +48,35 @@ export function AdminBlogView({ children, getRowHref, ...props }) {
                 return response.meta.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 });
-    }
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: "publish", label: ACTIONS.ADMIN["publish-blog"].label, variant: "primary", onClick: () => { selection.clearSelection(); } },
-                { id: "draft", label: ACTIONS.ADMIN["draft-blog"].label, variant: "secondary", onClick: () => { selection.clearSelection(); } },
-            ] } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Blog Posts" }), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search articles, authors, or tags", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "New Post"] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                    { id: "publish", label: ACTIONS.ADMIN["publish-blog"].label, variant: "primary", onClick: () => { selection.clearSelection(); } },
-                    { id: "draft", label: ACTIONS.ADMIN["draft-blog"].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 })), view === "table" ? (_jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No blog posts found", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next ? selection.setSelectedIds(rows.map(r => r.id)) : selection.clearSelection(), onRowClick: (row) => openEditPanel(row.id) })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No blog posts found", onRowClick: (row) => openEditPanel(row.id), 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: "Featured", tabs: FEATURED_TABS, value: pendingFilters.isFeatured ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, isFeatured: id })), allId: "" })] }), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "New Post" : "Edit Post", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminBlogEditorView, { postId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })) })] }));
+        buildFilters: (state) => {
+            const filterParts = [];
+            if (state.status && state.status !== "All")
+                filterParts.push(`status==${state.status}`);
+            if (state.isFeatured === "true")
+                filterParts.push("isFeatured==true");
+            return filterParts.join(",") || undefined;
+        },
+        primaryAction: {
+            label: "New Post",
+            onClick: ({ openCreatePanel }) => openCreatePanel(),
+        },
+        buildBulkActions: (selection) => [
+            {
+                id: "publish",
+                label: ACTIONS.ADMIN["publish-blog"].label,
+                variant: "primary",
+                onClick: () => selection.clearSelection(),
+            },
+            {
+                id: "draft",
+                label: ACTIONS.ADMIN["draft-blog"].label,
+                variant: "secondary",
+                onClick: () => selection.clearSelection(),
+            },
+        ],
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_BLOG_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Featured", tabs: FEATURED_TABS, value: pendingFilters.isFeatured ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, isFeatured: id })), allId: "" })] })),
+        renderEditor: ({ editId, closePanel }) => (_jsx(AdminBlogEditorView, { postId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
+        resolveEditorTitle: ({ isCreate }) => (isCreate ? "New Post" : "Edit Post"),
+    };
+    return _jsx(DataListingView, { config: config });
 }

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

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