@mohasinac/appkit 2.3.1 → 2.3.2

package/dist/features/promotions/components/CouponsIndexListing.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Search, SlidersHorizontal, X } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { Pagination, SortDropdown, Div, Text, Heading } from "../../../ui";
+import { usePromotions } from "../hooks/usePromotions";
+import { CouponCard } from "./CouponCard";
+const COUPON_SORT_OPTIONS = [
+    { value: "name", label: "Name A–Z" },
+    { value: "-name", label: "Name Z–A" },
+    { value: "-validity.endDate", label: "Expiring Soon" },
+    { value: "-createdAt", label: "Newest First" },
+    { value: "createdAt", label: "Oldest First" },
+];
+const COUPON_TYPES = [
+    { value: "percentage", label: "% Off" },
+    { value: "fixed", label: "Fixed Amount" },
+    { value: "free_shipping", label: "Free Shipping" },
+    { value: "buy_x_get_y", label: "Buy X Get Y" },
+];
+export function CouponsIndexListing({ initialCoupons, storeSlug, sellerId, }) {
+    const table = useUrlTable({ defaults: { pageSize: "12", sort: "-createdAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [copiedCode, setCopiedCode] = useState(null);
+    // Build Sieve filter string
+    const buildFilters = () => {
+        const parts = ["validity.isActive==true"];
+        const typeFilter = table.get("type");
+        if (typeFilter)
+            parts.push(`type==${typeFilter}`);
+        const dateFrom = table.get("dateFrom");
+        if (dateFrom)
+            parts.push(`validity.startDate>=${dateFrom}`);
+        const dateTo = table.get("dateTo");
+        if (dateTo)
+            parts.push(`validity.endDate<=${dateTo}`);
+        if (sellerId)
+            parts.push(`sellerId==${sellerId}`);
+        return parts.join(",");
+    };
+    const { promotions: coupons, total, totalPages, isLoading } = usePromotions({
+        page: table.getNumber("page", 1),
+        pageSize: table.getNumber("pageSize", 12),
+        sort: table.get("sort") || "-createdAt",
+        filters: buildFilters(),
+    });
+    // Use initial data on first load if available and no search/filter active
+    const displayCoupons = !isLoading && coupons.length > 0
+        ? coupons
+        : !isLoading && initialCoupons && !table.get("q") && !table.get("type")
+            ? initialCoupons
+            : coupons;
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter")
+            commitSearch();
+    };
+    const handleCopy = useCallback((code) => {
+        navigator.clipboard.writeText(code).catch(() => { });
+        setCopiedCode(code);
+        setTimeout(() => setCopiedCode(null), 2000);
+    }, []);
+    const activeType = table.get("type");
+    const hasActiveFilters = !!activeType || !!table.get("dateFrom") || !!table.get("dateTo");
+    const clearFilters = () => {
+        table.set("type", "");
+        table.set("dateFrom", "");
+        table.set("dateTo", "");
+        table.setPage(1);
+    };
+    return (_jsxs("div", { className: "min-h-[40vh]", children: [_jsxs("div", { className: "sticky top-0 z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: [_jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: `flex shrink-0 items-center gap-2 rounded-lg border px-3.5 py-2 text-sm font-medium transition-colors ${hasActiveFilters
+                                    ? "border-primary bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300"
+                                    : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsxs("span", { className: "hidden sm:inline", children: ["Filters", hasActiveFilters ? " •" : ""] })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: handleKeyDown, placeholder: "Search by name or description\u2026", className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), searchInput && (_jsx("button", { type: "button", onClick: () => { setSearchInput(""); table.set("q", ""); table.setPage(1); }, className: "p-2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300", "aria-label": "Clear search", children: _jsx(X, { className: "h-3.5 w-3.5" }) })), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: table.get("sort") || "-createdAt", onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: COUPON_SORT_OPTIONS })] })] }), hasActiveFilters && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2", children: [activeType && (_jsxs("span", { className: "flex items-center gap-1 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-xs font-medium px-2.5 py-1", children: [COUPON_TYPES.find((t) => t.value === activeType)?.label ?? activeType, _jsx("button", { type: "button", onClick: () => { table.set("type", ""); table.setPage(1); }, "aria-label": "Remove type filter", children: _jsx(X, { className: "h-3 w-3" }) })] })), table.get("dateFrom") && (_jsxs("span", { className: "flex items-center gap-1 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-xs font-medium px-2.5 py-1", children: ["From: ", table.get("dateFrom"), _jsx("button", { type: "button", onClick: () => { table.set("dateFrom", ""); table.setPage(1); }, "aria-label": "Remove from-date filter", children: _jsx(X, { className: "h-3 w-3" }) })] })), table.get("dateTo") && (_jsxs("span", { className: "flex items-center gap-1 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-xs font-medium px-2.5 py-1", children: ["To: ", table.get("dateTo"), _jsx("button", { type: "button", onClick: () => { table.set("dateTo", ""); table.setPage(1); }, "aria-label": "Remove to-date filter", children: _jsx(X, { className: "h-3 w-3" }) })] })), _jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 underline", children: "Clear all" })] }))] }), _jsxs("div", { className: "py-6 px-4", children: [isLoading ? (_jsx("div", { className: "grid gap-3 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border-2 border-zinc-100 dark:border-slate-700 p-4 animate-pulse space-y-3", children: [_jsx("div", { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] }, i))) })) : displayCoupons.length === 0 ? (_jsx("div", { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-500", children: "No coupons match your search." }) })) : (_jsx("div", { className: "grid gap-3 md:grid-cols-2 lg:grid-cols-3", children: displayCoupons.map((coupon) => (_jsx(CouponCard, { coupon: coupon, labels: {
+                                copy: copiedCode === coupon.code ? "Copied!" : "Copy",
+                                copied: "Copied!",
+                                expires: "Expires",
+                                minOrder: "Min. order",
+                                off: "OFF",
+                                freeShipping: "Free Shipping",
+                            }, onCopy: handleCopy }, coupon.id))) })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: table.getNumber("page", 1), totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), !isLoading && total > 0 && (_jsx(Div, { className: "mt-4 text-center", children: _jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: [total, " coupon", total !== 1 ? "s" : "", " available"] }) }))] }), 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: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _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" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-6", children: [_jsxs("div", { children: [_jsx(Heading, { level: 6, className: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-3", children: "Discount Type" }), _jsxs("div", { className: "space-y-2", children: [COUPON_TYPES.map((t) => (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx("input", { type: "radio", name: "coupon-type", value: t.value, checked: table.get("type") === t.value, onChange: () => { table.set("type", t.value); table.setPage(1); }, className: "accent-primary" }), t.label] }, t.value))), table.get("type") && (_jsx("button", { type: "button", onClick: () => { table.set("type", ""); table.setPage(1); }, className: "text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 underline", children: "Clear type" }))] })] }), _jsxs("div", { children: [_jsx(Heading, { level: 6, className: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-3", children: "Valid Date Range" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mb-1", children: "From date" }), _jsx("input", { type: "date", value: table.get("dateFrom") || "", onChange: (e) => { table.set("dateFrom", e.target.value); table.setPage(1); }, className: "w-full rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mb-1", children: "To date" }), _jsx("input", { type: "date", value: table.get("dateTo") || "", onChange: (e) => { table.set("dateTo", e.target.value); table.setPage(1); }, className: "w-full rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-primary" })] })] })] })] }), _jsxs("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5 flex gap-2", children: [_jsx("button", { type: "button", onClick: clearFilters, className: "flex-1 rounded-lg border border-zinc-300 dark:border-slate-600 py-2.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: "Clear all" }), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), className: "flex-1 rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply" })] })] })] }))] }));
+}

