From 797b0e854d4199603008ebabc7a32183b8bd9c0d Mon Sep 17 00:00:00 2001
From: waterWang <water@users.noreply.github.com>
Date: Sun, 2 Aug 2026 04:56:06 +0800
Subject: [PATCH] feat: add Reputation Score Dashboard with filterable review
 history (Closes #27)

- Create reputation route at /reputation
- Add ReputationScoreCard component with star rating, distribution and category breakdown
- Add ReviewHistory component with category filtering and pagination
- Add reputation types and mock data in lib/reputation.ts
- Responsive two-column layout (score card + review list)
- Use react-icons/hi (Heroicons) matching existing project conventions
- All typechecks and lint pass
---
 src/app/reputation/page.tsx            |  30 +++++
 src/components/ReputationScoreCard.tsx | 111 ++++++++++++++++
 src/components/ReviewHistory.tsx       | 125 +++++++++++++++++
 src/lib/reputation.ts                  | 177 +++++++++++++++++++++++++
 4 files changed, 443 insertions(+)
 create mode 100644 src/app/reputation/page.tsx
 create mode 100644 src/components/ReputationScoreCard.tsx
 create mode 100644 src/components/ReviewHistory.tsx
 create mode 100644 src/lib/reputation.ts

diff --git a/src/app/reputation/page.tsx b/src/app/reputation/page.tsx
new file mode 100644
index 0000000..7518a9b
--- /dev/null
+++ b/src/app/reputation/page.tsx
@@ -0,0 +1,30 @@
+import { getMockReputationScore } from "@/lib/reputation";
+import ReputationScoreCard from "@/components/ReputationScoreCard";
+import ReviewHistory from "@/components/ReviewHistory";
+
+export default function ReputationPage() {
+  const score = getMockReputationScore();
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 py-8 space-y-8">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-3xl font-bold text-navy">Reputation Dashboard</h1>
+        <p className="text-muted mt-1">
+          View your aggregate reputation score and browse through provider reviews.
+        </p>
+      </div>
+
+      {/* Layout: Score Card + Review History */}
+      <div className="grid grid-cols-1 lg:grid-cols-[380px_1fr] gap-8">
+        <aside className="space-y-6">
+          <ReputationScoreCard score={score} />
+        </aside>
+        <section>
+          <h2 className="text-xl font-semibold text-ink mb-4">Review History</h2>
+          <ReviewHistory />
+        </section>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ReputationScoreCard.tsx b/src/components/ReputationScoreCard.tsx
new file mode 100644
index 0000000..69e1e4c
--- /dev/null
+++ b/src/components/ReputationScoreCard.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { HiStar } from "react-icons/hi";
+import Card from "@/components/ui/Card";
+import type { ReputationScore } from "@/lib/reputation";
+
+interface ReputationScoreCardProps {
+  score: ReputationScore;
+}
+
+function StarRating({ value, max = 5 }: { value: number; max?: number }) {
+  const full = Math.floor(value);
+  const hasHalf = value - full >= 0.25;
+  const stars = [];
+
+  for (let i = 1; i <= max; i++) {
+    if (i <= full) {
+      stars.push(
+        <HiStar key={i} size={18} className="fill-gold text-gold" aria-hidden="true" />
+      );
+    } else if (i === full + 1 && hasHalf) {
+      stars.push(
+        <span key={i} className="relative" aria-hidden="true">
+          <HiStar size={18} className="text-line" />
+          <span className="absolute inset-0 overflow-hidden" style={{ width: "50%" }}>
+            <HiStar size={18} className="fill-gold text-gold" />
+          </span>
+        </span>
+      );
+    } else {
+      stars.push(
+        <HiStar key={i} size={18} className="text-line" aria-hidden="true" />
+      );
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-0.5" role="img" aria-label={`${value} out of ${max} stars`}>
+      {stars}
+    </div>
+  );
+}
+
+function CategoryBar({ label, value }: { label: string; value: number }) {
+  const pct = (value / 5) * 100;
+  return (
+    <div className="flex items-center gap-3">
+      <span className="w-28 text-sm text-muted shrink-0">{label}</span>
+      <div className="flex-1 h-2 rounded-full bg-line overflow-hidden">
+        <div
+          className="h-full rounded-full bg-gold transition-all duration-500"
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+      <span className="w-8 text-right text-sm font-semibold text-ink tabular-nums">
+        {value.toFixed(1)}
+      </span>
+    </div>
+  );
+}
+
+export default function ReputationScoreCard({ score }: ReputationScoreCardProps) {
+  return (
+    <Card className="p-6 space-y-6">
+      {/* Overall Score */}
+      <div className="text-center">
+        <div className="text-5xl font-bold text-navy tabular-nums">{score.overall}</div>
+        <StarRating value={score.overall} />
+        <p className="text-sm text-muted mt-1">
+          Based on {score.totalReviews} review{score.totalReviews !== 1 ? "s" : ""}
+        </p>
+      </div>
+
+      {/* Rating Distribution */}
+      <div className="space-y-1.5">
+        {[
+          { label: "5★", count: score.fiveStar },
+          { label: "4★", count: score.fourStar },
+          { label: "3★", count: score.threeStar },
+          { label: "2★", count: score.twoStar },
+          { label: "1★", count: score.oneStar },
+        ].map(({ label, count }) => {
+          const pct = score.totalReviews > 0 ? (count / score.totalReviews) * 100 : 0;
+          return (
+            <div key={label} className="flex items-center gap-2 text-sm">
+              <span className="w-8 text-muted">{label}</span>
+              <div className="flex-1 h-2 rounded-full bg-line overflow-hidden">
+                <div
+                  className="h-full rounded-full bg-navy/60 transition-all duration-500"
+                  style={{ width: `${pct}%` }}
+                />
+              </div>
+              <span className="w-8 text-right text-muted tabular-nums">{count}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Category Breakdown */}
+      <div className="pt-4 border-t border-line space-y-3">
+        <h4 className="text-sm font-semibold text-ink/80 uppercase tracking-wide">
+          By Category
+        </h4>
+        <CategoryBar label="Quality" value={score.categories.quality} />
+        <CategoryBar label="Punctuality" value={score.categories.punctuality} />
+        <CategoryBar label="Communication" value={score.categories.communication} />
+        <CategoryBar label="Cleanliness" value={score.categories.cleanliness} />
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ReviewHistory.tsx b/src/components/ReviewHistory.tsx
new file mode 100644
index 0000000..0ef1346
--- /dev/null
+++ b/src/components/ReviewHistory.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { HiStar, HiChevronLeft, HiChevronRight } from "react-icons/hi";
+import Card from "@/components/ui/Card";
+import {
+  getMockReviews,
+  getMockReputationScore,
+  REVIEW_CATEGORIES,
+  type ReviewCategory,
+} from "@/lib/reputation";
+
+function ReviewCard({ review }: { review: import("@/lib/reputation").Review }) {
+  return (
+    <Card className="p-5 space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full bg-navy-tint flex items-center justify-center text-navy font-bold text-sm">
+            {review.reviewerName.charAt(0)}
+          </div>
+          <div>
+            <p className="text-sm font-semibold text-ink">{review.reviewerName}</p>
+            <p className="text-xs text-muted">{review.jobTitle}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-0.5">
+          {Array.from({ length: 5 }, (_, i) => (
+            <HiStar
+              key={i}
+              size={14}
+              className={i < review.rating ? "fill-gold text-gold" : "text-line"}
+              aria-hidden="true"
+            />
+          ))}
+        </div>
+      </div>
+      <p className="text-sm text-ink/80 leading-relaxed">{review.comment}</p>
+      <time className="text-xs text-muted block">
+        {new Date(review.createdAt).toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        })}
+      </time>
+    </Card>
+  );
+}
+
+export default function ReviewHistory() {
+  const [category, setCategory] = useState<ReviewCategory>("all");
+  const [page, setPage] = useState(1);
+
+  const score = useMemo(() => getMockReputationScore(), []);
+  const { reviews, totalPages, total } = useMemo(
+    () => getMockReviews(category, page),
+    [category, page]
+  );
+
+  const handleCategoryChange = (newCategory: ReviewCategory) => {
+    setCategory(newCategory);
+    setPage(1);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Filter */}
+      <div className="flex flex-wrap gap-2">
+        {REVIEW_CATEGORIES.map((cat) => (
+          <button
+            key={cat.value}
+            onClick={() => handleCategoryChange(cat.value)}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+              category === cat.value
+                ? "bg-navy text-white"
+                : "bg-line/50 text-muted hover:bg-line hover:text-ink"
+            }`}
+          >
+            {cat.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Review list */}
+      {reviews.length === 0 ? (
+        <div className="text-center py-12 text-muted">
+          <p>No reviews found for this category.</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {reviews.map((review) => (
+            <ReviewCard key={review.id} review={review} />
+          ))}
+        </div>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-4 pt-2">
+          <button
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={page <= 1}
+            className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-muted hover:text-ink hover:bg-line/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+            aria-label="Previous page"
+          >
+            <HiChevronLeft size={16} />
+            Previous
+          </button>
+          <span className="text-sm text-muted tabular-nums">
+            Page {page} of {totalPages}
+            <span className="ml-2 text-xs text-muted/60">({total} total)</span>
+          </span>
+          <button
+            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+            disabled={page >= totalPages}
+            className="inline-flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium text-muted hover:text-ink hover:bg-line/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+            aria-label="Next page"
+          >
+            Next
+            <HiChevronRight size={16} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/lib/reputation.ts b/src/lib/reputation.ts
new file mode 100644
index 0000000..4b67d11
--- /dev/null
+++ b/src/lib/reputation.ts
@@ -0,0 +1,177 @@
+export interface Review {
+  id: string;
+  providerId: string;
+  providerName: string;
+  rating: number;
+  comment: string;
+  reviewerName: string;
+  jobTitle: string;
+  createdAt: string; // ISO date string
+  category: "cleanliness" | "punctuality" | "quality" | "communication" | "overall";
+}
+
+export interface ReputationScore {
+  overall: number;
+  totalReviews: number;
+  fiveStar: number;
+  fourStar: number;
+  threeStar: number;
+  twoStar: number;
+  oneStar: number;
+  categories: {
+    cleanliness: number;
+    punctuality: number;
+    quality: number;
+    communication: number;
+  };
+}
+
+export type ReviewCategory = Review["category"] | "all";
+
+export const REVIEW_CATEGORIES: { value: ReviewCategory; label: string }[] = [
+  { value: "all", label: "All Reviews" },
+  { value: "overall", label: "Overall" },
+  { value: "quality", label: "Quality" },
+  { value: "punctuality", label: "Punctuality" },
+  { value: "communication", label: "Communication" },
+  { value: "cleanliness", label: "Cleanliness" },
+];
+
+const REVIEWS_PER_PAGE = 5;
+
+const MOCK_REVIEWS: Review[] = [
+  {
+    id: "rev-001",
+    providerId: "pro-1",
+    providerName: "Grace Akinyi",
+    rating: 5,
+    comment: "Excellent work! Grace rewired our entire living room and did a fantastic job. Very professional and clean.",
+    reviewerName: "James Mwangi",
+    jobTitle: "Electrical Rewiring",
+    createdAt: "2026-07-28T10:30:00Z",
+    category: "quality",
+  },
+  {
+    id: "rev-002",
+    providerId: "pro-1",
+    providerName: "Grace Akinyi",
+    rating: 5,
+    comment: "Arrived on time, finished ahead of schedule. Highly recommended for any electrical work.",
+    reviewerName: "Sarah Wanjiku",
+    jobTitle: "Outlet Installation",
+    createdAt: "2026-07-25T14:15:00Z",
+    category: "punctuality",
+  },
+  {
+    id: "rev-003",
+    providerId: "pro-1",
+    providerName: "Grace Akinyi",
+    rating: 4,
+    comment: "Good work overall. The wiring was done well, though there was some dust left behind. Would hire again.",
+    reviewerName: "Peter Kamau",
+    jobTitle: "Home Rewiring",
+    createdAt: "2026-07-20T09:00:00Z",
+    category: "cleanliness",
+  },
+  {
+    id: "rev-004",
+    providerId: "pro-1",
+    providerName: "Grace Akinyi",
+    rating: 5,
+    comment: "Grace explained everything clearly before starting. Very transparent pricing and great communication.",
+    reviewerName: "Faith Nyambura",
+    jobTitle: "Security Light Installation",
+    createdAt: "2026-07-18T16:45:00Z",
+    category: "communication",
+  },
+  {
+    id: "rev-005",
+    providerId: "pro-1",
+    providerName: "Grace Akinyi",
+    rating: 3,
+    comment: "The work was fine but took longer than expected. The quality was acceptable.",
+    reviewerName: "David Ochieng",
+    jobTitle: "Ceiling Fan Installation",
+    createdAt: "2026-07-15T11:20:00Z",
+    category: "quality",
+  },
+  {
+    id: "rev-006",
+    providerId: "pro-1",
+    providerName: "Grace Akinyi",
+    rating: 5,
+    comment: "Best electrician I've ever hired! Very thorough and safety-conscious. My family feels much safer now.",
+    reviewerName: "Mary Atieno",
+    jobTitle: "Full House Rewiring",
+    createdAt: "2026-07-12T08:30:00Z",
+    category: "overall",
+  },
+  {
+    id: "rev-007",
+    providerId: "pro-1",
+    providerName: "Grace Akinyi",
+    rating: 4,
+    comment: "Professional service. Cleaned up after herself and the work passed inspection without issues.",
+    reviewerName: "John Kiprop",
+    jobTitle: "Circuit Panel Upgrade",
+    createdAt: "2026-07-08T13:00:00Z",
+    category: "cleanliness",
+  },
+  {
+    id: "rev-008",
+    providerId: "pro-1",
+    providerName: "Grace Akinyi",
+    rating: 5,
+    comment: "Grace was very responsive to messages and accommodated our tight schedule. Outstanding communication.",
+    reviewerName: "Lucy Wambui",
+    jobTitle: "Emergency Electrical Repair",
+    createdAt: "2026-07-05T19:15:00Z",
+    category: "communication",
+  },
+];
+
+export function getMockReputationScore(): ReputationScore {
+  const reviews = MOCK_REVIEWS;
+  const total = reviews.length;
+  const avg = reviews.reduce((sum, r) => sum + r.rating, 0) / total;
+
+  const catReviews = reviews.filter((r) => r.category !== "overall");
+  const byCategory = (cat: Review["category"]) => {
+    const filtered = catReviews.filter((r) => r.category === cat);
+    if (filtered.length === 0) return 0;
+    return filtered.reduce((sum, r) => sum + r.rating, 0) / filtered.length;
+  };
+
+  return {
+    overall: Math.round(avg * 10) / 10,
+    totalReviews: total,
+    fiveStar: reviews.filter((r) => r.rating === 5).length,
+    fourStar: reviews.filter((r) => r.rating === 4).length,
+    threeStar: reviews.filter((r) => r.rating === 3).length,
+    twoStar: reviews.filter((r) => r.rating === 2).length,
+    oneStar: reviews.filter((r) => r.rating === 1).length,
+    categories: {
+      cleanliness: Math.round(byCategory("cleanliness") * 10) / 10,
+      punctuality: Math.round(byCategory("punctuality") * 10) / 10,
+      quality: Math.round(byCategory("quality") * 10) / 10,
+      communication: Math.round(byCategory("communication") * 10) / 10,
+    },
+  };
+}
+
+export function getMockReviews(
+  category: ReviewCategory = "all",
+  page: number = 1
+): { reviews: Review[]; totalPages: number; total: number } {
+  const filtered =
+    category === "all"
+      ? MOCK_REVIEWS
+      : MOCK_REVIEWS.filter((r) => r.category === category);
+
+  const total = filtered.length;
+  const totalPages = Math.max(1, Math.ceil(total / REVIEWS_PER_PAGE));
+  const start = (page - 1) * REVIEWS_PER_PAGE;
+  const paged = filtered.slice(start, start + REVIEWS_PER_PAGE);
+
+  return { reviews: paged, totalPages, total };
+}
\ No newline at end of file