@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -8,8 +8,8 @@ export declare const cartItemMetaSchema: z.ZodObject<{
     attributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
 }, "strip", z.ZodTypeAny, {
     title: string;
-    currency: string;
     price: number;
+    currency: string;
     slug?: string | undefined;
     attributes?: Record<string, string> | undefined;
 }, {
@@ -43,8 +43,8 @@ export declare const cartItemSchema: z.ZodObject<{
         attributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
     }, "strip", z.ZodTypeAny, {
         title: string;
-        currency: string;
         price: number;
+        currency: string;
         slug?: string | undefined;
         attributes?: Record<string, string> | undefined;
     }, {
@@ -61,8 +61,8 @@ export declare const cartItemSchema: z.ZodObject<{
     quantity: number;
     meta?: {
         title: string;
-        currency: string;
         price: number;
+        currency: string;
         slug?: string | undefined;
         attributes?: Record<string, string> | undefined;
     } | undefined;
@@ -80,8 +80,8 @@ export declare const cartItemSchema: z.ZodObject<{
         attributes?: Record<string, string> | undefined;
     } | undefined;
     sessionId?: string | undefined;
-    userId?: string | undefined;
     quantity?: number | undefined;
+    userId?: string | undefined;
     addedAt?: string | undefined;
 }>;
 export declare const cartSummarySchema: z.ZodObject<{
@@ -99,8 +99,8 @@ export declare const cartSummarySchema: z.ZodObject<{
             attributes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
         }, "strip", z.ZodTypeAny, {
             title: string;
-            currency: string;
             price: number;
+            currency: string;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         }, {
@@ -117,8 +117,8 @@ export declare const cartSummarySchema: z.ZodObject<{
         quantity: number;
         meta?: {
             title: string;
-            currency: string;
             price: number;
+            currency: string;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         } | undefined;
@@ -136,8 +136,8 @@ export declare const cartSummarySchema: z.ZodObject<{
             attributes?: Record<string, string> | undefined;
         } | undefined;
         sessionId?: string | undefined;
-        userId?: string | undefined;
         quantity?: number | undefined;
+        userId?: string | undefined;
         addedAt?: string | undefined;
     }>, "many">;
     subtotal: z.ZodNumber;
@@ -150,8 +150,8 @@ export declare const cartSummarySchema: z.ZodObject<{
         quantity: number;
         meta?: {
             title: string;
-            currency: string;
             price: number;
+            currency: string;
             slug?: string | undefined;
             attributes?: Record<string, string> | undefined;
         } | undefined;
@@ -174,8 +174,8 @@ export declare const cartSummarySchema: z.ZodObject<{
             attributes?: Record<string, string> | undefined;
         } | undefined;
         sessionId?: string | undefined;
-        userId?: string | undefined;
         quantity?: number | undefined;
+        userId?: string | undefined;
         addedAt?: string | undefined;
     }[];
     subtotal: number;

package/dist/features/cart/schemas/index.js

@@ -6,7 +6,7 @@ export const cartItemMetaSchema = z.object({
     price: z.number(),
     currency: z.string().default(getDefaultCurrency()),
     slug: z.string().optional(),
-    attributes: z.record(z.string()).optional(),
+    attributes: z.record(z.string(), z.string()).optional(),
 });
 /**
  * Base Zod schema for a cart item.

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

@@ -1,6 +1,6 @@
 export interface CartItemMeta {
     productId: string;
-    sellerId?: string;
+    storeId?: string;
     title: string;
     image?: string;
     price: number;

package/dist/features/cart/utils/pending-ops.d.ts

@@ -0,0 +1,33 @@
+/**
+ * pending-ops
+ *
+ * Tracks cart and wishlist operations that haven't been synced to the server yet.
+ * Written to localStorage so they survive page refreshes.
+ * The sync manager replays these and clears them after a successful push.
+ */
+export type CartOpKind = "add" | "remove";
+export type WishlistOpKind = "add" | "remove";
+export interface CartOp {
+    op: CartOpKind;
+    productId: string;
+    quantity?: number;
+    /** snapshot data to show in UI without hitting the server */
+    productTitle?: string;
+    productImage?: string;
+    price?: number;
+    ts: number;
+}
+export interface WishlistOp {
+    op: WishlistOpKind;
+    itemId: string;
+    type: "product" | "auction" | "preorder" | "category" | "store";
+    title?: string;
+    image?: string;
+    ts: number;
+}
+export declare function getCartOps(): CartOp[];
+export declare function pushCartOp(op: Omit<CartOp, "ts">): void;
+export declare function clearCartOps(): void;
+export declare function getWishlistOps(): WishlistOp[];
+export declare function pushWishlistOp(op: Omit<WishlistOp, "ts">): void;
+export declare function clearWishlistOps(): void;

package/dist/features/cart/utils/pending-ops.js

@@ -0,0 +1,102 @@
+/**
+ * pending-ops
+ *
+ * Tracks cart and wishlist operations that haven't been synced to the server yet.
+ * Written to localStorage so they survive page refreshes.
+ * The sync manager replays these and clears them after a successful push.
+ */
+const APP_ID = () => typeof process !== "undefined" && process.env.NEXT_PUBLIC_APP_ID
+    ? process.env.NEXT_PUBLIC_APP_ID
+    : "letitrip";
+const CART_OPS_KEY = () => `${APP_ID()}_cart_ops`;
+const WL_OPS_KEY = () => `${APP_ID()}_wl_ops`;
+// ---------------------------------------------------------------------------
+// Storage helpers
+// ---------------------------------------------------------------------------
+function read(key) {
+    if (typeof window === "undefined")
+        return [];
+    try {
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return [];
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+}
+function write(key, items) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        localStorage.setItem(key, JSON.stringify(items));
+    }
+    catch {
+        // storage quota exceeded — best effort
+    }
+}
+// ---------------------------------------------------------------------------
+// Cart ops
+// ---------------------------------------------------------------------------
+export function getCartOps() {
+    return read(CART_OPS_KEY());
+}
+export function pushCartOp(op) {
+    const ops = read(CART_OPS_KEY());
+    // Collapse: if an add followed by a remove for the same productId, cancel both
+    if (op.op === "remove") {
+        const withoutProduct = ops.filter((o) => o.productId !== op.productId);
+        if (withoutProduct.length < ops.length) {
+            // There was a pending add — cancelling
+            write(CART_OPS_KEY(), withoutProduct);
+            return;
+        }
+    }
+    // Deduplicate: merge add quantities for the same productId
+    if (op.op === "add") {
+        const existing = ops.find((o) => o.op === "add" && o.productId === op.productId);
+        if (existing) {
+            const merged = ops.map((o) => o.op === "add" && o.productId === op.productId
+                ? { ...o, quantity: Math.min((o.quantity ?? 1) + (op.quantity ?? 1), 99) }
+                : o);
+            write(CART_OPS_KEY(), merged);
+            return;
+        }
+    }
+    write(CART_OPS_KEY(), [...ops, { ...op, ts: Date.now() }]);
+}
+export function clearCartOps() {
+    if (typeof window === "undefined")
+        return;
+    localStorage.removeItem(CART_OPS_KEY());
+}
+// ---------------------------------------------------------------------------
+// Wishlist ops
+// ---------------------------------------------------------------------------
+export function getWishlistOps() {
+    return read(WL_OPS_KEY());
+}
+export function pushWishlistOp(op) {
+    const ops = read(WL_OPS_KEY());
+    // Cancel add+remove pairs for the same (itemId, type)
+    const key = (o) => `${o.itemId}:${o.type}`;
+    if (op.op === "remove") {
+        const withoutItem = ops.filter((o) => key(o) !== key(op));
+        if (withoutItem.length < ops.length) {
+            write(WL_OPS_KEY(), withoutItem);
+            return;
+        }
+    }
+    // Deduplicate adds
+    if (op.op === "add" && ops.some((o) => o.op === "add" && key(o) === key(op))) {
+        return;
+    }
+    write(WL_OPS_KEY(), [...ops, { ...op, ts: Date.now() }]);
+}
+export function clearWishlistOps() {
+    if (typeof window === "undefined")
+        return;
+    localStorage.removeItem(WL_OPS_KEY());
+}

package/dist/features/categories/components/BrandDetailPageView.d.ts

@@ -0,0 +1,4 @@
+export interface BrandDetailPageViewProps {
+    slug: string;
+}
+export declare function BrandDetailPageView({ slug }: BrandDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { categoriesRepository, productRepository } from "../../../repositories";
+import { ROUTES } from "../../../next";
+import { Container, Main, Section } from "../../../ui";
+import { BrandDetailTabs } from "./BrandDetailTabs";
+export async function BrandDetailPageView({ slug }) {
+    const brand = await categoriesRepository
+        .getCategoryBySlug(slug)
+        .catch(() => undefined);
+    const brandName = brand?.name;
+    const [productsResult, auctionsResult, preOrdersResult] = await Promise.all([
+        brandName
+            ? productRepository
+                .list({
+                filters: `status==published,brand==${brandName},isAuction==false,isPreOrder==false`,
+                sorts: "-createdAt",
+                page: 1,
+                pageSize: 24,
+            })
+                .catch(() => null)
+            : Promise.resolve(null),
+        brandName
+            ? productRepository
+                .list({
+                filters: `status==published,brand==${brandName},isAuction==true`,
+                sorts: "auctionEndDate",
+                page: 1,
+                pageSize: 1,
+            })
+                .catch(() => null)
+            : Promise.resolve(null),
+        brandName
+            ? productRepository
+                .list({
+                filters: `status==published,brand==${brandName},isPreOrder==true`,
+                sorts: "-createdAt",
+                page: 1,
+                pageSize: 1,
+            })
+                .catch(() => null)
+            : Promise.resolve(null),
+    ]);
+    const coverImage = brand?.display?.coverImage;
+    const hasCover = Boolean(coverImage);
+    const brandColor = brand?.display?.color || "#6366f1";
+    const counts = {
+        products: productsResult?.total ?? brand?.metrics?.productCount ?? 0,
+        auctions: auctionsResult?.total ?? brand?.metrics?.auctionCount ?? 0,
+        preOrders: preOrdersResult?.total ?? 0,
+    };
+    const totalItems = counts.products + counts.auctions + counts.preOrders;
+    return (_jsxs(Main, { children: [_jsxs("section", { className: `relative overflow-hidden ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-zinc-50 dark:bg-zinc-900"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-center bg-cover", style: { backgroundImage: `url(${coverImage})` } }), _jsx("div", { className: "absolute inset-0 bg-black/55" })] })), !hasCover && (_jsx("div", { className: "absolute inset-0 opacity-10", style: { backgroundColor: brandColor } })), _jsxs("div", { className: `relative z-10 max-w-7xl mx-auto px-4 ${hasCover ? "py-12" : "py-8"}`, children: [_jsxs("nav", { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 hover:text-primary-600 transition-colors", children: "Home" }), _jsx("span", { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS ?? "/brands"), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 hover:text-primary-600 transition-colors", children: "Brands" }), _jsx("span", { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx("span", { className: hasCover ? "text-white font-medium" : "text-zinc-900 dark:text-zinc-100 font-medium", children: brand?.name ?? slug })] }), _jsxs("div", { className: "flex items-center gap-4 mb-3", children: [brand?.display?.icon && (_jsx("span", { className: `text-5xl leading-none ${!hasCover ? "" : ""}`, children: brand.display.icon })), _jsxs("div", { children: [_jsx("h1", { className: `text-3xl md:text-4xl font-bold ${hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-50"}`, children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx("p", { className: `text-base max-w-2xl mt-1 ${hasCover ? "text-white/80" : "text-zinc-600 dark:text-zinc-400"}`, children: brand.description }))] })] }), _jsxs("div", { className: "flex flex-wrap gap-2 mt-3", children: [counts.products > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), counts.auctions > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"}`, children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), counts.preOrders > 0 && (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hasCover ? "bg-white/20 text-white backdrop-blur-sm" : "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400"}`, children: [counts.preOrders.toLocaleString(), " ", counts.preOrders === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx("span", { className: `text-sm ${hasCover ? "text-white/60" : "text-zinc-400"}`, children: "No items listed yet" }))] })] })] }), _jsx(Section, { className: "py-6", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, counts: counts })) : (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "Brand not found." })) }) })] }));
+}

