47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { useQuery } from "@tanstack/react-query"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"
|
|
import { analyticsService } from "@/services"
|
|
|
|
export default function AnalyticsUsersPage() {
|
|
const { data: userGrowth, isLoading } = useQuery({
|
|
queryKey: ['admin', 'analytics', 'users', 'growth'],
|
|
queryFn: () => analyticsService.getUserGrowth(90),
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h2 className="text-3xl font-bold">User Analytics</h2>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>User Growth (Last 90 Days)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="h-[400px] flex items-center justify-center">Loading...</div>
|
|
) : userGrowth && userGrowth.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={400}>
|
|
<LineChart data={userGrowth}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Line type="monotone" dataKey="total" stroke="#8884d8" name="Total Users" />
|
|
<Line type="monotone" dataKey="admins" stroke="#82ca9d" name="Admins" />
|
|
<Line type="monotone" dataKey="regular" stroke="#ffc658" name="Regular Users" />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="h-[400px] flex items-center justify-center text-muted-foreground">
|
|
No data available
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|