package/dist/features/promotions/components/PromotionsView.d.ts

@@ -9,12 +9,20 @@ export interface PromotionProductItem {
 export interface PromotionsViewProductSectionProps {
     title: string;
     subtitle?: string;
-    /** Render the product grid — use your app's ProductGrid/ProductCard here */
     renderProducts: () => React.ReactNode;
-    /** If false/undefined, the section is hidden */
     hasProducts?: boolean;
 }
 export declare function PromotionsViewProductSection({ title, subtitle, renderProducts, hasProducts, }: PromotionsViewProductSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export interface PromotionsHeroProps {
+    labels: {
+        exclusiveOffersBadge: string;
+        title: string;
+        subtitle: string;
+    };
+    heroBannerClass?: string;
+}
+/** Slim hero banner for the promotions page — tabs + content live in the page. */
+export declare function PromotionsHero({ labels, heroBannerClass, }: PromotionsHeroProps): import("react/jsx-runtime").JSX.Element;
 export interface PromotionsViewProps {
     labels: {
         exclusiveOffersBadge: string;
@@ -32,12 +40,10 @@ export interface PromotionsViewProps {
     };
     hasContent: boolean;
     heroBannerClass?: string;
-    /** Render the coupon grid */
     renderCoupons?: () => React.ReactNode;
     couponsCount?: number;
-    /** Render the promoted products section */
     renderDealsSection?: () => React.ReactNode;
-    /** Render the featured products section */
     renderFeaturedSection?: () => React.ReactNode;
 }
+/** @deprecated Use PromotionsHero + per-tab content in your page instead. */
 export declare function PromotionsView({ labels, hasContent, heroBannerClass, renderCoupons, couponsCount, renderDealsSection, renderFeaturedSection, }: PromotionsViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/promotions/components/PromotionsView.js

@@ -5,6 +5,11 @@ export function PromotionsViewProductSection({ title, subtitle, renderProducts,
         return null;
     return (_jsxs(Section, { children: [_jsxs(Div, { className: "mb-6", children: [_jsx(Heading, { level: 2, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", children: subtitle }))] }), renderProducts()] }));
 }
+/** Slim hero banner for the promotions page — tabs + content live in the page. */
+export function PromotionsHero({ labels, heroBannerClass = "bg-gradient-to-br from-rose-500 to-orange-500", }) {
+    return (_jsx(Div, { className: `${heroBannerClass} text-white py-14`, children: _jsxs(Div, { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [_jsxs(Text, { className: "text-white font-medium mb-2 uppercase tracking-widest text-sm", children: ["\uD83C\uDF89 ", labels.exclusiveOffersBadge] }), _jsx(Heading, { level: 1, variant: "none", className: "text-white mb-4", children: labels.title }), _jsx(Text, { variant: "none", className: "text-lg text-white/90 max-w-2xl mx-auto", children: labels.subtitle })] }) }));
+}
+/** @deprecated Use PromotionsHero + per-tab content in your page instead. */
 export function PromotionsView({ labels, hasContent, heroBannerClass = "bg-gradient-to-br from-rose-500 to-orange-500", renderCoupons, couponsCount = 0, renderDealsSection, renderFeaturedSection, }) {
-    return (_jsxs(Div, { className: "min-h-screen bg-white dark:bg-slate-900", children: [_jsx(Div, { className: `${heroBannerClass} text-white py-16`, children: _jsxs(Div, { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [_jsxs(Text, { className: "text-white font-medium mb-2 uppercase tracking-widest text-sm", children: ["\uD83C\uDF89 ", labels.exclusiveOffersBadge] }), _jsx(Heading, { level: 1, variant: "none", className: "text-white mb-4", children: labels.title }), _jsx(Text, { variant: "none", className: "text-lg text-white/90 max-w-2xl mx-auto", children: labels.subtitle })] }) }), _jsxs(Div, { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12", children: [!hasContent && (_jsxs(Div, { className: "text-center py-16", children: [_jsx(Heading, { level: 2, className: "mb-2", children: labels.emptyDeals }), _jsx(Text, { variant: "secondary", children: labels.checkBack })] })), hasContent && (_jsxs(Div, { className: "space-y-12", children: [_jsxs(Section, { children: [_jsxs(Div, { className: "mb-6", children: [_jsx(Heading, { level: 2, children: labels.couponsTitle }), couponsCount > 0 && (_jsx(Text, { variant: "secondary", className: "mt-1", children: labels.couponsSubtitle }))] }), couponsCount > 0 ? (renderCoupons?.()) : (_jsx(Text, { variant: "secondary", size: "sm", children: labels.emptyCoupons }))] }), renderDealsSection?.(), renderFeaturedSection?.()] }))] })] }));
+    return (_jsxs(Div, { className: "min-h-screen bg-white dark:bg-slate-900", children: [_jsx(PromotionsHero, { labels: labels, heroBannerClass: heroBannerClass }), _jsxs(Div, { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12", children: [!hasContent && (_jsxs(Div, { className: "text-center py-16", children: [_jsx(Heading, { level: 2, className: "mb-2", children: labels.emptyDeals }), _jsx(Text, { variant: "secondary", children: labels.checkBack })] })), hasContent && (_jsxs(Div, { className: "space-y-12", children: [renderCoupons && (_jsxs(Section, { children: [_jsxs(Div, { className: "mb-6", children: [_jsx(Heading, { level: 2, children: labels.couponsTitle }), couponsCount > 0 && (_jsx(Text, { variant: "secondary", className: "mt-1", children: labels.couponsSubtitle }))] }), couponsCount > 0 ? (renderCoupons()) : (_jsx(Text, { variant: "secondary", size: "sm", children: labels.emptyCoupons }))] })), renderDealsSection?.(), renderFeaturedSection?.()] }))] })] }));
 }

package/dist/features/promotions/components/index.d.ts

@@ -1,3 +1,5 @@
 export { CouponCard } from "./CouponCard";
-export { PromotionsView, PromotionsViewProductSection } from "./PromotionsView";
-export type { PromotionsViewProps, PromotionsViewProductSectionProps, PromotionProductItem, } from "./PromotionsView";
+export { CouponsIndexListing } from "./CouponsIndexListing";
+export type { CouponsIndexListingProps } from "./CouponsIndexListing";
+export { PromotionsView, PromotionsViewProductSection, PromotionsHero, } from "./PromotionsView";
+export type { PromotionsViewProps, PromotionsViewProductSectionProps, PromotionProductItem, PromotionsHeroProps, } from "./PromotionsView";

package/dist/features/promotions/components/index.js

@@ -1,2 +1,3 @@
 export { CouponCard } from "./CouponCard";
-export { PromotionsView, PromotionsViewProductSection } from "./PromotionsView";
+export { CouponsIndexListing } from "./CouponsIndexListing";
+export { PromotionsView, PromotionsViewProductSection, PromotionsHero, } from "./PromotionsView";

package/dist/features/reviews/components/ReviewDetailPageView.d.ts

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

package/dist/features/reviews/components/ReviewDetailPageView.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { reviewRepository, storeRepository } from "../../../repositories";
+import { Container, Main, Section } from "../../../ui";
+import { ROUTES } from "../../../next";
+import { ReviewDetailShell } from "./ReviewDetailShell";
+export async function ReviewDetailPageView({ id }) {
+    const review = await reviewRepository.findById(id).catch(() => null);
+    // Resolve store slug from sellerId so the shell can link to the store page
+    const storeSlug = review?.sellerId
+        ? await storeRepository
+            .findAll({ filters: `ownerId==${review.sellerId}`, pageSize: 1 })
+            .then((r) => r?.items?.[0]?.storeSlug ?? null)
+            .catch(() => null)
+        : null;
+    if (!review || review.status !== "approved") {
+        return (_jsx(Main, { children: _jsx(Section, { className: "py-24", children: _jsx(Container, { size: "sm", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-5xl mb-4", "aria-hidden": "true", children: "\uD83D\uDD0D" }), _jsx("h1", { className: "text-2xl font-bold text-neutral-900 dark:text-white mb-2", children: "Review not found" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-zinc-400 mb-6", children: "This review may have been removed or is no longer available." }), _jsx(Link, { href: String(ROUTES.PUBLIC.REVIEWS), className: "inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-600 transition-colors", children: "\u2190 Back to Reviews" })] }) }) }) }));
+    }
+    return (_jsxs(Main, { children: [_jsx("div", { className: "border-b border-neutral-100 dark:border-zinc-800 bg-neutral-50 dark:bg-zinc-950 py-2.5 px-4", children: _jsxs("nav", { className: "mx-auto max-w-3xl flex items-center gap-1.5 text-xs text-neutral-400 dark:text-zinc-500", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary transition-colors", children: "Home" }), _jsx("span", { children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.REVIEWS), className: "hover:text-primary transition-colors", children: "Reviews" }), _jsx("span", { children: "/" }), _jsx("span", { className: "text-neutral-700 dark:text-zinc-300 truncate max-w-[200px]", children: review.title ?? review.id })] }) }), _jsx(ReviewDetailShell, { review: review, storeHref: storeSlug ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)) : null })] }));
+}

package/dist/features/reviews/components/ReviewDetailShell.d.ts

@@ -0,0 +1,7 @@
+import type { Review } from "../types";
+interface ReviewDetailShellProps {
+    review: Review;
+    storeHref?: string | null;
+}
+export declare function ReviewDetailShell({ review, storeHref }: ReviewDetailShellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/reviews/components/ReviewDetailShell.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import { StarRating } from "../../../ui";
+import { RichText } from "../../../ui";
+import { maskName } from "../../../security";
+import { getDefaultLocale } from "../../../core/baseline-resolver";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { ROUTES } from "../../../next";
+import { apiClient } from "../../../http";
+import { REVIEW_ENDPOINTS } from "../../../constants/api-endpoints";
+export function ReviewDetailShell({ review, storeHref }) {
+    const displayName = maskName(review.userName);
+    const initials = displayName.charAt(0).toUpperCase();
+    const date = review.createdAt
+        ? new Date(review.createdAt).toLocaleDateString(getDefaultLocale(), {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+        })
+        : "";
+    // ── Lightbox ────────────────────────────────────────────────────────────────
+    const images = review.images ?? [];
+    const [lightboxIdx, setLightboxIdx] = useState(null);
+    const closeLightbox = useCallback(() => setLightboxIdx(null), []);
+    const prevImage = useCallback(() => setLightboxIdx((i) => (i === null ? null : (i - 1 + images.length) % images.length)), [images.length]);
+    const nextImage = useCallback(() => setLightboxIdx((i) => (i === null ? null : (i + 1) % images.length)), [images.length]);
+    useEffect(() => {
+        if (lightboxIdx === null)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                closeLightbox();
+            if (e.key === "ArrowLeft")
+                prevImage();
+            if (e.key === "ArrowRight")
+                nextImage();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [lightboxIdx, closeLightbox, prevImage, nextImage]);
+    // ── Helpful vote ────────────────────────────────────────────────────────────
+    const storageKey = `review_voted_${review.id}`;
+    const [helpfulCount, setHelpfulCount] = useState(review.helpfulCount ?? 0);
+    const [voted, setVoted] = useState(false);
+    const [voting, setVoting] = useState(false);
+    useEffect(() => {
+        setVoted(localStorage.getItem(storageKey) === "1");
+    }, [storageKey]);
+    const handleVote = async () => {
+        if (voted || voting)
+            return;
+        setVoting(true);
+        try {
+            await apiClient.post(`${REVIEW_ENDPOINTS.LIST}/${review.id}/vote`, {});
+            setHelpfulCount((c) => c + 1);
+            setVoted(true);
+            localStorage.setItem(storageKey, "1");
+        }
+        catch {
+            // silently fail
+        }
+        finally {
+            setVoting(false);
+        }
+    };
+    // ── Links ───────────────────────────────────────────────────────────────────
+    const productHref = review.productId
+        ? String(ROUTES.PUBLIC.PRODUCT_DETAIL(review.productId))
+        : null;
+    const sellerHref = storeHref ?? null;
+    const reviewerHref = String(ROUTES.PUBLIC.PROFILE(review.userId));
+    const currentImage = lightboxIdx !== null ? images[lightboxIdx] : null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-b border-neutral-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 pb-8 pt-10", children: _jsxs("div", { className: "mx-auto max-w-3xl px-4", children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx(StarRating, { value: review.rating, size: "lg", readOnly: true }), _jsxs("span", { className: "text-2xl font-bold text-neutral-900 dark:text-white", children: [review.rating, ".0"] }), review.verified && (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: "\u2713 Verified Purchase" })), review.featured && (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400", children: "\u2605 Featured" }))] }), review.title && (_jsx("h1", { className: "text-2xl font-bold text-neutral-900 dark:text-white mb-4 leading-snug", children: review.title })), _jsxs("div", { className: "flex items-center gap-3", children: [review.userAvatar ? (_jsx("div", { role: "img", "aria-label": displayName, className: "h-11 w-11 flex-shrink-0 rounded-full bg-center bg-cover ring-2 ring-white dark:ring-zinc-800", style: { backgroundImage: `url(${review.userAvatar})` } })) : (_jsx("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full bg-primary/10 text-base font-bold text-primary ring-2 ring-white dark:ring-zinc-800", children: initials })), _jsxs("div", { className: "min-w-0", children: [_jsx(Link, { href: reviewerHref, className: "text-sm font-semibold text-neutral-900 dark:text-white hover:text-primary transition-colors", children: displayName }), date && (_jsx("p", { className: "text-xs text-neutral-400 dark:text-zinc-500 mt-0.5", children: date }))] })] })] }) }), _jsxs("div", { className: "mx-auto max-w-3xl px-4 py-8 space-y-8", children: [review.comment && (_jsx("section", { children: _jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-neutral dark:prose-invert max-w-none prose-p:leading-relaxed prose-headings:font-semibold prose-img:rounded-lg prose-a:text-primary", className: "text-neutral-700 dark:text-zinc-300" }) })), images.length > 0 && (_jsxs("section", { children: [_jsxs("h2", { className: "text-sm font-semibold uppercase tracking-wide text-neutral-400 dark:text-zinc-500 mb-3", children: ["Photos (", images.length, ")"] }), _jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2", children: images.map((img, i) => (_jsxs("button", { type: "button", onClick: () => setLightboxIdx(i), "aria-label": `View photo ${i + 1}`, className: "group relative aspect-square overflow-hidden rounded-xl border border-neutral-200 dark:border-zinc-700 bg-neutral-100 dark:bg-zinc-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", children: [_jsx("div", { className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${img.thumbnailUrl ?? img.url})` } }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30", children: _jsx("span", { className: "text-white text-xl", children: "\uD83D\uDD0D" }) })] }, i))) })] })), review.video && (_jsxs("section", { children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-neutral-400 dark:text-zinc-500 mb-3", children: "Video" }), _jsx("div", { className: "overflow-hidden rounded-xl border border-neutral-200 dark:border-zinc-700 bg-black aspect-video", children: _jsx("video", { src: review.video.url, poster: review.video.thumbnailUrl, controls: true, className: "h-full w-full", preload: "metadata" }) })] })), _jsxs("section", { className: "flex items-center gap-4 py-4 border-t border-neutral-100 dark:border-zinc-800", children: [_jsx("div", { className: "text-sm text-neutral-500 dark:text-zinc-400", children: helpfulCount > 0 && (_jsxs("span", { children: [_jsx("strong", { className: "text-neutral-900 dark:text-white", children: helpfulCount }), " ", helpfulCount === 1 ? "person" : "people", " found this helpful"] })) }), _jsxs("button", { type: "button", onClick: handleVote, disabled: voted || voting, className: `ml-auto flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors ${voted
+                                    ? "border-emerald-200 bg-emerald-50 text-emerald-600 dark:border-emerald-800 dark:bg-emerald-900/20 dark:text-emerald-400 cursor-default"
+                                    : "border-neutral-300 dark:border-zinc-600 text-neutral-700 dark:text-zinc-200 hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-primary disabled:opacity-50"}`, children: [_jsx("span", { "aria-hidden": "true", children: voted ? "✓" : "👍" }), voted ? "Marked helpful" : voting ? "Saving…" : "Helpful?"] })] }), _jsxs("section", { className: "grid gap-3 sm:grid-cols-3", children: [productHref && (_jsxs(Link, { href: productHref, className: "group flex items-center gap-3 rounded-xl border border-neutral-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-4 hover:border-primary hover:shadow-sm transition-all", children: [_jsx("span", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-orange-100 dark:bg-orange-900/30 text-xl", children: "\uD83D\uDCE6" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-xs text-neutral-400 dark:text-zinc-500 mb-0.5", children: "Product" }), _jsx("p", { className: "text-sm font-medium text-neutral-900 dark:text-white truncate group-hover:text-primary transition-colors", children: review.productTitle ?? "View Product" })] })] })), sellerHref && (_jsxs(Link, { href: sellerHref, className: "group flex items-center gap-3 rounded-xl border border-neutral-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-4 hover:border-primary hover:shadow-sm transition-all", children: [_jsx("span", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30 text-xl", children: "\uD83C\uDFEA" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-xs text-neutral-400 dark:text-zinc-500 mb-0.5", children: "Seller" }), _jsx("p", { className: "text-sm font-medium text-neutral-900 dark:text-white truncate group-hover:text-primary transition-colors", children: "View Seller" })] })] })), _jsxs(Link, { href: reviewerHref, className: "group flex items-center gap-3 rounded-xl border border-neutral-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-4 hover:border-primary hover:shadow-sm transition-all", children: [_jsx("span", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/30 text-xl", children: "\uD83D\uDC64" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-xs text-neutral-400 dark:text-zinc-500 mb-0.5", children: "Reviewer" }), _jsx("p", { className: "text-sm font-medium text-neutral-900 dark:text-white truncate group-hover:text-primary transition-colors", children: displayName })] })] })] })] }), lightboxIdx !== null && currentImage && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/95", onClick: closeLightbox, role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", children: [_jsx("button", { type: "button", onClick: closeLightbox, "aria-label": "Close lightbox", className: "absolute top-4 right-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors text-xl", children: "\u00D7" }), _jsxs("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 text-white/70 text-sm", children: [lightboxIdx + 1, " / ", images.length] }), images.length > 1 && (_jsx("button", { type: "button", onClick: (e) => { e.stopPropagation(); prevImage(); }, "aria-label": "Previous image", className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/25 transition-colors text-2xl", children: "\u2039" })), _jsx("div", { className: "max-h-[85vh] max-w-[85vw] flex items-center justify-center", onClick: (e) => e.stopPropagation(), children: _jsx("img", { src: currentImage.url, alt: `Review photo ${lightboxIdx + 1}`, className: "max-h-[85vh] max-w-[85vw] rounded-lg object-contain shadow-2xl" }) }), images.length > 1 && (_jsx("button", { type: "button", onClick: (e) => { e.stopPropagation(); nextImage(); }, "aria-label": "Next image", className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/25 transition-colors text-2xl", children: "\u203A" })), images.length > 1 && (_jsx("div", { className: "absolute bottom-4 left-0 right-0 flex justify-center gap-2 px-4", children: images.map((img, i) => (_jsx("button", { type: "button", onClick: (e) => { e.stopPropagation(); setLightboxIdx(i); }, "aria-label": `Go to image ${i + 1}`, className: `h-12 w-12 flex-shrink-0 rounded-md bg-center bg-cover border-2 transition-all ${i === lightboxIdx
+                                ? "border-white scale-110"
+                                : "border-transparent opacity-60 hover:opacity-100"}`, style: { backgroundImage: `url(${img.thumbnailUrl ?? img.url})` } }, i))) }))] }))] }));
+}

package/dist/features/reviews/components/ReviewFilters.d.ts

@@ -2,9 +2,9 @@ import type { FacetOption } from "../../filters/FilterFacetSection";
 import type { UrlTable } from "../../filters/FilterPanel";
 export type ReviewFilterVariant = "admin" | "seller" | "public";
 export declare const REVIEW_FILTER_KEYS: {
-    readonly admin: readonly ["status", "rating", "brand", "verified", "featured"];
-    readonly seller: readonly ["status", "rating", "brand"];
-    readonly public: readonly ["rating", "brand"];
+    readonly admin: readonly ["status", "rating", "brand", "verified", "featured", "dateFrom", "dateTo"];
+    readonly seller: readonly ["status", "rating", "brand", "dateFrom", "dateTo"];
+    readonly public: readonly ["rating", "brand", "dateFrom", "dateTo"];
 };
 export declare const REVIEW_ADMIN_SORT_OPTIONS: readonly [{
     readonly value: "-createdAt";

package/dist/features/reviews/components/ReviewFilters.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { RangeFilter } from "../../filters/RangeFilter";
 import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
 export const REVIEW_FILTER_KEYS = {
-    admin: ["status", "rating", "brand", "verified", "featured"],
-    seller: ["status", "rating", "brand"],
-    public: ["rating", "brand"],
+    admin: ["status", "rating", "brand", "verified", "featured", "dateFrom", "dateTo"],
+    seller: ["status", "rating", "brand", "dateFrom", "dateTo"],
+    public: ["rating", "brand", "dateFrom", "dateTo"],
 };
 export const REVIEW_ADMIN_SORT_OPTIONS = [
     { value: "-createdAt", key: "sortNewest" },
@@ -55,5 +56,5 @@ export function ReviewFilters({ table, variant = "admin", brandOptions, }) {
         : [];
     const isAdmin = variant === "admin";
     const showStatus = variant !== "public";
-    return (_jsxs(Div, { children: [showStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false })), _jsx(FilterFacetSection, { title: t("rating"), options: ratingOptions, selected: selectedRating, onChange: (vals) => table.set("rating", vals.join("|")), searchable: false, defaultCollapsed: variant === "admin" }), brandOptions && brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: table.get("brand") ? [table.get("brand")] : [], onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, selectionMode: "single", defaultCollapsed: true })), isAdmin && (_jsxs(_Fragment, { children: [_jsx(SwitchFilter, { title: t("verified"), label: t("showVerifiedOnly"), checked: table.get("verified") === "true", onChange: (v) => table.set("verified", v ? "true" : ""), defaultCollapsed: true }), _jsx(SwitchFilter, { title: t("featured"), label: t("showFeaturedOnly"), checked: table.get("featured") === "true", onChange: (v) => table.set("featured", v ? "true" : ""), defaultCollapsed: true })] }))] }));
+    return (_jsxs(Div, { children: [showStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false })), _jsx(FilterFacetSection, { title: t("rating"), options: ratingOptions, selected: selectedRating, onChange: (vals) => table.set("rating", vals.join("|")), searchable: false, defaultCollapsed: variant === "admin" }), brandOptions && brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: table.get("brand") ? [table.get("brand")] : [], onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, selectionMode: "single", defaultCollapsed: true })), _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: true }), isAdmin && (_jsxs(_Fragment, { children: [_jsx(SwitchFilter, { title: t("verified"), label: t("showVerifiedOnly"), checked: table.get("verified") === "true", onChange: (v) => table.set("verified", v ? "true" : ""), defaultCollapsed: true }), _jsx(SwitchFilter, { title: t("featured"), label: t("showFeaturedOnly"), checked: table.get("featured") === "true", onChange: (v) => table.set("featured", v ? "true" : ""), defaultCollapsed: true })] })), _jsx(RangeFilter, { title: t("votesRange"), minValue: table.get("minVotes"), maxValue: table.get("maxVotes"), onMinChange: (v) => table.set("minVotes", v), onMaxChange: (v) => table.set("maxVotes", v), minBound: 0, maxBound: 10000, step: 1, minPlaceholder: t("minVotes"), maxPlaceholder: t("maxVotes"), defaultCollapsed: true })] }));
 }

package/dist/features/reviews/components/ReviewsIndexListing.d.ts

@@ -1,5 +1,6 @@
-import type { Review } from "../types";
+import type { ReviewListResponse } from "../types";
 export interface ReviewsIndexListingProps {
-    reviews: Review[];
+    initialData?: ReviewListResponse;
+    variant?: "admin" | "seller" | "public";
 }
-export declare function ReviewsIndexListing({ reviews }: ReviewsIndexListingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReviewsIndexListing({ initialData, variant, }: ReviewsIndexListingProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/reviews/components/ReviewsIndexListing.js

@@ -1,55 +1,39 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { Div, Grid, Pagination, SlottedListingView, SortDropdown, Stack, Text, } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Search, SlidersHorizontal, X } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { Pagination, SortDropdown } from "../../../ui";
 import { ReviewCard } from "./ReviewsList";
+import { ReviewFilters, REVIEW_PUBLIC_SORT_OPTIONS } from "./ReviewFilters";
+import { useReviews } from "../hooks/useReviews";
 const PAGE_SIZE = 12;
-const SORT_OPTIONS = [
-    { value: "-createdAt", label: "Newest First" },
-    { value: "createdAt", label: "Oldest First" },
-    { value: "-rating", label: "Highest Rating" },
-    { value: "rating", label: "Lowest Rating" },
-];
-const STAR_OPTIONS = [
-    { value: "", label: "All Ratings" },
-    { value: "5", label: "5 Stars" },
-    { value: "4", label: "4 Stars" },
-    { value: "3", label: "3 Stars" },
-    { value: "2", label: "2 Stars" },
-    { value: "1", label: "1 Star" },
-];
-export function ReviewsIndexListing({ reviews }) {
-    const [sort, setSort] = useState("-createdAt");
-    const [starFilter, setStarFilter] = useState("");
-    const [page, setPage] = useState(1);
-    const filtered = useMemo(() => {
-        let result = [...reviews];
-        if (starFilter) {
-            const star = parseInt(starFilter, 10);
-            result = result.filter((r) => r.rating === star);
-        }
-        result.sort((a, b) => {
-            if (sort === "-rating")
-                return b.rating - a.rating;
-            if (sort === "rating")
-                return a.rating - b.rating;
-            const aTime = a.createdAt ? new Date(a.createdAt).getTime() : 0;
-            const bTime = b.createdAt ? new Date(b.createdAt).getTime() : 0;
-            return sort === "createdAt" ? aTime - bTime : bTime - aTime;
-        });
-        return result;
-    }, [reviews, sort, starFilter]);
-    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
-    const paginated = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
-    const handleSort = (val) => {
-        setSort(val);
-        setPage(1);
-    };
-    const handleStarFilter = (val) => {
-        setStarFilter(val);
-        setPage(1);
-    };
-    return (_jsx(Div, { className: "min-h-screen", children: _jsx(SlottedListingView, { portal: "public", manageSearch: false, manageSort: false, inlineToolbar: true, renderSort: () => (_jsx(SortDropdown, { value: sort, onChange: handleSort, options: SORT_OPTIONS })), renderFilters: () => (_jsxs(Div, { className: "space-y-2 p-4", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Filter by Rating" }), STAR_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => handleStarFilter(opt.value), className: `block w-full rounded-lg px-3 py-2 text-left text-sm transition ${starFilter === opt.value
-                            ? "bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900"
-                            : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-slate-800"}`, children: opt.label }, opt.value)))] })), renderTable: () => paginated.length === 0 ? (_jsx(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 reviews found" }) })) : (_jsx(Grid, { cols: 3, gap: "md", children: paginated.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) })), renderPagination: () => totalPages > 1 ? (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: setPage })) : null, total: filtered.length, isLoading: false }) }));
+export function ReviewsIndexListing({ initialData, variant = "public", }) {
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: "-createdAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const sort = table.get("sort") || "-createdAt";
+    const currentPage = table.getNumber("page", 1);
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const closeFilters = () => setFilterOpen(false);
+    const ratingRaw = table.get("rating");
+    const { reviews, total, totalPages, isLoading } = useReviews({
+        q: table.get("q") || undefined,
+        rating: ratingRaw || undefined,
+        dateFrom: table.get("dateFrom") || undefined,
+        dateTo: table.get("dateTo") || undefined,
+        minVotes: table.get("minVotes") ? Number(table.get("minVotes")) : undefined,
+        maxVotes: table.get("maxVotes") ? Number(table.get("maxVotes")) : undefined,
+        sort,
+        page: currentPage,
+        perPage: PAGE_SIZE,
+    }, { initialData });
+    const sortOptions = REVIEW_PUBLIC_SORT_OPTIONS.map((opt) => ({
+        value: opt.value,
+        label: opt.key,
+    }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx("div", { className: "sticky top-0 z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && commitSearch(), placeholder: "Search reviews by product name...", className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), searchInput && (_jsx("button", { type: "button", onClick: () => { setSearchInput(""); table.set("q", ""); table.setPage(1); }, className: "px-2 text-zinc-400 hover:text-zinc-600 transition-colors", "aria-label": "Clear search", children: _jsx(X, { className: "h-3.5 w-3.5" }) })), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: sort, onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: sortOptions })] })] }) }), _jsxs("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) => (_jsx("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: _jsxs("div", { className: "p-4 space-y-3", children: [_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))) })) : reviews.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No reviews found." })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: reviews.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _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: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsx("button", { type: "button", onClick: closeFilters, "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(ReviewFilters, { table: table, variant: variant }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
 }

package/dist/features/reviews/components/ReviewsIndexPageView.d.ts

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

package/dist/features/reviews/components/ReviewsIndexPageView.js

@@ -3,7 +3,53 @@ import { reviewRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { ReviewsIndexListing } from "./ReviewsIndexListing";
-export async function ReviewsIndexPageView() {
-    const reviews = await reviewRepository.findByStatus("approved").catch(() => []);
-    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: "Reviews" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(ReviewsIndexListing, { reviews: reviews }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildReviewFilters(params) {
+    const parts = ["status==approved"];
+    const rating = sp(params, "rating");
+    if (rating) {
+        const values = rating.split("|").filter(Boolean);
+        if (values.length === 1)
+            parts.push(`rating==${values[0]}`);
+        else if (values.length > 1)
+            parts.push(`rating==${values.join("|")}`);
+    }
+    const minVotes = sp(params, "minVotes");
+    if (minVotes)
+        parts.push(`helpfulCount>=${minVotes}`);
+    const maxVotes = sp(params, "maxVotes");
+    if (maxVotes)
+        parts.push(`helpfulCount<=${maxVotes}`);
+    const dateFrom = sp(params, "dateFrom");
+    const dateTo = sp(params, "dateTo");
+    if (dateFrom)
+        parts.push(`createdAt>=${dateFrom}`);
+    if (dateTo)
+        parts.push(`createdAt<=${dateTo}`);
+    const q = sp(params, "q");
+    if (q)
+        parts.push(`productTitle@=*${q}`);
+    return parts.join(",");
+}
+export async function ReviewsIndexPageView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "-createdAt";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const filters = buildReviewFilters(searchParams);
+    const result = await reviewRepository
+        .listAll({ filters, sorts: sort, page, pageSize: 12 })
+        .catch(() => null);
+    const initialData = result
+        ? {
+            items: result.items,
+            total: result.total,
+            page: result.page,
+            pageSize: result.pageSize,
+            totalPages: result.totalPages,
+            hasMore: result.hasMore,
+        }
+        : undefined;
+    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: "Reviews" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(ReviewsIndexListing, { initialData: initialData }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

package/dist/features/reviews/components/ReviewsList.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
 import { Div, Heading, Pagination, RichText, Row, Skeleton, Span, Stack, Text, } from "../../../ui";
 import { StarRating } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
 import { maskName } from "../../../security";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { ROUTES } from "../../../next";
 export function ReviewCard({ review, className = "" }) {
     const date = review.createdAt
         ? new Date(review.createdAt).toLocaleDateString(getDefaultLocale(), {
@@ -14,7 +17,12 @@ export function ReviewCard({ review, className = "" }) {
         : "";
     const displayName = maskName(review.userName);
     const initials = displayName.charAt(0).toUpperCase();
-    return (_jsxs(Div, { className: `rounded-xl border border-neutral-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900 ${className}`, children: [_jsxs(Div, { className: "flex items-start gap-3", children: [review.userAvatar ? (_jsx(Div, { role: "img", "aria-label": displayName, className: "h-9 w-9 flex-shrink-0 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${review.userAvatar})` } })) : (_jsx(Div, { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600 dark:bg-zinc-700 dark:text-zinc-300", children: initials })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { wrap: true, gap: "sm", children: [_jsx(Span, { className: "font-medium text-neutral-900 dark:text-white", children: displayName }), review.verified && (_jsx(Span, { className: "rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: "Verified" })), date && (_jsx(Span, { className: "text-xs text-neutral-400 dark:text-zinc-500", children: date }))] }), _jsx(Div, { className: "mt-1", children: _jsx(StarRating, { value: review.rating, size: "sm", readOnly: true }) })] })] }), review.title && (_jsx(Heading, { level: 4, className: "mt-3 font-semibold text-neutral-900 dark:text-white", children: review.title })), review.comment && (_jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-2 text-sm leading-relaxed text-neutral-600 dark:text-zinc-400" })), review.images && review.images.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-3", children: review.images.map((img, i) => (_jsx(Div, { role: "img", "aria-label": `Review image ${i + 1}`, className: "h-16 w-16 rounded-lg bg-center bg-cover border border-neutral-100 dark:border-zinc-700", style: { backgroundImage: `url(${img.thumbnailUrl ?? img.url})` } }, i))) })), (review.helpfulCount ?? 0) > 0 && (_jsxs(Text, { className: "mt-3 text-xs text-neutral-400 dark:text-zinc-500", children: [review.helpfulCount, " found this helpful"] }))] }));
+    const reviewHref = String(ROUTES.PUBLIC.REVIEW_DETAIL(review.id));
+    const productHref = review.productId
+        ? String(ROUTES.PUBLIC.PRODUCT_DETAIL(review.productId))
+        : null;
+    const card = (_jsxs(Div, { className: `group flex flex-col h-full rounded-xl border border-neutral-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900 transition-shadow hover:shadow-md cursor-pointer ${className}`, children: [_jsxs(Div, { className: "flex items-start gap-3", children: [review.userAvatar ? (_jsx(Div, { role: "img", "aria-label": displayName, className: "h-9 w-9 flex-shrink-0 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${review.userAvatar})` } })) : (_jsx(Div, { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600 dark:bg-zinc-700 dark:text-zinc-300", children: initials })), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { wrap: true, gap: "sm", children: [_jsx(Span, { className: "font-medium text-neutral-900 dark:text-white", children: displayName }), review.verified && (_jsx(Span, { className: "rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: "Verified" })), date && (_jsx(Span, { className: "text-xs text-neutral-400 dark:text-zinc-500", children: date }))] }), _jsx(Div, { className: "mt-1", children: _jsx(StarRating, { value: review.rating, size: "sm", readOnly: true }) })] })] }), review.title && (_jsx(Heading, { level: 4, className: "mt-3 font-semibold text-neutral-900 dark:text-white", children: review.title })), review.comment && (_jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-2 text-sm leading-relaxed text-neutral-600 dark:text-zinc-400" })), review.images && review.images.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-3", children: review.images.map((img, i) => (_jsx(Div, { role: "img", "aria-label": `Review image ${i + 1}`, className: "h-16 w-16 rounded-lg bg-center bg-cover border border-neutral-100 dark:border-zinc-700", style: { backgroundImage: `url(${img.thumbnailUrl ?? img.url})` } }, i))) })), (review.helpfulCount ?? 0) > 0 && (_jsxs(Text, { className: "mt-3 text-xs text-neutral-400 dark:text-zinc-500", children: [review.helpfulCount, " found this helpful"] })), productHref && (_jsxs(Div, { className: "mt-auto pt-3 flex items-center gap-1.5 text-xs font-medium text-neutral-500 dark:text-zinc-400 border-t border-neutral-100 dark:border-zinc-800", children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDCE6" }), _jsx("span", { className: THEME_CONSTANTS.utilities.textClamp1, children: review.productTitle ?? "View Product" }), _jsx("span", { "aria-hidden": "true", className: "ml-auto text-primary group-hover:translate-x-0.5 transition-transform", children: "\u2192" })] }))] }));
+    return (_jsx(Link, { href: reviewHref, className: "block h-full", children: card }));
 }
 export function ReviewsList({ reviews, isLoading, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No reviews yet", }) {
     if (isLoading) {

package/dist/features/reviews/components/index.d.ts

@@ -10,3 +10,4 @@ export { ReviewsListView } from "./ReviewsListView";
 export type { ReviewsListViewProps } from "./ReviewsListView";
 export { ReviewsIndexListing } from "./ReviewsIndexListing";
 export type { ReviewsIndexListingProps } from "./ReviewsIndexListing";
+export type { ReviewDetailPageViewProps } from "./ReviewDetailPageView";