Added Calendar Page
This commit is contained in:
134
app/api/trajets/[id]/route.ts
Normal file
134
app/api/trajets/[id]/route.ts
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { prisma } from '@/lib/prisma';
|
||||||
|
import { getCurrentUser } from '@/lib/auth';
|
||||||
|
|
||||||
|
// GET - Récupérer un trajet spécifique
|
||||||
|
export async function GET(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: { id: string } }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const user = await getCurrentUser();
|
||||||
|
if (!user) {
|
||||||
|
return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const trajet = await prisma.trajet.findUnique({
|
||||||
|
where: { id: params.id },
|
||||||
|
include: {
|
||||||
|
adherent: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
nom: true,
|
||||||
|
prenom: true,
|
||||||
|
telephone: true,
|
||||||
|
email: true,
|
||||||
|
adresse: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chauffeur: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
nom: true,
|
||||||
|
prenom: true,
|
||||||
|
telephone: true,
|
||||||
|
email: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!trajet) {
|
||||||
|
return NextResponse.json({ error: 'Trajet non trouvé' }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json(trajet);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la récupération du trajet:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erreur serveur' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// PUT - Mettre à jour un trajet
|
||||||
|
export async function PUT(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: { id: string } }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const user = await getCurrentUser();
|
||||||
|
if (!user) {
|
||||||
|
return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const { date, adresseDepart, adresseArrivee, commentaire, statut, adherentId, chauffeurId } = body;
|
||||||
|
|
||||||
|
const trajet = await prisma.trajet.update({
|
||||||
|
where: { id: params.id },
|
||||||
|
data: {
|
||||||
|
...(date && { date: new Date(date) }),
|
||||||
|
...(adresseDepart && { adresseDepart }),
|
||||||
|
...(adresseArrivee && { adresseArrivee }),
|
||||||
|
...(commentaire !== undefined && { commentaire }),
|
||||||
|
...(statut && { statut }),
|
||||||
|
...(adherentId && { adherentId }),
|
||||||
|
...(chauffeurId !== undefined && { chauffeurId }),
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
adherent: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
nom: true,
|
||||||
|
prenom: true,
|
||||||
|
telephone: true,
|
||||||
|
email: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chauffeur: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
nom: true,
|
||||||
|
prenom: true,
|
||||||
|
telephone: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(trajet);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la mise à jour du trajet:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erreur serveur' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DELETE - Supprimer un trajet
|
||||||
|
export async function DELETE(
|
||||||
|
request: NextRequest,
|
||||||
|
{ params }: { params: { id: string } }
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const user = await getCurrentUser();
|
||||||
|
if (!user) {
|
||||||
|
return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
await prisma.trajet.delete({
|
||||||
|
where: { id: params.id },
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({ message: 'Trajet supprimé' });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la suppression du trajet:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erreur serveur' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
129
app/api/trajets/route.ts
Normal file
129
app/api/trajets/route.ts
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { prisma } from '@/lib/prisma';
|
||||||
|
import { getCurrentUser } from '@/lib/auth';
|
||||||
|
|
||||||
|
// GET - Liste tous les trajets avec leurs relations
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const user = await getCurrentUser();
|
||||||
|
if (!user) {
|
||||||
|
return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchParams = request.nextUrl.searchParams;
|
||||||
|
const limit = searchParams.get('limit');
|
||||||
|
const startDate = searchParams.get('startDate');
|
||||||
|
const endDate = searchParams.get('endDate');
|
||||||
|
|
||||||
|
const where: any = {};
|
||||||
|
|
||||||
|
// Filtrer par date si fourni
|
||||||
|
if (startDate || endDate) {
|
||||||
|
where.date = {};
|
||||||
|
if (startDate) {
|
||||||
|
where.date.gte = new Date(startDate);
|
||||||
|
}
|
||||||
|
if (endDate) {
|
||||||
|
where.date.lte = new Date(endDate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Si limit est fourni sans filtre de date, trier par date de création (derniers créés)
|
||||||
|
// Sinon, trier par date du trajet (pour le calendrier)
|
||||||
|
const orderBy = limit && !startDate && !endDate
|
||||||
|
? { createdAt: 'desc' as const }
|
||||||
|
: { date: 'asc' as const };
|
||||||
|
|
||||||
|
const trajets = await prisma.trajet.findMany({
|
||||||
|
where,
|
||||||
|
include: {
|
||||||
|
adherent: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
nom: true,
|
||||||
|
prenom: true,
|
||||||
|
telephone: true,
|
||||||
|
email: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chauffeur: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
nom: true,
|
||||||
|
prenom: true,
|
||||||
|
telephone: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
orderBy,
|
||||||
|
take: limit ? parseInt(limit) : undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(trajets);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la récupération des trajets:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erreur serveur' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// POST - Créer un nouveau trajet
|
||||||
|
export async function POST(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const user = await getCurrentUser();
|
||||||
|
if (!user) {
|
||||||
|
return NextResponse.json({ error: 'Non autorisé' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const { date, adresseDepart, adresseArrivee, commentaire, statut, adherentId, chauffeurId } = body;
|
||||||
|
|
||||||
|
if (!date || !adresseDepart || !adresseArrivee || !adherentId) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Les champs date, adresse de départ, adresse d\'arrivée et adhérent sont requis' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const trajet = await prisma.trajet.create({
|
||||||
|
data: {
|
||||||
|
date: new Date(date),
|
||||||
|
adresseDepart,
|
||||||
|
adresseArrivee,
|
||||||
|
commentaire: commentaire || null,
|
||||||
|
statut: statut || 'Planifié',
|
||||||
|
adherentId,
|
||||||
|
chauffeurId: chauffeurId || null,
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
adherent: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
nom: true,
|
||||||
|
prenom: true,
|
||||||
|
telephone: true,
|
||||||
|
email: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chauffeur: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
nom: true,
|
||||||
|
prenom: true,
|
||||||
|
telephone: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(trajet, { status: 201 });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la création du trajet:', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Erreur serveur' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
27
app/dashboard/calendrier/page.tsx
Normal file
27
app/dashboard/calendrier/page.tsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import { redirect } from 'next/navigation';
|
||||||
|
import { getCurrentUser } from '@/lib/auth';
|
||||||
|
import DashboardLayout from '@/components/DashboardLayout';
|
||||||
|
import CalendrierPageContent from '@/components/CalendrierPageContent';
|
||||||
|
|
||||||
|
export default async function CalendrierPage() {
|
||||||
|
const user = await getCurrentUser();
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
redirect('/login');
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout user={user}>
|
||||||
|
<div className="p-8">
|
||||||
|
<h1 className="text-3xl font-semibold text-cblack mb-2">
|
||||||
|
Calendrier
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-cgray mb-8">
|
||||||
|
Gestion des trajets et planning des chauffeurs
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<CalendrierPageContent />
|
||||||
|
</div>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -2,6 +2,59 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@import 'leaflet/dist/leaflet.css';
|
||||||
|
|
||||||
|
/* Styles personnalisés pour Leaflet */
|
||||||
|
.leaflet-container {
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-content-wrapper {
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-tip {
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-zoom {
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-zoom a {
|
||||||
|
background-color: white !important;
|
||||||
|
color: #374151 !important;
|
||||||
|
border: none !important;
|
||||||
|
width: 36px !important;
|
||||||
|
height: 36px !important;
|
||||||
|
line-height: 36px !important;
|
||||||
|
font-size: 18px !important;
|
||||||
|
transition: all 0.2s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-zoom a:hover {
|
||||||
|
background-color: #f3f4f6 !important;
|
||||||
|
color: #6B46C1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-zoom-in {
|
||||||
|
border-bottom: 1px solid #e5e7eb !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-marker-depart,
|
||||||
|
.custom-marker-arrivee {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-popup .leaflet-popup-content {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: #ffffff;
|
--background: #ffffff;
|
||||||
--foreground: #171717;
|
--foreground: #171717;
|
||||||
|
|||||||
154
components/AddressAutocomplete.tsx
Normal file
154
components/AddressAutocomplete.tsx
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
interface AddressSuggestion {
|
||||||
|
display_name: string;
|
||||||
|
lat: string;
|
||||||
|
lon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AddressAutocompleteProps {
|
||||||
|
value: string;
|
||||||
|
onChange: (address: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
required?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AddressAutocomplete({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder = 'Rechercher une adresse...',
|
||||||
|
required = false,
|
||||||
|
}: AddressAutocompleteProps) {
|
||||||
|
const [suggestions, setSuggestions] = useState<AddressSuggestion[]>([]);
|
||||||
|
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||||
|
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
|
||||||
|
setShowSuggestions(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
if (timeoutRef.current) {
|
||||||
|
clearTimeout(timeoutRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const searchAddresses = async (query: string) => {
|
||||||
|
if (query.length < 3) {
|
||||||
|
setSuggestions([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
// Annuler la requête précédente si elle existe
|
||||||
|
if (timeoutRef.current) {
|
||||||
|
clearTimeout(timeoutRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Attendre un peu avant de faire la requête (debounce)
|
||||||
|
timeoutRef.current = setTimeout(async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5&addressdetails=1&countrycodes=fr`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'MAD Platform',
|
||||||
|
'Accept-Language': 'fr-FR,fr;q=0.9',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setSuggestions(data);
|
||||||
|
setShowSuggestions(true);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la recherche d\'adresses:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur:', error);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const newValue = e.target.value;
|
||||||
|
onChange(newValue);
|
||||||
|
searchAddresses(newValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectSuggestion = (suggestion: AddressSuggestion) => {
|
||||||
|
onChange(suggestion.display_name);
|
||||||
|
setShowSuggestions(false);
|
||||||
|
setSuggestions([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" ref={wrapperRef}>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={value}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onFocus={() => {
|
||||||
|
if (suggestions.length > 0) {
|
||||||
|
setShowSuggestions(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder={placeholder}
|
||||||
|
required={required}
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
{loading && (
|
||||||
|
<div className="absolute right-3 top-1/2 transform -translate-y-1/2">
|
||||||
|
<svg className="animate-spin h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showSuggestions && suggestions.length > 0 && (
|
||||||
|
<div className="absolute z-20 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||||
|
{suggestions.map((suggestion, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleSelectSuggestion(suggestion)}
|
||||||
|
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-start gap-3 border-b border-gray-100 last:border-b-0 transition-colors"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="text-sm font-medium text-gray-900 truncate">
|
||||||
|
{suggestion.display_name.split(',').slice(0, 2).join(', ')}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 mt-0.5 truncate">
|
||||||
|
{suggestion.display_name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
components/CalendrierPageContent.tsx
Normal file
27
components/CalendrierPageContent.tsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import CalendrierTrajets from './CalendrierTrajets';
|
||||||
|
import ListeTrajets from './ListeTrajets';
|
||||||
|
|
||||||
|
export default function CalendrierPageContent() {
|
||||||
|
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||||||
|
|
||||||
|
const handleTrajetCreated = () => {
|
||||||
|
setRefreshTrigger((prev) => prev + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{/* Calendrier - Prend 2 colonnes sur grand écran */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<CalendrierTrajets refreshTrigger={refreshTrigger} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Liste des derniers trajets - Prend 1 colonne sur grand écran */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<ListeTrajets onTrajetCreated={handleTrajetCreated} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
313
components/CalendrierTrajets.tsx
Normal file
313
components/CalendrierTrajets.tsx
Normal file
@@ -0,0 +1,313 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
interface Trajet {
|
||||||
|
id: string;
|
||||||
|
date: string;
|
||||||
|
adresseDepart: string;
|
||||||
|
adresseArrivee: string;
|
||||||
|
commentaire?: string | null;
|
||||||
|
statut: string;
|
||||||
|
adherent: {
|
||||||
|
id: string;
|
||||||
|
nom: string;
|
||||||
|
prenom: string;
|
||||||
|
telephone: string;
|
||||||
|
email: string;
|
||||||
|
};
|
||||||
|
chauffeur?: {
|
||||||
|
id: string;
|
||||||
|
nom: string;
|
||||||
|
prenom: string;
|
||||||
|
telephone: string;
|
||||||
|
} | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CalendrierTrajetsProps {
|
||||||
|
refreshTrigger?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsProps) {
|
||||||
|
const [trajets, setTrajets] = useState<Trajet[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [currentDate, setCurrentDate] = useState(new Date());
|
||||||
|
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
||||||
|
const [selectedTrajets, setSelectedTrajets] = useState<Trajet[]>([]);
|
||||||
|
|
||||||
|
const month = currentDate.getMonth();
|
||||||
|
const year = currentDate.getFullYear();
|
||||||
|
|
||||||
|
const firstDayOfMonth = new Date(year, month, 1);
|
||||||
|
const lastDayOfMonth = new Date(year, month + 1, 0);
|
||||||
|
const daysInMonth = lastDayOfMonth.getDate();
|
||||||
|
const startingDayOfWeek = firstDayOfMonth.getDay();
|
||||||
|
|
||||||
|
// Ajuster pour que lundi soit le premier jour (0 = lundi)
|
||||||
|
const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTrajets();
|
||||||
|
}, [currentDate, refreshTrigger]);
|
||||||
|
|
||||||
|
const fetchTrajets = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const startDate = new Date(year, month, 1).toISOString();
|
||||||
|
const endDate = new Date(year, month + 1, 0, 23, 59, 59).toISOString();
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/trajets?startDate=${startDate}&endDate=${endDate}`
|
||||||
|
);
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setTrajets(data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du chargement des trajets:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTrajetsForDate = (date: Date): Trajet[] => {
|
||||||
|
const dateStr = date.toISOString().split('T')[0];
|
||||||
|
return trajets.filter((trajet) => {
|
||||||
|
const trajetDate = new Date(trajet.date).toISOString().split('T')[0];
|
||||||
|
return trajetDate === dateStr;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDateClick = (date: Date) => {
|
||||||
|
setSelectedDate(date);
|
||||||
|
const trajetsDuJour = getTrajetsForDate(date);
|
||||||
|
setSelectedTrajets(trajetsDuJour);
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToPreviousMonth = () => {
|
||||||
|
setCurrentDate(new Date(year, month - 1, 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToNextMonth = () => {
|
||||||
|
setCurrentDate(new Date(year, month + 1, 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToToday = () => {
|
||||||
|
setCurrentDate(new Date());
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDate = (date: Date) => {
|
||||||
|
return date.toLocaleDateString('fr-FR', {
|
||||||
|
weekday: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTime = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
|
||||||
|
const calendarDays = [];
|
||||||
|
|
||||||
|
// Ajouter les jours vides du début
|
||||||
|
for (let i = 0; i < adjustedStartingDay; i++) {
|
||||||
|
calendarDays.push(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ajouter les jours du mois
|
||||||
|
for (let day = 1; day <= daysInMonth; day++) {
|
||||||
|
calendarDays.push(new Date(year, month, day));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm p-6">
|
||||||
|
{/* En-tête du calendrier */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
|
{currentDate.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={goToPreviousMonth}
|
||||||
|
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||||
|
title="Mois précédent"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={goToToday}
|
||||||
|
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
Aujourd'hui
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={goToNextMonth}
|
||||||
|
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||||
|
title="Mois suivant"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center py-8 text-gray-500">Chargement...</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* Grille du calendrier */}
|
||||||
|
<div className="grid grid-cols-7 gap-2 mb-6">
|
||||||
|
{/* En-têtes des jours */}
|
||||||
|
{days.map((day) => (
|
||||||
|
<div key={day} className="text-center text-sm font-semibold text-gray-600 py-2">
|
||||||
|
{day}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Jours du calendrier */}
|
||||||
|
{calendarDays.map((date, index) => {
|
||||||
|
if (!date) {
|
||||||
|
return <div key={`empty-${index}`} className="h-24" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const trajetsDuJour = getTrajetsForDate(date);
|
||||||
|
const isToday =
|
||||||
|
date.getDate() === new Date().getDate() &&
|
||||||
|
date.getMonth() === new Date().getMonth() &&
|
||||||
|
date.getFullYear() === new Date().getFullYear();
|
||||||
|
const isSelected =
|
||||||
|
selectedDate &&
|
||||||
|
date.getDate() === selectedDate.getDate() &&
|
||||||
|
date.getMonth() === selectedDate.getMonth() &&
|
||||||
|
date.getFullYear() === selectedDate.getFullYear();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={date.toISOString()}
|
||||||
|
onClick={() => handleDateClick(date)}
|
||||||
|
className={`h-24 p-2 rounded-lg border-2 transition-all flex flex-col ${
|
||||||
|
isSelected
|
||||||
|
? 'border-lblue bg-lblue/10'
|
||||||
|
: isToday
|
||||||
|
? 'border-lblue bg-lblue/5'
|
||||||
|
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="text-sm font-medium text-gray-900 mb-1">
|
||||||
|
{date.getDate()}
|
||||||
|
</div>
|
||||||
|
{trajetsDuJour.length > 0 && (
|
||||||
|
<div className="space-y-1 flex-1 overflow-hidden">
|
||||||
|
{trajetsDuJour.slice(0, 2).map((trajet) => (
|
||||||
|
<div
|
||||||
|
key={trajet.id}
|
||||||
|
className="text-xs px-1.5 py-0.5 rounded bg-lblue text-white truncate"
|
||||||
|
title={`${trajet.adherent.prenom} ${trajet.adherent.nom} - ${trajet.chauffeur ? `${trajet.chauffeur.prenom} ${trajet.chauffeur.nom}` : 'Sans chauffeur'}`}
|
||||||
|
>
|
||||||
|
{trajet.chauffeur
|
||||||
|
? `${trajet.chauffeur.prenom.charAt(0)}. ${trajet.chauffeur.nom.charAt(0)}`
|
||||||
|
: 'Sans ch.'}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{trajetsDuJour.length > 2 && (
|
||||||
|
<div className="text-xs text-gray-500 font-medium">
|
||||||
|
+{trajetsDuJour.length - 2}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Détails des trajets du jour sélectionné */}
|
||||||
|
{selectedDate && selectedTrajets.length > 0 && (
|
||||||
|
<div className="mt-6 pt-6 border-t border-gray-200">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||||
|
Trajets du {formatDate(selectedDate)}
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{selectedTrajets.map((trajet) => (
|
||||||
|
<div
|
||||||
|
key={trajet.id}
|
||||||
|
className="p-4 bg-gray-50 rounded-lg border border-gray-200"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className="text-sm font-semibold text-gray-900">
|
||||||
|
{trajet.adherent.prenom} {trajet.adherent.nom}
|
||||||
|
</span>
|
||||||
|
<span className="px-2 py-0.5 text-xs font-medium rounded bg-lblue/10 text-lblue">
|
||||||
|
{formatTime(trajet.date)}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`px-2 py-0.5 text-xs font-medium rounded ${
|
||||||
|
trajet.statut === 'Terminé'
|
||||||
|
? 'bg-green-100 text-green-700'
|
||||||
|
: trajet.statut === 'En cours'
|
||||||
|
? 'bg-blue-100 text-blue-700'
|
||||||
|
: trajet.statut === 'Annulé'
|
||||||
|
? 'bg-red-100 text-red-700'
|
||||||
|
: 'bg-gray-100 text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{trajet.statut}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600 mb-1">
|
||||||
|
<span className="font-medium">Départ:</span> {trajet.adresseDepart}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600 mb-2">
|
||||||
|
<span className="font-medium">Arrivée:</span> {trajet.adresseArrivee}
|
||||||
|
</div>
|
||||||
|
{trajet.chauffeur ? (
|
||||||
|
<div className="flex items-center gap-2 mt-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="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm font-medium text-gray-900">
|
||||||
|
Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<svg className="w-4 h-4 text-orange-400" 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 text-orange-600 font-medium">
|
||||||
|
Aucun chauffeur assigné
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{trajet.commentaire && (
|
||||||
|
<div className="mt-2 text-sm text-gray-500 italic">
|
||||||
|
{trajet.commentaire}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedDate && selectedTrajets.length === 0 && (
|
||||||
|
<div className="mt-6 pt-6 border-t border-gray-200 text-center text-gray-500">
|
||||||
|
Aucun trajet prévu pour le {formatDate(selectedDate)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
343
components/ListeTrajets.tsx
Normal file
343
components/ListeTrajets.tsx
Normal file
@@ -0,0 +1,343 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import TrajetForm from './TrajetForm';
|
||||||
|
|
||||||
|
interface Trajet {
|
||||||
|
id: string;
|
||||||
|
date: string;
|
||||||
|
adresseDepart: string;
|
||||||
|
adresseArrivee: string;
|
||||||
|
commentaire?: string | null;
|
||||||
|
statut: string;
|
||||||
|
adherent: {
|
||||||
|
id: string;
|
||||||
|
nom: string;
|
||||||
|
prenom: string;
|
||||||
|
telephone: string;
|
||||||
|
email: string;
|
||||||
|
};
|
||||||
|
chauffeur?: {
|
||||||
|
id: string;
|
||||||
|
nom: string;
|
||||||
|
prenom: string;
|
||||||
|
telephone: string;
|
||||||
|
} | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ListeTrajetsProps {
|
||||||
|
onTrajetCreated?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
|
||||||
|
const [trajets, setTrajets] = useState<Trajet[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [showFilters, setShowFilters] = useState(false);
|
||||||
|
const [filterStatut, setFilterStatut] = useState<string>('');
|
||||||
|
const [showTrajetForm, setShowTrajetForm] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTrajets();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchTrajets = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/trajets?limit=10');
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
// L'API retourne déjà les trajets triés par date de création (plus récents en premier)
|
||||||
|
setTrajets(data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du chargement des trajets:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredTrajets = trajets.filter((trajet) => {
|
||||||
|
const matchesSearch =
|
||||||
|
!search ||
|
||||||
|
trajet.adherent.nom.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
trajet.adherent.prenom.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
trajet.adresseDepart.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
trajet.adresseArrivee.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
(trajet.chauffeur &&
|
||||||
|
`${trajet.chauffeur.prenom} ${trajet.chauffeur.nom}`
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(search.toLowerCase()));
|
||||||
|
|
||||||
|
const matchesStatut = !filterStatut || trajet.statut === filterStatut;
|
||||||
|
|
||||||
|
return matchesSearch && matchesStatut;
|
||||||
|
});
|
||||||
|
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('fr-FR', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTime = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const getInitials = (nom: string, prenom: string) => {
|
||||||
|
return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm">
|
||||||
|
{/* Bloc d'actions */}
|
||||||
|
<div className="p-6 border-b border-gray-200">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{/* Barre de recherche */}
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Rechercher un trajet..."
|
||||||
|
value={search}
|
||||||
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
|
className="block w-full pl-10 pr-3 py-2.5 text-sm border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowTrajetForm(true)}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-lgreen text-white text-sm font-medium rounded-lg hover:bg-dgreen transition-colors"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
Nouveau trajet
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
|
className={`px-4 py-2.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-2 ${
|
||||||
|
showFilters || filterStatut
|
||||||
|
? 'bg-lblue text-white hover:bg-dblue'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
Filtrer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filtres */}
|
||||||
|
{showFilters && (
|
||||||
|
<div className="pt-3 border-t border-gray-200">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setFilterStatut('')}
|
||||||
|
className={`px-3 py-2 text-xs font-medium rounded ${
|
||||||
|
!filterStatut
|
||||||
|
? 'bg-lblue text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Tous
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setFilterStatut('Planifié')}
|
||||||
|
className={`px-3 py-2 text-xs font-medium rounded ${
|
||||||
|
filterStatut === 'Planifié'
|
||||||
|
? 'bg-lblue text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Planifié
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setFilterStatut('En cours')}
|
||||||
|
className={`px-3 py-2 text-xs font-medium rounded ${
|
||||||
|
filterStatut === 'En cours'
|
||||||
|
? 'bg-lblue text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
En cours
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setFilterStatut('Terminé')}
|
||||||
|
className={`px-3 py-2 text-xs font-medium rounded ${
|
||||||
|
filterStatut === 'Terminé'
|
||||||
|
? 'bg-lblue text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Terminé
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setFilterStatut('Annulé')}
|
||||||
|
className={`px-3 py-2 text-xs font-medium rounded ${
|
||||||
|
filterStatut === 'Annulé'
|
||||||
|
? 'bg-lblue text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Annulé
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Liste des trajets */}
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
|
Derniers trajets créés
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
onClick={fetchTrajets}
|
||||||
|
className="text-sm text-lblue hover:text-dblue font-medium 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
Actualiser
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center py-8 text-gray-500">Chargement...</div>
|
||||||
|
) : filteredTrajets.length === 0 ? (
|
||||||
|
<div className="text-center py-8 text-gray-500">
|
||||||
|
{trajets.length === 0
|
||||||
|
? 'Aucun trajet créé récemment'
|
||||||
|
: 'Aucun trajet ne correspond à votre recherche'}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{filteredTrajets.map((trajet) => (
|
||||||
|
<div
|
||||||
|
key={trajet.id}
|
||||||
|
className="p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
{/* Avatar adhérent */}
|
||||||
|
<div className="w-12 h-12 rounded-full bg-lgreen flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
|
||||||
|
{getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Informations principales */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-start justify-between gap-4 mb-2">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900">
|
||||||
|
{trajet.adherent.prenom} {trajet.adherent.nom}
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center gap-3 mt-1">
|
||||||
|
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||||
|
<svg className="w-3 h-3" 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>
|
||||||
|
{formatDate(trajet.date)}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||||
|
<svg className="w-3 h-3" 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>
|
||||||
|
{formatTime(trajet.date)}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`px-2 py-0.5 text-xs font-medium rounded ${
|
||||||
|
trajet.statut === 'Terminé'
|
||||||
|
? 'bg-green-100 text-green-700'
|
||||||
|
: trajet.statut === 'En cours'
|
||||||
|
? 'bg-blue-100 text-blue-700'
|
||||||
|
: trajet.statut === 'Annulé'
|
||||||
|
? 'bg-red-100 text-red-700'
|
||||||
|
: 'bg-gray-100 text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{trajet.statut}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Adresses */}
|
||||||
|
<div className="space-y-1 mb-2">
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
<span className="font-medium">Départ:</span>{' '}
|
||||||
|
<span className="text-gray-900">{trajet.adresseDepart}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
<span className="font-medium">Arrivée:</span>{' '}
|
||||||
|
<span className="text-gray-900">{trajet.adresseArrivee}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chauffeur */}
|
||||||
|
<div className="flex items-center gap-4 mt-3">
|
||||||
|
{trajet.chauffeur ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-semibold">
|
||||||
|
{getInitials(trajet.chauffeur.nom, trajet.chauffeur.prenom)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-gray-500">Chauffeur</div>
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{trajet.chauffeur.prenom} {trajet.chauffeur.nom}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<svg className="w-5 h-5 text-orange-400" 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 text-orange-600 font-medium">
|
||||||
|
Aucun chauffeur assigné
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Commentaire */}
|
||||||
|
{trajet.commentaire && (
|
||||||
|
<div className="mt-2 pt-2 border-t border-gray-200">
|
||||||
|
<p className="text-xs text-gray-500 italic">{trajet.commentaire}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal formulaire trajet */}
|
||||||
|
{showTrajetForm && (
|
||||||
|
<TrajetForm
|
||||||
|
onClose={() => setShowTrajetForm(false)}
|
||||||
|
onSuccess={() => {
|
||||||
|
fetchTrajets();
|
||||||
|
if (onTrajetCreated) {
|
||||||
|
onTrajetCreated();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
501
components/TrajetForm.tsx
Normal file
501
components/TrajetForm.tsx
Normal file
@@ -0,0 +1,501 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
import TrajetMap from './TrajetMap';
|
||||||
|
import AddressAutocomplete from './AddressAutocomplete';
|
||||||
|
|
||||||
|
interface Adherent {
|
||||||
|
id: string;
|
||||||
|
nom: string;
|
||||||
|
prenom: string;
|
||||||
|
adresse: string;
|
||||||
|
telephone: string;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Chauffeur {
|
||||||
|
id: string;
|
||||||
|
nom: string;
|
||||||
|
prenom: string;
|
||||||
|
telephone: string;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TrajetFormProps {
|
||||||
|
onClose: () => void;
|
||||||
|
onSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TrajetForm({ onClose, onSuccess }: TrajetFormProps) {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [adherents, setAdherents] = useState<Adherent[]>([]);
|
||||||
|
const [chauffeurs, setChauffeurs] = useState<Chauffeur[]>([]);
|
||||||
|
const [searchAdherent, setSearchAdherent] = useState('');
|
||||||
|
const [searchChauffeur, setSearchChauffeur] = useState('');
|
||||||
|
const [showAdherentDropdown, setShowAdherentDropdown] = useState(false);
|
||||||
|
const [showChauffeurDropdown, setShowChauffeurDropdown] = useState(false);
|
||||||
|
const adherentDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
const chauffeurDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
adherentId: '',
|
||||||
|
adherentNom: '',
|
||||||
|
adherentPrenom: '',
|
||||||
|
adherentAdresse: '',
|
||||||
|
adherentTelephone: '',
|
||||||
|
chauffeurId: '',
|
||||||
|
chauffeurNom: '',
|
||||||
|
chauffeurPrenom: '',
|
||||||
|
chauffeurTelephone: '',
|
||||||
|
date: '',
|
||||||
|
heure: '',
|
||||||
|
adresseDepart: '',
|
||||||
|
adresseArrivee: '',
|
||||||
|
commentaire: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAdherents();
|
||||||
|
fetchChauffeurs();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Fermer les dropdowns quand on clique en dehors
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (
|
||||||
|
adherentDropdownRef.current &&
|
||||||
|
!adherentDropdownRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setShowAdherentDropdown(false);
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
chauffeurDropdownRef.current &&
|
||||||
|
!chauffeurDropdownRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setShowChauffeurDropdown(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchAdherents = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/adherents');
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setAdherents(data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du chargement des adhérents:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchChauffeurs = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/chauffeurs');
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setChauffeurs(data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du chargement des chauffeurs:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectAdherent = (adherent: Adherent) => {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
adherentId: adherent.id,
|
||||||
|
adherentNom: adherent.nom,
|
||||||
|
adherentPrenom: adherent.prenom,
|
||||||
|
adherentAdresse: adherent.adresse,
|
||||||
|
adherentTelephone: adherent.telephone,
|
||||||
|
adresseDepart: adherent.adresse, // Remplir automatiquement l'adresse de départ
|
||||||
|
});
|
||||||
|
setSearchAdherent(`${adherent.prenom} ${adherent.nom}`);
|
||||||
|
setShowAdherentDropdown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectChauffeur = (chauffeur: Chauffeur) => {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
chauffeurId: chauffeur.id,
|
||||||
|
chauffeurNom: chauffeur.nom,
|
||||||
|
chauffeurPrenom: chauffeur.prenom,
|
||||||
|
chauffeurTelephone: chauffeur.telephone,
|
||||||
|
});
|
||||||
|
setSearchChauffeur(`${chauffeur.prenom} ${chauffeur.nom}`);
|
||||||
|
setShowChauffeurDropdown(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredAdherents = adherents.filter(
|
||||||
|
(a) =>
|
||||||
|
!searchAdherent ||
|
||||||
|
`${a.prenom} ${a.nom}`.toLowerCase().includes(searchAdherent.toLowerCase()) ||
|
||||||
|
a.email.toLowerCase().includes(searchAdherent.toLowerCase()) ||
|
||||||
|
a.telephone.includes(searchAdherent)
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredChauffeurs = chauffeurs.filter(
|
||||||
|
(c) =>
|
||||||
|
!searchChauffeur ||
|
||||||
|
`${c.prenom} ${c.nom}`.toLowerCase().includes(searchChauffeur.toLowerCase()) ||
|
||||||
|
c.email.toLowerCase().includes(searchChauffeur.toLowerCase()) ||
|
||||||
|
c.telephone.includes(searchChauffeur)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Combiner date et heure
|
||||||
|
const dateTime = formData.date && formData.heure
|
||||||
|
? new Date(`${formData.date}T${formData.heure}`).toISOString()
|
||||||
|
: formData.date
|
||||||
|
? new Date(`${formData.date}T09:00`).toISOString()
|
||||||
|
: new Date().toISOString();
|
||||||
|
|
||||||
|
const response = await fetch('/api/trajets', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
date: dateTime,
|
||||||
|
adresseDepart: formData.adresseDepart,
|
||||||
|
adresseArrivee: formData.adresseArrivee,
|
||||||
|
commentaire: formData.commentaire || null,
|
||||||
|
statut: 'Planifié',
|
||||||
|
adherentId: formData.adherentId,
|
||||||
|
chauffeurId: formData.chauffeurId || null,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
onSuccess();
|
||||||
|
onClose();
|
||||||
|
} else {
|
||||||
|
const error = await response.json();
|
||||||
|
alert(`Erreur: ${error.error || 'Erreur lors de la création du trajet'}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la création du trajet:', error);
|
||||||
|
alert('Erreur lors de la création du trajet');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getInitials = (nom: string, prenom: string) => {
|
||||||
|
return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
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-7xl w-full max-h-[95vh] 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">Nouveau trajet</h2>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">Créez un nouveau trajet pour un adhérent</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg"
|
||||||
|
>
|
||||||
|
<svg className="w-6 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<form id="trajet-form" onSubmit={handleSubmit} className="flex-1 overflow-hidden flex">
|
||||||
|
{/* Colonne gauche - Formulaire */}
|
||||||
|
<div className="flex-1 overflow-y-auto px-8 py-8 border-r border-gray-200">
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Sélection adhérent */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-900 mb-2">
|
||||||
|
Adhérent <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<div className="relative" ref={adherentDropdownRef}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Rechercher un adhérent..."
|
||||||
|
value={searchAdherent}
|
||||||
|
onChange={(e) => {
|
||||||
|
setSearchAdherent(e.target.value);
|
||||||
|
setShowAdherentDropdown(true);
|
||||||
|
}}
|
||||||
|
onFocus={() => setShowAdherentDropdown(true)}
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
{showAdherentDropdown && filteredAdherents.length > 0 && (
|
||||||
|
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||||
|
{filteredAdherents.map((adherent) => (
|
||||||
|
<button
|
||||||
|
key={adherent.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleSelectAdherent(adherent)}
|
||||||
|
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100 last:border-b-0"
|
||||||
|
>
|
||||||
|
<div className="w-10 h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold text-sm">
|
||||||
|
{getInitials(adherent.nom, adherent.prenom)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{adherent.prenom} {adherent.nom}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500">{adherent.email}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{formData.adherentId && (
|
||||||
|
<div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||||
|
<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)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sélection chauffeur */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-900 mb-2">
|
||||||
|
Chauffeur
|
||||||
|
</label>
|
||||||
|
<div className="relative" ref={chauffeurDropdownRef}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Rechercher un chauffeur..."
|
||||||
|
value={searchChauffeur}
|
||||||
|
onChange={(e) => {
|
||||||
|
setSearchChauffeur(e.target.value);
|
||||||
|
setShowChauffeurDropdown(true);
|
||||||
|
}}
|
||||||
|
onFocus={() => setShowChauffeurDropdown(true)}
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
{showChauffeurDropdown && filteredChauffeurs.length > 0 && (
|
||||||
|
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||||
|
{filteredChauffeurs.map((chauffeur) => (
|
||||||
|
<button
|
||||||
|
key={chauffeur.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleSelectChauffeur(chauffeur)}
|
||||||
|
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100 last:border-b-0"
|
||||||
|
>
|
||||||
|
<div className="w-10 h-10 rounded-full bg-lblue flex items-center justify-center text-white font-semibold text-sm">
|
||||||
|
{getInitials(chauffeur.nom, chauffeur.prenom)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{chauffeur.prenom} {chauffeur.nom}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500">{chauffeur.email}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{formData.chauffeurId && (
|
||||||
|
<div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-lblue flex items-center justify-center text-white font-semibold text-sm">
|
||||||
|
{getInitials(formData.chauffeurNom, formData.chauffeurPrenom)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{formData.chauffeurPrenom} {formData.chauffeurNom}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500">{formData.chauffeurTelephone}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date et heure */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-900 mb-2">
|
||||||
|
Date <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
required
|
||||||
|
value={formData.date}
|
||||||
|
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
||||||
|
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-900 mb-2">
|
||||||
|
Heure <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
required
|
||||||
|
value={formData.heure}
|
||||||
|
onChange={(e) => setFormData({ ...formData, heure: e.target.value })}
|
||||||
|
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Adresse de départ */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-900 mb-2">
|
||||||
|
Adresse de départ <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<AddressAutocomplete
|
||||||
|
value={formData.adresseDepart}
|
||||||
|
onChange={(address) => setFormData({ ...formData, adresseDepart: address })}
|
||||||
|
placeholder="Rechercher une adresse de départ..."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Adresse d'arrivée */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-900 mb-2">
|
||||||
|
Adresse d'arrivée <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<AddressAutocomplete
|
||||||
|
value={formData.adresseArrivee}
|
||||||
|
onChange={(address) => setFormData({ ...formData, adresseArrivee: address })}
|
||||||
|
placeholder="Rechercher une adresse d'arrivée..."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Commentaire */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-gray-900 mb-2">
|
||||||
|
Commentaire
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.commentaire}
|
||||||
|
onChange={(e) => setFormData({ ...formData, commentaire: e.target.value })}
|
||||||
|
placeholder="Commentaire optionnel..."
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Colonne droite - Carte */}
|
||||||
|
<div className="w-[700px] bg-gradient-to-br from-gray-50 to-gray-100 border-l border-gray-200 p-6 flex flex-col">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-6">Aperçu du trajet</h3>
|
||||||
|
|
||||||
|
<div className="flex-1 min-h-[600px] rounded-xl overflow-hidden shadow-lg">
|
||||||
|
<TrajetMap
|
||||||
|
adresseDepart={formData.adresseDepart}
|
||||||
|
adresseArrivee={formData.adresseArrivee}
|
||||||
|
adherentNom={formData.adherentId ? `${formData.adherentPrenom} ${formData.adherentNom}` : undefined}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Informations supplémentaires */}
|
||||||
|
{(formData.date || formData.heure || formData.chauffeurId || 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">
|
||||||
|
<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="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 text-gray-900">
|
||||||
|
{new Date(formData.date).toLocaleDateString('fr-FR', {
|
||||||
|
weekday: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{formData.heure && (
|
||||||
|
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm text-gray-900">{formData.heure}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{formData.chauffeurId && (
|
||||||
|
<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="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm text-gray-900">
|
||||||
|
{formData.chauffeurPrenom} {formData.chauffeurNom}
|
||||||
|
</span>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
|
||||||
|
<div className="flex justify-end gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
form="trajet-form"
|
||||||
|
disabled={loading || !formData.adherentId || !formData.date || !formData.adresseDepart || !formData.adresseArrivee}
|
||||||
|
className="px-6 py-2 bg-lgreen text-white text-sm font-medium rounded-lg hover:bg-dgreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<>
|
||||||
|
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
Création...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Créer le trajet'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
429
components/TrajetMap.tsx
Normal file
429
components/TrajetMap.tsx
Normal file
@@ -0,0 +1,429 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState, useRef } from 'react';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
import L from 'leaflet';
|
||||||
|
|
||||||
|
// Fix pour les icônes Leaflet avec Next.js
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
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',
|
||||||
|
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
|
||||||
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Import dynamique pour éviter les problèmes SSR avec Leaflet
|
||||||
|
const MapContainer = dynamic(() => import('react-leaflet').then((mod) => mod.MapContainer), { ssr: false });
|
||||||
|
const TileLayer = dynamic(() => import('react-leaflet').then((mod) => mod.TileLayer), { ssr: false });
|
||||||
|
const Marker = dynamic(() => import('react-leaflet').then((mod) => mod.Marker), { ssr: false });
|
||||||
|
const Popup = dynamic(() => import('react-leaflet').then((mod) => mod.Popup), { ssr: false });
|
||||||
|
const Polyline = dynamic(() => import('react-leaflet').then((mod) => mod.Polyline), { ssr: false });
|
||||||
|
|
||||||
|
interface TrajetMapProps {
|
||||||
|
adresseDepart: string;
|
||||||
|
adresseArrivee: string;
|
||||||
|
adherentNom?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Coordinates {
|
||||||
|
lat: number;
|
||||||
|
lng: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RouteInfo {
|
||||||
|
distance: number; // en mètres
|
||||||
|
duration: number; // en secondes
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TrajetMap({ adresseDepart, adresseArrivee, adherentNom }: TrajetMapProps) {
|
||||||
|
const [departCoords, setDepartCoords] = useState<Coordinates | null>(null);
|
||||||
|
const [arriveeCoords, setArriveeCoords] = useState<Coordinates | null>(null);
|
||||||
|
const [routeInfo, setRouteInfo] = useState<RouteInfo | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
// Cache simple pour éviter de regéocoder les mêmes adresses
|
||||||
|
const geocodeCacheRef = useRef<Map<string, Coordinates>>(new Map());
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Réinitialiser les coordonnées quand les adresses changent
|
||||||
|
setDepartCoords(null);
|
||||||
|
setArriveeCoords(null);
|
||||||
|
setRouteInfo(null);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
if (adresseDepart && adresseArrivee && adresseDepart.length >= 5 && adresseArrivee.length >= 5) {
|
||||||
|
// Délai réduit pour une réponse plus rapide
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
|
geocodeAddresses();
|
||||||
|
}, 400);
|
||||||
|
|
||||||
|
return () => clearTimeout(timeoutId);
|
||||||
|
}
|
||||||
|
}, [adresseDepart, adresseArrivee]);
|
||||||
|
|
||||||
|
const geocodeAddresses = async () => {
|
||||||
|
if (!adresseDepart || !adresseArrivee) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vérifier que les adresses ont au moins 5 caractères
|
||||||
|
if (adresseDepart.length < 5 || adresseArrivee.length < 5) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Géocoder les deux adresses en parallèle pour plus de rapidité
|
||||||
|
// (l'API Nominatim permet généralement 1 req/sec, mais on peut essayer)
|
||||||
|
const [departResult, arriveeResult] = await Promise.all([
|
||||||
|
geocodeAddress(adresseDepart).catch(() => null),
|
||||||
|
// Petit délai pour la deuxième requête pour respecter les limites
|
||||||
|
new Promise(resolve => setTimeout(resolve, 1000)).then(() =>
|
||||||
|
geocodeAddress(adresseArrivee).catch(() => null)
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (departResult && arriveeResult) {
|
||||||
|
setDepartCoords(departResult);
|
||||||
|
setArriveeCoords(arriveeResult);
|
||||||
|
|
||||||
|
// Calculer la distance et le temps estimé
|
||||||
|
const info = calculateRouteInfo(departResult, arriveeResult);
|
||||||
|
setRouteInfo(info);
|
||||||
|
} else if (!departResult) {
|
||||||
|
setError(`Impossible de trouver l'adresse de départ: "${adresseDepart}"`);
|
||||||
|
} else {
|
||||||
|
setError(`Impossible de trouver l'adresse d'arrivée: "${adresseArrivee}"`);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erreur lors du géocodage:', err);
|
||||||
|
setError('Erreur lors du chargement de la carte. Veuillez réessayer.');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const geocodeAddress = async (address: string): Promise<Coordinates | null> => {
|
||||||
|
if (!address || address.length < 5) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Nettoyer l'adresse pour améliorer les résultats
|
||||||
|
const cleanAddress = address.trim().toLowerCase();
|
||||||
|
|
||||||
|
// Vérifier le cache
|
||||||
|
if (geocodeCacheRef.current.has(cleanAddress)) {
|
||||||
|
return geocodeCacheRef.current.get(cleanAddress)!;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address.trim())}&limit=1&addressdetails=1&countrycodes=fr`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'User-Agent': 'MAD Platform',
|
||||||
|
'Accept-Language': 'fr-FR,fr;q=0.9',
|
||||||
|
'Referer': window.location.origin,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
if (data && data.length > 0 && data[0].lat && data[0].lon) {
|
||||||
|
const lat = parseFloat(data[0].lat);
|
||||||
|
const lng = parseFloat(data[0].lon);
|
||||||
|
|
||||||
|
// Vérifier que les coordonnées sont valides
|
||||||
|
if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
|
||||||
|
const coords = { lat, lng };
|
||||||
|
// Mettre en cache (limiter à 50 entrées pour éviter la surconsommation mémoire)
|
||||||
|
if (geocodeCacheRef.current.size < 50) {
|
||||||
|
geocodeCacheRef.current.set(cleanAddress, coords);
|
||||||
|
}
|
||||||
|
return coords;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.warn('Réponse non OK de Nominatim:', response.status);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur de géocodage:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateRouteInfo = (depart: Coordinates, arrivee: Coordinates): RouteInfo => {
|
||||||
|
// Calcul de la distance à vol d'oiseau (formule de Haversine)
|
||||||
|
const R = 6371e3; // Rayon de la Terre en mètres
|
||||||
|
const φ1 = (depart.lat * Math.PI) / 180;
|
||||||
|
const φ2 = (arrivee.lat * Math.PI) / 180;
|
||||||
|
const Δφ = ((arrivee.lat - depart.lat) * Math.PI) / 180;
|
||||||
|
const Δλ = ((arrivee.lng - depart.lng) * Math.PI) / 180;
|
||||||
|
|
||||||
|
const a =
|
||||||
|
Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
|
||||||
|
Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
|
||||||
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||||
|
|
||||||
|
const distance = R * c; // Distance en mètres
|
||||||
|
|
||||||
|
// Estimation du temps : vitesse moyenne de 50 km/h en ville
|
||||||
|
// On multiplie la distance par 1.3 pour tenir compte des détours
|
||||||
|
const distanceWithDetour = distance * 1.3;
|
||||||
|
const vitesseMoyenne = 50; // km/h
|
||||||
|
const duration = (distanceWithDetour / 1000 / vitesseMoyenne) * 3600; // en secondes
|
||||||
|
|
||||||
|
return { distance: distanceWithDetour, duration };
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDistance = (meters: number): string => {
|
||||||
|
if (meters < 1000) {
|
||||||
|
return `${Math.round(meters)} m`;
|
||||||
|
}
|
||||||
|
return `${(meters / 1000).toFixed(1)} km`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDuration = (seconds: number): string => {
|
||||||
|
const hours = Math.floor(seconds / 3600);
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60);
|
||||||
|
|
||||||
|
if (hours > 0) {
|
||||||
|
return `${hours}h${minutes > 0 ? minutes : ''}`;
|
||||||
|
}
|
||||||
|
return `${minutes} min`;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!adresseDepart || !adresseArrivee) {
|
||||||
|
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">Remplissez les adresses pour voir la carte</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="h-full flex items-center justify-center bg-white rounded-xl">
|
||||||
|
<div className="text-center">
|
||||||
|
<svg className="animate-spin h-12 w-12 text-lblue mx-auto mb-4" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
<p className="text-sm font-medium text-gray-700 mb-1">Chargement de la carte...</p>
|
||||||
|
<p className="text-xs text-gray-500">Géocodage des adresses en cours</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="h-full flex items-center justify-center text-gray-400 bg-white rounded-xl p-8">
|
||||||
|
<div className="text-center max-w-md">
|
||||||
|
<svg className="w-20 h-20 mx-auto mb-4 opacity-50 text-orange-400" 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>
|
||||||
|
<p className="text-sm font-medium text-gray-700 mb-2">{error}</p>
|
||||||
|
<p className="text-xs text-gray-500 mb-4">Vérifiez que les adresses sont correctes et complètes</p>
|
||||||
|
<button
|
||||||
|
onClick={geocodeAddresses}
|
||||||
|
className="px-4 py-2 text-xs font-medium text-white bg-lblue rounded-lg hover:bg-dblue transition-colors"
|
||||||
|
>
|
||||||
|
Réessayer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!departCoords || !arriveeCoords) {
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculer le centre et le zoom optimal pour afficher les deux points
|
||||||
|
const centerLat = departCoords && arriveeCoords ? (departCoords.lat + arriveeCoords.lat) / 2 : 48.8566;
|
||||||
|
const centerLng = departCoords && arriveeCoords ? (departCoords.lng + arriveeCoords.lng) / 2 : 2.3522;
|
||||||
|
|
||||||
|
// Calculer le zoom optimal pour voir les deux points
|
||||||
|
let optimalZoom = 12;
|
||||||
|
if (departCoords && arriveeCoords) {
|
||||||
|
const latDiff = Math.abs(departCoords.lat - arriveeCoords.lat);
|
||||||
|
const lngDiff = Math.abs(departCoords.lng - arriveeCoords.lng);
|
||||||
|
const maxDiff = Math.max(latDiff, lngDiff);
|
||||||
|
|
||||||
|
if (maxDiff > 0.5) optimalZoom = 7;
|
||||||
|
else if (maxDiff > 0.2) optimalZoom = 8;
|
||||||
|
else if (maxDiff > 0.1) optimalZoom = 9;
|
||||||
|
else if (maxDiff > 0.05) optimalZoom = 10;
|
||||||
|
else if (maxDiff > 0.02) optimalZoom = 11;
|
||||||
|
else optimalZoom = 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full flex flex-col min-h-[500px]">
|
||||||
|
{/* Informations du trajet */}
|
||||||
|
{routeInfo && (
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 p-4 mb-4 shadow-sm">
|
||||||
|
<div className="grid grid-cols-2 gap-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-lgreen/10 flex items-center justify-center">
|
||||||
|
<svg className="w-5 h-5 text-lgreen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Distance</div>
|
||||||
|
<div className="text-xl font-semibold text-gray-900">{formatDistance(routeInfo.distance)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 border-l border-gray-200 pl-6">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-lblue/10 flex items-center justify-center">
|
||||||
|
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Temps estimé</div>
|
||||||
|
<div className="text-xl font-semibold text-gray-900">{formatDuration(routeInfo.duration)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Carte */}
|
||||||
|
<div className="flex-1 rounded-xl overflow-hidden border-2 border-gray-300 shadow-2xl" style={{ minHeight: '500px' }}>
|
||||||
|
<MapContainer
|
||||||
|
center={[centerLat, centerLng]}
|
||||||
|
zoom={optimalZoom}
|
||||||
|
style={{ height: '100%', width: '100%', zIndex: 0 }}
|
||||||
|
zoomControl={true}
|
||||||
|
scrollWheelZoom={true}
|
||||||
|
>
|
||||||
|
<TileLayer
|
||||||
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
|
/>
|
||||||
|
<Marker
|
||||||
|
position={[departCoords.lat, departCoords.lng]}
|
||||||
|
icon={L.divIcon({
|
||||||
|
className: 'custom-marker-depart',
|
||||||
|
html: `
|
||||||
|
<div style="
|
||||||
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50% 50% 50% 0;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
border: 4px solid white;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<div style="
|
||||||
|
transform: rotate(45deg);
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
">A</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
iconSize: [40, 40],
|
||||||
|
iconAnchor: [20, 40],
|
||||||
|
popupAnchor: [0, -40],
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Popup className="custom-popup">
|
||||||
|
<div className="text-sm p-2">
|
||||||
|
<div className="font-bold text-lgreen mb-1 flex items-center gap-2">
|
||||||
|
<div className="w-3 h-3 rounded-full bg-lgreen"></div>
|
||||||
|
Départ
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-700 font-medium">{adresseDepart}</div>
|
||||||
|
{adherentNom && <div className="text-gray-500 mt-1 text-xs">{adherentNom}</div>}
|
||||||
|
</div>
|
||||||
|
</Popup>
|
||||||
|
</Marker>
|
||||||
|
<Marker
|
||||||
|
position={[arriveeCoords.lat, arriveeCoords.lng]}
|
||||||
|
icon={L.divIcon({
|
||||||
|
className: 'custom-marker-arrivee',
|
||||||
|
html: `
|
||||||
|
<div style="
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50% 50% 50% 0;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
border: 4px solid white;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<div style="
|
||||||
|
transform: rotate(45deg);
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
">B</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
iconSize: [40, 40],
|
||||||
|
iconAnchor: [20, 40],
|
||||||
|
popupAnchor: [0, -40],
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Popup className="custom-popup">
|
||||||
|
<div className="text-sm p-2">
|
||||||
|
<div className="font-bold text-lblue mb-1 flex items-center gap-2">
|
||||||
|
<div className="w-3 h-3 rounded-full bg-lblue"></div>
|
||||||
|
Arrivée
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-700 font-medium">{adresseArrivee}</div>
|
||||||
|
</div>
|
||||||
|
</Popup>
|
||||||
|
</Marker>
|
||||||
|
<Polyline
|
||||||
|
positions={[
|
||||||
|
[departCoords.lat, departCoords.lng],
|
||||||
|
[arriveeCoords.lat, arriveeCoords.lng],
|
||||||
|
]}
|
||||||
|
pathOptions={{
|
||||||
|
color: '#6B46C1',
|
||||||
|
weight: 5,
|
||||||
|
opacity: 0.8,
|
||||||
|
dashArray: '10, 10',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</MapContainer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
63
package-lock.json
generated
63
package-lock.json
generated
@@ -9,11 +9,14 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@prisma/client": "^5.19.1",
|
"@prisma/client": "^5.19.1",
|
||||||
|
"@types/leaflet": "^1.9.21",
|
||||||
"bcryptjs": "^2.4.3",
|
"bcryptjs": "^2.4.3",
|
||||||
|
"leaflet": "^1.9.4",
|
||||||
"next": "14.2.5",
|
"next": "14.2.5",
|
||||||
"next-auth": "^4.24.7",
|
"next-auth": "^4.24.7",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-leaflet": "^4.2.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/bcryptjs": "^2.4.6",
|
"@types/bcryptjs": "^2.4.6",
|
||||||
@@ -978,14 +981,14 @@
|
|||||||
"version": "5.22.0",
|
"version": "5.22.0",
|
||||||
"resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.22.0.tgz",
|
"resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.22.0.tgz",
|
||||||
"integrity": "sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==",
|
"integrity": "sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0"
|
"license": "Apache-2.0"
|
||||||
},
|
},
|
||||||
"node_modules/@prisma/engines": {
|
"node_modules/@prisma/engines": {
|
||||||
"version": "5.22.0",
|
"version": "5.22.0",
|
||||||
"resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.22.0.tgz",
|
"resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.22.0.tgz",
|
||||||
"integrity": "sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==",
|
"integrity": "sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@@ -999,14 +1002,14 @@
|
|||||||
"version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
|
"version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
|
||||||
"resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2.tgz",
|
"resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2.tgz",
|
||||||
"integrity": "sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==",
|
"integrity": "sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0"
|
"license": "Apache-2.0"
|
||||||
},
|
},
|
||||||
"node_modules/@prisma/fetch-engine": {
|
"node_modules/@prisma/fetch-engine": {
|
||||||
"version": "5.22.0",
|
"version": "5.22.0",
|
||||||
"resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.22.0.tgz",
|
"resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.22.0.tgz",
|
||||||
"integrity": "sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==",
|
"integrity": "sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@prisma/debug": "5.22.0",
|
"@prisma/debug": "5.22.0",
|
||||||
@@ -1018,12 +1021,23 @@
|
|||||||
"version": "5.22.0",
|
"version": "5.22.0",
|
||||||
"resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.22.0.tgz",
|
"resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.22.0.tgz",
|
||||||
"integrity": "sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==",
|
"integrity": "sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@prisma/debug": "5.22.0"
|
"@prisma/debug": "5.22.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-leaflet/core": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
|
||||||
|
"license": "Hippocratic-2.1",
|
||||||
|
"peerDependencies": {
|
||||||
|
"leaflet": "^1.9.0",
|
||||||
|
"react": "^18.0.0",
|
||||||
|
"react-dom": "^18.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rtsao/scc": {
|
"node_modules/@rtsao/scc": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
||||||
@@ -1072,6 +1086,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/geojson": {
|
||||||
|
"version": "7946.0.16",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
|
||||||
|
"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@types/json5": {
|
"node_modules/@types/json5": {
|
||||||
"version": "0.0.29",
|
"version": "0.0.29",
|
||||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||||
@@ -1079,6 +1099,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/leaflet": {
|
||||||
|
"version": "1.9.21",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
|
||||||
|
"integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/geojson": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/node": {
|
"node_modules/@types/node": {
|
||||||
"version": "20.19.30",
|
"version": "20.19.30",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
|
||||||
@@ -4349,6 +4378,12 @@
|
|||||||
"node": ">=0.10"
|
"node": ">=0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/leaflet": {
|
||||||
|
"version": "1.9.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||||
|
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
|
||||||
|
"license": "BSD-2-Clause"
|
||||||
|
},
|
||||||
"node_modules/levn": {
|
"node_modules/levn": {
|
||||||
"version": "0.4.1",
|
"version": "0.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
||||||
@@ -5263,7 +5298,7 @@
|
|||||||
"version": "5.22.0",
|
"version": "5.22.0",
|
||||||
"resolved": "https://registry.npmjs.org/prisma/-/prisma-5.22.0.tgz",
|
"resolved": "https://registry.npmjs.org/prisma/-/prisma-5.22.0.tgz",
|
||||||
"integrity": "sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==",
|
"integrity": "sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@@ -5354,6 +5389,20 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/react-leaflet": {
|
||||||
|
"version": "4.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
|
||||||
|
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
|
||||||
|
"license": "Hippocratic-2.1",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-leaflet/core": "^2.1.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"leaflet": "^1.9.0",
|
||||||
|
"react": "^18.0.0",
|
||||||
|
"react-dom": "^18.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/read-cache": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||||
|
|||||||
@@ -14,11 +14,14 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@prisma/client": "^5.19.1",
|
"@prisma/client": "^5.19.1",
|
||||||
|
"@types/leaflet": "^1.9.21",
|
||||||
|
"bcryptjs": "^2.4.3",
|
||||||
|
"leaflet": "^1.9.4",
|
||||||
"next": "14.2.5",
|
"next": "14.2.5",
|
||||||
|
"next-auth": "^4.24.7",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"bcryptjs": "^2.4.3",
|
"react-leaflet": "^4.2.1"
|
||||||
"next-auth": "^4.24.7"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/bcryptjs": "^2.4.6",
|
"@types/bcryptjs": "^2.4.6",
|
||||||
|
|||||||
BIN
prisma/dev.db
BIN
prisma/dev.db
Binary file not shown.
@@ -34,6 +34,7 @@ model Chauffeur {
|
|||||||
status String @default("Disponible") // Disponible, Vacances, Arrêt Maladie
|
status String @default("Disponible") // Disponible, Vacances, Arrêt Maladie
|
||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
updatedAt DateTime @updatedAt
|
updatedAt DateTime @updatedAt
|
||||||
|
trajets Trajet[] // Relation avec les trajets
|
||||||
}
|
}
|
||||||
|
|
||||||
model UniversPro {
|
model UniversPro {
|
||||||
@@ -65,4 +66,20 @@ model Adherent {
|
|||||||
instructions String? // Instructions
|
instructions String? // Instructions
|
||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
updatedAt DateTime @updatedAt
|
updatedAt DateTime @updatedAt
|
||||||
|
trajets Trajet[] // Relation avec les trajets
|
||||||
|
}
|
||||||
|
|
||||||
|
model Trajet {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
date DateTime // Date et heure du trajet
|
||||||
|
adresseDepart String // Adresse de départ
|
||||||
|
adresseArrivee String // Adresse d'arrivée
|
||||||
|
commentaire String? // Commentaire optionnel
|
||||||
|
statut String @default("Planifié") // Planifié, En cours, Terminé, Annulé
|
||||||
|
adherentId String // Référence à l'adhérent
|
||||||
|
adherent Adherent @relation(fields: [adherentId], references: [id])
|
||||||
|
chauffeurId String? // Référence au chauffeur (optionnel)
|
||||||
|
chauffeur Chauffeur? @relation(fields: [chauffeurId], references: [id])
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user