fix notification and add billing page and contract

apps/dashboard/src/components/layout/PublicShell.tsx

@@ -1,66 +1,280 @@
 'use client'
 
+import { ChevronDown, Globe } from 'lucide-react'
+import Image from 'next/image'
 import Link from 'next/link'
+import { useEffect, useRef, useState } from 'react'
 import {
-  DashboardLanguageSwitcher,
-  DashboardThemeSwitcher,
+  type DashboardLanguage,
   useDashboardI18n,
 } from '@/components/I18nProvider'
 import { marketplaceUrl } from '@/lib/urls'
 
+type FooterItem = {
+  label: string
+  href?: string
+}
+
+const localeOptions: Array<{ value: DashboardLanguage; label: string }> = [
+  { value: 'en', label: 'Global (English)' },
+  { value: 'ar', label: 'NorthAfrica (Arabic)' },
+  { value: 'fr', label: 'Europ (French)' },
+]
+
+function getFooterContent(language: DashboardLanguage): {
+  primary: FooterItem[]
+  secondary: FooterItem[]
+  localeLabel: string
+  rightsLabel: string
+} {
+  switch (language) {
+    case 'fr':
+      return {
+        primary: [
+          { label: 'À propos', href: marketplaceUrl },
+          { label: 'CLUF' },
+          { label: "Conditions d'utilisation" },
+          { label: 'Sécurité' },
+          { label: 'Conformité' },
+          { label: 'Politique de confidentialité' },
+          { label: 'Politique de cookies' },
+          { label: "Programme d'affiliation" },
+        ],
+        secondary: [
+          { label: 'Newsletter' },
+          { label: 'Contacter les ventes', href: '/sign-up' },
+          { label: 'Nos bureaux', href: marketplaceUrl },
+        ],
+        localeLabel: 'Europ (French)',
+        rightsLabel: 'Tous droits réservés.',
+      }
+    case 'ar':
+      return {
+        primary: [
+          { label: 'من نحن', href: marketplaceUrl },
+          { label: 'اتفاقية الترخيص' },
+          { label: 'شروط الخدمة' },
+          { label: 'الأمان' },
+          { label: 'الامتثال' },
+          { label: 'سياسة الخصوصية' },
+          { label: 'سياسة ملفات الارتباط' },
+          { label: 'برنامج الشركاء' },
+        ],
+        secondary: [
+          { label: 'النشرة البريدية' },
+          { label: 'تواصل مع المبيعات', href: '/sign-up' },
+          { label: 'مكاتبنا', href: marketplaceUrl },
+        ],
+        localeLabel: 'NorthAfrica (Arabic)',
+        rightsLabel: 'جميع الحقوق محفوظة.',
+      }
+    case 'en':
+    default:
+      return {
+        primary: [
+          { label: 'About us', href: marketplaceUrl },
+          { label: 'EULA' },
+          { label: 'Terms of service' },
+          { label: 'Security' },
+          { label: 'Compliance' },
+          { label: 'Privacy policy' },
+          { label: 'Cookie policy' },
+          { label: 'Affiliate program' },
+        ],
+        secondary: [
+          { label: 'Newsletter' },
+          { label: 'Contact sales', href: '/sign-up' },
+          { label: 'Our offices', href: marketplaceUrl },
+        ],
+        localeLabel: 'Global (English)',
+        rightsLabel: 'All rights reserved.',
+      }
+  }
+}
+
 export default function PublicShell({ children }: { children: React.ReactNode }) {
-  const { language } = useDashboardI18n()
+  const { language, setLanguage, theme, setTheme } = useDashboardI18n()
+  const localeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
   const dict = {
     en: {
-      workspace: 'Company Workspace',
+      home: 'Home',
+      marketplace: 'Marketplace',
       signIn: 'Sign in',
-      createWorkspace: 'Create workspace',
+      createAccount: 'Create account',
       preferences: 'Workspace preferences',
+      theme: 'Theme',
+      light: 'Light',
+      medium: 'Medium',
+      dark: 'Dark',
     },
     fr: {
-      workspace: 'Espace entreprise',
+      home: 'Accueil',
+      marketplace: 'Marketplace',
       signIn: 'Connexion',
-      createWorkspace: 'Créer un espace',
+      createAccount: 'Créer un compte',
       preferences: 'Preferences espace',
+      theme: 'Mode',
+      light: 'Clair',
+      medium: 'Moyen',
+      dark: 'Sombre',
     },
     ar: {
-      workspace: 'مساحة الشركة',
+      home: 'الرئيسية',
+      marketplace: 'السوق',
       signIn: 'تسجيل الدخول',
-      createWorkspace: 'إنشاء مساحة',
+      createAccount: 'إنشاء حساب',
       preferences: 'تفضيلات المساحة',
+      theme: 'الوضع',
+      light: 'فاتح',
+      medium: 'متوسط',
+      dark: 'داكن',
     },
   }[language]
+  const footerContent = getFooterContent(language)
+  const availableLocaleOptions = localeOptions.filter((option) => option.value !== language)
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!localeMenuRef.current?.contains(event.target as Node)) {
+        setLocaleMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
 
   return (
     <div className="min-h-screen bg-[radial-gradient(circle_at_top,#dbeafe,transparent_35%),linear-gradient(180deg,#f8fafc,white)] transition-colors dark:bg-[radial-gradient(circle_at_top,rgba(37,99,235,0.18),transparent_35%),linear-gradient(180deg,#020617,#0f172a)] dark:text-slate-100">
-      <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/85 backdrop-blur-md transition-colors dark:border-slate-800 dark:bg-slate-950/85">
-        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4">
-          <Link href={marketplaceUrl} className="flex items-center gap-3 text-slate-900 dark:text-slate-100">
-            <span className="text-xs font-semibold uppercase tracking-[0.24em] text-blue-600">RentalDriveGo</span>
-            <span className="hidden text-sm font-semibold text-slate-500 dark:text-slate-400 sm:inline">{dict.workspace}</span>
+      <header className="sticky top-0 z-30 border-b border-stone-200 bg-white/85 backdrop-blur-md transition-colors dark:border-stone-800 dark:bg-stone-950/85">
+        <div className="mx-auto flex max-w-7xl flex-col gap-3 px-4 py-3 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8 lg:py-2">
+          <Link href={marketplaceUrl} className="flex items-center gap-3 text-sm font-bold uppercase tracking-[0.2em] text-stone-900 dark:text-stone-100">
+            <Image
+              src="/rentalcardrive.png"
+              alt="RentalDriveGo"
+              width={36}
+              height={36}
+              className="h-9 w-9 rounded-md object-contain"
+            />
+            <span>RentalDriveGo</span>
           </Link>
-          <nav className="flex items-center gap-2">
-            <Link href="/sign-in" className="rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100">
-              {dict.signIn}
-            </Link>
-            <Link href="/sign-up" className="rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-slate-200">
-              {dict.createWorkspace}
-            </Link>
-          </nav>
+
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+            <nav className="flex items-center gap-1 overflow-x-auto">
+              <Link href={marketplaceUrl} className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100">
+                {dict.home}
+              </Link>
+              <Link href={`${marketplaceUrl}/explore`} className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100">
+                {dict.marketplace}
+              </Link>
+              <Link href={`${marketplaceUrl}/sign-in`} className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100">
+                {dict.signIn}
+              </Link>
+              <Link href="/sign-up" className="ml-2 rounded-full bg-stone-900 px-5 py-2 text-sm font-semibold text-white transition hover:bg-stone-700 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300">
+                {dict.createAccount}
+              </Link>
+            </nav>
+            <div className="shrink-0">
+              <div className="flex items-center gap-2 rounded-full border border-stone-200/70 bg-white/90 px-2 py-1 shadow-sm dark:border-stone-700 dark:bg-stone-900/80">
+                <span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400">
+                  {dict.theme}
+                </span>
+                {(['light', 'medium', 'dark'] as const).map((value) => {
+                  const active = value === theme
+                  return (
+                    <button
+                      key={value}
+                      type="button"
+                      onClick={() => setTheme(value)}
+                      className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
+                        active
+                          ? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950'
+                          : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800'
+                      }`}
+                    >
+                      {value === 'light' ? dict.light : value === 'medium' ? dict.medium : dict.dark}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
         </div>
       </header>
       <div>{children}</div>
-      <footer className="border-t border-stone-200 bg-white/90 px-4 py-4 backdrop-blur-md transition-colors dark:border-slate-800 dark:bg-slate-950/90">
-        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 lg:flex-row">
-          <p className="text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-slate-500">
-            {dict.preferences}
-          </p>
-          <div className="flex flex-col items-center gap-3 sm:flex-row">
-            <DashboardLanguageSwitcher />
-            <DashboardThemeSwitcher />
+      <footer className="border-t border-stone-200 bg-white/90 px-4 py-8 text-stone-600 transition-colors dark:border-white/5 dark:bg-[#111111] dark:text-stone-300">
+        <div className="mx-auto flex max-w-7xl flex-col items-center gap-5 text-center px-0 sm:px-2 lg:px-0">
+          <nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+            {footerContent.primary.map((item, index) => (
+              <div key={item.label} className="flex items-center">
+                <FooterNavItem item={item} />
+                {index < footerContent.primary.length - 1 ? (
+                  <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+                ) : null}
+              </div>
+            ))}
+          </nav>
+
+          <div className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+            {footerContent.secondary.map((item) => (
+              <div key={item.label} className="flex items-center">
+                <FooterNavItem item={item} />
+                <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+              </div>
+            ))}
+            <div ref={localeMenuRef} className="relative px-3">
+              <button
+                type="button"
+                onClick={() => setLocaleMenuOpen((open) => !open)}
+                className="inline-flex items-center gap-2 text-sky-600 transition hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300"
+                aria-expanded={localeMenuOpen}
+                aria-haspopup="menu"
+              >
+                <Globe className="h-4 w-4" />
+                <span>{footerContent.localeLabel}</span>
+                <ChevronDown className={`h-4 w-4 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
+              </button>
+              {localeMenuOpen ? (
+                <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-stone-800 dark:bg-stone-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+                  {availableLocaleOptions.map((option) => (
+                    <button
+                      key={option.value}
+                      type="button"
+                      onClick={() => {
+                        setLanguage(option.value)
+                        setLocaleMenuOpen(false)
+                      }}
+                      className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-stone-950 dark:text-stone-200 dark:hover:bg-stone-900 dark:hover:text-white"
+                    >
+                      <Globe className="h-4 w-4 text-sky-600 dark:text-sky-400" />
+                      <span>{option.label}</span>
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
           </div>
+
+          <p className="text-sm text-stone-500 dark:text-stone-400">
+            &copy; {new Date().getFullYear()} RentalDriveGo. {footerContent.rightsLabel}
+          </p>
         </div>
       </footer>
     </div>
   )
 }
+
+function FooterNavItem({ item }: { item: FooterItem }) {
+  const className = 'px-3 text-stone-600 transition hover:text-stone-950 dark:text-stone-300 dark:hover:text-white'
+
+  if (item.href) {
+    return (
+      <Link href={item.href} className={className}>
+        {item.label}
+      </Link>
+    )
+  }
+
+  return <span className={className}>{item.label}</span>
+}