50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Suspense } from "react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { UsageAnalytics } from "@/components/dashboard/usage-analytics";
|
|
import { RecentTransactions } from "@/components/dashboard/recent-transactions";
|
|
import { BarChart3 } from "lucide-react";
|
|
|
|
function AnalyticsSkeleton() {
|
|
return (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<Card key={i}>
|
|
<CardContent className="p-6">
|
|
<div className="animate-pulse space-y-2">
|
|
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
|
<div className="h-8 bg-gray-200 rounded"></div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function AnalyticsPage() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
|
<BarChart3 className="h-8 w-8" />
|
|
Analytics détaillées
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
Analyses approfondies des performances et de l'utilisation de
|
|
Cercle GPT
|
|
</p>
|
|
</div>
|
|
|
|
<Suspense fallback={<AnalyticsSkeleton />}>
|
|
<div className="space-y-6">
|
|
{/* Analytics des utilisateurs */}
|
|
<UsageAnalytics />
|
|
|
|
{/* Transactions récentes - toute la largeur */}
|
|
<RecentTransactions />
|
|
</div>
|
|
</Suspense>
|
|
</div>
|
|
);
|
|
}
|