@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -0,0 +1,179 @@
+"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, Select, StackedViewShell, Toggle, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+const TYPE_OPTIONS = [
+    { label: "Percentage Discount", value: "percentage" },
+    { label: "Fixed Amount Discount", value: "fixed" },
+    { label: "Free Shipping", value: "free_shipping" },
+    { label: "Buy X Get Y", value: "buy_x_get_y" },
+];
+// --- Helpers -----------------------------------------------------------------
+function toCouponCode(str) {
+    return str.toUpperCase().replace(/[^A-Z0-9-]/g, "").replace(/^-+|-+$/g, "");
+}
+function toDateInputValue(val) {
+    if (!val)
+        return "";
+    try {
+        return new Date(val).toISOString().split("T")[0];
+    }
+    catch {
+        return "";
+    }
+}
+// --- Component ---------------------------------------------------------------
+export function AdminCouponEditorView({ couponId, onSaved, onDeleted, ...rest }) {
+    const isEdit = Boolean(couponId);
+    // --- form state ---
+    const [code, setCode] = React.useState("");
+    const [codeManual, setCodeManual] = React.useState(false);
+    const [name, setName] = React.useState("");
+    const [description, setDescription] = React.useState("");
+    const [type, setType] = React.useState("percentage");
+    // discount
+    const [discountValue, setDiscountValue] = React.useState("");
+    const [maxDiscount, setMaxDiscount] = React.useState("");
+    const [minPurchase, setMinPurchase] = React.useState("");
+    // bxgy (buy_x_get_y only)
+    const [buyQty, setBuyQty] = React.useState("1");
+    const [getQty, setGetQty] = React.useState("1");
+    // usage
+    const [totalLimit, setTotalLimit] = React.useState("");
+    const [perUserLimit, setPerUserLimit] = React.useState("");
+    const [currentUsage, setCurrentUsage] = React.useState(0);
+    // validity
+    const [startDate, setStartDate] = React.useState(new Date().toISOString().split("T")[0]);
+    const [endDate, setEndDate] = React.useState("");
+    const [isActive, setIsActive] = React.useState(false);
+    // restrictions
+    const [firstTimeOnly, setFirstTimeOnly] = React.useState(false);
+    const [combinable, setCombinable] = React.useState(false);
+    const [appliesToAuctions, setAppliesToAuctions] = React.useState(false);
+    const { showToast } = useToast();
+    // --- load existing data (edit mode) ---
+    const couponQuery = useQuery({
+        queryKey: ["admin", "coupon", couponId],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.COUPON_BY_ID(couponId));
+            return res?.data ?? res;
+        },
+        enabled: isEdit,
+    });
+    React.useEffect(() => {
+        const c = couponQuery.data;
+        if (!c)
+            return;
+        setCode(c.code ?? "");
+        setCodeManual(true);
+        setName(c.name ?? "");
+        setDescription(c.description ?? "");
+        setType(c.type ?? "percentage");
+        setDiscountValue(c.discount?.value !== undefined ? String(c.discount.value) : "");
+        setMaxDiscount(c.discount?.maxDiscount !== undefined ? String(c.discount.maxDiscount) : "");
+        setMinPurchase(c.discount?.minPurchase !== undefined ? String(c.discount.minPurchase) : "");
+        setBuyQty(c.bxgy?.buyQuantity !== undefined ? String(c.bxgy.buyQuantity) : "1");
+        setGetQty(c.bxgy?.getQuantity !== undefined ? String(c.bxgy.getQuantity) : "1");
+        setTotalLimit(c.usage?.totalLimit !== undefined ? String(c.usage.totalLimit) : "");
+        setPerUserLimit(c.usage?.perUserLimit !== undefined ? String(c.usage.perUserLimit) : "");
+        setCurrentUsage(c.usage?.currentUsage ?? 0);
+        setStartDate(toDateInputValue(c.validity?.startDate));
+        setEndDate(toDateInputValue(c.validity?.endDate));
+        setIsActive(c.validity?.isActive ?? false);
+        setFirstTimeOnly(c.restrictions?.firstTimeUserOnly ?? false);
+        setCombinable(c.restrictions?.combineWithSellerCoupons ?? false);
+        setAppliesToAuctions(c.applicableToAuctions ?? false);
+    }, [couponQuery.data]);
+    const handleNameChange = (value) => {
+        setName(value);
+        if (!codeManual)
+            setCode(toCouponCode(value));
+    };
+    // --- save ---
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                name,
+                description: description || undefined,
+                type,
+                discount: {
+                    value: discountValue !== "" ? Number(discountValue) : 0,
+                    maxDiscount: maxDiscount !== "" ? Number(maxDiscount) : undefined,
+                    minPurchase: minPurchase !== "" ? Number(minPurchase) : undefined,
+                },
+                ...(type === "buy_x_get_y" && {
+                    bxgy: {
+                        buyQuantity: Number(buyQty) || 1,
+                        getQuantity: Number(getQty) || 1,
+                    },
+                }),
+                usage: {
+                    totalLimit: totalLimit !== "" ? Number(totalLimit) : undefined,
+                    perUserLimit: perUserLimit !== "" ? Number(perUserLimit) : undefined,
+                    currentUsage,
+                },
+                validity: {
+                    startDate,
+                    endDate: endDate || undefined,
+                    isActive,
+                },
+                restrictions: {
+                    firstTimeUserOnly: firstTimeOnly,
+                    combineWithSellerCoupons: combinable,
+                },
+                applicableToAuctions: appliesToAuctions,
+            };
+            if (isEdit) {
+                return apiClient.patch(ADMIN_ENDPOINTS.COUPON_BY_ID(couponId), payload);
+            }
+            return apiClient.post(ADMIN_ENDPOINTS.COUPONS, {
+                ...payload,
+                code: code || toCouponCode(name),
+                createdBy: "admin",
+            });
+        },
+        onSuccess: (res) => {
+            const id = res?.data?.id ?? res?.id ?? couponId;
+            showToast(isEdit ? "Coupon updated." : "Coupon created.", "success");
+            if (onSaved && id)
+                onSaved(id);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to save coupon.", "error");
+        },
+    });
+    // --- delete ---
+    const deleteMutation = useMutation({
+        mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.COUPON_BY_ID(couponId)),
+        onSuccess: () => {
+            showToast("Coupon deleted.", "success");
+            if (onDeleted)
+                onDeleted();
+        },
+        onError: (err) => showToast(err?.message ?? "Failed to delete coupon.", "error"),
+    });
+    const isSubmitting = saveMutation.isPending || couponQuery.isLoading;
+    const canSave = Boolean(name && (isEdit ? true : code) && discountValue !== "" && startDate);
+    // discount label varies by type
+    const discountLabel = type === "percentage"
+        ? "Discount percentage (%)"
+        : type === "fixed"
+            ? "Discount amount (paise)"
+            : "Discount value";
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Coupon" : "Create Coupon", sections: [
+            _jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    saveMutation.mutate();
+                }, className: "space-y-5", children: [_jsx(Select, { label: "Coupon type", options: TYPE_OPTIONS, value: type, onValueChange: (v) => setType(v), required: true }), _jsx(Input, { label: "Campaign name", value: name, onChange: (e) => handleNameChange(e.target.value), required: true, placeholder: "e.g. Summer Sale 20%" }), !isEdit && (_jsx(Input, { label: "Coupon code", value: code, onChange: (e) => {
+                            setCode(toCouponCode(e.target.value));
+                            setCodeManual(true);
+                        }, required: true, placeholder: "e.g. SUMMER20", helperText: "Auto-generated from name. Uppercase alphanumeric + hyphens only." })), isEdit && (_jsx(Input, { label: "Coupon code", value: code, disabled: true, helperText: "Code cannot be changed after creation." })), _jsx(Input, { label: "Description (optional)", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Internal notes about this coupon" }), type !== "free_shipping" && type !== "buy_x_get_y" && (_jsx(Input, { label: discountLabel, value: discountValue, onChange: (e) => setDiscountValue(e.target.value), type: "number", min: 0, required: true, placeholder: type === "percentage" ? "e.g. 20" : "e.g. 5000" })), type === "percentage" && (_jsx(Input, { label: "Max discount cap (paise, optional)", value: maxDiscount, onChange: (e) => setMaxDiscount(e.target.value), type: "number", min: 0, placeholder: "e.g. 20000", helperText: "Leave blank for no cap." })), (type === "percentage" || type === "fixed") && (_jsx(Input, { label: "Min order value (paise, optional)", value: minPurchase, onChange: (e) => setMinPurchase(e.target.value), type: "number", min: 0, placeholder: "e.g. 50000", helperText: "Leave blank for no minimum." })), type === "buy_x_get_y" && (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Input, { label: "Buy quantity", value: buyQty, onChange: (e) => setBuyQty(e.target.value), type: "number", min: 1, required: true }), _jsx(Input, { label: "Get quantity", value: getQty, onChange: (e) => setGetQty(e.target.value), type: "number", min: 1, required: true })] })), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Input, { label: "Total usage limit (optional)", value: totalLimit, onChange: (e) => setTotalLimit(e.target.value), type: "number", min: 0, placeholder: "Unlimited" }), _jsx(Input, { label: "Per-user limit (optional)", value: perUserLimit, onChange: (e) => setPerUserLimit(e.target.value), type: "number", min: 0, placeholder: "Unlimited" })] }), isEdit && (_jsx(Input, { label: "Current usage", value: String(currentUsage), disabled: true, helperText: "Read-only \u2014 updated by orders." })), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Input, { label: "Start date", value: startDate, onChange: (e) => setStartDate(e.target.value), type: "date", required: true }), _jsx(Input, { label: "End date (optional)", value: endDate, onChange: (e) => setEndDate(e.target.value), type: "date", helperText: "Leave blank for no expiry." })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "First-time users only", checked: firstTimeOnly, onChange: setFirstTimeOnly }), _jsx(Toggle, { label: "Allow stacking with seller coupons", checked: combinable, onChange: setCombinable }), _jsx(Toggle, { label: "Applies to auctions", checked: appliesToAuctions, onChange: setAppliesToAuctions }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create coupon" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                    if (confirm("Delete this coupon? This cannot be undone.")) {
+                                        deleteMutation.mutate();
+                                    }
+                                }, children: "Delete coupon" }))] })] }, "coupon-form"),
+        ] }));
+}

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

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

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

