@mohasinac/appkit 2.7.58 → 2.8.0

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

@@ -1,105 +1,106 @@
 "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, Heading, ListingToolbar, ListingViewShell, Pagination, SideDrawer, Text } from "../../../ui";
-import { AdminViewCards } from "./AdminViewCards";
+import React from "react";
+import { Heading, ListingLayout, Span, Text } from "../../../ui";
 import { CATEGORY_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 { AdminCategoryEditorView } from "./AdminCategoryEditorView";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 50;
-const FILTER_KEYS = ["isActive", "isFeatured"];
-const DEFAULT_SORT = "name";
-const SORT_OPTIONS = [
-    { value: "name", label: "Name A–Z" },
-    { value: "-name", label: "Name Z–A" },
-    { value: "-createdAt", label: "Newest" },
+const COLUMNS = [
+    {
+        key: "primary",
+        header: "Category",
+        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 CategoriesFilterDrawer({ 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: "Active" }), _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: "Featured" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [{ label: "All", value: "" }, { label: "Featured only", value: "true" }].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isFeatured: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isFeatured || "") === 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 AdminCategoriesView({ 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 isActiveRaw = table.get("isActive");
-    if (isActiveRaw)
-        filterParts.push(`isActive==${isActiveRaw}`);
-    const isFeaturedRaw = table.get("isFeatured");
-    if (isFeaturedRaw === "true")
-        filterParts.push("isFeatured==true");
-    const filters = filterParts.join(",") || undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "categories", "listing"],
-        endpoint: `${CATEGORY_ENDPOINTS.LIST}?flat=true`,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
-        mapRows: (response) => {
-            const sourceItems = Array.isArray(response.data) ? response.data : response.items;
-            return toRecordArray(sourceItems).map((item, index) => ({
-                id: toStringValue(item.id, `category-${index}`),
-                primary: toStringValue(item.name, "Untitled category"),
-                secondary: `Slug: ${toStringValue(item.slug, "no-slug")} · Tier: ${typeof item.tier === "number" ? String(item.tier) : "-"} · Parent: ${toStringValue(item.parentId, "root")}`,
-                status: typeof item.isActive === "boolean" ? (item.isActive ? "Active" : "Inactive") : toStringValue(item.status, "Active"),
-                updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-            }));
+const ADMIN_CATEGORIES_CONFIG = {
+    portal: "admin",
+    title: "Categories",
+    searchPlaceholder: "Search categories, slugs, or parent category",
+    emptyLabel: "No categories found",
+    filterKeys: ["isActive", "isFeatured"],
+    defaultSort: "name",
+    pageSize: 50,
+    queryKey: ["admin", "categories", "listing"],
+    endpoint: `${CATEGORY_ENDPOINTS.LIST}?flat=true`,
+    sortOptions: [
+        { value: "name", label: "Name A–Z" },
+        { value: "-name", label: "Name Z–A" },
+        { value: "-createdAt", label: "Newest" },
+    ],
+    columns: COLUMNS,
+    mapRows: (response) => {
+        const sourceItems = Array.isArray(response.data) ? response.data : response.items;
+        return toRecordArray(sourceItems).map((item, index) => ({
+            id: toStringValue(item.id, `category-${index}`),
+            primary: toStringValue(item.name, "Untitled category"),
+            secondary: `Slug: ${toStringValue(item.slug, "no-slug")} · Tier: ${typeof item.tier === "number" ? String(item.tier) : "-"} · Parent: ${toStringValue(item.parentId, "root")}`,
+            status: typeof item.isActive === "boolean"
+                ? item.isActive
+                    ? "Active"
+                    : "Inactive"
+                : toStringValue(item.status, "Active"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        }));
+    },
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: (state) => {
+        const parts = [];
+        if (state.isActive)
+            parts.push(`isActive==${state.isActive}`);
+        if (state.isFeatured === "true")
+            parts.push("isFeatured==true");
+        return parts.join(",") || undefined;
+    },
+    primaryAction: {
+        label: "Add Category",
+        onClick: ({ openCreatePanel }) => openCreatePanel(),
+    },
+    buildBulkActions: (selection) => [
+        {
+            id: "edit",
+            label: ACTIONS.ADMIN["edit-category"].label,
+            variant: "primary",
+            onClick: () => {
+                const id = selection.selectedIds[0];
+                if (id)
+                    selection.openEditPanel(id);
+                selection.clearSelection();
+            },
         },
-        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 });
+    ],
+    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: "Active" }), _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: "Featured" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [
+                            { label: "All", value: "" },
+                            { label: "Featured only", value: "true" },
+                        ].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isFeatured: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isFeatured || "") === 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(AdminCategoryEditorView, { categoryId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
+    resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Category" : "Edit Category"),
+};
+export function AdminCategoriesView({ children, getRowHref: _getRowHref, ...props }) {
+    if (React.Children.count(children) > 0) {
+        return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Categories" }), children] }));
     }
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: "edit", label: ACTIONS.ADMIN["edit-category"].label, variant: "primary", onClick: () => { const id = selection.selectedIds[0]; if (id)
-                        openEditPanel(id); selection.clearSelection(); } },
-            ] } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Categories" }), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search categories, slugs, or parent category", 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 Category"] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                    { id: "edit", label: ACTIONS.ADMIN["edit-category"].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 categories 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 categories found", onRowClick: (row) => openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsx(CategoriesFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters }), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Category" : "Edit Category", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminCategoryEditorView, { categoryId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Categories" }), _jsx(DataListingView, { config: ADMIN_CATEGORIES_CONFIG })] }));
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Button, Card, CardBody, ConfirmDeleteModal, Form, InlineCreateSelect, Input, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
+import { Button, Card, CardBody, ConfirmDeleteModal, Form, PaginatedSelect, Input, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
@@ -114,11 +114,7 @@ export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, embedd
             }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Identity" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(FieldInput, { name: "name", label: "Category name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Toys & Games" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
                                                 setSlug(e.target.value);
                                                 setSlugManual(true);
