@mohasinac/appkit 2.7.46 → 2.7.48

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

@@ -1,11 +1,12 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Alert, Button, Form, FormActions, Input, RichTextEditor, Select, StackedViewShell, Text, Toggle, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const CLS_PANEL_SM = "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 p-3 space-y-2";
+const CLS_PANEL_LG = "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-4";
 function toLocalDatetime(iso) {
     if (!iso)
         return "";
@@ -50,6 +51,21 @@ const EVENT_STATUS_OPTIONS = [
     { label: "Paused", value: "paused" },
     { label: "Ended", value: "ended" },
 ];
+const FORM_FIELD_TYPE_OPTIONS = [
+    { label: "Short text", value: "text" },
+    { label: "Long text", value: "textarea" },
+    { label: "Email", value: "email" },
+    { label: "Phone", value: "phone" },
+    { label: "Number", value: "number" },
+    { label: "Dropdown (select)", value: "select" },
+    { label: "Multi-select", value: "multiselect" },
+    { label: "Checkbox", value: "checkbox" },
+    { label: "Radio", value: "radio" },
+    { label: "Date", value: "date" },
+    { label: "Rating (1–5)", value: "rating" },
+    { label: "File upload", value: "file" },
+];
+const FIELD_TYPES_WITH_OPTIONS = ["select", "multiselect", "radio", "checkbox"];
 const POLL_VISIBILITY_OPTIONS = [
     { label: "Always visible", value: "always" },
     { label: "After voting", value: "after_vote" },
@@ -78,7 +94,12 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
     const [requireLogin, setRequireLogin] = React.useState(true);
     const [maxEntriesPerUser, setMaxEntriesPerUser] = React.useState("1");
     const [hasLeaderboard, setHasLeaderboard] = React.useState(false);
+    const [hasPointSystem, setHasPointSystem] = React.useState(false);
+    const [pointsLabel, setPointsLabel] = React.useState("Points");
+    const [entryReviewRequired, setEntryReviewRequired] = React.useState(false);
+    const [surveyFields, setSurveyFields] = React.useState([]);
     const [anonymous, setAnonymous] = React.useState(false);
+    const [feedbackFields, setFeedbackFields] = React.useState([]);
     const [hasRaffle, setHasRaffle] = React.useState(false);
     const [raffleType, setRaffleType] = React.useState("open_raffle");
     const [raffleTopN, setRaffleTopN] = React.useState("10");
@@ -130,9 +151,14 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
             setRequireLogin(event.surveyConfig.requireLogin !== false);
             setMaxEntriesPerUser(String(event.surveyConfig.maxEntriesPerUser ?? 1));
             setHasLeaderboard(Boolean(event.surveyConfig.hasLeaderboard));
+            setHasPointSystem(Boolean(event.surveyConfig.hasPointSystem));
+            setPointsLabel(event.surveyConfig.pointsLabel ?? "Points");
+            setEntryReviewRequired(Boolean(event.surveyConfig.entryReviewRequired));
+            setSurveyFields(Array.isArray(event.surveyConfig.formFields) ? event.surveyConfig.formFields : []);
         }
         if (event.feedbackConfig) {
             setAnonymous(Boolean(event.feedbackConfig.anonymous));
+            setFeedbackFields(Array.isArray(event.feedbackConfig.formFields) ? event.feedbackConfig.formFields : []);
         }
         setHasRaffle(Boolean(event.hasRaffle));
         setRaffleType(event.raffleType || "open_raffle");
@@ -176,14 +202,18 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
                             requireLogin,
                             maxEntriesPerUser: Number(maxEntriesPerUser) || 1,
                             hasLeaderboard,
-                            hasPointSystem: false,
-                            entryReviewRequired: false,
-                            formFields: [],
+                            hasPointSystem,
+                            pointsLabel: hasPointSystem ? (pointsLabel.trim() || "Points") : undefined,
+                            entryReviewRequired,
+                            formFields: surveyFields.map((f, i) => ({ ...f, order: i })),
                         },
                     };
                 if (type === "feedback")
                     return {
-                        feedbackConfig: { anonymous, formFields: [] },
+                        feedbackConfig: {
+                            anonymous,
+                            formFields: feedbackFields.map((f, i) => ({ ...f, order: i })),
+                        },
                     };
                 return {};
             };
@@ -237,6 +267,50 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
             setSaveMessage(error instanceof Error ? error.message : "Save failed");
         },
     });
