From 7bc546b69bc2d6f647f1763ad7c39fce6d8421dd Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 23 Apr 2026 21:33:36 +0000
Subject: [PATCH] Changes

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

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index ad081fa..8d4fee9 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -183,36 +183,65 @@ 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 }} search={{} as never}
-              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)}
+      {/* Recent payments + Upcoming reminders */}
+      <div className="grid lg:grid-cols-[2fr_1fr] gap-6 mb-6">
+        <Card>
+          <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 }} search={{} as never}
+                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>
-              <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>
+                <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>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <Bell className="h-4 w-4" />
+              Upcoming reminders
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-1">
+            {upcomingReminders.length === 0 && (
+              <p className="text-sm text-muted-foreground">No upcoming reminders.</p>
+            )}
+            {upcomingReminders.map((r: any) => (
+              <Link
+                key={r.id}
+                to="/tasks"
+                search={{ task: r.task?.id } as never}
+                className="block py-2 px-2 -mx-2 rounded-md hover:bg-muted/60"
+              >
+                <div className="text-sm font-medium truncate">{r.task?.title ?? "Task"}</div>
+                <div className="text-xs text-muted-foreground truncate">
+                  {format(new Date(r.remind_at), "MMM d, h:mm a")} · {r.recipient_email}
+                </div>
+              </Link>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
 
       {/* Financial + My tasks */}
       <div className="grid lg:grid-cols-[2fr_1fr] gap-6 mb-6">