101 lines
4.7 KiB
TypeScript
101 lines
4.7 KiB
TypeScript
import prisma from '@/lib/prisma'
|
|
import { Pencil, Plus, Trash2, 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-6">
|
|
<div className="flex justify-between items-center">
|
|
<h1 className="text-2xl font-bold text-gray-900">Ürün Yönetimi</h1>
|
|
<Link href="/admin/products/new" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
|
|
<Plus size={20} />
|
|
<span>Yeni Ürün Ekle</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
{categories.map((category) => (
|
|
<div key={category.id} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div className="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
|
|
<h2 className="text-lg font-bold text-gray-800">{category.name_tr}</h2>
|
|
<span className="text-sm text-gray-500 font-medium">{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-gray-100">
|
|
<th className="py-3 px-6 text-sm font-semibold text-gray-600 w-16">Resim</th>
|
|
<th className="py-3 px-6 text-sm font-semibold text-gray-600">İsim</th>
|
|
<th className="py-3 px-6 text-sm font-semibold text-gray-600">Fiyat</th>
|
|
<th className="py-3 px-6 text-sm font-semibold text-gray-600">Durum</th>
|
|
<th className="py-3 px-6 text-sm font-semibold text-gray-600 text-right">İşlemler</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-50">
|
|
{category.products.map((product) => (
|
|
<tr key={product.id} className="hover:bg-gray-50 transition-colors">
|
|
<td className="py-3 px-6">
|
|
{product.image_url ? (
|
|
<div className="relative w-12 h-12 rounded-lg overflow-hidden border border-gray-200">
|
|
<Image
|
|
src={product.image_url}
|
|
alt={product.name_tr}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 border border-gray-200">
|
|
<ImageIcon size={20} />
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="py-3 px-6 font-medium text-gray-900">{product.name_tr}</td>
|
|
<td className="py-3 px-6 text-gray-600">₺{product.price.toString()}</td>
|
|
<td className="py-3 px-6">
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${product.status === 1 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
|
|
{product.status === 1 ? 'Aktif' : 'Pasif'}
|
|
</span>
|
|
</td>
|
|
<td className="py-3 px-6 text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<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-6 px-6 text-gray-500 text-sm">
|
|
Bu kategoride henüz ürün yok.
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|