From e9307d5ae7cac91d63ad9afb12d9964f0c98c701 Mon Sep 17 00:00:00 2001
From: Oluwatos94 <akinbowat@gmail.com>
Date: Sun, 22 Feb 2026 06:54:31 +0100
Subject: [PATCH 1/5] feat: Implement Earnings & Payout Tracking

---
 app/profile/[userId]/page.tsx              | 437 +++++++++++++--------
 components/reputation/earnings-summary.tsx |  97 +++++
 2 files changed, 363 insertions(+), 171 deletions(-)
 create mode 100644 components/reputation/earnings-summary.tsx

diff --git a/app/profile/[userId]/page.tsx b/app/profile/[userId]/page.tsx
index 743a525..6085d0e 100644
--- a/app/profile/[userId]/page.tsx
+++ b/app/profile/[userId]/page.tsx
@@ -4,7 +4,15 @@ import { useContributorReputation } from "@/hooks/use-reputation";
 import { useBounties } from "@/hooks/use-bounties";
 import { ReputationCard } from "@/components/reputation/reputation-card";
 import { CompletionHistory } from "@/components/reputation/completion-history";
-import { MyClaims, type MyClaim } from "@/components/reputation/my-claims";
+import {
+  MyClaims,
+  type MyClaim,
+  normalizeStatus,
+} from "@/components/reputation/my-claims";
+import {
+  EarningsSummary,
+  type EarningsSummary as EarningsSummaryType,
+} from "@/components/reputation/earnings-summary";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -14,184 +22,271 @@ import { useParams } from "next/navigation";
 import { useMemo } from "react";
 
 export default function ProfilePage() {
-    const params = useParams();
-    const userId = params.userId as string;
-    const { data: reputation, isLoading, error } = useContributorReputation(userId);
-    const { data: bountyResponse } = useBounties();
-
-    const MAX_MOCK_HISTORY = 50;
-
-    const mockHistory = useMemo(() => {
-        if (!reputation) return [];
-        const count = Math.min(reputation.stats.totalCompleted ?? 0, MAX_MOCK_HISTORY);
-        return Array(count).fill(null).map((_, i) => ({
-            id: `bounty-${i}`,
-            bountyId: `b-${i}`,
-            bountyTitle: `Implemented feature #${100 + i}`,
-            projectName: "Drips Protocol",
-            projectLogoUrl: null,
-            difficulty: ["BEGINNER", "INTERMEDIATE", "ADVANCED"][i % 3] as "BEGINNER" | "INTERMEDIATE" | "ADVANCED",
-            rewardAmount: 500,
-            rewardCurrency: "USDC",
-            claimedAt: "2023-01-01T00:00:00Z",
-            completedAt: "2024-01-15T12:00:00Z",
-            completionTimeHours: 48,
-            maintainerRating: 5,
-            maintainerFeedback: "Great work!",
-            pointsEarned: 150
-        }));
-    }, [reputation]);
-
-    const myClaims = useMemo<MyClaim[]>(() => {
-        const bounties = bountyResponse?.data ?? [];
-
-        return bounties
-            .filter((bounty) => bounty.claimedBy === userId)
-            .map((bounty) => {
-                let status = "active";
-
-                if (bounty.status === "closed") {
-                    status = "completed";
-                } else if (bounty.status === "claimed" && bounty.claimExpiresAt) {
-                    const claimExpiry = new Date(bounty.claimExpiresAt);
-                    if (!Number.isNaN(claimExpiry.getTime()) && claimExpiry < new Date()) {
-                        status = "in-review";
-                    }
-                }
-
-                return {
-                    bountyId: bounty.id,
-                    title: bounty.issueTitle,
-                    status,
-                    rewardAmount: bounty.rewardAmount ?? undefined,
-                };
-            });
-    }, [bountyResponse?.data, userId]);
-
-    if (isLoading) {
-        return (
-            <div className="container mx-auto py-8">
-                <Skeleton className="h-10 w-32 mb-8" />
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <Skeleton className="h-100 md:col-span-1" />
-                    <Skeleton className="h-100 md:col-span-2" />
-                </div>
-            </div>
-        );
-    }
+  const params = useParams();
+  const userId = params.userId as string;
+  const {
+    data: reputation,
+    isLoading,
+    error,
+  } = useContributorReputation(userId);
+  const { data: bountyResponse } = useBounties();
+
+  const MAX_MOCK_HISTORY = 50;
+
+  const mockHistory = useMemo(() => {
+    if (!reputation) return [];
+    const count = Math.min(
+      reputation.stats.totalCompleted ?? 0,
+      MAX_MOCK_HISTORY,
+    );
+    return Array(count)
+      .fill(null)
+      .map((_, i) => ({
+        id: `bounty-${i}`,
+        bountyId: `b-${i}`,
+        bountyTitle: `Implemented feature #${100 + i}`,
+        projectName: "Drips Protocol",
+        projectLogoUrl: null,
+        difficulty: ["BEGINNER", "INTERMEDIATE", "ADVANCED"][i % 3] as
+          | "BEGINNER"
+          | "INTERMEDIATE"
+          | "ADVANCED",
+        rewardAmount: 500,
+        rewardCurrency: "USDC",
+        claimedAt: "2023-01-01T00:00:00Z",
+        completedAt: "2024-01-15T12:00:00Z",
+        completionTimeHours: 48,
+        maintainerRating: 5,
+        maintainerFeedback: "Great work!",
+        pointsEarned: 150,
+      }));
+  }, [reputation]);
+
+  const earningsSummary = useMemo<EarningsSummaryType>(() => {
+    const currency = reputation?.stats.earningsCurrency ?? "USDC";
+    const completedStatuses = ["completed", "closed", "accepted", "done"];
+    const pendingStatuses = [
+      "active",
+      "claimed",
+      "in-progress",
+      "in-review",
+      "in review",
+      "review",
+      "pending",
+      "under-review",
+    ];
 
-    if (error) {
-        // Check if it's a 404 (Not Found)
-        const apiError = error as { status?: number; message?: string };
-        const isNotFound = apiError?.status === 404 || apiError?.message?.includes("404");
-
-        if (isNotFound) {
-            return (
-                <div className="container mx-auto py-16 text-center">
-                    <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
-                    <h1 className="text-2xl font-bold mb-2">Profile Not Found</h1>
-                    <p className="text-muted-foreground mb-6">
-                        We could not find a reputation profile for this user.
-                    </p>
-                    <Button asChild variant="outline">
-                        <Link href="/">Return Home</Link>
-                    </Button>
-                </div>
-            );
+    const allBounties = bountyResponse?.data ?? [];
+    const userBounties = allBounties.filter((b) => b.claimedBy === userId);
+
+    let totalEarned = 0;
+    let pendingAmount = 0;
+    const payoutHistory: EarningsSummaryType["payoutHistory"] = [];
+
+    for (const bounty of userBounties) {
+      const amount = bounty.rewardAmount ?? 0;
+      let status = "active";
+      if (bounty.status === "closed") {
+        status = "completed";
+      } else if (bounty.status === "claimed" && bounty.claimExpiresAt) {
+        const expiry = new Date(bounty.claimExpiresAt);
+        if (!Number.isNaN(expiry.getTime()) && expiry < new Date()) {
+          status = "in-review";
         }
+      }
 
-        // Generic Error
-        return (
-            <div className="container mx-auto py-16 text-center">
-                <AlertCircle className="w-12 h-12 mx-auto text-destructive mb-4" />
-                <h1 className="text-2xl font-bold mb-2">Something went wrong</h1>
-                <p className="text-muted-foreground mb-6">
-                    We encountered an error while loading the profile.
-                </p>
-                <Button variant="outline" onClick={() => window.location.reload()}>
-                    Try Again
-                </Button>
-            </div>
-        );
+      const normalized = normalizeStatus(status);
+      if (completedStatuses.some((s) => normalizeStatus(s) === normalized)) {
+        totalEarned += amount;
+        payoutHistory.push({
+          amount,
+          date: bounty.claimExpiresAt ?? new Date().toISOString(),
+          status: "completed",
+        });
+      } else if (
+        pendingStatuses.some((s) => normalizeStatus(s) === normalized)
+      ) {
+        pendingAmount += amount;
+        if (normalized === "in-review") {
+          payoutHistory.push({
+            amount,
+            date: bounty.claimExpiresAt ?? new Date().toISOString(),
+            status: "processing",
+          });
+        }
+      }
     }
 
-    if (!reputation) {
-        return (
-            <div className="container mx-auto py-16 text-center">
-                <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
-                <h1 className="text-2xl font-bold mb-2">Profile Not Found</h1>
-                <p className="text-muted-foreground mb-6">
-                    We could not find a reputation profile for this user.
-                </p>
-                <Button asChild variant="outline">
-                    <Link href="/">Return Home</Link>
-                </Button>
-            </div>
-        );
+    // If no real claim data, fall back to reputation stats
+    if (userBounties.length === 0 && reputation) {
+      totalEarned = reputation.stats.totalEarnings;
     }
 
+    return { totalEarned, pendingAmount, currency, payoutHistory };
+  }, [bountyResponse?.data, userId, reputation]);
+
+  const myClaims = useMemo<MyClaim[]>(() => {
+    const bounties = bountyResponse?.data ?? [];
+
+    return bounties
+      .filter((bounty) => bounty.claimedBy === userId)
+      .map((bounty) => {
+        let status = "active";
+
+        if (bounty.status === "closed") {
+          status = "completed";
+        } else if (bounty.status === "claimed" && bounty.claimExpiresAt) {
+          const claimExpiry = new Date(bounty.claimExpiresAt);
+          if (
+            !Number.isNaN(claimExpiry.getTime()) &&
+            claimExpiry < new Date()
+          ) {
+            status = "in-review";
+          }
+        }
+
+        return {
+          bountyId: bounty.id,
+          title: bounty.issueTitle,
+          status,
+          rewardAmount: bounty.rewardAmount ?? undefined,
+        };
+      });
+  }, [bountyResponse?.data, userId]);
+
+  if (isLoading) {
     return (
-        <div className="container max-w-6xl mx-auto py-8 px-4">
-            <Button asChild variant="ghost" size="sm" className="mb-6 -ml-2 text-muted-foreground">
-                <Link href="/">
-                    <ChevronLeft className="w-4 h-4 mr-1" />
-                    Back to Home
-                </Link>
-            </Button>
-
-            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-                {/* Left Sidebar: Reputation Card */}
-                <div className="lg:col-span-4 space-y-6">
-                    <ReputationCard reputation={reputation} />
-
-                    {/* Additional Sidebar Info could go here */}
-                </div>
-
-                {/* Main Content: Activity & History */}
-                <div className="lg:col-span-8">
-                    <Tabs defaultValue="history" className="w-full">
-                        <TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent">
-                            <TabsTrigger
-                                value="history"
-                                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
-                            >
-                                Bounty History
-                            </TabsTrigger>
-                            <TabsTrigger
-                                value="analytics"
-                                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
-                            >
-                                Analytics
-                            </TabsTrigger>
-                            <TabsTrigger
-                                value="claims"
-                                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
-                            >
-                                My Claims
-                            </TabsTrigger>
-                        </TabsList>
-
-                        <TabsContent value="history" className="mt-6">
-                            <h2 className="text-xl font-bold mb-4">Activity History</h2>
-                            <CompletionHistory
-                                records={mockHistory}
-                                description={`Showing the last ${mockHistory.length} completed bounties.`}
-                            />
-                        </TabsContent>
-
-                        <TabsContent value="analytics" className="mt-6">
-                            <div className="p-8 border rounded-lg text-center text-muted-foreground bg-secondary/5">
-                                Detailed analytics coming soon.
-                            </div>
-                        </TabsContent>
-
-                        <TabsContent value="claims" className="mt-6">
-                            <h2 className="text-xl font-bold mb-4">My Claims</h2>
-                            <MyClaims claims={myClaims} />
-                        </TabsContent>
-                    </Tabs>
-                </div>
-            </div>
+      <div className="container mx-auto py-8">
+        <Skeleton className="h-10 w-32 mb-8" />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <Skeleton className="h-100 md:col-span-1" />
+          <Skeleton className="h-100 md:col-span-2" />
         </div>
+      </div>
     );
+  }
+
+  if (error) {
+    // Check if it's a 404 (Not Found)
+    const apiError = error as { status?: number; message?: string };
+    const isNotFound =
+      apiError?.status === 404 || apiError?.message?.includes("404");
+
+    if (isNotFound) {
+      return (
+        <div className="container mx-auto py-16 text-center">
+          <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+          <h1 className="text-2xl font-bold mb-2">Profile Not Found</h1>
+          <p className="text-muted-foreground mb-6">
+            We could not find a reputation profile for this user.
+          </p>
+          <Button asChild variant="outline">
+            <Link href="/">Return Home</Link>
+          </Button>
+        </div>
+      );
+    }
+
+    // Generic Error
+    return (
+      <div className="container mx-auto py-16 text-center">
+        <AlertCircle className="w-12 h-12 mx-auto text-destructive mb-4" />
+        <h1 className="text-2xl font-bold mb-2">Something went wrong</h1>
+        <p className="text-muted-foreground mb-6">
+          We encountered an error while loading the profile.
+        </p>
+        <Button variant="outline" onClick={() => window.location.reload()}>
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  if (!reputation) {
+    return (
+      <div className="container mx-auto py-16 text-center">
+        <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+        <h1 className="text-2xl font-bold mb-2">Profile Not Found</h1>
+        <p className="text-muted-foreground mb-6">
+          We could not find a reputation profile for this user.
+        </p>
+        <Button asChild variant="outline">
+          <Link href="/">Return Home</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container max-w-6xl mx-auto py-8 px-4">
+      <Button
+        asChild
+        variant="ghost"
+        size="sm"
+        className="mb-6 -ml-2 text-muted-foreground"
+      >
+        <Link href="/">
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          Back to Home
+        </Link>
+      </Button>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+        {/* Left Sidebar: Reputation Card */}
+        <div className="lg:col-span-4 space-y-6">
+          <ReputationCard reputation={reputation} />
+
+          {/* Additional Sidebar Info could go here */}
+        </div>
+
+        {/* Main Content: Activity & History */}
+        <div className="lg:col-span-8">
+          <Tabs defaultValue="history" className="w-full">
+            <TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent">
+              <TabsTrigger
+                value="history"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
+              >
+                Bounty History
+              </TabsTrigger>
+              <TabsTrigger
+                value="analytics"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
+              >
+                Analytics
+              </TabsTrigger>
+              <TabsTrigger
+                value="claims"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-4 py-3"
+              >
+                My Claims
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="history" className="mt-6">
+              <h2 className="text-xl font-bold mb-4">Activity History</h2>
+              <CompletionHistory
+                records={mockHistory}
+                description={`Showing the last ${mockHistory.length} completed bounties.`}
+              />
+            </TabsContent>
+
+            <TabsContent value="analytics" className="mt-6">
+              <div className="p-8 border rounded-lg text-center text-muted-foreground bg-secondary/5">
+                Detailed analytics coming soon.
+              </div>
+            </TabsContent>
+
+            <TabsContent value="claims" className="mt-6">
+              <h2 className="text-xl font-bold mb-4">My Claims</h2>
+              <div className="space-y-6">
+                <EarningsSummary earnings={earningsSummary} />
+                <MyClaims claims={myClaims} />
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/components/reputation/earnings-summary.tsx b/components/reputation/earnings-summary.tsx
new file mode 100644
index 0000000..c6028c6
--- /dev/null
+++ b/components/reputation/earnings-summary.tsx
@@ -0,0 +1,97 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatCurrency, formatDate } from "@/helpers/format.helper";
+import { TrendingUp, Clock } from "lucide-react";
+
+export type EarningsSummary = {
+  totalEarned: number;
+  pendingAmount: number;
+  currency: string;
+  payoutHistory: Array<{
+    amount: number;
+    date: string;
+    status: "processing" | "completed";
+  }>;
+};
+
+interface EarningsSummaryProps {
+  earnings: EarningsSummary;
+}
+
+export function EarningsSummary({ earnings }: EarningsSummaryProps) {
+  const currencySymbol =
+    earnings.currency === "USDC" ? "USDC" : earnings.currency;
+
+  return (
+    <div className="space-y-4">
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <Card>
+          <CardHeader className="pb-2 pt-4 px-4">
+            <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+              <TrendingUp className="w-4 h-4" />
+              Total Earned
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-4 pb-4">
+            <p className="text-2xl font-bold">
+              {formatCurrency(earnings.totalEarned, currencySymbol)}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2 pt-4 px-4">
+            <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+              <Clock className="w-4 h-4" />
+              Pending
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-4 pb-4">
+            <p className="text-2xl font-bold">
+              {formatCurrency(earnings.pendingAmount, currencySymbol)}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Payout History */}
+      <Card>
+        <CardHeader className="px-5 pt-5 pb-3">
+          <CardTitle className="text-base">Payout History</CardTitle>
+        </CardHeader>
+        <CardContent className="px-5 pb-5">
+          {earnings.payoutHistory.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No payouts yet.</p>
+          ) : (
+            <div className="space-y-2">
+              {earnings.payoutHistory.map((payout, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between rounded-lg border border-border/60 bg-secondary/5 px-4 py-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <Badge
+                      variant={
+                        payout.status === "completed" ? "default" : "secondary"
+                      }
+                      className="capitalize"
+                    >
+                      {payout.status}
+                    </Badge>
+                    <span className="text-sm text-muted-foreground">
+                      {formatDate(payout.date, "long")}
+                    </span>
+                  </div>
+                  <span className="text-sm font-semibold">
+                    {formatCurrency(payout.amount, currencySymbol)}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

From 9c1214bceafb225380f4c2b5a91f2ff9e39c1af5 Mon Sep 17 00:00:00 2001
From: Oluwatos94 <akinbowat@gmail.com>
Date: Sun, 22 Feb 2026 07:47:42 +0100
Subject: [PATCH 2/5] fix reviews

---
 app/profile/[userId]/page.tsx | 98 +++++++++++++----------------------
 1 file changed, 36 insertions(+), 62 deletions(-)

diff --git a/app/profile/[userId]/page.tsx b/app/profile/[userId]/page.tsx
index 6085d0e..c98a619 100644
--- a/app/profile/[userId]/page.tsx
+++ b/app/profile/[userId]/page.tsx
@@ -4,11 +4,7 @@ import { useContributorReputation } from "@/hooks/use-reputation";
 import { useBounties } from "@/hooks/use-bounties";
 import { ReputationCard } from "@/components/reputation/reputation-card";
 import { CompletionHistory } from "@/components/reputation/completion-history";
-import {
-  MyClaims,
-  type MyClaim,
-  normalizeStatus,
-} from "@/components/reputation/my-claims";
+import { MyClaims, type MyClaim } from "@/components/reputation/my-claims";
 import {
   EarningsSummary,
   type EarningsSummary as EarningsSummaryType,
@@ -21,6 +17,20 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useMemo } from "react";
 
+function deriveBountyStatus(bounty: {
+  status: string;
+  claimExpiresAt?: string | null;
+}): "completed" | "in-review" | "active" {
+  if (bounty.status === "closed") return "completed";
+  if (bounty.status === "claimed" && bounty.claimExpiresAt) {
+    const expiry = new Date(bounty.claimExpiresAt);
+    if (!Number.isNaN(expiry.getTime()) && expiry < new Date()) {
+      return "in-review";
+    }
+  }
+  return "active";
+}
+
 export default function ProfilePage() {
   const params = useParams();
   const userId = params.userId as string;
@@ -64,18 +74,6 @@ export default function ProfilePage() {
 
   const earningsSummary = useMemo<EarningsSummaryType>(() => {
     const currency = reputation?.stats.earningsCurrency ?? "USDC";
-    const completedStatuses = ["completed", "closed", "accepted", "done"];
-    const pendingStatuses = [
-      "active",
-      "claimed",
-      "in-progress",
-      "in-review",
-      "in review",
-      "review",
-      "pending",
-      "under-review",
-    ];
-
     const allBounties = bountyResponse?.data ?? [];
     const userBounties = allBounties.filter((b) => b.claimedBy === userId);
 
@@ -85,35 +83,27 @@ export default function ProfilePage() {
 
     for (const bounty of userBounties) {
       const amount = bounty.rewardAmount ?? 0;
-      let status = "active";
-      if (bounty.status === "closed") {
-        status = "completed";
-      } else if (bounty.status === "claimed" && bounty.claimExpiresAt) {
-        const expiry = new Date(bounty.claimExpiresAt);
-        if (!Number.isNaN(expiry.getTime()) && expiry < new Date()) {
-          status = "in-review";
-        }
-      }
+      const status = deriveBountyStatus(bounty);
 
-      const normalized = normalizeStatus(status);
-      if (completedStatuses.some((s) => normalizeStatus(s) === normalized)) {
+      if (status === "completed") {
         totalEarned += amount;
-        payoutHistory.push({
-          amount,
-          date: bounty.claimExpiresAt ?? new Date().toISOString(),
-          status: "completed",
-        });
-      } else if (
-        pendingStatuses.some((s) => normalizeStatus(s) === normalized)
-      ) {
-        pendingAmount += amount;
-        if (normalized === "in-review") {
+        if (bounty.claimExpiresAt) {
           payoutHistory.push({
             amount,
-            date: bounty.claimExpiresAt ?? new Date().toISOString(),
-            status: "processing",
+            date: bounty.claimExpiresAt,
+            status: "completed",
           });
         }
+      } else if (status === "in-review") {
+        pendingAmount += amount;
+        // claimExpiresAt is guaranteed when status is "in-review"
+        payoutHistory.push({
+          amount,
+          date: bounty.claimExpiresAt!,
+          status: "processing",
+        });
+      } else {
+        pendingAmount += amount;
       }
     }
 
@@ -130,28 +120,12 @@ export default function ProfilePage() {
 
     return bounties
       .filter((bounty) => bounty.claimedBy === userId)
-      .map((bounty) => {
-        let status = "active";
-
-        if (bounty.status === "closed") {
-          status = "completed";
-        } else if (bounty.status === "claimed" && bounty.claimExpiresAt) {
-          const claimExpiry = new Date(bounty.claimExpiresAt);
-          if (
-            !Number.isNaN(claimExpiry.getTime()) &&
-            claimExpiry < new Date()
-          ) {
-            status = "in-review";
-          }
-        }
-
-        return {
-          bountyId: bounty.id,
-          title: bounty.issueTitle,
-          status,
-          rewardAmount: bounty.rewardAmount ?? undefined,
-        };
-      });
+      .map((bounty) => ({
+        bountyId: bounty.id,
+        title: bounty.issueTitle,
+        status: deriveBountyStatus(bounty),
+        rewardAmount: bounty.rewardAmount ?? undefined,
+      }));
   }, [bountyResponse?.data, userId]);
 
   if (isLoading) {

From 3feca06d4d79e0e5dd5e11b18bd5d8b736f6b65e Mon Sep 17 00:00:00 2001
From: Oluwatos94 <akinbowat@gmail.com>
Date: Sun, 22 Feb 2026 08:18:18 +0100
Subject: [PATCH 3/5] fix reviews

---
 app/profile/[userId]/page.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/profile/[userId]/page.tsx b/app/profile/[userId]/page.tsx
index c98a619..8d9e785 100644
--- a/app/profile/[userId]/page.tsx
+++ b/app/profile/[userId]/page.tsx
@@ -39,7 +39,7 @@ export default function ProfilePage() {
     isLoading,
     error,
   } = useContributorReputation(userId);
-  const { data: bountyResponse } = useBounties();
+  const { data: bountyResponse, isLoading: isBountiesLoading } = useBounties();
 
   const MAX_MOCK_HISTORY = 50;
 
@@ -87,13 +87,9 @@ export default function ProfilePage() {
 
       if (status === "completed") {
         totalEarned += amount;
-        if (bounty.claimExpiresAt) {
-          payoutHistory.push({
-            amount,
-            date: bounty.claimExpiresAt,
-            status: "completed",
-          });
-        }
+        // Use claimExpiresAt as a proxy for payout date, fall back to createdAt.
+        const payoutDate = bounty.claimExpiresAt ?? bounty.createdAt;
+        payoutHistory.push({ amount, date: payoutDate, status: "completed" });
       } else if (status === "in-review") {
         pendingAmount += amount;
         // claimExpiresAt is guaranteed when status is "in-review"
@@ -110,6 +106,7 @@ export default function ProfilePage() {
     // If no real claim data, fall back to reputation stats
     if (userBounties.length === 0 && reputation) {
       totalEarned = reputation.stats.totalEarnings;
+      // pendingAmount has no reputation-stats equivalent; intentionally left as 0
     }
 
     return { totalEarned, pendingAmount, currency, payoutHistory };
@@ -128,7 +125,7 @@ export default function ProfilePage() {
       }));
   }, [bountyResponse?.data, userId]);
 
-  if (isLoading) {
+  if (isLoading || isBountiesLoading) {
     return (
       <div className="container mx-auto py-8">
         <Skeleton className="h-10 w-32 mb-8" />

From d9e79c3fbcb8f48b92a09446b334130bc3ba2e44 Mon Sep 17 00:00:00 2001
From: Oluwatos94 <akinbowat@gmail.com>
Date: Sun, 22 Feb 2026 15:54:18 +0100
Subject: [PATCH 4/5] fix reviews

---
 app/profile/[userId]/page.tsx | 82 ++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 35 deletions(-)

diff --git a/app/profile/[userId]/page.tsx b/app/profile/[userId]/page.tsx
index 8d9e785..b143603 100644
--- a/app/profile/[userId]/page.tsx
+++ b/app/profile/[userId]/page.tsx
@@ -39,38 +39,36 @@ export default function ProfilePage() {
     isLoading,
     error,
   } = useContributorReputation(userId);
-  const { data: bountyResponse, isLoading: isBountiesLoading } = useBounties();
-
-  const MAX_MOCK_HISTORY = 50;
+  const {
+    data: bountyResponse,
+    isLoading: isBountiesLoading,
+    error: bountiesError,
+  } = useBounties();
 
-  const mockHistory = useMemo(() => {
-    if (!reputation) return [];
-    const count = Math.min(
-      reputation.stats.totalCompleted ?? 0,
-      MAX_MOCK_HISTORY,
-    );
-    return Array(count)
-      .fill(null)
-      .map((_, i) => ({
-        id: `bounty-${i}`,
-        bountyId: `b-${i}`,
-        bountyTitle: `Implemented feature #${100 + i}`,
-        projectName: "Drips Protocol",
-        projectLogoUrl: null,
-        difficulty: ["BEGINNER", "INTERMEDIATE", "ADVANCED"][i % 3] as
+  const completionHistory = useMemo(() => {
+    const bounties = bountyResponse?.data ?? [];
+    return bounties
+      .filter((b) => b.claimedBy === userId && b.status === "closed")
+      .map((b) => ({
+        id: b.id,
+        bountyId: b.id,
+        bountyTitle: b.issueTitle,
+        projectName: b.projectName,
+        projectLogoUrl: b.projectLogoUrl,
+        difficulty: (b.difficulty?.toUpperCase() ?? "BEGINNER") as
           | "BEGINNER"
           | "INTERMEDIATE"
           | "ADVANCED",
-        rewardAmount: 500,
-        rewardCurrency: "USDC",
-        claimedAt: "2023-01-01T00:00:00Z",
-        completedAt: "2024-01-15T12:00:00Z",
-        completionTimeHours: 48,
-        maintainerRating: 5,
-        maintainerFeedback: "Great work!",
-        pointsEarned: 150,
+        rewardAmount: b.rewardAmount ?? 0,
+        rewardCurrency: b.rewardCurrency,
+        claimedAt: b.claimedAt ?? b.createdAt,
+        completedAt: b.updatedAt,
+        completionTimeHours: 0,
+        maintainerRating: null,
+        maintainerFeedback: null,
+        pointsEarned: 0,
       }));
-  }, [reputation]);
+  }, [bountyResponse?.data, userId]);
 
   const earningsSummary = useMemo<EarningsSummaryType>(() => {
     const currency = reputation?.stats.earningsCurrency ?? "USDC";
@@ -236,10 +234,17 @@ export default function ProfilePage() {
 
             <TabsContent value="history" className="mt-6">
               <h2 className="text-xl font-bold mb-4">Activity History</h2>
-              <CompletionHistory
-                records={mockHistory}
-                description={`Showing the last ${mockHistory.length} completed bounties.`}
-              />
+              {bountiesError ? (
+                <div className="flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+                  <AlertCircle className="w-4 h-4 shrink-0" />
+                  Failed to load bounty history. Please try again.
+                </div>
+              ) : (
+                <CompletionHistory
+                  records={completionHistory}
+                  description={`Showing ${completionHistory.length} completed bounti${completionHistory.length === 1 ? "y" : "es"}.`}
+                />
+              )}
             </TabsContent>
 
             <TabsContent value="analytics" className="mt-6">
@@ -250,10 +255,17 @@ export default function ProfilePage() {
 
             <TabsContent value="claims" className="mt-6">
               <h2 className="text-xl font-bold mb-4">My Claims</h2>
-              <div className="space-y-6">
-                <EarningsSummary earnings={earningsSummary} />
-                <MyClaims claims={myClaims} />
-              </div>
+              {bountiesError ? (
+                <div className="flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+                  <AlertCircle className="w-4 h-4 shrink-0" />
+                  Failed to load claims and earnings. Please try again.
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  <EarningsSummary earnings={earningsSummary} />
+                  <MyClaims claims={myClaims} />
+                </div>
+              )}
             </TabsContent>
           </Tabs>
         </div>

From 5fc38a6e92962c4f32eec08ff867b3eefbd488a2 Mon Sep 17 00:00:00 2001
From: Oluwatos94 <akinbowat@gmail.com>
Date: Sun, 22 Feb 2026 16:20:56 +0100
Subject: [PATCH 5/5] fix reviews

---
 app/profile/[userId]/page.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/profile/[userId]/page.tsx b/app/profile/[userId]/page.tsx
index b143603..9cdef84 100644
--- a/app/profile/[userId]/page.tsx
+++ b/app/profile/[userId]/page.tsx
@@ -98,6 +98,11 @@ export default function ProfilePage() {
         });
       } else {
         pendingAmount += amount;
+        payoutHistory.push({
+          amount,
+          date: bounty.claimExpiresAt ?? bounty.createdAt,
+          status: "processing",
+        });
       }
     }