@mohasinac/appkit 2.7.59 → 2.8.0

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

@@ -1,95 +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 { 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, ListingFilterDrawer } 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;
 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 });
@@ -116,39 +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 ? [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(); })] : []),
-    ];
-    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(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(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" })] }));
 }

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

@@ -1,9 +1,6 @@
-import type { ListingViewShellProps } from "../../../ui";
-import type { AdminListingScaffoldRow } from "./AdminListingScaffold";
-export interface AdminCouponsViewProps extends ListingViewShellProps {
-    actionHref?: string;
-    getRowHref?: (row: AdminListingScaffoldRow) => string;
+import type { ListingLayoutProps } from "../../../ui";
+export interface AdminCouponsViewProps extends ListingLayoutProps {
     onBulkArchive?: (ids: string[]) => Promise<void>;
     onBulkDelete?: (ids: string[]) => Promise<void>;
 }
-export declare function AdminCouponsView({ children, getRowHref, onBulkArchive, onBulkDelete, ...props }: AdminCouponsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminCouponsView({ children, onBulkArchive, onBulkDelete, ...props }: AdminCouponsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,117 +1,97 @@
 "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 { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
-import { BulkActionBar, Button, Div, FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, SideDrawer, Text, useToast, ListingFilterDrawer } from "../../../ui";
-import { useBottomActions } from "../../layout";
+import React, { useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Div, FilterChipGroup, ListingLayout, Text, 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 "../../products/constants/action-defs";
 import { ADMIN_COUPON_TYPE_TABS } from "../constants/filter-tabs";
 import { apiClient } from "../../../http";
-import { toRecordArray, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { toRecordArray, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
 import { AdminCouponEditorView } from "./AdminCouponEditorView";
 import { CouponCard } from "../../promotions/components/CouponCard";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["type"];
-const DEFAULT_SORT = "-createdAt";
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest" },
-    { value: "createdAt", label: "Oldest" },
-    { value: "code", label: "Code A–Z" },
-];
-const TYPE_OPTIONS = ADMIN_COUPON_TYPE_TABS;
-export function AdminCouponsView({ children, getRowHref, onBulkArchive, onBulkDelete, ...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 typeRaw = table.get("type");
-    const filters = typeRaw && typeRaw !== "All" ? `type==${typeRaw}` : undefined;
-    const { rows, total, isLoading, errorMessage, refetch } = useAdminListingData({
-        queryKey: ["admin", "coupons", "listing"],
-        endpoint: ADMIN_ENDPOINTS.COUPONS,
-        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, `coupon-${index}`),
-            raw: item,
-        })),
-        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    });
+export function AdminCouponsView({ children, onBulkArchive, onBulkDelete, ...props }) {
     const { showToast } = useToast();
+    const queryClient = useQueryClient();
     const handleToggle = useCallback(async (id, currentlyActive) => {
         try {
             await apiClient.patch(ADMIN_ENDPOINTS.COUPON_BY_ID(id), {
                 validity: { isActive: !currentlyActive },
             });
             showToast(currentlyActive ? "Coupon deactivated." : "Coupon activated.", "success");
-            refetch();
+            queryClient.invalidateQueries({ queryKey: ["admin", "coupons"] });
         }
         catch {
             showToast("Could not update coupon status.", "error");
         }
-    }, [showToast, refetch]);
+    }, [showToast, queryClient]);
     const handleDelete = useCallback(async (id) => {
         try {
             await apiClient.delete(ADMIN_ENDPOINTS.COUPON_BY_ID(id));
             showToast("Coupon deleted.", "success");
-            refetch();
+            queryClient.invalidateQueries({ queryKey: ["admin", "coupons"] });
         }
         catch {
             showToast("Could not delete coupon.", "error");
         }
-    }, [showToast, refetch]);
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    const bulkActions = [
-        ...(onBulkArchive ? [{
-                id: "bulk-archive",
-                label: ROW_ACTION_META[ROW_ACTION_ID.ARCHIVE].label,
-                onClick: async () => { await onBulkArchive(selection.selectedIds); selection.clearSelection(); },
-            }] : []),
-        ...(onBulkDelete ? [buildBulkAction(ACTIONS.ADMIN["delete-coupon"], 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 });
+    }, [showToast, queryClient]);
+    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 codes, campaigns, or seller scopes", 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 Coupon"] }) }), selection.selectedCount > 0 && bulkActions.length > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: 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 })), isLoading ? (_jsx(Div, { className: "fluid-grid-card gap-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: "rounded-xl border-2 border-zinc-100 dark:border-slate-700 p-4 animate-pulse space-y-3", children: [_jsx(Div, { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No coupons found" }) })) : (_jsx(Div, { className: "fluid-grid-card gap-3", children: rows.map((row) => (_jsx(CouponCard, { coupon: row.raw, onEdit: openEditPanel, onToggleActive: handleToggle, onDelete: handleDelete }, row.id))) }))] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) }) }), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Coupon" : "Edit Coupon", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminCouponEditorView, { couponId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })) })] }));
+    const config = {
+        portal: "admin",
+        title: "Coupons",
+        searchPlaceholder: "Search codes, campaigns, or seller scopes",
+        emptyLabel: "No coupons found",
+        filterKeys: ["type"],
+        defaultSort: "-createdAt",
+        queryKey: ["admin", "coupons", "listing"],
+        endpoint: ADMIN_ENDPOINTS.COUPONS,
+        sortOptions: [
+            { value: "-createdAt", label: "Newest" },
+            { value: "createdAt", label: "Oldest" },
+            { value: "code", label: "Code A–Z" },
+        ],
+        hideTableView: true,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `coupon-${index}`),
+            raw: item,
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        buildFilters: (state) => state.type && state.type !== "All" ? `type==${state.type}` : undefined,
+        primaryAction: {
+            label: "Add Coupon",
+            onClick: ({ openCreatePanel }) => openCreatePanel(),
+        },
+        buildBulkActions: (selection) => [
+            ...(onBulkArchive
+                ? [
+                    {
+                        id: "bulk-archive",
+                        label: ROW_ACTION_META[ROW_ACTION_ID.ARCHIVE].label,
+                        onClick: async () => {
+                            await onBulkArchive(selection.selectedIds);
+                            selection.clearSelection();
+                        },
+                    },
+                ]
+                : []),
+            ...(onBulkDelete
+                ? [
+                    buildBulkAction(ACTIONS.ADMIN["delete-coupon"], async () => {
+                        await onBulkDelete(selection.selectedIds);
+                        selection.clearSelection();
+                    }),
+                ]
+                : []),
+        ],
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Type", tabs: ADMIN_COUPON_TYPE_TABS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })),
+        renderCards: (rows, _view, selectionCtx, isLoading) => isLoading ? (_jsx(Div, { className: "fluid-grid-card gap-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: "rounded-xl border-2 border-zinc-100 dark:border-slate-700 p-4 animate-pulse space-y-3", children: [_jsx(Div, { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No coupons found" }) })) : (_jsx(Div, { className: "fluid-grid-card gap-3", children: rows.map((row) => (_jsx(CouponCard, { coupon: row.raw, onEdit: selectionCtx.openEditPanel, onToggleActive: handleToggle, onDelete: handleDelete }, row.id))) })),
+        renderEditor: ({ editId, closePanel }) => (_jsx(AdminCouponEditorView, { couponId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
+        resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Coupon" : "Edit Coupon"),
+    };
+    return _jsx(DataListingView, { config: config });
 }

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

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

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

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AdminDigitalCodesView — admin browse of digital-code listings (W1-29).
+ */
+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_DIGITAL_CODES_CONFIG = {
+    portal: "admin",
+    title: "Digital Codes",
+    searchPlaceholder: "Search digital code listings",
+    emptyLabel: "No digital code listings",
+    filterKeys: [],
+    defaultSort: "-createdAt",
+    queryKey: ["admin", "digital-codes", "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) => {
+        const dc = (item.digitalCode ?? {});
+        return {
+            id: toStringValue(item.id, `dc-${index}`),
+            primary: toStringValue(item.title ?? item.productTitle, "Untitled digital code"),
+            secondary: [
+                toStringValue(item.sellerName, "Unknown seller"),
+                toRupees(item.price),
+                typeof dc.codesAvailable === "number"
+                    ? `${dc.codesAvailable} avail`
+                    : null,
+            ]
+                .filter(Boolean)
+                .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==digital-code",
+};
+export function AdminDigitalCodesView({ children, ...props }) {
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    return _jsx(DataListingView, { config: ADMIN_DIGITAL_CODES_CONFIG });
+}

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

@@ -1,9 +1,9 @@
-import type { ListingViewShellProps } from "../../../ui";
-import type { AdminListingScaffoldRow } from "./AdminListingScaffold";
-export interface AdminFaqsViewProps extends ListingViewShellProps {
+import type { ListingLayoutProps } from "../../../ui";
+import type { AdminListingScaffoldRow } from "./DataListingView";
+export interface AdminFaqsViewProps extends ListingLayoutProps {
     actionHref?: string;
     getRowHref?: (row: AdminListingScaffoldRow) => string;
     onBulkArchive?: (ids: string[]) => Promise<void>;
     onBulkDelete?: (ids: string[]) => Promise<void>;
 }
-export declare function AdminFaqsView({ children, getRowHref, onBulkArchive, onBulkDelete, ...props }: AdminFaqsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminFaqsView({ children, onBulkArchive, onBulkDelete, ...props }: AdminFaqsViewProps): import("react/jsx-runtime").JSX.Element;