@mohasinac/appkit 2.7.58 → 2.8.0

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

@@ -1,87 +1,36 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
-import { Plus, X } 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 } 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" },
 ];
-function BlogFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, pendingFilters, setPendingFilters, applyFilters, }) {
-    if (!filterOpen)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Featured", tabs: FEATURED_TABS, value: pendingFilters.isFeatured ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, isFeatured: id })), allId: "" })] }), _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 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"),
@@ -99,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 }))] }), _jsx(BlogFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters }), _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/AdminBrandEditorView.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Button, Form, Input, StackedViewShell, Toggle, useToast, } from "../../../ui";
+import { Button, ConfirmDeleteModal, Form, Input, StackedViewShell, Toggle, useToast, } from "../../../ui";
 import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { ImageUpload } from "../../media/upload/ImageUpload";
 import { useMediaUpload } from "../../media";
@@ -23,6 +23,7 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
     const [website, setWebsite] = React.useState("");
     const [isActive, setIsActive] = React.useState(true);
     const [displayOrder, setDisplayOrder] = React.useState("");
+    const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
     const { showToast } = useToast();
     const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     const brandQuery = useQuery({
@@ -90,22 +91,18 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
     });
     const { upload } = useMediaUpload();
     const isSubmitting = saveMutation.isPending || brandQuery.isLoading;
-    const formSection = (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: (e) => {
-                e.preventDefault();
-                clearErrors();
-                if (!name.trim()) {
-                    setFieldError("name", "Brand name is required");
-                    return;
-                }
-                saveMutation.mutate();
-            }, className: "space-y-4", children: [_jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(FieldInput, { name: "name", label: "Brand name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Hot Wheels" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                                setSlug(e.target.value);
-                                setSlugManual(true);
-                            }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(ImageUpload, { label: "Logo", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsx(ImageUpload, { label: "Banner", currentImage: bannerURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-banner", brand: name || slug }), onChange: setBannerURL })] }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create brand" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                                if (confirm("Delete this brand? This cannot be undone.")) {
-                                    deleteMutation.mutate();
-                                }
-                            }, children: "Delete brand" }))] })] }, "brand-form") }));
+    const formSection = (_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    clearErrors();
+                    if (!name.trim()) {
+                        setFieldError("name", "Brand name is required");
+                        return;
+                    }
+                    saveMutation.mutate();
+                }, className: "space-y-4", children: [_jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(FieldInput, { name: "name", label: "Brand name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Hot Wheels" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+                                    setSlug(e.target.value);
+                                    setSlugManual(true);
+                                }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(ImageUpload, { label: "Logo", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsx(ImageUpload, { label: "Banner", currentImage: bannerURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-banner", brand: name || slug }), onChange: setBannerURL })] }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create brand" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", onClick: () => setDeleteConfirmOpen(true), children: "Delete brand" }))] })] }, "brand-form"), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Brand", message: "Delete this brand? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
     if (embedded) {
         return _jsx("div", { className: "overflow-y-auto p-4", children: formSection });
     }

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;

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

@@ -1,97 +1,93 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
-import { Plus, X } 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, ListingToolbar, ListingViewShell, Pagination, SideDrawer, Text } from "../../../ui";
-import { AdminViewCards } from "./AdminViewCards";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { ListingLayout, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 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 { AdminBrandEditorView } from "./AdminBrandEditorView";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["isActive"];
-const DEFAULT_SORT = "displayOrder";
-const SORT_OPTIONS = [
-    { value: "displayOrder", label: "Display order" },
-    { value: "name", label: "Name A–Z" },
-    { value: "-name", label: "Name Z–A" },
-    { value: "-createdAt", label: "Newest" },
+import { Span } from "../../../ui";
+const COLUMNS = [
+    {
+        key: "primary",
+        header: "Brand",
+        sortable: true,
+        render: (row) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
+    },
+    {
+        key: "status",
+        header: "Status",
+        className: "w-32",
+        render: (row) => (_jsx(Span, { className: "inline-flex rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", children: row.status })),
+    },
+    {
+        key: "updatedAt",
+        header: "Updated",
+        className: "w-32",
+        render: (row) => (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: row.updatedAt })),
+    },
 ];
-function BrandsFilterDrawer({ 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, 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})` : ""] }) })] })] }));
-}
+const ADMIN_BRANDS_CONFIG = {
+    portal: "admin",
+    title: "Brands",
+    searchPlaceholder: "Search brands by name or slug",
+    emptyLabel: "No brands found",
+    filterKeys: ["isActive"],
+    defaultSort: "displayOrder",
+    queryKey: ["admin", "brands", "listing"],
+    endpoint: ADMIN_ENDPOINTS.BRANDS,
+    sortOptions: [
+        { value: "displayOrder", label: "Display order" },
+        { value: "name", label: "Name A–Z" },
+        { value: "-name", label: "Name Z–A" },
+        { value: "-createdAt", label: "Newest" },
+    ],
+    columns: COLUMNS,
+    mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+        id: toStringValue(item.id, `brand-${index}`),
+        primary: toStringValue(item.name, "Untitled brand"),
+        secondary: `Slug: ${toStringValue(item.slug, "no-slug")}${item.website ? ` · ${item.website}` : ""}`,
+        status: typeof item.isActive === "boolean"
+            ? item.isActive
+                ? "Active"
+                : "Inactive"
+            : "Active",
+        updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+    })),
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: (state) => state.isActive ? `isActive==${state.isActive}` : undefined,
+    primaryAction: {
+        label: "Add Brand",
+        onClick: ({ openCreatePanel }) => openCreatePanel(),
+    },
+    buildBulkActions: (selection) => [
+        {
+            id: "edit",
+            label: ACTIONS.ADMIN["edit-brand"].label,
+            variant: "primary",
+            onClick: () => {
+                const id = selection.selectedIds[0];
+                if (id)
+                    selection.openEditPanel(id);
+                selection.clearSelection();
+            },
+        },
+    ],
+    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", 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))) })] })),
+    renderEditor: ({ editId, closePanel }) => (_jsx(AdminBrandEditorView, { brandId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
+    resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Brand" : "Edit Brand"),
+};
 export function AdminBrandsView({ 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 { 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 isActiveRaw = table.get("isActive");
-    const filters = isActiveRaw ? `isActive==${isActiveRaw}` : undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "brands", "listing"],
-        endpoint: ADMIN_ENDPOINTS.BRANDS,
-        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, `brand-${index}`),
-            primary: toStringValue(item.name, "Untitled brand"),
-            secondary: `Slug: ${toStringValue(item.slug, "no-slug")}${item.website ? ` · ${item.website}` : ""}`,
-            status: typeof item.isActive === "boolean" ? (item.isActive ? "Active" : "Inactive") : "Active",
-            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 });
+    // Backward-compat passthrough — some page shims wrap with custom children.
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: "edit", label: ACTIONS.ADMIN["edit-brand"].label, variant: "primary", onClick: () => { const id = selection.selectedIds[0]; if (id)
-                        openEditPanel(id); selection.clearSelection(); } },
-            ] } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search brands by name or slug", 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" }), "Add Brand"] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                    { id: "edit", label: ACTIONS.ADMIN["edit-brand"].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 brands 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 brands found", onRowClick: (row) => openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsx(BrandsFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters }), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Brand" : "Edit Brand", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminBrandEditorView, { brandId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })) })] }));
+    return _jsx(DataListingView, { config: ADMIN_BRANDS_CONFIG });
 }