@mohasinac/appkit 2.7.10 → 2.7.12

package/dist/features/blog/components/BlogFilters.js

@@ -5,27 +5,30 @@ import { FilterFacetSection } from "../../filters/FilterFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
 import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
+import { TABLE_KEYS } from "../../../constants/table-keys";
+import { BLOG_FIELDS } from "../../../constants/field-names";
+import { sortBy } from "../../../constants/sort";
 export const BLOG_FILTER_KEYS = {
-    admin: ["status", "category", "isFeatured"],
-    seller: ["status", "category", "isFeatured"],
-    public: ["category"],
+    admin: [TABLE_KEYS.STATUS, TABLE_KEYS.CATEGORY, TABLE_KEYS.IS_FEATURED],
+    seller: [TABLE_KEYS.STATUS, TABLE_KEYS.CATEGORY, TABLE_KEYS.IS_FEATURED],
+    public: [TABLE_KEYS.CATEGORY],
 };
 export const BLOG_ADMIN_SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest First" },
-    { value: "createdAt", label: "Oldest First" },
-    { value: "title", label: "Title A–Z" },
-    { value: "-title", label: "Title Z–A" },
-    { value: "-views", label: "Most Viewed" },
-    { value: "-readTimeMinutes", label: "Longest Read" },
-    { value: "-publishedAt", label: "Published: Newest" },
-    { value: "publishedAt", label: "Published: Oldest" },
+    { value: sortBy(BLOG_FIELDS.CREATED_AT), label: "Newest First" },
+    { value: sortBy(BLOG_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
+    { value: sortBy(BLOG_FIELDS.TITLE, "ASC"), label: "Title A–Z" },
+    { value: sortBy(BLOG_FIELDS.TITLE), label: "Title Z–A" },
+    { value: sortBy(BLOG_FIELDS.VIEWS), label: "Most Viewed" },
+    { value: sortBy(BLOG_FIELDS.READ_TIME_MINUTES), label: "Longest Read" },
+    { value: sortBy(BLOG_FIELDS.PUBLISHED_AT), label: "Published: Newest" },
+    { value: sortBy(BLOG_FIELDS.PUBLISHED_AT, "ASC"), label: "Published: Oldest" },
 ];
 export const BLOG_SELLER_SORT_OPTIONS = BLOG_ADMIN_SORT_OPTIONS;
 export const BLOG_PUBLIC_SORT_OPTIONS = [
-    { value: "-publishedAt", label: "Published: Newest" },
-    { value: "publishedAt", label: "Published: Oldest" },
-    { value: "-views", label: "Most Viewed" },
-    { value: "title", label: "Title A–Z" },
+    { value: sortBy(BLOG_FIELDS.PUBLISHED_AT), label: "Published: Newest" },
+    { value: sortBy(BLOG_FIELDS.PUBLISHED_AT, "ASC"), label: "Published: Oldest" },
+    { value: sortBy(BLOG_FIELDS.VIEWS), label: "Most Viewed" },
+    { value: sortBy(BLOG_FIELDS.TITLE, "ASC"), label: "Title A–Z" },
 ];
 // Backward-compatible alias.
 export const BLOG_SORT_OPTIONS = BLOG_ADMIN_SORT_OPTIONS;

package/dist/features/blog/components/BlogIndexListing.js

@@ -8,12 +8,23 @@ import { Pagination, ListingToolbar } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { BlogCard } from "./BlogListView";
 import { BlogFilters, BLOG_PUBLIC_SORT_OPTIONS } from "./BlogFilters";
+import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
+import { sortBy } from "../../../constants/sort";
+import { BLOG_FIELDS } from "../../../constants/field-names";
 const PAGE_SIZE = 24;
-const FILTER_KEYS = ["category", "dateFrom", "dateTo"];
+const DEFAULT_SORT = sortBy(BLOG_FIELDS.PUBLISHED_AT);
+const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO];
 export function BlogIndexListing({ initialData }) {
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: "-publishedAt" } });
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
+    const handleViewToggle = (next) => {
+        if (next === VIEW_MODE.TABLE)
+            return;
+        setView(next);
+        table.set(TABLE_KEYS.VIEW, next);
+    };
     // Pending filter state — buffered until "Apply Filters" clicked
     const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
     const pendingTable = useMemo(() => ({
@@ -56,27 +67,27 @@ export function BlogIndexListing({ initialData }) {
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
     }, []);
     const resetAll = useCallback(() => {
-        const updates = { q: "", sort: "" };
+        const updates = { [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" };
         for (const k of FILTER_KEYS)
             updates[k] = "";
         table.setMany(updates);
         setSearchInput("");
     }, [table]);
     const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") ||
-        table.get("sort") !== "-publishedAt" ||
+    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
+        table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
         activeFilterCount > 0;
     const params = {
-        q: table.get("q") || undefined,
-        category: (table.get("category") || undefined),
-        sort: table.get("sort") || "-publishedAt",
-        page: table.getNumber("page", 1),
-        perPage: table.getNumber("pageSize", PAGE_SIZE),
+        q: table.get(TABLE_KEYS.QUERY) || undefined,
+        category: (table.get(TABLE_KEYS.CATEGORY) || undefined),
+        sort: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
+        page: table.getNumber(TABLE_KEYS.PAGE, 1),
+        perPage: table.getNumber(TABLE_KEYS.PAGE_SIZE, PAGE_SIZE),
     };
     const { posts, total, totalPages, isLoading } = useBlogPosts(params, { initialData });
     const currentPage = table.getNumber("page", 1);
     const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
+        table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search posts...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-publishedAt", sortOptions: BLOG_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, 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) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-video bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-5 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" })] })] }, i))) })) : posts.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No posts found." })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: posts.map((post) => (_jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id))) })) }), 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: "flex items-center gap-2 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 filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(BlogFilters, { table: pendingTable, variant: "public" }) }), _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})` : ""] }) })] })] }))] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search posts...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: BLOG_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, 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) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-video bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-5 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" })] })] }, i))) })) : posts.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No posts found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: posts.map((post) => (_jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id))) })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: posts.map((post) => (_jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id))) })) }), 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: "flex items-center gap-2 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 filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(BlogFilters, { table: pendingTable, variant: "public" }) }), _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/blog/schemas/index.d.ts

@@ -158,14 +158,14 @@ export declare const blogPostSchema: z.ZodObject<{
     updatedAt?: string | undefined;
     content?: string | undefined;
     tags?: string[] | undefined;
-    publishedAt?: string | undefined;
     isFeatured?: boolean | undefined;
-    views?: number | undefined;
+    publishedAt?: string | undefined;
     excerpt?: string | undefined;
     authorId?: string | undefined;
     authorName?: string | undefined;
-    authorAvatar?: string | undefined;
     readTimeMinutes?: number | undefined;
+    views?: number | undefined;
+    authorAvatar?: string | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
 }, {
@@ -178,8 +178,8 @@ export declare const blogPostSchema: z.ZodObject<{
     updatedAt?: string | undefined;
     content?: string | undefined;
     tags?: string[] | undefined;
-    publishedAt?: string | undefined;
     isFeatured?: boolean | undefined;
+    publishedAt?: string | undefined;
     coverImage?: string | {
         type: "video" | "image" | "file";
         url: string;
@@ -188,8 +188,11 @@ export declare const blogPostSchema: z.ZodObject<{
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     } | null | undefined;
-    views?: number | undefined;
     excerpt?: string | undefined;
+    authorId?: string | undefined;
+    authorName?: string | undefined;
+    readTimeMinutes?: number | undefined;
+    views?: number | undefined;
     contentImages?: {
         type: "video" | "image" | "file";
         url: string;
@@ -206,10 +209,7 @@ export declare const blogPostSchema: z.ZodObject<{
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     }[] | undefined;
-    authorId?: string | undefined;
-    authorName?: string | undefined;
     authorAvatar?: string | undefined;
-    readTimeMinutes?: number | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
 }>;
@@ -228,14 +228,14 @@ export declare const blogListParamsSchema: z.ZodObject<{
     q?: string | undefined;
     page?: number | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
-    featured?: boolean | undefined;
     tags?: string | undefined;
+    featured?: boolean | undefined;
 }, {
     sort?: string | undefined;
     perPage?: number | undefined;
     q?: string | undefined;
     page?: number | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
-    featured?: boolean | undefined;
     tags?: string | undefined;
+    featured?: boolean | undefined;
 }>;

package/dist/features/categories/components/CategoriesIndexListing.js

@@ -8,19 +8,30 @@ import { Pagination, ListingToolbar } from "../../../ui";
 import { CategoryCard } from "./CategoryGrid";
 import { CategoryFilters } from "./CategoryFilters";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
+import { sortBy } from "../../../constants/sort";
+import { CATEGORY_FIELDS } from "../../../constants/field-names";
 const PAGE_SIZE = 24;
-const FILTER_KEYS = ["isFeatured", "isBrand", "rootOnly", "tier", "minItemCount", "maxItemCount"];
+const DEFAULT_SORT = sortBy(CATEGORY_FIELDS.NAME, "ASC");
+const FILTER_KEYS = [TABLE_KEYS.IS_FEATURED, "isBrand", "rootOnly", "tier", "minItemCount", "maxItemCount"];
 const SORT_OPTIONS = [
-    { value: "name", label: "Name A–Z" },
-    { value: "-name", label: "Name Z–A" },
+    { value: sortBy(CATEGORY_FIELDS.NAME, "ASC"), label: "Name A–Z" },
+    { value: sortBy(CATEGORY_FIELDS.NAME), label: "Name Z–A" },
     { value: "-productCount", label: "Most Products" },
 ];
 export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: "name" } });
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
-    const sort = table.get("sort") || "name";
-    const page = table.getNumber("page", 1);
+    const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
+    const handleViewToggle = (next) => {
+        if (next === VIEW_MODE.TABLE)
+            return;
+        setView(next);
+        table.set(TABLE_KEYS.VIEW, next);
+    };
+    const sort = table.get(TABLE_KEYS.SORT) || DEFAULT_SORT;
+    const page = table.getNumber(TABLE_KEYS.PAGE, 1);
     // Pending filter state — buffered until "Apply Filters" clicked
     const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
     const pendingTable = useMemo(() => ({
@@ -63,35 +74,35 @@ export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
     }, []);
     const resetAll = useCallback(() => {
-        const updates = { q: "", sort: "" };
+        const updates = { [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" };
         for (const k of FILTER_KEYS)
             updates[k] = "";
         table.setMany(updates);
         setSearchInput("");
     }, [table]);
     const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") ||
-        table.get("sort") !== "name" ||
+    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
+        table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
         activeFilterCount > 0;
     const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
+        table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
     const clearSearch = () => {
         setSearchInput("");
-        table.set("q", "");
+        table.set(TABLE_KEYS.QUERY, "");
     };
     // Tab state — "all" | "categories" | "brands" (not used when brandsOnly=true)
-    const activeTab = brandsOnly ? "brands" : (table.get("tab") || "all");
+    const activeTab = brandsOnly ? "brands" : (table.get(TABLE_KEYS.TAB) || "all");
     const isBrandParam = brandsOnly ? true :
         activeTab === "brands" ? true :
             activeTab === "categories" ? false :
                 undefined;
     const switchTab = (key) => {
-        table.set("tab", key);
+        table.set(TABLE_KEYS.TAB, key);
     };
     const { categories, total, totalPages, isLoading } = useCategoriesFiltered({
-        q: table.get("q") || undefined,
-        isFeatured: table.get("isFeatured") === "true" || undefined,
+        q: table.get(TABLE_KEYS.QUERY) || undefined,
+        isFeatured: table.get(TABLE_KEYS.IS_FEATURED) === "true" || undefined,
         isBrand: isBrandParam,
         rootOnly: table.get("rootOnly") === "true" || undefined,
         tier: table.get("tier") ? Number(table.get("tier")) : undefined,
@@ -101,7 +112,7 @@ export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
         page,
         pageSize: PAGE_SIZE,
     });
-    const activeSearch = table.get("q") || "";
+    const activeSearch = table.get(TABLE_KEYS.QUERY) || "";
     const TABS = [
         { key: "all", label: "All" },
         { key: "categories", label: "Categories" },
@@ -112,9 +123,9 @@ export function CategoriesIndexListing({ initialData: _, brandsOnly = false }) {
                         activeTab === tab.key
                             ? "border-primary text-primary dark:text-primary-400 dark:border-primary-400"
                             : "border-transparent text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200",
-                    ].join(" "), children: tab.label }, tab.key))) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-[4/3] bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3.5 space-y-2", children: [_jsx("div", { className: "h-3.5 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" })] })] }, i))) })) : categories.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: activeSearch
+                    ].join(" "), children: tab.label }, tab.key))) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-[4/3] bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3.5 space-y-2", children: [_jsx("div", { className: "h-3.5 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" })] })] }, i))) })) : categories.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: activeSearch
                         ? `No ${activeTab === "brands" || brandsOnly ? "brands" : "categories"} matching "${activeSearch}"`
                         : activeTab === "brands" || brandsOnly
                             ? "No brands found"
-                            : "No categories found" })) : (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: categories.map((category) => (_jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id))) })) }), 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: "flex items-center gap-2 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 filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(CategoryFilters, { table: pendingTable, variant: "public" }) }), _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})` : ""] }) })] })] }))] }));
+                            : "No categories found" })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: categories.map((category) => (_jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id))) })) : (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: categories.map((category) => (_jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id))) })) }), 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: "flex items-center gap-2 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 filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(CategoryFilters, { table: pendingTable, variant: "public" }) }), _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/categories/schemas/index.d.ts