-                                            }, placeholder: "toys-and-games", helperText: "Auto-generated from name. Used in URLs." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the category" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Parent category" }), _jsx(InlineCreateSelect, { value: parentId || null, onChange: (v) => setParentId(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (leave empty for root)", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: "Parent category", createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, n) => { setParentId(id); onCreated({ value: id, label: n }); }, onCancel: onCancel })) }), _jsx(Text, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Leave empty to create a root category." })] })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Display" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Display order", value: order, onChange: (e) => setOrder(e.target.value), type: "number", min: 0, placeholder: "0" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Show in menu", checked: showInMenu, onChange: setShowInMenu })] })] }), _jsxs("div", { className: "flex gap-3 lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                                if (confirm("Delete this category? Products in this category will become uncategorized.")) {
-                                    deleteMutation.mutate();
-                                }
-                            }, children: "Delete category" }))] })] }, "cat-form") }));
+                                            }, placeholder: "toys-and-games", helperText: "Auto-generated from name. Used in URLs." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the category" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Parent category" }), _jsx(PaginatedSelect, { value: parentId || null, onChange: (v) => setParentId(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026 (leave empty for root)", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: "Parent category", createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, n) => { setParentId(id); onCreated({ value: id, label: n }); }, onCancel: onCancel })) }), _jsx(Text, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Leave empty to create a root category." })] })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Display" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Display order", value: order, onChange: (e) => setOrder(e.target.value), type: "number", min: 0, placeholder: "0" }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Show in menu", checked: showInMenu, onChange: setShowInMenu })] })] }), _jsxs("div", { className: "flex gap-3 lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create category" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete category" }))] })] }, "cat-form") }));
     if (embedded) {
         return _jsx("div", { className: "overflow-y-auto p-4", children: formContent });
     }

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

