feat: implement dynamic categories, admin category CRUD, fix routing and cleanup

app/[locale]/[category]/[slug]/DetailTracker.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function DetailTracker({ listingId }: { listingId: string }) {
+  useEffect(() => {
+    // Send fire-and-forget page view tracking event on load
+    fetch('/api/events', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ listingId, actionType: 'views' })
+    }).catch(err => console.error('Tracking views error:', err))
+
+    const trackClick = (action: 'phone' | 'whatsapp' | 'menu') => {
+      fetch('/api/events', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ listingId, actionType: action })
+      }).catch(err => console.error(`Tracking ${action} error:`, err))
+    }
+
+    const telBtn = document.getElementById('listing-contact-phone')
+    const waBtn = document.getElementById('listing-contact-whatsapp')
+    const menuBtn = document.getElementById('listing-contact-menu')
+
+    const handleTel = () => trackClick('phone')
+    const handleWa = () => trackClick('whatsapp')
+    const handleMenu = () => trackClick('menu')
+
+    if (telBtn) telBtn.addEventListener('click', handleTel)
+    if (waBtn) waBtn.addEventListener('click', handleWa)
+    if (menuBtn) menuBtn.addEventListener('click', handleMenu)
+
+    return () => {
+      if (telBtn) telBtn.removeEventListener('click', handleTel)
+      if (waBtn) waBtn.removeEventListener('click', handleWa)
+      if (menuBtn) menuBtn.removeEventListener('click', handleMenu)
+    }
+  }, [listingId])
+
+  return null
+}

app/[locale]/[category]/[slug]/page.tsx

@@ -6,16 +6,19 @@ import Image from 'next/image'
 import { Link } from '@/i18n/routing'
 import { Phone, Globe, MapPin, Clock, Star, MessageSquare, Share2 } from 'lucide-react'
 import SaveButton from './SaveButton'
+import DetailTracker from './DetailTracker'
 
 interface DetailPageProps {
   params: Promise<{ locale: string; category: string; slug: string }>
 }
 
