@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/features/categories/schemas/firestore.d.ts

@@ -41,26 +41,45 @@ export interface CategoryDocument {
     path: string;
     order: number;
     isLeaf: boolean;
+    /**
+     * Global DFS pre-order position across the entire category tree (1-indexed).
+     * Set and maintained by the onCategoryWrite Cloud Function.
+     * Enables ordered range queries without loading the whole tree.
+     */
+    position: number;
+    /**
+     * Count of this node plus all its descendants.
+     * The range [position, position + subtreeSize - 1] covers the full subtree.
+     * Used to efficiently locate insertion points and shift sibling positions.
+     */
+    subtreeSize: number;
     metrics: CategoryDocumentMetrics;
     isFeatured: boolean;
     featuredPriority?: number;
     isBrand?: boolean;
+    type?: import("../types").CategoryType;
     seo: CategoryDocumentSEO;
     display: CategoryDocumentDisplay;
     isActive: boolean;
     isSearchable: boolean;
     showOnHomepage?: boolean;
     createdBy: string;
+    /** Whether this category was created by admin or a store owner. */
+    createdByType?: "admin" | "store";
+    /** The storeId of the store that requested this category (only set when createdByType === "store"). */
+    createdByStoreId?: string;
+    /** Display name of the store that requested this category. */
+    createdByStoreName?: string;
     createdAt: Date;
     updatedAt: Date;
     ancestors: CategoryAncestor[];
 }
 export declare const CATEGORIES_COLLECTION: "categories";
-export declare const CATEGORIES_INDEXED_FIELDS: readonly ["slug", "rootId", "tier", "parentIds", "isLeaf", "isFeatured", "featuredPriority", "isBrand", "isActive", "isSearchable", "showOnHomepage", "createdBy", "createdAt"];
+export declare const CATEGORIES_INDEXED_FIELDS: readonly ["slug", "rootId", "tier", "parentIds", "isLeaf", "isFeatured", "featuredPriority", "isBrand", "isActive", "isSearchable", "showOnHomepage", "createdBy", "createdByType", "createdByStoreId", "createdAt"];
 export declare const MIN_ITEMS_FOR_FEATURED: 8;
 export declare const MAX_FEATURED_CATEGORIES: 4;
 export declare const DEFAULT_CATEGORY_DATA: Partial<CategoryDocument>;