@@ -128,6 +128,7 @@ export declare const categoryItemSchema: z.ZodObject<{
         coverImage?: string | undefined;
     } | undefined;
     order?: number | undefined;
+    isFeatured?: boolean | undefined;
     description?: string | undefined;
     seo?: {
         title?: string | undefined;
@@ -138,7 +139,6 @@ export declare const categoryItemSchema: z.ZodObject<{
     rootId?: string | undefined;
     parentIds?: string[] | undefined;
     isLeaf?: boolean | undefined;
-    isFeatured?: boolean | undefined;
     featuredPriority?: number | undefined;
     childrenIds?: string[] | undefined;
     metrics?: {
@@ -161,6 +161,7 @@ export declare const categoryItemSchema: z.ZodObject<{
         coverImage?: string | undefined;
     } | undefined;
     order?: number | undefined;
+    isFeatured?: boolean | undefined;
     description?: string | undefined;
     seo?: {
         title?: string | undefined;
@@ -171,7 +172,6 @@ export declare const categoryItemSchema: z.ZodObject<{
     rootId?: string | undefined;
     parentIds?: string[] | undefined;
     isLeaf?: boolean | undefined;
-    isFeatured?: boolean | undefined;
     featuredPriority?: number | undefined;
     childrenIds?: string[] | undefined;
     metrics?: {

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

@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState, useCallback } from "react";
 import { Plus, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
+import { AdminViewCards } from "../../admin/components/AdminViewCards";
 import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
 import { Button, FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, SideDrawer } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -34,6 +36,7 @@ const TYPE_OPTIONS = [
 ];
 export function AdminEventsView({ children, getRowHref, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    const [view, setView] = useState("table");
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
     const { openCreatePanel, openEditPanel, closePanel, isCreateOpen, isEditOpen, editId } = usePanelUrlSync();
     const [searchInput, setSearchInput] = useState(table.get("q") || "");
@@ -95,8 +98,9 @@ export function AdminEventsView({ children, getRowHref, ...props }) {
     });
     const currentPage = table.getNumber("page", 1);
     const totalPages = Math.ceil(total / PAGE_SIZE);
+    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    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); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Event"] }) }), 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", onRowClick: (row) => openEditPanel(row.id) })] }), 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: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })] }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] })), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Event" : "Edit Event", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminEventEditorView, { eventId: editId ?? undefined, onSaved: closePanel, embedded: true })) })] }));
+    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); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Event"] }) }), 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 })), view === "table" ? (_jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No events found", onRowClick: (row) => openEditPanel(row.id) })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No events found", onRowClick: undefined, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), 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: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })] }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] })), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Event" : "Edit Event", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminEventEditorView, { eventId: editId ?? undefined, onSaved: closePanel, embedded: true })) })] }));
 }

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

