From 40c3dcf33f4bc92a27580172c4755e2817715d77 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sat, 16 May 2026 14:25:28 +0530
Subject: [PATCH] Make dashboard cards clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Families → /admin/families
- Users → /admin/users
- Children → /admin/children
- MRR → /admin/revenue

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/app/admin/page.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 2c535a3..f33f78b 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -86,24 +86,28 @@ export default function AdminDashboard() {
           value={stats.overview.totalFamilies}
           icon="🏠"
           color="rose"
+          href="/admin/families"
         />
         <StatCard
           label="Total Users"
           value={stats.overview.totalUsers}
           icon="👥"
           color="blue"
+          href="/admin/users"
         />
         <StatCard
           label="Total Children"
           value={stats.overview.totalChildren}
           icon="👶"
           color="amber"
+          href="/admin/children"
         />
         <StatCard
           label="MRR"
           value={`$${stats.overview.mrr.toFixed(2)}`}
           icon="💰"
           color="emerald"
+          href="/admin/revenue"
         />
       </div>
 
@@ -174,7 +178,7 @@ export default function AdminDashboard() {
   );
 }
 
-function StatCard({ label, value, icon, color }: { label: string; value: number | string; icon: string; color: string }) {
+function StatCard({ label, value, icon, color, href }: { label: string; value: number | string; icon: string; color: string; href?: string }) {
   const colorClasses: Record<string, string> = {
     rose: "text-rose-400",
     blue: "text-blue-400",
@@ -182,7 +186,7 @@ function StatCard({ label, value, icon, color }: { label: string; value: number
     emerald: "text-emerald-400",
   };
 
-  return (
+  const content = (
     <div className="bg-gray-800 p-6 rounded-xl">
       <div className="flex items-center justify-between mb-2">
         <span className="text-2xl">{icon}</span>
@@ -191,6 +195,11 @@ function StatCard({ label, value, icon, color }: { label: string; value: number
       <div className="text-gray-400 text-sm">{label}</div>
     </div>
   );
+
+  if (href) {
+    return <a href={href} className="cursor-pointer hover:opacity-90 transition-opacity">{content}</a>;
+  }
+  return content;
 }
 
 function ChartCard({ title, data, icon }: { title: string; data: { date: string; count: number }[]; icon: string }) {