104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
|
|
import { StatsCard } from "@/components/ui/StatsCard";
|
|
import { UserManagement } from "@/components/users/UserManagement";
|
|
import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
|
|
import axios from "axios";
|
|
|
|
interface DashboardStats {
|
|
totalUsers: number;
|
|
activeClients: number;
|
|
totalRevenue: number;
|
|
revenueGrowth: number;
|
|
}
|
|
|
|
export default function Home() {
|
|
const [stats, setStats] = useState<DashboardStats>({
|
|
totalUsers: 0,
|
|
activeClients: 0,
|
|
totalRevenue: 0,
|
|
revenueGrowth: 0,
|
|
});
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchStats = async () => {
|
|
try {
|
|
const response = await axios.get("/api/admin/stats");
|
|
setStats(response.data);
|
|
} catch (error) {
|
|
console.error("Failed to fetch dashboard stats:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchStats();
|
|
}, []);
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat("en-US", {
|
|
style: "currency",
|
|
currency: "USD",
|
|
}).format(value);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h2 className="text-3xl font-bold text-slate-900">Dashboard</h2>
|
|
<p className="text-slate-500 mt-2">Welcome back, here's what's happening today.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<StatsCard
|
|
title="Total Users"
|
|
value={loading ? "..." : stats.totalUsers}
|
|
change="+12%" // Placeholder for now as we don't track historical growth yet
|
|
trend="up"
|
|
icon={Users}
|
|
color="blue"
|
|
/>
|
|
<StatsCard
|
|
title="Active Clients"
|
|
value={loading ? "..." : stats.activeClients}
|
|
change="+5%"
|
|
trend="up"
|
|
icon={CalendarCheck}
|
|
color="green"
|
|
/>
|
|
<StatsCard
|
|
title="Revenue"
|
|
value={loading ? "..." : formatCurrency(stats.totalRevenue)}
|
|
change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`}
|
|
trend={stats.revenueGrowth >= 0 ? "up" : "down"}
|
|
icon={CreditCard}
|
|
color="purple"
|
|
/>
|
|
<StatsCard
|
|
title="Growth"
|
|
value="24%" // Placeholder
|
|
change="-2%"
|
|
trend="down"
|
|
icon={TrendingUp}
|
|
color="orange"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
|
<h3 className="text-xl font-bold text-slate-900 mb-6">Recent Activity</h3>
|
|
<UserManagement />
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
|
<h3 className="text-xl font-bold text-slate-900 mb-6">Quick Analytics</h3>
|
|
<AnalyticsDashboard />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|