update website home and dashboard

apps/marketplace/src/components/MarketplaceShell.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import { ChevronDown, Globe } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
+import MarketplaceFooter from '@/components/MarketplaceFooter'
+import MarketplaceHeader from '@/components/MarketplaceHeader'
 import { footerPageHref } from '@/lib/footerContent'
 import { MARKETPLACE_LANGUAGE_COOKIE, SHARED_LANGUAGE_COOKIE, isMarketplaceLanguage, type MarketplaceLanguage } from '@/lib/i18n'
 import { resolveBrowserAppUrl } from '@/lib/appUrls'
@@ -30,7 +29,7 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
     marketplace: 'Home',
     explore: 'Marketplace',
     signIn: 'Sign in',
-    ownerSignIn: 'Create account',
+    ownerSignIn: 'Create Agency Space',
     language: 'Language',
     theme: 'Theme',
     light: 'Light',
@@ -42,7 +41,7 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
     marketplace: 'Accueil',
     explore: 'Marketplace',
     signIn: 'Connexion',
-    ownerSignIn: 'Créer un compte',
+    ownerSignIn: "Créer Espace d'Agence",
     language: 'Langue',
     theme: 'Mode',
     light: 'Clair',
@@ -54,7 +53,7 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
     marketplace: 'الرئيسية',
     explore: 'السوق',
     signIn: 'تسجيل الدخول',
-    ownerSignIn: 'إنشاء حساب',
+    ownerSignIn: 'إنشاء مساحة الوكالة',
     language: 'اللغة',
     theme: 'الوضع',
     light: 'فاتح',
