feat: implement dynamic categories, admin category CRUD, fix routing and cleanup
This commit is contained in:
AyrisAI
@@ -0,0 +1,217 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { submitBusinessAction } from '@/app/actions'
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
interface Translations {
|
||||
businessName: string
|
||||
category: string
|
||||
neighborhood: string
|
||||
address: string
|
||||
phone: string
|
||||
whatsapp: string
|
||||
description: string
|
||||
image: string
|
||||
submit: string
|
||||
sending: string
|
||||
success: string
|
||||
contactName: string
|
||||
contactEmail: string
|
||||
}
|
||||
|
||||
interface FormProps {
|
||||
translations: Translations
|
||||
categories: Option[]
|
||||
neighborhoods: Option[]
|
||||
}
|
||||
|
||||
export default function BusinessForm({ translations, categories, neighborhoods }: FormProps) {
|
||||
const [success, setSuccess] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
const formData = new FormData(e.currentTarget)
|
||||
try {
|
||||
const res = await submitBusinessAction(formData)
|
||||
if (res.error) {
|
||||
setError(res.error)
|
||||
} else {
|
||||
setSuccess(true)
|
||||
e.currentTarget.reset()
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Bir hata oluştu. Lütfen tekrar deneyin.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="bg-turquoise/10 border border-turquoise/20 text-turquoise p-6 rounded-2xl text-center space-y-3">
|
||||
<h3 className="font-heading font-bold text-lg lowercase">teşekkürler!</h3>
|
||||
<p className="text-sm font-medium">{translations.success}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{error && (
|
||||
<div className="bg-bougainvillea/10 border border-bougainvillea/20 text-bougainvillea p-4 rounded-xl text-xs font-semibold">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Business name */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.businessName} *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="businessName"
|
||||
required
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink placeholder:text-ink/30"
|
||||
placeholder="Örn: İskele Balık Ocakbaşı"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{/* Category */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.category} *</label>
|
||||
<select
|
||||
name="categoryId"
|
||||
required
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink appearance-none"
|
||||
>
|
||||
<option value="">Kategori seçin...</option>
|
||||
{categories.map((c) => (
|
||||
<option key={c.value} value={c.value}>
|
||||
{c.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Neighborhood */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.neighborhood} *</label>
|
||||
<select
|
||||
name="neighborhoodId"
|
||||
required
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink appearance-none"
|
||||
>
|
||||
<option value="">Mahalle seçin...</option>
|
||||
{neighborhoods.map((n) => (
|
||||
<option key={n.value} value={n.value}>
|
||||
{n.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.address} *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
required
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink placeholder:text-ink/30"
|
||||
placeholder="Örn: Yat Limanı No:12, Marmaris"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{/* Phone */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.phone}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="phone"
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink placeholder:text-ink/30"
|
||||
placeholder="Örn: +90 252 412 34 56"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Whatsapp */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.whatsapp}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="whatsapp"
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink placeholder:text-ink/30"
|
||||
placeholder="Örn: +90 532 123 45 67"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.description} *</label>
|
||||
<textarea
|
||||
name="description"
|
||||
required
|
||||
rows={4}
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink placeholder:text-ink/30"
|
||||
placeholder="İşletmenizi tanıtan kısa bir açıklama yazın..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Image File */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.image}</label>
|
||||
<input
|
||||
type="file"
|
||||
name="imageFile"
|
||||
accept="image/*"
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-pine file:text-stone hover:file:opacity-90 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Name & Email */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 border-t border-dashed border-pine/10 pt-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.contactName} *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="contactName"
|
||||
required
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink placeholder:text-ink/30"
|
||||
placeholder="Adınız Soyadınız"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-mono uppercase tracking-wider text-shutter">{translations.contactEmail} *</label>
|
||||
<input
|
||||
type="email"
|
||||
name="contactEmail"
|
||||
required
|
||||
className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink placeholder:text-ink/30"
|
||||
placeholder="eposta@adresiniz.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-turquoise hover:bg-turquoise/90 disabled:opacity-75 disabled:cursor-not-allowed text-paper font-bold text-sm py-4.5 px-4 rounded-xl transition duration-300 shadow-sm"
|
||||
>
|
||||
{loading ? translations.sending : translations.submit}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { mockDb } from '@/lib/mockDb'
|
||||
import BusinessForm from './BusinessForm'
|
||||
|
||||
interface AddBusinessPageProps {
|
||||
params: Promise<{ locale: string }>
|
||||
}
|
||||
|
||||
export default async function AddBusinessPage({ params }: AddBusinessPageProps) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
const t = await getTranslations('forms')
|
||||
const navT = await getTranslations('nav')
|
||||
|
||||
// Fetch categories and neighborhoods to populate form select options
|
||||
const categories = await mockDb.getCategories()
|
||||
const neighborhoods = await mockDb.getNeighborhoods()
|
||||
|
||||
const getLocalizedName = (obj: any) => {
|
||||
if (!obj) return ''
|
||||
return locale === 'ru' ? obj.nameRu : locale === 'en' ? obj.nameEn : obj.nameTr
|
||||
}
|
||||
|
||||
const categoryOptions = categories.map(c => ({
|
||||
value: c.id,
|
||||
label: getLocalizedName(c)
|
||||
}))
|
||||
|
||||
const neighborhoodOptions = neighborhoods.map(n => ({
|
||||
value: n.id,
|
||||
label: getLocalizedName(n)
|
||||
}))
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col min-h-screen bg-stone text-ink">
|
||||
|
||||
<main className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1 w-full">
|
||||
<div className="bg-paper p-8 rounded-3xl border border-pine/8 shadow-sm">
|
||||
|
||||
<div className="mb-8 border-b border-dashed border-pine/8 pb-6">
|
||||
<h1 className="text-3xl font-heading font-extrabold text-pine lowercase">
|
||||
{navT('addBusiness')}
|
||||
</h1>
|
||||
<p className="text-xs text-shutter font-mono uppercase tracking-wider mt-1.5">
|
||||
marmaris local • yeni başvuru
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<BusinessForm
|
||||
translations={{
|
||||
businessName: t('businessName'),
|
||||
category: t('category'),
|
||||
neighborhood: t('neighborhood'),
|
||||
address: t('address'),
|
||||
phone: t('phone'),
|
||||
whatsapp: t('whatsapp'),
|
||||
description: t('description'),
|
||||
image: t('image'),
|
||||
submit: t('submit'),
|
||||
sending: t('sending'),
|
||||
success: t('success'),
|
||||
contactName: 'Yetkili Adı Soyadı',
|
||||
contactEmail: 'İletişim E-postası'
|
||||
}}
|
||||
categories={categoryOptions}
|
||||
neighborhoods={neighborhoodOptions}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user