From 8ae65cadf1485e9231a4879307aeaa4bf6745946 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 21:21:04 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/index.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index dba1b98..e96b3ec 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -173,6 +173,37 @@ function Dashboard() {
         </CardContent>
       </Card>
 
+      {/* Recent payments (moved to top) */}
+      <Card className="mb-6">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle className="text-base flex items-center gap-2">
+            <CreditCard className="h-4 w-4" />
+            Recent payments
+          </CardTitle>
+          <Button asChild variant="ghost" size="sm">
+            <Link to="/payments">View all <ArrowRight className="h-3 w-3 ml-1" /></Link>
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-1">
+          {recentPayments.length === 0 && <p className="text-sm text-muted-foreground">No payment requests yet.</p>}
+          {recentPayments.map((p) => (
+            <Link key={p.id} to="/pay/$id" params={{ id: p.id }}
+              className="flex items-center justify-between py-2.5 px-2 rounded-md hover:bg-muted/60 -mx-2">
+              <div className="min-w-0">
+                <div className="text-sm font-medium truncate">{p.recipient_name}</div>
+                <div className="text-xs text-muted-foreground truncate">
+                  {p.description || "Payment request"} · {formatDate(p.paid_at || p.created_at)}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">{formatCurrency((p.total_amount_cents ?? 0) / 100)}</span>
+                <Badge variant="outline" className={statusBadgeClass(p.status)}>{p.status}</Badge>
+              </div>
+            </Link>
+          ))}
+        </CardContent>
+      </Card>
+
       {/* Financial + My tasks */}
       <div className="grid lg:grid-cols-[2fr_1fr] gap-6 mb-6">
         <Card>