@@ -0,0 +1,3 @@
+import type { ListingLayoutProps } from "../../../ui";
+export type AdminClassifiedViewProps = ListingLayoutProps;
+export declare function AdminClassifiedView({ children, ...props }: AdminClassifiedViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AdminClassifiedView — admin browse of classified listings (W1-29).
+ * Read-only summary with edit-handoff to the seller-portal edit route.
+ */
+import React from "react";
+import { ListingLayout } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+const ADMIN_CLASSIFIED_CONFIG = {
+    portal: "admin",
+    title: "Classified",
+    searchPlaceholder: "Search classified by name or seller",
+    emptyLabel: "No classified listings",
+    filterKeys: [],
+    defaultSort: "-createdAt",
+    queryKey: ["admin", "classified", "listing"],
+    endpoint: ADMIN_ENDPOINTS.PRODUCTS,
+    sortOptions: [
+        { value: "-createdAt", label: "Newest" },
+        { value: "createdAt", label: "Oldest" },
+        { value: "title", label: "Title A–Z" },
+    ],
+    mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+        id: toStringValue(item.id, `classified-${index}`),
+        primary: toStringValue(item.title ?? item.productTitle, "Untitled classified"),
+        secondary: [
+            toStringValue(item.sellerName, "Unknown seller"),
+            toRupees(item.price),
+        ].join(" · "),
+        status: toStringValue(item.status, "draft"),
+        updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+    })),
+    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    buildFilters: () => "listingType==classified",
+};
+export function AdminClassifiedView({ children, ...props }) {
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    return _jsx(DataListingView, { config: ADMIN_CLASSIFIED_CONFIG });
+}

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