+    const makeAddField = (setter) => () => setter((prev) => [
+        ...prev,
+        { id: `field-${Date.now()}`, type: "text", label: "", required: false, order: prev.length },
+    ]);
+    const makeRemoveField = (setter) => (id) => setter((prev) => prev.filter((f) => f.id !== id));
+    const makeUpdateField = (setter) => (id, patch) => setter((prev) => prev.map((f) => (f.id === id ? { ...f, ...patch } : f)));
+    const renderFormFieldBuilder = (fields, setter) => {
+        const addField = makeAddField(setter);
+        const removeField = makeRemoveField(setter);
+        const updateField = makeUpdateField(setter);
+        return (_jsxs("div", { className: "space-y-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-400 uppercase tracking-wide", children: "Form fields" }), fields.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "No fields yet. Add fields to collect responses from participants." })), fields.map((field, idx) => {
+                    const hasOptions = FIELD_TYPES_WITH_OPTIONS.includes(field.type);
+                    const isNumeric = field.type === "number" || field.type === "rating";
+                    const isText = field.type === "text" || field.type === "textarea" || field.type === "email";
+                    return (_jsxs("div", { className: "rounded-lg border border-zinc-200 dark:border-zinc-600 p-3 space-y-2 bg-white dark:bg-zinc-900", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Text, { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400", children: ["Field ", idx + 1] }), _jsx("button", { type: "button", onClick: () => removeField(field.id), className: "text-zinc-400 hover:text-red-500 transition-colors text-lg leading-none px-1", "aria-label": "Remove field", children: "\u00D7" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: [_jsx(Select, { label: "Type", value: field.type, options: FORM_FIELD_TYPE_OPTIONS, onChange: (e) => updateField(field.id, { type: e.target.value, options: undefined }) }), _jsx(Input, { label: "Label", value: field.label, onChange: (e) => updateField(field.id, { label: e.target.value }), placeholder: "e.g. Describe your entry", required: true })] }), !hasOptions && field.type !== "date" && field.type !== "file" && field.type !== "rating" && (_jsx(Input, { label: "Placeholder (optional)", value: field.placeholder ?? "", onChange: (e) => updateField(field.id, { placeholder: e.target.value || undefined }), placeholder: "Hint shown inside the field" })), hasOptions && (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options \u2014 one per line" }), _jsx("textarea", { className: "w-full rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-sm text-zinc-800 dark:text-zinc-200 px-3 py-2 resize-y min-h-[72px] focus:outline-none focus:ring-2 focus:ring-primary/50", value: (field.options ?? []).join("\n"), onChange: (e) => updateField(field.id, {
+                                            options: e.target.value.split("\n").map((s) => s.trim()).filter(Boolean),
+                                        }), placeholder: "Option A\nOption B\nOption C" })] })), (isText || isNumeric) && (_jsxs("div", { className: "rounded bg-zinc-50 dark:bg-zinc-800 p-2 space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Validation (optional)" }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [isText && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Min length", type: "number", value: String(field.validation?.minLength ?? ""), onChange: (e) => updateField(field.id, {
+                                                            validation: {
+                                                                ...field.validation,
+                                                                minLength: e.target.value ? Number(e.target.value) : undefined,
+                                                            },
+                                                        }), placeholder: "0" }), _jsx(Input, { label: "Max length", type: "number", value: String(field.validation?.maxLength ?? ""), onChange: (e) => updateField(field.id, {
+                                                            validation: {
+                                                                ...field.validation,
+                                                                maxLength: e.target.value ? Number(e.target.value) : undefined,
+                                                            },
+                                                        }), placeholder: "500" })] })), isNumeric && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "Min value", type: "number", value: String(field.validation?.min ?? ""), onChange: (e) => updateField(field.id, {
+                                                            validation: {
+                                                                ...field.validation,
+                                                                min: e.target.value ? Number(e.target.value) : undefined,
+                                                            },
+                                                        }), placeholder: "0" }), _jsx(Input, { label: "Max value", type: "number", value: String(field.validation?.max ?? ""), onChange: (e) => updateField(field.id, {
+                                                            validation: {
+                                                                ...field.validation,
+                                                                max: e.target.value ? Number(e.target.value) : undefined,
+                                                            },
+                                                        }), placeholder: "100" })] }))] }), field.type === "text" && (_jsx(Input, { label: "Pattern (regex, optional)", value: field.validation?.pattern ?? "", onChange: (e) => updateField(field.id, {
+                                            validation: {
+                                                ...field.validation,
+                                                pattern: e.target.value || undefined,
+                                            },
+                                        }), placeholder: "^[A-Z].*" }))] })), _jsx(Toggle, { checked: field.required, onChange: (v) => updateField(field.id, { required: v }), label: "Required" })] }, field.id));
+                }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addField, children: "+ Add field" })] }));
+    };
     const addSpinPrize = () => {
         setSpinPrizes((prev) => [
             ...prev,
@@ -293,7 +367,7 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, ...rest }) {
     const formSection = (_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(_Fragment, { 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: CLS_PANEL_SM, 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: CLS_PANEL_SM, 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: CLS_PANEL_SM, 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: CLS_PANEL_SM, 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("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Raffle & spin wheel" }), type !== "raffle" && type !== "spin_wheel" && (_jsx(Toggle, { checked: hasRaffle, onChange: setHasRaffle, label: "Attach raffle" }))] }), (hasRaffle || type === "raffle" || type === "spin_wheel") && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Select, { label: "Raffle type", value: type === "spin_wheel" ? "spin_wheel" : raffleType, options: RAFFLE_TYPE_OPTIONS, onChange: (e) => setRaffleType(e.target.value), disabled: type === "spin_wheel" }), _jsx(Input, { label: "Top N (for top-N raffle types)", type: "number", value: raffleTopN, onChange: (e) => setRaffleTopN(e.target.value), placeholder: "10" })] }), _jsx(Input, { label: "Prize description", value: rafflePrize, onChange: (e) => setRafflePrize(e.target.value), placeholder: "\u20B92,000 store credit + exclusive Pikachu sticker" }), _jsx(Input, { label: "Coupon ID for winner (optional)", value: rafflePrizeCouponId, onChange: (e) => setRafflePrizeCouponId(e.target.value), placeholder: "coupon-vip-winner-2026" }), (raffleType === "spin_wheel" || type === "spin_wheel") && (_jsxs("div", { className: "rounded-lg border border-zinc-200 dark:border-slate-700 p-3 space-y-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-300", children: "Spin prizes (weighted random)" }), spinPrizes.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "No spin prizes yet. Add at least one to enable spinning." })), spinPrizes.map((p) => (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-end", children: [_jsx("div", { className: "col-span-5", children: _jsx(Input, { label: "Label", value: p.label, onChange: (e) => updateSpinPrize(p.id, { label: e.target.value }), placeholder: "\u20B9100 off" }) }), _jsx("div", { className: "col-span-3", children: _jsx(Input, { label: "Coupon ID", value: p.couponId ?? "", onChange: (e) => updateSpinPrize(p.id, {
+        }, 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(_Fragment, { 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: CLS_PANEL_SM, 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: CLS_PANEL_SM, 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: CLS_PANEL_LG, 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: CLS_PANEL_LG, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Survey configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Max entries per user", type: "number", value: maxEntriesPerUser, onChange: (e) => setMaxEntriesPerUser(e.target.value), placeholder: "1" }), hasPointSystem && (_jsx(Input, { label: "Points label", value: pointsLabel, onChange: (e) => setPointsLabel(e.target.value), placeholder: "Points" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Toggle, { checked: requireLogin, onChange: setRequireLogin, label: "Require login to participate" }), _jsx(Toggle, { checked: hasLeaderboard, onChange: setHasLeaderboard, label: "Show leaderboard" }), _jsx(Toggle, { checked: hasPointSystem, onChange: setHasPointSystem, label: "Enable point system (employees assign points per entry)" }), _jsx(Toggle, { checked: entryReviewRequired, onChange: setEntryReviewRequired, label: "Require employee review before entry is approved" })] }), renderFormFieldBuilder(surveyFields, setSurveyFields)] })), type === "feedback" && (_jsxs("div", { className: CLS_PANEL_LG, 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" }), renderFormFieldBuilder(feedbackFields, setFeedbackFields)] })), _jsxs("div", { className: CLS_PANEL_LG, children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Raffle & spin wheel" }), type !== "raffle" && type !== "spin_wheel" && (_jsx(Toggle, { checked: hasRaffle, onChange: setHasRaffle, label: "Attach raffle" }))] }), (hasRaffle || type === "raffle" || type === "spin_wheel") && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Select, { label: "Raffle type", value: type === "spin_wheel" ? "spin_wheel" : raffleType, options: RAFFLE_TYPE_OPTIONS, onChange: (e) => setRaffleType(e.target.value), disabled: type === "spin_wheel" }), _jsx(Input, { label: "Top N (for top-N raffle types)", type: "number", value: raffleTopN, onChange: (e) => setRaffleTopN(e.target.value), placeholder: "10" })] }), _jsx(Input, { label: "Prize description", value: rafflePrize, onChange: (e) => setRafflePrize(e.target.value), placeholder: "\u20B92,000 store credit + exclusive Pikachu sticker" }), _jsx(Input, { label: "Coupon ID for winner (optional)", value: rafflePrizeCouponId, onChange: (e) => setRafflePrizeCouponId(e.target.value), placeholder: "coupon-vip-winner-2026" }), (raffleType === "spin_wheel" || type === "spin_wheel") && (_jsxs("div", { className: "rounded-lg border border-zinc-200 dark:border-slate-700 p-3 space-y-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-600 dark:text-zinc-300", children: "Spin prizes (weighted random)" }), spinPrizes.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "No spin prizes yet. Add at least one to enable spinning." })), spinPrizes.map((p) => (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-end", children: [_jsx("div", { className: "col-span-5", children: _jsx(Input, { label: "Label", value: p.label, onChange: (e) => updateSpinPrize(p.id, { label: e.target.value }), placeholder: "\u20B9100 off" }) }), _jsx("div", { className: "col-span-3", children: _jsx(Input, { label: "Coupon ID", value: p.couponId ?? "", onChange: (e) => updateSpinPrize(p.id, {
                                                         couponId: e.target.value || undefined,
                                                     }) }) }), _jsx("div", { className: "col-span-2", children: _jsx(Input, { label: "Weight", type: "number", value: String(p.weight), onChange: (e) => updateSpinPrize(p.id, {
                                                         weight: Number(e.target.value) || 0,

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

@@ -57,13 +57,15 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
         enabled: Boolean(eventId && resolvedStatsEndpoint),
         staleTime: 15000,
     });
+    const [expandedEntryId, setExpandedEntryId] = React.useState(null);
+    const [pointsInputs, setPointsInputs] = React.useState({});
     const reviewMutation = useMutation({
-        mutationFn: async ({ entryId, status, }) => {
+        mutationFn: async ({ entryId, status, points, }) => {
             if (!eventId)
                 throw new Error("eventId is required");
             const endpoint = entryReviewEndpoint?.(eventId, entryId) ??
                 ADMIN_ENDPOINTS.EVENT_ENTRY_BY_ID(eventId, entryId);
-            await apiClient.patch(endpoint, { status });
+            await apiClient.patch(endpoint, { status, ...(points !== undefined ? { points } : {}) });
         },
         onSuccess: async () => {
             await Promise.all([
@@ -72,6 +74,19 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
             ]);
         },
     });
+    const pointsMutation = useMutation({
+        mutationFn: async ({ entryId, points, currentStatus }) => {
+            if (!eventId)
+                throw new Error("eventId is required");
+            const endpoint = entryReviewEndpoint?.(eventId, entryId) ??
+                ADMIN_ENDPOINTS.EVENT_ENTRY_BY_ID(eventId, entryId);
+            const status = currentStatus === "flagged" ? "flagged" : "approved";
+            await apiClient.patch(endpoint, { status, points });
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["admin-event-entries", eventId] });
+        },
+    });
     const rows = entriesQuery.data?.items ?? [];
     const columns = React.useMemo(() => [
         {
@@ -89,12 +104,23 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
             header: "Status",
             render: (row) => (_jsx(Text, { className: "text-xs font-medium uppercase tracking-wide", children: row.reviewStatus })),
         },
+        {
+            key: "points",
+            header: "Points",
+            render: (row) => (_jsxs("div", { className: "flex items-center gap-1.5", "data-section": "adminevententriesview-points", children: [_jsx("input", { type: "number", min: 0, className: "w-20 rounded border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-sm px-2 py-1 text-zinc-800 dark:text-zinc-200 focus:outline-none focus:ring-2 focus:ring-primary/50", placeholder: "0", value: pointsInputs[row.id] ?? (row.points !== undefined ? String(row.points) : ""), onChange: (e) => setPointsInputs((prev) => ({ ...prev, [row.id]: e.target.value })) }), _jsx(Button, { size: "sm", variant: "outline", disabled: pointsMutation.isPending || !(row.id in pointsInputs), onClick: () => {
+                            const val = Number(pointsInputs[row.id]);
+                            if (!isNaN(val)) {
+                                pointsMutation.mutate({ entryId: row.id, points: val, currentStatus: row.reviewStatus });
+                                setPointsInputs((prev) => { const next = { ...prev }; delete next[row.id]; return next; });
+                            }
+                        }, children: "Save" })] })),
+        },
         {
             key: "actions",
             header: "Actions",
-            render: (row) => (_jsxs("div", { className: "flex items-center gap-2", "data-section": "adminevententriesview-div-274", children: [_jsx(Button, { size: "sm", variant: "secondary", disabled: reviewMutation.isPending || row.reviewStatus === "approved", onClick: () => reviewMutation.mutate({ entryId: row.id, status: "approved" }), children: "Approve" }), _jsx(Button, { size: "sm", variant: "outline", disabled: reviewMutation.isPending || row.reviewStatus === "flagged", onClick: () => reviewMutation.mutate({ entryId: row.id, status: "flagged" }), children: "Flag" })] })),
+            render: (row) => (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", "data-section": "adminevententriesview-div-274", children: [_jsx(Button, { size: "sm", variant: "secondary", disabled: reviewMutation.isPending || row.reviewStatus === "approved", onClick: () => reviewMutation.mutate({ entryId: row.id, status: "approved" }), children: "Approve" }), _jsx(Button, { size: "sm", variant: "outline", disabled: reviewMutation.isPending || row.reviewStatus === "flagged", onClick: () => reviewMutation.mutate({ entryId: row.id, status: "flagged" }), children: "Flag" }), row.formResponses && Object.keys(row.formResponses).length > 0 && (_jsx(Button, { size: "sm", variant: "outline", onClick: () => setExpandedEntryId((prev) => (prev === row.id ? null : row.id)), children: expandedEntryId === row.id ? "Hide" : "Responses" }))] })),
         },
-    ], [reviewMutation]);
+    ], [reviewMutation, pointsMutation, pointsInputs, expandedEntryId]);
     const statsSection = (_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-3", "data-section": "adminevententriesview-div-275", children: [_jsx(Alert, { variant: "info", title: "Total entries", children: String(statsQuery.data?.stats?.totalEntries ?? 0) }), _jsx(Alert, { variant: "success", title: "Approved", children: String(statsQuery.data?.stats?.approvedEntries ?? 0) }), _jsx(Alert, { variant: "warning", title: "Flagged", children: String(statsQuery.data?.stats?.flaggedEntries ?? 0) })] }));
     const filtersSection = (_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", "data-section": "adminevententriesview-div-276", children: [_jsx(Input, { label: "Search entries", value: searchQuery, onChange: (event) => {
                     setPage(1);
@@ -103,6 +129,8 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
                     setPage(1);
                     setStatusFilter(event.target.value);
                 } })] }));
