@mohasinac/appkit 2.3.2 → 2.4.0

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

@@ -1,66 +1,84 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { ListingViewShell } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import { X } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
 import { CATEGORY_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
-export function AdminCategoriesView({ children, ...props }) {
+import { DataTable } from "./DataTable";
+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" },
+];
+export function AdminCategoriesView({ children, getRowHref, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
-    const [q, setQ] = React.useState("");
-    const [activeFilter, setActiveFilter] = React.useState("");
-    const [featuredFilter, setFeaturedFilter] = React.useState("");
+    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 filterParts = [];
-    if (activeFilter && activeFilter !== "All") {
-        filterParts.push(activeFilter === "Active" ? "isActive==true" : "isActive==false");
-    }
-    if (featuredFilter && featuredFilter !== "All")
+    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", q, filters ?? ""],
+        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,
+        q: table.get("q") || undefined,
         mapRows: (response) => {
-            const sourceItems = Array.isArray(response.data)
-                ? response.data
-                : response.items;
-            return toRecordArray(sourceItems).map((item, index) => {
-                const tierValue = typeof item.tier === "number" ? String(item.tier) : "-";
-                const slugValue = toStringValue(item.slug, "no-slug");
-                const parentValue = toStringValue(item.parentId, "root");
-                const orderValue = typeof item.order === "number" ? String(item.order) : "-";
-                return {
-                    id: toStringValue(item.id, `category-${index}`),
-                    primary: toStringValue(item.name, "Untitled category"),
-                    secondary: `Slug: ${slugValue} · Tier: ${tierValue} · Parent: ${parentValue} · Order: ${orderValue}`,
-                    status: typeof item.isActive === "boolean"
-                        ? item.isActive
-                            ? "Active"
-                            : "Inactive"
-                        : toStringValue(item.status, "Active"),
-                    updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-                };
-            });
+            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,
     });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Category Management", subtitle: "Organize taxonomy hierarchy, slug readiness, and active visibility from the shared listing scaffold.", actionLabel: "New category", searchPlaceholder: "Search categories, slugs, or parent category", onSearch: setQ, searchValue: q, rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No categories found", resultSummary: `Showing ${rows.length} of ${total} categories`, filterGroups: [
-            {
-                title: "Active",
-                options: ["All", "Active", "Inactive"],
-                active: activeFilter || "All",
-                onSelect: (opt) => setActiveFilter(opt === "All" ? "" : opt),
-            },
-            {
-                title: "Featured",
-                options: ["All", "Featured Only"],
-                active: featuredFilter || "All",
-                onSelect: (opt) => setFeaturedFilter(opt === "All" ? "" : opt),
-            },
-        ] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_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); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No categories found", getRowHref: getRowHref })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-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("p", { 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("p", { 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})` : ""] }) })] })] }))] }));
 }

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

