Yaltopia-Ticket-Admin/src/pages/admin/analytics/index.tsx
2026-01-09 19:25:54 +03:00

88 lines
3.1 KiB
TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { BarChart3, Users, DollarSign, HardDrive, Activity } from "lucide-react"
import { useNavigate } from "react-router-dom"
export default function AnalyticsPage() {
const navigate = useNavigate()
return (
<div className="space-y-6">
<h2 className="text-3xl font-bold">Analytics</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card className="cursor-pointer hover:bg-accent transition-colors" onClick={() => navigate('/admin/analytics/overview')}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<BarChart3 className="w-5 h-5" />
Overview
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Platform analytics overview
</p>
</CardContent>
</Card>
<Card className="cursor-pointer hover:bg-accent transition-colors" onClick={() => navigate('/admin/analytics/users')}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users className="w-5 h-5" />
Users Analytics
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
User growth and statistics
</p>
</CardContent>
</Card>
<Card className="cursor-pointer hover:bg-accent transition-colors" onClick={() => navigate('/admin/analytics/revenue')}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<DollarSign className="w-5 h-5" />
Revenue Analytics
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Revenue trends and breakdown
</p>
</CardContent>
</Card>
<Card className="cursor-pointer hover:bg-accent transition-colors" onClick={() => navigate('/admin/analytics/storage')}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<HardDrive className="w-5 h-5" />
Storage Analytics
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Storage usage and breakdown
</p>
</CardContent>
</Card>
<Card className="cursor-pointer hover:bg-accent transition-colors" onClick={() => navigate('/admin/analytics/api')}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Activity className="w-5 h-5" />
API Usage
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
API endpoint usage statistics
</p>
</CardContent>
</Card>
</div>
</div>
)
}