+    const expandedEntry = expandedEntryId ? rows.find((r) => r.id === expandedEntryId) : null;
+    const responsesPanelSection = expandedEntry?.formResponses && Object.keys(expandedEntry.formResponses).length > 0 ? (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 p-4 space-y-3", children: [_jsxs(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: ["Responses \u2014 ", expandedEntry.userDisplayName || expandedEntry.userId || "Anonymous"] }), _jsx("div", { className: "space-y-2", children: Object.entries(expandedEntry.formResponses).map(([key, value]) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400", children: key }), _jsx(Text, { className: "text-sm text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: Array.isArray(value) ? value.join(", ") : String(value ?? "—") })] }, key))) })] })) : null;
     const tableSection = (_jsx(DataTable, { columns: columns, rows: rows, isLoading: entriesQuery.isLoading, currentPage: entriesQuery.data?.page ?? page, totalPages: entriesQuery.data?.totalPages ?? 1, onPageChange: setPage, emptyLabel: "No entries found" }));
     const eventTitle = statsQuery.data?.event?.title;
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: eventTitle ? `${eventTitle} Entries` : "Event Entries", renderHeader: renderHeader, sections: [
@@ -112,6 +140,7 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
             renderStats?.() ?? statsSection,
             renderFilters?.() ?? filtersSection,
             renderTable?.() ?? tableSection,
+            responsesPanelSection,
             renderPagination?.(),
         ], overlays: renderReviewDrawer?.() }));
 }

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