-export declare const CATEGORIES_PUBLIC_FIELDS: readonly ["id", "name", "slug", "description", "rootId", "parentIds", "childrenIds", "tier", "path", "order", "isLeaf", "metrics.totalProductCount", "metrics.totalAuctionCount", "metrics.totalItemCount", "isFeatured", "featuredPriority", "isBrand", "seo", "display", "isActive", "ancestors"];
+export declare const CATEGORIES_PUBLIC_FIELDS: readonly ["id", "name", "slug", "description", "rootId", "parentIds", "childrenIds", "tier", "path", "order", "position", "subtreeSize", "isLeaf", "metrics.totalProductCount", "metrics.totalAuctionCount", "metrics.totalItemCount", "isFeatured", "featuredPriority", "isBrand", "seo", "display", "isActive", "ancestors"];
 export declare const CATEGORIES_UPDATABLE_FIELDS: readonly ["name", "slug", "description", "order", "isFeatured", "featuredPriority", "isBrand", "seo", "display", "isActive", "isSearchable"];
 export type CategoryCreateInput = Omit<CategoryDocument, "id" | "createdAt" | "updatedAt" | "metrics" | "isLeaf" | "ancestors"> & {
     parentIds?: string[];
@@ -110,6 +129,8 @@ export declare const CATEGORY_FIELDS: {
     readonly TIER: "tier";
     readonly PATH: "path";
     readonly ORDER: "order";
+    readonly POSITION: "position";
+    readonly SUBTREE_SIZE: "subtreeSize";
     readonly IS_LEAF: "isLeaf";
     readonly METRICS: "metrics";
     readonly METRIC: {

package/dist/features/categories/schemas/firestore.js

@@ -20,6 +20,8 @@ export const CATEGORIES_INDEXED_FIELDS = [
     "isSearchable",
     "showOnHomepage",
     "createdBy",
+    "createdByType",
+    "createdByStoreId",
     "createdAt",
 ];
 export const MIN_ITEMS_FOR_FEATURED = 8;
@@ -28,6 +30,8 @@ export const DEFAULT_CATEGORY_DATA = {
     childrenIds: [],
     isLeaf: true,
     order: 0,
+    position: 0,
+    subtreeSize: 1,
     isFeatured: false,
     isBrand: false,
     isActive: true,
@@ -58,6 +62,8 @@ export const CATEGORIES_PUBLIC_FIELDS = [
     "tier",
     "path",
     "order",
+    "position",
+    "subtreeSize",
     "isLeaf",
     "metrics.totalProductCount",
     "metrics.totalAuctionCount",
@@ -145,6 +151,8 @@ export const CATEGORY_FIELDS = {
     TIER: "tier",
     PATH: "path",
     ORDER: "order",
+    POSITION: "position",
+    SUBTREE_SIZE: "subtreeSize",
     IS_LEAF: "isLeaf",
     METRICS: "metrics",
     METRIC: {

package/dist/features/categories/schemas/index.d.ts

@@ -116,10 +116,10 @@ export declare const categoryItemSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     id: string;
     name: string;
-    tier: number;
     slug: string;
+    tier: number;
     path?: string | undefined;
-    type?: "category" | "collection" | "concern" | "brand" | undefined;
+    type?: "category" | "brand" | "collection" | "concern" | undefined;
     display?: {
         icon?: string | undefined;
         coverImage?: string | undefined;
@@ -149,10 +149,10 @@ export declare const categoryItemSchema: z.ZodObject<{
 }, {
     id: string;
     name: string;
-    tier: number;
     slug: string;
+    tier: number;
     path?: string | undefined;
-    type?: "category" | "collection" | "concern" | "brand" | undefined;
+    type?: "category" | "brand" | "collection" | "concern" | undefined;
     display?: {
         icon?: string | undefined;
         coverImage?: string | undefined;
@@ -190,18 +190,18 @@ export declare const categoryListParamsSchema: z.ZodObject<{
     perPage: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     q?: string | undefined;
-    type?: "category" | "collection" | "concern" | "brand" | undefined;
+    type?: "category" | "brand" | "collection" | "concern" | undefined;
     page?: number | undefined;
     perPage?: number | undefined;
+    featured?: boolean | undefined;
     tier?: number | undefined;
     parentId?: string | undefined;
-    featured?: boolean | undefined;
 }, {
     q?: string | undefined;
-    type?: "category" | "collection" | "concern" | "brand" | undefined;
+    type?: "category" | "brand" | "collection" | "concern" | undefined;
     page?: number | undefined;
     perPage?: number | undefined;
+    featured?: boolean | undefined;
     tier?: number | undefined;
     parentId?: string | undefined;
-    featured?: boolean | undefined;
 }>;

package/dist/features/categories/types/index.d.ts

@@ -13,6 +13,7 @@ export interface CategoryDisplay {
 }
 export interface CategoryMetrics {
     productCount: number;
+    auctionCount?: number;
     totalItemCount: number;
     lastUpdated?: string;
 }

package/dist/features/collections/schemas/index.d.ts

@@ -32,9 +32,9 @@ export declare const collectionItemSchema: z.ZodObject<{
     createdAt?: string | undefined;
     subtitle?: string | undefined;
     description?: string | undefined;
+    brandSlug?: string | undefined;
     productCount?: number | undefined;
     bannerImage?: string | undefined;
-    brandSlug?: string | undefined;
     franchiseSlug?: string | undefined;
     manualProductIds?: string[] | undefined;
 }, {
@@ -46,9 +46,9 @@ export declare const collectionItemSchema: z.ZodObject<{
     active?: boolean | undefined;
     subtitle?: string | undefined;
     description?: string | undefined;
+    brandSlug?: string | undefined;
     productCount?: number | undefined;
     bannerImage?: string | undefined;
-    brandSlug?: string | undefined;
     franchiseSlug?: string | undefined;
     manualProductIds?: string[] | undefined;
 }>;

package/dist/features/events/components/AdminEventEditorView.d.ts

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

package/dist/features/events/components/AdminEventEditorView.js

@@ -0,0 +1,203 @@
+"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 { Alert, Button, Form, FormActions, Input, RichTextEditor, Select, StackedViewShell, Text, Toggle, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+function toLocalDatetime(iso) {
+    if (!iso)
+        return "";
+    try {
+        const d = new Date(iso);
+        const offset = d.getTimezoneOffset();
+        const local = new Date(d.getTime() - offset * 60000);
+        return local.toISOString().slice(0, 16);
+    }
+    catch {
+        return "";
+    }
+}
+function toISOString(local) {
+    if (!local)
+        return "";
+    try {
+        return new Date(local).toISOString();
+    }
+    catch {
+        return "";
+    }
+}
+const EVENT_TYPE_OPTIONS = [
+    { label: "Sale", value: "sale" },
+    { label: "Offer / Coupon", value: "offer" },
+    { label: "Poll", value: "poll" },
+    { label: "Survey", value: "survey" },
+    { label: "Feedback", value: "feedback" },
+];
+const EVENT_STATUS_OPTIONS = [
+    { label: "Draft", value: "draft" },
+    { label: "Active", value: "active" },
+    { label: "Paused", value: "paused" },
+    { label: "Ended", value: "ended" },
+];
+const POLL_VISIBILITY_OPTIONS = [
+    { label: "Always visible", value: "always" },
+    { label: "After voting", value: "after_vote" },
+    { label: "After event ends", value: "after_end" },
+];
+export function AdminEventEditorView({ eventId, onSaved, ...rest }) {
+    const [type, setType] = React.useState("sale");
+    const [title, setTitle] = React.useState("");
+    const [description, setDescription] = React.useState("");
+    const [startsAt, setStartsAt] = React.useState("");
+    const [endsAt, setEndsAt] = React.useState("");
+    const [coverImageUrl, setCoverImageUrl] = React.useState("");
+    const [status, setStatus] = React.useState("draft");
+    const [discountPercent, setDiscountPercent] = React.useState("10");
+    const [saleBannerText, setSaleBannerText] = React.useState("");
+    const [couponId, setCouponId] = React.useState("");
+    const [displayCode, setDisplayCode] = React.useState("");
+    const [offerBannerText, setOfferBannerText] = React.useState("");
+    const [pollOptions, setPollOptions] = React.useState([
+        { id: "opt1", label: "" },
+        { id: "opt2", label: "" },
+    ]);
+    const [allowMultiSelect, setAllowMultiSelect] = React.useState(false);
+    const [allowComment, setAllowComment] = React.useState(false);
+    const [resultsVisibility, setResultsVisibility] = React.useState("always");
+    const [requireLogin, setRequireLogin] = React.useState(true);
+    const [maxEntriesPerUser, setMaxEntriesPerUser] = React.useState("1");
+    const [hasLeaderboard, setHasLeaderboard] = React.useState(false);
+    const [anonymous, setAnonymous] = React.useState(false);
+    const [saveMessage, setSaveMessage] = React.useState(null);
+    const eventQuery = useQuery({
+        queryKey: ["admin-event-by-id", eventId],
+        queryFn: () => apiClient.get(`${ADMIN_ENDPOINTS.EVENTS}/${eventId}`),
+        enabled: Boolean(eventId),
+        staleTime: 15000,
+    });
+    React.useEffect(() => {
+        const event = eventQuery.data?.data ?? eventQuery.data;
+        if (!event?.id)
+            return;
+        setType(event.type || "sale");
+        setTitle(event.title || "");
+        setDescription(event.description || "");
+        setStartsAt(toLocalDatetime(event.startsAt));
+        setEndsAt(toLocalDatetime(event.endsAt));
+        setCoverImageUrl(event.coverImageUrl || event.coverImage?.url || "");
+        setStatus(event.status || "draft");
+        if (event.saleConfig) {
+            setDiscountPercent(String(event.saleConfig.discountPercent ?? 10));
+            setSaleBannerText(event.saleConfig.bannerText || "");
+        }
+        if (event.offerConfig) {
+            setCouponId(event.offerConfig.couponId || "");
+            setDisplayCode(event.offerConfig.displayCode || "");
+            setOfferBannerText(event.offerConfig.bannerText || "");
+        }
+        if (event.pollConfig) {
+            if (event.pollConfig.options?.length)
+                setPollOptions(event.pollConfig.options);
+            setAllowMultiSelect(Boolean(event.pollConfig.allowMultiSelect));
+            setAllowComment(Boolean(event.pollConfig.allowComment));
+            setResultsVisibility(event.pollConfig.resultsVisibility || "always");
+        }
+        if (event.surveyConfig) {
+            setRequireLogin(event.surveyConfig.requireLogin !== false);
+            setMaxEntriesPerUser(String(event.surveyConfig.maxEntriesPerUser ?? 1));
+            setHasLeaderboard(Boolean(event.surveyConfig.hasLeaderboard));
+        }
+        if (event.feedbackConfig) {
+            setAnonymous(Boolean(event.feedbackConfig.anonymous));
+        }
+    }, [eventQuery.data]);
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const buildTypeConfig = () => {
+                if (type === "sale")
+                    return {
+                        saleConfig: {
+                            discountPercent: Number(discountPercent) || 10,
+                            bannerText: saleBannerText || undefined,
+                        },
+                    };
+                if (type === "offer")
+                    return {
+                        offerConfig: { couponId, displayCode, bannerText: offerBannerText || undefined },
+                    };
+                if (type === "poll")
+                    return {
+                        pollConfig: {
+                            options: pollOptions.filter((o) => o.label.trim()),
+                            allowMultiSelect,
+                            allowComment,
+                            resultsVisibility,
+                        },
+                    };
+                if (type === "survey")
+                    return {
+                        surveyConfig: {
+                            requireLogin,
+                            maxEntriesPerUser: Number(maxEntriesPerUser) || 1,
+                            hasLeaderboard,
+                            hasPointSystem: false,
+                            entryReviewRequired: false,
+                            formFields: [],
+                        },
+                    };
+                if (type === "feedback")
+                    return {
+                        feedbackConfig: { anonymous, formFields: [] },
+                    };
+                return {};
+            };
+            const payload = {
+                type,
+                title,
+                description,
+                startsAt: toISOString(startsAt),
+                endsAt: toISOString(endsAt),
+                coverImageUrl: coverImageUrl || undefined,
+                ...buildTypeConfig(),
+            };
+            if (eventId) {
+                payload.status = status;
+                await apiClient.patch(`${ADMIN_ENDPOINTS.EVENTS}/${eventId}`, payload);
+                return eventId;
+            }
+            const created = await apiClient.post(ADMIN_ENDPOINTS.EVENTS, payload);
+            return created.data?.id ?? created.id ?? "";
+        },
+        onSuccess: (savedId) => {
+            setSaveMessage("Saved successfully.");
+            if (savedId)
+                onSaved?.(savedId);
+        },
+        onError: (error) => {
+            setSaveMessage(error instanceof Error ? error.message : "Save failed");
+        },
+    });
+    const addPollOption = () => {
+        setPollOptions((prev) => [...prev, { id: `opt${Date.now()}`, label: "" }]);
+    };
+    const removePollOption = (id) => {
+        setPollOptions((prev) => prev.filter((o) => o.id !== id));
+    };
+    const updatePollOption = (id, label) => {
+        setPollOptions((prev) => prev.map((o) => (o.id === id ? { ...o, label } : o)));
+    };
+    const isValid = !!title.trim() &&
+        !!startsAt &&
+        !!endsAt &&
+        (type !== "poll" || pollOptions.filter((o) => o.label.trim()).length >= 2) &&
+        (type !== "offer" || (!!couponId.trim() && !!displayCode.trim()));
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: eventId ? "Edit Event" : "Create Event", sections: [
+            eventQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load event", children: eventQuery.error instanceof Error ? eventQuery.error.message : "Unknown error" })) : null,
+            _jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    saveMutation.mutate();
+                }, className: "space-y-6", children: [!eventId && (_jsx(Select, { label: "Event type", value: type, options: EVENT_TYPE_OPTIONS, onChange: (e) => setType(e.target.value) })), _jsx(Input, { label: "Title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Charizard Flash Sale 2026", required: true }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Description" }), _jsx(RichTextEditor, { value: description, onChange: setDescription, minHeightClassName: "min-h-[120px]", placeholder: "Describe this event\u2026" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Starts at", type: "datetime-local", value: startsAt, onChange: (e) => setStartsAt(e.target.value), required: true }), _jsx(Input, { label: "Ends at", type: "datetime-local", value: endsAt, onChange: (e) => setEndsAt(e.target.value), required: true })] }), _jsx(Input, { label: "Cover image URL (optional)", value: coverImageUrl, onChange: (e) => setCoverImageUrl(e.target.value), placeholder: "https://\u2026" }), eventId && (_jsx(Select, { label: "Status", value: status, options: EVENT_STATUS_OPTIONS, onChange: (e) => setStatus(e.target.value) })), type === "sale" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Sale configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Discount %", type: "number", value: discountPercent, onChange: (e) => setDiscountPercent(e.target.value), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: saleBannerText, onChange: (e) => setSaleBannerText(e.target.value), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), type === "offer" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Offer configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Coupon ID", value: couponId, onChange: (e) => setCouponId(e.target.value), placeholder: "Firestore coupon document ID", required: true }), _jsx(Input, { label: "Display code", value: displayCode, onChange: (e) => setDisplayCode(e.target.value), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: offerBannerText, onChange: (e) => setOfferBannerText(e.target.value), placeholder: "Use CHARIZARD25 at checkout" })] })), type === "poll" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-4", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Poll configuration" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options (minimum 2)" }), pollOptions.map((opt, idx) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Input, { value: opt.label, onChange: (e) => updatePollOption(opt.id, e.target.value), placeholder: `Option ${idx + 1}` }) }), pollOptions.length > 2 && (_jsx("button", { type: "button", onClick: () => removePollOption(opt.id), className: "text-zinc-400 hover:text-red-500 transition-colors px-2 py-1 text-lg leading-none", "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addPollOption, children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", value: resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => setResultsVisibility(e.target.value) }), _jsxs("div", { className: "space-y-3", children: [_jsx(Toggle, { checked: allowMultiSelect, onChange: setAllowMultiSelect, label: "Allow multi-select" }), _jsx(Toggle, { checked: allowComment, onChange: setAllowComment, label: "Allow comment with vote" })] })] })), type === "survey" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Survey configuration" }), _jsx(Input, { label: "Max entries per user", type: "number", value: maxEntriesPerUser, onChange: (e) => setMaxEntriesPerUser(e.target.value), placeholder: "1" }), _jsx(Toggle, { checked: requireLogin, onChange: setRequireLogin, label: "Require login to participate" }), _jsx(Toggle, { checked: hasLeaderboard, onChange: setHasLeaderboard, label: "Show leaderboard" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Form fields can be configured from the event detail page after saving." })] })), type === "feedback" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Feedback configuration" }), _jsx(Toggle, { checked: anonymous, onChange: setAnonymous, label: "Allow anonymous submissions" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Form fields can be configured from the event detail page after saving." })] })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => { window.location.href = "/admin/events"; }, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: saveMutation.isPending || !isValid, children: saveMutation.isPending ? "Saving…" : eventId ? "Save changes" : "Create event" })] }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") ? "error" : "success", title: "Save status", children: saveMessage }))] }),
+        ] }));
+}

