ayrisdev/moy-qr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: modernize admin panel UI and add openinary integration

Browse Source
This commit is contained in:
Mustafa Yildiz
2026-07-12 15:10:50 +03:00
parent 378a1e033a
commit ca1e849e80
20 changed files with 536 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/(dashboard)/products/page.tsx
+34 -30
View File
@@ -1,5 +1,5 @@
import prisma from '@/lib/prisma'
import { Pencil, Plus, Trash2, Image as ImageIcon } from 'lucide-react'
import { Pencil, Plus, Image as ImageIcon } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import DeleteButton from './DeleteButton'
@@ -19,41 +19,45 @@ export default async function ProductsPage() {
})
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>
<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-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 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-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 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-gray-50">
<tbody className="divide-y divide-slate-100/80">
{category.products.map((product) => (
<tr key={product.id} className="hover:bg-gray-50 transition-colors">
<td className="py-3 px-6">
<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-lg overflow-hidden border border-gray-200">
<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}
@@ -62,20 +66,20 @@ export default async function ProductsPage() {
/>
</div>
) : (
<div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 border border-gray-200">
<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-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'}`}>
<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-3 px-6 text-right">
<div className="flex justify-end gap-2">
<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>
@@ -88,8 +92,8 @@ export default async function ProductsPage() {
</table>
</div>
) : (
<div className="py-6 px-6 text-gray-500 text-sm">
Bu kategoride henüz ürün yok.
<div className="py-10 px-6 text-center text-slate-500 text-sm">
Bu kategoride henüz ürün bulunmuyor.
</div>
)}
</div>