// ============================================================================ // EasyTrack Client App - Main Application // ============================================================================ const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } = React; // Configuration const CONFIG = { API_URL: 'https://api.easytrack.ch', WS_URL: 'wss://track.easytrack.ch/ws', MAP_CENTER: [46.8182, 8.2275], MAP_ZOOM: 8, TILE_LAYERS: { google: { url: 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', attribution: '© Google Maps', label: 'Google' }, satellite: { url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', attribution: '© Google Satellite', label: 'Satellite' }, hybrid: { url: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', attribution: '© Google Hybrid', label: 'Hybride' } }, MAP_TINTS: { standard: { label: 'Couleur', filter: 'none', preview: 'linear-gradient(135deg, #4ade80, #3b82f6, #f59e0b)' }, grayDark: { label: 'Gris foncé', filter: 'grayscale(100%) brightness(0.7) invert(1)', preview: 'linear-gradient(135deg, #374151, #1f2937)' } } }; // Vehicle SVG map (same as admin) const VEHICLE_SVG_MAP = { 'Voiture': { src: 'assets/svg/voiture.svg', ratio: 18.81 / 9.14 }, 'Limousine': { src: 'assets/svg/limousine.svg', ratio: 32.52 / 9.8 }, 'Minibus': { src: 'assets/svg/minibus.svg', ratio: 20.4 / 9.8 }, 'Pickup': { src: 'assets/svg/pickup.svg', ratio: 20.4 / 9.8 }, 'SUV': { src: 'assets/svg/suv.svg', ratio: 19.56 / 9.94 }, 'Sport': { src: 'assets/svg/sportcar.svg', ratio: 17.21 / 9.14 }, 'Minibus Premium': { src: 'assets/svg/premium_minibus.svg', ratio: 20.4 / 9.8 }, 'Premium Limousine': { src: 'assets/svg/premium_vehicle.svg', ratio: 18.81 / 9.14 }, 'Chariot élévateur': { src: 'assets/svg/elevator.svg', ratio: 14.49 / 7.59 }, 'Construction': { src: 'assets/svg/construction.svg', ratio: 21.3 / 15.34 }, 'Camion': { src: 'assets/svg/truck.svg', ratio: 25.8 / 10.62 }, 'Ambulance': { src: 'assets/svg/ambulance.svg', ratio: 22.28 / 9.8 } }; function getVehicleImg(vehicleType, w) { const info = VEHICLE_SVG_MAP[vehicleType] || VEHICLE_SVG_MAP['Voiture']; const h = Math.round(w * info.ratio); return ``; } function getVehicleSize(vehicleType, w) { const info = VEHICLE_SVG_MAP[vehicleType] || VEHICLE_SVG_MAP['Voiture']; return Math.round(w * info.ratio); } // Status helper using ignition + movement matrix function getDeviceStatus(speed, lastSeenAt, isActive, ignition, movement) { if (isActive === false || isActive === 0) { return { status: 'disabled', label: 'Désactivé', colors: { main: '#6B7280', bg: '#F3F4F6', text: '#4B5563' } }; } let diffMinutes = 999; if (lastSeenAt) { let dateStr = String(lastSeenAt).replace(' ', 'T'); if (!dateStr.endsWith('Z') && !dateStr.includes('+')) dateStr += 'Z'; const lastSeen = new Date(dateStr); diffMinutes = (new Date() - lastSeen) / 1000 / 60; if (diffMinutes < 0) diffMinutes = 0; } if (speed > 3) { return { status: 'moving', label: 'En route', colors: { main: '#22C55E', bg: '#DCFCE7', text: '#166534' } }; } if (diffMinutes < 5) { return { status: 'stopped', label: 'À l\'arrêt', colors: { main: '#F97316', bg: '#FFF7ED', text: '#9A3412' } }; } return { status: 'parked', label: 'Parqué', colors: { main: '#3B82F6', bg: '#EFF6FF', text: '#1E40AF' } }; } function formatParkingDuration(timestamp) { if (!timestamp) return null; let dateStr = String(timestamp).replace(' ', 'T'); if (!dateStr.endsWith('Z') && !dateStr.includes('+')) dateStr += 'Z'; const lastSeen = new Date(dateStr); const diffMinutes = Math.floor((new Date() - lastSeen) / 60000); if (diffMinutes < 2) return null; if (diffMinutes < 60) return `Depuis ${diffMinutes} min.`; const hours = Math.floor(diffMinutes / 60); const mins = diffMinutes % 60; return `Depuis ${hours}h${mins > 0 ? String(mins).padStart(2, '0') : '00'}`; } function formatStopDuration(timestamp) { if (!timestamp) return null; let dateStr = String(timestamp).replace(' ', 'T'); if (!dateStr.endsWith('Z') && !dateStr.includes('+')) dateStr += 'Z'; const lastSeen = new Date(dateStr); const diffSec = Math.floor((new Date() - lastSeen) / 1000); if (diffSec < 0) return null; if (diffSec < 60) return `${diffSec} sec.`; const mins = Math.floor(diffSec / 60); return `${mins} min.`; } function lerp(start, end, t) { return start + (end - start) * t; } function lerpAngle(start, end, t) { let diff = end - start; while (diff > 180) diff -= 360; while (diff < -180) diff += 360; return start + diff * t; } function calcDistance(lat1, lon1, lat2, lon2) { const R = 6371; const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat/2)**2 + Math.cos(lat1*Math.PI/180) * Math.cos(lat2*Math.PI/180) * Math.sin(dLon/2)**2; return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); } // ==================== ICONS ==================== const Icons = { MapPin: ({ className = "w-6 h-6" }) => ( ), History: ({ className = "w-6 h-6" }) => ( ), User: ({ className = "w-6 h-6" }) => ( ), Car: ({ className = "w-6 h-6" }) => ( ), Play: ({ className = "w-6 h-6" }) => ( ), Pause: ({ className = "w-6 h-6" }) => ( ), ChevronRight: ({ className = "w-6 h-6" }) => ( ), ChevronLeft: ({ className = "w-6 h-6" }) => ( ), Settings: ({ className = "w-6 h-6" }) => ( ), LogOut: ({ className = "w-6 h-6" }) => ( ), Phone: ({ className = "w-6 h-6" }) => ( ), Mail: ({ className = "w-6 h-6" }) => ( ), Shield: ({ className = "w-6 h-6" }) => ( ), HelpCircle: ({ className = "w-6 h-6" }) => ( ), Crosshair: ({ className = "w-6 h-6" }) => ( ), Layers: ({ className = "w-6 h-6" }) => ( ), Calendar: ({ className = "w-6 h-6" }) => ( ), Clock: ({ className = "w-6 h-6" }) => ( ), X: ({ className = "w-6 h-6" }) => ( ), Check: ({ className = "w-6 h-6" }) => ( ), Refresh: ({ className = "w-6 h-6" }) => ( ), BarChart: ({ className = "w-6 h-6" }) => ( ), ChevronDown: ({ className = "w-6 h-6" }) => ( ), Share: ({ className = "w-6 h-6" }) => ( ), Palette: ({ className = "w-6 h-6" }) => ( ), CreditCard: ({ className = "w-6 h-6" }) => ( ), Flame: ({ className = "w-6 h-6" }) => ( ), Search: ({ className = "w-6 h-6" }) => ( ), Eye: ({ className = "w-6 h-6" }) => ( ), Tag: ({ className = "w-6 h-6" }) => ( ), Parking: ({ className = "w-6 h-6" }) => ( P ), StopCircle: ({ className = "w-6 h-6" }) => ( ), Route: ({ className = "w-6 h-6" }) => ( ) }; // ==================== HOOKS ==================== const useNotifications = () => { const showNotification = useCallback((message, type = 'info') => { const notification = document.createElement('div'); notification.className = `notification ${type}`; notification.innerHTML = `
${message}
`; document.body.appendChild(notification); setTimeout(() => { notification.classList.add('slide-out'); setTimeout(() => notification.remove(), 300); }, 4000); }, []); return useMemo(() => ({ success: (msg) => showNotification(msg, 'success'), error: (msg) => showNotification(msg, 'error'), info: (msg) => showNotification(msg, 'info') }), [showNotification]); }; // ==================== CONTEXT ==================== const AppContext = createContext(); const useAppContext = () => useContext(AppContext); // ==================== SESSION EXPIRY ==================== let _sessionExpiredFired = false; function handleSessionExpired() { if (_sessionExpiredFired) return; _sessionExpiredFired = true; window.dispatchEvent(new CustomEvent('session-expired')); setTimeout(() => { _sessionExpiredFired = false; }, 3000); } function checkAuth(response) { if (response.status === 401) { handleSessionExpired(); return true; } return false; } // ==================== API SERVICE ==================== const apiService = { async sendLoginCode(email) { try { const response = await fetch(`${CONFIG.API_URL}/auth/request-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) }); return await response.json(); } catch (error) { console.error('Error sending code:', error); return { success: false, error: error.message }; } }, async verifyCode(email, code) { try { const response = await fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, code }) }); return await response.json(); } catch (error) { console.error('Error verifying code:', error); return { success: false, error: error.message }; } }, async getDevices(token) { try { const response = await fetch(`${CONFIG.API_URL}/devices`, { headers: { 'Authorization': `Bearer ${token}` } }); if (checkAuth(response)) return { success: false, devices: [], expired: true }; return await response.json(); } catch (error) { console.error('Error fetching devices:', error); return { success: false, devices: [] }; } }, async getPositions(token, imei, from, to) { try { const response = await fetch( `${CONFIG.API_URL}/positions/imei/${imei}?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}&limit=15000&address=false`, { headers: { 'Authorization': `Bearer ${token}` } } ); if (checkAuth(response)) return { success: false, positions: [], expired: true }; return await response.json(); } catch (error) { console.error('Error fetching positions:', error); return { success: false, positions: [] }; } }, async getPositionsByImei(token, imei, from, to, limit = 5000) { try { const response = await fetch( `${CONFIG.API_URL}/positions/imei/${imei}?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}&limit=${limit}&address=false`, { headers: { 'Authorization': `Bearer ${token}` } } ); if (checkAuth(response)) return { success: false, positions: [], expired: true }; return await response.json(); } catch (error) { console.error('Error fetching positions by imei:', error); return { success: false, positions: [] }; } } }; // ==================== APP PROVIDER ==================== const AppProvider = ({ children }) => { const [user, setUser] = useState(() => { const savedUser = localStorage.getItem('easytrack_client_user'); const savedToken = localStorage.getItem('easytrack_client_token'); if (savedUser && savedToken) { return { ...JSON.parse(savedUser), token: savedToken }; } return null; }); const [currentView, setCurrentView] = useState('live'); const [devices, setDevices] = useState([]); const [selectedDevice, setSelectedDevice] = useState(null); const [loading, setLoading] = useState(false); const [wsConnected, setWsConnected] = useState(false); const [markerStyle, setMarkerStyle] = useState(() => localStorage.getItem('client_marker_style') || 'vehicle'); const [badgeLabel, setBadgeLabel] = useState(() => localStorage.getItem('client_badge_label') || 'plate'); const [mapType, setMapType] = useState(() => localStorage.getItem('client_map_type') || 'google'); const [mapTint, setMapTint] = useState(() => localStorage.getItem('client_map_tint') || 'grayDark'); const notifications = useNotifications(); const [hideHeader, setHideHeader] = useState(false); const [navCounter, setNavCounter] = useState(0); const pendingDeepLink = useRef(null); const pendingFocusDevice = useRef(null); const handleUrlParams = useCallback(() => { const params = new URLSearchParams(window.location.search); const magicToken = params.get('magic'); if (magicToken) { window.history.replaceState({}, '', window.location.pathname); fetch(`${CONFIG.API_URL}/auth/magic-link`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: magicToken }) }) .then(async r => { const data = await r.json().catch(() => ({})); return { ok: r.ok, status: r.status, data }; }) .then(({ ok, status, data }) => { if (ok && data.success && data.token && data.user) { localStorage.setItem('easytrack_client_user', JSON.stringify(data.user)); localStorage.setItem('easytrack_client_token', data.token); setUser({ ...data.user, token: data.token }); notifications.success('Connexion réussie'); } else if (ok && data.requires_2fa) { notifications.info('2FA requise - veuillez vous connecter avec votre code 2FA'); } else { const msg = data?.error || (status === 401 ? 'Lien expiré ou déjà utilisé - veuillez en demander un nouveau' : 'Erreur de connexion par lien magique'); notifications.error(msg); } }) .catch(err => { console.error('Magic link error:', err); notifications.error('Erreur réseau - veuillez réessayer'); }); return true; } const promoParam = params.get('promo'); if (promoParam) { localStorage.setItem('easytrack_pending_promo', promoParam.toUpperCase()); window.history.replaceState({}, '', window.location.pathname); } const deviceParam = params.get('device'); const viewParam = params.get('view'); if (deviceParam || viewParam) { pendingDeepLink.current = { device: deviceParam, view: viewParam }; window.history.replaceState({}, '', window.location.pathname); } return false; }, [notifications]); useEffect(() => { handleUrlParams(); const onPageShow = () => handleUrlParams(); const onVisChange = () => { if (document.visibilityState === 'visible') handleUrlParams(); }; window.addEventListener('pageshow', onPageShow); document.addEventListener('visibilitychange', onVisChange); return () => { window.removeEventListener('pageshow', onPageShow); document.removeEventListener('visibilitychange', onVisChange); }; }, []); const [promoToast, setPromoToast] = useState(null); useEffect(() => { if (!user?.token) return; const pending = localStorage.getItem('easytrack_pending_promo'); if (!pending) return; localStorage.removeItem('easytrack_pending_promo'); fetch(`${CONFIG.API_URL}/affiliates/apply-code`, { method: 'POST', headers: { Authorization: `Bearer ${user.token}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ code: pending }) }) .then(r => r.json()) .then(d => { if (d.success) { setPromoToast({ type: 'success', text: `Votre code ${pending} a bien été activé ! Votre prochaine activation sera gratuite.` }); } else { setPromoToast({ type: 'error', text: d.error || 'Code invalide.' }); } setTimeout(() => setPromoToast(null), 6000); }) .catch(() => {}); }, [user]); const navigate = useCallback((view) => { setCurrentView(view); setHideHeader(false); setNavCounter(c => c + 1); }, []); const login = useCallback((userData, token) => { const userWithToken = { ...userData, token }; setUser(userWithToken); localStorage.setItem('easytrack_client_user', JSON.stringify(userData)); localStorage.setItem('easytrack_client_token', token); notifications.success('Connexion réussie'); }, [notifications]); const logout = useCallback((message) => { const token = user?.token; const playerId = localStorage.getItem('easytrack_push_player_id'); if (token && playerId) { fetch(`${CONFIG.API_URL}/auth/push-token`, { method: 'DELETE', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }, body: JSON.stringify({ player_id: playerId }) }).catch(() => {}); } setUser(null); setDevices([]); setSelectedDevice(null); localStorage.removeItem('easytrack_client_user'); localStorage.removeItem('easytrack_client_token'); localStorage.removeItem('easytrack_push_player_id'); notifications.info(message || 'Déconnexion réussie'); }, [user, notifications]); useEffect(() => { const onExpired = () => logout('Votre session a expiré, veuillez vous reconnecter'); window.addEventListener('session-expired', onExpired); return () => window.removeEventListener('session-expired', onExpired); }, [logout]); const loadDevices = useCallback(async () => { if (!user?.token) return; setLoading(true); try { const result = await apiService.getDevices(user.token); if (result.success && result.devices) { const mapped = result.devices.map(d => ({ ...d, latitude: d.last_latitude || d.latitude, longitude: d.last_longitude || d.longitude, speed: d.last_speed ?? d.speed ?? 0, heading: d.last_heading ?? d.heading ?? 0, plate: d.vehicle_plate || d.plate || d.name, vehicle_type: d.vehicle_type || null, vehicle_model: d.vehicle_model || null, timestamp: d.last_position_at || d.last_seen_at || d.timestamp, is_shared: !!d.is_shared, ignition: d.last_ignition ?? null, movement: d.last_movement ?? null, external_voltage: d.last_external_voltage ?? null, odometer: d.last_odometer ?? null, ignition_off_since: d.last_ignition === 0 && d.last_ignition_on_at ? d.last_ignition_on_at : null })); setDevices(mapped); if (mapped.length > 0 && !selectedDevice) { setSelectedDevice(mapped[0]); } } } catch (error) { console.error('Error loading devices:', error); } setLoading(false); }, [user, selectedDevice]); useEffect(() => { if (user?.token) { loadDevices(); } }, [user]); useEffect(() => { if (!devices.length || !pendingDeepLink.current) return; const { device, view } = pendingDeepLink.current; pendingDeepLink.current = null; if (device) { const target = devices.find(d => d.imei === device || d.plate === device); if (target) { setSelectedDevice(target); pendingFocusDevice.current = target; } } if (view && ['live', 'replay', 'hotspots', 'stats', 'compte'].includes(view)) { setCurrentView(view); setNavCounter(c => c + 1); } }, [devices]); // Keep selectedDevice in sync with devices array (WS/polling updates) useEffect(() => { if (!selectedDevice || !devices.length) return; const updated = devices.find(d => d.imei === selectedDevice.imei); if (updated && (updated.latitude !== selectedDevice.latitude || updated.longitude !== selectedDevice.longitude || updated.speed !== selectedDevice.speed || updated.heading !== selectedDevice.heading || updated.timestamp !== selectedDevice.timestamp)) { setSelectedDevice(updated); } }, [devices]); // Expose global deep link handler for native iOS calls (no reload) useEffect(() => { window.handleDeepLink = (deviceImei, view) => { if (deviceImei && devices.length) { const target = devices.find(d => d.imei === deviceImei || d.plate === deviceImei); if (target) { setSelectedDevice(target); pendingFocusDevice.current = target; } } if (view && ['live', 'replay', 'hotspots', 'stats', 'compte'].includes(view)) { setCurrentView(view); setNavCounter(c => c + 1); } }; return () => { delete window.handleDeepLink; }; }, [devices]); const changeMarkerStyle = useCallback((style) => { setMarkerStyle(style); localStorage.setItem('client_marker_style', style); }, []); const toggleBadgeLabel = useCallback(() => { const next = badgeLabel === 'plate' ? 'name' : 'plate'; setBadgeLabel(next); localStorage.setItem('client_badge_label', next); }, [badgeLabel]); const changeMapType = useCallback((type) => { setMapType(type); localStorage.setItem('client_map_type', type); }, []); const changeMapTint = useCallback((tint) => { setMapTint(tint); localStorage.setItem('client_map_tint', tint); }, []); // Analytics tracking const sessionIdRef = useRef(() => { let sid = sessionStorage.getItem('et_session_id'); if (!sid) { sid = Date.now().toString(36) + Math.random().toString(36).slice(2); sessionStorage.setItem('et_session_id', sid); } return sid; }); const sessionStartRef = useRef(Date.now()); const pagesViewedRef = useRef(0); const getDeviceInfo = useCallback(() => { const ua = navigator.userAgent; let device_type = 'desktop'; if (/Mobi|Android/i.test(ua)) device_type = /Tablet|iPad/i.test(ua) ? 'tablet' : 'mobile'; let browser = 'other'; if (/Chrome/i.test(ua) && !/Edg/i.test(ua)) browser = 'Chrome'; else if (/Safari/i.test(ua) && !/Chrome/i.test(ua)) browser = 'Safari'; else if (/Firefox/i.test(ua)) browser = 'Firefox'; else if (/Edg/i.test(ua)) browser = 'Edge'; let os = 'other'; if (/Windows/i.test(ua)) os = 'Windows'; else if (/Mac/i.test(ua)) os = 'macOS'; else if (/Android/i.test(ua)) os = 'Android'; else if (/iPhone|iPad/i.test(ua)) os = 'iOS'; else if (/Linux/i.test(ua)) os = 'Linux'; return { device_type, browser, os, screen_width: screen.width, screen_height: screen.height }; }, []); const trackEvent = useCallback(async (event_type, event_data) => { if (!user?.token) return; try { const sid = typeof sessionIdRef.current === 'function' ? sessionIdRef.current() : sessionIdRef.current; await fetch(`${CONFIG.API_URL}/analytics/track`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${user.token}` }, body: JSON.stringify({ event_type, event_data, session_id: sid, ...getDeviceInfo() }) }); } catch (e) { /* silent */ } }, [user, getDeviceInfo]); const syncSession = useCallback(async () => { if (!user?.token) return; try { const sid = typeof sessionIdRef.current === 'function' ? sessionIdRef.current() : sessionIdRef.current; await fetch(`${CONFIG.API_URL}/analytics/session`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${user.token}` }, body: JSON.stringify({ session_id: sid, duration_ms: Date.now() - sessionStartRef.current, pages_viewed: pagesViewedRef.current, ...getDeviceInfo() }) }); } catch (e) { /* silent */ } }, [user, getDeviceInfo]); // Register OneSignal push token with backend const registerPushToken = useCallback(() => { if (!user?.token) return; const params = new URLSearchParams(window.location.search); const playerId = params.get('onesignal_push_id') || window.onesignalplayerid; if (!playerId || playerId.length < 10) return; const stored = localStorage.getItem('easytrack_push_player_id'); if (stored === playerId) return; fetch(`${CONFIG.API_URL}/auth/push-token`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${user.token}` }, body: JSON.stringify({ player_id: playerId, platform: 'ios' }) }).then(r => r.json()).then(data => { if (data.success) localStorage.setItem('easytrack_push_player_id', playerId); }).catch(() => {}); }, [user?.token]); useEffect(() => { if (!user?.token) return; registerPushToken(); const retries = [3000, 6000, 10000, 20000]; const timers = retries.map(ms => setTimeout(registerPushToken, ms)); const onVisChange = () => { if (document.visibilityState === 'visible') registerPushToken(); }; document.addEventListener('visibilitychange', onVisChange); return () => { timers.forEach(clearTimeout); document.removeEventListener('visibilitychange', onVisChange); }; }, [user?.token, registerPushToken]); // Track app open useEffect(() => { if (!user?.token) return; trackEvent('app_open'); const interval = setInterval(syncSession, 60000); const handleVisChange = () => { if (document.visibilityState === 'hidden') syncSession(); }; document.addEventListener('visibilitychange', handleVisChange); return () => { clearInterval(interval); document.removeEventListener('visibilitychange', handleVisChange); syncSession(); }; }, [user?.token]); // Track page/view changes useEffect(() => { if (!user?.token) return; pagesViewedRef.current++; trackEvent('page_view', { page: currentView }); }, [currentView, user?.token]); const value = { user, login, logout, currentView, navigate, navCounter, devices, setDevices, loadDevices, selectedDevice, setSelectedDevice, loading, setLoading, wsConnected, setWsConnected, markerStyle, changeMarkerStyle, badgeLabel, toggleBadgeLabel, mapType, changeMapType, mapTint, changeMapTint, hideHeader, setHideHeader, notifications, registerPushToken, pendingFocusDevice }; return {children} {promoToast && (
{promoToast.type === 'success' ? : }