@@ -64,6 +64,9 @@ export declare const EVENT_PUBLIC_SORT_OPTIONS: readonly [{
 }, {
     readonly value: string;
     readonly label: "Title A–Z";
+}, {
+    readonly value: string;
+    readonly label: "Title Z–A";
 }, {
     readonly value: "-stats.totalEntries";
     readonly label: "Most Entries";

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

@@ -28,6 +28,7 @@ export const EVENT_PUBLIC_SORT_OPTIONS = [
     { value: sortBy(EVENT_FIELDS.STARTS_AT, "ASC"), label: "Starts Soonest" },
     { value: sortBy(EVENT_FIELDS.STARTS_AT), label: "Starts Latest" },
     { value: sortBy(EVENT_FIELDS.TITLE, "ASC"), label: "Title A–Z" },
+    { value: sortBy(EVENT_FIELDS.TITLE), label: "Title Z–A" },
     { value: "-stats.totalEntries", label: "Most Entries" },
 ];
 // Backward-compatible alias.

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

@@ -14,5 +14,5 @@ export function EventLeaderboard({ isLoading = false, isEmpty = false, renderLis
     }
     if (renderList)
         return _jsx("div", { className: className, "data-section": "eventleaderboard-div-280", children: renderList() });
-    return (_jsx("div", { className: `space-y-2 ${className}`, "data-section": "eventleaderboard-div-281", children: entries.map((entry, i) => renderEntry ? (_jsx(React.Fragment, { children: renderEntry(entry, i) }, entry.userId)) : (_jsxs("div", { className: "flex items-center justify-between p-3 rounded-xl border", "data-section": "eventleaderboard-div-282", children: [_jsxs(Span, { className: "font-medium", children: ["#", entry.rank, " ", entry.userDisplayName] }), _jsxs(Span, { children: [entry.points, " ", labels.points ?? "pts"] })] }, entry.userId))) }));
+    return (_jsx("div", { className: `space-y-2 ${className}`, "data-section": "eventleaderboard-div-281", children: entries.map((entry, i) => renderEntry ? (_jsx(React.Fragment, { children: renderEntry(entry, i) }, entry.userId)) : (_jsxs("div", { className: "flex items-center justify-between p-3 rounded-xl border", "data-section": "eventleaderboard-div-282", children: [_jsxs(Span, { className: "font-medium", children: ["#", entry.rank, " ", entry.userDisplayName] }), _jsxs(Span, { children: [entry.totalPoints, " ", labels.points ?? "pts"] })] }, entry.userId))) }));
 }

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

@@ -81,6 +81,7 @@ export function EventsIndexListing({ initialData }) {
     const statusRaw = table.get(TABLE_KEYS.STATUS);
     const dateFrom = table.get(TABLE_KEYS.DATE_FROM);
     const dateTo = table.get(TABLE_KEYS.DATE_TO);
+    const showExpired = table.get(TABLE_KEYS.SHOW_EXPIRED) === "true";
     const filterParts = [];
     if (typeRaw) {
         const types = typeRaw.split("|").filter(Boolean);
@@ -90,13 +91,15 @@ export function EventsIndexListing({ initialData }) {
         else if (types.length > 1)
             filterParts.push(sieveMultiEq(EVENT_FIELDS.TYPE, types));
     }
-    if (statusRaw) {
-        const statuses = statusRaw.split("|").filter(Boolean);
-        if (statuses.length === 1)
-            filterParts.push(sieveFilter(EVENT_FIELDS.STATUS, SIEVE_OP.EQ, statuses[0]));
-        else if (statuses.length > 1)
-            filterParts.push(sieveMultiEq(EVENT_FIELDS.STATUS, statuses));
-    }
+    const statusValues = statusRaw
+        ? statusRaw.split("|").filter(Boolean)
+        : showExpired
+            ? ["active", "ended", "paused"]
+            : [];
+    if (statusValues.length === 1)
+        filterParts.push(sieveFilter(EVENT_FIELDS.STATUS, SIEVE_OP.EQ, statusValues[0]));
+    else if (statusValues.length > 1)
+        filterParts.push(sieveMultiEq(EVENT_FIELDS.STATUS, statusValues));
     if (dateFrom)
         filterParts.push(sieveFilter(EVENT_FIELDS.STARTS_AT, SIEVE_OP.GTE, dateFrom));
     if (dateTo)

package/dist/features/events/repository/event-entry.repository.d.ts

@@ -9,9 +9,9 @@ declare class EventEntryRepository extends BaseRepository<EventEntryDocument> {
     listForUser(userId: string, model: SieveModel): Promise<FirebaseSieveResult<EventEntryDocument>>;
     hasUserEntered(eventId: string, userId: string): Promise<boolean>;
     countUserEntries(eventId: string, userId: string): Promise<number>;
-    getLeaderboard(eventId: string, limit?: number): Promise<EventEntryDocument[]>;
+    getLeaderboard(eventId: string, limit?: number): Promise<import("../types").LeaderboardEntry[]>;
     createEntry(input: EventEntryCreateInput): Promise<EventEntryDocument>;
-    reviewEntry(id: string, reviewStatus: EventEntryDocument["reviewStatus"], reviewedBy: string, reviewNote?: string): Promise<EventEntryDocument>;
+    reviewEntry(id: string, reviewStatus: EventEntryDocument["reviewStatus"], reviewedBy: string, reviewNote?: string, points?: number): Promise<EventEntryDocument>;
 }
 declare const eventEntryRepository: EventEntryRepository;
 export { EventEntryRepository, eventEntryRepository };

package/dist/features/events/repository/event-entry.repository.js

@@ -53,13 +53,37 @@ class EventEntryRepository extends BaseRepository {
             const snapshot = await this.getCollection()
                 .where(EVENT_ENTRY_FIELDS.EVENT_ID, "==", eventId)
                 .where(EVENT_ENTRY_FIELDS.REVIEW_STATUS, "==", EVENT_ENTRY_FIELDS.REVIEW_STATUS_VALUES.APPROVED)
-                .orderBy(EVENT_ENTRY_FIELDS.POINTS, "desc")
-                .limit(limit)
                 .get();
-            return snapshot.docs.map((doc) => decryptPiiFields({
-                id: doc.id,
-                ...doc.data(),
-            }, [...EVENT_ENTRY_PII_FIELDS]));
+            // Aggregate per user: sum all approved entry points
+            const byUser = new Map();
+            for (const doc of snapshot.docs) {
+                const raw = decryptPiiFields({ id: doc.id, ...doc.data() }, [...EVENT_ENTRY_PII_FIELDS]);
+                if (!raw.userId)
+                    continue;
+                const existing = byUser.get(raw.userId);
+                const pts = typeof raw.points === "number" ? raw.points : 0;
+                if (existing) {
+                    existing.totalPoints += pts;
+                    existing.entryCount += 1;
+                }
+                else {
+                    byUser.set(raw.userId, {
+                        displayName: raw.userDisplayName ?? raw.userId,
+                        totalPoints: pts,
+                        entryCount: 1,
+                    });
+                }
+            }
+            return Array.from(byUser.entries())
+                .sort((a, b) => b[1].totalPoints - a[1].totalPoints)
+                .slice(0, limit)
+                .map(([userId, data], idx) => ({
+                rank: idx + 1,
+                userId,
+                userDisplayName: data.displayName,
+                totalPoints: data.totalPoints,
+                entryCount: data.entryCount,
+            }));
         }
         catch (error) {
             throw new DatabaseError(`Failed to get leaderboard for event ${eventId}`, error);
@@ -88,7 +112,7 @@ class EventEntryRepository extends BaseRepository {
             throw new DatabaseError("Failed to create event entry", error);
         }
     }
-    async reviewEntry(id, reviewStatus, reviewedBy, reviewNote) {
+    async reviewEntry(id, reviewStatus, reviewedBy, reviewNote, points) {
         try {
             const now = new Date();
             await this.getCollection()
@@ -98,6 +122,7 @@ class EventEntryRepository extends BaseRepository {
                 [EVENT_ENTRY_FIELDS.REVIEWED_BY]: reviewedBy,
                 [EVENT_ENTRY_FIELDS.REVIEWED_AT]: now,
                 ...(reviewNote !== undefined ? { reviewNote } : {}),
+                ...(points !== undefined ? { points } : {}),
             }));
             serverLogger.info("Event entry reviewed", { entryId: id, reviewStatus });
             return this.findByIdOrFail(id);

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

@@ -127,7 +127,9 @@ export interface LeaderboardEntry {
     rank: number;
     userId: string;
     userDisplayName: string;
-    points: number;
+    /** Sum of all approved entry points for this user in the event */
+    totalPoints: number;
+    entryCount: number;
 }
 export interface EventListResponse {
     items: EventItem[];

package/dist/features/filters/SwitchFilter.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div, Row, Span, Text } from "../../ui";
+import { Button, Div, Row, Span, Text, Toggle } from "../../ui";
 import { cn } from "./filterUtils";
 export function SwitchFilter({ title, label, checked, onChange, defaultCollapsed = false, className = "", isOpen: controlledOpen, onToggle, onClear, }) {
     const isControlled = controlledOpen !== undefined;
@@ -13,7 +13,5 @@ export function SwitchFilter({ title, label, checked, onChange, defaultCollapsed
         else
             setInternalCollapsed((c) => !c);
     };
-    return (_jsxs(Div, { role: "group", "aria-labelledby": `sf-${title}`, className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { className: "gap-2", children: [_jsxs(Button, { type: "button", id: `sf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-50", children: title }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), checked && onClear && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: "inline-flex items-center justify-center w-5 h-5 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-full transition-colors", "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsx(Div, { className: "mt-3", children: _jsxs(Button, { type: "button", role: "switch", variant: "ghost", size: "sm", "aria-checked": checked, onClick: () => onChange(!checked), className: "flex items-center justify-between w-full group", children: [_jsx(Span, { className: "text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors", children: label }), _jsx(Span, { "aria-hidden": "true", className: cn("relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200", checked
-                                ? "bg-primary-600 dark:bg-secondary-500"
-                                : "bg-zinc-200 dark:bg-slate-700"), children: _jsx(Span, { className: cn("pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200", checked ? "translate-x-4" : "translate-x-0") }) })] }) }))] }));
+    return (_jsxs(Div, { role: "group", "aria-labelledby": `sf-${title}`, className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { className: "gap-2", children: [_jsxs(Button, { type: "button", id: `sf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-50", children: title }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), checked && onClear && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: "inline-flex items-center justify-center w-5 h-5 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-full transition-colors", "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Div, { className: "mt-3 flex items-center justify-between gap-3", children: [_jsx(Span, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: label }), _jsx(Toggle, { checked: checked, onChange: onChange, size: "sm" })] }))] }));
 }

package/dist/features/homepage/components/BrandsSection.js

@@ -24,7 +24,7 @@ function BrandLogo({ brand }) {
     const iconSrc = brand.display?.icon;
     const coverImage = brand.display?.coverImage;
     const initial = brand.name[0]?.toUpperCase() ?? "?";
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900", children: [iconSrc || coverImage ? (_jsx(Image, { src: iconSrc ?? coverImage, alt: brand.name, width: 40, height: 40, className: "h-10 w-10 rounded object-contain" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-32 w-36 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900 md:h-40", children: [iconSrc || coverImage ? (_jsx(Image, { src: iconSrc ?? coverImage, alt: brand.name, width: 64, height: 64, className: "h-16 w-16 rounded object-contain" })) : (_jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
 }
 export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, cta, filters, }) {
     const { themed } = THEME_CONSTANTS;
@@ -39,5 +39,5 @@ export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, view
     });
     if (!isLoading && allBrands.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs("div", { className: "mb-4 flex flex-wrap gap-2", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-24 w-28 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false })), cta && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
+    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs("div", { className: "mb-4 flex flex-wrap gap-2", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-32 w-36 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700 md:h-40" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, loop: true })), cta && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
 }

package/dist/features/homepage/components/CustomCardsSection.js

@@ -61,7 +61,7 @@ export function CustomCardsSection(config) {
     }
     // Row layout: horizontal scroller
     if (layout === "row") {
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, children: cards.map((card) => (_jsx("div", { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, loop: true, children: cards.map((card) => (_jsx("div", { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
     }
     // Masonry layout: CSS columns
     if (layout === "masonry") {

package/dist/features/homepage/components/CustomerReviewsSection.js

@@ -9,5 +9,5 @@ export function CustomerReviewsSection({ title, subtitle, items, renderItem, vie
     }
     if (items.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4 md:px-8", "data-section": "customerreviewssection-div-317", children: [_jsxs("div", { className: "text-center mb-10", "data-section": "customerreviewssection-div-318", children: [_jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary}`, children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: THEME_CONSTANTS.carousel.perView.reviews, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "customerreviewssection-div-319", children: _jsx(TextLink, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4 md:px-8", "data-section": "customerreviewssection-div-317", children: [_jsxs("div", { className: "text-center mb-10", "data-section": "customerreviewssection-div-318", children: [_jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary}`, children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: THEME_CONSTANTS.carousel.perView.reviews, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: true }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "customerreviewssection-div-319", children: _jsx(TextLink, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/homepage/components/FeaturedResultsSection.js

@@ -14,5 +14,5 @@ export function FeaturedResultsSection({ title, subtitle, pillLabel, ornamentLab
                                 afterImage: item.afterImage,
                                 caption: item.caption ?? "",
                                 sortOrder: item.sortOrder ?? i,
-                            } }, item.id ?? `result-${i}`) })), keyExtractor: (item, i) => item.id ?? `result-${i}`, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 24, minItemWidth: 260, snapToItems: true, showArrows: true, showFadeEdges: true }) })] }));
+                            } }, item.id ?? `result-${i}`) })), keyExtractor: (item, i) => item.id ?? `result-${i}`, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 24, minItemWidth: 260, snapToItems: true, showArrows: true, showFadeEdges: true, loop: true }) })] }));
 }

package/dist/features/homepage/components/SectionCarousel.js

@@ -36,7 +36,7 @@ export function SectionCarousel({ title, description, headingVariant = "editoria
                                     headingClass,
                                 ]
                                     .filter(Boolean)
-                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs("div", { className: `${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-500 text-xs select-none`, "aria-hidden": "true", "data-section": "sectioncarousel-div-355", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `text-base ${descVariant} mt-2`, children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: autoScroll && rows === 1, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 flex justify-center", "data-section": "sectioncarousel-div-356", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-1.5 rounded-lg border px-6 py-2.5 text-sm font-medium transition-colors ${useLightText
+                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs("div", { className: `${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-500 text-xs select-none`, "aria-hidden": "true", "data-section": "sectioncarousel-div-355", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `text-base ${descVariant} mt-2`, children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: rows === 1, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 flex justify-center", "data-section": "sectioncarousel-div-356", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-1.5 rounded-lg border px-6 py-2.5 text-sm font-medium transition-colors ${useLightText
                                 ? "border-white/40 text-white hover:bg-white/10"
                                 : "border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800"}`, children: viewMoreLabel }) }))] })] }));
 }

package/dist/features/homepage/components/ShopByCategorySection.js

@@ -61,5 +61,5 @@ export function ShopByCategorySection({ title = "Shop by Category", subtitle, li
                             if (!cat)
                                 return null;
                             return (_jsx(FilterChip, { label: cat.name, active: activeFilter === id, onClick: () => setActiveFilter(activeFilter === id ? "all" : id) }, id));
-                        })] })), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden px-1", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: "flex-none h-[104px] w-[108px] animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: true, autoScrollInterval: 3500, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), cta && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-1 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+                        })] })), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden px-1", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: "flex-none h-[104px] w-[108px] animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: true, autoScrollInterval: 3500, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, loop: true, pauseOnHover: true })), cta && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-1 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/live/components/LiveItemsIndexListing.js

