first commit
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
'use client'
|
||||
|
||||
import { signOut } from 'next-auth/react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { LayoutDashboard, Users, Settings, LogOut, Menu, X } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname()
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Dashboard', href: '/admin', icon: LayoutDashboard },
|
||||
{ name: 'Kullanıcılar', href: '/admin/users', icon: Users },
|
||||
{ name: 'Ayarlar', href: '/admin/settings', icon: Settings },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
|
||||
{/* Mobile sidebar backdrop */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-gray-900/80 lg:hidden"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className={`
|
||||
fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800
|
||||
transform transition-transform duration-200 ease-in-out lg:translate-x-0 lg:static lg:inset-0
|
||||
${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
`}>
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-800">
|
||||
<h1 className="text-lg font-bold text-gray-900 dark:text-white">Admin Paneli</h1>
|
||||
<button
|
||||
className="ml-auto lg:hidden text-gray-500"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
|
||||
{navigation.map((item) => {
|
||||
const isActive = pathname.endsWith(item.href)
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`
|
||||
flex items-center px-3 py-2.5 text-sm font-medium rounded-md transition-colors
|
||||
${isActive
|
||||
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'}
|
||||
`}
|
||||
>
|
||||
<item.icon className={`mr-3 flex-shrink-0 h-5 w-5 ${isActive ? 'text-gray-900 dark:text-white' : 'text-gray-400'}`} />
|
||||
{item.name}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: '/' })}
|
||||
className="flex w-full items-center px-3 py-2.5 text-sm font-medium text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
|
||||
>
|
||||
<LogOut className="mr-3 h-5 w-5" />
|
||||
Çıkış Yap
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
<header className="h-16 flex items-center lg:hidden bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 px-4">
|
||||
<button
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="text-gray-500 hover:text-gray-900 dark:hover:text-white focus:outline-none"
|
||||
>
|
||||
<Menu className="h-6 w-6" />
|
||||
</button>
|
||||
<span className="ml-4 text-lg font-bold text-gray-900 dark:text-white">Admin Paneli</span>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import { auth } from '@/lib/auth'
|
||||
|
||||
export default async function AdminDashboardPage() {
|
||||
const session = await auth()
|
||||
|
||||
return (
|
||||
<div className="space-y-8 p-6 md:p-10 max-w-7xl mx-auto min-h-screen">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-foreground uppercase">Teras Yönetim Paneli</h2>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Hoş geldiniz, {session?.user?.name || session?.user?.email}. İşte restoranınızın genel görünümü.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{/* Placeholder Stat Cards */}
|
||||
{[
|
||||
{ name: 'Bugünkü Rezervasyonlar', stat: '24', trend: '+4 dünden' },
|
||||
{ name: 'Aktif Masalar', stat: '12 / 30', trend: '%40 Doluluk' },
|
||||
{ name: 'Aylık Ziyaretçi', stat: '1,452', trend: '+%12 geçen aya göre' },
|
||||
{ name: 'Stok: Dry Aged Et', stat: '45 porsiyon', trend: 'Kritik seviyeye yakın' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="rounded-lg bg-card border border-border/50 p-6 shadow-sm hover:border-primary/30 transition-colors"
|
||||
>
|
||||
<dt className="truncate text-sm font-medium text-muted-foreground uppercase tracking-wider">{item.name}</dt>
|
||||
<dd className="mt-2 text-4xl font-bold tracking-tight text-primary">
|
||||
{item.stat}
|
||||
</dd>
|
||||
<p className="mt-2 text-xs text-muted-foreground">{item.trend}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div className="rounded-lg bg-card border border-border/50 shadow-sm">
|
||||
<div className="p-6 border-b border-border/50">
|
||||
<h3 className="text-lg font-bold text-foreground uppercase tracking-wider">Son Rezervasyon Talepleri</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ name: 'Ahmet Yılmaz', time: 'Bu akşam 20:00', size: '4 Kişi', status: 'Onay Bekliyor' },
|
||||
{ name: 'Ayşe Demir', time: 'Yarın 19:30', size: '2 Kişi', status: 'Onaylandı' },
|
||||
{ name: 'Mehmet Kaya', time: '18 Haziran 21:00', size: '6 Kişi', status: 'Onaylandı' },
|
||||
].map((req, i) => (
|
||||
<div key={i} className="flex justify-between items-center p-4 bg-background rounded border border-border/30">
|
||||
<div>
|
||||
<p className="font-bold text-foreground">{req.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{req.time} • {req.size}</p>
|
||||
</div>
|
||||
<span className={`text-xs px-2 py-1 rounded-full uppercase tracking-wider font-bold ${req.status === 'Onay Bekliyor' ? 'bg-secondary/20 text-secondary' : 'bg-green-500/20 text-green-500'}`}>
|
||||
{req.status}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-card border border-border/50 shadow-sm">
|
||||
<div className="p-6 border-b border-border/50">
|
||||
<h3 className="text-lg font-bold text-foreground uppercase tracking-wider">Sistem & İletişim Bildirimleri</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-background rounded border border-border/30">
|
||||
<p className="text-sm text-foreground"><strong>Yeni Mesaj:</strong> Müşteri memnuniyet anketi hakkında (Zeynep Ç.)</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">2 saat önce</p>
|
||||
</div>
|
||||
<div className="p-4 bg-background rounded border border-border/30">
|
||||
<p className="text-sm text-foreground"><strong>Sistem Uyarı:</strong> Veritabanı yedeği başarıyla alındı.</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">Dün 03:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user