@@ -1,15 +1,63 @@
 "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 { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
-export function AdminCouponsView({ children, ...props }) {
+import { DataTable } from "./DataTable";
+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 = ["All", "percentage", "fixed", "free_shipping", "buy_x_get_y"];
+export function AdminCouponsView({ children, getRowHref, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    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 typeRaw = table.get("type");
+    const filters = typeRaw && typeRaw !== "All" ? `type==${typeRaw}` : undefined;
     const { rows, total, isLoading, errorMessage } = 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}`),
             primary: toStringValue(item.code, "Unknown code"),
@@ -17,15 +65,15 @@ export function AdminCouponsView({ children, ...props }) {
                 toStringValue(item.name, "Untitled campaign"),
                 toStringValue(item.type, "Unknown type"),
             ].join(" · "),
-            status: toStringValue((item.validity?.isActive
-                ? "Active"
-                : item.status), "Inactive"),
+            status: toStringValue((item.validity?.isActive ? "Active" : item.status), "Inactive"),
             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: "Coupons & Promotions", subtitle: "Monitor campaign status, stacking rules, and expiry windows from a single control table.", actionLabel: "Create coupon", searchPlaceholder: "Search codes, campaigns, or seller scopes", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No coupons found", resultSummary: `Showing ${rows.length} of ${total} coupons` }));
+    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); 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 coupons 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" }) })] })] }), _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: "Type" }), _jsx("div", { className: "flex flex-wrap gap-2", children: TYPE_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "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})` : ""] }) })] })] }))] }));
 }

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

