105 lines
5.2 KiB
TypeScript
105 lines
5.2 KiB
TypeScript
import prisma from '@/lib/prisma'
|
|
import { Pencil, Plus, Image as ImageIcon } from 'lucide-react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import DeleteButton from './DeleteButton'
|
|
|
|
export const metadata = {
|
|
title: 'Ürün Yönetimi - Admin',
|
|
}
|
|
|
|
export default async function ProductsPage() {
|
|
const categories = await prisma.categories.findMany({
|
|
orderBy: { order_num: 'asc' },
|
|
include: {
|
|
products: {
|
|
orderBy: { id: 'asc' },
|
|
},
|
|
},
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-extrabold text-slate-900 tracking-tight">Ürün Yönetimi</h1>
|
|
<p className="text-sm text-slate-500 mt-1">Tüm kategorilerdeki ürünlerinizi görüntüleyin ve düzenleyin.</p>
|
|
</div>
|
|
<Link href="/admin/products/new" className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-xl font-medium flex items-center gap-2 transition-all shadow-sm hover:shadow-md hover:-translate-y-0.5">
|
|
<Plus size={18} /> Yeni Ürün Ekle
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
{categories.map((category) => (
|
|
<div key={category.id} className="bg-white rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 overflow-hidden">
|
|
<div className="bg-slate-50/50 px-6 py-5 border-b border-slate-100 flex justify-between items-center">
|
|
<h2 className="text-lg font-bold text-slate-800 tracking-tight">{category.name_tr}</h2>
|
|
<span className="bg-white px-3 py-1 rounded-full text-xs font-semibold text-slate-500 border border-slate-200 shadow-sm">
|
|
{category.products.length} ürün
|
|
</span>
|
|
</div>
|
|
|
|
{category.products.length > 0 ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-slate-100 text-xs uppercase tracking-wider font-semibold text-slate-500">
|
|
<th className="py-4 px-6 w-16">Resim</th>
|
|
<th className="py-4 px-6">İsim</th>
|
|
<th className="py-4 px-6">Fiyat</th>
|
|
<th className="py-4 px-6 text-center">Durum</th>
|
|
<th className="py-4 px-6 text-right">İşlemler</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100/80">
|
|
{category.products.map((product) => (
|
|
<tr key={product.id} className="hover:bg-slate-50/50 transition-colors group">
|
|
<td className="py-4 px-6">
|
|
{product.image_url ? (
|
|
<div className="relative w-12 h-12 rounded-xl overflow-hidden shadow-sm border border-slate-200 group-hover:scale-105 transition-transform">
|
|
<Image
|
|
src={product.image_url}
|
|
alt={product.name_tr}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-slate-400 border border-slate-200 shadow-sm">
|
|
<ImageIcon size={20} />
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="py-4 px-6 font-semibold text-slate-800">{product.name_tr}</td>
|
|
<td className="py-4 px-6 font-medium text-slate-600">₺{product.price.toString()}</td>
|
|
<td className="py-4 px-6 text-center">
|
|
<span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold ${product.status === 1 ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-500'}`}>
|
|
{product.status === 1 ? 'Aktif' : 'Pasif'}
|
|
</span>
|
|
</td>
|
|
<td className="py-4 px-6 text-right">
|
|
<div className="flex justify-end gap-1 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Link href={`/admin/products/${product.id}/edit`} className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="Düzenle">
|
|
<Pencil size={18} />
|
|
</Link>
|
|
<DeleteButton id={product.id} />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="py-10 px-6 text-center text-slate-500 text-sm">
|
|
Bu kategoride henüz ürün bulunmuyor.
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|