melabidi/carmanagement
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

update website home and dashboard

Browse Source
This commit is contained in:
root
2026-05-20 14:52:26 -04:00
parent d4f7de5762
commit fb15883f8e
38 changed files with 3043 additions and 1922 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/components/I18nProvider.tsx
+52 -11
View File
@@ -2,6 +2,7 @@
import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
import { SHARED_LANGUAGE_COOKIE, SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference, readScopedPreference, writeScopedPreference } from '@/lib/preferences'
import { apiFetch } from '@/lib/api'
export type DashboardLanguage = 'en' | 'fr' | 'ar'
export type DashboardTheme = 'light' | 'medium' | 'dark'
@@ -143,6 +144,7 @@ type ReservationsDict = {
type DashboardPageDict = {
failedToLoad: string
forbidden: string
kpiTotalBookings: string
kpiActiveVehicles: string
kpiMonthlyRevenue: string
@@ -556,6 +558,7 @@ const dictionaries: Record<DashboardLanguage, DashboardDictionary> = {
},
dashboardPage: {
failedToLoad: 'Failed to load dashboard',
forbidden: 'You do not have permission to access this page. A Manager role or higher is required.',
kpiTotalBookings: 'Total Bookings',
kpiActiveVehicles: 'Active Vehicles',
kpiMonthlyRevenue: 'Monthly Revenue',
@@ -899,6 +902,7 @@ const dictionaries: Record<DashboardLanguage, DashboardDictionary> = {
},
dashboardPage: {
failedToLoad: 'Échec du chargement du tableau de bord',
forbidden: "Vous n'avez pas la permission d'accéder à cette page. Un rôle Gestionnaire ou supérieur est requis.",
kpiTotalBookings: 'Total des réservations',
kpiActiveVehicles: 'Véhicules actifs',
kpiMonthlyRevenue: 'Revenus du mois',
@@ -1242,6 +1246,7 @@ const dictionaries: Record<DashboardLanguage, DashboardDictionary> = {
},
dashboardPage: {
failedToLoad: 'فشل تحميل لوحة التحكم',
forbidden: 'ليس لديك صلاحية الوصول إلى هذه الصفحة. يلزم دور المدير أو أعلى.',
kpiTotalBookings: 'إجمالي الحجوزات',
kpiActiveVehicles: 'المركبات النشطة',
kpiMonthlyRevenue: 'الإيرادات الشهرية',
@@ -1368,33 +1373,61 @@ export function DashboardI18nProvider({
children: React.ReactNode
initialLanguage?: DashboardLanguage
}) {
const [language, setLanguage] = useState<DashboardLanguage>(initialLanguage)
const [theme, setTheme] = useState<DashboardTheme>('light')
const [language, setLanguageState] = useState<DashboardLanguage>(initialLanguage)
const [theme, setThemeState] = useState<DashboardTheme>('light')
const themeInitialized = useRef(false)
// Skip the very first write so we don't overwrite a stored preference with the
// server-resolved initialLanguage before the read effect has a chance to apply it.
const skipFirstLangWrite = useRef(true)
function applyLanguage(nextLanguage: DashboardLanguage) {
if (nextLanguage === language) return
if (typeof document !== 'undefined') {
document.documentElement.lang = nextLanguage
document.documentElement.dir = nextLanguage === 'ar' ? 'rtl' : 'ltr'
writeScopedPreference(SHARED_LANGUAGE_KEY, nextLanguage, [DASHBOARD_LANGUAGE_KEY])
document.cookie = `${SHARED_LANGUAGE_COOKIE}=${nextLanguage}; path=/; max-age=31536000; samesite=lax`
document.cookie = `${DASHBOARD_LANGUAGE_KEY}=${nextLanguage}; path=/; max-age=31536000; samesite=lax`
}
setLanguageState(nextLanguage)
}
function applyTheme(nextTheme: DashboardTheme) {
if (nextTheme === theme) return
if (typeof document !== 'undefined') {
document.documentElement.classList.remove('light', 'dark')
document.documentElement.classList.add(nextTheme === 'light' ? 'light' : 'dark')
document.documentElement.style.colorScheme = nextTheme === 'light' ? 'light' : 'dark'
document.body.dataset.theme = nextTheme
writeScopedPreference(SHARED_THEME_KEY, nextTheme, ['dashboard-theme'])
}
setThemeState(nextTheme)
}
useEffect(() => {
const stored = readScopedPreference(SHARED_LANGUAGE_KEY, [DASHBOARD_LANGUAGE_KEY])
if (stored !== null) {
const next = normalizeLanguage(stored)
if (next !== language) setLanguage(next)
if (next !== language) setLanguageState(next)
} else {
const detected = detectBrowserLanguage()
if (detected && detected !== language) setLanguage(detected)
if (detected && detected !== language) setLanguageState(detected)
}
}, [])
useEffect(() => {
const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['dashboard-theme'])
if (storedTheme === 'light' || storedTheme === 'medium' || storedTheme === 'dark') {
if (storedTheme !== theme) setTheme(storedTheme)
if (storedTheme !== theme) setThemeState(storedTheme)
return
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches && theme !== 'dark') {
setTheme('dark')
setThemeState('dark')
}
}, [])
@@ -1431,18 +1464,18 @@ export function DashboardI18nProvider({
if (scopedLanguage) {
// Employee has a stored preference — apply it.
const next = normalizeLanguage(scopedLanguage)
if (next !== language) setLanguage(next)
if (next !== language) setLanguageState(next)
} else {
// No scoped pref yet (new login). Promote any base preference that was set
// before login (e.g., language selected on the sign-up page) to the scoped key.
const baseLang = readScopedPreference(SHARED_LANGUAGE_KEY, [DASHBOARD_LANGUAGE_KEY])
const langToWrite = baseLang ? normalizeLanguage(baseLang) : language
if (langToWrite !== language) setLanguage(langToWrite)
if (langToWrite !== language) setLanguageState(langToWrite)
writeScopedPreference(SHARED_LANGUAGE_KEY, langToWrite, [DASHBOARD_LANGUAGE_KEY])
}
if (scopedTheme === 'light' || scopedTheme === 'medium' || scopedTheme === 'dark') {
if (scopedTheme !== theme) setTheme(scopedTheme)
if (scopedTheme !== theme) setThemeState(scopedTheme)
} else {
writeScopedPreference(SHARED_THEME_KEY, theme, ['dashboard-theme'])
}
@@ -1453,7 +1486,7 @@ export function DashboardI18nProvider({
}, [language, theme])
const value = useMemo(
() => ({ language, setLanguage, theme, setTheme, dict: dictionaries[language] }),
() => ({ language, setLanguage: applyLanguage, theme, setTheme: applyTheme, dict: dictionaries[language] }),
[language, theme],
)
return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>
@@ -1475,6 +1508,14 @@ export function DashboardLanguageSwitcher() {
if (embedded) return null
function handleLanguageChange(value: DashboardLanguage) {
setLanguage(value)
apiFetch('/auth/employee/me/language', {
method: 'PATCH',
body: JSON.stringify({ language: value }),
}).catch(() => {})
}
return (
<div className="flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-1 shadow-sm transition-colors dark:border-slate-700 dark:bg-slate-900">
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">
@@ -1486,7 +1527,7 @@ export function DashboardLanguageSwitcher() {
<button
key={value}
type="button"
onClick={() => setLanguage(value)}
onClick={() => handleLanguageChange(value)}
className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
active
? 'bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-950'