feat: implement review system UI

app/dashboard/projects/[id]/page.tsx

@@ -16,6 +16,9 @@ import {
   EscrowStatusTracker,
   type EscrowStage,
 } from "@/components/dashboard/escrow-status-tracker";
+import { ReviewsList } from "@/components/ui/reviews-list";
+import { AverageScoreDisplay } from "@/components/ui/average-score-display";
+import { ReviewsSummary } from "@/components/ui/reviews-summary";
 
 interface Milestone {
   id: string;
@@ -419,6 +422,45 @@ export default function ProjectDetailPage() {
           </Card>
         </div>
 
+        {/* Ratings & Reviews Summary */}
+        {project.freelancer && (
+          <div className="space-y-6">
+            <AverageScoreDisplay
+              reviews={[{
+                id: 0,
+                contractId: 0,
+                reviewerId: 0,
+                reviewerName: "Client",
+                freelancerId: parseInt(project.freelancer?.username?.replace('id-', '') || '0', 10),
+                freelancerName: project.freelancer.display_name || project.freelancer.username || "",
+                rating: project.freelancer.avg_rating || 0,
+                comment: "",
+                verified: true,
+                createdAt: new Date().toISOString(),
+              }]}
+              className="w-full"
+              showCount={true}
+              size="md"
+            />
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <ReviewsSummary
+                reviewCount={project.freelancer.total_reviews || 0}
+                averageRating={project.freelancer.avg_rating || 0}
+                verifiedCount={project.freelancer.total_reviews || 0}
+              />
+
+              <Card className="p-5 bg-card/50 border-border/40 backdrop-blur-sm rounded-xl">
+                <h3 className="text-lg font-semibold text-foreground mb-4">Recent Reviews</h3>
+                <ReviewsList
+                  freelancerId={parseInt(project.freelancer?.username?.replace('id-', '') || '0', 10)}
+                  className="space-y-4"
+                />
+              </Card>
+            </div>
+          </div>
+        )}
+
         {/* Tabs */}
         <Tabs defaultValue="milestones" className="w-full">
           <TabsList className="grid w-full grid-cols-2 bg-card/50 border-border/40 p-1">

components/ui/average-score-display.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { Star } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ReviewCard } from "@/components/ui/review-card";
+
+export interface Review {
+  id: number;
+  contractId: number;
+  reviewerId: number;
+  reviewerName: string;
+  reviewerAvatar?: string;
+  freelancerId: number;
+  freelancerName: string;
+  rating: number;
+  comment?: string;
+  verified: boolean;
+  createdAt: string;
+}
+
+export interface AverageScoreDisplayProps {
+  reviews: Review[];
+  className?: string;
+  showCount?: boolean;
+  size?: "sm" | "md" | "lg";
+}
+
+export function AverageScoreDisplay({
+  reviews,
+  className,
+  showCount = true,
+  size = "md",
+}: AverageScoreDisplayProps) {
+  const sizeConfig = {
+    sm: {
+      container: "px-3 py-1.5 rounded-lg",
+      star: "h-3.5 w-3.5",
+      text: "text-sm",
+      value: "text-base",
+    },
+    md: {
+      container: "px-4 py-2 rounded-xl",
+      star: "h-5 w-5",
+      text: "text-base",
+      value: "text-lg",
+    },
+    lg: {
+      container: "px-5 py-3 rounded-2xl",
+      star: "h-6 w-6",
+      text: "text-lg",
+      value: "text-xl",
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  if (reviews.length === 0) {
+    return (
+      <div className={cn("text-center text-muted-foreground", config.text)}>
+        No reviews available
+      </div>
+    );
+  }
+
+  const averageRating = reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length;
+  const maxRating = 5;
+
+  const getRatingColor = (rating: number) => {
+    if (rating >= 4.5) return "text-emerald-400";
+    if (rating >= 4.0) return "text-green-400";
+    if (rating >= 3.5) return "text-lime-400";
+    if (rating >= 3.0) return "text-yellow-400";
+    if (rating >= 2.0) return "text-orange-400";
+    return "text-destructive";
+  };
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 bg-card/50 border border-border/60 rounded-xl",
+        config.container,
+        className
+      )}
+    >
+      <div className="flex items-center gap-1">
+        <Star className={cn("fill-current", config.star, getRatingColor(averageRating))} />
+        <span className={cn("font-bold", config.value, getRatingColor(averageRating))}>
+          {averageRating.toFixed(1)}
+        </span>
+      </div>
+
+      {showCount && (
+        <span className={cn("text-muted-foreground", config.text)}>
+          ({reviews.length} review{reviews.length !== 1 ? "s" : ""})
+        </span>
+      )}
+    </div>
+  );
+}

components/ui/review-card.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { Star, ShieldCheck, User, Calendar } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface Review {
+  id: number;
+  contractId: number;
+  reviewerId: number;
+  reviewerName: string;
+  reviewerAvatar?: string;
+  freelancerId: number;
+  freelancerName: string;
+  rating: number;
+  comment?: string;
+  verified: boolean;
+  createdAt: string;
+}
+
+function RatingStars({ rating, size = "sm", interactive = false }: {
+  rating: number;
+  size?: "sm" | "md" | "lg";
+  interactive?: boolean;
+}) {
+  const sizeConfig: Record<string, string> = {
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6",
+  };
+  const stars = [];
+
+  for (let i = 0; i < 5; i++) {
+    const filled = interactive ? i < rating : i < Math.floor(rating);
+    stars.push(
+      <Star
+        key={i}
+        className={cn(
+          sizeConfig[size],
+          filled ? "fill-amber-400 text-amber-400" : "text-muted-foreground/40"
+        )}
+      />
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      {stars}
+      {!interactive && rating > 0 && (
+        <span className="ml-1 text-xs font-medium text-foreground">
+          {rating.toFixed(1)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function ReviewCard({ review }: { review: Review }) {
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+
+  return (
+    <article className="group rounded-xl border border-border/60 bg-card/50 p-5 backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:bg-card/70">
+      <header className="mb-4 flex items-start justify-between">
+        <div className="flex items-start gap-3">
+          {review.reviewerAvatar ? (
+            <img
+              src={review.reviewerAvatar}
+              alt={review.reviewerName}
+              className="h-10 w-10 rounded-full object-cover border border-border/50"
+            />
+          ) : (
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted/50 border border-border/50">
+              <User className="h-5 w-5 text-muted-foreground" />
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <p className="font-semibold text-foreground truncate">
+                {review.reviewerName}
+              </p>
+              {review.verified && (
+                <span className="flex items-center gap-1 text-xs text-emerald-400 font-medium">
+                  <ShieldCheck className="h-3.5 w-3.5" /> Verified
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mt-0.5">
+              <Calendar className="h-3.5 w-3.5" />
+              <span>{formatDate(review.createdAt)}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <RatingStars rating={review.rating} size="md" />
+        </div>
+      </header>
+
+      {review.comment && (
+        <p className="mt-3 text-sm text-muted-foreground leading-relaxed">
+          {review.comment}
+        </p>
+      )}
+
+      <footer className="mt-4 flex items-center justify-between border-t border-border/40 pt-4">
+        <div className="text-xs text-muted-foreground">
+          Contract #{review.contractId}
+        </div>
+      </footer>
+    </article>
+  );
+}