{promoToast.text}

)} ; }; // ==================== AUTH MODAL ==================== const AuthModal = ({ onClose }) => { const { login, notifications } = useAppContext(); const [email, setEmail] = useState(''); const [code, setCode] = useState(['', '', '', '', '', '']); const [isCodeSent, setIsCodeSent] = useState(false); const [loading, setLoading] = useState(false); const [countdown, setCountdown] = useState(0); const inputRefs = useRef([]); useEffect(() => { if (countdown > 0) { const timer = setTimeout(() => setCountdown(countdown - 1), 1000); return () => clearTimeout(timer); } }, [countdown]); const handleSendCode = async () => { if (!email || !email.includes('@')) { notifications.error('Veuillez entrer un email valide'); return; } setLoading(true); const result = await apiService.sendLoginCode(email); setLoading(false); if (result.success) { setIsCodeSent(true); setCountdown(60); notifications.success('Code envoyé par email'); } else { notifications.error(result.error || 'Erreur lors de l\'envoi du code'); } }; const handleCodeChange = (index, value) => { if (!/^\d*$/.test(value)) return; const newCode = [...code]; newCode[index] = value.slice(-1); setCode(newCode); if (value && index < 5) { inputRefs.current[index + 1]?.focus(); } if (newCode.every(d => d) && newCode.join('').length === 6) { handleVerifyCode(newCode.join('')); } }; const handleKeyDown = (index, e) => { if (e.key === 'Backspace' && !code[index] && index > 0) { inputRefs.current[index - 1]?.focus(); } }; const handlePaste = (e) => { e.preventDefault(); const pastedData = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6); if (pastedData.length === 6) { const newCode = pastedData.split(''); setCode(newCode); handleVerifyCode(pastedData); } }; const handleVerifyCode = async (codeStr) => { setLoading(true); const result = await apiService.verifyCode(email, codeStr); setLoading(false); if (result.success && result.token) { login(result.user || { email }, result.token); onClose(); } else { notifications.error(result.error || 'Code invalide'); setCode(['', '', '', '', '', '']); inputRefs.current[0]?.focus(); } }; return (
EasyTrack

{isCodeSent ? 'Entrez le code reçu par email' : 'Connectez-vous pour suivre vos véhicules'}

