fixing platform admin

apps/marketplace/src/app/explore/page.tsx

@@ -0,0 +1,286 @@
+import Link from 'next/link'
+import { marketplaceFetchOrDefault } from '@/lib/api'
+import { getMarketplaceLanguage } from '@/lib/i18n.server'
+import { formatCurrency } from '@rentaldrivego/types'
+
+interface Vehicle {
+  id: string
+  make: string
+  model: string
+  year: number
+  category: string
+  dailyRate: number
+  photos: string[]
+  availability?: boolean | null
+  company: {
+    slug: string
+    brand: {
+      displayName: string
+      logoUrl: string | null
+      subdomain: string
+      marketplaceRating: number | null
+    } | null
+  }
+}
+
+interface Offer {
+  id: string
+  title: string
+  discountValue: number
+  validUntil: string
+  company: {
+    brand: {
+      displayName: string
+      subdomain: string
+    } | null
+  }
+}
+
+interface CompanyCard {
+  id: string
+  brand: {
+    displayName: string
+    subdomain: string
+    publicCity: string | null
+    marketplaceRating: number | null
+  } | null
+  _count: {
+    vehicles: number
+  }
+}
+
+export default async function ExplorePage({ searchParams }: { searchParams?: Record<string, string | string[] | undefined> }) {
+  const language = getMarketplaceLanguage()
+  const dict = {
+    en: {
+      kicker: 'Discovery only',
+      title: 'Find your next rental from trusted local companies.',
+      body: 'Every listing links you to the company’s own booking and payment flow.',
+      city: 'City or location',
+      allCategories: 'All categories',
+      anyTransmission: 'Any transmission',
+      search: 'Search',
+      currentDeals: 'Current deals',
+      featuredOffers: 'Featured marketplace offers',
+      company: 'Company',
+      validUntil: 'Valid until',
+      offersUnavailable: 'Marketplace offers are unavailable right now.',
+      availableVehicles: 'Available vehicles',
+      listings: 'listings',
+      rentalCompany: 'Rental company',
+      checkAvailability: 'Check availability',
+      available: 'Available',
+      from: 'From',
+      bookNow: 'Book now',
+      details: 'Details',
+      vehicleUnavailable: 'Vehicle listings are unavailable right now.',
+      browseByCategory: 'Browse by category',
+      browseByCompany: 'Browse by company',
+      marketplacePartners: 'Marketplace partners',
+      marketplacePartner: 'Marketplace partner',
+      rating: 'Rating',
+      new: 'New',
+      publishedVehicles: 'published vehicles',
+      viewFleet: 'View fleet',
+      categories: ['Economy', 'Compact', 'SUV', 'Luxury', 'Van', 'Truck', 'Electric'],
+    },
+    fr: {
+      kicker: 'Découverte uniquement',
+      title: 'Trouvez votre prochaine location auprès d’entreprises locales fiables.',
+      body: 'Chaque annonce vous redirige vers le parcours de réservation et de paiement propre à l’entreprise.',
+      city: 'Ville ou emplacement',
+      allCategories: 'Toutes les catégories',
+      anyTransmission: 'Toute transmission',
+      search: 'Rechercher',
+      currentDeals: 'Offres du moment',
+      featuredOffers: 'Offres marketplace mises en avant',
+      company: 'Entreprise',
+      validUntil: 'Valable jusqu’au',
+      offersUnavailable: 'Les offres marketplace sont indisponibles pour le moment.',
+      availableVehicles: 'Véhicules disponibles',
+      listings: 'annonces',
+      rentalCompany: 'Société de location',
+      checkAvailability: 'Vérifier la disponibilité',
+      available: 'Disponible',
+      from: 'À partir de',
+      bookNow: 'Réserver',
+      details: 'Détails',
+      vehicleUnavailable: 'Les annonces véhicules sont indisponibles pour le moment.',
+      browseByCategory: 'Parcourir par catégorie',
+      browseByCompany: 'Parcourir par entreprise',
+      marketplacePartners: 'Partenaires marketplace',
+      marketplacePartner: 'Partenaire marketplace',
+      rating: 'Note',
+      new: 'Nouveau',
+      publishedVehicles: 'véhicules publiés',
+      viewFleet: 'Voir la flotte',
+      categories: ['Économie', 'Compacte', 'SUV', 'Luxe', 'Van', 'Camion', 'Électrique'],
+    },
+    ar: {
+      kicker: 'للاستكشاف فقط',
+      title: 'اعثر على سيارتك القادمة من شركات محلية موثوقة.',
+      body: 'كل إعلان يوجّهك إلى مسار الحجز والدفع الخاص بالشركة نفسها.',
+      city: 'المدينة أو الموقع',
+      allCategories: 'كل الفئات',
+      anyTransmission: 'أي ناقل حركة',
+      search: 'بحث',
+      currentDeals: 'العروض الحالية',
+      featuredOffers: 'عروض السوق المميزة',
+      company: 'شركة',
+      validUntil: 'صالح حتى',
+      offersUnavailable: 'عروض السوق غير متاحة حالياً.',
+      availableVehicles: 'السيارات المتاحة',
+      listings: 'إعلانات',
+      rentalCompany: 'شركة تأجير',
+      checkAvailability: 'تحقق من التوفر',
+      available: 'متاح',
+      from: 'ابتداءً من',
+      bookNow: 'احجز الآن',
+      details: 'التفاصيل',
+      vehicleUnavailable: 'قوائم السيارات غير متاحة حالياً.',
+      browseByCategory: 'تصفح حسب الفئة',
+      browseByCompany: 'تصفح حسب الشركة',
+      marketplacePartners: 'شركاء السوق',
+      marketplacePartner: 'شريك في السوق',
+      rating: 'التقييم',
+      new: 'جديد',
+      publishedVehicles: 'سيارات منشورة',
+      viewFleet: 'عرض الأسطول',
+      categories: ['اقتصادية', 'مدمجة', 'SUV', 'فاخرة', 'فان', 'شاحنة', 'كهربائية'],
+    },
+  }[language]
+  const city = typeof searchParams?.city === 'string' ? searchParams.city : ''
+  const category = typeof searchParams?.category === 'string' ? searchParams.category : ''
+  const transmission = typeof searchParams?.transmission === 'string' ? searchParams.transmission : ''
+  const query = new URLSearchParams()
+  if (city) query.set('city', city)
+  if (category) query.set('category', category)
+  if (transmission) query.set('transmission', transmission)
+  query.set('pageSize', '24')
+
+  const [offers, vehicles, companies] = await Promise.all([
+    marketplaceFetchOrDefault<Offer[]>('/marketplace/offers', []),
+    marketplaceFetchOrDefault<Vehicle[]>(`/marketplace/search?${query.toString()}`, []),
+    marketplaceFetchOrDefault<CompanyCard[]>('/marketplace/companies?pageSize=8', []),
+  ])
+
+  return (
+    <main className="min-h-screen bg-stone-50 py-10">
+      <div className="shell space-y-10">
+        <section className="rounded-[2rem] bg-[linear-gradient(135deg,#1c1917,#57534e)] px-8 py-12 text-white">
+          <p className="text-sm uppercase tracking-[0.2em] text-amber-300">{dict.kicker}</p>
+          <h1 className="mt-4 text-4xl font-black tracking-tight">{dict.title}</h1>
+          <p className="mt-4 max-w-2xl text-stone-300">{dict.body}</p>
+          <form className="mt-8 grid gap-3 rounded-[1.5rem] bg-white/10 p-4 md:grid-cols-4">
+            <input name="city" defaultValue={city} placeholder={dict.city} className="rounded-2xl border border-white/10 bg-white/90 px-4 py-3 text-sm text-stone-900" />
+            <select name="category" defaultValue={category} className="rounded-2xl border border-white/10 bg-white/90 px-4 py-3 text-sm text-stone-900">
+              <option value="">{dict.allCategories}</option>
+              {['ECONOMY', 'COMPACT', 'SUV', 'LUXURY', 'VAN', 'TRUCK'].map((option) => <option key={option} value={option}>{option}</option>)}
+            </select>
+            <select name="transmission" defaultValue={transmission} className="rounded-2xl border border-white/10 bg-white/90 px-4 py-3 text-sm text-stone-900">
+              <option value="">{dict.anyTransmission}</option>
+              {['AUTOMATIC', 'MANUAL'].map((option) => <option key={option} value={option}>{option}</option>)}
+            </select>
+            <button className="rounded-2xl bg-amber-400 px-4 py-3 text-sm font-semibold text-stone-950">{dict.search}</button>
+          </form>
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-bold text-stone-900">{dict.currentDeals}</h2>
+            <p className="text-sm text-stone-500">{dict.featuredOffers}</p>
+          </div>
+          <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {offers.map((offer) => (
+              <Link key={offer.id} href={`/explore/${offer.company.brand?.subdomain ?? ''}#offers`} className="card p-5 hover:border-amber-300 transition-colors">
+                <p className="text-xs uppercase tracking-[0.18em] text-amber-700">{offer.company.brand?.displayName ?? dict.company}</p>
+                <h3 className="mt-3 text-lg font-semibold text-stone-900">{offer.title}</h3>
+                <p className="mt-3 text-3xl font-black text-stone-900">{offer.discountValue}%</p>
+                <p className="mt-2 text-sm text-stone-500">{dict.validUntil} {new Date(offer.validUntil).toLocaleDateString()}</p>
+              </Link>
+            ))}
+            {offers.length === 0 && <div className="card p-6 text-sm text-stone-500 md:col-span-2 xl:col-span-4">{dict.offersUnavailable}</div>}
+          </div>
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-bold text-stone-900">{dict.availableVehicles}</h2>
+            <p className="text-sm text-stone-500">{vehicles.length} {dict.listings}</p>
+          </div>
+          <div className="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+            {vehicles.map((vehicle) => (
+              <article key={vehicle.id} className="card overflow-hidden">
+                <div className="aspect-[16/10] bg-stone-100">
+                  {vehicle.photos[0] ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={vehicle.photos[0]} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
+                  ) : null}
+                </div>
+                <div className="p-5">
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <p className="text-xs uppercase tracking-[0.16em] text-stone-500">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</p>
+                      <h3 className="mt-2 text-xl font-bold text-stone-900">{vehicle.make} {vehicle.model}</h3>
+                      <p className="mt-1 text-sm text-stone-500">{vehicle.year} · {vehicle.category}</p>
+                    </div>
+                    <span className={`rounded-full px-3 py-1 text-xs font-semibold ${vehicle.availability === false ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700'}`}>
+                      {vehicle.availability === false ? dict.checkAvailability : dict.available}
+                    </span>
+                  </div>
+                  <div className="mt-5 flex items-end justify-between">
+                    <div>
+                      <p className="text-sm text-stone-500">{dict.from}</p>
+                      <p className="text-2xl font-black text-stone-900">{formatCurrency(vehicle.dailyRate, 'MAD')}</p>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      <a
+                        href={`https://${vehicle.company.brand?.subdomain ?? vehicle.company.slug}.RentalDriveGo.com/book?vehicleId=${vehicle.id}&ref=marketplace`}
+                        className="rounded-full bg-stone-900 px-5 py-2.5 text-sm font-semibold text-white"
+                      >
+                        {dict.bookNow}
+                      </a>
+                      <Link href={`/explore/${vehicle.company.slug}/vehicles/${vehicle.id}`} className="rounded-full border border-stone-300 px-5 py-2.5 text-sm font-semibold text-stone-700">
+                        {dict.details}
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              </article>
+            ))}
+            {vehicles.length === 0 && <div className="card p-6 text-sm text-stone-500 md:col-span-2 xl:col-span-3">{dict.vehicleUnavailable}</div>}
+          </div>
+        </section>
+
+        <section>
+          <h2 className="text-2xl font-bold text-stone-900">{dict.browseByCategory}</h2>
+          <div className="mt-4 flex flex-wrap gap-3">
+            {dict.categories.map((categoryName, index) => (
+              <Link key={categoryName} href={`/explore?category=${['ECONOMY', 'COMPACT', 'SUV', 'LUXURY', 'VAN', 'TRUCK', 'ELECTRIC'][index]}`} className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm font-semibold text-stone-700">
+                {categoryName}
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-bold text-stone-900">{dict.browseByCompany}</h2>
+            <p className="text-sm text-stone-500">{dict.marketplacePartners}</p>
+          </div>
+          <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {companies.map((company) => (
+              <Link key={company.id} href={`/explore/${company.brand?.subdomain ?? ''}`} className="card p-5 hover:border-amber-300 transition-colors">
+                <p className="text-xs uppercase tracking-[0.18em] text-stone-500">{company.brand?.publicCity ?? dict.marketplacePartner}</p>
+                <h3 className="mt-3 text-lg font-semibold text-stone-900">{company.brand?.displayName ?? dict.rentalCompany}</h3>
+                <p className="mt-2 text-sm text-stone-500">{dict.rating} {company.brand?.marketplaceRating?.toFixed(1) ?? dict.new}</p>
+                <p className="mt-1 text-sm text-stone-500">{company._count.vehicles} {dict.publishedVehicles}</p>
+                <span className="mt-4 inline-flex rounded-full bg-stone-900 px-4 py-2 text-sm font-semibold text-white">{dict.viewFleet}</span>
+              </Link>
+            ))}
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}