@burdenoff/microfe-kadaikodi 2026.704.4 → 2026.710.1

package/dist/kadaikodi/pages/customer/ReviewsPage.js

@@ -2,11 +2,13 @@ import { useKadaikodi as e } from "../../context/KadaikodiContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
 import { EmptyState as r } from "../../components/EmptyState.js";
-import { useCreateReview as i, useOrders as a } from "../../hooks/useKadaikodiApi.js";
-import { formatDate as o } from "../../utils/formatters.js";
-import { RatingDisplay as s } from "../../components/RatingDisplay.js";
-import { useCallback as c, useState as l } from "react";
-import { CheckCircle2 as u, Info as d, MessageCircle as f, MessageSquare as p, PenSquare as m, Search as h, Star as g, ThumbsUp as _, X as v } from "lucide-react";
+import { useCreateReview as i, useOrders as a, useProviders as ee, useReviews as o } from "../../hooks/useKadaikodiApi.js";
+import { formatRelativeTime as s } from "../../utils/formatters.js";
+import { RatingStars as c } from "../../components/viz/RatingStars.js";
+import "../../components/viz/index.js";
+import { ProviderImage as l } from "./shared.js";
+import { useMemo as u, useState as d } from "react";
+import { CheckCircle2 as f, Loader2 as p, MessageCircle as m, MessageSquare as h, PenSquare as g, Search as _, Star as v } from "lucide-react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
 import { EmphasisPanel as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/customer/ReviewsPage.tsx
@@ -18,7 +20,7 @@ var C = {
 	5: "Excellent"
 };
 function w({ value: e, onChange: n }) {
-	let [r, i] = l(0), a = r || e;
+	let [r, i] = d(0), a = r || e;
 	return /* @__PURE__ */ b("div", {
 		className: "flex items-center gap-3",
 		children: [/* @__PURE__ */ y("div", {
@@ -34,8 +36,9 @@ function w({ value: e, onChange: n }) {
 				onClick: () => n(e),
 				onMouseEnter: () => i(e),
 				onMouseLeave: () => i(0),
-				className: "p-0.5 transition-transform",
-				children: /* @__PURE__ */ y(g, { className: t("h-6 w-6", e <= a ? "fill-status-warning-text text-status-warning-text" : "fill-none text-text-secondary/40") })
+				className: "p-0.5 transition-transform hover:scale-110",
+				"aria-label": `${e} star${e > 1 ? "s" : ""}`,
+				children: /* @__PURE__ */ y(v, { className: t("h-7 w-7", e <= a ? "fill-status-warning-text text-status-warning-text" : "fill-none text-text-secondary/40") })
 			}, e))
 		}), /* @__PURE__ */ y("span", {
 			className: "text-sm font-medium text-text-secondary",
@@ -44,34 +47,35 @@ function w({ value: e, onChange: n }) {
 	});
 }
 function T() {
-	let { navigateTo: C, currentUser: T } = e(), E = T?.id ?? "", { data: D = [] } = a({ customerId: T?.id }), O = i(), k = D.filter((e) => e.status === "delivered"), [A, j] = l([]), [M, N] = l(!1), [P, F] = l(""), [I, L] = l({
-		rating: 5,
-		title: "",
-		comment: ""
-	}), [R, z] = l({
-		searchQuery: "",
-		type: "all",
-		rating: "",
-		sortBy: "recent"
-	}), [B, V] = l(null), H = (e) => {
-		V(e), setTimeout(() => V(null), 3e3);
-	}, U = c(() => {
-		let e = [...A];
-		if (R.type === "my-reviews" ? e = e.filter((e) => e.userId === E) : R.type !== "all" && (e = e.filter((e) => e.itemType === R.type)), R.rating) {
-			let t = parseInt(R.rating, 10);
-			e = e.filter((e) => e.rating === t);
+	let { navigateTo: C, currentUser: T } = e(), { data: E = [], isLoading: D } = ee(), { data: O = [] } = a({ customerId: T?.id }), k = i(), A = u(() => O.filter((e) => e.status === "delivered"), [O]), j = u(() => new Set(A.map((e) => e.cartId)), [A]), [M, N] = d(""), P = M || A[0]?.cartId || E[0]?.id || "", F = u(() => E.find((e) => e.id === P), [E, P]), { data: I = [], isLoading: L } = o(P), [R, z] = d(""), [B, V] = d(""), [H, U] = d("recent"), [W, G] = d(5), [K, q] = d(""), [J, Y] = d(null), X = (e) => {
+		Y(e), setTimeout(() => Y(null), 3e3);
+	}, Z = u(() => {
+		let e = {
+			5: 0,
+			4: 0,
+			3: 0,
+			2: 0,
+			1: 0
+		};
+		for (let t of I) {
+			let n = Math.min(5, Math.max(1, Math.round(t.rating)));
+			e[n] += 1;
 		}
-		if (R.searchQuery) {
-			let t = R.searchQuery.toLowerCase();
-			e = e.filter((e) => e.itemName.toLowerCase().includes(t) || e.title.toLowerCase().includes(t) || e.comment.toLowerCase().includes(t) || e.cartName.toLowerCase().includes(t));
+		return e;
+	}, [I]), Q = u(() => {
+		let e = [...I];
+		if (B) {
+			let t = parseInt(B, 10);
+			e = e.filter((e) => Math.round(e.rating) === t);
+		}
+		if (R.trim()) {
+			let t = R.toLowerCase();
+			e = e.filter((e) => (e.review ?? "").toLowerCase().includes(t) || (e.response ?? "").toLowerCase().includes(t));
 		}
-		switch (R.sortBy) {
+		switch (H) {
 			case "recent":
 				e.sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime());
 				break;
-			case "helpful":
-				e.sort((e, t) => t.helpfulCount - e.helpfulCount);
-				break;
 			case "rating-high":
 				e.sort((e, t) => t.rating - e.rating);
 				break;
@@ -80,453 +84,306 @@ function T() {
 				break;
 		}
 		return e;
-	}, [A, R])(), W = A.filter((e) => e.userId === E).length, G = A.length > 0 ? (A.reduce((e, t) => e + t.rating, 0) / A.length).toFixed(1) : "0", K = () => {
-		if (!P) {
-			H("Please choose which delivered order you want to review.");
-			return;
-		}
-		if (!I.title.trim() || !I.comment.trim()) {
-			H("Please fill in the Review Title and Comment.");
-			return;
-		}
-		let e = k.find((e) => e.id === P);
-		if (!e || !T?.id) {
-			H("Could not find that order. Please try again.");
-			return;
-		}
-		O.mutate({
-			providerId: e.cartId,
-			orderId: e.id,
-			customerId: T.id,
-			rating: I.rating,
-			review: `${I.title.trim()} — ${I.comment.trim()}`
-		}, {
-			onSuccess: () => {
-				L({
-					rating: 5,
-					title: "",
-					comment: ""
-				}), F(""), N(!1), H("Thanks! Your review has been posted to the cart.");
-			},
-			onError: () => H("Could not post your review. Please try again.")
-		});
-	}, q = (e) => {
-		j((t) => t.map((t) => t.id === e ? {
-			...t,
-			isHelpful: !t.isHelpful,
-			helpfulCount: t.isHelpful ? t.helpfulCount - 1 : t.helpfulCount + 1
-		} : t));
-	};
-	return /* @__PURE__ */ b(n, {
+	}, [
+		I,
+		B,
+		R,
+		H
+	]), $ = u(() => A.find((e) => e.cartId === P), [A, P]), te = !!($ && T?.id);
+	return D ? /* @__PURE__ */ y(n, {
+		title: "Reviews & Ratings",
+		children: /* @__PURE__ */ y("div", {
+			className: "flex h-[60vh] items-center justify-center",
+			children: /* @__PURE__ */ y(p, { className: "h-8 w-8 animate-spin text-accent-primary" })
+		})
+	}) : F ? /* @__PURE__ */ b(n, {
 		title: "Reviews & Ratings",
-		description: `${U.length} reviews found`,
-		actions: /* @__PURE__ */ b("button", {
-			type: "button",
-			onClick: () => N(!0),
-			className: t("flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-opacity", "bg-foreground text-background hover:opacity-90"),
-			children: [/* @__PURE__ */ y(m, { className: "h-4 w-4" }), "Write Review"]
-		}),
+		description: `${I.length} reviews`,
 		children: [
-			B && /* @__PURE__ */ b("div", {
-				className: "mb-4 rounded-lg border border-status-success-text/30 bg-status-success-bg-subtle p-3 flex items-center gap-2",
-				children: [/* @__PURE__ */ y(u, { className: "h-4 w-4 text-status-success-text shrink-0" }), /* @__PURE__ */ y("p", {
+			J && /* @__PURE__ */ b("div", {
+				className: "mb-4 flex items-center gap-2 rounded-lg border border-status-success-text/30 bg-status-success-bg-subtle p-3",
+				children: [/* @__PURE__ */ y(f, { className: "h-4 w-4 text-status-success-text shrink-0" }), /* @__PURE__ */ y("p", {
 					className: "text-sm text-status-success-text",
-					children: B
+					children: J
 				})]
 			}),
 			/* @__PURE__ */ y(S, {
 				className: "mb-6",
-				children: "Your voice on the carts you've tried — write honest reviews to help other customers and give vendors feedback they can act on. Browse what others said, then add your own rating for a recent order."
+				children: "Honest ratings for the carts on Kadaikodi — pick a cart to see its aggregate score and every review, then add your own for an order you've had delivered."
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "mb-6",
+				children: [/* @__PURE__ */ y("label", {
+					className: "mb-1.5 block text-sm font-medium text-text-primary",
+					children: "Viewing reviews for"
+				}), /* @__PURE__ */ y("select", {
+					value: P,
+					onChange: (e) => N(e.target.value),
+					className: "w-full max-w-sm rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+					children: E.map((e) => /* @__PURE__ */ b("option", {
+						value: e.id,
+						children: [e.name, j.has(e.id) ? " • ordered" : ""]
+					}, e.id))
+				})]
 			}),
 			/* @__PURE__ */ y(x, {
 				className: "mb-6",
 				children: /* @__PURE__ */ b("div", {
-					className: "flex flex-wrap items-center gap-4 text-sm text-text-secondary",
-					children: [
-						/* @__PURE__ */ b("span", { children: [A.length, " total reviews"] }),
-						/* @__PURE__ */ b("span", { children: [W, " your reviews"] }),
-						/* @__PURE__ */ b("span", {
-							className: "flex items-center gap-1",
-							children: [
-								"Average: ",
-								G,
-								/* @__PURE__ */ y(g, { className: "h-3.5 w-3.5 fill-status-warning-text text-status-warning-text" })
-							]
+					className: "flex flex-col gap-5 sm:flex-row sm:items-center",
+					children: [/* @__PURE__ */ b("div", {
+						className: "flex items-center gap-4",
+						children: [/* @__PURE__ */ y("div", {
+							className: "h-16 w-16 shrink-0 overflow-hidden rounded-xl",
+							children: /* @__PURE__ */ y(l, {
+								src: F.image,
+								alt: F.name,
+								seed: F.name
+							})
+						}), /* @__PURE__ */ b("div", { children: [
+							/* @__PURE__ */ y("p", {
+								className: "text-4xl font-bold leading-none text-text-primary",
+								children: F.rating.toFixed(1)
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "mt-1.5",
+								children: /* @__PURE__ */ y(c, {
+									value: F.rating,
+									size: 16
+								})
+							}),
+							/* @__PURE__ */ b("p", {
+								className: "mt-1 text-xs text-text-secondary",
+								children: [F.totalRatings, " ratings"]
+							})
+						] })]
+					}), /* @__PURE__ */ y("div", {
+						className: "flex-1 space-y-1.5",
+						children: [
+							5,
+							4,
+							3,
+							2,
+							1
+						].map((e) => {
+							let t = Z[e], n = I.length ? t / I.length * 100 : 0;
+							return /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-2 text-xs",
+								children: [
+									/* @__PURE__ */ b("span", {
+										className: "flex w-7 items-center gap-0.5 text-text-secondary",
+										children: [e, /* @__PURE__ */ y(v, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" })]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "h-2 flex-1 overflow-hidden rounded-full bg-bg-sunken",
+										children: /* @__PURE__ */ y("div", {
+											className: "h-full rounded-full bg-accent-primary transition-all",
+											style: { width: `${n}%` }
+										})
+									}),
+									/* @__PURE__ */ y("span", {
+										className: "w-6 text-right tabular-nums text-text-muted",
+										children: t
+									})
+								]
+							}, e);
 						})
-					]
+					})]
 				})
 			}),
-			/* @__PURE__ */ y("div", {
-				className: "rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6",
-				children: /* @__PURE__ */ b("div", {
-					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3",
+			/* @__PURE__ */ b("div", {
+				className: "mb-6 rounded-xl border border-border-subtle bg-bg-surface p-5",
+				children: [/* @__PURE__ */ b("h2", {
+					className: "mb-3 flex items-center gap-2 text-base font-semibold text-text-primary",
+					children: [/* @__PURE__ */ y(g, { className: "h-4 w-4 text-text-secondary" }), "Write a review"]
+				}), te ? /* @__PURE__ */ b("div", {
+					className: "space-y-3",
 					children: [
-						/* @__PURE__ */ b("div", {
-							className: "relative",
-							children: [/* @__PURE__ */ y(h, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("input", {
-								type: "text",
-								placeholder: "Search reviews...",
-								value: R.searchQuery,
-								onChange: (e) => z((t) => ({
-									...t,
-									searchQuery: e.target.value
-								})),
-								className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-							})]
+						/* @__PURE__ */ y(w, {
+							value: W,
+							onChange: G
 						}),
-						/* @__PURE__ */ b("select", {
-							value: R.type,
-							onChange: (e) => z((t) => ({
-								...t,
-								type: e.target.value
-							})),
-							className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-							children: [
-								/* @__PURE__ */ y("option", {
-									value: "all",
-									children: "All Reviews"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "cart",
-									children: "Cart Reviews"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "product",
-									children: "Product Reviews"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "my-reviews",
-									children: "My Reviews"
-								})
-							]
+						/* @__PURE__ */ y("textarea", {
+							rows: 3,
+							value: K,
+							onChange: (e) => q(e.target.value),
+							placeholder: "Share your experience…",
+							className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 						}),
-						/* @__PURE__ */ b("select", {
-							value: R.rating,
-							onChange: (e) => z((t) => ({
-								...t,
-								rating: e.target.value
-							})),
-							className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-							children: [
-								/* @__PURE__ */ y("option", {
-									value: "",
-									children: "All Ratings"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "5",
-									children: "5 Stars"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "4",
-									children: "4 Stars"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "3",
-									children: "3 Stars"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "2",
-									children: "2 Stars"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "1",
-									children: "1 Star"
-								})
-							]
+						/* @__PURE__ */ y("div", {
+							className: "flex justify-end",
+							children: /* @__PURE__ */ b("button", {
+								type: "button",
+								onClick: () => {
+									if (!$ || !T?.id) {
+										X("Order from this cart and wait for delivery to leave a review.");
+										return;
+									}
+									k.mutate({
+										providerId: P,
+										orderId: $.id,
+										customerId: T.id,
+										rating: W,
+										review: K.trim() || void 0
+									}, {
+										onSuccess: () => {
+											q(""), G(5), X("Thanks! Your review has been posted.");
+										},
+										onError: () => X("Could not post your review. Please try again.")
+									});
+								},
+								disabled: k.isPending,
+								className: t("inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-semibold text-action-primary-text transition-colors", k.isPending ? "opacity-60 cursor-not-allowed" : "hover:bg-action-primary-bg-hover"),
+								children: [k.isPending && /* @__PURE__ */ y(p, { className: "h-4 w-4 animate-spin" }), "Submit Review"]
+							})
+						})
+					]
+				}) : /* @__PURE__ */ b("p", {
+					className: "rounded-lg bg-bg-sunken p-3 text-xs text-text-secondary",
+					children: [
+						"You can review ",
+						/* @__PURE__ */ y("span", {
+							className: "font-medium text-text-primary",
+							children: F.name
 						}),
-						/* @__PURE__ */ b("select", {
-							value: R.sortBy,
-							onChange: (e) => z((t) => ({
-								...t,
-								sortBy: e.target.value
-							})),
-							className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-							children: [
-								/* @__PURE__ */ y("option", {
-									value: "recent",
-									children: "Most Recent"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "helpful",
-									children: "Most Helpful"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "rating-high",
-									children: "Highest Rating"
-								}),
-								/* @__PURE__ */ y("option", {
-									value: "rating-low",
-									children: "Lowest Rating"
-								})
-							]
+						" ",
+						"once one of your orders from it has been delivered.",
+						" ",
+						/* @__PURE__ */ y("button", {
+							type: "button",
+							onClick: () => C(`/customer/cart/${F.id}`),
+							className: "font-medium text-accent-primary hover:underline",
+							children: "Order now"
 						})
 					]
-				})
+				})]
 			}),
-			U.length === 0 ? /* @__PURE__ */ y(r, {
-				icon: /* @__PURE__ */ y(p, { className: "h-12 w-12" }),
-				title: "No reviews found",
-				description: "Be the first to write a review!",
-				action: /* @__PURE__ */ y("button", {
-					type: "button",
-					onClick: () => N(!0),
-					className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
-					children: "Write a Review"
-				})
-			}) : /* @__PURE__ */ y("div", {
-				className: "space-y-4",
-				children: U.map((e) => {
-					let n = e.userId === E;
-					return /* @__PURE__ */ b("div", {
-						className: t("rounded-lg border bg-bg-surface p-5", n ? "border-foreground/20" : "border-border-subtle"),
+			/* @__PURE__ */ b("div", {
+				className: "mb-6 grid grid-cols-1 gap-3 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ b("div", {
+						className: "relative sm:col-span-1",
+						children: [/* @__PURE__ */ y(_, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ y("input", {
+							type: "text",
+							placeholder: "Search reviews…",
+							value: R,
+							onChange: (e) => z(e.target.value),
+							className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+						})]
+					}),
+					/* @__PURE__ */ b("select", {
+						value: B,
+						onChange: (e) => V(e.target.value),
+						className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 						children: [
-							/* @__PURE__ */ b("div", {
-								className: "flex items-start gap-3 mb-3",
-								children: [
-									/* @__PURE__ */ y("img", {
-										src: e.userAvatar,
-										alt: e.userName,
-										className: "h-10 w-10 rounded-full object-cover shrink-0"
-									}),
-									/* @__PURE__ */ b("div", {
-										className: "flex-1 min-w-0",
-										children: [/* @__PURE__ */ b("div", {
-											className: "flex items-center gap-2 flex-wrap",
-											children: [
-												/* @__PURE__ */ y("span", {
-													className: "text-sm font-semibold text-text-primary",
-													children: e.userName
-												}),
-												e.isVerified && /* @__PURE__ */ b("span", {
-													className: "inline-flex items-center gap-1 rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-[10px] font-medium text-status-success-text",
-													children: [/* @__PURE__ */ y(u, { className: "h-3 w-3" }), "Verified"]
-												}),
-												n && /* @__PURE__ */ y("span", {
-													className: "inline-flex items-center rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-[10px] font-medium text-text-primary",
-													children: "Your Review"
-												})
-											]
-										}), /* @__PURE__ */ b("div", {
-											className: "flex flex-wrap items-center gap-2 text-xs text-text-secondary mt-0.5",
-											children: [/* @__PURE__ */ b("span", { children: [e.itemType === "cart" ? /* @__PURE__ */ y(p, { className: "inline h-3 w-3 mr-0.5" }) : /* @__PURE__ */ y(g, { className: "inline h-3 w-3 mr-0.5" }), e.itemName] }), /* @__PURE__ */ y("span", { children: o(e.createdAt, {
-												hour: void 0,
-												minute: void 0,
-												hour12: void 0
-											}) })]
-										})]
-									}),
-									/* @__PURE__ */ b("div", {
-										className: "shrink-0",
-										children: [/* @__PURE__ */ y(s, {
-											value: e.rating,
-											size: "sm"
-										}), /* @__PURE__ */ b("p", {
-											className: "text-xs text-text-secondary mt-0.5 text-right",
-											children: ["From: ", e.cartName]
-										})]
-									})
-								]
+							/* @__PURE__ */ y("option", {
+								value: "",
+								children: "All ratings"
 							}),
-							/* @__PURE__ */ b("div", {
-								className: "mb-3",
-								children: [/* @__PURE__ */ y("h4", {
-									className: "text-sm font-semibold text-text-primary mb-1",
-									children: e.title
-								}), /* @__PURE__ */ y("p", {
-									className: "text-sm text-text-primary leading-relaxed",
-									children: e.comment
-								})]
+							/* @__PURE__ */ y("option", {
+								value: "5",
+								children: "5 stars"
 							}),
-							e.images && e.images.length > 0 && /* @__PURE__ */ y("div", {
-								className: "mb-3 flex gap-2 overflow-x-auto pb-1",
-								children: e.images.map((e, t) => /* @__PURE__ */ y("img", {
-									src: e,
-									alt: `Review image ${t + 1}`,
-									className: "h-20 w-20 rounded-lg object-cover shrink-0"
-								}, t))
+							/* @__PURE__ */ y("option", {
+								value: "4",
+								children: "4 stars"
 							}),
-							e.response && /* @__PURE__ */ b("div", {
-								className: "mb-3 rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-3",
-								children: [/* @__PURE__ */ b("div", {
-									className: "flex flex-wrap items-center gap-2 mb-1.5",
-									children: [
-										/* @__PURE__ */ y(f, { className: "h-3.5 w-3.5 text-text-primary" }),
-										/* @__PURE__ */ b("span", {
-											className: "text-xs font-medium text-text-primary",
-											children: ["Response from ", e.response.respondedBy]
-										}),
-										/* @__PURE__ */ y("span", {
-											className: "text-[10px] text-text-primary/70",
-											children: o(e.response.respondedAt, {
-												hour: void 0,
-												minute: void 0,
-												hour12: void 0
-											})
-										})
-									]
-								}), /* @__PURE__ */ y("p", {
-									className: "text-xs text-text-primary leading-relaxed",
-									children: e.response.message
-								})]
+							/* @__PURE__ */ y("option", {
+								value: "3",
+								children: "3 stars"
 							}),
-							/* @__PURE__ */ b("div", {
-								className: "flex items-center justify-between pt-3 border-t border-border-subtle",
-								children: [/* @__PURE__ */ b("button", {
-									type: "button",
-									onClick: () => q(e.id),
-									className: t("flex items-center gap-1.5 text-xs transition-colors", e.isHelpful ? "text-text-primary font-medium" : "text-text-secondary hover:text-text-primary"),
-									children: [
-										/* @__PURE__ */ y(_, { className: t("h-3.5 w-3.5", e.isHelpful && "fill-current") }),
-										"Helpful (",
-										e.helpfulCount,
-										")"
-									]
-								}), /* @__PURE__ */ b("div", {
-									className: "flex items-center gap-3 text-xs text-text-secondary",
-									children: [/* @__PURE__ */ b("span", { children: ["Order: ", e.orderId] }), /* @__PURE__ */ y("button", {
-										type: "button",
-										onClick: () => C(`/customer/cart/${e.cartId}`),
-										className: "font-medium hover:text-text-primary transition-colors",
-										children: "View Cart"
-									})]
-								})]
+							/* @__PURE__ */ y("option", {
+								value: "2",
+								children: "2 stars"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "1",
+								children: "1 star"
 							})
 						]
-					}, e.id);
-				})
+					}),
+					/* @__PURE__ */ b("select", {
+						value: H,
+						onChange: (e) => U(e.target.value),
+						className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+						children: [
+							/* @__PURE__ */ y("option", {
+								value: "recent",
+								children: "Most recent"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "rating-high",
+								children: "Highest rating"
+							}),
+							/* @__PURE__ */ y("option", {
+								value: "rating-low",
+								children: "Lowest rating"
+							})
+						]
+					})
+				]
 			}),
-			M && /* @__PURE__ */ y("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-				children: /* @__PURE__ */ y("div", {
-					className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg",
-					children: /* @__PURE__ */ b("div", {
-						className: "p-5",
+			L ? /* @__PURE__ */ y("div", {
+				className: "flex h-40 items-center justify-center",
+				children: /* @__PURE__ */ y(p, { className: "h-6 w-6 animate-spin text-accent-primary" })
+			}) : Q.length === 0 ? /* @__PURE__ */ y(r, {
+				icon: /* @__PURE__ */ y(h, { className: "h-12 w-12" }),
+				title: "No reviews yet",
+				description: `Be the first to review ${F.name}.`
+			}) : /* @__PURE__ */ y("div", {
+				className: "space-y-3",
+				children: Q.map((e) => {
+					let n = e.customerId === T?.id;
+					return /* @__PURE__ */ b("div", {
+						className: t("rounded-xl border bg-bg-surface p-4", n ? "border-action-primary-bg/40" : "border-border-subtle"),
 						children: [
 							/* @__PURE__ */ b("div", {
-								className: "flex items-center justify-between mb-5",
-								children: [/* @__PURE__ */ y("h3", {
-									className: "text-lg font-semibold text-text-primary",
-									children: "Write a Review"
-								}), /* @__PURE__ */ y("button", {
-									type: "button",
-									onClick: () => N(!1),
-									className: "rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
-									children: /* @__PURE__ */ y(v, { className: "h-4 w-4" })
+								className: "flex items-center justify-between gap-2",
+								children: [/* @__PURE__ */ b("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ y(c, {
+										value: e.rating,
+										size: 14
+									}), n && /* @__PURE__ */ y("span", {
+										className: "rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-[10px] font-medium text-accent-primary",
+										children: "Your review"
+									})]
+								}), /* @__PURE__ */ y("span", {
+									className: "text-xs text-text-muted",
+									children: s(e.createdAt)
 								})]
 							}),
-							/* @__PURE__ */ b("div", {
-								className: "space-y-4",
-								children: [
-									/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["Which order? ", /* @__PURE__ */ y("span", {
-											className: "text-status-error-text",
-											children: "*"
-										})]
-									}), k.length > 0 ? /* @__PURE__ */ b("select", {
-										value: P,
-										onChange: (e) => F(e.target.value),
-										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-										children: [/* @__PURE__ */ y("option", {
-											value: "",
-											children: "Select a delivered order…"
-										}), k.map((e) => /* @__PURE__ */ b("option", {
-											value: e.id,
-											children: [
-												e.cartName,
-												" · ",
-												o(e.orderDate)
-											]
-										}, e.id))]
-									}) : /* @__PURE__ */ y("p", {
-										className: "rounded-lg bg-bg-sunken p-3 text-xs text-text-secondary",
-										children: "You can review a cart once one of your orders has been delivered. Place an order and come back after it arrives."
-									})] }),
-									/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
-										className: "block text-sm font-medium text-text-primary mb-2",
-										children: ["Rating ", /* @__PURE__ */ y("span", {
-											className: "text-status-error-text",
-											children: "*"
-										})]
-									}), /* @__PURE__ */ y(w, {
-										value: I.rating,
-										onChange: (e) => L((t) => ({
-											...t,
-											rating: e
-										}))
-									})] }),
-									/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["Review Title ", /* @__PURE__ */ y("span", {
-											className: "text-status-error-text",
-											children: "*"
-										})]
-									}), /* @__PURE__ */ y("input", {
-										type: "text",
-										placeholder: "Summarize your experience",
-										value: I.title,
-										onChange: (e) => L((t) => ({
-											...t,
-											title: e.target.value
-										})),
-										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-									})] }),
-									/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["Your Review ", /* @__PURE__ */ y("span", {
-											className: "text-status-error-text",
-											children: "*"
-										})]
-									}), /* @__PURE__ */ y("textarea", {
-										rows: 5,
-										placeholder: "Share your experience with others...",
-										value: I.comment,
-										onChange: (e) => L((t) => ({
-											...t,
-											comment: e.target.value
-										})),
-										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
-									})] }),
-									/* @__PURE__ */ b("div", {
-										className: "rounded-lg bg-bg-sunken p-4",
-										children: [/* @__PURE__ */ b("div", {
-											className: "flex items-center gap-2 mb-2",
-											children: [/* @__PURE__ */ y(d, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("h4", {
-												className: "text-sm font-medium text-text-primary",
-												children: "Review Guidelines"
-											})]
-										}), /* @__PURE__ */ b("ul", {
-											className: "text-xs text-text-secondary space-y-1",
-											children: [
-												/* @__PURE__ */ y("li", { children: "- Be honest and helpful to other customers" }),
-												/* @__PURE__ */ y("li", { children: "- Focus on your experience with the food and service" }),
-												/* @__PURE__ */ y("li", { children: "- Avoid personal information or inappropriate content" }),
-												/* @__PURE__ */ y("li", { children: "- Reviews are public and cannot be deleted once submitted" })
-											]
-										})]
-									})
-								]
+							e.review && /* @__PURE__ */ y("p", {
+								className: "mt-2 text-sm leading-relaxed text-text-primary",
+								children: e.review
 							}),
-							/* @__PURE__ */ b("div", {
-								className: "flex items-center gap-3 pt-5",
-								children: [/* @__PURE__ */ y("button", {
-									type: "button",
-									onClick: K,
-									disabled: O.isPending || k.length === 0,
-									className: t("rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background transition-opacity", O.isPending || k.length === 0 ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
-									children: O.isPending ? "Posting…" : "Submit Review"
-								}), /* @__PURE__ */ y("button", {
-									type: "button",
-									onClick: () => N(!1),
-									className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
-									children: "Cancel"
+							e.response && /* @__PURE__ */ b("div", {
+								className: "mt-3 rounded-lg border-l-2 border-accent-primary bg-[var(--color-accent-soft)] p-3",
+								children: [/* @__PURE__ */ b("p", {
+									className: "mb-1 flex items-center gap-1.5 text-xs font-medium text-text-primary",
+									children: [/* @__PURE__ */ y(m, { className: "h-3.5 w-3.5" }), "Owner response"]
+								}), /* @__PURE__ */ y("p", {
+									className: "text-xs leading-relaxed text-text-primary",
+									children: e.response
 								})]
 							})
 						]
-					})
+					}, e.id);
 				})
 			})
 		]
+	}) : /* @__PURE__ */ y(n, {
+		title: "Reviews & Ratings",
+		children: /* @__PURE__ */ y(r, {
+			icon: /* @__PURE__ */ y(h, { className: "h-12 w-12" }),
+			title: "No carts to review yet",
+			description: "Browse carts and place an order — once it's delivered you can rate and review it.",
+			action: /* @__PURE__ */ y("button", {
+				type: "button",
+				onClick: () => C("/customer/discover"),
+				className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-semibold text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
+				children: "Discover Carts"
+			})
+		})
 	});
 }
 //#endregion