@@ -17,9 +17,12 @@ export function AdminDashboardView({ labels = {}, endpoint = ADMIN_ENDPOINTS.DAS
     const resolvedStats = shouldFetch
         ? {
             totalOrders: query.data?.orders?.total ?? 0,
+            totalRevenue: query.data?.revenue?.total ?? 0,
             totalUsers: query.data?.users?.total ?? 0,
             totalProducts: query.data?.products?.total ?? 0,
             newUsersToday: query.data?.users?.newThisMonth ?? 0,
+            pendingOrders: query.data?.orders?.pending,
+            pendingReviews: query.data?.reviews?.pending,
         }
         : stats;
     const busy = isLoading || query.isLoading;

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

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

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

@@ -0,0 +1,128 @@
+"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, RichTextEditor, Select, StackedViewShell, TagInput, Toggle, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+// --- Constants ---------------------------------------------------------------
+const CATEGORY_OPTIONS = [
+    { label: "Shipping", value: "shipping" },
+    { label: "Returns", value: "returns" },
+    { label: "Payments", value: "payments" },
+    { label: "Auctions", value: "auctions" },
+    { label: "Pre-orders", value: "pre-orders" },
+    { label: "General", value: "general" },
+];
+function toSlug(str) {
+    const base = str
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    return base.startsWith("faq-") ? base : `faq-${base}`;
+}
+// --- Component ---------------------------------------------------------------
+export function AdminFaqEditorView({ faqId, onSaved, onDeleted, ...rest }) {
+    const isEdit = Boolean(faqId);
+    const [question, setQuestion] = React.useState("");
+    const [slug, setSlug] = React.useState("");
+    const [slugManual, setSlugManual] = React.useState(false);
+    const [answer, setAnswer] = React.useState("");
+    const [category, setCategory] = React.useState("general");
+    const [tags, setTags] = React.useState([]);
+    const [order, setOrder] = React.useState(0);
+    const [priority, setPriority] = React.useState(0);
+    const [isActive, setIsActive] = React.useState(true);
+    const [isPinned, setIsPinned] = React.useState(false);
+    const [showOnHomepage, setShowOnHomepage] = React.useState(false);
+    const [showInFooter, setShowInFooter] = React.useState(false);
+    const { showToast } = useToast();
+    // --- load existing FAQ (edit mode) ---
+    const faqQuery = useQuery({
+        queryKey: ["admin", "faqs", faqId],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.FAQ_BY_ID(faqId));
+            return res?.data ?? res;
+        },
+        enabled: isEdit,
+    });
+    React.useEffect(() => {
+        const f = faqQuery.data;
+        if (!f)
+            return;
+        setQuestion(f.question ?? "");
+        setSlug(f["seo.slug"] ?? f.id ?? "");
+        setSlugManual(true);
+        setAnswer(typeof f.answer === "object" ? (f.answer?.text ?? "") : (f.answer ?? ""));
+        setCategory(f.category ?? "general");
+        setTags(Array.isArray(f.tags) ? f.tags : []);
+        setOrder(typeof f.order === "number" ? f.order : 0);
+        setPriority(typeof f.priority === "number" ? f.priority : 0);
+        setIsActive(f.isActive ?? true);
+        setIsPinned(f.isPinned ?? false);
+        setShowOnHomepage(f.showOnHomepage ?? false);
+        setShowInFooter(f.showInFooter ?? false);
+    }, [faqQuery.data]);
+    const handleQuestionChange = (value) => {
+        setQuestion(value);
+        if (!slugManual)
+            setSlug(toSlug(value));
+    };
+    // --- save ---
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                question,
+                slug: slug || toSlug(question),
+                answer,
+                category,
+                tags,
+                order,
+                priority,
+                isActive,
+                isPinned,
+                showOnHomepage,
+                showInFooter,
+            };
+            if (isEdit) {
+                return apiClient.put(ADMIN_ENDPOINTS.FAQ_BY_ID(faqId), payload);
+            }
+            return apiClient.post(ADMIN_ENDPOINTS.FAQS, payload);
+        },
+        onSuccess: (res) => {
+            const id = res?.data?.id ?? res?.id ?? faqId;
+            showToast(isEdit ? "FAQ updated." : "FAQ created.", "success");
+            if (onSaved && id)
+                onSaved(id);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to save FAQ.", "error");
+        },
+    });
+    // --- delete ---
+    const deleteMutation = useMutation({
+        mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.FAQ_BY_ID(faqId)),
+        onSuccess: () => {
+            showToast("FAQ deleted.", "success");
+            if (onDeleted)
+                onDeleted();
+        },
+        onError: (err) => showToast(err?.message ?? "Failed to delete FAQ.", "error"),
+    });
+    const isSubmitting = saveMutation.isPending || faqQuery.isLoading;
+    const canSave = Boolean(question.trim()) && Boolean(answer.trim());
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit FAQ" : "New FAQ", sections: [
+            _jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    saveMutation.mutate();
+                }, className: "space-y-5", children: [_jsx(Input, { label: "Question", value: question, onChange: (e) => handleQuestionChange(e.target.value), required: true, placeholder: "e.g. How does bidding work on LetItRip?" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+                            setSlug(e.target.value);
+                            setSlugManual(true);
+                        }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from question. Must start with 'faq-'." }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Answer" }), _jsx(RichTextEditor, { value: answer, onChange: setAnswer, placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: setCategory }), _jsx(Input, { label: "Display order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower = shown first within category." })] }), _jsx(Input, { label: "Priority", value: String(priority), onChange: (e) => setPriority(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results." }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. shipping, pokemon, returns" }), _jsxs("div", { className: "space-y-3 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4", children: [_jsx("p", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Visibility" }), _jsx(Toggle, { label: "Active (visible to users)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: isPinned, onChange: setIsPinned }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: showOnHomepage, onChange: setShowOnHomepage }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: showInFooter, onChange: setShowInFooter })] }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create FAQ" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                    if (confirm("Delete this FAQ? This cannot be undone.")) {
+                                        deleteMutation.mutate();
+                                    }
+                                }, children: "Delete FAQ" }))] })] }, "faq-form"),
+        ] }));
+}

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

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

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