@@ -1,5 +1,5 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface AdminContactViewProps extends ListingViewShellProps {
+import type { ListingLayoutProps } from "../../../ui";
+export interface AdminContactViewProps extends ListingLayoutProps {
     onBulkMarkRead?: (ids: string[]) => Promise<void>;
     onBulkArchive?: (ids: string[]) => Promise<void>;
     onBulkDelete?: (ids: string[]) => Promise<void>;

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

@@ -1,100 +1,23 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
-import { X } from "lucide-react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, ConfirmDeleteModal, FilterChipGroup, ListingToolbar, ListingViewShell, Pagination, RowActionMenu, useToast, } from "../../../ui";
-import { useBottomActions } from "../../layout";
+import { ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
 import { ADMIN_CONTACT_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 { AdminContactEditorView } from "./AdminContactEditorView";
 import { apiClient } from "../../../http";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status"];
-const DEFAULT_SORT = "-createdAt";
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-];
-const STATUS_OPTIONS = ADMIN_CONTACT_STATUS_TABS;
-function ContactFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, pendingFilters, setPendingFilters, applyFilters, }) {
-    if (!filterOpen)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: _jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }));
-}
 export function AdminContactView({ children, onBulkMarkRead, onBulkArchive, onBulkDelete, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState(null);
     const [deleteOpen, setDeleteOpen] = useState(false);
-    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", "contact", "listing"],
-        endpoint: ADMIN_ENDPOINTS.CONTACT_SUBMISSIONS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
-        mapRows: (response) => toRecordArray(response.submissions).map((item, index) => ({
-            id: toStringValue(item.id, `msg-${index}`),
-            primary: toStringValue(item.subject, "No subject"),
-            secondary: [
-                toStringValue(item.name, "Unknown"),
-                toStringValue(item.email, ""),
-            ].filter(Boolean).join(" · ") || "—",
-            status: toStringValue(item.status, "new"),
-            updatedAt: toRelativeDate(item.createdAt),
-            _raw: item,
-        })),
-        getTotal: (response, mappedRows) => {
-            if (typeof response.meta?.filteredTotal === "number")
-                return response.meta.filteredTotal;
-            if (typeof response.meta?.total === "number")
-                return response.meta.total;
-            return mappedRows.length;
-        },
-    });
     const actionMutation = useMutation({
         mutationFn: async ({ id, action }) => {
             await apiClient.patch(ADMIN_ENDPOINTS.CONTACT_SUBMISSION_BY_ID(id), { action });
@@ -121,52 +44,104 @@ export function AdminContactView({ children, onBulkMarkRead, onBulkArchive, onBu
             showToast(err?.message ?? "Failed to delete.", "error");
         },
     });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    const bulkActions = [
-        ...(onBulkMarkRead ? [{
-                id: "bulk-mark-read",
-                label: ACTIONS.ADMIN["mark-contact-read"].label,
-                onClick: async () => { await onBulkMarkRead(selection.selectedIds); selection.clearSelection(); },
-            }] : []),
-        ...(onBulkArchive ? [{
-                id: "bulk-archive",
-                label: ACTIONS.ADMIN["archive-contact"].label,
-                onClick: async () => { await onBulkArchive(selection.selectedIds); selection.clearSelection(); },
-            }] : []),
-        ...(onBulkDelete ? [{
-                id: "bulk-delete",
-                label: ACTIONS.ADMIN["delete-contact"].label,
-                variant: "danger",
-                onClick: 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 });
+    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 by subject, name, or email", 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) }) })), 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: rows, isLoading: isLoading, emptyLabel: "No contact submissions found", renderRowActions: (row) => {
-                                    const cr = row;
-                                    return (_jsx(RowActionMenu, { actions: [
-                                            { label: ROW_ACTION_META[ROW_ACTION_ID.VIEW].label, onClick: () => { setSelectedRow(cr); setDrawerOpen(true); } },
-                                            {
-                                                label: ACTIONS.ADMIN["mark-contact-read"].label,
-                                                disabled: cr.status === "read" || cr.status === "resolved",
-                                                onClick: () => actionMutation.mutate({ id: cr.id, action: "read" }),
-                                            },
-                                            {
-                                                label: ACTIONS.ADMIN["archive-contact"].label,
-                                                disabled: cr.status === "resolved",
-                                                onClick: () => actionMutation.mutate({ id: cr.id, action: "resolved" }),
-                                            },
-                                            { separator: true, label: "", onClick: () => { } },
-                                            {
-                                                label: ACTIONS.ADMIN["delete-contact"].label,
-                                                destructive: true,
-                                                onClick: () => { setSelectedRow(cr); setDeleteOpen(true); },
-                                            },
-                                        ] }));
-                                } })] }), _jsx(ContactFilterDrawer, { filterOpen: filterOpen, setFilterOpen: setFilterOpen, activeFilterCount: activeFilterCount, clearFilters: clearFilters, pendingFilters: pendingFilters, setPendingFilters: setPendingFilters, applyFilters: applyFilters })] }), _jsx(AdminContactEditorView, { open: drawerOpen, onClose: () => { setDrawerOpen(false); setSelectedRow(null); }, submissionId: selectedRow?.id, subject: toStringValue(selectedRow?._raw?.subject, "No subject"), name: toStringValue(selectedRow?._raw?.name, ""), email: toStringValue(selectedRow?._raw?.email, ""), message: toStringValue(selectedRow?._raw?.message ?? selectedRow?._raw?.body, ""), currentStatus: selectedRow?.status }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => { setDeleteOpen(false); setSelectedRow(null); }, onConfirm: () => { if (selectedRow)
-                    deleteMutation.mutate(selectedRow.id); }, isDeleting: deleteMutation.isPending, title: "Delete submission?", message: "This contact submission will be permanently removed.", confirmText: "Delete", variant: "danger" })] }));
+    const config = {
+        portal: "admin",
+        title: "Contact Submissions",
+        searchPlaceholder: "Search by subject, name, or email",
+        emptyLabel: "No contact submissions found",
+        filterKeys: ["status"],
+        defaultSort: "-createdAt",
+        queryKey: ["admin", "contact", "listing"],
+        endpoint: ADMIN_ENDPOINTS.CONTACT_SUBMISSIONS,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+        ],
+        mapRows: (response) => toRecordArray(response.submissions).map((item, index) => ({
+            id: toStringValue(item.id, `msg-${index}`),
+            primary: toStringValue(item.subject, "No subject"),
+            secondary: [toStringValue(item.name, "Unknown"), toStringValue(item.email, "")]
+                .filter(Boolean)
+                .join(" · ") || "—",
+            status: toStringValue(item.status, "new"),
+            updatedAt: toRelativeDate(item.createdAt),
+            _raw: item,
+        })),
+        getTotal: (response, mappedRows) => {
+            if (typeof response.meta?.filteredTotal === "number")
+                return response.meta.filteredTotal;
+            if (typeof response.meta?.total === "number")
+                return response.meta.total;
+            return mappedRows.length;
+        },
+        buildFilters: (f) => (f.status && f.status !== "All" ? `status==${f.status}` : undefined),
+        buildBulkActions: (selection) => [
+            ...(onBulkMarkRead
+                ? [
+                    buildBulkAction(ACTIONS.ADMIN["mark-contact-read"], async () => {
+                        await onBulkMarkRead(selection.selectedIds);
+                        selection.clearSelection();
+                    }),
+                ]
+                : []),
+            ...(onBulkArchive
+                ? [
+                    buildBulkAction(ACTIONS.ADMIN["archive-contact"], async () => {
+                        await onBulkArchive(selection.selectedIds);
+                        selection.clearSelection();
+                    }),
+                ]
+                : []),
+            ...(onBulkDelete
+                ? [
+                    buildBulkAction(ACTIONS.ADMIN["delete-contact"], async () => {
+                        await onBulkDelete(selection.selectedIds);
+                        selection.clearSelection();
+                    }),
+                ]
+                : []),
+        ],
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                {
+                    label: ROW_ACTION_META[ROW_ACTION_ID.VIEW].label,
+                    onClick: () => {
+                        setSelectedRow(row);
+                        setDrawerOpen(true);
+                    },
+                },
+                {
+                    label: ACTIONS.ADMIN["mark-contact-read"].label,
+                    disabled: row.status === "read" || row.status === "resolved",
+                    onClick: () => actionMutation.mutate({ id: row.id, action: "read" }),
+                },
+                {
+                    label: ACTIONS.ADMIN["archive-contact"].label,
+                    disabled: row.status === "resolved",
+                    onClick: () => actionMutation.mutate({ id: row.id, action: "resolved" }),
+                },
+                { separator: true, label: "", onClick: () => { } },
+                {
+                    label: ACTIONS.ADMIN["delete-contact"].label,
+                    destructive: true,
+                    onClick: () => {
+                        setSelectedRow(row);
+                        setDeleteOpen(true);
+                    },
+                },
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_CONTACT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminContactEditorView, { open: drawerOpen, onClose: () => {
+                    setDrawerOpen(false);
+                    setSelectedRow(null);
+                }, submissionId: selectedRow?.id, subject: toStringValue(selectedRow?._raw?.subject, "No subject"), name: toStringValue(selectedRow?._raw?.name, ""), email: toStringValue(selectedRow?._raw?.email, ""), message: toStringValue(selectedRow?._raw?.message ?? selectedRow?._raw?.body, ""), currentStatus: selectedRow?.status }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => {
+                    setDeleteOpen(false);
+                    setSelectedRow(null);
+                }, onConfirm: () => {
+                    if (selectedRow)
+                        deleteMutation.mutate(selectedRow.id);
+                }, isDeleting: deleteMutation.isPending, title: "Delete submission?", message: "This contact submission will be permanently removed.", confirmText: "Delete", variant: "danger" })] }));
 }