feat: modernize admin panel UI and add openinary integration
This commit is contained in:
Mustafa Yildiz
@@ -1,5 +1,5 @@
|
||||
import prisma from '@/lib/prisma'
|
||||
import { Package, Tags, Eye, TrendingUp } from 'lucide-react'
|
||||
import { Package, Tags, Eye, TrendingUp, ChevronRight } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const metadata = {
|
||||
@@ -14,55 +14,89 @@ export default async function AdminDashboard() {
|
||||
])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-extrabold text-slate-900 tracking-tight">Dashboard</h1>
|
||||
<p className="mt-2 text-slate-500">Moy Beach dijital menü yönetim paneline hoş geldiniz.</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4">
|
||||
<div className="p-3 bg-blue-100 text-blue-600 rounded-lg">
|
||||
<Tags size={24} />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="bg-white p-6 rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 flex items-center gap-5 transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:-translate-y-0.5 group">
|
||||
<div className="p-4 bg-gradient-to-br from-blue-50 to-blue-100/50 text-blue-600 rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||
<Tags size={28} strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 font-medium">Kategori Sayısı</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{totalCategories}</p>
|
||||
<p className="text-sm text-slate-500 font-medium">Kategori Sayısı</p>
|
||||
<p className="text-3xl font-bold text-slate-900 tracking-tight mt-1">{totalCategories}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4">
|
||||
<div className="p-3 bg-indigo-100 text-indigo-600 rounded-lg">
|
||||
<Package size={24} />
|
||||
<div className="bg-white p-6 rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 flex items-center gap-5 transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:-translate-y-0.5 group">
|
||||
<div className="p-4 bg-gradient-to-br from-indigo-50 to-indigo-100/50 text-indigo-600 rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||
<Package size={28} strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 font-medium">Toplam Ürün</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{totalProducts}</p>
|
||||
<p className="text-sm text-slate-500 font-medium">Toplam Ürün</p>
|
||||
<p className="text-3xl font-bold text-slate-900 tracking-tight mt-1">{totalProducts}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4">
|
||||
<div className="p-3 bg-green-100 text-green-600 rounded-lg">
|
||||
<TrendingUp size={24} />
|
||||
<div className="bg-white p-6 rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 flex items-center gap-5 transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:-translate-y-0.5 group">
|
||||
<div className="p-4 bg-gradient-to-br from-emerald-50 to-emerald-100/50 text-emerald-600 rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||
<TrendingUp size={28} strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500 font-medium">Aktif Ürünler</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{activeProducts}</p>
|
||||
<p className="text-sm text-slate-500 font-medium">Aktif Ürünler</p>
|
||||
<p className="text-3xl font-bold text-slate-900 tracking-tight mt-1">{activeProducts}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<h2 className="text-lg font-semibold mb-4">Hızlı Kısayollar</h2>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Link href="/admin/products" className="text-blue-600 hover:text-blue-800 font-medium flex items-center gap-2">
|
||||
<Package size={18} /> Ürünleri Yönet
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-100">
|
||||
<h2 className="text-lg font-bold text-slate-800">Hızlı Kısayollar</h2>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<Link href="/admin/products" className="flex items-center justify-between p-4 hover:bg-slate-50 rounded-xl transition-colors group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2.5 bg-indigo-50 text-indigo-600 rounded-lg group-hover:bg-indigo-100 transition-colors">
|
||||
<Package size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-slate-800">Ürünleri Yönet</p>
|
||||
<p className="text-sm text-slate-500">Ürün ekle, düzenle veya fiyat güncelle</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight size={20} className="text-slate-400 group-hover:text-indigo-600 transition-colors" />
|
||||
</Link>
|
||||
<Link href="/admin/categories" className="text-blue-600 hover:text-blue-800 font-medium flex items-center gap-2">
|
||||
<Tags size={18} /> Kategorileri Yönet
|
||||
|
||||
<Link href="/admin/categories" className="flex items-center justify-between p-4 hover:bg-slate-50 rounded-xl transition-colors group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2.5 bg-blue-50 text-blue-600 rounded-lg group-hover:bg-blue-100 transition-colors">
|
||||
<Tags size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-slate-800">Kategorileri Yönet</p>
|
||||
<p className="text-sm text-slate-500">Menü kategorilerini ve sıralamasını düzenle</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight size={20} className="text-slate-400 group-hover:text-blue-600 transition-colors" />
|
||||
</Link>
|
||||
<Link href="/" target="_blank" className="text-gray-600 hover:text-gray-800 font-medium flex items-center gap-2">
|
||||
<Eye size={18} /> Canlı Menüyü Görüntüle
|
||||
|
||||
<Link href="/" target="_blank" className="flex items-center justify-between p-4 hover:bg-slate-50 rounded-xl transition-colors group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2.5 bg-emerald-50 text-emerald-600 rounded-lg group-hover:bg-emerald-100 transition-colors">
|
||||
<Eye size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-slate-800">Canlı Menüyü Görüntüle</p>
|
||||
<p className="text-sm text-slate-500">Müşterilerin gördüğü güncel menüyü aç</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight size={20} className="text-slate-400 group-hover:text-emerald-600 transition-colors" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user