@@ -1,15 +1,62 @@
 "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 { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
-export function AdminFaqsView({ children, ...props }) {
+import { DataTable } from "./DataTable";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["isActive"];
+const DEFAULT_SORT = "priority";
+const SORT_OPTIONS = [
+    { value: "priority", label: "Priority" },
+    { value: "-createdAt", label: "Newest" },
+    { value: "question", label: "Question A–Z" },
+];
+export function AdminFaqsView({ children, getRowHref, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    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 isActiveRaw = table.get("isActive");
+    const filters = isActiveRaw ? `isActive==${isActiveRaw}` : undefined;
     const { rows, total, isLoading, errorMessage } = useAdminListingData({
         queryKey: ["admin", "faqs", "listing"],
         endpoint: ADMIN_ENDPOINTS.FAQS,
+        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, `faq-${index}`),
             primary: toStringValue(item.question, "Untitled question"),
@@ -19,8 +66,10 @@ export function AdminFaqsView({ children, ...props }) {
         })),
         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: "FAQ Library", subtitle: "Keep support answers organized by category, visibility, and homepage priority.", actionLabel: "New FAQ", searchPlaceholder: "Search questions, categories, or tokens", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No FAQs found", resultSummary: `Showing ${rows.length} of ${total} FAQs` }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search questions, categories, or tokens", 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 FAQs 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" }) })] })] }), _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: [{ label: "All", value: "" }, { label: "Published", value: "true" }, { label: "Draft", value: "false" }].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isActive: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isActive || "") === opt.value ? "bg-primary text-white border-primary" : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt.label }, opt.label))) })] }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
 }

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

@@ -1,50 +1,59 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Alert, Button, Form, FormActions, StackedViewShell, Toggle, } from "../../../ui";
-import { useSiteSettings } from "../../../core/hooks/useSiteSettings";
-import { SITE_SETTINGS_ENDPOINTS } from "../../../constants/api-endpoints";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, Div, Form, FormActions, Input, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { apiClient } from "../../../http";
 export function AdminFeatureFlagsView({ labels = {}, renderFlags, ...rest }) {
     const queryClient = useQueryClient();
-    const { data, isLoading, error } = useSiteSettings();
+    const { showToast } = useToast();
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["admin", "feature-flags"],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.FEATURE_FLAGS);
+            return res.data ?? { flags: {}, rollouts: {} };
+        },
+    });
     const [flags, setFlags] = React.useState({});