@@ -0,0 +1,7 @@
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminCategoryEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
+    categoryId?: string;
+    onSaved?: (id: string) => void;
+    onDeleted?: () => void;
+}
+export declare function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, ...rest }: AdminCategoryEditorViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,115 @@
+"use client";
+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, InlineCreateSelect, StackedViewShell, Toggle, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
+async function loadCategoryOptions(query, page) {
+    const params = new URLSearchParams({ page: String(page), pageSize: "25" });
+    if (query)
+        params.set("q", query);
+    const res = await apiClient.get(`${ADMIN_ENDPOINTS.CATEGORIES}?${params.toString()}`);
+    // apiClient returns the full response; the route wraps items in successResponse({ data: [...] })
+    const payload = res?.data ?? res;
+    const items = payload?.data ?? payload?.items ?? [];
+    return {
+        items: items.map((c) => ({ value: c.id, label: c.name })),
+        hasMore: payload?.hasMore ?? false,
+    };
+}
+function toCategorySlug(str) {
+    return str
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+export function AdminCategoryEditorView({ categoryId, onSaved, onDeleted, ...rest }) {
+    const isEdit = Boolean(categoryId);
+    const [name, setName] = React.useState("");
+    const [slug, setSlug] = React.useState("");
+    const [slugManual, setSlugManual] = React.useState(false);
+    const [description, setDescription] = React.useState("");
+    const [parentId, setParentId] = React.useState("");
+    const [order, setOrder] = React.useState("");
+    const [isActive, setIsActive] = React.useState(true);
+    const [showInMenu, setShowInMenu] = React.useState(true);
+    const { showToast } = useToast();
+    const categoryQuery = useQuery({
+        queryKey: ["admin", "category", categoryId],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.CATEGORY_BY_ID(categoryId));
+            return res?.data ?? res;
+        },
+        enabled: isEdit,
+    });
+    React.useEffect(() => {
+        const cat = categoryQuery.data;
+        if (!cat)
+            return;
+        setName(cat.name ?? "");
+        setSlug(cat.slug ?? "");
+        setSlugManual(true);
+        setDescription(cat.description ?? "");
+        setParentId(cat.parentId ?? cat.parentIds?.[cat.parentIds?.length - 1] ?? "");
+        setOrder(cat.order !== undefined ? String(cat.order) : "");
+        setIsActive(cat.isActive ?? true);
+        setShowInMenu(cat.display?.showInMenu ?? true);
+    }, [categoryQuery.data]);
+    const handleNameChange = (value) => {
+        setName(value);
+        if (!slugManual)
+            setSlug(toCategorySlug(value));
+    };
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                name,
+                slug: slug || toCategorySlug(name),
+                description: description || undefined,
+                parentId: parentId || undefined,
+                order: order !== "" ? Number(order) : undefined,
+                isActive,
+                display: { showInMenu },
+            };
+            if (isEdit) {
+                return apiClient.put(ADMIN_ENDPOINTS.CATEGORY_BY_ID(categoryId), payload);
+            }
+            return apiClient.post(ADMIN_ENDPOINTS.CATEGORIES, payload);
+        },
+        onSuccess: (res) => {
+            const id = res?.data?.id ?? res?.id ?? categoryId;
+            showToast(isEdit ? "Category updated." : "Category created.", "success");
+            if (onSaved && id)
+                onSaved(id);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to save category.", "error");
+        },
+    });
+    const deleteMutation = useMutation({
+        mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.CATEGORY_BY_ID(categoryId)),
+        onSuccess: () => {
+            showToast("Category deleted.", "success");
+            if (onDeleted)
+                onDeleted();
+        },
+        onError: (err) => showToast(err?.message ?? "Failed to delete category.", "error"),
+    });
+    const isSubmitting = saveMutation.isPending || categoryQuery.isLoading;
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Category" : "Create Category", sections: [
+            _jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    saveMutation.mutate();
+                }, className: "space-y-4", children: [_jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Category name", value: name, onChange: (e) => handleNameChange(e.target.value), 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("label", { 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, name) => { setParentId(id); onCreated({ value: id, label: name }); }, onCancel: onCancel })) }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Leave empty to create a root category." })] }), _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 pt-2", 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"),
+        ] }));
+}

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

@@ -0,0 +1,11 @@
+export interface AdminContactEditorViewProps {
+    open: boolean;
+    onClose: () => void;
+    submissionId?: string;
+    subject?: string;
+    name?: string;
+    email?: string;
+    message?: string;
+    currentStatus?: string;
+}
+export declare function AdminContactEditorView({ open, onClose, submissionId, subject, name, email, message, currentStatus, }: AdminContactEditorViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button, Div, FormActions, SideDrawer, Text, useToast, } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { apiClient } from "../../../http";
+export function AdminContactEditorView({ open, onClose, submissionId, subject, name, email, message, currentStatus, }) {
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const actionMutation = useMutation({
+        mutationFn: async (action) => {
+            await apiClient.patch(ADMIN_ENDPOINTS.CONTACT_SUBMISSION_BY_ID(submissionId), { action });
+        },
+        onSuccess: (_data, action) => {
+            const label = action === "read" ? "Marked as read" : "Archived";
+            showToast(`${label}.`, "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "contact"] });
+            onClose();
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Action failed.", "error");
+        },
+    });
+    const statusColor = {
+        new: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+        read: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
+        resolved: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
+    };
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: subject ?? "Contact Submission", children: _jsxs(Div, { className: "flex flex-col gap-5 p-4", children: [_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Status:" }), _jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${statusColor[currentStatus ?? "new"] ?? statusColor.new}`, children: currentStatus ?? "new" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide", children: "From" }), _jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name ?? "Unknown" }), email && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: email }))] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide", children: "Message" }), _jsx(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 p-3 max-h-64 overflow-y-auto", children: _jsx(Text, { className: "text-sm text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap leading-relaxed", children: message ?? "No message body." }) })] }), _jsxs(FormActions, { align: "right", children: [email && (_jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                window.location.href = `mailto:${email}?subject=Re: ${encodeURIComponent(subject ?? "")}`;
+                            }, children: "Reply via email" })), _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Close" }), _jsx(Button, { type: "button", variant: "secondary", disabled: !submissionId || actionMutation.isPending || currentStatus === "read" || currentStatus === "resolved", isLoading: actionMutation.isPending && actionMutation.variables === "read", onClick: () => actionMutation.mutate("read"), children: "Mark read" }), _jsx(Button, { type: "button", disabled: !submissionId || actionMutation.isPending || currentStatus === "resolved", isLoading: actionMutation.isPending && actionMutation.variables === "resolved", onClick: () => actionMutation.mutate("resolved"), children: "Archive" })] })] }) }));
+}

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

