Pierre/MAD-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Money System

Browse Source
This commit is contained in:
Pierre
2026-01-22 19:25:25 +01:00
parent d5d0d5aaf4
commit bb5c3058b1
12 changed files with 703 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/api/adherents/[id]/route.ts
View File

@@ -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;

3
app/api/adherents/route.ts
View File

@@ -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,

6
app/api/settings/adherent-options/route.ts
View File

@@ -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 }
);
}

7
app/api/trajets/[id]/route.ts
View File

@@ -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: {

7
app/api/trajets/route.ts
View File

@@ -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: {

38
components/AdherentForm.tsx
View File

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

375
components/ConfigurationContent.tsx
View File

@@ -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') => {
setNewValue((current) => {
const value = (current[type] || '').trim();
if (!value) {
const handleAdd = useCallback(async (type: 'situation' | 'prescripteur' | 'facturation' | 'forfait') => {
const currentValue = newValue[type]?.trim() || '';
if (!currentValue) {
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;
});
}, [showNotification, fetchOptions]);
const handleEdit = (option: AdherentOption) => {
const handleEdit = useCallback((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 = ({
type,
label,
icon,
}: {
type: 'situation' | 'prescripteur' | 'facturation';
label: string;
icon: React.ReactNode;
}) => {
const typeOptions = options[type] || [];
const handleNewValueChange = useCallback((type: 'situation' | 'prescripteur' | 'facturation' | 'forfait', value: string) => {
setNewValue((prev) => ({ ...prev, [type]: value }));
}, []);
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">
{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>
);
};
const handleEditingValueChange = useCallback((value: string) => {
setEditingValue(value);
}, []);
// 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' ? (

259
components/TrajetDetailModal.tsx
View File

@@ -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="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="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-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="flex items-center justify-between">
<div>
<h2 className="text-2xl font-semibold text-gray-900">Détails du trajet</h2>
<p className="text-sm text-gray-500 mt-1">Informations complètes du trajet</p>
<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-start justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-1">
<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="space-y-6">
{/* Statut */}
<div className="flex items-center justify-between">
<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>
<div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 sm:py-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
{/* Colonne gauche - Informations */}
<div className="space-y-4 sm:space-y-6">
{/* 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 className="text-xs text-gray-500">{trajet.adherent.telephone}</div>
</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>
<div className="flex items-center gap-3 p-3 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">
<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 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
<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="text-sm font-semibold text-gray-900">
<div className="flex-1 min-w-0">
<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>
<div className="p-3 bg-orange-50 rounded-lg border border-orange-200">
<label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Chauffeur</label>
<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>
<div className="flex items-center gap-2 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">
<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-2.5 sm:p-3 bg-gray-50 rounded-lg border border-gray-200">
<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>
<div className="flex items-center gap-2 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">
<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-2.5 sm:p-3 bg-gray-50 rounded-lg border border-gray-200">
<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>
<div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
<div className="flex items-start gap-2">
<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">
<label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Adresse de départ</label>
<div className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
<div className="flex items-start gap-2 mb-3">
<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>
<div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
<div className="flex items-start gap-2">
<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">
<label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Adresse d'arrivée</label>
<div className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200">
<div className="flex items-start gap-2 mb-3">
<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>
<div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
<p className="text-sm text-gray-700 whitespace-pre-wrap">{trajet.commentaire}</p>
<label className="text-xs sm:text-sm font-medium text-gray-500 mb-2 block">Commentaire</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.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="flex justify-between gap-3">
<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 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>

157
components/TrajetForm.tsx
View File

@@ -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 mt-1">{formData.adherentAdresse}</div>
<div className="text-xs text-gray-500">{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>

28
components/TrajetMap.tsx
View File

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

BIN
prisma/dev.db
View File

Binary file not shown.

4
prisma/schema.prisma
View File

@@ -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())