first commit

app/[locale]/admin/listings/[id]/ListingForm.tsx

@@ -0,0 +1,444 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { createOrUpdateListingAction } from '@/app/actions'
+import { ArrowLeft, Save } from 'lucide-react'
+import { Link } from '@/i18n/routing'
+
+interface Option {
+  value: string
+  label: string
+}
+
+interface FormProps {
+  listing: any | null
+  categories: Option[]
+  neighborhoods: Option[]
+}
+
+export default function ListingForm({ listing, categories, neighborhoods }: FormProps) {
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState<'tr' | 'en' | 'ru'>('tr')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    setSuccess(false)
+
+    const formData = new FormData(e.currentTarget)
+    if (listing) {
+      formData.append('id', listing.id)
+    }
+
+    try {
+      const res = await createOrUpdateListingAction(formData)
+      if (res.error) {
+        setError(res.error)
+      } else {
+        setSuccess(true)
+        setTimeout(() => {
+          router.push('/admin/listings')
+          router.refresh()
+        }, 1500)
+      }
+    } catch (err) {
+      setError('İşlem sırasında bir hata oluştu.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const initialImages = listing?.images || []
+  const img1 = initialImages[0]?.url || ''
+  const img2 = initialImages[1]?.url || ''
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {error && (
+        <div className="bg-bougainvillea/10 border border-bougainvillea/25 text-bougainvillea p-4 rounded-xl text-xs font-semibold">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="bg-turquoise/10 border border-turquoise/25 text-turquoise p-4 rounded-xl text-xs font-bold">
+          Mekan başarıyla kaydedildi! Yönlendiriliyorsunuz...
+        </div>
+      )}
+
+      {/* Language tabs */}
+      <div className="border-b border-pine/8">
+        <div className="flex gap-2">
+          {(['tr', 'en', 'ru'] as const).map((lang) => {
+            const label = lang === 'tr' ? '🇹🇷 Türkçe' : lang === 'en' ? '🇬🇧 English' : '🇷🇺 Русский'
+            const isTabActive = activeTab === lang
+            return (
+              <button
+                key={lang}
+                type="button"
+                onClick={() => setActiveTab(lang)}
+                className={`py-3 px-4 font-heading font-bold text-xs border-b-2 transition lowercase ${
+                  isTabActive
+                    ? 'border-turquoise text-turquoise'
+                    : 'border-transparent text-shutter hover:text-pine'
+                }`}
+              >
+                {label}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Multilingual input fields */}
+      <div className="space-y-4">
+        {/* TR Tab */}
+        {activeTab === 'tr' && (
+          <div className="space-y-4">
+            <div className="space-y-1.5">
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Mekan Adı (TR) *</label>
+              <input
+                type="text"
+                name="nameTr"
+                required
+                defaultValue={listing?.nameTr || ''}
+                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="Örn: İskele Balık Ocakbaşı"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (TR) *</label>
+              <textarea
+                name="descriptionTr"
+                required
+                rows={4}
+                defaultValue={listing?.descriptionTr || ''}
+                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="Türkçe tanıtım metni..."
+              />
+            </div>
+          </div>
+        )}
+
+        {/* EN Tab */}
+        {activeTab === 'en' && (
+          <div className="space-y-4">
+            <div className="space-y-1.5">
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Mekan Adı (EN) *</label>
+              <input
+                type="text"
+                name="nameEn"
+                required
+                defaultValue={listing?.nameEn || ''}
+                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="Örn: Iskele Fish & Grill"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (EN) *</label>
+              <textarea
+                name="descriptionEn"
+                required
+                rows={4}
+                defaultValue={listing?.descriptionEn || ''}
+                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="English description..."
+              />
+            </div>
+          </div>
+        )}
+
+        {/* RU Tab */}
+        {activeTab === 'ru' && (
+          <div className="space-y-4">
+            <div className="space-y-1.5">
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Mekan Adı (RU) *</label>
+              <input
+                type="text"
+                name="nameRu"
+                required
+                defaultValue={listing?.nameRu || ''}
+                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="Örn: Рыбный Гриль Искеле"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (RU) *</label>
+              <textarea
+                name="descriptionRu"
+                required
+                rows={4}
+                defaultValue={listing?.descriptionRu || ''}
+                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="Russian description..."
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <hr className="border-dashed border-pine/8" />
+
+      {/* Global fields */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {/* Slug */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">URL Slug *</label>
+          <input
+            type="text"
+            name="slug"
+            required
+            defaultValue={listing?.slug || ''}
+            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 font-mono"
+            placeholder="iskele-balik-ocakbasi"
+          />
+        </div>
+
+        {/* Categories */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Kategori *</label>
+          <select
+            name="categoryId"
+            required
+            defaultValue={listing?.categoryId || ''}
+            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>
+
+        {/* Neighborhoods */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Mahalle/Bölge *</label>
+          <select
+            name="neighborhoodId"
+            required
+            defaultValue={listing?.neighborhoodId || ''}
+            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>
+
+        {/* Address */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açık Adres *</label>
+          <input
+            type="text"
+            name="address"
+            required
+            defaultValue={listing?.address || ''}
+            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="Yat Limanı No:12, Marmaris"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
+        {/* Phone */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Telefon</label>
+          <input
+            type="text"
+            name="phone"
+            defaultValue={listing?.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 font-mono"
+            placeholder="+90 252..."
+          />
+        </div>
+
+        {/* Whatsapp */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">WhatsApp</label>
+          <input
+            type="text"
+            name="whatsapp"
+            defaultValue={listing?.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 font-mono"
+            placeholder="+90 532..."
+          />
+        </div>
+
+        {/* Website */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Web Sitesi</label>
+          <input
+            type="text"
+            name="website"
+            defaultValue={listing?.website || ''}
+            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 font-mono"
+            placeholder="https://..."
+          />
+        </div>
+
+        {/* Instagram */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Instagram</label>
+          <input
+            type="text"
+            name="instagram"
+            defaultValue={listing?.instagram || ''}
+            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 font-mono"
+            placeholder="https://instagram.com/..."
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
+        {/* Price range */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Fiyat Aralığı (1-3) *</label>
+          <select
+            name="priceRange"
+            required
+            defaultValue={listing?.priceRange || 2}
+            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"
+          >
+            <option value="1">₺ (Ekonomik)</option>
+            <option value="2">₺₺ (Orta)</option>
+            <option value="3">₺₺₺ (Lüks)</option>
+          </select>
+        </div>
+
+        {/* Rating */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Puan (0.0 - 5.0)</label>
+          <input
+            type="number"
+            name="rating"
+            step="0.1"
+            min="0"
+            max="5"
+            defaultValue={listing?.rating || ''}
+            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 font-mono"
+            placeholder="4.8"
+          />
+        </div>
+
+        {/* Latitude */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Enlem (Lat)</label>
+          <input
+            type="number"
+            name="latitude"
+            step="0.0001"
+            defaultValue={listing?.latitude || ''}
+            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 font-mono"
+            placeholder="36.8524"
+          />
+        </div>
+
+        {/* Longitude */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Boylam (Lng)</label>
+          <input
+            type="number"
+            name="longitude"
+            step="0.0001"
+            defaultValue={listing?.longitude || ''}
+            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 font-mono"
+            placeholder="28.2741"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {/* Opening hours */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Çalışma Saatleri</label>
+          <input
+            type="text"
+            name="openingHours"
+            defaultValue={listing?.openingHours?.all || ''}
+            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="Örn: 12:00 - 00:00"
+          />
+        </div>
+
+        {/* Approved toggle */}
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Yerel Onaylı Mührü</label>
+          <select
+            name="isLocalApproved"
+            defaultValue={listing?.isLocalApproved ? 'true' : 'false'}
+            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"
+          >
+            <option value="false">Normal Mekan</option>
+            <option value="true">Yerel Onaylı (Mühürlü)</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Image Upload fields */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 border-t border-dashed border-pine/8 pt-6">
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Görsel 1 (Dosya Yükle)</label>
+          <input
+            type="file"
+            name="imageFile1"
+            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-3 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-pine file:text-stone hover:file:opacity-90 cursor-pointer"
+          />
+          {img1 && (
+            <div className="mt-2 text-xs flex items-center gap-2">
+              <span className="text-shutter/65">Mevcut Görsel:</span>
+              <a href={img1} target="_blank" rel="noopener noreferrer" className="text-turquoise hover:underline font-mono truncate max-w-xs">{img1}</a>
+              <input type="hidden" name="imageUrl1" value={img1} />
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Görsel 2 (Dosya Yükle)</label>
+          <input
+            type="file"
+            name="imageFile2"
+            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-3 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-pine file:text-stone hover:file:opacity-90 cursor-pointer"
+          />
+          {img2 && (
+            <div className="mt-2 text-xs flex items-center gap-2">
+              <span className="text-shutter/65">Mevcut Görsel:</span>
+              <a href={img2} target="_blank" rel="noopener noreferrer" className="text-turquoise hover:underline font-mono truncate max-w-xs">{img2}</a>
+              <input type="hidden" name="imageUrl2" value={img2} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex gap-4 pt-4 border-t border-dashed border-pine/8">
+        <Link
+          href="/admin/listings"
+          className="inline-flex items-center gap-1.5 px-5 py-3 border border-pine/20 rounded-xl text-xs font-bold text-pine hover:bg-stone/30 transition duration-150"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          İptal
+        </Link>
+        
+        <button
+          type="submit"
+          disabled={loading}
+          className="inline-flex items-center gap-1.5 px-5 py-3 bg-turquoise hover:bg-turquoise/90 disabled:opacity-75 text-paper rounded-xl text-xs font-bold shadow-sm transition duration-150"
+        >
+          <Save className="w-4 h-4" />
+          {loading ? 'Kaydediliyor...' : 'Kaydet'}
+        </button>
+      </div>
+    </form>
+  )
+}

app/[locale]/admin/listings/[id]/page.tsx

@@ -0,0 +1,56 @@
+import { mockDb } from '@/lib/mockDb'
+import ListingForm from './ListingForm'
+import { notFound } from 'next/navigation'
+
+interface Props {
+  params: Promise<{ locale: string; id: string }>
+}
+
+export default async function AdminListingEditPage({ params }: Props) {
+  const { locale, id } = await params
+
+  const categories = await mockDb.getCategories()
+  const neighborhoods = await mockDb.getNeighborhoods()
+
+  let listing = null
+
+  if (id !== 'new') {
+    listing = await mockDb.getListingById(id)
+    if (!listing) {
+      notFound()
+    }
+  }
+
+  const categoryOptions = categories.map(c => ({
+    value: c.id,
+    label: c.nameTr
+  }))
+
+  const neighborhoodOptions = neighborhoods.map(n => ({
+    value: n.id,
+    label: n.nameTr
+  }))
+
+  return (
+    <div className="space-y-6 max-w-4xl">
+      <div>
+        <h2 className="text-3xl font-heading font-extrabold text-pine lowercase">
+          {id === 'new' ? 'yeni mekan ekle' : 'mekanı düzenle'}
+        </h2>
+        <p className="text-ink/65 text-xs font-medium mt-1">
+          {id === 'new' 
+            ? 'Rehbere eklenecek yeni işletme bilgilerini girin.' 
+            : 'Mevcut mekan bilgilerini güncelleyin.'}
+        </p>
+      </div>
+
+      <div className="bg-paper border border-pine/8 rounded-3xl shadow-sm p-6 sm:p-8">
+        <ListingForm
+          listing={listing}
+          categories={categoryOptions}
+          neighborhoods={neighborhoodOptions}
+        />
+      </div>
+    </div>
+  )
+}