{!isCodeSent ? (
setEmail(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && email) handleSendCode(); }} placeholder="votre@email.ch" autoFocus className="auth-input" style={{ width: '100%', padding: '0.875rem 1rem', background: 'rgba(255,255,255,0.15)', border: '2px solid rgba(255,255,255,0.3)', borderRadius: '0.75rem', fontSize: '1rem', color: 'white', outline: 'none', backdropFilter: 'blur(4px)', boxSizing: 'border-box' }} />
) : (
{code.map((digit, index) => ( inputRefs.current[index] = el} type="text" inputMode="numeric" maxLength={1} value={digit} onChange={(e) => handleCodeChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} autoFocus={index === 0} style={{ width: '2.75rem', height: '3.25rem', textAlign: 'center', background: 'rgba(255,255,255,0.15)', border: '2px solid rgba(255,255,255,0.4)', borderRadius: '0.625rem', fontSize: '1.5rem', fontWeight: 700, color: 'white', outline: 'none', caretColor: 'white', transition: 'all 0.15s' }} onFocus={(e) => { e.target.style.borderColor = 'white'; e.target.style.background = 'rgba(255,255,255,0.25)'; }} onBlur={(e) => { e.target.style.borderColor = 'rgba(255,255,255,0.4)'; e.target.style.background = 'rgba(255,255,255,0.15)'; }} /> ))}
{countdown > 0 ? ( Renvoyer le code dans {countdown}s ) : ( )}
)}
); }; // ==================== LIVE VIEW ==================== const LiveView = () => { const { user, devices, setDevices, selectedDevice, setSelectedDevice, loadDevices, wsConnected, setWsConnected, markerStyle, badgeLabel, toggleBadgeLabel, mapType, changeMapType: ctxChangeType, mapTint, changeMapTint: ctxChangeTint, pendingFocusDevice } = useAppContext(); const [showAuthModal, setShowAuthModal] = useState(false); const [showMapTypeMenu, setShowMapTypeMenu] = useState(false); const [showTintMenu, setShowTintMenu] = useState(false); const [showTrail, setShowTrail] = useState(() => localStorage.getItem('client_show_trail') === 'true'); const [showMyPosition, setShowMyPosition] = useState(() => localStorage.getItem('client_show_my_position') !== 'false'); const [showLiveOverlay, setShowLiveOverlay] = useState(false); const [showAllDevices, setShowAllDevices] = useState(false); const showAllDevicesRef = useRef(false); const [deviceAddresses, setDeviceAddresses] = useState({}); const addressCacheRef = useRef({}); const liveToolbarRef = useRef(null); const mapRef = useRef(null); const mapInstance = useRef(null); const tileLayerRef = useRef(null); const markersRef = useRef({}); const badgesRef = useRef({}); const markerLastPosRef = useRef({}); const markerAnimsRef = useRef({}); const wsRef = useRef(null); const selectedDeviceRef = useRef(selectedDevice); const markerStyleRef = useRef(markerStyle); const badgeLabelRef = useRef(badgeLabel); const trailsRef = useRef({}); const trailPolylinesRef = useRef({}); const showTrailRef = useRef(showTrail); const autoFitDoneRef = useRef(false); const myPosMarkerRef = useRef(null); const myPosRef = useRef(null); const geoWatchRef = useRef(null); useEffect(() => { selectedDeviceRef.current = selectedDevice; }, [selectedDevice]); useEffect(() => { markerStyleRef.current = markerStyle; }, [markerStyle]); useEffect(() => { badgeLabelRef.current = badgeLabel; }, [badgeLabel]); useEffect(() => { showTrailRef.current = showTrail; }, [showTrail]); useEffect(() => { if (!showMapTypeMenu && !showTintMenu && !showLiveOverlay) return; const handler = (e) => { if (liveToolbarRef.current && !liveToolbarRef.current.contains(e.target)) { setShowMapTypeMenu(false); setShowTintMenu(false); setShowLiveOverlay(false); } }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, [showMapTypeMenu, showTintMenu, showLiveOverlay]); useEffect(() => { if (!showMyPosition || !navigator.geolocation) { if (myPosMarkerRef.current && mapInstance.current) { mapInstance.current.removeLayer(myPosMarkerRef.current); myPosMarkerRef.current = null; } if (geoWatchRef.current !== null) { navigator.geolocation.clearWatch(geoWatchRef.current); geoWatchRef.current = null; } return; } const updateMyPos = (pos) => { const lat = pos.coords.latitude, lng = pos.coords.longitude; myPosRef.current = { latitude: lat, longitude: lng }; if (!mapInstance.current) return; const icon = L.divIcon({ html: `
Moi
`, className: '', iconSize: null, iconAnchor: [8, 8] }); if (myPosMarkerRef.current) { myPosMarkerRef.current.setLatLng([lat, lng]); } else { myPosMarkerRef.current = L.marker([lat, lng], { icon, zIndexOffset: -200, interactive: false }).addTo(mapInstance.current); } }; geoWatchRef.current = navigator.geolocation.watchPosition(updateMyPos, () => {}, { enableHighAccuracy: true, maximumAge: 10000 }); return () => { if (geoWatchRef.current !== null) { navigator.geolocation.clearWatch(geoWatchRef.current); geoWatchRef.current = null; } }; }, [showMyPosition]); const toggleMyPosition = () => { const v = !showMyPosition; setShowMyPosition(v); localStorage.setItem('client_show_my_position', v.toString()); }; const fitVehicleAndMe = () => { if (!mapInstance.current) return; mapInstance.current.invalidateSize(); const bounds = []; if (selectedDevice?.latitude && selectedDevice?.longitude) bounds.push([selectedDevice.latitude, selectedDevice.longitude]); if (myPosRef.current) bounds.push([myPosRef.current.latitude, myPosRef.current.longitude]); if (bounds.length === 2) { mapInstance.current.fitBounds(L.latLngBounds(bounds), { padding: [60, 60], maxZoom: 15 }); } else if (bounds.length === 1) { mapInstance.current.setView(bounds[0], 15, { animate: true }); } }; useEffect(() => { setShowAuthModal(!user); }, [user]); const applyMapTint = useCallback((tint) => { if (!mapInstance.current) return; const tilePane = mapInstance.current.getContainer().querySelector('.leaflet-tile-pane'); if (tilePane) tilePane.style.filter = CONFIG.MAP_TINTS[tint]?.filter || 'none'; }, []); const changeMapType = useCallback((type) => { if (!mapInstance.current) return; ctxChangeType(type); if (tileLayerRef.current) mapInstance.current.removeLayer(tileLayerRef.current); const layer = CONFIG.TILE_LAYERS[type] || CONFIG.TILE_LAYERS.google; tileLayerRef.current = L.tileLayer(layer.url, { attribution: layer.attribution }).addTo(mapInstance.current); applyMapTint(mapTint); setShowMapTypeMenu(false); }, [mapTint, applyMapTint, ctxChangeType]); const changeMapTint = useCallback((tint) => { ctxChangeTint(tint); applyMapTint(tint); setShowTintMenu(false); }, [applyMapTint, ctxChangeTint]); // Initialize map + auto-fit (re-runs when user logs in and map div appears) useEffect(() => { if (!mapRef.current || mapInstance.current) return; const savedType = localStorage.getItem('client_map_type') || 'google'; const savedTint = localStorage.getItem('client_map_tint') || 'standard'; const initialLayer = CONFIG.TILE_LAYERS[savedType] || CONFIG.TILE_LAYERS.google; const map = L.map(mapRef.current, { zoomControl: false }).setView(CONFIG.MAP_CENTER, CONFIG.MAP_ZOOM); tileLayerRef.current = L.tileLayer(initialLayer.url, { attribution: initialLayer.attribution }).addTo(map); mapInstance.current = map; const tilePane = map.getContainer().querySelector('.leaflet-tile-pane'); if (tilePane) tilePane.style.filter = CONFIG.MAP_TINTS[savedTint]?.filter || 'none'; // Fix: le container peut grandir/changer de taille après création (header skeleton -> header réel, // changement d'orientation, clavier mobile, etc.). Sans invalidateSize Leaflet garde la taille // initiale et le setView centre par rapport à l'ancienne taille -> véhicule décalé. const ro = new ResizeObserver(() => { if (!mapInstance.current) return; mapInstance.current.invalidateSize(); // Si on n'a pas encore fait l'auto-center initial, ou si c'est la 1re fois que la map // atteint une taille non nulle, on re-centre sur le véhicule sélectionné. const sel = selectedDeviceRef.current; if (sel?.latitude && sel?.longitude && !autoFitDoneRef.current && !showAllDevicesRef.current) { mapInstance.current.setView([sel.latitude, sel.longitude], 15); autoFitDoneRef.current = true; } }); ro.observe(mapRef.current); // Premier coup de invalidateSize après le 1er paint (au cas où ResizeObserver ne tirerait pas tout de suite) requestAnimationFrame(() => { if (mapInstance.current) mapInstance.current.invalidateSize(); }); return () => { ro.disconnect(); map.remove(); mapInstance.current = null; }; }, [user]); // Build marker icon HTML (mirrors admin logic) const buildMarkerIcon = useCallback((heading, color, isSelected, speed, vehicleType) => { const rotation = heading || 0; const style = markerStyleRef.current; const borderColor = isSelected ? '#3B82F6' : 'white'; if (style === 'vehicle') { const vw = isSelected ? 22 : 18; const vh = getVehicleSize(vehicleType, vw); const iconW = vw + 4; const iconH = vh + 4; const html = `
${getVehicleImg(vehicleType, vw)}
`; return L.divIcon({ html, className: 'custom-marker', iconSize: [iconW, iconH], iconAnchor: [iconW/2, iconH/2] }); } else { const iconW = isSelected ? 44 : 36; const html = `
`; return L.divIcon({ html, className: 'custom-marker', iconSize: [iconW, iconW], iconAnchor: [iconW/2, iconW/2] }); } }, []); // Build badge HTML (plate or name + speed/parking time) const buildBadgeIcon = useCallback((device, status) => { let badgeHtml = ''; const label = badgeLabelRef.current === 'name' ? (device.vehicle_model || device.name || device.plate || device.imei.slice(-6)) : (device.plate || device.name || device.imei.slice(-6)); badgeHtml += `
${label}
`; const spd = device.speed !== undefined ? device.speed : 0; if (spd > 3) { badgeHtml += `
${Math.round(spd)} km/h
`; } else { let diffMin = 999; const ts = device.timestamp || device.last_seen_at; if (ts) { let d = String(ts).replace(' ', 'T'); if (!d.endsWith('Z') && !d.includes('+')) d += 'Z'; diffMin = (new Date() - new Date(d)) / 1000 / 60; if (diffMin < 0) diffMin = 0; } if (diffMin >= 5) { const parkDur = formatParkingDuration(ts); badgeHtml += `
P${parkDur || ''}
`; } else { const stopDur = formatStopDuration(ts); badgeHtml += `
${stopDur || '0 sec.'}
`; } } return L.divIcon({ html: `
${badgeHtml}
`, className: 'plate-badge-container', iconSize: [100, 40], iconAnchor: [-22, 20] }); }, []); const easeInOut = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; const positionQueueRef = useRef({}); const lastWsTimeRef = useRef({}); const updateTrail = useCallback((imei, lat, lng, color, replaceLastPoint = false) => { if (!mapInstance.current) return; if (!trailsRef.current[imei]) trailsRef.current[imei] = []; const trail = trailsRef.current[imei]; if (replaceLastPoint && trail.length > 0) { trail[trail.length - 1] = [lat, lng]; } else { const last = trail.length > 0 ? trail[trail.length - 1] : null; if (!last || last[0] !== lat || last[1] !== lng) { trail.push([lat, lng]); if (trail.length > 10) trail.shift(); } } if (trail.length >= 2) { if (trailPolylinesRef.current[imei]) { trailPolylinesRef.current[imei].setLatLngs(trail); trailPolylinesRef.current[imei].setStyle({ color }); } else { trailPolylinesRef.current[imei] = L.polyline(trail, { color, weight: 3, opacity: 0.6, dashArray: '5, 10' }).addTo(mapInstance.current); } } }, []); const animateMarkerTo = useCallback((markerId, marker, targetLat, targetLng, targetHeading, color, isSelected, imei, speed, vehicleType) => { if (markerAnimsRef.current[markerId]) { cancelAnimationFrame(markerAnimsRef.current[markerId]); markerAnimsRef.current[markerId] = null; } const cur = marker.getLatLng(); const startLat = cur.lat, startLng = cur.lng; const lastPos = markerLastPosRef.current[markerId] || { heading: 0 }; const startHeading = lastPos.heading || 0; const distance = calcDistance(startLat, startLng, targetLat, targetLng) * 1000; // Very small movement: snap immediately (no animation needed) if (distance < 3) { marker.setLatLng([targetLat, targetLng]); marker.setIcon(buildMarkerIcon(targetHeading, color, isSelected, speed, vehicleType)); markerLastPosRef.current[markerId] = { lat: targetLat, lng: targetLng, heading: targetHeading }; if (badgesRef.current[imei]) badgesRef.current[imei].setLatLng([targetLat, targetLng]); if (showTrailRef.current) updateTrail(imei, targetLat, targetLng, color); return; } // Large jump (> 500m): snap instantly to avoid long weird animations if (distance > 500) { marker.setLatLng([targetLat, targetLng]); marker.setIcon(buildMarkerIcon(targetHeading, color, isSelected, speed, vehicleType)); markerLastPosRef.current[markerId] = { lat: targetLat, lng: targetLng, heading: targetHeading }; if (badgesRef.current[imei]) badgesRef.current[imei].setLatLng([targetLat, targetLng]); if (showTrailRef.current) updateTrail(imei, targetLat, targetLng, color); return; } // Calculate animation duration based on actual WS interval const now = performance.now(); const lastTime = lastWsTimeRef.current[markerId] || now - 3000; const interval = Math.max(now - lastTime, 1000); lastWsTimeRef.current[markerId] = now; // Duration = ~90% of the interval between updates, clamped 1-6s const duration = Math.min(Math.max(interval * 0.9, 1000), 6000); // Add a trail point that will follow the animation let trailAdded = false; if (showTrailRef.current) { updateTrail(imei, startLat, startLng, color); trailAdded = true; } const startTime = now; const updateIcon = speed > 5; if (!updateIcon) { marker.setIcon(buildMarkerIcon(targetHeading, color, isSelected, speed, vehicleType)); } function animate(currentTime) { const elapsed = currentTime - startTime; const rawProgress = Math.min(elapsed / duration, 1); const progress = easeInOut(rawProgress); const lat = lerp(startLat, targetLat, progress); const lng = lerp(startLng, targetLng, progress); const heading = updateIcon ? lerpAngle(startHeading, targetHeading, progress) : targetHeading; marker.setLatLng([lat, lng]); if (updateIcon) marker.setIcon(buildMarkerIcon(heading, color, isSelected, speed, vehicleType)); if (badgesRef.current[imei]) badgesRef.current[imei].setLatLng([lat, lng]); markerLastPosRef.current[markerId] = { lat, lng, heading }; if (isSelected && mapInstance.current && !showAllDevicesRef.current) mapInstance.current.panTo([lat, lng], { animate: true, duration: 0.3 }); if (trailAdded && showTrailRef.current) updateTrail(imei, lat, lng, color, true); if (rawProgress >= 1) { markerAnimsRef.current[markerId] = null; return; } markerAnimsRef.current[markerId] = requestAnimationFrame(animate); } markerAnimsRef.current[markerId] = requestAnimationFrame(animate); }, [buildMarkerIcon, updateTrail]); const clearTrails = useCallback(() => { Object.keys(trailPolylinesRef.current).forEach(imei => { if (trailPolylinesRef.current[imei]) trailPolylinesRef.current[imei].remove(); }); trailPolylinesRef.current = {}; trailsRef.current = {}; }, []); const toggleShowTrail = useCallback(() => { const v = !showTrailRef.current; setShowTrail(v); localStorage.setItem('client_show_trail', v.toString()); if (!v) clearTrails(); }, [clearTrails]); // Update markers: show all devices or only selected const updateMarkers = useCallback((deviceList) => { if (!mapInstance.current) return; const curSelected = selectedDeviceRef.current; const selectedImei = curSelected?.imei; const allMode = showAllDevicesRef.current; const visibleImeis = new Set(); if (allMode) { deviceList.forEach(d => { if (d.latitude && d.longitude) visibleImeis.add(d.imei); }); } else if (selectedImei) { visibleImeis.add(selectedImei); } // Remove markers/badges for devices no longer visible Object.keys(markersRef.current).forEach(markerId => { const imei = markerId.replace('imei-', ''); if (!visibleImeis.has(imei)) { markersRef.current[markerId].remove(); delete markersRef.current[markerId]; delete markerLastPosRef.current[markerId]; if (markerAnimsRef.current[markerId]) { cancelAnimationFrame(markerAnimsRef.current[markerId]); delete markerAnimsRef.current[markerId]; } } }); Object.keys(badgesRef.current).forEach(imei => { if (!visibleImeis.has(imei)) { badgesRef.current[imei].remove(); delete badgesRef.current[imei]; } }); if (visibleImeis.size === 0) return; // Add/update markers for all visible devices deviceList.forEach(device => { if (!visibleImeis.has(device.imei) || !device.latitude || !device.longitude) return; const markerId = 'imei-' + device.imei; const posStatus = getDeviceStatus(device.speed || 0, device.timestamp || device.last_seen_at, device.is_active, device.ignition, device.movement); const color = posStatus.colors.main; const heading = device.heading || 0; const badgeIcon = buildBadgeIcon(device, posStatus); if (badgesRef.current[device.imei]) { badgesRef.current[device.imei].setLatLng([device.latitude, device.longitude]); badgesRef.current[device.imei].setIcon(badgeIcon); } else { badgesRef.current[device.imei] = L.marker([device.latitude, device.longitude], { icon: badgeIcon, interactive: false }).addTo(mapInstance.current); } if (markersRef.current[markerId]) { markersRef.current[markerId].deviceData = device; animateMarkerTo(markerId, markersRef.current[markerId], device.latitude, device.longitude, heading, color, device.imei === selectedImei || allMode, device.imei, device.speed, device.vehicle_type); } else { const icon = buildMarkerIcon(heading, color, device.imei === selectedImei || allMode, device.speed, device.vehicle_type); const marker = L.marker([device.latitude, device.longitude], { icon }).addTo(mapInstance.current); marker.deviceData = device; marker.on('click', () => { setSelectedDevice(device); setShowAllDevices(false); showAllDevicesRef.current = false; }); markerLastPosRef.current[markerId] = { lat: device.latitude, lng: device.longitude, heading }; markersRef.current[markerId] = marker; } }); }, [buildMarkerIcon, buildBadgeIcon, animateMarkerTo]); // Update marker when devices or selected device change useEffect(() => { updateMarkers(devices); }, [devices, selectedDevice, markerStyle, badgeLabel, showAllDevices]); // Center map and clear trails when switching vehicle; reset all-devices mode const prevSelectedRef = useRef(selectedDevice?.imei); useEffect(() => { if (!selectedDevice?.imei || selectedDevice.imei === prevSelectedRef.current) { prevSelectedRef.current = selectedDevice?.imei; return; } prevSelectedRef.current = selectedDevice.imei; if (showAllDevicesRef.current) { showAllDevicesRef.current = false; setShowAllDevices(false); } clearTrails(); if (mapInstance.current && selectedDevice.latitude && selectedDevice.longitude) { mapInstance.current.invalidateSize(); mapInstance.current.setView([selectedDevice.latitude, selectedDevice.longitude], 15, { animate: true }); } }, [selectedDevice, clearTrails]); // Deep link focus: center map on device after deep link navigation useEffect(() => { if (!pendingFocusDevice?.current || !mapInstance.current) return; const dev = pendingFocusDevice.current; pendingFocusDevice.current = null; if (dev.latitude && dev.longitude) { showAllDevicesRef.current = false; setShowAllDevices(false); setTimeout(() => { if (mapInstance.current) mapInstance.current.setView([dev.latitude, dev.longitude], 15, { animate: true }); }, 500); } }, [selectedDevice, devices]); // Geocode device positions for address display useEffect(() => { if (!devices.length) return; devices.forEach(device => { if (!device.latitude || !device.longitude) return; const key = `${device.latitude.toFixed(4)},${device.longitude.toFixed(4)}`; if (addressCacheRef.current[key]) { setDeviceAddresses(prev => prev[device.imei] === addressCacheRef.current[key] ? prev : { ...prev, [device.imei]: addressCacheRef.current[key] }); return; } fetch(`${CONFIG.API_URL}/geocode?latitude=${device.latitude}&longitude=${device.longitude}`, { headers: { Authorization: `Bearer ${user.token}` } }).then(r => { if (checkAuth(r)) return null; return r.json(); }) .then(data => { if (!data) return; const addr = data.address || ''; addressCacheRef.current[key] = addr; setDeviceAddresses(prev => ({ ...prev, [device.imei]: addr })); }) .catch(() => {}); }); }, [devices]); // Auto-center on selected device useEffect(() => { if (!mapInstance.current || !selectedDevice?.latitude || !selectedDevice?.longitude) return; if (!autoFitDoneRef.current) { mapInstance.current.invalidateSize(); mapInstance.current.setView([selectedDevice.latitude, selectedDevice.longitude], 15); autoFitDoneRef.current = true; } }, [selectedDevice]); // Backfill: load last 30s positions for selected device so marker moves immediately const backfillImeiRef = useRef(null); useEffect(() => { if (!user?.token || !selectedDevice?.imei || !mapInstance.current) return; if (backfillImeiRef.current === selectedDevice.imei) return; backfillImeiRef.current = selectedDevice.imei; const imei = selectedDevice.imei; const backfill = async () => { const now = new Date(); const ago = new Date(now.getTime() - 30000); const fromStr = ago.toISOString().slice(0, 19).replace('T', ' '); const toStr = now.toISOString().slice(0, 19).replace('T', ' '); try { const resp = await fetch(`${CONFIG.API_URL}/positions/imei/${imei}?from=${encodeURIComponent(fromStr)}&to=${encodeURIComponent(toStr)}&limit=20&address=false`, { headers: { Authorization: `Bearer ${user.token}` } }); if (checkAuth(resp)) return; if (resp.ok) { const data = await resp.json(); const pts = (data.positions || []).reverse(); if (pts.length > 1) { const last = pts[pts.length - 1]; setDevices(prev => prev.map(d => { if (d.imei !== imei) return d; return { ...d, latitude: last.latitude, longitude: last.longitude, speed: last.speed ?? d.speed, heading: last.heading ?? d.heading, timestamp: last.timestamp || d.timestamp }; })); } } } catch (e) {} }; setTimeout(backfill, 300); }, [user, selectedDevice?.imei]); // WebSocket connection useEffect(() => { if (!user?.token || !devices.length) return; const connectWs = () => { try { const ws = new WebSocket(CONFIG.WS_URL); wsRef.current = ws; ws.onopen = () => { setWsConnected(true); ws.send(JSON.stringify({ action: 'subscribe', imeis: devices.map(d => d.imei) })); }; ws.onmessage = (event) => { try { const msg = JSON.parse(event.data); const pos = (msg.type === 'position' && msg.data) ? msg.data : null; if (pos && pos.imei) { const lat = pos.lat || pos.latitude; const lng = pos.lng || pos.longitude; if (!lat || !lng) return; const speed = pos.speed ?? 0; setDevices(prev => prev.map(d => { if (d.imei !== pos.imei) return d; if (d.latitude && d.longitude) { const dist = calcDistance(d.latitude, d.longitude, lat, lng) * 1000; // GPS glitch: ignore teleports > 2km in a single update if (dist > 2000) { return { ...d, speed, timestamp: pos.ts || pos.timestamp || d.timestamp, last_seen_at: pos.ts || d.last_seen_at }; } // GPS noise: ignore tiny movements when nearly stopped if (speed <= 3 && dist < 8) { return { ...d, speed, timestamp: pos.ts || pos.timestamp || d.timestamp, last_seen_at: pos.ts || d.last_seen_at }; } } return { ...d, latitude: lat, longitude: lng, speed, heading: pos.heading ?? d.heading, ignition: pos.ignition ?? d.ignition, movement: pos.movement ?? d.movement, external_voltage: pos.external_voltage ?? d.external_voltage, odometer: pos.odometer ?? d.odometer, timestamp: pos.ts || pos.timestamp || pos.server_timestamp || new Date().toISOString(), last_seen_at: pos.ts || pos.server_timestamp || new Date().toISOString() }; })); } } catch (e) {} }; ws.onclose = () => { setWsConnected(false); setTimeout(connectWs, 5000); }; ws.onerror = () => setWsConnected(false); } catch (e) { console.error('WebSocket error:', e); } }; connectWs(); return () => { if (wsRef.current) wsRef.current.close(); }; }, [user, devices.length]); // Polling fallback every 10 seconds useEffect(() => { if (!user?.token) return; const interval = setInterval(loadDevices, 10000); return () => clearInterval(interval); }, [user, loadDevices]); const fitAllDevices = () => { if (!mapInstance.current) return; mapInstance.current.invalidateSize(); if (showAllDevicesRef.current) { const validDevices = devices.filter(d => d.latitude && d.longitude); if (validDevices.length === 0) return; if (validDevices.length === 1) { mapInstance.current.setView([validDevices[0].latitude, validDevices[0].longitude], 15, { animate: true }); } else { const bounds = L.latLngBounds(validDevices.map(d => [d.latitude, d.longitude])); mapInstance.current.fitBounds(bounds, { padding: [50, 50], animate: true }); } } else if (selectedDevice?.latitude && selectedDevice?.longitude) { mapInstance.current.setView([selectedDevice.latitude, selectedDevice.longitude], 15, { animate: true }); } }; const toggleAllDevicesOnMap = () => { const next = !showAllDevicesRef.current; showAllDevicesRef.current = next; setShowAllDevices(next); if (next && mapInstance.current) { const validDevices = devices.filter(d => d.latitude && d.longitude); if (validDevices.length === 0) return; if (validDevices.length === 1) { mapInstance.current.setView([validDevices[0].latitude, validDevices[0].longitude], 15, { animate: true }); } else { const bounds = L.latLngBounds(validDevices.map(d => [d.latitude, d.longitude])); mapInstance.current.fitBounds(bounds, { padding: [50, 50], animate: true }); } } else if (!next && mapInstance.current && selectedDevice?.latitude && selectedDevice?.longitude) { mapInstance.current.setView([selectedDevice.latitude, selectedDevice.longitude], 15, { animate: true }); } }; const focusDevice = (device) => { setSelectedDevice(device); showAllDevicesRef.current = false; setShowAllDevices(false); if (mapInstance.current && device.latitude && device.longitude) mapInstance.current.setView([device.latitude, device.longitude], 15); }; if (!user) { return ( {}} /> ); } return (
{/* Toolbar */}
{showMapTypeMenu && (
Type de carte
{Object.entries(CONFIG.TILE_LAYERS).map(([key, layer]) => ( ))}
)}
{showTintMenu && (
Teinte
{Object.entries(CONFIG.MAP_TINTS).map(([key, tint]) => ( ))}
)}
{showLiveOverlay && (
Affichage
Étiquette
)}
{showAuthModal && setShowAuthModal(false)} />}
); }; // ==================== MAP TOOLBAR (reusable) ==================== const MapToolbar = ({ mapInstance, tileLayerRef, extra }) => { const { mapType, changeMapType: ctxChangeType, mapTint, changeMapTint: ctxChangeTint } = useAppContext(); const [showType, setShowType] = useState(false); const [showTint, setShowTint] = useState(false); const toolbarRef = useRef(null); useEffect(() => { if (!showType && !showTint) return; const handler = (e) => { if (toolbarRef.current && !toolbarRef.current.contains(e.target)) { setShowType(false); setShowTint(false); } }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, [showType, showTint]); const applyTint = (tint) => { if (!mapInstance?.current) return; const tp = mapInstance.current.getContainer().querySelector('.leaflet-tile-pane'); if (tp) tp.style.filter = CONFIG.MAP_TINTS[tint]?.filter || 'none'; }; const doChangeType = (type) => { if (!mapInstance?.current) return; ctxChangeType(type); if (tileLayerRef?.current) mapInstance.current.removeLayer(tileLayerRef.current); const l = CONFIG.TILE_LAYERS[type] || CONFIG.TILE_LAYERS.google; tileLayerRef.current = L.tileLayer(l.url, { attribution: l.attribution }).addTo(mapInstance.current); applyTint(mapTint); setShowType(false); }; const doChangeTint = (tint) => { ctxChangeTint(tint); applyTint(tint); setShowTint(false); }; return (
{extra}
{showType && (
Type de carte
{Object.entries(CONFIG.TILE_LAYERS).map(([k, l]) => ( ))}
)}
{showTint && (
Teinte
{Object.entries(CONFIG.MAP_TINTS).map(([k, t]) => ( ))}
)}
); }; // ==================== VEHICLE SELECTOR ==================== const VehicleSelector = ({ devices, selectedDevice, onSelect, label }) => { const [open, setOpen] = useState(false); const selectorRef = useRef(null); const selDev = selectedDevice; useEffect(() => { if (!open) return; const handler = (e) => { if (selectorRef.current && !selectorRef.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, [open]); return (
{open && (
Mes véhicules
{devices.map(d => ( ))}
)}
); }; // ==================== INIT MAP HELPER ==================== function initMapWithPrefs(container, { forceType, forceTint } = {}) { const mapType = forceType || localStorage.getItem('client_map_type') || 'google'; const mapTint = forceTint || localStorage.getItem('client_map_tint') || 'standard'; const initialLayer = CONFIG.TILE_LAYERS[mapType] || CONFIG.TILE_LAYERS.google; const map = L.map(container, { zoomControl: false }).setView(CONFIG.MAP_CENTER, CONFIG.MAP_ZOOM); const tileLayer = L.tileLayer(initialLayer.url, { attribution: initialLayer.attribution }).addTo(map); const tilePane = map.getContainer().querySelector('.leaflet-tile-pane'); if (tilePane) tilePane.style.filter = CONFIG.MAP_TINTS[mapTint]?.filter || 'none'; return { map, tileLayer }; } // ==================== REPLAY VIEW ==================== const ReplayView = () => { const { user, devices, selectedDevice, setSelectedDevice, markerStyle, badgeLabel, toggleBadgeLabel, currentView, navCounter, setHideHeader } = useAppContext(); const [showAuthModal, setShowAuthModal] = useState(false); const [periodPreset, setPeriodPreset] = useState('today'); const [showDateRange, setShowDateRange] = useState(false); const [dateStart, setDateStart] = useState(''); const [dateEnd, setDateEnd] = useState(''); const [timeStart, setTimeStart] = useState('00:00'); const [timeEnd, setTimeEnd] = useState('23:59'); const [positions, setPositions] = useState([]); const [isPlaying, setIsPlaying] = useState(false); const [playbackSpeed, setPlaybackSpeed] = useState(0.5); const [currentIndex, setCurrentIndex] = useState(0); const [loading, setLoading] = useState(false); const [isFollowing, setIsFollowing] = useState(false); const [showOverlayMenu, setShowOverlayMenu] = useState(false); const replayOverlayRef = useRef(null); useEffect(() => { if (!showOverlayMenu) return; const handler = (e) => { if (replayOverlayRef.current && !replayOverlayRef.current.contains(e.target)) setShowOverlayMenu(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, [showOverlayMenu]); const [showParkings, setShowParkings] = useState(() => localStorage.getItem('client_replay_parkings') !== 'false'); const [showStops, setShowStops] = useState(() => localStorage.getItem('client_replay_stops') !== 'false'); const [showDashedTrail, setShowDashedTrail] = useState(() => localStorage.getItem('client_replay_dashed') === 'true'); const [tripEvents, setTripEvents] = useState([]); const [currentAddress, setCurrentAddress] = useState(''); const [replayTab, setReplayTab] = useState('trajets'); const [mapReturnTab, setMapReturnTab] = useState(null); const [activeParkingInfo, setActiveParkingInfo] = useState(null); const [mapViewAddress, setMapViewAddress] = useState(''); useEffect(() => { if (currentView === 'replay') setReplayTab('trajets'); }, [navCounter]); const geocodeTimerRef = useRef(null); const geocodeCacheRef = useRef({}); const mapRef = useRef(null); const mapInstance = useRef(null); const tileLayerRef = useRef(null); const markerRef = useRef(null); const polylineRef = useRef(null); const polylineSegmentsRef = useRef([]); const playIntervalRef = useRef(null); const parkingMarkersRef = useRef([]); const stopMarkersRef = useRef([]); const startEndMarkersRef = useRef([]); const replayBadgeRef = useRef(null); const formatDateLocal = (date) => { const y = date.getFullYear(); const m = (date.getMonth() + 1).toString().padStart(2, '0'); const d = date.getDate().toString().padStart(2, '0'); return `${y}-${m}-${d}`; }; const formatTimeLocal = (date) => date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0'); const applyPeriodPreset = useCallback((preset) => { setPeriodPreset(preset); if (preset !== 'custom') setShowDateRange(false); const now = new Date(); const today = formatDateLocal(now); switch (preset) { case 'today': setDateStart(today); setDateEnd(today); setTimeStart('00:00'); setTimeEnd('23:59'); break; case 'yesterday': { const yest = formatDateLocal(new Date(now.getTime() - 86400000)); setDateStart(yest); setDateEnd(yest); setTimeStart('00:00'); setTimeEnd('23:59'); break; } case 'daybeforeyesterday': { const dbf = formatDateLocal(new Date(now.getTime() - 2 * 86400000)); setDateStart(dbf); setDateEnd(dbf); setTimeStart('00:00'); setTimeEnd('23:59'); break; } case 'custom': setShowDateRange(true); break; } }, []); useEffect(() => { setShowAuthModal(!user); }, [user]); useEffect(() => { applyPeriodPreset('today'); }, []); useEffect(() => { if (!mapRef.current || mapInstance.current) return; const { map, tileLayer } = initMapWithPrefs(mapRef.current, { forceType: 'google', forceTint: 'grayDark' }); mapInstance.current = map; tileLayerRef.current = tileLayer; map.on('dragstart', () => setIsFollowing(false)); return () => { map.remove(); mapInstance.current = null; }; }, []); const calculateTrips = useCallback((pts) => { if (!pts || pts.length < 2) { setTripEvents([]); return; } const events = []; let currentParking = null; const stopThreshold = 2 * 60 * 1000; const hasIgnition = pts.some(p => p.ignition !== null && p.ignition !== undefined); for (let i = 0; i < pts.length; i++) { const pos = pts[i]; const ts = new Date(pos.timestamp || pos.server_timestamp); const isParked = hasIgnition ? pos.ignition === 0 : ((pos.speed || 0) <= 0); if (!isParked) { if (currentParking) { currentParking.endTime = ts; currentParking.duration = currentParking.endTime - currentParking.startTime; if (currentParking.duration >= stopThreshold) { events.push({ type: 'parking', data: currentParking }); } else if (currentParking.duration >= 30000) { events.push({ type: 'stop', data: currentParking }); } currentParking = null; } } else { if (!currentParking) { currentParking = { startTime: ts, endTime: ts, latitude: pos.latitude, longitude: pos.longitude, address: pos.address || null, duration: 0 }; } else { currentParking.endTime = ts; } } } if (currentParking) { currentParking.duration = currentParking.endTime - currentParking.startTime; if (currentParking.duration >= stopThreshold) { events.push({ type: 'parking', data: currentParking }); } } setTripEvents(events); }, []); const clearParkingMarkers = useCallback(() => { parkingMarkersRef.current.forEach(m => { if (m && mapInstance.current) mapInstance.current.removeLayer(m); }); parkingMarkersRef.current = []; }, []); const drawParkingMarkers = useCallback(() => { if (!mapInstance.current) return; clearParkingMarkers(); const parkings = tripEvents.filter(e => e.type === 'parking'); parkings.forEach(event => { const p = event.data; if (!p.latitude || !p.longitude) return; const dur = p.duration || 0; const hrs = Math.floor(dur / 3600000); const mins = Math.floor((dur % 3600000) / 60000); const txt = hrs > 0 ? `${hrs}h${mins > 0 ? `${String(mins).padStart(2, '0')}min` : ''}` : `${mins}min`; const icon = L.divIcon({ html: `
🅿️${txt}
`, className: '', iconSize: [80, 30], iconAnchor: [40, 30] }); const marker = L.marker([p.latitude, p.longitude], { icon, interactive: true, zIndexOffset: -500 }).addTo(mapInstance.current); marker.bindTooltip(`Stationnement
Durée: ${txt}`, { direction: 'top', offset: [0, -15] }); parkingMarkersRef.current.push(marker); }); }, [tripEvents, clearParkingMarkers]); const clearStopMarkers = useCallback(() => { stopMarkersRef.current.forEach(m => { if (m && mapInstance.current) mapInstance.current.removeLayer(m); }); stopMarkersRef.current = []; }, []); const drawStopMarkers = useCallback(() => { if (!mapInstance.current) return; clearStopMarkers(); const stops = tripEvents.filter(e => e.type === 'stop'); stops.forEach(event => { const s = event.data; if (!s.latitude || !s.longitude) return; const dur = s.duration || 0; const secs = Math.floor(dur / 1000); const txt = secs >= 60 ? `${Math.floor(secs / 60)}min` : `${secs}s`; const icon = L.divIcon({ html: `
⏸️${txt}
`, className: '', iconSize: [60, 28], iconAnchor: [30, 28] }); const marker = L.marker([s.latitude, s.longitude], { icon, interactive: true, zIndexOffset: -500 }).addTo(mapInstance.current); marker.bindTooltip(`Arrêt court
Durée: ${txt}`, { direction: 'top', offset: [0, -12] }); stopMarkersRef.current.push(marker); }); }, [tripEvents, clearStopMarkers]); const applyDashedStyle = useCallback((dashed) => { polylineSegmentsRef.current.forEach(seg => { seg.setStyle({ dashArray: dashed ? '8, 12' : null, weight: dashed ? 3 : 4 }); }); }, []); useEffect(() => { if (tripEvents.length > 0 && showParkings) drawParkingMarkers(); else clearParkingMarkers(); }, [tripEvents, showParkings]); useEffect(() => { if (tripEvents.length > 0 && showStops) drawStopMarkers(); else clearStopMarkers(); }, [tripEvents, showStops]); useEffect(() => { applyDashedStyle(showDashedTrail); }, [showDashedTrail]); const toggleParkings = () => { const v = !showParkings; setShowParkings(v); localStorage.setItem('client_replay_parkings', v.toString()); }; const toggleStops = () => { const v = !showStops; setShowStops(v); localStorage.setItem('client_replay_stops', v.toString()); }; const toggleDashedTrail = () => { const v = !showDashedTrail; setShowDashedTrail(v); localStorage.setItem('client_replay_dashed', v.toString()); }; const selectedImei = selectedDevice?.imei; const loadPositions = useCallback(async () => { if (!user?.token || !selectedImei || !dateStart || !dateEnd) return; setLoading(true); setPositions([]); setCurrentIndex(0); setIsPlaying(false); setTripEvents([]); clearParkingMarkers(); clearStopMarkers(); startEndMarkersRef.current.forEach(m => { try { mapInstance.current?.removeLayer(m); } catch(e) {} }); startEndMarkersRef.current = []; if (polylineRef.current && mapInstance.current) { mapInstance.current.removeLayer(polylineRef.current); polylineRef.current = null; } polylineSegmentsRef.current.forEach(seg => { try { mapInstance.current?.removeLayer(seg); } catch(e) {} }); polylineSegmentsRef.current = []; if (markerRef.current && mapInstance.current) { mapInstance.current.removeLayer(markerRef.current); markerRef.current = null; } if (replayBadgeRef.current && mapInstance.current) { mapInstance.current.removeLayer(replayBadgeRef.current); replayBadgeRef.current = null; } try { const localFrom = new Date(`${dateStart}T${timeStart}:00`); const localTo = new Date(`${dateEnd}T${timeEnd}:59`); const fromStr = localFrom.toISOString().slice(0, 19).replace('T', ' '); const toStr = localTo.toISOString().slice(0, 19).replace('T', ' '); const resp = await fetch(`${CONFIG.API_URL}/positions/imei/${selectedImei}?from=${encodeURIComponent(fromStr)}&to=${encodeURIComponent(toStr)}&limit=15000&address=false`, { headers: { Authorization: `Bearer ${user.token}` } }); if (checkAuth(resp)) { setLoading(false); return; } if (resp.ok) { const data = await resp.json(); const pts = (data.positions || []).reverse(); if (pts.length > 0) { setPositions(pts); drawRoute(pts); calculateTrips(pts); } } } catch (e) { console.error('Replay error:', e); } setLoading(false); }, [user, selectedImei, dateStart, dateEnd, timeStart, timeEnd, clearParkingMarkers, clearStopMarkers, calculateTrips]); useEffect(() => { if (replayTab === 'carte' && !mapReturnTab && user?.token && selectedImei && mapInstance.current && dateStart && dateEnd) { const t = setTimeout(loadPositions, 200); return () => clearTimeout(t); } }, [replayTab, mapReturnTab, user, selectedImei, dateStart, dateEnd, timeStart, timeEnd, loadPositions]); const getGradientColor = (ratio) => { const stops = [[0,34,197,94],[0.33,234,179,8],[0.66,249,115,22],[1,239,68,68]]; let lo = stops[0], hi = stops[stops.length - 1]; for (let i = 0; i < stops.length - 1; i++) { if (ratio >= stops[i][0] && ratio <= stops[i + 1][0]) { lo = stops[i]; hi = stops[i + 1]; break; } } const t = lo[0] === hi[0] ? 0 : (ratio - lo[0]) / (hi[0] - lo[0]); return `rgb(${Math.round(lo[1]+t*(hi[1]-lo[1]))},${Math.round(lo[2]+t*(hi[2]-lo[2]))},${Math.round(lo[3]+t*(hi[3]-lo[3]))})`; }; const drawRoute = (pts) => { if (!mapInstance.current || !pts.length) return; if (polylineRef.current) { mapInstance.current.removeLayer(polylineRef.current); polylineRef.current = null; } polylineSegmentsRef.current.forEach(seg => { try { mapInstance.current.removeLayer(seg); } catch(e) {} }); polylineSegmentsRef.current = []; if (markerRef.current) mapInstance.current.removeLayer(markerRef.current); markerRef.current = null; if (replayBadgeRef.current) { try { mapInstance.current.removeLayer(replayBadgeRef.current); } catch(e) {} replayBadgeRef.current = null; } const dashed = localStorage.getItem('client_replay_dashed') === 'true'; const segs = []; const total = Math.max(1, pts.length - 1); for (let i = 0; i < pts.length - 1; i++) { const color = getGradientColor(i / total); const seg = L.polyline( [[pts[i].latitude, pts[i].longitude], [pts[i+1].latitude, pts[i+1].longitude]], { color, weight: dashed ? 3 : 4, opacity: 0.7, dashArray: dashed ? '8, 12' : null, lineJoin: 'round', lineCap: 'round' } ).addTo(mapInstance.current); segs.push(seg); } polylineSegmentsRef.current = segs; const latlngs = pts.map(p => [p.latitude, p.longitude]); mapInstance.current.fitBounds(L.latLngBounds(latlngs), { padding: [50, 50] }); startEndMarkersRef.current.forEach(m => { try { mapInstance.current.removeLayer(m); } catch(e) {} }); startEndMarkersRef.current = []; const startIcon = L.divIcon({ html: `
`, className: 'custom-marker', iconSize: [24, 24], iconAnchor: [12, 12] }); const endIcon = L.divIcon({ html: `
`, className: 'custom-marker', iconSize: [24, 24], iconAnchor: [12, 12] }); const first = pts[0], last = pts[pts.length - 1]; const startMarker = L.marker([first.latitude, first.longitude], { icon: startIcon, zIndexOffset: -100 }).addTo(mapInstance.current); const endMarker = L.marker([last.latitude, last.longitude], { icon: endIcon, zIndexOffset: -100 }).addTo(mapInstance.current); startEndMarkersRef.current = [startMarker, endMarker]; updateReplayMarker(pts[0]); }; const updateReplayMarker = (pos) => { if (!mapInstance.current || !pos) return; const style = markerStyle || localStorage.getItem('client_marker_style') || 'vehicle'; const heading = pos.heading || 0; let html, w, h; if (style === 'vehicle') { const vType = selectedDevice?.vehicle_type || 'Voiture'; const vw = 20; const vh = getVehicleSize(vType, vw); w = vw + 4; h = vh + 4; html = `
${getVehicleImg(vType, vw)}
`; } else { w = 36; h = 36; html = `
`; } const icon = L.divIcon({ html, className: 'custom-marker', iconSize: [w, h], iconAnchor: [w/2, h/2] }); if (markerRef.current) { markerRef.current.setLatLng([pos.latitude, pos.longitude]); markerRef.current.setIcon(icon); } else { markerRef.current = L.marker([pos.latitude, pos.longitude], { icon }).addTo(mapInstance.current); } const label = selectedDevice?.plate || selectedDevice?.name || selectedDevice?.imei?.slice(-6) || ''; const speed = Math.round(pos.speed || 0); const speedColor = speed > 3 ? '#22c55e' : '#F97316'; const speedText = speed > 3 ? `${speed} km/h` : 'Arrêt'; let badgeHtml = `
`; badgeHtml += `
${label}
`; badgeHtml += `
${speedText}
`; badgeHtml += `
`; const badgeIcon = L.divIcon({ html: badgeHtml, className: 'plate-badge-container', iconSize: [100, 40], iconAnchor: [-22, 20] }); if (replayBadgeRef.current) { replayBadgeRef.current.setLatLng([pos.latitude, pos.longitude]); replayBadgeRef.current.setIcon(badgeIcon); } else { replayBadgeRef.current = L.marker([pos.latitude, pos.longitude], { icon: badgeIcon, interactive: false }).addTo(mapInstance.current); } }; // Playback - speed: 1x=200ms, 2x=100ms, 4x=50ms, 8x=25ms per point useEffect(() => { if (isPlaying && positions.length > 0) { const interval = Math.max(25, 200 / playbackSpeed); playIntervalRef.current = setInterval(() => { setCurrentIndex(prev => { if (prev >= positions.length - 1) { setIsPlaying(false); return prev; } return prev + 1; }); }, interval); } else { clearInterval(playIntervalRef.current); } return () => clearInterval(playIntervalRef.current); }, [isPlaying, positions.length, playbackSpeed]); useEffect(() => { if (positions[currentIndex]) { updateReplayMarker(positions[currentIndex]); if (markerRef.current) { const el = markerRef.current.getElement(); if (el) { if (isPlaying && playbackSpeed <= 1) { const ms = Math.round(200 / playbackSpeed); el.style.transition = `transform ${ms}ms linear`; } else { el.style.transition = ''; } } } if (replayBadgeRef.current) { const bel = replayBadgeRef.current.getElement(); if (bel) { if (isPlaying && playbackSpeed <= 1) { const ms = Math.round(200 / playbackSpeed); bel.style.transition = `transform ${ms}ms linear`; } else { bel.style.transition = ''; } } } if (isFollowing && mapInstance.current) { const dur = (isPlaying && playbackSpeed <= 1) ? (200 / playbackSpeed) / 1000 : 0.3; mapInstance.current.panTo([positions[currentIndex].latitude, positions[currentIndex].longitude], { animate: true, duration: dur }); } } const segs = polylineSegmentsRef.current; if (segs.length > 0 && isPlaying) { const WINDOW = 40; const FADE = 20; for (let i = 0; i < segs.length; i++) { const dist = Math.abs(i - currentIndex); if (dist <= WINDOW) { segs[i].setStyle({ opacity: 0.9, color: '#3B82F6' }); } else if (dist <= WINDOW + FADE) { const t = (dist - WINDOW) / FADE; segs[i].setStyle({ opacity: 0.9 - t * 0.55, color: '#9CA3AF' }); } else { segs[i].setStyle({ opacity: 0.25, color: '#9CA3AF' }); } } } else if (segs.length > 0 && !isPlaying) { const total = Math.max(1, segs.length); for (let i = 0; i < segs.length; i++) { segs[i].setStyle({ opacity: 0.7, color: getGradientColor(i / total) }); } } }, [currentIndex, positions, isPlaying, playbackSpeed, isFollowing]); useEffect(() => { const pos = positions[currentIndex]; if (!pos) { setCurrentAddress(''); return; } const key = `${pos.latitude.toFixed(4)},${pos.longitude.toFixed(4)}`; if (geocodeCacheRef.current[key]) { setCurrentAddress(geocodeCacheRef.current[key]); return; } setCurrentAddress('...'); if (geocodeTimerRef.current) clearTimeout(geocodeTimerRef.current); geocodeTimerRef.current = setTimeout(async () => { try { const resp = await fetch(`${CONFIG.API_URL}/geocode?latitude=${pos.latitude}&longitude=${pos.longitude}`, { headers: { Authorization: `Bearer ${user.token}` } }); const data = await resp.json(); const addr = data.address || ''; geocodeCacheRef.current[key] = addr; setCurrentAddress(addr); } catch (e) { setCurrentAddress(''); } }, isPlaying ? 2000 : 300); return () => { if (geocodeTimerRef.current) clearTimeout(geocodeTimerRef.current); }; }, [currentIndex, positions, isPlaying]); const fmtHM = (dt) => { const parts = dt.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Zurich' }).split(':'); return `${parts[0]}h${parts[1]}`; }; const formatTime = (dateStr) => { if (!dateStr) return ''; let d = String(dateStr).replace(' ', 'T'); if (!d.endsWith('Z') && !d.includes('+')) d += 'Z'; return fmtHM(new Date(d)); }; const formatDateTime = (dateStr) => { if (!dateStr) return ''; let d = String(dateStr).replace(' ', 'T'); if (!d.endsWith('Z') && !d.includes('+')) d += 'Z'; const dt = new Date(d); const day = dt.toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: 'Europe/Zurich' }); return `${day} ${fmtHM(dt)}`; }; const applyCustomDateRange = useCallback((start, end) => { if (!start || !end) return; setPeriodPreset('custom'); setDateStart(start); setDateEnd(end); setTimeStart('00:00'); setTimeEnd('23:59'); }, []); const [apiTrips, setApiTrips] = useState([]); const [apiParkings, setApiParkings] = useState([]); const [apiTowing, setApiTowing] = useState([]); const [listLoading, setListLoading] = useState(false); const loadComputedData = useCallback(async () => { if (!user?.token || !selectedImei || !dateStart) return; setListLoading(true); setApiTrips([]); setApiParkings([]); setApiTowing([]); try { const startD = new Date(dateStart); const endD = new Date(dateEnd || dateStart); const allTrips = []; const allParkings = []; const allTowing = []; for (let d = new Date(startD); d <= endD; d = new Date(d.getTime() + 86400000)) { const dayStr = d.toISOString().slice(0, 10); const resp = await fetch(`${CONFIG.API_URL}/replay/computed?imei=${selectedImei}&date=${dayStr}`, { headers: { Authorization: `Bearer ${user.token}` } }); if (checkAuth(resp)) { setListLoading(false); return; } if (resp.ok) { const data = await resp.json(); if (data.trips) allTrips.push(...data.trips); if (data.parkings) allParkings.push(...data.parkings); if (data.towingEvents) allTowing.push(...data.towingEvents); } } setApiTrips(allTrips); setApiParkings(allParkings); setApiTowing(allTowing); } catch(e) { console.error('Load computed error:', e); } setListLoading(false); }, [user, selectedImei, dateStart, dateEnd]); useEffect(() => { if (user?.token && selectedImei && dateStart) { loadComputedData(); } }, [selectedImei, dateStart, dateEnd, loadComputedData]); const frequentParkings = useMemo(() => { if (apiParkings.length === 0) return []; const groups = {}; apiParkings.forEach(p => { const lat = p.latitude.toFixed(3); const lng = p.longitude.toFixed(3); const key = `${lat},${lng}`; if (!groups[key]) { groups[key] = { latitude: p.latitude, longitude: p.longitude, count: 0, totalDuration: 0, address: p.address }; } groups[key].count++; groups[key].totalDuration += (p.duration || 0); if (p.address && !groups[key].address) groups[key].address = p.address; }); return Object.values(groups).sort((a, b) => b.count - a.count); }, [apiParkings]); const tripsTimeline = useMemo(() => { const raw = []; const sorted = [...apiTrips].sort((a, b) => (a.startTime || '').localeCompare(b.startTime || '')); const sortedParkings = [...apiParkings].sort((a, b) => (a.startTime || '').localeCompare(b.startTime || '')); let pIdx = 0; for (let i = 0; i < sorted.length; i++) { while (pIdx < sortedParkings.length && sortedParkings[pIdx].startTime < sorted[i].startTime) { raw.push({ type: 'parking', data: sortedParkings[pIdx] }); pIdx++; } raw.push({ type: 'trip', data: sorted[i] }); } while (pIdx < sortedParkings.length) { raw.push({ type: 'parking', data: sortedParkings[pIdx] }); pIdx++; } const merged = []; for (let i = 0; i < raw.length; i++) { const item = raw[i]; if (item.type === 'parking' && merged.length > 0) { const prev = merged[merged.length - 1]; if (prev.type === 'parking') { const latSame = Math.abs(prev.data.latitude - item.data.latitude) < 0.001; const lngSame = Math.abs(prev.data.longitude - item.data.longitude) < 0.001; if (latSame && lngSame) { prev.data = { ...prev.data, endTime: item.data.endTime, duration: (prev.data.duration || 0) + (item.data.duration || 0) }; continue; } } } merged.push({ ...item }); } const timeline = []; for (let i = 0; i < merged.length; i++) { const cur = merged[i]; if (cur.type === 'trip' && cur.data.distance != null && cur.data.distance < 0.1) { const prev = i > 0 ? merged[i - 1] : null; const next = i < merged.length - 1 ? merged[i + 1] : null; if (prev?.type === 'parking' && next?.type === 'parking') { const latSame = Math.abs(prev.data.latitude - next.data.latitude) < 0.002; const lngSame = Math.abs(prev.data.longitude - next.data.longitude) < 0.002; if (latSame && lngSame) { prev.data = { ...prev.data, endTime: next.data.endTime, duration: (prev.data.duration || 0) + (next.data.duration || 0) }; i++; continue; } } } timeline.push(cur); } return timeline; }, [apiTrips, apiParkings]); const geocodePoint = useCallback(async (lat, lng) => { const key = `${lat.toFixed(4)},${lng.toFixed(4)}`; if (geocodeCacheRef.current[key]) return geocodeCacheRef.current[key]; try { const resp = await fetch(`${CONFIG.API_URL}/geocode?latitude=${lat}&longitude=${lng}`, { headers: { Authorization: `Bearer ${user?.token}` } }); const data = await resp.json(); const addr = data.address || ''; geocodeCacheRef.current[key] = addr; return addr; } catch(e) { return ''; } }, [user]); const showTripOnMap = useCallback(async (trip) => { setMapReturnTab('trajets'); setReplayTab('carte'); setHideHeader(true); setActiveParkingInfo(null); setMapViewAddress(''); if (!user?.token || !selectedImei) return; setLoading(true); try { const fromStr = trip.startTime; const toStr = trip.endTime; const resp = await fetch(`${CONFIG.API_URL}/positions/imei/${selectedImei}?from=${encodeURIComponent(fromStr)}&to=${encodeURIComponent(toStr)}&limit=15000&address=false`, { headers: { Authorization: `Bearer ${user.token}` } }); if (checkAuth(resp)) { setLoading(false); return; } if (!resp.ok) { setLoading(false); return; } const data = await resp.json(); const pts = (data.positions || []).reverse(); if (pts.length > 0) { setTimeout(() => { if (!mapInstance.current) return; mapInstance.current.invalidateSize(); if (polylineRef.current) { try { mapInstance.current.removeLayer(polylineRef.current); } catch(e) {} polylineRef.current = null; } polylineSegmentsRef.current.forEach(seg => { try { mapInstance.current.removeLayer(seg); } catch(e) {} }); polylineSegmentsRef.current = []; startEndMarkersRef.current.forEach(m => { try { mapInstance.current.removeLayer(m); } catch(e) {} }); startEndMarkersRef.current = []; clearParkingMarkers(); clearStopMarkers(); if (markerRef.current) { try { mapInstance.current.removeLayer(markerRef.current); } catch(e) {} markerRef.current = null; } if (replayBadgeRef.current) { try { mapInstance.current.removeLayer(replayBadgeRef.current); } catch(e) {} replayBadgeRef.current = null; } setPositions(pts); setCurrentIndex(0); setIsPlaying(true); setIsFollowing(true); drawRoute(pts); mapInstance.current.setView([pts[0].latitude, pts[0].longitude], 16, { animate: false }); calculateTrips(pts); // Marker Vmax const vmaxPt = pts.reduce((best, p) => (p.speed || 0) > (best.speed || 0) ? p : best, pts[0]); if (vmaxPt && (vmaxPt.speed || 0) > 5) { const vmaxIcon = L.divIcon({ html: `
⚡ ${Math.round(vmaxPt.speed)} km/h
`, className: '', iconSize: null, iconAnchor: [0, 24] }); const vmaxMarker = L.marker([vmaxPt.latitude, vmaxPt.longitude], { icon: vmaxIcon, interactive: false, zIndexOffset: 900 }).addTo(mapInstance.current); startEndMarkersRef.current.push(vmaxMarker); } }, 100); geocodePoint(pts[0].latitude, pts[0].longitude).then(addr => setMapViewAddress(addr)); } } catch(e) { console.error('Show trip error:', e); } setLoading(false); }, [user, selectedImei, clearParkingMarkers, clearStopMarkers, calculateTrips, geocodePoint]); const showParkingOnMap = useCallback((parking, returnTab) => { setMapReturnTab(returnTab || 'parking'); setReplayTab('carte'); setHideHeader(true); const dur = parking.duration; const fmtDur = dur ? (dur >= 3600000 ? `${Math.floor(dur/3600000)}h${String(Math.round((dur%3600000)/60000)).padStart(2,'0')}` : `${Math.round(dur/60000)}min`) : ''; setActiveParkingInfo({ duration: fmtDur, startTime: parking.startTime, endTime: parking.endTime }); setMapViewAddress(''); geocodePoint(parking.latitude, parking.longitude).then(addr => setMapViewAddress(addr)); if (!mapInstance.current) return; setTimeout(() => { if (!mapInstance.current) return; mapInstance.current.invalidateSize(); if (polylineRef.current) { try { mapInstance.current.removeLayer(polylineRef.current); } catch(e) {} polylineRef.current = null; } polylineSegmentsRef.current.forEach(seg => { try { mapInstance.current.removeLayer(seg); } catch(e) {} }); polylineSegmentsRef.current = []; startEndMarkersRef.current.forEach(m => { try { mapInstance.current.removeLayer(m); } catch(e) {} }); startEndMarkersRef.current = []; clearParkingMarkers(); clearStopMarkers(); if (markerRef.current) { try { mapInstance.current.removeLayer(markerRef.current); } catch(e) {} markerRef.current = null; } if (replayBadgeRef.current) { try { mapInstance.current.removeLayer(replayBadgeRef.current); } catch(e) {} replayBadgeRef.current = null; } setPositions([]); setCurrentIndex(0); setIsPlaying(false); const count = parking.count; const iconSize = count ? 44 : 36; const parkIcon = L.divIcon({ html: count ? `
P
${count}
` : `
P
`, className: 'custom-marker', iconSize: [iconSize, iconSize], iconAnchor: [iconSize/2, iconSize/2] }); const dur = parking.duration; const durStr = dur ? (dur >= 3600000 ? `${Math.floor(dur/3600000)}h${String(Math.round((dur%3600000)/60000)).padStart(2,'0')}min` : `${Math.round(dur/60000)}min`) : ''; const fmtT = (ts) => { if (!ts) return ''; let d = String(ts).replace(' ','T'); if (!d.endsWith('Z') && !d.includes('+')) d+='Z'; const dt = new Date(d); const p = dt.toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit',hour12:false,timeZone:'Europe/Zurich'}).split(':'); return `${p[0]}h${p[1]}`; }; const timeRange = parking.startTime && parking.endTime ? `${fmtT(parking.startTime)} → ${fmtT(parking.endTime)}` : ''; const labelHtml = `
${durStr ? `
${durStr}
` : ''} ${timeRange ? `
${timeRange}
` : ''}
`; const labelIcon = L.divIcon({ html: labelHtml, className: '', iconSize: null, iconAnchor: [0, iconSize + 8] }); const labelMarker = L.marker([parking.latitude, parking.longitude], { icon: labelIcon, interactive: false, zIndexOffset: 1000 }).addTo(mapInstance.current); startEndMarkersRef.current.push(labelMarker); markerRef.current = L.marker([parking.latitude, parking.longitude], { icon: parkIcon }).addTo(mapInstance.current); mapInstance.current.setView([parking.latitude, parking.longitude], 17, { animate: true }); }, 100); }, [clearParkingMarkers, clearStopMarkers, geocodePoint]); if (!user) { return ( {}} /> ); } const fmtDuration = (ms) => { if (!ms || ms < 0) return '0min'; const h = Math.floor(ms / 3600000); const m = Math.floor((ms % 3600000) / 60000); return h > 0 ? `${h}h${m > 0 ? `${String(m).padStart(2, '0')}min` : ''}` : `${m}min`; }; const fmtTripTime = (dateStr) => { if (!dateStr) return ''; let d = String(dateStr).replace(' ', 'T'); if (!d.endsWith('Z') && !d.includes('+')) d += 'Z'; return fmtHM(new Date(d)); }; return (
{/* Period selector - hidden when viewing carte */} {replayTab !== 'carte' && (
{[{ key: 'today', label: 'Auj.' }, { key: 'yesterday', label: 'Hier' }, { key: 'daybeforeyesterday', label: 'Av. hier' }].map(p => ( ))}
{showDateRange && (
{ setDateStart(e.target.value); if (dateEnd && e.target.value) applyCustomDateRange(e.target.value, dateEnd); }} className="flex-1 px-2.5 py-1.5 text-xs border border-gray-200 rounded-lg bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" /> → { setDateEnd(e.target.value); if (dateStart && e.target.value) applyCustomDateRange(dateStart, e.target.value); }} className="flex-1 px-2.5 py-1.5 text-xs border border-gray-200 rounded-lg bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
)}
)} {/* Tabs - hidden when viewing carte */} {replayTab !== 'carte' && (
{[ { key: 'trajets', label: 'Trajets', svg: }, { key: 'parking', label: 'Parking', svg: } ].map(tab => { const active = replayTab === tab.key; return ( ); })}
)} {/* === CARTE TAB === */}
{mapReturnTab && (

{selectedDevice?.plate || selectedDevice?.name || 'Véhicule'}

{selectedDevice?.vehicle_model && {selectedDevice.vehicle_model}}
)} {positions.length > 0 && (
{(() => { const first = positions[0]; const last = positions[positions.length - 1]; const t1 = new Date((first.server_timestamp || first.timestamp).replace(' ', 'T') + (first.server_timestamp?.includes('Z') ? '' : 'Z')); const t2 = new Date((last.server_timestamp || last.timestamp).replace(' ', 'T') + (last.server_timestamp?.includes('Z') ? '' : 'Z')); const ms = t2 - t1; if (ms < 60000) return `${Math.round(ms / 1000)}s`; if (ms < 3600000) return `${Math.round(ms / 60000)} min`; const h = Math.floor(ms / 3600000); const m = Math.round((ms % 3600000) / 60000); return `${h}h${m > 0 ? `${String(m).padStart(2, '0')}` : ''}`; })()} durée
{(() => { let d = 0; for (let i = 1; i < positions.length; i++) { d += calcDistance(positions[i-1].latitude, positions[i-1].longitude, positions[i].latitude, positions[i].longitude); } return d < 1 ? `${Math.round(d * 1000)}m` : `${d.toFixed(1)}km`; })()} distance
)} {activeParkingInfo && positions.length === 0 && (
🅿️ {activeParkingInfo.duration || '-'} durée
{activeParkingInfo.startTime && activeParkingInfo.endTime && ( <>
{formatTime(activeParkingInfo.startTime)} → {formatTime(activeParkingInfo.endTime)}
)}
{mapViewAddress &&
{mapViewAddress}
}
)}
{/* Top right: Map type/tint + center + reload + overlay */} {mapReturnTab && !activeParkingInfo && ( )} {!activeParkingInfo &&
{showOverlayMenu && (
Affichage
)}
} } /> {loading && (
)} {/* Playback controls */} {positions.length > 0 && (
{currentAddress && currentAddress !== '...' && (
{currentAddress}
)}
setCurrentIndex(parseInt(e.target.value))} className="w-full" />
{positions[currentIndex] ? formatTime(positions[currentIndex].server_timestamp || positions[currentIndex].timestamp) : ''}
)}
{/* === TRAJETS TAB === */} {replayTab === 'trajets' && (
{tripsTimeline.length > 0 ? (
{(() => { let lastDay = null; return tripsTimeline.map((item, idx) => { const ts = item.data.startTime; let dayKey = ''; if (ts) { let d = ts.replace(' ', 'T'); if (!d.endsWith('Z') && !d.includes('+')) d += 'Z'; const dt = new Date(d); dayKey = dt.toLocaleDateString('fr-CH', { timeZone: 'Europe/Zurich', year: 'numeric', month: '2-digit', day: '2-digit' }); } const showDayHeader = dayKey && dayKey !== lastDay; if (showDayHeader) lastDay = dayKey; const dayLabel = showDayHeader ? (() => { let d = ts.replace(' ', 'T'); if (!d.endsWith('Z') && !d.includes('+')) d += 'Z'; const dt = new Date(d); const str = dt.toLocaleDateString('fr-FR', { timeZone: 'Europe/Zurich', weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); return str.charAt(0).toUpperCase() + str.slice(1); })() : null; return ( {showDayHeader && (
{dayLabel}
)} {(() => { if (item.type === 'parking') { const p = item.data; return ( ); } const trip = item.data; const duration = (() => { let s = String(trip.startTime).replace(' ', 'T'); let e = String(trip.endTime).replace(' ', 'T'); if (!s.endsWith('Z') && !s.includes('+')) s += 'Z'; if (!e.endsWith('Z') && !e.includes('+')) e += 'Z'; return new Date(e) - new Date(s); })(); return ( ); })()} ); }); })()}
) : (

{listLoading ? 'Chargement...' : selectedDevice ? 'Aucun trajet pour cette période' : 'Sélectionnez un véhicule'}

)}
)} {/* === PARKING TAB === */} {replayTab === 'parking' && (
{frequentParkings.length > 0 ? (
{frequentParkings.map((p, idx) => ( ))}
) : (
🅿️

{listLoading ? 'Chargement...' : selectedDevice ? 'Aucun parking pour cette période' : 'Sélectionnez un véhicule'}

)}
)} {showAuthModal && setShowAuthModal(false)} />}
); }; // ==================== STYLE SUBVIEW ==================== const StyleView = ({ onBack }) => { const { markerStyle, changeMarkerStyle, mapType, changeMapType: ctxChangeType, mapTint, changeMapTint: ctxChangeTint } = useAppContext(); return (

Style

{/* Marker Style */}
Style de marqueur
); }; // ==================== SUBSCRIPTIONS VIEW ==================== const SubscriptionsView = ({ onBack }) => { const { devices } = useAppContext(); const getPlanLabel = (name) => { if (!name) return 'Aucun'; const n = name.toLowerCase(); if (n.includes('essai') || n.includes('trial')) return 'Essai 7 jours'; if (n.includes('pro')) return 'EasyTrack Pro'; return name; }; const getPlanStyle = (name) => { if (!name) return { bg: 'bg-gray-100', text: 'text-gray-500', badge: 'bg-gray-200 text-gray-600' }; const n = name.toLowerCase(); if (n.includes('essai') || n.includes('trial')) return { bg: 'bg-amber-50', text: 'text-amber-700', badge: 'bg-amber-100 text-amber-700' }; return { bg: 'bg-blue-50', text: 'text-blue-700', badge: 'bg-blue-100 text-blue-700' }; }; const isExpired = (endDate) => endDate && new Date(endDate) < new Date(); const daysLeft = (endDate) => { if (!endDate) return null; const diff = Math.ceil((new Date(endDate) - new Date()) / 86400000); return diff > 0 ? diff : 0; }; const formatDate = (d) => { if (!d) return '-'; return new Date(d).toLocaleDateString('fr-CH', { day: '2-digit', month: 'short', year: 'numeric' }); }; return (

Mes abonnements

{devices.length === 0 && (

Aucun abonnement

)} {devices.map(device => { const plan = getPlanLabel(device.subscription_name); const style = getPlanStyle(device.subscription_name); const expired = isExpired(device.subscription_end_date); const remaining = daysLeft(device.subscription_end_date); return (
{device.plate || device.name} {device.vehicle_model && • {device.vehicle_model}}
{expired ? 'Expiré' : plan}
Début
{formatDate(device.subscription_start_date)}
Fin
{formatDate(device.subscription_end_date)}
{!expired && remaining !== null && remaining <= 30 && (
{remaining}j restants
)}
); })}
); }; // ==================== AFFILIATION VIEW ==================== const AffiliationView = ({ onBack }) => { const { user } = useAppContext(); const [promoData, setPromoData] = useState(null); const [canRefer, setCanRefer] = useState(false); const [referrals, setReferrals] = useState([]); const [loading, setLoading] = useState(true); const [customCode, setCustomCode] = useState(''); const [editingCode, setEditingCode] = useState(false); const [saving, setSaving] = useState(false); const [copied, setCopied] = useState(false); const [balance, setBalance] = useState(0); const [enterCode, setEnterCode] = useState(false); const [inputCode, setInputCode] = useState(''); const [applying, setApplying] = useState(false); const [applyMsg, setApplyMsg] = useState(null); useEffect(() => { if (!user?.token) return; Promise.all([ fetch(`${CONFIG.API_URL}/affiliates/my-code`, { headers: { Authorization: `Bearer ${user.token}` } }).then(r => { if (checkAuth(r)) return {}; return r.json(); }), fetch(`${CONFIG.API_URL}/affiliates/referrals`, { headers: { Authorization: `Bearer ${user.token}` } }).then(r => { if (checkAuth(r)) return {}; return r.json(); }) ]).then(([pd, rd]) => { setCanRefer(!!pd.can_refer); if (pd.promo_code) { setPromoData(pd); setCustomCode(pd.promo_code.code); } else { setPromoData(pd); } if (rd.referrals) { setReferrals(rd.referrals); setBalance(rd.balance || 0); } setLoading(false); }).catch(() => setLoading(false)); }, [user]); const saveCode = async () => { if (!customCode || customCode.length < 4) return; setSaving(true); try { const r = await fetch(`${CONFIG.API_URL}/affiliates/my-code`, { method: 'POST', headers: { Authorization: `Bearer ${user.token}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ code: customCode }) }); const d = await r.json(); if (d.success) { setEditingCode(false); setPromoData(p => ({ ...p, promo_code: { ...p.promo_code, code: customCode } })); } else alert(d.error || 'Erreur'); } catch(e) { alert('Erreur réseau'); } setSaving(false); }; const copyCode = () => { const code = promoData?.promo_code?.code; if (!code) return; navigator.clipboard?.writeText(code).catch(() => {}); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const applyPromoCode = async () => { const code = inputCode.trim().toUpperCase(); if (!code || code.length < 4) { setApplyMsg({ type: 'error', text: 'Le code doit contenir au moins 4 caractères.' }); return; } setApplying(true); setApplyMsg(null); try { const r = await fetch(`${CONFIG.API_URL}/affiliates/apply-code`, { method: 'POST', headers: { Authorization: `Bearer ${user.token}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ code }) }); const d = await r.json(); setApplying(false); if (d.success) { setApplyMsg({ type: 'success', text: `Votre prochaine activation sera gratuite grâce au code de ${d.referrer_name || 'votre parrain'} !` }); setInputCode(''); } else { setApplyMsg({ type: 'error', text: d.error || 'Code invalide.' }); } } catch(e) { setApplying(false); setApplyMsg({ type: 'error', text: 'Erreur réseau.' }); } }; const fmtDate = (s) => { if (!s) return '-'; return new Date(s.replace(' ','T')+'Z').toLocaleDateString('fr-CH', { day:'2-digit', month:'2-digit', year:'numeric' }); }; const statusLabel = { pending: 'En attente', confirmed: 'Confirmé', paid: 'Payé', cancelled: 'Annulé' }; const statusColor = { pending: 'text-amber-600 bg-amber-50', confirmed: 'text-blue-600 bg-blue-50', paid: 'text-green-600 bg-green-50', cancelled: 'text-gray-400 bg-gray-100' }; const statusIcon = { pending: , confirmed: , paid: , cancelled: }; const rewardPerDevice = promoData?.reward_per_device || 50; return (

Parrainage

{loading ? (
) : ( <> {canRefer && <> {/* Comment ça marche */}

Comment ça fonctionne

Partagez votre code

Envoyez votre code promo à un ami

Votre ami économise

50% sur sa première activation, ou 1 activation offerte dès 2 devices

Vous gagnez {rewardPerDevice} CHF

Par abonnement activé par votre filleul

{/* Code promo */}

Votre code promo

{promoData?.promo_code?.code || '-'}
{promoData?.promo_code?.uses_count || 0} utilisation{(promoData?.promo_code?.uses_count || 0) !== 1 ? 's' : ''}
} {/* J'ai un code promo (masqué si parrain) */} {!canRefer &&

J'ai un code promo

Un ami vous a donné un code ? Entrez-le pour bénéficier de {promoData?.free_activations || 1} activation{(promoData?.free_activations || 1) > 1 ? 's' : ''} gratuite{(promoData?.free_activations || 1) > 1 ? 's' : ''} sur votre prochaine commande, ou 50% sur votre première activation.

setInputCode(e.target.value.toUpperCase())} placeholder="Ex: JEAN001" className="w-full text-center text-lg font-bold tracking-widest border-2 border-gray-200 rounded-xl px-3 py-3 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 uppercase font-mono mb-3" /> {applyMsg && (
{applyMsg.text}
)}
} {canRefer &&

Mes parrainages

{referrals.length > 0 && ( {referrals.length} )}
{referrals.length > 0 ? (
{referrals.map(r => (
{r.referred_email || '-'}
{fmtDate(r.created_at)}
{r.reward_amount > 0 &&
+{r.reward_amount} CHF
} {statusIcon[r.reward_status]} {statusLabel[r.reward_status] || r.reward_status}
))}
) : (

Aucun parrainage pour le moment

Partagez votre code pour commencer

)}
} )}
); }; // ==================== MY VEHICLES VIEW ==================== const VEHICLE_TYPES = ['Voiture', 'Limousine', 'Minibus', 'Pickup', 'SUV', 'Moto', 'Scooter', 'Camionnette', 'Construction', 'Camion', 'Ambulance']; const MyVehiclesView = ({ onBack }) => { const { user, devices, setDevices, loadDevices } = useAppContext(); const [editingDevice, setEditingDevice] = useState(null); const [editName, setEditName] = useState(''); const [editPlate, setEditPlate] = useState(''); const [editModel, setEditModel] = useState(''); const [editType, setEditType] = useState('Voiture'); const [saving, setSaving] = useState(false); const [saveSuccess, setSaveSuccess] = useState(null); const startEdit = (device) => { setEditingDevice(device); setEditName(device.name || ''); setEditPlate(device.plate || device.vehicle_plate || ''); setEditModel(device.vehicle_model || ''); setEditType(device.vehicle_type || 'Voiture'); setSaveSuccess(null); }; const saveDevice = async () => { if (!editingDevice || !user?.token) return; setSaving(true); setSaveSuccess(null); try { const resp = await fetch(`${CONFIG.API_URL}/devices/${editingDevice.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${user.token}` }, body: JSON.stringify({ name: editName, vehicle_plate: editPlate, vehicle_model: editModel, vehicle_type: editType }) }); if (checkAuth(resp)) { setSaving(false); return; } const data = await resp.json(); if (resp.ok && data.success) { setSaveSuccess(true); await loadDevices(); setTimeout(() => setEditingDevice(null), 800); } else { setSaveSuccess(false); } } catch (e) { console.error('Save error:', e); setSaveSuccess(false); } setSaving(false); }; if (editingDevice) { return (

Modifier le véhicule

{/* Preview */}
{editPlate || editName || editingDevice.imei.slice(-6)}
{editModel || editType}
{/* Fields */}
setEditPlate(e.target.value)} className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100" placeholder="ex: GE 123456" />
setEditName(e.target.value)} className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100" placeholder="ex: Ma voiture" />
setEditModel(e.target.value)} className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100" placeholder="ex: Tesla Model 3" />
{/* Vehicle Type Picker */}
{VEHICLE_TYPES.map(type => { const info = VEHICLE_SVG_MAP[type] || VEHICLE_SVG_MAP['Voiture']; const active = editType === type; return ( ); })}
{/* IMEI info */}
IMEI
{editingDevice.imei}
{/* Save */} {saveSuccess === false && (
Erreur lors de la sauvegarde
)}
); } return (

Mes véhicules

{devices.length === 0 && (

Aucun véhicule

)} {devices.map(device => { const status = getDeviceStatus(device.speed || 0, device.timestamp || device.last_seen_at, device.is_active, device.ignition, device.movement); const info = VEHICLE_SVG_MAP[device.vehicle_type] || VEHICLE_SVG_MAP['Voiture']; return ( ); })}
); }; // ==================== CHAT VIEW ==================== const ChatView = ({ onBack }) => { const { user } = useAppContext(); const [conversations, setConversations] = useState([]); const [activeConv, setActiveConv] = useState(null); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(''); const [sending, setSending] = useState(false); const [loading, setLoading] = useState(true); const [showNew, setShowNew] = useState(false); const [newSubject, setNewSubject] = useState(''); const messagesEndRef = useRef(null); const req = useCallback(async (url, opts = {}) => { const r = await fetch(`${CONFIG.API_URL}${url}`, { ...opts, headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${user.token}`, ...opts.headers } }); if (checkAuth(r)) return { success: false, expired: true }; return r.json(); }, [user]); const loadConversations = useCallback(async () => { setLoading(true); const data = await req('/chat/conversations'); setConversations(data.conversations || []); setLoading(false); }, [req]); const openConversation = useCallback(async (conv) => { setActiveConv(conv); const data = await req(`/chat/conversations/${conv.id}/messages`); setMessages(data.messages || []); setTimeout(() => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 100); }, [req]); const sendMessage = useCallback(async () => { if (!newMessage.trim() || sending) return; setSending(true); if (activeConv) { await req(`/chat/conversations/${activeConv.id}/messages`, { method: 'POST', body: JSON.stringify({ message: newMessage }) }); const data = await req(`/chat/conversations/${activeConv.id}/messages`); setMessages(data.messages || []); } else { const data = await req('/chat/conversations', { method: 'POST', body: JSON.stringify({ subject: newSubject || 'Support', message: newMessage }) }); if (data.conversation_id) { setShowNew(false); await loadConversations(); const convData = await req(`/chat/conversations/${data.conversation_id}/messages`); setActiveConv({ id: data.conversation_id }); setMessages(convData.messages || []); } } setNewMessage(''); setSending(false); setTimeout(() => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 100); }, [newMessage, sending, activeConv, newSubject, req, loadConversations]); useEffect(() => { loadConversations(); }, [loadConversations]); const fmtDate = (d) => { if (!d) return ''; const dt = new Date(d + (d.includes('Z') || d.includes('+') ? '' : 'Z')); const now = new Date(); const diff = now - dt; if (diff < 60000) return "À l'instant"; if (diff < 3600000) return `${Math.floor(diff / 60000)}min`; if (diff < 86400000) { const p = dt.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Zurich' }).split(':'); return `${p[0]}h${p[1]}`; } return dt.toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit', timeZone: 'Europe/Zurich' }); }; // New conversation form if (showNew && !activeConv) { return (

Nouvelle conversation

setNewSubject(e.target.value)} placeholder="Sujet (optionnel)" className="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" />