feat: add prisma support, admin panel and auth
This commit is contained in:
AyrisAI
22
app/admin/components/AdminNavItem.tsx
Normal file
22
app/admin/components/AdminNavItem.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/use-pathname';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import NextLink from 'next/link';
|
||||
|
||||
interface NavItemProps {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function AdminNavItem({ href, children }: NavItemProps) {
|
||||
const pathname = usePathname();
|
||||
const isActive = pathname === href;
|
||||
|
||||
return (
|
||||
<NextLink href={href} className={`admin-nav-item ${isActive ? 'active' : ''}`}>
|
||||
{children}
|
||||
</NextLink>
|
||||
);
|
||||
}
|
||||
66
app/admin/components/CategoryForm.tsx
Normal file
66
app/admin/components/CategoryForm.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { createCategory, updateCategory } from '../actions';
|
||||
|
||||
interface CategoryFormProps {
|
||||
initialData?: any;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function CategoryForm({ initialData, onClose }: CategoryFormProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleSubmit(formData: FormData) {
|
||||
setLoading(true);
|
||||
if (initialData) {
|
||||
await updateCategory(initialData.id, formData);
|
||||
} else {
|
||||
await createCategory(formData);
|
||||
}
|
||||
setLoading(false);
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<div className="card-header">
|
||||
<h2 className="card-title">{initialData ? 'Kategoriyi Düzenle' : 'Yeni Kategori Ekle'}</h2>
|
||||
<button onClick={onClose} className="action-btn">✕</button>
|
||||
</div>
|
||||
<form action={handleSubmit} className="admin-form">
|
||||
<div className="form-group">
|
||||
<label htmlFor="title">Kategori Başlığı</label>
|
||||
<input
|
||||
id="title"
|
||||
name="title"
|
||||
defaultValue={initialData?.title}
|
||||
className="admin-input"
|
||||
placeholder="Örn: Klasik Kokteyller"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="externalId">Harici ID (İkon eşleşmesi için)</label>
|
||||
<input
|
||||
id="externalId"
|
||||
name="externalId"
|
||||
defaultValue={initialData?.externalId}
|
||||
className="admin-input"
|
||||
placeholder="Örn: classic_cocktails"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
|
||||
<button type="submit" className="admin-btn" disabled={loading}>
|
||||
{loading ? 'Kaydediliyor...' : 'Kaydet'}
|
||||
</button>
|
||||
<button type="button" onClick={onClose} className="admin-btn" style={{ background: 'rgba(255,255,255,0.05)', color: '#fff' }}>
|
||||
İptal
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
app/admin/components/DeleteButton.tsx
Normal file
29
app/admin/components/DeleteButton.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface DeleteButtonProps {
|
||||
onDelete: () => Promise<void>;
|
||||
}
|
||||
|
||||
export default function DeleteButton({ onDelete }: DeleteButtonProps) {
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
|
||||
async function handleClick() {
|
||||
if (confirm('Bu öğeyi silmek istediğinizden emin misiniz?')) {
|
||||
setLoading(true);
|
||||
await onDelete();
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className="action-btn delete"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '...' : 'Sil'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
112
app/admin/components/ItemForm.tsx
Normal file
112
app/admin/components/ItemForm.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { createItem, updateItem } from '../actions';
|
||||
|
||||
interface ItemFormProps {
|
||||
categories: any[];
|
||||
initialData?: any;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function ItemForm({ categories, initialData, onClose }: ItemFormProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleSubmit(formData: FormData) {
|
||||
setLoading(true);
|
||||
if (initialData) {
|
||||
await updateItem(initialData.id, formData);
|
||||
} else {
|
||||
await createItem(formData);
|
||||
}
|
||||
setLoading(false);
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<div className="card-header">
|
||||
<h2 className="card-title">{initialData ? 'Ürünü Düzenle' : 'Yeni Ürün Ekle'}</h2>
|
||||
<button onClick={onClose} className="action-btn">✕</button>
|
||||
</div>
|
||||
<form action={handleSubmit} className="admin-form">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Ürün Adı</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
defaultValue={initialData?.name}
|
||||
className="admin-input"
|
||||
placeholder="Örn: Mojito"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="categoryId">Kategori</label>
|
||||
<select
|
||||
id="categoryId"
|
||||
name="categoryId"
|
||||
defaultValue={initialData?.categoryId || categories[0]?.id}
|
||||
className="admin-select"
|
||||
required
|
||||
>
|
||||
{categories.map(cat => (
|
||||
<option key={cat.id} value={cat.id}>{cat.title}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="price">Fiyat (Metin veya JSON)</label>
|
||||
<textarea
|
||||
id="price"
|
||||
name="price"
|
||||
defaultValue={typeof initialData?.price === 'object' ? JSON.stringify(initialData.price) : initialData?.price}
|
||||
className="admin-textarea"
|
||||
placeholder='Örn: 590 tl veya {"single": "370 tl", "double": "560 tl"}'
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="ingredients">İçerik</label>
|
||||
<input
|
||||
id="ingredients"
|
||||
name="ingredients"
|
||||
defaultValue={initialData?.ingredients}
|
||||
className="admin-input"
|
||||
placeholder="Örn: Rom, Nane, Lime"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="tasteProfile">Tat Profili</label>
|
||||
<input
|
||||
id="tasteProfile"
|
||||
name="tasteProfile"
|
||||
defaultValue={initialData?.tasteProfile}
|
||||
className="admin-input"
|
||||
placeholder="Örn: Tatlı-Ekşi-Ferah"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="grapeVariety">Üzüm Çeşidi (Şaraplar için)</label>
|
||||
<input
|
||||
id="grapeVariety"
|
||||
name="grapeVariety"
|
||||
defaultValue={initialData?.grapeVariety}
|
||||
className="admin-input"
|
||||
placeholder="Örn: Merlot"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
|
||||
<button type="submit" className="admin-btn" disabled={loading}>
|
||||
{loading ? 'Kaydediliyor...' : 'Kaydet'}
|
||||
</button>
|
||||
<button type="button" onClick={onClose} className="admin-btn" style={{ background: 'rgba(255,255,255,0.05)', color: '#fff' }}>
|
||||
İptal
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
app/admin/components/SignOutButton.tsx
Normal file
16
app/admin/components/SignOutButton.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { signout } from '../actions';
|
||||
|
||||
export default function SignOutButton() {
|
||||
return (
|
||||
<button
|
||||
onClick={() => signout()}
|
||||
className="action-btn"
|
||||
style={{ fontSize: '0.8rem', color: 'var(--accent-rose)' }}
|
||||
>
|
||||
Çıkış Yap
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user