-    const [saveMessage, setSaveMessage] = React.useState(null);
+    const [rollouts, setRollouts] = React.useState({});
     React.useEffect(() => {
-        if (!data?.featureFlags)
+        if (!data)
             return;
-        setFlags(data.featureFlags);
+        setFlags(data.flags ?? {});
+        setRollouts(data.rollouts ?? {});
     }, [data]);
     const saveFlags = useMutation({
         mutationFn: async () => {
-            await apiClient.patch(SITE_SETTINGS_ENDPOINTS.GET, {
-                featureFlags: flags,
-            });
+            await apiClient.put(ADMIN_ENDPOINTS.FEATURE_FLAGS, { flags, rollouts });
         },
         onSuccess: async () => {
-            await queryClient.invalidateQueries({ queryKey: ["site-settings"] });
-            setSaveMessage("Feature flags saved.");
+            await queryClient.invalidateQueries({ queryKey: ["admin", "feature-flags"] });
+            showToast("Feature flags saved.", "success");
         },
         onError: () => {
-            setSaveMessage("Failed to save feature flags.");
+            showToast("Failed to save feature flags.", "error");
         },
     });
     const featureKeys = React.useMemo(() => Object.keys(flags), [flags]);
     const formatLabel = (value) => value
         .replace(/([A-Z])/g, " $1")