@@ -6,91 +6,91 @@ export declare const EVENT_FILTER_KEYS: {
     readonly public: readonly ["type", "status", "dateFrom", "dateTo"];
 };
 export declare const EVENT_ADMIN_SORT_OPTIONS: readonly [{
-    readonly value: "title";
+    readonly value: string;
     readonly label: "Title A–Z";
 }, {
-    readonly value: "-title";
+    readonly value: string;
     readonly label: "Title Z–A";
 }, {
-    readonly value: "-startsAt";
+    readonly value: string;
     readonly label: "Starts Latest";
 }, {
-    readonly value: "startsAt";
+    readonly value: string;
     readonly label: "Starts Soonest";
 }, {
-    readonly value: "-endsAt";
+    readonly value: string;
     readonly label: "Ends Latest";
 }, {
-    readonly value: "endsAt";
+    readonly value: string;
     readonly label: "Ends Soonest";
 }, {
     readonly value: "-stats.totalEntries";
     readonly label: "Most Entries";
 }, {
-    readonly value: "-createdAt";
+    readonly value: string;
     readonly label: "Newest First";
 }];
 export declare const EVENT_SELLER_SORT_OPTIONS: readonly [{
-    readonly value: "title";
+    readonly value: string;
     readonly label: "Title A–Z";
 }, {
-    readonly value: "-title";
+    readonly value: string;
     readonly label: "Title Z–A";
 }, {
-    readonly value: "-startsAt";
+    readonly value: string;
     readonly label: "Starts Latest";
 }, {
-    readonly value: "startsAt";
+    readonly value: string;
     readonly label: "Starts Soonest";
 }, {
-    readonly value: "-endsAt";
+    readonly value: string;
     readonly label: "Ends Latest";
 }, {
-    readonly value: "endsAt";
+    readonly value: string;
     readonly label: "Ends Soonest";
 }, {
     readonly value: "-stats.totalEntries";
     readonly label: "Most Entries";
 }, {
-    readonly value: "-createdAt";
+    readonly value: string;
     readonly label: "Newest First";
 }];
 export declare const EVENT_PUBLIC_SORT_OPTIONS: readonly [{
-    readonly value: "startsAt";
+    readonly value: string;
     readonly label: "Starts Soonest";
 }, {
-    readonly value: "-startsAt";
+    readonly value: string;
     readonly label: "Starts Latest";
 }, {
-    readonly value: "title";
+    readonly value: string;
     readonly label: "Title A–Z";
 }, {
     readonly value: "-stats.totalEntries";
     readonly label: "Most Entries";
 }];
 export declare const EVENT_SORT_OPTIONS: readonly [{
-    readonly value: "title";
+    readonly value: string;
     readonly label: "Title A–Z";
 }, {
-    readonly value: "-title";
+    readonly value: string;
     readonly label: "Title Z–A";
 }, {
-    readonly value: "-startsAt";
+    readonly value: string;
     readonly label: "Starts Latest";
 }, {
-    readonly value: "startsAt";
+    readonly value: string;
     readonly label: "Starts Soonest";
 }, {
-    readonly value: "-endsAt";
+    readonly value: string;
     readonly label: "Ends Latest";
 }, {
-    readonly value: "endsAt";
+    readonly value: string;
     readonly label: "Ends Soonest";
 }, {
     readonly value: "-stats.totalEntries";
     readonly label: "Most Entries";
 }, {
-    readonly value: "-createdAt";
+    readonly value: string;
     readonly label: "Newest First";
 }];
 export declare function getEventFilterKeys(variant: EventFilterVariant): readonly string[];

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

