Added Money System

components/TrajetMap.tsx

@@ -2,10 +2,15 @@
 
 import { useEffect, useState, useRef } from 'react';
 import dynamic from 'next/dynamic';
-import L from 'leaflet';
+
+// Import conditionnel de Leaflet uniquement côté client
+let L: any;
+if (typeof window !== 'undefined') {
+  L = require('leaflet');
+}
 
 // Fix pour les icônes Leaflet avec Next.js
-if (typeof window !== 'undefined') {
+if (typeof window !== 'undefined' && L) {
   delete (L.Icon.Default.prototype as any)._getIconUrl;
   L.Icon.Default.mergeOptions({
     iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
@@ -43,9 +48,14 @@ export default function TrajetMap({ adresseDepart, adresseArrivee, adherentNom }
   const [routeInfo, setRouteInfo] = useState<RouteInfo | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [mounted, setMounted] = useState(false);
   // Cache simple pour éviter de regéocoder les mêmes adresses
   const geocodeCacheRef = useRef<Map<string, Coordinates>>(new Map());
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   useEffect(() => {
     // Réinitialiser les coordonnées quand les adresses changent
     setDepartCoords(null);
@@ -199,6 +209,20 @@ export default function TrajetMap({ adresseDepart, adresseArrivee, adherentNom }
     return `${minutes} min`;
   };
 
+  // Ne pas rendre la carte côté serveur
+  if (typeof window === 'undefined' || !mounted) {
+    return (
+      <div className="h-full flex items-center justify-center text-gray-400">
+        <div className="text-center">
+          <svg className="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
+          </svg>
+          <p className="text-sm">Chargement de la carte...</p>
+        </div>
+      </div>
+    );
+  }
+
   if (!adresseDepart || !adresseArrivee) {
     return (
       <div className="h-full flex items-center justify-center text-gray-400">