package/dist/features/categories/components/BrandDetailTabs.d.ts

@@ -0,0 +1,10 @@
+export interface BrandDetailTabsProps {
+    brandName: string;
+    initialProductsData?: any;
+    counts?: {
+        products?: number;
+        auctions?: number;
+        preOrders?: number;
+    };
+}
+export declare function BrandDetailTabs({ brandName, initialProductsData, counts }: BrandDetailTabsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CategoryProductsListing } from "./CategoryProductsListing";
+import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
+import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
+function tabLabel(label, count) {
+    if (!count)
+        return label;
+    return `${label} (${count.toLocaleString()})`;
+}
+export function BrandDetailTabs({ brandName, initialProductsData, counts }) {
+    const [activeTab, setActiveTab] = useState("products");
+    const TABS = [
+        { id: "products", label: tabLabel("Products", counts?.products) },
+        { id: "auctions", label: tabLabel("Auctions", counts?.auctions) },
+        { id: "pre-orders", label: tabLabel("Pre-Orders", counts?.preOrders) },
+    ];
+    return (_jsxs("div", { children: [_jsx("div", { className: "flex border-b border-zinc-200 dark:border-slate-700 mb-6", children: TABS.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `px-5 py-2.5 text-sm font-medium transition-colors -mb-px border-b-2 ${activeTab === t.id
+                        ? "border-primary text-primary"
+                        : "border-transparent text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"}`, children: t.label }, t.id))) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: "", brandName: brandName, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { brandName: brandName })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { brandName: brandName }))] }));
+}

