first commit
This commit is contained in:
nBiqoz
233
app/page.tsx
233
app/page.tsx
@@ -1,103 +1,146 @@
|
||||
import Image from "next/image";
|
||||
import { Suspense } from "react";
|
||||
import Link from "next/link";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { OverviewMetrics } from "@/components/dashboard/overview-metrics";
|
||||
import { RealTimeStats } from "@/components/dashboard/real-time-stats";
|
||||
import { RealUserActivityChart } from "@/components/dashboard/charts/real-user-activity-chart";
|
||||
import {
|
||||
Users,
|
||||
MessageSquare,
|
||||
CreditCard,
|
||||
BarChart3,
|
||||
TrendingUp,
|
||||
Activity,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
||||
app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
<div className="space-y-6">
|
||||
{/* En-tête simplifié */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
||||
<TrendingUp className="h-8 w-8" />
|
||||
Vue d'ensemble
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Tableau de bord administrateur Cercle GPT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
{/* Métriques principales */}
|
||||
<Suspense
|
||||
fallback={<div className="h-32 bg-muted animate-pulse rounded-lg" />}
|
||||
>
|
||||
<OverviewMetrics />
|
||||
</Suspense>
|
||||
|
||||
{/* Graphiques en temps réel */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xl font-semibold flex items-center gap-2">
|
||||
<Activity className="h-5 w-5" />
|
||||
Statistiques en temps réel
|
||||
</h2>
|
||||
|
||||
<Suspense
|
||||
fallback={<div className="h-64 bg-muted animate-pulse rounded-lg" />}
|
||||
>
|
||||
<RealTimeStats />
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
{/* Grille pour activité utilisateurs et actions */}
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{/* Activité des utilisateurs avec vraies données */}
|
||||
<div className="md:col-span-1">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="h-64 bg-muted animate-pulse rounded-lg" />
|
||||
}
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
<RealUserActivityChart />
|
||||
</Suspense>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
{/* Actions rapides épurées */}
|
||||
<div className="md:col-span-2 grid gap-4 md:grid-cols-2">
|
||||
<Card className="hover:shadow-md transition-shadow border-l-4 border-l-blue-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center">
|
||||
<Users className="h-4 w-4 mr-2 text-blue-600" />
|
||||
Utilisateurs
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Gérer les comptes utilisateurs
|
||||
</p>
|
||||
<Link href="/users">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Voir les utilisateurs
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="hover:shadow-md transition-shadow border-l-4 border-l-green-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center">
|
||||
<MessageSquare className="h-4 w-4 mr-2 text-green-600" />
|
||||
Conversations
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Consulter les discussions
|
||||
</p>
|
||||
<Link href="/conversations">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Voir les conversations
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="hover:shadow-md transition-shadow border-l-4 border-l-purple-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center">
|
||||
<CreditCard className="h-4 w-4 mr-2 text-purple-600" />
|
||||
Transactions
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Historique des paiements
|
||||
</p>
|
||||
<Link href="/transactions">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Voir les transactions
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="hover:shadow-md transition-shadow border-l-4 border-l-orange-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center">
|
||||
<BarChart3 className="h-4 w-4 mr-2 text-orange-600" />
|
||||
Analytics
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Analyses détaillées
|
||||
</p>
|
||||
<Link href="/analytics">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Voir les analytics
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user