Added Money System

app/api/adherents/[id]/route.ts

@@ -46,7 +46,7 @@ export async function PUT(
     }
 
     const body = await request.json();
-    const { nom, prenom, dateNaissance, adresse, email, telephone, situation, prescripteur, facturation, commentaire, telephoneSecondaire, instructions } = body;
+    const { nom, prenom, dateNaissance, adresse, email, telephone, situation, prescripteur, facturation, forfait, commentaire, telephoneSecondaire, instructions } = body;
 
     const updateData: any = {};
     if (nom) updateData.nom = nom;
@@ -58,6 +58,7 @@ export async function PUT(
     if (situation !== undefined) updateData.situation = situation || null;
     if (prescripteur !== undefined) updateData.prescripteur = prescripteur || null;
     if (facturation !== undefined) updateData.facturation = facturation || null;
+    if (forfait !== undefined) updateData.forfait = forfait || null;
     if (commentaire !== undefined) updateData.commentaire = commentaire || null;
     if (telephoneSecondaire !== undefined) updateData.telephoneSecondaire = telephoneSecondaire || null;
     if (instructions !== undefined) updateData.instructions = instructions || null;

app/api/adherents/route.ts

@@ -54,7 +54,7 @@ export async function POST(request: NextRequest) {
     }
 
     const body = await request.json();
-    const { nom, prenom, dateNaissance, adresse, email, telephone, situation, prescripteur, facturation, commentaire, telephoneSecondaire, instructions } = body;
+    const { nom, prenom, dateNaissance, adresse, email, telephone, situation, prescripteur, facturation, forfait, commentaire, telephoneSecondaire, instructions } = body;
 
     if (!nom || !prenom || !dateNaissance || !adresse || !email || !telephone) {
       return NextResponse.json(
@@ -74,6 +74,7 @@ export async function POST(request: NextRequest) {
         situation: situation || null,
         prescripteur: prescripteur || null,
         facturation: facturation || null,
+        forfait: forfait || null,
         commentaire: commentaire || null,
         telephoneSecondaire: telephoneSecondaire || null,
         instructions: instructions || null,

app/api/settings/adherent-options/route.ts

@@ -11,7 +11,7 @@ export async function GET(request: NextRequest) {
     }
 
     const searchParams = request.nextUrl.searchParams;
-    const type = searchParams.get('type'); // "situation", "prescripteur", "facturation"
+    const type = searchParams.get('type'); // "situation", "prescripteur", "facturation", "forfait"
 
     const where: any = {};
     if (type) {
@@ -64,9 +64,9 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    if (!['situation', 'prescripteur', 'facturation'].includes(type)) {
+    if (!['situation', 'prescripteur', 'facturation', 'forfait'].includes(type)) {
       return NextResponse.json(
-        { error: 'Type invalide. Doit être: situation, prescripteur ou facturation' },
+        { error: 'Type invalide. Doit être: situation, prescripteur, facturation ou forfait' },
         { status: 400 }
       );
     }

app/api/trajets/[id]/route.ts

@@ -22,8 +22,10 @@ export async function GET(
             nom: true,
             prenom: true,
             telephone: true,
+            telephoneSecondaire: true,
             email: true,
             adresse: true,
+            forfait: true,
           },
         },
         chauffeur: {
@@ -64,7 +66,7 @@ export async function PUT(
     }
 
     const body = await request.json();
-    const { date, adresseDepart, adresseArrivee, commentaire, statut, adherentId, chauffeurId } = body;
+    const { date, adresseDepart, adresseArrivee, commentaire, instructions, statut, adherentId, chauffeurId } = body;
 
     const trajet = await prisma.trajet.update({
       where: { id: params.id },
@@ -73,6 +75,7 @@ export async function PUT(
         ...(adresseDepart && { adresseDepart }),
         ...(adresseArrivee && { adresseArrivee }),
         ...(commentaire !== undefined && { commentaire }),
+        ...(instructions !== undefined && { instructions }),
         ...(statut && { statut }),
         ...(adherentId && { adherentId }),
         ...(chauffeurId !== undefined && { chauffeurId }),
@@ -84,7 +87,9 @@ export async function PUT(
             nom: true,
             prenom: true,
             telephone: true,
+            telephoneSecondaire: true,
             email: true,
+            forfait: true,
           },
         },
         chauffeur: {

app/api/trajets/route.ts

@@ -45,7 +45,9 @@ export async function GET(request: NextRequest) {
             nom: true,
             prenom: true,
             telephone: true,
+            telephoneSecondaire: true,
             email: true,
+            forfait: true,
           },
         },
         chauffeur: {
@@ -80,7 +82,7 @@ export async function POST(request: NextRequest) {
     }
 
     const body = await request.json();
-    const { date, adresseDepart, adresseArrivee, commentaire, statut, adherentId, chauffeurId } = body;
+    const { date, adresseDepart, adresseArrivee, commentaire, instructions, statut, adherentId, chauffeurId } = body;
 
     if (!date || !adresseDepart || !adresseArrivee || !adherentId) {
       return NextResponse.json(
@@ -95,6 +97,7 @@ export async function POST(request: NextRequest) {
         adresseDepart,
         adresseArrivee,
         commentaire: commentaire || null,
+        instructions: instructions || null,
         statut: statut || 'Planifié',
         adherentId,
         chauffeurId: chauffeurId || null,
@@ -106,7 +109,9 @@ export async function POST(request: NextRequest) {
             nom: true,
             prenom: true,
             telephone: true,
+            telephoneSecondaire: true,
             email: true,
+            forfait: true,
           },
         },
         chauffeur: {

components/AdherentForm.tsx

@@ -13,6 +13,7 @@ interface Adherent {
   situation?: string | null;
   prescripteur?: string | null;
   facturation?: string | null;
+  forfait?: string | null;
   commentaire?: string | null;
   telephoneSecondaire?: string | null;
   instructions?: string | null;
@@ -29,10 +30,12 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
     situation: Array<{ id: string; value: string }>;
     prescripteur: Array<{ id: string; value: string }>;
     facturation: Array<{ id: string; value: string }>;
+    forfait: Array<{ id: string; value: string }>;
   }>({
     situation: [],
     prescripteur: [],
     facturation: [],
+    forfait: [],
   });
   const [formData, setFormData] = useState({
     nom: '',
@@ -44,6 +47,7 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
     situation: '',
     prescripteur: '',
     facturation: '',
+    forfait: '',
     commentaire: '',
     telephoneSecondaire: '',
     instructions: '',
@@ -62,6 +66,7 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
           situation: data.situation || [],
           prescripteur: data.prescripteur || [],
           facturation: data.facturation || [],
+          forfait: data.forfait || [],
         });
       }
     } catch (error) {
@@ -82,6 +87,7 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
         situation: adherent.situation || '',
         prescripteur: adherent.prescripteur || '',
         facturation: adherent.facturation || '',
+        forfait: adherent.forfait || '',
         commentaire: adherent.commentaire || '',
         telephoneSecondaire: adherent.telephoneSecondaire || '',
         instructions: adherent.instructions || '',
@@ -102,6 +108,7 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
         situation: formData.situation || null,
         prescripteur: formData.prescripteur || null,
         facturation: formData.facturation || null,
+        forfait: formData.forfait || null,
         commentaire: formData.commentaire || null,
         telephoneSecondaire: formData.telephoneSecondaire || null,
         instructions: formData.instructions || null,
@@ -386,6 +393,37 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
                 </div>
               </div>
 
+              <div>
+                <label htmlFor="forfait" className="block text-sm font-medium text-gray-700 mb-1">
+                  Forfait
+                </label>
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <select
+                    id="forfait"
+                    value={formData.forfait}
+                    onChange={(e) => setFormData({ ...formData, forfait: e.target.value })}
+                    className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent appearance-none bg-white"
+                  >
+                    <option value="">Sélectionner un forfait (prix par trajet)</option>
+                    {options.forfait.map((option) => (
+                      <option key={option.id} value={option.value}>
+                        {option.value}
+                      </option>
+                    ))}
+                  </select>
+                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                    <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
               <div>
                 <label htmlFor="telephoneSecondaire" className="block text-sm font-medium text-gray-700 mb-1">
                   Téléphone secondaire

components/ConfigurationContent.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, memo } from 'react';
 import { useRouter } from 'next/navigation';
 import { useNotification } from './NotificationProvider';
 import { AVAILABLE_PAGES } from '@/lib/pages';
 
 interface AdherentOption {
   id: string;
-  type: 'situation' | 'prescripteur' | 'facturation';
+  type: 'situation' | 'prescripteur' | 'facturation' | 'forfait';
   value: string;
   order: number;
 }
@@ -16,8 +16,156 @@ interface OptionsByType {
   situation: AdherentOption[];
   prescripteur: AdherentOption[];
   facturation: AdherentOption[];
+  forfait: AdherentOption[];
 }
 
+// Composant OptionCard mémorisé pour éviter les re-renders inutiles
+const OptionCard = memo(({
+  type,
+  label,
+  icon,
+  options,
+  loading,
+  editingId,
+  editingValue,
+  newValue,
+  onEdit,
+  onSaveEdit,
+  onCancelEdit,
+  onDelete,
+  onAdd,
+  onNewValueChange,
+  onEditingValueChange,
+}: {
+  type: 'situation' | 'prescripteur' | 'facturation' | 'forfait';
+  label: string;
+  icon: React.ReactNode;
+  options: AdherentOption[];
+  loading: boolean;
+  editingId: string | null;
+  editingValue: string;
+  newValue: string;
+  onEdit: (option: AdherentOption) => void;
+  onSaveEdit: (id: string, type: 'situation' | 'prescripteur' | 'facturation' | 'forfait') => void;
+  onCancelEdit: () => void;
+  onDelete: (id: string) => void;
+  onAdd: (type: 'situation' | 'prescripteur' | 'facturation' | 'forfait') => void;
+  onNewValueChange: (type: 'situation' | 'prescripteur' | 'facturation' | 'forfait', value: string) => void;
+  onEditingValueChange: (value: string) => void;
+}) => {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-lg bg-lblue/10 flex items-center justify-center">
+          {icon}
+        </div>
+        <h3 className="text-lg font-bold text-gray-900">{label}</h3>
+        <span className="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-600">
+          {options.length} option{options.length > 1 ? 's' : ''}
+        </span>
+      </div>
+
+      {/* Liste des options */}
+      <div className="space-y-2 mb-4">
+        {loading ? (
+          <div className="text-center py-4 text-gray-500">Chargement...</div>
+        ) : options.length === 0 ? (
+          <div className="text-center py-4 text-gray-500 text-sm">
+            Aucune option configurée
+          </div>
+        ) : (
+          options.map((option) => (
+            <div
+              key={option.id}
+              className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors"
+            >
+              {editingId === option.id ? (
+                <>
+                  <input
+                    type="text"
+                    value={editingValue}
+                    onChange={(e) => {
+                      onEditingValueChange(e.target.value);
+                    }}
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        onSaveEdit(option.id, type);
+                      } else if (e.key === 'Escape') {
+                        onCancelEdit();
+                      }
+                    }}
+                    autoFocus
+                  />
+                  <button
+                    onClick={() => onSaveEdit(option.id, type)}
+                    className="px-3 py-2 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen transition-colors"
+                  >
+                    Enregistrer
+                  </button>
+                  <button
+                    onClick={onCancelEdit}
+                    className="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors"
+                  >
+                    Annuler
+                  </button>
+                </>
+              ) : (
+                <>
+                  <span className="flex-1 text-sm font-medium text-gray-900">
+                    {option.value}
+                  </span>
+                  <button
+                    onClick={() => onEdit(option)}
+                    className="px-3 py-1.5 text-xs font-medium text-lblue bg-lblue/10 rounded-lg hover:bg-lblue/20 transition-colors"
+                  >
+                    Modifier
+                  </button>
+                  <button
+                    onClick={() => onDelete(option.id)}
+                    className="px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
+                  >
+                    Supprimer
+                  </button>
+                </>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Formulaire d'ajout */}
+      <div className="flex items-center gap-2 pt-4 border-t border-gray-200">
+        <input
+          type="text"
+          value={newValue || ''}
+          onChange={(e) => {
+            onNewValueChange(type, e.target.value);
+          }}
+          placeholder={`Ajouter une nouvelle ${label.toLowerCase()}`}
+          className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              onAdd(type);
+            }
+          }}
+        />
+        <button
+          onClick={() => onAdd(type)}
+          className="px-4 py-2 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue transition-colors flex items-center gap-2"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          Ajouter
+        </button>
+      </div>
+    </div>
+  );
+});
+
+OptionCard.displayName = 'OptionCard';
+
 export default function ConfigurationContent() {
   const router = useRouter();
   const { showNotification } = useNotification();
@@ -26,6 +174,7 @@ export default function ConfigurationContent() {
     situation: [],
     prescripteur: [],
     facturation: [],
+    forfait: [],
   });
   const [loading, setLoading] = useState(true);
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -34,6 +183,7 @@ export default function ConfigurationContent() {
     situation: '',
     prescripteur: '',
     facturation: '',
+    forfait: '',
   });
 
   const fetchOptions = useCallback(async () => {
@@ -46,6 +196,7 @@ export default function ConfigurationContent() {
           situation: data.situation || [],
           prescripteur: data.prescripteur || [],
           facturation: data.facturation || [],
+          forfait: data.forfait || [],
         });
       }
     } catch (error) {
@@ -58,18 +209,16 @@ export default function ConfigurationContent() {
 
   useEffect(() => {
     fetchOptions();
-  }, [fetchOptions]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  const handleAdd = useCallback(async (type: 'situation' | 'prescripteur' | 'facturation') => {
+  const handleAdd = useCallback(async (type: 'situation' | 'prescripteur' | 'facturation' | 'forfait') => {
-    setNewValue((current) => {
+    const currentValue = newValue[type]?.trim() || '';
-      const value = (current[type] || '').trim();
+    if (!currentValue) {
-      if (!value) {
       showNotification('Veuillez entrer une valeur', 'error');
-        return current;
+      return;
     }
 
-      // Appel API asynchrone
-      (async () => {
     try {
       const response = await fetch('/api/settings/adherent-options', {
         method: 'POST',
@@ -78,7 +227,7 @@ export default function ConfigurationContent() {
         },
         body: JSON.stringify({
           type,
-              value,
+          value: currentValue,
         }),
       });
 
@@ -94,18 +243,14 @@ export default function ConfigurationContent() {
       console.error('Erreur:', error);
       showNotification('Erreur lors de l\'ajout', 'error');
     }
-      })();
+  }, [newValue, showNotification, fetchOptions]);
 
-      return current;
+  const handleEdit = useCallback((option: AdherentOption) => {
-    });
-  }, [showNotification, fetchOptions]);
-
-  const handleEdit = (option: AdherentOption) => {
     setEditingId(option.id);
     setEditingValue(option.value);
-  };
+  }, []);
 
-  const handleSaveEdit = async (id: string, type: 'situation' | 'prescripteur' | 'facturation') => {
+  const handleSaveEdit = useCallback(async (id: string, type: 'situation' | 'prescripteur' | 'facturation' | 'forfait') => {
     const value = editingValue.trim();
     if (!value) {
       showNotification('Veuillez entrer une valeur', 'error');
@@ -134,14 +279,14 @@ export default function ConfigurationContent() {
       console.error('Erreur:', error);
       showNotification('Erreur lors de la modification', 'error');
     }
-  };
+  }, [editingValue, showNotification, fetchOptions]);
 
-  const handleCancelEdit = () => {
+  const handleCancelEdit = useCallback(() => {
     setEditingId(null);
     setEditingValue('');
-  };
+  }, []);
 
-  const handleDelete = async (id: string) => {
+  const handleDelete = useCallback(async (id: string) => {
     if (!confirm('Êtes-vous sûr de vouloir supprimer cette option ?')) {
       return;
     }
@@ -162,127 +307,15 @@ export default function ConfigurationContent() {
       console.error('Erreur:', error);
       showNotification('Erreur lors de la suppression', 'error');
     }
-  };
+  }, [showNotification, fetchOptions]);
 
-  const OptionCard = ({
+  const handleNewValueChange = useCallback((type: 'situation' | 'prescripteur' | 'facturation' | 'forfait', value: string) => {
-    type,
+    setNewValue((prev) => ({ ...prev, [type]: value }));
-    label,
+  }, []);
-    icon,
-  }: {
-    type: 'situation' | 'prescripteur' | 'facturation';
-    label: string;
-    icon: React.ReactNode;
-  }) => {
-    const typeOptions = options[type] || [];
 
-    return (
+  const handleEditingValueChange = useCallback((value: string) => {
-      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+    setEditingValue(value);
-        <div className="flex items-center gap-3 mb-6">
+  }, []);
-          <div className="w-10 h-10 rounded-lg bg-lblue/10 flex items-center justify-center">
-            {icon}
-          </div>
-          <h3 className="text-lg font-bold text-gray-900">{label}</h3>
-          <span className="ml-auto px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-600">
-            {typeOptions.length} option{typeOptions.length > 1 ? 's' : ''}
-          </span>
-        </div>
-
-        {/* Liste des options */}
-        <div className="space-y-2 mb-4">
-          {loading ? (
-            <div className="text-center py-4 text-gray-500">Chargement...</div>
-          ) : typeOptions.length === 0 ? (
-            <div className="text-center py-4 text-gray-500 text-sm">
-              Aucune option configurée
-            </div>
-          ) : (
-            typeOptions.map((option) => (
-              <div
-                key={option.id}
-                className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors"
-              >
-                {editingId === option.id ? (
-                  <>
-                    <input
-                      type="text"
-                      value={editingValue}
-                      onChange={(e) => setEditingValue(e.target.value)}
-                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          handleSaveEdit(option.id, type);
-                        } else if (e.key === 'Escape') {
-                          handleCancelEdit();
-                        }
-                      }}
-                      autoFocus
-                    />
-                    <button
-                      onClick={() => handleSaveEdit(option.id, type)}
-                      className="px-3 py-2 text-sm font-medium text-white bg-lgreen rounded-lg hover:bg-dgreen transition-colors"
-                    >
-                      Enregistrer
-                    </button>
-                    <button
-                      onClick={handleCancelEdit}
-                      className="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors"
-                    >
-                      Annuler
-                    </button>
-                  </>
-                ) : (
-                  <>
-                    <span className="flex-1 text-sm font-medium text-gray-900">
-                      {option.value}
-                    </span>
-                    <button
-                      onClick={() => handleEdit(option)}
-                      className="px-3 py-1.5 text-xs font-medium text-lblue bg-lblue/10 rounded-lg hover:bg-lblue/20 transition-colors"
-                    >
-                      Modifier
-                    </button>
-                    <button
-                      onClick={() => handleDelete(option.id)}
-                      className="px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
-                    >
-                      Supprimer
-                    </button>
-                  </>
-                )}
-              </div>
-            ))
-          )}
-        </div>
-
-        {/* Formulaire d'ajout */}
-        <div className="flex items-center gap-2 pt-4 border-t border-gray-200">
-          <input
-            type="text"
-            value={newValue[type] || ''}
-            onChange={(e) => {
-              setNewValue((prev) => ({ ...prev, [type]: e.target.value }));
-            }}
-            placeholder={`Ajouter une nouvelle ${label.toLowerCase()}`}
-            className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                handleAdd(type);
-              }
-            }}
-          />
-          <button
-            onClick={() => handleAdd(type)}
-            className="px-4 py-2 text-sm font-medium text-white bg-lblue rounded-lg hover:bg-dblue transition-colors flex items-center gap-2"
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-            </svg>
-            Ajouter
-          </button>
-        </div>
-      </div>
-    );
-  };
 
   // Composant pour la gestion des comptes
   const GestionComptesContent = () => {
@@ -1095,6 +1128,18 @@ export default function ConfigurationContent() {
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                         </svg>
                       }
+                      options={options.situation}
+                      loading={loading}
+                      editingId={editingId}
+                      editingValue={editingValue}
+                      newValue={newValue.situation}
+                      onEdit={handleEdit}
+                      onSaveEdit={handleSaveEdit}
+                      onCancelEdit={handleCancelEdit}
+                      onDelete={handleDelete}
+                      onAdd={handleAdd}
+                      onNewValueChange={handleNewValueChange}
+                      onEditingValueChange={handleEditingValueChange}
                     />
 
                     <OptionCard
@@ -1105,6 +1150,18 @@ export default function ConfigurationContent() {
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                         </svg>
                       }
+                      options={options.prescripteur}
+                      loading={loading}
+                      editingId={editingId}
+                      editingValue={editingValue}
+                      newValue={newValue.prescripteur}
+                      onEdit={handleEdit}
+                      onSaveEdit={handleSaveEdit}
+                      onCancelEdit={handleCancelEdit}
+                      onDelete={handleDelete}
+                      onAdd={handleAdd}
+                      onNewValueChange={handleNewValueChange}
+                      onEditingValueChange={handleEditingValueChange}
                     />
 
                     <OptionCard
@@ -1115,6 +1172,40 @@ export default function ConfigurationContent() {
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                         </svg>
                       }
+                      options={options.facturation}
+                      loading={loading}
+                      editingId={editingId}
+                      editingValue={editingValue}
+                      newValue={newValue.facturation}
+                      onEdit={handleEdit}
+                      onSaveEdit={handleSaveEdit}
+                      onCancelEdit={handleCancelEdit}
+                      onDelete={handleDelete}
+                      onAdd={handleAdd}
+                      onNewValueChange={handleNewValueChange}
+                      onEditingValueChange={handleEditingValueChange}
+                    />
+
+                    <OptionCard
+                      type="forfait"
+                      label="Forfaits"
+                      icon={
+                        <svg className="w-5 h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                      }
+                      options={options.forfait}
+                      loading={loading}
+                      editingId={editingId}
+                      editingValue={editingValue}
+                      newValue={newValue.forfait}
+                      onEdit={handleEdit}
+                      onSaveEdit={handleSaveEdit}
+                      onCancelEdit={handleCancelEdit}
+                      onDelete={handleDelete}
+                      onAdd={handleAdd}
+                      onNewValueChange={handleNewValueChange}
+                      onEditingValueChange={handleEditingValueChange}
                     />
                   </div>
                 ) : activeConfigSection === 'comptes' ? (

components/TrajetDetailModal.tsx

@@ -1,24 +1,38 @@
 'use client';
 
 import { useState } from 'react';
+import dynamic from 'next/dynamic';
 import TrajetForm from './TrajetForm';
 import ValidationModal from './ValidationModal';
 import ConfirmModal from './ConfirmModal';
 import { useNotification } from './NotificationProvider';
 
+// Import dynamique pour éviter les problèmes SSR avec Leaflet
+const TrajetMap = dynamic(() => import('./TrajetMap'), { 
+  ssr: false,
+  loading: () => (
+    <div className="w-full h-full flex items-center justify-center bg-gray-100">
+      <div className="text-gray-500 text-sm">Chargement de la carte...</div>
+    </div>
+  )
+});
+
 interface Trajet {
   id: string;
   date: string;
   adresseDepart: string;
   adresseArrivee: string;
   commentaire?: string | null;
+  instructions?: string | null;
   statut: string;
   adherent: {
     id: string;
     nom: string;
     prenom: string;
     telephone: string;
+    telephoneSecondaire?: string | null;
     email: string;
+    forfait?: string | null;
   };
   chauffeur?: {
     id: string;
@@ -141,6 +155,33 @@ export default function TrajetDetailModal({ trajet, onClose, onUpdate }: TrajetD
     }
   };
 
+  const handleCopyAddress = async (address: string) => {
+    try {
+      await navigator.clipboard.writeText(address);
+      showNotification('success', 'Adresse copiée dans le presse-papiers');
+    } catch (error) {
+      console.error('Erreur lors de la copie:', error);
+      showNotification('error', 'Erreur lors de la copie de l\'adresse');
+    }
+  };
+
+  const handleOpenRoute = () => {
+    const encodedDepart = encodeURIComponent(trajet.adresseDepart);
+    const encodedArrivee = encodeURIComponent(trajet.adresseArrivee);
+    
+    // Détecter le système d'exploitation pour ouvrir dans la bonne app
+    const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
+    const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream;
+    
+    if (isIOS) {
+      // Apple Maps avec itinéraire
+      window.open(`https://maps.apple.com/?saddr=${encodedDepart}&daddr=${encodedArrivee}`, '_blank');
+    } else {
+      // Google Maps avec itinéraire (par défaut sur Android et autres)
+      window.open(`https://www.google.com/maps/dir/${encodedDepart}/${encodedArrivee}`, '_blank');
+    }
+  };
+
   if (showEditForm) {
     return (
       <TrajetForm
@@ -170,20 +211,25 @@ export default function TrajetDetailModal({ trajet, onClose, onUpdate }: TrajetD
   }
 
   return (
-    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-2 sm:p-4 animate-fadeIn">
-      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
+      <div className="bg-white rounded-lg shadow-xl max-w-6xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
         {/* Header */}
-        <div className="border-b border-gray-200 px-6 py-5 bg-white">
+        <div className="border-b border-gray-200 px-4 sm:px-6 py-4 sm:py-5 bg-white flex-shrink-0">
-          <div className="flex items-center justify-between">
+          <div className="flex items-start justify-between gap-4">
-            <div>
+            <div className="flex-1 min-w-0">
-              <h2 className="text-2xl font-semibold text-gray-900">Détails du trajet</h2>
+              <div className="flex items-center gap-3 mb-1">
-              <p className="text-sm text-gray-500 mt-1">Informations complètes du trajet</p>
+                <h2 className="text-xl sm:text-2xl font-semibold text-gray-900">Détails du trajet</h2>
+                <span className={`px-2.5 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-semibold rounded-lg border flex-shrink-0 ${getStatutColor(trajet.statut)}`}>
+                  {trajet.statut}
+                </span>
+              </div>
+              <p className="text-xs sm:text-sm text-gray-500">Informations complètes du trajet</p>
             </div>
             <button
               onClick={onClose}
-              className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg"
+              className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg flex-shrink-0"
             >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>
@@ -191,20 +237,15 @@ export default function TrajetDetailModal({ trajet, onClose, onUpdate }: TrajetD
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto px-6 py-6">
+        <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 sm:py-6">
-          <div className="space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
-            {/* Statut */}
+            {/* Colonne gauche - Informations */}
-            <div className="flex items-center justify-between">
+            <div className="space-y-4 sm:space-y-6">
-              <span className="text-sm font-medium text-gray-500">Statut</span>
-              <span className={`px-3 py-1.5 text-sm font-semibold rounded-lg border ${getStatutColor(trajet.statut)}`}>
-                {trajet.statut}
-              </span>
-            </div>
-
             {/* Adhérent */}
             <div>
               <label className="text-sm font-medium text-gray-500 mb-2 block">Adhérent</label>
-              <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
+              <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
+                <div className="flex items-center gap-3 mb-3">
                   <div className="w-12 h-12 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold">
                     {getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
                   </div>
@@ -212,8 +253,37 @@ export default function TrajetDetailModal({ trajet, onClose, onUpdate }: TrajetD
                     <div className="text-sm font-semibold text-gray-900">
                       {trajet.adherent.prenom} {trajet.adherent.nom}
                     </div>
-                  <div className="text-xs text-gray-500">{trajet.adherent.email}</div>
+                  </div>
-                  <div className="text-xs text-gray-500">{trajet.adherent.telephone}</div>
+                </div>
+                <div className="space-y-2 pt-2 border-t border-gray-200">
+                  <div className="flex items-center gap-2">
+                    <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                    </svg>
+                    <span className="text-xs text-gray-600">{trajet.adherent.telephone}</span>
+                  </div>
+                  {trajet.adherent.telephoneSecondaire && (
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                      </svg>
+                      <span className="text-xs text-gray-600">Secondaire: {trajet.adherent.telephoneSecondaire}</span>
+                    </div>
+                  )}
+                  <div className="flex items-center gap-2">
+                    <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                    <span className="text-xs text-gray-600">{trajet.adherent.email}</span>
+                  </div>
+                  {trajet.adherent.forfait && (
+                    <div className="flex items-center gap-2 text-xs sm:text-sm">
+                      <svg className="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                      <span className="font-semibold text-lgreen">Forfait: {trajet.adherent.forfait} €</span>
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
@@ -221,139 +291,198 @@ export default function TrajetDetailModal({ trajet, onClose, onUpdate }: TrajetD
             {/* Chauffeur */}
             {trajet.chauffeur ? (
               <div>
-                <label className="text-sm font-medium text-gray-500 mb-2 block">Chauffeur</label>
+                <label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Chauffeur</label>
-                <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
+                <div className="flex items-center gap-3 p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
-                  <div className="w-12 h-12 rounded-full bg-lblue flex items-center justify-center text-white font-semibold">
+                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-lblue flex items-center justify-center text-white font-semibold text-sm flex-shrink-0">
                     {getInitials(trajet.chauffeur.nom, trajet.chauffeur.prenom)}
                   </div>
-                  <div className="flex-1">
+                  <div className="flex-1 min-w-0">
-                    <div className="text-sm font-semibold text-gray-900">
+                    <div className="text-sm sm:text-base font-semibold text-gray-900 truncate">
                       {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
                     </div>
-                    <div className="text-xs text-gray-500">{trajet.chauffeur.telephone}</div>
+                    <a href={`tel:${trajet.chauffeur.telephone}`} className="text-xs sm:text-sm text-gray-500 hover:text-lblue transition-colors break-all">
+                      {trajet.chauffeur.telephone}
+                    </a>
                   </div>
                 </div>
               </div>
             ) : (
               <div>
-                <label className="text-sm font-medium text-gray-500 mb-2 block">Chauffeur</label>
+                <label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Chauffeur</label>
-                <div className="p-3 bg-orange-50 rounded-lg border border-orange-200">
+                <div className="p-3 sm:p-4 bg-orange-50 rounded-lg border border-orange-200">
                   <div className="flex items-center gap-2 text-orange-700">
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                     </svg>
-                    <span className="text-sm font-medium">Aucun chauffeur assigné</span>
+                    <span className="text-xs sm:text-sm font-medium">Aucun chauffeur assigné</span>
                   </div>
                 </div>
               </div>
             )}
 
             {/* Date et heure */}
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-2 gap-3 sm:gap-4">
               <div>
-                <label className="text-sm font-medium text-gray-500 mb-2 block">Date</label>
+                <label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Date</label>
-                <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg border border-gray-200">
+                <div className="flex items-center gap-2 p-2.5 sm:p-3 bg-gray-50 rounded-lg border border-gray-200">
-                  <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                   </svg>
-                  <span className="text-sm font-medium text-gray-900">{formatDate(trajet.date)}</span>
+                  <span className="text-xs sm:text-sm font-medium text-gray-900 truncate">{formatDate(trajet.date)}</span>
                 </div>
               </div>
               <div>
-                <label className="text-sm font-medium text-gray-500 mb-2 block">Heure</label>
+                <label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Heure</label>
-                <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg border border-gray-200">
+                <div className="flex items-center gap-2 p-2.5 sm:p-3 bg-gray-50 rounded-lg border border-gray-200">
-                  <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                   </svg>
-                  <span className="text-sm font-medium text-gray-900">{formatTime(trajet.date)}</span>
+                  <span className="text-xs sm:text-sm font-medium text-gray-900">{formatTime(trajet.date)}</span>
                 </div>
               </div>
             </div>
 
             {/* Adresses */}
             <div>
-              <label className="text-sm font-medium text-gray-500 mb-2 block">Adresse de départ</label>
+              <label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Adresse de départ</label>
-              <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
+              <div className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
-                <div className="flex items-start gap-2">
+                <div className="flex items-start gap-2 mb-3">
-                  <div className="w-6 h-6 rounded-full bg-lgreen flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
+                  <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-lgreen flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
                     A
                   </div>
-                  <span className="text-sm text-gray-900">{trajet.adresseDepart}</span>
+                  <span className="text-xs sm:text-sm text-gray-900 flex-1 break-words">{trajet.adresseDepart}</span>
+                </div>
+                <div className="flex flex-wrap gap-2 mt-2 pt-2 border-t border-gray-200">
+                  <button
+                    onClick={() => handleCopyAddress(trajet.adresseDepart)}
+                    className="flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors active:bg-gray-200"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                    </svg>
+                    Copier
+                  </button>
                 </div>
               </div>
             </div>
 
             <div>
-              <label className="text-sm font-medium text-gray-500 mb-2 block">Adresse d'arrivée</label>
+              <label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Adresse d'arrivée</label>
-              <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
+              <div className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
-                <div className="flex items-start gap-2">
+                <div className="flex items-start gap-2 mb-3">
-                  <div className="w-6 h-6 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
+                  <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
                     B
                   </div>
-                  <span className="text-sm text-gray-900">{trajet.adresseArrivee}</span>
+                  <span className="text-xs sm:text-sm text-gray-900 flex-1 break-words">{trajet.adresseArrivee}</span>
+                </div>
+                <div className="flex flex-wrap gap-2 mt-2 pt-2 border-t border-gray-200">
+                  <button
+                    onClick={() => handleCopyAddress(trajet.adresseArrivee)}
+                    className="flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors active:bg-gray-200"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                    </svg>
+                    Copier
+                  </button>
+                  <button
+                    onClick={handleOpenRoute}
+                    className="flex items-center gap-1.5 px-3 py-2 text-xs font-medium bg-lgreen text-white hover:bg-dgreen rounded-md transition-colors active:bg-dgreen"
+                  >
+                    <svg className="w-4 h-4" 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>
+                    Ouvrir l'itinéraire
+                  </button>
                 </div>
               </div>
             </div>
 
+            {/* Instructions */}
+            {trajet.instructions && (
+              <div>
+                <label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Instructions</label>
+                <div className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
+                  <p className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap break-words">{trajet.instructions}</p>
+                </div>
+              </div>
+            )}
+
             {/* Commentaire */}
             {trajet.commentaire && (
               <div>
-                <label className="text-sm font-medium text-gray-500 mb-2 block">Commentaire</label>
+                <label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Commentaire</label>
-                <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
+                <div className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
-                  <p className="text-sm text-gray-700 whitespace-pre-wrap">{trajet.commentaire}</p>
+                  <p className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap break-words">{trajet.commentaire}</p>
                 </div>
               </div>
             )}
             </div>
+
+            {/* Colonne droite - Carte */}
+            <div className="lg:sticky lg:top-0 order-first lg:order-last">
+              <div className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden h-[300px] sm:h-[400px] lg:h-[500px]">
+                <TrajetMap
+                  adresseDepart={trajet.adresseDepart}
+                  adresseArrivee={trajet.adresseArrivee}
+                  adherentNom={`${trajet.adherent.prenom} ${trajet.adherent.nom}`}
+                />
+              </div>
+            </div>
+          </div>
         </div>
 
         {/* Footer */}
-        <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
+        <div className="border-t border-gray-200 px-4 sm:px-6 py-3 sm:py-4 bg-gray-50/50 flex-shrink-0">
-          <div className="flex justify-between gap-3">
+          <div className="flex flex-col sm:flex-row justify-between gap-2 sm:gap-3">
             <button
               type="button"
               onClick={handleCancelClick}
               disabled={loading || trajet.statut === 'Validé' || trajet.statut === 'Terminé' || trajet.statut === 'Annulé'}
-              className="px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+              className="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-red-600 hover:text-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 active:bg-red-50 rounded-lg"
             >
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
-              {trajet.statut === 'Annulé' ? 'Trajet annulé' : 'Annuler le trajet'}
+              <span className="hidden sm:inline">{trajet.statut === 'Annulé' ? 'Trajet annulé' : 'Annuler le trajet'}</span>
+              <span className="sm:hidden">{trajet.statut === 'Annulé' ? 'Annulé' : 'Annuler'}</span>
             </button>
-            <div className="flex gap-3">
+            <div className="flex flex-wrap gap-2 sm:gap-3 justify-end">
               <button
                 type="button"
                 onClick={() => setShowEditForm(true)}
                 disabled={trajet.statut === 'Validé' || trajet.statut === 'Terminé' || trajet.statut === 'Annulé'}
-                className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                className="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 active:bg-gray-100 rounded-lg"
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                 </svg>
-                Modifier
+                <span className="hidden sm:inline">Modifier</span>
+                <span className="sm:hidden">Modif.</span>
               </button>
               <button
                 type="button"
                 onClick={handleArchiveClick}
                 disabled={loading}
-                className="px-4 py-2 text-sm font-medium text-orange-600 hover:text-orange-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                className="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-orange-600 hover:text-orange-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 active:bg-orange-50 rounded-lg"
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                 </svg>
-                Archiver
+                <span className="hidden sm:inline">Archiver</span>
+                <span className="sm:hidden">Arch.</span>
               </button>
               {trajet.chauffeur && trajet.statut === 'Planifié' && (
                 <button
                   type="button"
                   onClick={() => setShowValidationModal(true)}
-                  className="px-6 py-2 bg-lgreen text-white text-sm font-medium rounded-lg hover:bg-dgreen transition-colors flex items-center gap-2"
+                  className="px-4 sm:px-6 py-2 bg-lgreen text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-dgreen transition-colors flex items-center gap-2 active:bg-dgreen"
                 >
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                   </svg>
-                  Valider le trajet
+                  <span className="hidden sm:inline">Valider le trajet</span>
+                  <span className="sm:hidden">Valider</span>
                 </button>
               )}
             </div>

components/TrajetForm.tsx

@@ -12,6 +12,13 @@ interface Adherent {
   adresse: string;
   telephone: string;
   email: string;
+  commentaire?: string | null;
+  telephoneSecondaire?: string | null;
+  instructions?: string | null;
+  situation?: string | null;
+  prescripteur?: string | null;
+  facturation?: string | null;
+  forfait?: string | null;
 }
 
 interface Chauffeur {
@@ -31,6 +38,7 @@ interface TrajetFormProps {
     adresseDepart: string;
     adresseArrivee: string;
     commentaire?: string | null;
+    instructions?: string | null;
     statut: string;
     adherentId: string;
     chauffeurId?: string | null;
@@ -55,6 +63,9 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
     adherentPrenom: '',
     adherentAdresse: '',
     adherentTelephone: '',
+    adherentTelephoneSecondaire: '',
+    adherentEmail: '',
+    adherentForfait: '',
     chauffeurId: trajetToEdit?.chauffeurId || '',
     chauffeurNom: '',
     chauffeurPrenom: '',
@@ -64,6 +75,7 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
     adresseDepart: trajetToEdit?.adresseDepart || '',
     adresseArrivee: trajetToEdit?.adresseArrivee || '',
     commentaire: trajetToEdit?.commentaire || '',
+    instructions: trajetToEdit?.instructions || '',
   });
 
   useEffect(() => {
@@ -79,6 +91,33 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
           .then(res => res.json())
           .then(data => {
             if (data) {
+              // Construire le commentaire avec toutes les informations pertinentes
+              const commentaireParts: string[] = [];
+              
+              if (data.commentaire) {
+                commentaireParts.push(`Commentaire adhérent: ${data.commentaire}`);
+              }
+              
+              if (data.instructions) {
+                commentaireParts.push(`Instructions: ${data.instructions}`);
+              }
+              
+              if (data.telephoneSecondaire) {
+                commentaireParts.push(`Téléphone secondaire: ${data.telephoneSecondaire}`);
+              }
+              
+              if (data.situation) {
+                commentaireParts.push(`Situation: ${data.situation}`);
+              }
+              
+              if (data.prescripteur) {
+                commentaireParts.push(`Prescripteur: ${data.prescripteur}`);
+              }
+              
+              if (data.facturation) {
+                commentaireParts.push(`Facturation: ${data.facturation}`);
+              }
+              
               setFormData(prev => ({
                 ...prev,
                 adherentId: data.id,
@@ -86,7 +125,12 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
                 adherentPrenom: data.prenom,
                 adherentAdresse: data.adresse,
                 adherentTelephone: data.telephone,
+                adherentTelephoneSecondaire: data.telephoneSecondaire || '',
+                adherentEmail: data.email,
+                adherentForfait: data.forfait || '',
                 adresseDepart: data.adresse,
+                commentaire: data.commentaire || prev.commentaire || trajetToEdit.commentaire || '',
+                instructions: data.instructions || prev.instructions || trajetToEdit.instructions || '',
               }));
               setSearchAdherent(`${data.prenom} ${data.nom}`);
             }
@@ -161,7 +205,29 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
     }
   };
 
-  const handleSelectAdherent = (adherent: Adherent) => {
+  const handleSelectAdherent = async (adherent: Adherent) => {
+    // Charger toutes les informations complètes de l'adhérent depuis l'API
+    try {
+      const response = await fetch(`/api/adherents/${adherent.id}`);
+      if (response.ok) {
+        const fullAdherent = await response.json();
+        
+        setFormData({
+          ...formData,
+          adherentId: fullAdherent.id,
+          adherentNom: fullAdherent.nom,
+          adherentPrenom: fullAdherent.prenom,
+          adherentAdresse: fullAdherent.adresse,
+          adherentTelephone: fullAdherent.telephone,
+          adherentTelephoneSecondaire: fullAdherent.telephoneSecondaire || '',
+          adherentEmail: fullAdherent.email,
+          adherentForfait: fullAdherent.forfait || '',
+          adresseDepart: fullAdherent.adresse, // Remplir automatiquement l'adresse de départ
+          commentaire: fullAdherent.commentaire || formData.commentaire || '', // Prendre uniquement le commentaire de l'adhérent
+          instructions: fullAdherent.instructions || formData.instructions || '', // Pré-remplir les instructions
+        });
+      } else {
+        // Si l'API échoue, utiliser les données de base
         setFormData({
           ...formData,
           adherentId: adherent.id,
@@ -169,8 +235,23 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
           adherentPrenom: adherent.prenom,
           adherentAdresse: adherent.adresse,
           adherentTelephone: adherent.telephone,
-      adresseDepart: adherent.adresse, // Remplir automatiquement l'adresse de départ
+          adresseDepart: adherent.adresse,
         });
+      }
+    } catch (error) {
+      console.error('Erreur lors du chargement des détails de l\'adhérent:', error);
+      // En cas d'erreur, utiliser les données de base
+      setFormData({
+        ...formData,
+        adherentId: adherent.id,
+        adherentNom: adherent.nom,
+        adherentPrenom: adherent.prenom,
+        adherentAdresse: adherent.adresse,
+        adherentTelephone: adherent.telephone,
+        adresseDepart: adherent.adresse,
+      });
+    }
+    
     setSearchAdherent(`${adherent.prenom} ${adherent.nom}`);
     setShowAdherentDropdown(false);
   };
@@ -228,6 +309,7 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
           adresseDepart: formData.adresseDepart,
           adresseArrivee: formData.adresseArrivee,
           commentaire: formData.commentaire || null,
+          instructions: formData.instructions || null,
           statut: trajetToEdit?.statut || 'Planifié',
           adherentId: formData.adherentId,
           chauffeurId: formData.chauffeurId || null,
@@ -328,7 +410,7 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
                   )}
                 </div>
                 {formData.adherentId && (
-                  <div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
+                  <div className="mt-3 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-3">
                     <div className="flex items-center gap-3">
                       <div className="w-10 h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold text-sm">
                         {getInitials(formData.adherentNom, formData.adherentPrenom)}
@@ -337,10 +419,39 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
                         <div className="text-sm font-medium text-gray-900">
                           {formData.adherentPrenom} {formData.adherentNom}
                         </div>
-                        <div className="text-xs text-gray-500">{formData.adherentTelephone}</div>
+                        <div className="text-xs text-gray-500">{formData.adherentAdresse}</div>
-                        <div className="text-xs text-gray-500 mt-1">{formData.adherentAdresse}</div>
                       </div>
                     </div>
+                    <div className="grid grid-cols-1 gap-2 pt-2 border-t border-gray-200">
+                      <div className="flex items-center gap-2">
+                        <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                        </svg>
+                        <span className="text-xs text-gray-600">{formData.adherentTelephone}</span>
+                      </div>
+                      {formData.adherentTelephoneSecondaire && (
+                        <div className="flex items-center gap-2">
+                          <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                          </svg>
+                          <span className="text-xs text-gray-600">Secondaire: {formData.adherentTelephoneSecondaire}</span>
+                        </div>
+                      )}
+                      <div className="flex items-center gap-2">
+                        <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                        </svg>
+                        <span className="text-xs text-gray-600">{formData.adherentEmail}</span>
+                      </div>
+                      {formData.adherentForfait && (
+                        <div className="flex items-center gap-2">
+                          <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                          <span className="text-xs font-semibold text-lgreen">Forfait: {formData.adherentForfait} €</span>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 )}
               </div>
@@ -456,15 +567,39 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
                 />
               </div>
 
+              {/* Instructions */}
+              <div>
+                <label className="block text-sm font-semibold text-gray-900 mb-2">
+                  Instructions
+                  {formData.adherentId && (
+                    <span className="ml-2 text-xs font-normal text-gray-500">
+                      (pré-rempli depuis la fiche adhérent)
+                    </span>
+                  )}
+                </label>
+                <textarea
+                  value={formData.instructions}
+                  onChange={(e) => setFormData({ ...formData, instructions: e.target.value })}
+                  placeholder="Instructions pour ce trajet... Les instructions de la fiche adhérent seront automatiquement ajoutées lors de la sélection."
+                  rows={4}
+                  className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent resize-none"
+                />
+              </div>
+
               {/* Commentaire */}
               <div>
                 <label className="block text-sm font-semibold text-gray-900 mb-2">
                   Commentaire
+                  {formData.adherentId && (
+                    <span className="ml-2 text-xs font-normal text-gray-500">
+                      (pré-rempli depuis la fiche adhérent)
+                    </span>
+                  )}
                 </label>
                 <textarea
                   value={formData.commentaire}
                   onChange={(e) => setFormData({ ...formData, commentaire: e.target.value })}
-                  placeholder="Commentaire optionnel..."
+                  placeholder="Commentaire optionnel... Le commentaire de la fiche adhérent sera automatiquement ajouté lors de la sélection."
                   rows={4}
                   className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent resize-none"
                 />
@@ -485,7 +620,7 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
             </div>
 
             {/* Informations supplémentaires */}
-            {(formData.date || formData.heure || formData.chauffeurId || formData.commentaire) && (
+            {(formData.date || formData.heure || formData.chauffeurId || formData.instructions || formData.commentaire) && (
               <div className="mt-4 bg-white rounded-lg p-4 border border-gray-200 space-y-3">
                 {formData.date && (
                   <div className="flex items-center gap-2">
@@ -520,10 +655,16 @@ export default function TrajetForm({ onClose, onSuccess, trajetToEdit }: TrajetF
                     </span>
                   </div>
                 )}
+                {formData.instructions && (
+                  <div className="pt-3 border-t border-gray-200">
+                    <div className="text-xs font-semibold text-gray-500 uppercase mb-1">Instructions</div>
+                    <p className="text-sm text-gray-700 whitespace-pre-line">{formData.instructions}</p>
+                  </div>
+                )}
                 {formData.commentaire && (
                   <div className="pt-3 border-t border-gray-200">
                     <div className="text-xs font-semibold text-gray-500 uppercase mb-1">Commentaire</div>
-                    <p className="text-sm text-gray-700">{formData.commentaire}</p>
+                    <p className="text-sm text-gray-700 whitespace-pre-line">{formData.commentaire}</p>
                   </div>
                 )}
               </div>

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">

prisma/schema.prisma

@@ -97,6 +97,7 @@ model Adherent {
   situation         String?  // Sélecteur à option
   prescripteur      String?  // Sélecteur à option
   facturation       String?  // Sélecteur à option
+  forfait           String?  // Sélecteur à option (formule avec prix par trajet)
   commentaire       String?  // Texte libre
   telephoneSecondaire String? // Téléphone secondaire
   instructions      String?  // Instructions
@@ -111,6 +112,7 @@ model Trajet {
   adresseDepart     String   // Adresse de départ
   adresseArrivee    String   // Adresse d'arrivée
   commentaire       String?  // Commentaire optionnel
+  instructions      String?  // Instructions pour le trajet
   statut            String   @default("Planifié") // Planifié, En cours, Terminé, Annulé, Validé
   archived          Boolean  @default(false) // Indique si le trajet est archivé
   adherentId        String   // Référence à l'adhérent
@@ -177,7 +179,7 @@ model MessageFile {
 
 model AdherentOption {
   id        String   @id @default(cuid())
-  type      String   // "situation", "prescripteur", "facturation"
+  type      String   // "situation", "prescripteur", "facturation", "forfait"
   value     String   // La valeur de l'option
   order     Int      @default(0) // Ordre d'affichage
   createdAt DateTime @default(now())