-        .replace(/^./, (char) => char.toUpperCase());
+        .replace(/_/g, " ")
+        .replace(/^./, (char) => char.toUpperCase())
+        .trim();
     const defaultFlags = () => (_jsxs(Form, { onSubmit: (event) => {
             event.preventDefault();
             saveFlags.mutate();
-        }, className: "space-y-4", children: [featureKeys.map((key) => (_jsx(Toggle, { checked: Boolean(flags[key]), onChange: (value) => {
-                    setFlags((prev) => ({ ...prev, [key]: value }));
-                    setSaveMessage(null);
-                }, label: formatLabel(key) }, key))), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
-                            setFlags(data?.featureFlags ?? {});
-                            setSaveMessage(null);
-                        }, disabled: saveFlags.isPending, children: "Reset" }), _jsx(Button, { type: "submit", disabled: saveFlags.isPending || featureKeys.length === 0, children: saveFlags.isPending ? "Saving..." : "Save feature flags" })] }), saveMessage ? (_jsx(Alert, { variant: saveMessage.startsWith("Failed") ? "error" : "success", title: saveMessage.startsWith("Failed") ? "Save failed" : "Saved", children: saveMessage })) : null] }));
-    const loadingAlert = isLoading ? (_jsx(Alert, { variant: "info", title: "Loading settings", children: "Fetching feature flags..." })) : null;
-    const errorAlert = error ? (_jsx(Alert, { variant: "error", title: "Could not load settings", children: error instanceof Error ? error.message : "Unknown error" })) : null;
+        }, className: "space-y-4", children: [featureKeys.length === 0 && !isLoading && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No feature flags configured. Add flags to siteSettings.featureFlags to manage them here." })), featureKeys.map((key) => (_jsxs(Div, { className: "flex items-start justify-between gap-4 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-3", children: [_jsxs(Div, { className: "flex-1", children: [_jsx(Toggle, { checked: Boolean(flags[key]), onChange: (value) => {
+                                    setFlags((prev) => ({ ...prev, [key]: value }));
+                                }, label: formatLabel(key) }), _jsx(Text, { className: "mt-0.5 ml-10 text-xs text-zinc-400 dark:text-zinc-500 font-mono", children: key })] }), _jsxs(Div, { className: "flex flex-col gap-1 w-32 shrink-0", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rollout %" }), _jsx(Input, { type: "number", min: 0, max: 100, value: rollouts[key] ?? 100, onChange: (e) => setRollouts((prev) => ({
+                                    ...prev,
+                                    [key]: Math.min(100, Math.max(0, Number(e.target.value))),
+                                })), disabled: !flags[key], className: "w-full" })] })] }, key))), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
+                            setFlags(data?.flags ?? {});
+                            setRollouts(data?.rollouts ?? {});
+                        }, disabled: saveFlags.isPending, children: "Reset" }), _jsx(Button, { type: "submit", isLoading: saveFlags.isPending, disabled: saveFlags.isPending || featureKeys.length === 0, children: "Save feature flags" })] })] }));
+    const loadingAlert = isLoading ? (_jsx(Alert, { variant: "info", title: "Loading feature flags", children: "Fetching feature flags\u2026" })) : null;
+    const errorAlert = error ? (_jsx(Alert, { variant: "error", title: "Could not load feature flags", children: error instanceof Error ? error.message : "Unknown error" })) : null;
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Feature Flags", sections: [loadingAlert, errorAlert, renderFlags?.() ?? defaultFlags()] }));
 }