88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
'use client'
|
||
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Users, Activity, UserPlus, Zap } from 'lucide-react'
|
||
import { motion } from 'framer-motion'
|
||
import { useSession } from 'next-auth/react'
|
||
|
||
export default function AdminDashboardPage() {
|
||
const { data: session } = useSession()
|
||
|
||
const stats = [
|
||
{ name: 'Toplam Kullanıcı', stat: '1,245', icon: Users, color: 'text-blue-600 dark:text-blue-400' },
|
||
{ name: 'Aktif Oturumlar', stat: '42', icon: Activity, color: 'text-green-600 dark:text-green-400' },
|
||
{ name: 'Yeni Kayıtlar', stat: '8', icon: UserPlus, color: 'text-orange-600 dark:text-orange-400' },
|
||
{ name: 'Sistem Durumu', stat: 'Online', icon: Zap, color: 'text-indigo-600 dark:text-indigo-400' },
|
||
]
|
||
|
||
const container = {
|
||
hidden: { opacity: 0 },
|
||
show: {
|
||
opacity: 1,
|
||
transition: {
|
||
staggerChildren: 0.1
|
||
}
|
||
}
|
||
}
|
||
|
||
const item = {
|
||
hidden: { opacity: 0, y: 20 },
|
||
show: { opacity: 1, y: 0 }
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.4 }}
|
||
>
|
||
<h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Dashboard</h2>
|
||
<p className="text-gray-500 dark:text-gray-400 mt-2">
|
||
Hoş geldiniz, {session?.user?.name || session?.user?.email || 'Admin'}. İşte projenizin genel görünümü.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
variants={container}
|
||
initial="hidden"
|
||
animate="show"
|
||
className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"
|
||
>
|
||
{stats.map((stat, i) => (
|
||
<motion.div key={stat.name} variants={item}>
|
||
<Card className="border-gray-200 dark:border-gray-800 shadow-sm transition-all hover:shadow-md dark:bg-gray-950/50 backdrop-blur-sm">
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||
{stat.name}
|
||
</CardTitle>
|
||
<stat.icon className={`h-4 w-4 ${stat.color}`} />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold text-gray-900 dark:text-white">{stat.stat}</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.4, delay: 0.4 }}
|
||
>
|
||
<Card className="border-gray-200 dark:border-gray-800 shadow-sm dark:bg-gray-950/50 backdrop-blur-sm">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg text-gray-900 dark:text-white">Son Aktiviteler</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="py-4 text-sm text-gray-500 dark:text-gray-400 text-center border-2 border-dashed rounded-lg border-gray-200 dark:border-gray-800">
|
||
Henüz aktivite kaydı bulunmuyor.
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</div>
|
||
)
|
||
}
|