@@ -74,20 +73,15 @@ type PreferencesContextValue = {
 
 const PreferencesContext = createContext<PreferencesContextValue | null>(null)
 
-type FooterItem = {
-  label: string
-  href?: string
-}
-
-const localeOptions: Array<{ value: MarketplaceLanguage; label: string }> = [
-  { value: 'en', label: 'Global (English)' },
-  { value: 'ar', label: 'NorthAfrica (Arabic)' },
-  { value: 'fr', label: 'Europ (French)' },
+const localeOptions: Array<{ value: MarketplaceLanguage; label: string; flag: string }> = [
+  { value: 'en', label: 'Global (English)', flag: '🇺🇸' },
+  { value: 'ar', label: 'NorthAfrica (Arabic)', flag: '🇲🇦' },
+  { value: 'fr', label: 'Europ (French)', flag: '🇫🇷' },
 ]
 
 function getFooterContent(language: MarketplaceLanguage): {
-  primary: FooterItem[]
-  secondary: FooterItem[]
+  primary: Array<{ label: string; href?: string }>
+  secondary: Array<{ label: string; href?: string }>
   localeLabel: string
   rightsLabel: string
 } {
@@ -150,45 +144,6 @@ function getFooterContent(language: MarketplaceLanguage): {
   }
 }
 
-function SegmentedControl<T extends string>({
-  label,
-  value,
-  options,
-  onChange,
-}: {
-  label: string
-  value: T
-  options: { value: T; label: string }[]
-  onChange: (value: T) => void
-}) {
-  return (
-    <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">
-        {label}
-      </span>
-      <div className="flex items-center gap-1">
-        {options.map((option) => {
-          const active = option.value === value
-          return (
-            <button
-              key={option.value}
-              type="button"
-              onClick={() => onChange(option.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'
-              }`}
-            >
-              {option.label}
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
 function detectBrowserLanguage(): string | null {
   if (typeof navigator === 'undefined') return null
   const langs = Array.from(navigator.languages ?? [navigator.language])
@@ -205,19 +160,50 @@ export function useMarketplacePreferences() {
   return context
 }
 
-export default function MarketplaceShell({ children }: { children: React.ReactNode }) {
+export default function MarketplaceShell({
+  children,
+  initialLanguage = 'en',
+}: {
+  children: React.ReactNode
+  initialLanguage?: MarketplaceLanguage
+}) {
   const pathname = usePathname()
   const router = useRouter()
   const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
-  const adminUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_ADMIN_URL ?? 'http://localhost:3002/admin')
   const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
-  const [language, setLanguage] = useState<MarketplaceLanguage>('en')
-  const [theme, setTheme] = useState<Theme>('light')
+  const [language, setLanguageState] = useState<MarketplaceLanguage>(initialLanguage)
+  const [theme, setThemeState] = useState<Theme>('light')
   const [hydrated, setHydrated] = useState(false)
-  const previousLanguage = useRef<MarketplaceLanguage>('en')
-  const localeMenuRef = useRef<HTMLDivElement | null>(null)
+  const previousLanguage = useRef<MarketplaceLanguage>(initialLanguage)
   const [companyName, setCompanyName] = useState<string | null>(null)
-  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
+
+  function applyLanguage(nextLanguage: MarketplaceLanguage) {
+    if (nextLanguage === language) return
+
+    if (typeof window !== 'undefined') {
+      document.documentElement.lang = nextLanguage
+      document.documentElement.dir = nextLanguage === 'ar' ? 'rtl' : 'ltr'
+      try {
+        sessionStorage.setItem('marketplace-language', nextLanguage)
+      } catch {}
+      writeScopedPreference(SHARED_LANGUAGE_KEY, nextLanguage, ['marketplace-language'])
+    }
+
+    setLanguageState(nextLanguage)
+  }
+
+  function applyTheme(nextTheme: Theme) {
+    if (nextTheme === theme) return
+
+    if (typeof window !== 'undefined') {
+      document.documentElement.classList.toggle('dark', nextTheme === 'dark' || nextTheme === 'medium')
+      document.documentElement.style.colorScheme = nextTheme === 'light' ? 'light' : 'dark'
+      document.body.dataset.theme = nextTheme
+      writeScopedPreference(SHARED_THEME_KEY, nextTheme, ['marketplace-theme'])
+    }
+
+    setThemeState(nextTheme)
+  }
 
   async function syncCompanyBrand() {
     const token = document.cookie
@@ -249,36 +235,63 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo
     }
   }
 
-  function syncScopedPreferencesForSession() {
-    const scopedLanguage = readCurrentUserScopedPreference(SHARED_LANGUAGE_KEY)
-    const scopedTheme = readCurrentUserScopedPreference(SHARED_THEME_KEY)
+  function readSessionLanguage(): MarketplaceLanguage | null {
+    try {
+      const val = sessionStorage.getItem('marketplace-language')
+      return isMarketplaceLanguage(val) ? val : null
+    } catch {
+      return null
+    }
+  }
 
-    if (isMarketplaceLanguage(scopedLanguage) && scopedLanguage !== language) {
-      setLanguage(scopedLanguage)
+  function syncScopedPreferencesForSession() {
+    // Tab-session choice always wins — never let an employee-scoped cookie override
+    // a language the user explicitly picked during this browsing session.
+    const sessionLang = readSessionLanguage()
+    if (sessionLang) {
+      if (sessionLang !== language) setLanguageState(sessionLang)
     } else {
-      writeScopedPreference(SHARED_LANGUAGE_KEY, language, ['marketplace-language'])
+      const scopedLanguage = readCurrentUserScopedPreference(SHARED_LANGUAGE_KEY)
+      if (isMarketplaceLanguage(scopedLanguage) && scopedLanguage !== language) {
+        setLanguageState(scopedLanguage)
+      }
     }
 
+    const scopedTheme = readCurrentUserScopedPreference(SHARED_THEME_KEY)
     if ((scopedTheme === 'light' || scopedTheme === 'medium' || scopedTheme === 'dark') && scopedTheme !== theme) {
-      setTheme(scopedTheme)
+      setThemeState(scopedTheme)
     } else {
       writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
     }
   }
 
   useEffect(() => {
-    const storedLanguage = readScopedPreference(SHARED_LANGUAGE_KEY, ['marketplace-language'])
-    const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['marketplace-theme']) as Theme | null
-
-    if (isMarketplaceLanguage(storedLanguage)) {
-      setLanguage(storedLanguage)
+    // sessionStorage is tab-local — check it first so a selection made earlier in
+    // this tab is honoured even after a server refresh.
+    const sessionLang = readSessionLanguage()
+    if (sessionLang) {
+      setLanguageState(sessionLang)
+      // Write the persistent cookie immediately so any subsequent RSC request
+      // (e.g. router.refresh or next navigation) sees the correct language
+      // without waiting for the language effect's render cycle.
+      writeScopedPreference(SHARED_LANGUAGE_KEY, sessionLang, ['marketplace-language'])
     } else {
-      const detected = detectBrowserLanguage()
-      if (isMarketplaceLanguage(detected)) setLanguage(detected)
+      const storedLanguage = readScopedPreference(SHARED_LANGUAGE_KEY, ['marketplace-language'])
+      if (isMarketplaceLanguage(storedLanguage)) {
+        setLanguageState(storedLanguage)
+        writeScopedPreference(SHARED_LANGUAGE_KEY, storedLanguage, ['marketplace-language'])
+      } else {
+        const detected = detectBrowserLanguage()
+        if (isMarketplaceLanguage(detected)) {
+          setLanguageState(detected)
+          writeScopedPreference(SHARED_LANGUAGE_KEY, detected, ['marketplace-language'])
+        }
+      }
     }
 
+    const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['marketplace-theme']) as Theme | null
     if (storedTheme === 'light' || storedTheme === 'medium' || storedTheme === 'dark') {
-      setTheme(storedTheme)
+      setThemeState(storedTheme)
     }
 
     setHydrated(true)
@@ -316,195 +329,77 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo
   useEffect(() => {
     document.documentElement.lang = language
     document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'
-    document.documentElement.classList.toggle('dark', theme === 'dark' || theme === 'medium')
-    document.body.dataset.theme = theme
-    writeScopedPreference(SHARED_LANGUAGE_KEY, language, ['marketplace-language'])
-    writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
-    document.cookie = `${MARKETPLACE_LANGUAGE_COOKIE}=${language}; path=/; max-age=31536000; SameSite=Lax`
-    document.cookie = `${SHARED_LANGUAGE_COOKIE}=${language}; path=/; max-age=31536000; SameSite=Lax`
 
-    if (hydrated && previousLanguage.current !== language) {
+    // Don't write to storage on the initial render (language='en' default) — wait
+    // until hydration has resolved the correct stored preference.  Writing 'en'
+    // here before hydration would overwrite a previously-saved 'ar' preference.
+    if (!hydrated) return
+
+    try { sessionStorage.setItem('marketplace-language', language) } catch {}
+    writeScopedPreference(SHARED_LANGUAGE_KEY, language, ['marketplace-language'])
+
+    if (previousLanguage.current !== language) {
       router.refresh()
     }
     previousLanguage.current = language
-  }, [hydrated, language, router, theme])
+  }, [hydrated, language, pathname, router])
 
   useEffect(() => {
-    function handlePointerDown(event: MouseEvent) {
-      if (!localeMenuRef.current?.contains(event.target as Node)) {
-        setLocaleMenuOpen(false)
-      }
-    }
-
-    document.addEventListener('mousedown', handlePointerDown)
-    return () => document.removeEventListener('mousedown', handlePointerDown)
-  }, [])
+    document.documentElement.classList.toggle('dark', theme === 'dark' || theme === 'medium')
+    document.body.dataset.theme = theme
+    writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
+  }, [theme])
 
   const dict = dictionaries[language]
   const footerContent = getFooterContent(language)
   const availableLocaleOptions = localeOptions.filter((option) => option.value !== language)
+  const currentLocale = localeOptions.find((option) => option.value === language) ?? localeOptions[0]
   const isRenterApp = pathname.startsWith('/renter/')
-  const isEmbeddedWorkspace = isRenterApp
-  const hideHeader = isRenterApp
+  const isAuthFrameRoute = pathname === '/sign-in'
   const value = useMemo(
-    () => ({ language, theme, dict, setLanguage, setTheme }),
+    () => ({ language, theme, dict, setLanguage: applyLanguage, setTheme: applyTheme }),
     [dict, language, theme],
   )
 
   return (
     <PreferencesContext.Provider value={value}>
-      <div className="min-h-screen bg-stone-50 text-stone-900 transition-colors dark:bg-stone-950 dark:text-stone-100">
-        {!hideHeader ? (
-          <header className="sticky top-0 z-50 border-b border-stone-200 bg-white/80 backdrop-blur-md transition-colors dark:border-stone-800 dark:bg-stone-950/80">
-            <div className="shell flex min-h-14 flex-col gap-3 py-3 lg:flex-row lg:items-center lg:justify-between lg:py-2">
-              <div className="flex items-center justify-between gap-4">
-                <Link href="/" 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>
-              </div>
+      <div className="flex min-h-screen flex-col bg-stone-50 text-stone-900 transition-colors dark:bg-stone-950 dark:text-stone-100">
+        {isRenterApp || isAuthFrameRoute ? null : (
+          <MarketplaceHeader
+            dict={dict}
+            theme={theme}
+            setTheme={applyTheme}
+            companyName={companyName}
+            dashboardUrl={dashboardUrl}
+            currentLanguage={{
+              value: currentLocale.value,
+              flag: currentLocale.flag,
+              shortLabel: currentLocale.value.toUpperCase(),
+            }}
+            localeOptions={availableLocaleOptions.map((option) => ({
+              value: option.value,
+              flag: option.flag,
+              shortLabel: option.value.toUpperCase(),
+            }))}
+            onSelectLanguage={applyLanguage}
+          />
+        )}
 
-              <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="/"
-                    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="/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.explore}
-                  </Link>
-                  <Link
-                    href="/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>
-                  {companyName ? (
-                    <Link
-                      href={`${dashboardUrl}/dashboard`}
-                      className="ml-2 flex items-center gap-2 rounded-full bg-stone-900 px-4 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"
-                    >
-                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-[10px] font-black dark:bg-stone-950/20">
-                        {companyName.charAt(0).toUpperCase()}
-                      </span>
-                      {companyName}
-                    </Link>
-                  ) : (
-                    <Link
-                      href={`${dashboardUrl}/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.ownerSignIn}
-                    </Link>
-                  )}
-                </nav>
-                <SegmentedControl
-                  label={dict.theme}
-                  value={theme}
-                  options={[
-                    { value: 'light', label: dict.light },
-                    { value: 'medium', label: dict.medium },
-                    { value: 'dark', label: dict.dark },
-                  ]}
-                  onChange={setTheme}
-                />
-              </div>
-            </div>
-          </header>
-        ) : null}
-
-        <div className="flex min-h-[calc(100vh-57px)] flex-col">
-          <div className="flex-1">
-            {children}
-          </div>
-
-          {!isEmbeddedWorkspace ? (
-            <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="shell flex flex-col items-center gap-5 text-center">
-                <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>
-          ) : null}
+        <div className="flex flex-1 flex-col">
+          <div className="flex-1">{children}</div>
+          {isRenterApp || isAuthFrameRoute ? null : (
+            <MarketplaceFooter
+              primaryItems={footerContent.primary}
+              secondaryItems={footerContent.secondary}
+              localeLabel={footerContent.localeLabel}
+              rightsLabel={footerContent.rightsLabel}
+              localeOptions={availableLocaleOptions}
+              currentLocale={currentLocale}
+              onSelectLanguage={applyLanguage}
+            />
+          )}
         </div>
       </div>
     </PreferencesContext.Provider>
   )
 }
-
-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>
-}