package/dist/features/events/components/AdminEventsView.d.ts

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

package/dist/features/events/components/AdminEventsView.js

@@ -1,35 +1,87 @@
 "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 "../../admin/hooks/useAdminListingData";
-import { AdminListingScaffold } from "../../admin/components/AdminListingScaffold";
-export function AdminEventsView({ children, ...props }) {
+import { DataTable } from "../../admin/components/DataTable";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["status", "type"];
+const DEFAULT_SORT = "-startsAt";
+const SORT_OPTIONS = [
+    { value: "-startsAt", label: "Starting soonest" },
+    { value: "startsAt", label: "Starting latest" },
+    { value: "-createdAt", label: "Newest" },
+    { value: "title", label: "Title A–Z" },
+];
+const STATUS_OPTIONS = ["All", "published", "draft", "active", "ended"];
+const TYPE_OPTIONS = ["All", "contest", "giveaway", "sale", "poll", "survey", "flash-sale"];
+export function AdminEventsView({ 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 filterParts = [];
+    const statusRaw = table.get("status");
+    if (statusRaw && statusRaw !== "All")
+        filterParts.push(`status==${statusRaw}`);
+    const typeRaw = table.get("type");
+    if (typeRaw && typeRaw !== "All")
+        filterParts.push(`type==${typeRaw}`);
+    const filters = filterParts.join(",") || undefined;
     const { rows, total, isLoading, errorMessage } = useAdminListingData({
         queryKey: ["admin", "events", "listing"],
         endpoint: ADMIN_ENDPOINTS.EVENTS,
+        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, `event-${index}`),
             primary: toStringValue(item.title, "Untitled event"),
             secondary: [
                 toStringValue(item.type, "event"),
                 toStringValue(item.startsAt, ""),
-            ]
-                .filter(Boolean)
-                .join(" · "),
+            ].filter(Boolean).join(" · "),
             status: toStringValue(item.status, "active"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
-        getTotal: (response, mappedRows) => {
-            if (typeof response.total === "number")
-                return response.total;
-            return mappedRows.length;
-        },
+        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: "Events", subtitle: "Manage sales events, offers, polls, surveys, and feedback campaigns.", actionLabel: "New event", searchPlaceholder: "Search events by title or type", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No events found", resultSummary: `Showing ${rows.length} of ${total} events` }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search events by title or type", 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 events 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: "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))) })] }), _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/events/components/EventCard.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
 import { Article, Button, Div, Heading, RichText, Span, TextLink } from "../../../ui";
 import { THEME_CONSTANTS, LAYOUT } from "../../../tokens";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
@@ -18,6 +19,7 @@ export function EventCard({ event, labels = {}, onParticipate, className = "", }
     const endsAt = new Date(event.endsAt);
     const msLeft = endsAt.getTime() - now.getTime();
     const daysLeft = Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
-    return (_jsxs(Article, { className: `flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${className}`, children: [event.coverImageUrl ? (_jsx(Div, { className: "aspect-video overflow-hidden", children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700" })), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx(Span, { className: "text-lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-base leading-snug mb-1", children: safeTitle }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mb-3 ${THEME_CONSTANTS.utilities.textClamp3} text-sm text-zinc-600 dark:text-zinc-400` }), _jsxs(Div, { className: "mb-3 mt-auto flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-500", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
-                                daysLeft > 0 && _jsxs(Span, { children: [daysLeft, "d remaining"] }), _jsxs(Span, { children: [event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { type: "button", onClick: () => onParticipate(event), className: "w-full rounded-lg bg-primary py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsx(TextLink, { href: ROUTES.PUBLIC.EVENT_DETAIL(event.id), className: "inline-flex w-full items-center justify-center rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-slate-600 dark:text-zinc-200 dark:hover:bg-slate-800", children: labels.viewDetails ?? "View details" }))] })] }));
+    const detailHref = String(ROUTES.PUBLIC.EVENT_DETAIL(event.slug ?? event.id));
+    return (_jsxs(Article, { className: `group flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${className}`, children: [_jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl ? (_jsx(Div, { className: "aspect-video overflow-hidden", children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700 flex items-center justify-center", children: _jsx("span", { className: "text-5xl opacity-40", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx(Span, { className: "text-lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-base leading-snug mb-1 group-hover:text-primary transition-colors", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mb-3 ${THEME_CONSTANTS.utilities.textClamp3} text-sm text-zinc-600 dark:text-zinc-400` }), _jsxs(Div, { className: "mb-3 mt-auto flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-500", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
+                                daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { type: "button", onClick: () => onParticipate(event), className: "w-full rounded-lg bg-primary py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { href: detailHref, className: "inline-flex w-full items-center justify-center gap-1.5 rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-slate-600 dark:text-zinc-200 dark:hover:bg-slate-800", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
 }

package/dist/features/events/components/EventFilters.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
+import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
 export const EVENT_FILTER_KEYS = {
     admin: ["type", "status", "dateFrom", "dateTo"],
@@ -68,5 +69,5 @@ export function EventFilters({ table, variant = "admin" }) {
     const selectedStatus = table.get("status")
         ? table.get("status").split("|").filter(Boolean)
         : [];
-    return (_jsxs(Div, { children: [_jsx(FilterFacetSection, { title: t("type"), options: typeOptions, selected: selectedType, onChange: (vals) => table.set("type", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: true })] }));
+    return (_jsxs(Div, { children: [_jsx(FilterFacetSection, { title: t("type"), options: typeOptions, selected: selectedType, onChange: (vals) => table.set("type", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: true }), _jsx(SwitchFilter, { title: t("expired"), label: t("showExpiredOnly"), checked: table.get("showExpired") === "true", onChange: (v) => table.set("showExpired", v ? "true" : "") })] }));
 }

package/dist/features/events/components/EventPollWidget.d.ts

@@ -0,0 +1,12 @@
+import type { PollConfig, EventStatus } from "../types";
+interface EventPollWidgetProps {
+    eventId: string;
+    pollConfig: PollConfig;
+    eventStatus: EventStatus;
+    totalEntries?: number;
+    /** Override the POST endpoint — defaults to /api/events/{eventId}/entries */
+    entriesEndpoint?: string;
+    className?: string;
+}
+export declare function EventPollWidget({ eventId, pollConfig, eventStatus, totalEntries, entriesEndpoint, className, }: EventPollWidgetProps): import("react/jsx-runtime").JSX.Element;
+export {};