+export const dynamic = 'force-dynamic'
+
 export async function generateMetadata({ params }: DetailPageProps) {
   const { slug } = await params
   const listing = await mockDb.getListingBySlug(slug)
   if (!listing) return {}
-  
+
   return {
     title: `${listing.nameTr} — Marmaris Local`,
     description: listing.descriptionTr
@@ -27,7 +30,7 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
   setRequestLocale(locale)
 
   const t = await getTranslations('detail')
-  
+
   const listing = await mockDb.getListingBySlug(slug)
   if (!listing) {
     notFound()
@@ -56,19 +59,21 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
     locale === 'ru'
       ? listing.nameRu
       : locale === 'en'
-      ? listing.nameEn
-      : listing.nameTr
+        ? listing.nameEn
+        : listing.nameTr
 
   const description =
     locale === 'ru'
       ? listing.descriptionRu
       : locale === 'en'
-      ? listing.descriptionEn
-      : listing.descriptionTr
+        ? listing.descriptionEn
+        : listing.descriptionTr
 
   const priceSymbols = '₺'.repeat(listing.priceRange)
   const categorySlug = listing.category?.slug || 'isletme'
-  
+  const rawId = listing.id; // örn: "gm-ChIJY_2Q8tbJvxQRs7xwaSne0is"
+  const hasGooglePlaceId = rawId.startsWith('gm-');
+  const placeId = hasGooglePlaceId ? rawId.replace('gm-', '') : null;
   // Format WhatsApp Link
   const getWhatsAppLink = (number: string) => {
     const cleanNum = number.replace(/\D/g, '')
@@ -83,9 +88,10 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
 
   return (
     <div className="flex-1 flex flex-col min-h-screen bg-stone text-ink">
+      <DetailTracker listingId={listing.id} />
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 flex-1 space-y-10">
-        
+
         {/* Breadcrumb */}
         <div className="text-xs font-mono uppercase tracking-wider text-shutter flex items-center gap-2">
           <span className="hover:text-turquoise transition-colors">marmaris local</span>
@@ -100,7 +106,7 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
         {/* Hero Details Block */}
         <div className="bg-paper rounded-3xl border border-pine/8 p-6 sm:p-10 shadow-sm space-y-8">
           <div className="flex flex-col lg:flex-row gap-10">
-            
+
             {/* Left: Gallery Panel */}
             <div className="flex-1 space-y-4">
               <div className="aspect-[16/10] w-full relative rounded-2xl overflow-hidden bg-stone-deep shadow-sm">
@@ -137,7 +143,7 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
                   <span className="text-[10px] font-mono text-bougainvillea font-bold uppercase tracking-wider bg-bougainvillea/5 border border-bougainvillea/10 px-2.5 py-1 rounded-full">
                     {locale === 'ru' ? listing.category?.nameRu : locale === 'en' ? listing.category?.nameEn : listing.category?.nameTr}
                   </span>
-                  
+
                   {listing.isLocalApproved && (
                     <span className="inline-flex items-center gap-1 text-[10px] font-mono text-turquoise font-bold uppercase tracking-wider bg-turquoise/5 border border-turquoise/10 px-2.5 py-1 rounded-full">
                       ★ {t('approved')}
@@ -165,16 +171,50 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
 
               {/* Description */}
               <div className="text-ink/80 text-sm sm:text-base leading-relaxed font-medium">
-                {description}
+                {description ? description : <span className="italic text-ink/50">{t('no_description', { defaultValue: 'Bu işletme için henüz bir açıklama eklenmemiştir.' })}</span>}
               </div>
 
+              {/* Contact Info (Only if at least one exists) */}
+              {(listing.phone || listing.website || listing.instagram) && (
+                <div className="space-y-4 pt-6 border-t border-pine/10">
+                  <h3 className="font-heading font-bold text-xs text-pine uppercase tracking-wider">{t('contact')}</h3>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {listing.phone && (
+                      <a id="listing-contact-phone" href={`tel:${listing.phone}`} className="flex items-center gap-3 p-3 rounded-xl border border-pine/10 hover:border-turquoise/30 hover:bg-turquoise/5 transition-colors group">
+                        <div className="w-8 h-8 rounded-full bg-pine/5 flex items-center justify-center group-hover:bg-turquoise/10 transition-colors">
+                          <Phone className="w-4 h-4 text-pine group-hover:text-turquoise transition-colors" />
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-[10px] font-bold text-pine/50 uppercase tracking-wider">{t('phone')}</span>
+                          <span className="text-sm font-medium text-ink group-hover:text-pine transition-colors">{listing.phone}</span>
+                        </div>
+                      </a>
+                    )}
+                    {listing.website && (
+                      <a id="listing-contact-website" href={listing.website.startsWith('http') ? listing.website : `https://${listing.website}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-3 rounded-xl border border-pine/10 hover:border-turquoise/30 hover:bg-turquoise/5 transition-colors group">
+                        <div className="w-8 h-8 rounded-full bg-pine/5 flex items-center justify-center group-hover:bg-turquoise/10 transition-colors">
+                          <Globe className="w-4 h-4 text-pine group-hover:text-turquoise transition-colors" />
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-[10px] font-bold text-pine/50 uppercase tracking-wider">{t('website')}</span>
+                          <span className="text-sm font-medium text-ink group-hover:text-pine transition-colors truncate max-w-[150px]">
+                            {listing.website.replace(/^https?:\/\//, '').replace(/\/$/, '')}
+                          </span>
+                        </div>
+                      </a>
+                    )}
+                  </div>
+                </div>
+              )}
+
               {/* Contact & Actions Grid */}
               <div className="space-y-4 pt-2">
                 <h3 className="font-heading font-bold text-xs uppercase tracking-wider text-shutter">{t('contact')}</h3>
-                
+
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                   {listing.phone && (
                     <a
+                      id="listing-contact-phone"
                       href={`tel:${listing.phone}`}
                       className="flex items-center justify-center gap-2 bg-pine hover:bg-pine/90 text-stone font-bold text-xs py-3.5 px-4 rounded-xl transition"
                     >
@@ -185,6 +225,7 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
 
                   {listing.whatsapp && (
                     <a
+                      id="listing-contact-whatsapp"
                       href={getWhatsAppLink(listing.whatsapp)}
                       target="_blank"
                       rel="noopener noreferrer"
@@ -198,6 +239,7 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
                   {/* Menu Link */}
                   {listing.menuUrl && (
                     <a
+                      id="listing-contact-menu"
                       href={listing.menuUrl}
                       target="_blank"
                       rel="noopener noreferrer"
@@ -272,13 +314,13 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
             </div>
 
             {/* Map Frame */}
-            {listing.latitude && listing.longitude && (
+            {((listing.latitude && listing.longitude) || hasGooglePlaceId) && (
               <div className="space-y-2">
                 <div className="flex items-center gap-2 font-heading font-bold text-xs text-pine uppercase tracking-wider">
                   <Globe className="w-4 h-4 text-turquoise" />
                   <span>{t('location')}</span>
                 </div>
-                <div className="rounded-xl overflow-hidden border border-pine/8 aspect-[16/10] sm:aspect-auto sm:h-36">
+                <div className="rounded-xl overflow-hidden border border-pine/8 aspect-[16/10] sm:aspect-auto sm:h-36 relative group">
                   <iframe
                     width="100%"
                     height="100%"
@@ -286,8 +328,14 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
                     scrolling="no"
                     marginHeight={0}
                     marginWidth={0}
-                    src={`https://maps.google.com/maps?q=${listing.latitude},${listing.longitude}&t=&z=15&ie=UTF8&iwloc=&output=embed`}
+                    src={
+                      hasGooglePlaceId
+                        ? `https://maps.google.com/maps?q=place_id:${placeId}&z=16&output=embed`
+                        : `https://maps.google.com/maps?q=${listing.latitude},${listing.longitude}+(${encodeURIComponent(name)})&t=&z=16&ie=UTF8&output=embed`
+                    }
                     className="w-full h-full shadow-sm"
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
                   />
                 </div>
               </div>
@@ -307,7 +355,7 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
                 <p className="text-[10px] font-mono text-shutter uppercase tracking-wider mt-0.5">{t('instagramFeed')}</p>
               </div>
             </div>
-            
+
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
               {instagramPosts.slice(0, 3).map((post: any, idx: number) => (
                 <a
@@ -344,10 +392,10 @@ export default async function ListingDetailPage({ params }: DetailPageProps) {
                 {t('newlyAddedSubtitle')}
               </p>
             </div>
-            
+
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               {latestListings.map((newest) => {
-                const catSlug = newest.category?.slug || 'isletmeler'
+                const catSlug = newest.category?.slug || 'businesses'
                 const newestName = locale === 'en' ? newest.nameEn : locale === 'ru' ? newest.nameRu : newest.nameTr
                 const newestImg = newest.images && newest.images.length > 0 ? newest.images[0].url : 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&auto=format&fit=crop&q=80'
                 return (