@@ -42,7 +42,7 @@ export function LiveItemsIndexListing({ initialData }) {
     const { categories } = useCategoryTree();
     const categoryOptions = categoriesToFacetOptions(categories);
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "live").map((i) => i.itemId));
-    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
     const openFilters = useCallback(() => {
         onFilterReset();
         setFilterOpen(true);
@@ -52,10 +52,9 @@ export function LiveItemsIndexListing({ initialData }) {
         setFilterOpen(false);
     }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
-        onFilterClear();
+        onResetAll({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
         setSearchInput("");
-    }, [table, onFilterClear]);
+    }, [onResetAll]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
         filterActiveCount > 0;

package/dist/features/pre-orders/components/PreOrdersIndexListing.js

@@ -46,7 +46,7 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
     const categoryOptions = categoriesToFacetOptions(categories);
     const { brandOptions } = useBrands();
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "preorder").map((i) => i.itemId));
-    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
     const openFilters = useCallback(() => {
         onFilterReset();
         setFilterOpen(true);
@@ -56,10 +56,9 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
         setFilterOpen(false);
     }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" });
-        onFilterClear();
+        onResetAll({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" });
         setSearchInput("");
-    }, [table, onFilterClear]);
+    }, [onResetAll]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
         table.get(TABLE_KEYS.SHOW_CLOSED) === "true" ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||

package/dist/features/products/components/AuctionsIndexListing.js

@@ -40,7 +40,7 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
     const { categories } = useCategoryTree();
     const categoryOptions = categoriesToFacetOptions(categories);
     const { brandOptions } = useBrands();
-    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
     const openFilters = useCallback(() => {
         onFilterReset();
         setFilterOpen(true);
@@ -50,10 +50,9 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
         setFilterOpen(false);
     }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_ENDED]: "" });
-        onFilterClear();
+        onResetAll({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_ENDED]: "" });
         setSearchInput("");
-    }, [table, onFilterClear]);
+    }, [onResetAll]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
         table.get(TABLE_KEYS.SHOW_ENDED) === "true" ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||