92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
import ItemForm from '../components/ItemForm';
|
||
import DeleteButton from '../components/DeleteButton';
|
||
import { deleteItem } from '../actions';
|
||
|
||
interface ItemManagerProps {
|
||
items: any[];
|
||
categories: any[];
|
||
}
|
||
|
||
export default function ItemManager({ items, categories }: ItemManagerProps) {
|
||
const [showForm, setShowForm] = useState(false);
|
||
const [editingItem, setEditingItem] = useState<any>(null);
|
||
|
||
const handleEdit = (item: any) => {
|
||
setEditingItem(item);
|
||
setShowForm(true);
|
||
};
|
||
|
||
const handleClose = () => {
|
||
setShowForm(false);
|
||
setEditingItem(null);
|
||
};
|
||
|
||
return (
|
||
<div className="admin-items">
|
||
<div className="admin-page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
|
||
<div>
|
||
<h1>Ürünler</h1>
|
||
<p>Tüm menü öğelerini yönetin</p>
|
||
</div>
|
||
<button className="admin-btn" onClick={() => setShowForm(true)}>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{width: '16px'}}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
|
||
Yeni Ürün Ekle
|
||
</button>
|
||
</div>
|
||
|
||
<div className="admin-card">
|
||
<table className="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Ürün Adı</th>
|
||
<th>Kategori</th>
|
||
<th>Fiyat</th>
|
||
<th>İşlemler</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{items.map((item) => (
|
||
<tr key={item.id}>
|
||
<td>
|
||
<div style={{ fontWeight: 500, color: '#fff' }}>{item.name}</div>
|
||
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>
|
||
{item.ingredients ? (item.ingredients.length > 50 ? item.ingredients.substring(0, 50) + '...' : item.ingredients) : 'İçerik yok'}
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span className="badge" style={{ background: 'rgba(124, 92, 191, 0.1)', color: 'var(--accent-purple)', borderColor: 'rgba(124, 92, 191, 0.2)' }}>
|
||
{item.category.title}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<div style={{ color: 'var(--gold)', fontWeight: 600 }}>
|
||
{typeof item.price === 'string'
|
||
? item.price
|
||
: Object.entries(item.price as object).map(([k, v]) => `${k}: ${v}`).join(', ')
|
||
}
|
||
</div>
|
||
</td>
|
||
<td className="actions-cell">
|
||
<button className="action-btn" onClick={() => handleEdit(item)}>Düzenle</button>
|
||
<DeleteButton onDelete={async () => { await deleteItem(item.id); }} />
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{showForm && (
|
||
<ItemForm
|
||
categories={categories}
|
||
initialData={editingItem}
|
||
onClose={handleClose}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|