@@ -5,26 +5,29 @@ import { FilterFacetSection } from "../../filters/FilterFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
 import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
+import { TABLE_KEYS } from "../../../constants/table-keys";
+import { EVENT_FIELDS } from "../../../constants/field-names";
+import { sortBy } from "../../../constants/sort";
 export const EVENT_FILTER_KEYS = {
-    admin: ["type", "status", "dateFrom", "dateTo"],
-    seller: ["type", "status", "dateFrom", "dateTo"],
-    public: ["type", "status", "dateFrom", "dateTo"],
+    admin: ["type", TABLE_KEYS.STATUS, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO],
+    seller: ["type", TABLE_KEYS.STATUS, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO],
+    public: ["type", TABLE_KEYS.STATUS, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO],
 };
 export const EVENT_ADMIN_SORT_OPTIONS = [
-    { value: "title", label: "Title A–Z" },
-    { value: "-title", label: "Title Z–A" },
-    { value: "-startsAt", label: "Starts Latest" },
-    { value: "startsAt", label: "Starts Soonest" },
-    { value: "-endsAt", label: "Ends Latest" },
-    { value: "endsAt", label: "Ends Soonest" },
+    { value: sortBy(EVENT_FIELDS.TITLE, "ASC"), label: "Title A–Z" },
+    { value: sortBy(EVENT_FIELDS.TITLE), label: "Title Z–A" },
+    { value: sortBy(EVENT_FIELDS.STARTS_AT), label: "Starts Latest" },
+    { value: sortBy(EVENT_FIELDS.STARTS_AT, "ASC"), label: "Starts Soonest" },
+    { value: sortBy(EVENT_FIELDS.ENDS_AT), label: "Ends Latest" },
+    { value: sortBy(EVENT_FIELDS.ENDS_AT, "ASC"), label: "Ends Soonest" },
     { value: "-stats.totalEntries", label: "Most Entries" },
-    { value: "-createdAt", label: "Newest First" },
+    { value: sortBy(EVENT_FIELDS.CREATED_AT), label: "Newest First" },
 ];
 export const EVENT_SELLER_SORT_OPTIONS = EVENT_ADMIN_SORT_OPTIONS;
 export const EVENT_PUBLIC_SORT_OPTIONS = [
-    { value: "startsAt", label: "Starts Soonest" },
-    { value: "-startsAt", label: "Starts Latest" },
-    { value: "title", label: "Title A–Z" },
+    { 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: "-stats.totalEntries", label: "Most Entries" },
 ];
 // Backward-compatible alias.

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

@@ -5,6 +5,7 @@ const STATUS_MAP = {
     active: { label: "Active", color: "bg-green-100 text-green-700" },
     paused: { label: "Paused", color: "bg-yellow-100 text-yellow-700" },
     ended: { label: "Ended", color: "bg-red-100 text-red-600" },
+    cancelled: { label: "Cancelled", color: "bg-red-100 text-red-700" },
 };
 export function EventStatusBadge({ status, className = "", }) {
     const { label, color } = STATUS_MAP[status] ?? STATUS_MAP.draft;