package/dist/features/categories/components/CategoriesIndexListing.d.ts

@@ -1,5 +1,7 @@
 import type { CategoryItem } from "../types";
 export interface CategoriesIndexListingProps {
     initialData?: CategoryItem[];
+    /** When true, filters to brands only (for the standalone /brands page) */
+    brandsOnly?: boolean;
 }
-export declare function CategoriesIndexListing({ initialData }: CategoriesIndexListingProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoriesIndexListing({ initialData: _, brandsOnly }: CategoriesIndexListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,44 +1,123 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
-import { useCategoriesList } from "../hooks/useCategories";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { X } from "lucide-react";
+import { useCategoriesFiltered } from "../hooks/useCategories";
 import { ROUTES } from "../../../next";
-import { Container, Grid, Input, Section, SlottedListingView, SortDropdown, Stack, Text, } from "../../../ui";
+import { Pagination, ListingToolbar } from "../../../ui";
 import { CategoryCard } from "./CategoryGrid";
-import { Pagination } from "../../../ui";
+import { CategoryFilters } from "./CategoryFilters";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
 const PAGE_SIZE = 24;
-export function CategoriesIndexListing({ initialData }) {
-    const { categories, isLoading } = useCategoriesList({ initialData });
-    const [search, setSearch] = useState("");
-    const [sort, setSort] = useState("name");
-    const [page, setPage] = useState(1);
-    const filtered = useMemo(() => {
-        let result = [...categories];
-        const q = search.trim().toLowerCase();
-        if (q) {
-            result = result.filter((c) => c.name.toLowerCase().includes(q) ||
-                (c.description ?? "").toLowerCase().includes(q));
-        }
-        result.sort((a, b) => {
-            if (sort === "-productCount") {
-                return (b.productCount ?? 0) - (a.productCount ?? 0);
-            }
-            if (sort === "-name") {
-                return b.name.localeCompare(a.name);
-            }
-            return a.name.localeCompare(b.name);
-        });
-        return result;
-    }, [categories, search, sort]);
-    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
-    const paginated = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
-    const handleSearch = (val) => {
-        setSearch(val);
-        setPage(1);
+const FILTER_KEYS = ["isFeatured", "isBrand", "rootOnly", "tier", "minItemCount", "maxItemCount"];
+const SORT_OPTIONS = [
+    { value: "name", label: "Name A–Z" },
+    { value: "-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 [filterOpen, setFilterOpen] = useState(false);
+    const sort = table.get("sort") || "name";
+    const page = table.getNumber("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(() => ({
+        get: (key) => pendingFilters[key] ?? "",
+        getNumber: (key, fallback = 0) => {
+            const v = pendingFilters[key];
+            if (!v)
+                return fallback;
+            const n = Number(v);
+            return isNaN(n) ? fallback : n;
+        },
+        set: (key, value) => setPendingFilters((p) => ({ ...p, [key]: value })),
+        setMany: (updates) => setPendingFilters((p) => ({ ...p, ...updates })),
+        clear: (keys) => {
+            const ks = keys ?? FILTER_KEYS;
+            setPendingFilters((p) => ({
+                ...p,
+                ...Object.fromEntries(ks.map((k) => [k, ""])),
+            }));
+        },
+        setPage: (_) => { },
+        setPageSize: (_) => { },
+        setSort: (_) => { },
+        buildSieveParams: () => "",
+        buildSearchParams: () => "",
+        params: new URLSearchParams(),
+    }), [pendingFilters]);
+    const openFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of FILTER_KEYS)
+            updates[k] = pendingFilters[k] ?? "";
+        table.setMany(updates);
+        setFilterOpen(false);
+    }, [pendingFilters, table]);
+    const clearFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
+    }, []);
+    const resetAll = useCallback(() => {
+        const updates = { q: "", sort: "" };
+        for (const k of FILTER_KEYS)
+            updates[k] = "";
+        table.setMany(updates);
+        setSearchInput("");
+    }, [table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") ||
+        table.get("sort") !== "name" ||
+        activeFilterCount > 0;
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const clearSearch = () => {
+        setSearchInput("");
+        table.set("q", "");
+        table.setPage(1);
     };
-    return (_jsx(Section, { children: _jsx(Container, { size: "xl", children: _jsx(SlottedListingView, { portal: "public", manageSearch: false, manageSort: false, inlineToolbar: true, renderSearch: () => (_jsx(Input, { value: search, onChange: (e) => handleSearch(e.target.value), placeholder: "Search categories...", className: "max-w-sm" })), renderSort: () => (_jsx(SortDropdown, { value: sort, onChange: (v) => { setSort(v); setPage(1); }, options: [
-                        { value: "name", label: "Name A–Z" },
-                        { value: "-name", label: "Name Z–A" },
-                        { value: "-productCount", label: "Most Products" },
-                    ] })), renderTable: () => paginated.length === 0 && !isLoading ? (_jsxs(Stack, { align: "center", gap: "3", className: "justify-center py-24 text-center", children: [_jsx(Text, { className: "text-xl font-medium text-zinc-900 dark:text-zinc-50", children: "No categories found" }), search && (_jsxs(Text, { className: "text-sm text-zinc-500", children: ["No results for \u201C", search, "\u201D"] }))] })) : (_jsx(Grid, { cols: 4, gap: "md", children: paginated.map((category) => (_jsx(CategoryCard, { category: category, href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug)) }, category.id))) })), renderPagination: () => totalPages > 1 ? (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: setPage })) : null, total: filtered.length, isLoading: isLoading }) }) }));
+    // Tab state — "all" | "categories" | "brands" (not used when brandsOnly=true)
+    const activeTab = brandsOnly ? "brands" : (table.get("tab") || "all");
+    const isBrandParam = brandsOnly ? true :
+        activeTab === "brands" ? true :
+            activeTab === "categories" ? false :
+                undefined;
+    const switchTab = (key) => {
+        table.set("tab", key);
+        table.setPage(1);
+    };
+    const { categories, total, totalPages, isLoading } = useCategoriesFiltered({
+        q: table.get("q") || undefined,
+        isFeatured: table.get("isFeatured") === "true" || undefined,
+        isBrand: isBrandParam,
+        rootOnly: table.get("rootOnly") === "true" || undefined,
+        tier: table.get("tier") ? Number(table.get("tier")) : undefined,
+        minProductCount: table.get("minItemCount") ? Number(table.get("minItemCount")) : undefined,
+        maxProductCount: table.get("maxItemCount") ? Number(table.get("maxItemCount")) : undefined,
+        sort,
+        page,
+        pageSize: PAGE_SIZE,
+    });
+    const activeSearch = table.get("q") || "";
+    const TABS = [
+        { key: "all", label: "All" },
+        { key: "categories", label: "Categories" },
+        { key: "brands", label: "Brands" },
+    ];
+    return (_jsxs("div", { className: "min-h-screen", children: [!brandsOnly && (_jsx("div", { className: "flex gap-1 border-b border-zinc-200 dark:border-slate-700 mb-2", children: TABS.map((tab) => (_jsx("button", { type: "button", onClick: () => switchTab(tab.key), className: [
+                        "px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px",
+                        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); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: 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})` : ""] }) })] })] }))] }));
 }

package/dist/features/categories/components/CategoriesIndexPageView.d.ts

@@ -1 +1,6 @@
-export declare function CategoriesIndexPageView(): Promise<import("react/jsx-runtime").JSX.Element>;
+type SearchParams = Record<string, string | string[]>;
+export interface CategoriesIndexPageViewProps {
+    searchParams?: SearchParams;
+}
+export declare function CategoriesIndexPageView({ searchParams }: CategoriesIndexPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -3,9 +3,48 @@ import { categoriesRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { CategoriesIndexListing } from "./CategoriesIndexListing";
-export async function CategoriesIndexPageView() {
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildCategoryFilters(params) {
+    const parts = [];
+    const isFeatured = sp(params, "isFeatured");
+    if (isFeatured === "true")
+        parts.push("isFeatured==true");
+    const isBrand = sp(params, "isBrand");
+    if (isBrand === "true")
+        parts.push("isBrand==true");
+    const rootOnly = sp(params, "rootOnly");
+    if (rootOnly === "true")
+        parts.push("tier==0");
+    const minItemCount = sp(params, "minItemCount");
+    const maxItemCount = sp(params, "maxItemCount");
+    if (minItemCount)
+        parts.push(`metrics.totalItemCount>=${minItemCount}`);
+    if (maxItemCount)
+        parts.push(`metrics.totalItemCount<=${maxItemCount}`);
+    const tier = sp(params, "tier");
+    if (tier) {
+        const values = tier.split("|").filter(Boolean);
+        if (values.length === 1)
+            parts.push(`tier==${values[0]}`);
+        else if (values.length > 1)
+            parts.push(`tier==${values.join("|")}`);
+    }
+    return parts.join(",");
+}
+export async function CategoriesIndexPageView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "name";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const filters = buildCategoryFilters(searchParams);
     const result = await categoriesRepository
-        .list({ page: 1, pageSize: 200, sorts: "name" })
+        .list({
+        page,
+        pageSize: 200,
+        sorts: sort,
+        ...(filters ? { filters } : {}),
+    })
         .catch(() => null);
     const initialData = (result?.items ?? []);
     return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Categories" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(CategoriesIndexListing, { initialData: initialData }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));