@@ -1,23 +1,70 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { ListingViewShell } from "../../../ui";
+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 { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ConfirmDeleteModal, ListingToolbar, ListingViewShell, Pagination, RowActionMenu, useToast, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
+import { DataTable } from "./DataTable";
+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 = ["All", "new", "read", "resolved"];
 export function AdminContactView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
-    const [q, setQ] = React.useState("");
-    const [statusFilter, setStatusFilter] = React.useState("");
-    const filterParts = [];
-    if (statusFilter && statusFilter !== "All")
-        filterParts.push(`status==${statusFilter}`);
-    const filters = filterParts.join(",") || undefined;
+    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", q, filters ?? ""],
+        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,
+        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"),
@@ -27,6 +74,7 @@ export function AdminContactView({ children, ...props }) {
             ].filter(Boolean).join(" · ") || "—",
             status: toStringValue(item.status, "new"),
             updatedAt: toRelativeDate(item.createdAt),
+            _raw: item,
         })),
         getTotal: (response, mappedRows) => {
             if (typeof response.meta?.filteredTotal === "number")
@@ -36,15 +84,58 @@ export function AdminContactView({ children, ...props }) {
             return mappedRows.length;
         },
     });
+    const actionMutation = useMutation({
+        mutationFn: async ({ id, action }) => {
+            await apiClient.patch(ADMIN_ENDPOINTS.CONTACT_SUBMISSION_BY_ID(id), { action });
+        },
+        onSuccess: (_data, { action }) => {
+            showToast(`${action === "read" ? "Marked as read" : "Archived"}.`, "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "contact"] });
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Action failed.", "error");
+        },
+    });
+    const deleteMutation = useMutation({
+        mutationFn: async (id) => {
+            await apiClient.delete(ADMIN_ENDPOINTS.CONTACT_SUBMISSION_BY_ID(id));
+        },
+        onSuccess: () => {
+            showToast("Submission deleted.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "contact"] });
+            setDeleteOpen(false);
+            setSelectedRow(null);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to delete.", "error");
+        },
+    });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Contact Submissions", subtitle: "Review inbound contact form messages from users and visitors. Filter by status and search by subject or sender.", searchPlaceholder: "Search by subject, name, or email", onSearch: setQ, searchValue: q, rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No contact submissions found", resultSummary: `Showing ${rows.length} of ${total} submissions`, filterGroups: [
-            {
-                title: "Status",
-                options: ["All", "new", "read", "resolved"],
-                active: statusFilter || "All",
-                onSelect: (opt) => setStatusFilter(opt === "All" ? "" : opt),
-            },
-        ] }));
+    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); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No contact submissions found", renderRowActions: (row) => {
+                                    const cr = row;
+                                    return (_jsx(RowActionMenu, { actions: [
+                                            { label: "View", onClick: () => { setSelectedRow(cr); setDrawerOpen(true); } },
+                                            {
+                                                label: "Mark read",
+                                                disabled: cr.status === "read" || cr.status === "resolved",
+                                                onClick: () => actionMutation.mutate({ id: cr.id, action: "read" }),
+                                            },
+                                            {
+                                                label: "Archive",
+                                                disabled: cr.status === "resolved",
+                                                onClick: () => actionMutation.mutate({ id: cr.id, action: "resolved" }),
+                                            },
+                                            { separator: true, label: "", onClick: () => { } },
+                                            {
+                                                label: "Delete",
+                                                destructive: true,
+                                                onClick: () => { setSelectedRow(cr); setDeleteOpen(true); },
+                                            },
+                                        ] }));
+                                } })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-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("p", { 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: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt ? "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 }, opt))) })] }) }), _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})` : ""] }) })] })] }))] }), _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/AdminCouponEditorView.d.ts

@@ -0,0 +1,7 @@
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminCouponEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
+    couponId?: string;
+    onSaved?: (id: string) => void;
+    onDeleted?: () => void;
+}
+export declare function AdminCouponEditorView({ couponId, onSaved, onDeleted, ...rest }: AdminCouponEditorViewProps): import("react/jsx-runtime").JSX.Element;