Make dashboard cards clickable

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

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-16 14:25:28 +05:30
parent 26af4b9318
commit 40c3dcf33f

View file

@ -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 }) {