@86d-app/reviews 0.0.3

package/src/admin/components/index.ts

@@ -0,0 +1,3 @@
+export { ReviewAnalytics } from "./review-analytics";
+export { ReviewList } from "./review-list";
+export { ReviewModeration } from "./review-moderation";

package/src/admin/components/index.tsx

@@ -0,0 +1,3 @@
+export { ReviewAnalytics } from "./review-analytics";
+export { ReviewList } from "./review-list";
+export { ReviewModeration } from "./review-moderation";

package/src/admin/components/review-analytics.mdx

@@ -0,0 +1,3 @@
+<div>
+  {props.content}
+</div>

package/src/admin/components/review-analytics.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useModuleClient } from "@86d-app/core/client";
+import ReviewAnalyticsTemplate from "./review-analytics.mdx";
+
+interface ReviewAnalyticsData {
+	totalReviews: number;
+	pendingCount: number;
+	approvedCount: number;
+	rejectedCount: number;
+	averageRating: number;
+	ratingsDistribution: Record<string, number>;
+	withMerchantResponse: number;
+}
+
+function useReviewsAdminApi() {
+	const client = useModuleClient();
+	return {
+		analytics: client.module("reviews").admin["/admin/reviews/analytics"],
+	};
+}
+
+function StarDisplay({ rating }: { rating: number }) {
+	return (
+		<span
+			role="img"
+			className="select-none text-lg leading-none"
+			aria-label={`${rating} out of 5 stars`}
+		>
+			{[1, 2, 3, 4, 5].map((n) => (
+				<span
+					key={n}
+					className={
+						n <= Math.round(rating)
+							? "text-amber-400"
+							: "text-gray-200 dark:text-gray-700"
+					}
+				>
+					★
+				</span>
+			))}
+		</span>
+	);
+}
+
+function StatCard({
+	label,
+	value,
+	className,
+}: {
+	label: string;
+	value: string | number;
+	className?: string;
+}) {
+	return (
+		<div
+			className={`rounded-xl border border-border bg-card p-5 ${className ?? ""}`}
+		>
+			<p className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
+				{label}
+			</p>
+			<p className="mt-1 font-semibold text-2xl text-foreground">{value}</p>
+		</div>
+	);
+}
+
+function DistributionBar({
+	star,
+	count,
+	total,
+}: {
+	star: number;
+	count: number;
+	total: number;
+}) {
+	const pct = total > 0 ? Math.round((count / total) * 100) : 0;
+	return (
+		<div className="flex items-center gap-3">
+			<span className="w-8 text-right text-muted-foreground text-sm">
+				{star}★
+			</span>
+			<div className="h-2.5 flex-1 overflow-hidden rounded-full bg-muted">
+				<div
+					className="h-full rounded-full bg-amber-400 transition-all"
+					style={{ width: `${pct}%` }}
+				/>
+			</div>
+			<span className="w-10 text-right text-muted-foreground text-xs">
+				{count}
+			</span>
+		</div>
+	);
+}
+
+export function ReviewAnalytics() {
+	const api = useReviewsAdminApi();
+
+	const { data, isLoading: loading } = api.analytics.useQuery({}) as {
+		data: { analytics: ReviewAnalyticsData } | undefined;
+		isLoading: boolean;
+	};
+
+	if (loading) {
+		return (
+			<div className="rounded-xl border border-border bg-card p-6">
+				<p className="text-muted-foreground text-sm">Loading analytics...</p>
+			</div>
+		);
+	}
+
+	const analytics = data?.analytics;
+
+	if (!analytics) {
+		return (
+			<div className="rounded-xl border border-border bg-card p-6">
+				<p className="text-muted-foreground text-sm">
+					No analytics data available.
+				</p>
+			</div>
+		);
+	}
+
+	const responseRate =
+		analytics.totalReviews > 0
+			? Math.round(
+					(analytics.withMerchantResponse / analytics.totalReviews) * 100,
+				)
+			: 0;
+
+	const content = (
+		<div className="space-y-6">
+			<div>
+				<h2 className="font-semibold text-foreground text-lg">
+					Review Analytics
+				</h2>
+				<p className="text-muted-foreground text-sm">
+					Overview of customer reviews and ratings
+				</p>
+			</div>
+
+			<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+				<StatCard label="Total Reviews" value={analytics.totalReviews} />
+				<StatCard label="Average Rating" value={analytics.averageRating} />
+				<StatCard label="Pending" value={analytics.pendingCount} />
+				<StatCard label="Response Rate" value={`${responseRate}%`} />
+			</div>
+
+			<div className="grid gap-6 lg:grid-cols-2">
+				<div className="rounded-xl border border-border bg-card p-5">
+					<h3 className="mb-4 font-medium text-foreground text-sm">
+						Rating Distribution
+					</h3>
+					<div className="mb-3 flex items-center gap-2">
+						<StarDisplay rating={analytics.averageRating} />
+						<span className="font-semibold text-foreground text-xl">
+							{analytics.averageRating}
+						</span>
+						<span className="text-muted-foreground text-sm">out of 5</span>
+					</div>
+					<div className="space-y-2">
+						{[5, 4, 3, 2, 1].map((star) => (
+							<DistributionBar
+								key={star}
+								star={star}
+								count={analytics.ratingsDistribution[String(star)] ?? 0}
+								total={analytics.totalReviews}
+							/>
+						))}
+					</div>
+				</div>
+
+				<div className="rounded-xl border border-border bg-card p-5">
+					<h3 className="mb-4 font-medium text-foreground text-sm">
+						Status Breakdown
+					</h3>
+					<div className="space-y-4">
+						<div className="flex items-center justify-between">
+							<div className="flex items-center gap-2">
+								<span className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
+								<span className="text-foreground text-sm">Approved</span>
+							</div>
+							<span className="font-medium text-foreground text-sm">
+								{analytics.approvedCount}
+							</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<div className="flex items-center gap-2">
+								<span className="h-2.5 w-2.5 rounded-full bg-yellow-500" />
+								<span className="text-foreground text-sm">Pending</span>
+							</div>
+							<span className="font-medium text-foreground text-sm">
+								{analytics.pendingCount}
+							</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<div className="flex items-center gap-2">
+								<span className="h-2.5 w-2.5 rounded-full bg-red-500" />
+								<span className="text-foreground text-sm">Rejected</span>
+							</div>
+							<span className="font-medium text-foreground text-sm">
+								{analytics.rejectedCount}
+							</span>
+						</div>
+						<div className="mt-4 border-border border-t pt-4">
+							<div className="flex items-center justify-between">
+								<span className="text-muted-foreground text-sm">
+									With merchant response
+								</span>
+								<span className="font-medium text-foreground text-sm">
+									{analytics.withMerchantResponse}
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+
+	return <ReviewAnalyticsTemplate content={content} />;
+}

package/src/admin/components/review-list.mdx

@@ -0,0 +1,89 @@
+<div className="space-y-4">
+  <div className="flex items-center justify-between gap-4">
+    <h2 className="font-semibold text-foreground text-lg">
+      Reviews{" "}
+      <span className="font-normal text-muted-foreground text-sm">
+        ({props.total})
+      </span>
+    </h2>
+    <div className="flex gap-1 rounded-lg border border-border bg-muted/30 p-1">
+      {props.statusFilters.map((f) => (
+        <button
+          key={f.value}
+          type="button"
+          onClick={() => props.onFilterChange(f.value)}
+          className={`rounded-md px-3 py-1 font-medium text-sm transition-colors ${
+            props.statusFilter === f.value
+              ? "bg-background text-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {f.label}
+        </button>
+      ))}
+    </div>
+  </div>
+
+  {props.error && (
+    <p className="text-destructive text-sm" role="alert">
+      {props.error}
+    </p>
+  )}
+
+  <div className="overflow-x-auto rounded-lg border border-border">
+    <table className="w-full text-sm">
+      <thead>
+        <tr className="border-border border-b bg-muted/40">
+          <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+            Rating
+          </th>
+          <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+            Author
+          </th>
+          <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+            Title / Body
+          </th>
+          <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+            Product ID
+          </th>
+          <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+            Status
+          </th>
+          <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+            Date
+          </th>
+          <th className="px-4 py-3 text-right font-medium text-muted-foreground">
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.tableBody}
+      </tbody>
+    </table>
+  </div>
+
+  <div className="flex items-center justify-between">
+    <p className="text-muted-foreground text-sm">
+      Showing {props.showingFrom}–{props.showingTo} of {props.total}
+    </p>
+    <div className="flex gap-2">
+      <button
+        type="button"
+        disabled={!props.hasPrev || props.loading}
+        onClick={props.onPrevPage}
+        className="rounded-lg border border-border px-3 py-1.5 font-medium text-foreground text-sm transition-colors hover:bg-muted disabled:opacity-50"
+      >
+        Previous
+      </button>
+      <button
+        type="button"
+        disabled={!props.hasNext || props.loading}
+        onClick={props.onNextPage}
+        className="rounded-lg border border-border px-3 py-1.5 font-medium text-foreground text-sm transition-colors hover:bg-muted disabled:opacity-50"
+      >
+        Next
+      </button>
+    </div>
+  </div>
+</div>

package/src/admin/components/review-list.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { useModuleClient } from "@86d-app/core/client";
+import { useState } from "react";
+import ReviewListTemplate from "./review-list.mdx";
+
+interface Review {
+	id: string;
+	productId: string;
+	customerId: string;
+	authorName: string;
+	authorEmail: string;
+	rating: number;
+	title?: string;
+	body: string;
+	status: "pending" | "approved" | "rejected";
+	isVerifiedPurchase: boolean;
+	helpfulCount: number;
+	createdAt: string;
+	updatedAt: string;
+}
+
+type StatusFilter = "all" | "pending" | "approved" | "rejected";
+
+const STATUS_FILTERS: { label: string; value: StatusFilter }[] = [
+	{ label: "All", value: "all" },
+	{ label: "Pending", value: "pending" },
+	{ label: "Approved", value: "approved" },
+	{ label: "Rejected", value: "rejected" },
+];
+
+const PAGE_SIZE = 20;
+
+function formatDate(iso: string): string {
+	return new Intl.DateTimeFormat("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+	}).format(new Date(iso));
+}
+
+function extractError(error: Error | null, fallback: string): string {
+	if (!error) return fallback;
+	// biome-ignore lint/suspicious/noExplicitAny: accessing HTTP error body property
+	const body = (error as any)?.body;
+	if (typeof body?.error === "string") return body.error;
+	if (typeof body?.error?.message === "string") return body.error.message;
+	return fallback;
+}
+
+function useReviewsAdminApi() {
+	const client = useModuleClient();
+	return {
+		listReviews: client.module("reviews").admin["/admin/reviews"],
+		approveReview: client.module("reviews").admin["/admin/reviews/:id/approve"],
+		rejectReview: client.module("reviews").admin["/admin/reviews/:id/reject"],
+		deleteReview: client.module("reviews").admin["/admin/reviews/:id/delete"],
+	};
+}
+
+function StarDisplay({ rating }: { rating: number }) {
+	return (
+		<span
+			role="img"
+			className="select-none text-sm leading-none"
+			aria-label={`${rating} out of 5 stars`}
+		>
+			{[1, 2, 3, 4, 5].map((n) => (
+				<span
+					key={n}
+					className={
+						n <= Math.round(rating)
+							? "text-amber-400"
+							: "text-muted-foreground/50"
+					}
+				>
+					★
+				</span>
+			))}
+		</span>
+	);
+}
+
+function StatusBadge({ status }: { status: Review["status"] }) {
+	const styles: Record<Review["status"], string> = {
+		pending:
+			"bg-yellow-50 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-300",
+		approved:
+			"bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300",
+		rejected: "bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300",
+	};
+
+	return (
+		<span
+			className={`inline-block rounded-full px-2 py-0.5 font-medium text-xs capitalize ${styles[status]}`}
+		>
+			{status}
+		</span>
+	);
+}
+
+export function ReviewList() {
+	const api = useReviewsAdminApi();
+	const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+	const [skip, setSkip] = useState(0);
+	const [actionLoading, setActionLoading] = useState<string | null>(null);
+	const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+	const [error, setError] = useState("");
+
+	const queryInput =
+		statusFilter === "all"
+			? { take: String(PAGE_SIZE), skip: String(skip) }
+			: {
+					status: statusFilter,
+					take: String(PAGE_SIZE),
+					skip: String(skip),
+				};
+
+	const { data, isLoading: loading } = api.listReviews.useQuery(queryInput) as {
+		data: { reviews: Review[]; total: number } | undefined;
+		isLoading: boolean;
+	};
+
+	const reviews = data?.reviews ?? [];
+	const total = data?.total ?? 0;
+
+	const approveMutation = api.approveReview.useMutation({
+		onSettled: () => {
+			setActionLoading(null);
+			void api.listReviews.invalidate();
+		},
+		onError: (err: Error) => {
+			setError(extractError(err, "Failed to approve review."));
+		},
+	});
+
+	const rejectMutation = api.rejectReview.useMutation({
+		onSettled: () => {
+			setActionLoading(null);
+			void api.listReviews.invalidate();
+		},
+		onError: (err: Error) => {
+			setError(extractError(err, "Failed to reject review."));
+		},
+	});
+
+	const deleteMutation = api.deleteReview.useMutation({
+		onSettled: () => {
+			setActionLoading(null);
+			void api.listReviews.invalidate();
+		},
+		onError: (err: Error) => {
+			setError(extractError(err, "Failed to delete review."));
+		},
+	});
+
+	const handleApprove = (id: string) => {
+		setActionLoading(id);
+		setError("");
+		approveMutation.mutate({ params: { id } });
+	};
+
+	const handleReject = (id: string) => {
+		setActionLoading(id);
+		setError("");
+		rejectMutation.mutate({ params: { id } });
+	};
+
+	const handleDelete = (id: string) => {
+		setActionLoading(id);
+		setDeleteConfirm(null);
+		setError("");
+		deleteMutation.mutate({ params: { id } });
+	};
+
+	const handleFilterChange = (filter: StatusFilter) => {
+		setStatusFilter(filter);
+		setSkip(0);
+	};
+
+	const hasPrev = skip > 0;
+	const hasNext = skip + PAGE_SIZE < total;
+	const showingFrom = reviews.length > 0 ? skip + 1 : 0;
+	const showingTo = Math.min(skip + PAGE_SIZE, total);
+
+	const tableBody =
+		loading && reviews.length === 0 ? (
+			<tr>
+				<td colSpan={7} className="px-4 py-8 text-center text-muted-foreground">
+					Loading...
+				</td>
+			</tr>
+		) : reviews.length === 0 ? (
+			<tr>
+				<td colSpan={7} className="px-4 py-8 text-center text-muted-foreground">
+					No reviews found.
+				</td>
+			</tr>
+		) : (
+			reviews.map((review) => (
+				<tr
+					key={review.id}
+					className="border-border border-b last:border-0 hover:bg-muted/20"
+				>
+					<td className="px-4 py-3">
+						<StarDisplay rating={review.rating} />
+					</td>
+					<td className="px-4 py-3 text-foreground">{review.authorName}</td>
+					<td className="max-w-xs px-4 py-3">
+						{review.title && (
+							<p className="truncate font-medium text-foreground">
+								{review.title}
+							</p>
+						)}
+						<p className="truncate text-muted-foreground">{review.body}</p>
+					</td>
+					<td className="px-4 py-3">
+						<code className="rounded bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
+							{review.productId}
+						</code>
+					</td>
+					<td className="px-4 py-3">
+						<StatusBadge status={review.status} />
+					</td>
+					<td className="whitespace-nowrap px-4 py-3 text-muted-foreground">
+						{formatDate(review.createdAt)}
+					</td>
+					<td className="px-4 py-3 text-right">
+						{deleteConfirm === review.id ? (
+							<span className="inline-flex items-center gap-1.5">
+								<span className="text-muted-foreground text-xs">Delete?</span>
+								<button
+									type="button"
+									disabled={actionLoading === review.id}
+									onClick={() => handleDelete(review.id)}
+									className="rounded px-2 py-1 font-medium text-red-600 text-xs hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"
+								>
+									Confirm
+								</button>
+								<button
+									type="button"
+									onClick={() => setDeleteConfirm(null)}
+									className="rounded px-2 py-1 font-medium text-muted-foreground text-xs hover:bg-muted"
+								>
+									Cancel
+								</button>
+							</span>
+						) : (
+							<span className="inline-flex items-center gap-1">
+								<a
+									href={`/admin/reviews/${review.id}`}
+									className="rounded px-2 py-1 font-medium text-foreground text-xs hover:bg-muted"
+								>
+									View
+								</a>
+								{review.status !== "approved" && (
+									<button
+										type="button"
+										disabled={actionLoading === review.id}
+										onClick={() => handleApprove(review.id)}
+										className="rounded px-2 py-1 font-medium text-emerald-600 text-xs hover:bg-emerald-50 disabled:opacity-50 dark:text-emerald-400 dark:hover:bg-emerald-950"
+									>
+										Approve
+									</button>
+								)}
+								{review.status !== "rejected" && (
+									<button
+										type="button"
+										disabled={actionLoading === review.id}
+										onClick={() => handleReject(review.id)}
+										className="rounded px-2 py-1 font-medium text-red-600 text-xs hover:bg-red-50 disabled:opacity-50 dark:text-red-400 dark:hover:bg-red-950"
+									>
+										Reject
+									</button>
+								)}
+								<button
+									type="button"
+									disabled={actionLoading === review.id}
+									onClick={() => setDeleteConfirm(review.id)}
+									className="rounded px-2 py-1 font-medium text-destructive text-xs hover:bg-red-50 disabled:opacity-50 dark:hover:bg-red-950"
+								>
+									Delete
+								</button>
+							</span>
+						)}
+					</td>
+				</tr>
+			))
+		);
+
+	return (
+		<ReviewListTemplate
+			total={total}
+			statusFilters={STATUS_FILTERS}
+			statusFilter={statusFilter}
+			onFilterChange={handleFilterChange}
+			error={error}
+			tableBody={tableBody}
+			showingFrom={showingFrom}
+			showingTo={showingTo}
+			hasPrev={hasPrev}
+			hasNext={hasNext}
+			loading={loading}
+			onPrevPage={() => setSkip((s) => Math.max(0, s - PAGE_SIZE))}
+			onNextPage={() => setSkip((s) => s + PAGE_SIZE)}
+		/>
+	);
+}

package/src/admin/components/review-moderation.mdx

@@ -0,0 +1,3 @@
+<div>
+  {props.content}
+</div>