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

Added Pro Page

Browse Source
This commit is contained in:
Pierre
2026-01-20 18:08:06 +01:00
parent 88f2e6f0f9
commit 8e8fd70c8c
13 changed files with 1954 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
app/api/chauffeurs/[id]/route.ts Normal file
View File

@@ -0,0 +1,103 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getCurrentUser } from '@/lib/auth';
// GET - Obtenir un chauffeur par ID
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 chauffeur = await prisma.chauffeur.findUnique({
where: { id: params.id },
});
if (!chauffeur) {
return NextResponse.json(
{ error: 'Chauffeur non trouvé' },
{ status: 404 }
);
}
return NextResponse.json(chauffeur);
} catch (error) {
console.error('Erreur lors de la récupération du chauffeur:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}
// PUT - Mettre à jour un chauffeur
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 { nom, prenom, dateNaissance, telephone, email, adresse, heuresContrat, dateDebutContrat, dateFinContrat, status } = body;
const updateData: any = {};
if (nom) updateData.nom = nom;
if (prenom) updateData.prenom = prenom;
if (dateNaissance) updateData.dateNaissance = new Date(dateNaissance);
if (telephone) updateData.telephone = telephone;
if (email) updateData.email = email;
if (adresse) updateData.adresse = adresse;
if (heuresContrat !== undefined) updateData.heuresContrat = heuresContrat;
if (dateDebutContrat) updateData.dateDebutContrat = new Date(dateDebutContrat);
if (dateFinContrat !== undefined) {
updateData.dateFinContrat = dateFinContrat ? new Date(dateFinContrat) : null;
}
if (status) updateData.status = status;
const chauffeur = await prisma.chauffeur.update({
where: { id: params.id },
data: updateData,
});
return NextResponse.json(chauffeur);
} catch (error) {
console.error('Erreur lors de la mise à jour du chauffeur:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}
// DELETE - Supprimer un chauffeur
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.chauffeur.delete({
where: { id: params.id },
});
return NextResponse.json({ success: true });
} catch (error) {
console.error('Erreur lors de la suppression du chauffeur:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}

89
app/api/chauffeurs/route.ts Normal file
View File

@@ -0,0 +1,89 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getCurrentUser } from '@/lib/auth';
// GET - Liste tous les chauffeurs avec recherche
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 search = searchParams.get('search') || '';
// Récupérer tous les chauffeurs (SQLite ne supporte pas bien les recherches complexes)
const allChauffeurs = await prisma.chauffeur.findMany({
orderBy: { createdAt: 'desc' },
});
// Filtrer en JavaScript pour la recherche insensible à la casse
const chauffeurs = search
? allChauffeurs.filter(
(ch) => {
const searchLower = search.toLowerCase();
return (
ch.nom.toLowerCase().includes(searchLower) ||
ch.prenom.toLowerCase().includes(searchLower) ||
ch.email.toLowerCase().includes(searchLower) ||
ch.telephone.includes(search) ||
ch.adresse.toLowerCase().includes(searchLower)
);
}
)
: allChauffeurs;
return NextResponse.json(chauffeurs);
} catch (error) {
console.error('Erreur lors de la récupération des chauffeurs:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}
// POST - Créer un nouveau chauffeur
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 { nom, prenom, dateNaissance, telephone, email, adresse, heuresContrat, dateDebutContrat, dateFinContrat } = body;
if (!nom || !prenom || !dateNaissance || !telephone || !email || !adresse || !heuresContrat || !dateDebutContrat) {
return NextResponse.json(
{ error: 'Tous les champs obligatoires sont requis' },
{ status: 400 }
);
}
const chauffeur = await prisma.chauffeur.create({
data: {
nom,
prenom,
dateNaissance: new Date(dateNaissance),
telephone,
email,
adresse,
heuresContrat: heuresContrat || 35,
dateDebutContrat: new Date(dateDebutContrat),
dateFinContrat: dateFinContrat ? new Date(dateFinContrat) : null,
heuresRestantes: heuresContrat || 35, // Initialiser avec le nombre d'heures du contrat
status: 'Disponible', // Par défaut
},
});
return NextResponse.json(chauffeur, { status: 201 });
} catch (error) {
console.error('Erreur lors de la création du chauffeur:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}

97
app/api/univers-pro/[id]/route.ts Normal file
View File

@@ -0,0 +1,97 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getCurrentUser } from '@/lib/auth';
// GET - Obtenir un contact par ID
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 contact = await prisma.universPro.findUnique({
where: { id: params.id },
});
if (!contact) {
return NextResponse.json(
{ error: 'Contact non trouvé' },
{ status: 404 }
);
}
return NextResponse.json(contact);
} catch (error) {
console.error('Erreur lors de la récupération du contact:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}
// PUT - Mettre à jour un contact
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 { nom, prenom, telephone, email, adresse, nomEntreprise } = body;
const updateData: any = {};
if (nom) updateData.nom = nom;
if (prenom) updateData.prenom = prenom;
if (telephone) updateData.telephone = telephone;
if (email) updateData.email = email;
if (adresse) updateData.adresse = adresse;
if (nomEntreprise) updateData.nomEntreprise = nomEntreprise;
const contact = await prisma.universPro.update({
where: { id: params.id },
data: updateData,
});
return NextResponse.json(contact);
} catch (error) {
console.error('Erreur lors de la mise à jour du contact:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}
// DELETE - Supprimer un contact
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.universPro.delete({
where: { id: params.id },
});
return NextResponse.json({ success: true });
} catch (error) {
console.error('Erreur lors de la suppression du contact:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}

85
app/api/univers-pro/route.ts Normal file
View File

@@ -0,0 +1,85 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getCurrentUser } from '@/lib/auth';
// GET - Liste tous les contacts univers pro avec recherche
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 search = searchParams.get('search') || '';
// Récupérer tous les contacts (SQLite ne supporte pas bien les recherches complexes)
const allContacts = await prisma.universPro.findMany({
orderBy: { createdAt: 'desc' },
});
// Filtrer en JavaScript pour la recherche insensible à la casse
const contacts = search
? allContacts.filter(
(contact) => {
const searchLower = search.toLowerCase();
return (
contact.nom.toLowerCase().includes(searchLower) ||
contact.prenom.toLowerCase().includes(searchLower) ||
contact.email.toLowerCase().includes(searchLower) ||
contact.telephone.includes(search) ||
contact.adresse.toLowerCase().includes(searchLower) ||
contact.nomEntreprise.toLowerCase().includes(searchLower)
);
}
)
: allContacts;
return NextResponse.json(contacts);
} catch (error) {
console.error('Erreur lors de la récupération des contacts:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}
// POST - Créer un nouveau contact
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 { nom, prenom, telephone, email, adresse, nomEntreprise } = body;
if (!nom || !prenom || !telephone || !email || !adresse || !nomEntreprise) {
return NextResponse.json(
{ error: 'Tous les champs sont requis' },
{ status: 400 }
);
}
const contact = await prisma.universPro.create({
data: {
nom,
prenom,
telephone,
email,
adresse,
nomEntreprise,
},
});
return NextResponse.json(contact, { status: 201 });
} catch (error) {
console.error('Erreur lors de la création du contact:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}

27
app/dashboard/chauffeurs/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { redirect } from 'next/navigation';
import { getCurrentUser } from '@/lib/auth';
import DashboardLayout from '@/components/DashboardLayout';
import ChauffeursTable from '@/components/ChauffeursTable';
export default async function ChauffeursPage() {
const user = await getCurrentUser();
if (!user) {
redirect('/login');
}
return (
<DashboardLayout user={user}>
<div className="p-6">
<h1 className="text-3xl font-semibold text-cblack mb-1">
Chauffeurs
</h1>
<p className="text-sm text-cgray mb-6">
Base de données des chauffeurs
</p>
<ChauffeursTable />
</div>
</DashboardLayout>
);
}

27
app/dashboard/univers-pro/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { redirect } from 'next/navigation';
import { getCurrentUser } from '@/lib/auth';
import DashboardLayout from '@/components/DashboardLayout';
import UniversProTable from '@/components/UniversProTable';
export default async function UniversProPage() {
const user = await getCurrentUser();
if (!user) {
redirect('/login');
}
return (
<DashboardLayout user={user}>
<div className="p-6">
<h1 className="text-3xl font-semibold text-cblack mb-1">
Univers Pro
</h1>
<p className="text-sm text-cgray mb-6">
Base de données des contacts professionnels
</p>
<UniversProTable />
</div>
</DashboardLayout>
);
}

28
app/globals.css
View File

@@ -25,3 +25,31 @@ body {
text-wrap: balance;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeIn {
animation: fadeIn 0.2s ease-out;
}
.animate-slideUp {
animation: slideUp 0.3s ease-out;
}

360
components/ChauffeurForm.tsx Normal file
View File

@@ -0,0 +1,360 @@
'use client';
import { useState, useEffect } from 'react';
interface Chauffeur {
id: string;
nom: string;
prenom: string;
dateNaissance: string;
telephone: string;
email: string;
adresse: string;
heuresContrat: number;
dateDebutContrat: string;
dateFinContrat: string | null;
heuresRestantes?: number;
status?: string;
}
interface ChauffeurFormProps {
chauffeur: Chauffeur | null;
onClose: () => void;
}
export default function ChauffeurForm({ chauffeur, onClose }: ChauffeurFormProps) {
const [loading, setLoading] = useState(false);
const [formData, setFormData] = useState({
nom: '',
prenom: '',
dateNaissance: '',
telephone: '',
email: '',
adresse: '',
heuresContrat: 35,
dateDebutContrat: new Date().toISOString().split('T')[0], // Date du jour par défaut
dateFinContrat: '',
status: 'Disponible',
});
useEffect(() => {
if (chauffeur) {
const dateNaissance = new Date(chauffeur.dateNaissance);
const dateDebut = new Date(chauffeur.dateDebutContrat);
const dateFin = chauffeur.dateFinContrat ? new Date(chauffeur.dateFinContrat) : null;
setFormData({
nom: chauffeur.nom,
prenom: chauffeur.prenom,
dateNaissance: dateNaissance.toISOString().split('T')[0],
telephone: chauffeur.telephone,
email: chauffeur.email,
adresse: chauffeur.adresse,
heuresContrat: chauffeur.heuresContrat,
dateDebutContrat: dateDebut.toISOString().split('T')[0],
dateFinContrat: dateFin ? dateFin.toISOString().split('T')[0] : '',
status: chauffeur.status || 'Disponible',
});
}
}, [chauffeur]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
try {
const url = chauffeur ? `/api/chauffeurs/${chauffeur.id}` : '/api/chauffeurs';
const method = chauffeur ? 'PUT' : 'POST';
const payload = {
...formData,
dateFinContrat: formData.dateFinContrat || null, // Convertir chaîne vide en null
};
const response = await fetch(url, {
method,
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload),
});
if (response.ok) {
onClose();
} else {
const error = await response.json();
alert(error.error || 'Une erreur est survenue');
}
} catch (error) {
console.error('Erreur:', error);
alert('Une erreur est survenue');
} finally {
setLoading(false);
}
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
<div className="flex justify-between items-start mb-6">
<div>
<h2 className="text-2xl font-semibold text-gray-900 mb-2">
{chauffeur ? 'Modifier le chauffeur' : 'Nouveau chauffeur'}
</h2>
<p className="text-sm text-gray-600">
{chauffeur ? 'Modifiez les informations du chauffeur ci-dessous.' : 'Remplissez les informations pour créer un nouveau chauffeur.'}
</p>
</div>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<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>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label htmlFor="nom" className="block text-sm font-medium text-gray-700 mb-1">
Nom <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<input
type="text"
id="nom"
required
value={formData.nom}
onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="prenom" className="block text-sm font-medium text-gray-700 mb-1">
Prénom <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<input
type="text"
id="prenom"
required
value={formData.prenom}
onChange={(e) => setFormData({ ...formData, prenom: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="dateNaissance" className="block text-sm font-medium text-gray-700 mb-1">
Date de naissance <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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>
</div>
<input
type="date"
id="dateNaissance"
required
value={formData.dateNaissance}
onChange={(e) => setFormData({ ...formData, dateNaissance: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="telephone" className="block text-sm font-medium text-gray-700 mb-1">
Téléphone <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<input
type="tel"
id="telephone"
required
value={formData.telephone}
onChange={(e) => setFormData({ ...formData, telephone: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
Email <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<input
type="email"
id="email"
required
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="adresse" className="block text-sm font-medium text-gray-700 mb-1">
Adresse <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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>
<input
type="text"
id="adresse"
required
value={formData.adresse}
onChange={(e) => setFormData({ ...formData, adresse: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="heuresContrat" className="block text-sm font-medium text-gray-700 mb-1">
Contrat d'heure <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<input
type="number"
id="heuresContrat"
min="0"
required
value={formData.heuresContrat}
onChange={(e) => setFormData({ ...formData, heuresContrat: parseInt(e.target.value) || 0 })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
placeholder="35"
/>
</div>
</div>
<div>
<label htmlFor="dateDebutContrat" className="block text-sm font-medium text-gray-700 mb-1">
Date de début <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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>
</div>
<input
type="date"
id="dateDebutContrat"
required
value={formData.dateDebutContrat}
onChange={(e) => setFormData({ ...formData, dateDebutContrat: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="dateFinContrat" className="block text-sm font-medium text-gray-700 mb-1">
Date de fin
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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>
</div>
<input
type="date"
id="dateFinContrat"
value={formData.dateFinContrat}
onChange={(e) => setFormData({ ...formData, dateFinContrat: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
Status
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<select
id="status"
value={formData.status}
onChange={(e) => setFormData({ ...formData, status: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent appearance-none bg-white"
>
<option value="Disponible">Disponible</option>
<option value="Vacances">Vacances</option>
<option value="Arrêt Maladie">Arrêt Maladie</option>
</select>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
</div>
</div>
<div className="flex justify-end gap-3 pt-4">
<button
type="button"
onClick={onClose}
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
>
Annuler
</button>
<button
type="submit"
disabled={loading}
className="px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Enregistrement...' : chauffeur ? 'Modifier' : 'Créer'}
</button>
</div>
</form>
</div>
</div>
);
}

500
components/ChauffeursTable.tsx Normal file
View File

@@ -0,0 +1,500 @@
'use client';
import { useState, useEffect } from 'react';
import ChauffeurForm from './ChauffeurForm';
interface Chauffeur {
id: string;
nom: string;
prenom: string;
dateNaissance: string;
telephone: string;
email: string;
adresse: string;
heuresContrat: number;
dateDebutContrat: string;
dateFinContrat: string | null;
heuresRestantes?: number;
status?: string;
}
export default function ChauffeursTable() {
const [chauffeurs, setChauffeurs] = useState<Chauffeur[]>([]);
const [search, setSearch] = useState('');
const [loading, setLoading] = useState(true);
const [showForm, setShowForm] = useState(false);
const [editingChauffeur, setEditingChauffeur] = useState<Chauffeur | null>(null);
const [viewingChauffeur, setViewingChauffeur] = useState<Chauffeur | null>(null);
const fetchChauffeurs = async (searchTerm: string = '') => {
setLoading(true);
try {
const url = searchTerm
? `/api/chauffeurs?search=${encodeURIComponent(searchTerm)}`
: '/api/chauffeurs';
const response = await fetch(url);
if (response.ok) {
const data = await response.json();
setChauffeurs(data);
}
} catch (error) {
console.error('Erreur lors du chargement des chauffeurs:', error);
} finally {
setLoading(false);
}
};
useEffect(() => {
const timeoutId = setTimeout(() => {
fetchChauffeurs(search);
}, 300); // Debounce de 300ms pour la recherche
return () => clearTimeout(timeoutId);
}, [search]);
useEffect(() => {
fetchChauffeurs();
}, []);
const handleDelete = async (id: string) => {
if (!confirm('Êtes-vous sûr de vouloir supprimer ce chauffeur ?')) {
return;
}
try {
const response = await fetch(`/api/chauffeurs/${id}`, {
method: 'DELETE',
});
if (response.ok) {
fetchChauffeurs(search);
} else {
alert('Erreur lors de la suppression');
}
} catch (error) {
console.error('Erreur lors de la suppression:', error);
alert('Erreur lors de la suppression');
}
};
const handleEdit = (chauffeur: Chauffeur) => {
setEditingChauffeur(chauffeur);
setShowForm(true);
};
const handleView = async (id: string) => {
try {
const response = await fetch(`/api/chauffeurs/${id}`);
if (response.ok) {
const data = await response.json();
setViewingChauffeur(data);
}
} catch (error) {
console.error('Erreur lors de la récupération:', error);
}
};
const handleFormClose = () => {
setShowForm(false);
setEditingChauffeur(null);
fetchChauffeurs(search);
};
const getInitials = (nom: string, prenom: string) => {
return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
};
const getStatusColor = (status: string) => {
switch (status) {
case 'Disponible':
return 'bg-lgreen text-white';
case 'Vacances':
return 'bg-lblue text-white';
case 'Arrêt Maladie':
return 'bg-lorange text-white';
default:
return 'bg-gray-200 text-gray-700';
}
};
const formatDate = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
};
const getProgressPercentage = (restantes: number, total: number) => {
return ((total - restantes) / total) * 100;
};
return (
<>
{/* Barre de recherche et actions */}
<div className="bg-white rounded-lg shadow-sm p-4 mb-6">
<div className="flex flex-col md:flex-row gap-4 items-center">
{/* Barre de recherche */}
<div className="flex-1 w-full md:w-auto">
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Rechercher un chauffeur..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="block w-full pl-10 pr-3 py-2 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>
</div>
{/* Boutons d'action */}
<div className="flex gap-3">
<button
onClick={() => {
setEditingChauffeur(null);
setShowForm(true);
}}
className="flex items-center gap-2 px-4 py-2 bg-lgreen text-white 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 chauffeur
</button>
<button className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Importer
</button>
<button className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4-4m0 0l-4-4m4 4V4" />
</svg>
Exporter
</button>
</div>
</div>
</div>
{/* Tableau */}
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
{loading ? (
<div className="p-8 text-center text-gray-500">Chargement...</div>
) : chauffeurs.length === 0 ? (
<div className="p-8 text-center text-gray-500">Aucun chauffeur trouvé</div>
) : (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NOM</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CONTACT</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ADRESSE</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NOMBRES D'HEURES</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">STATUS</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ACTIONS</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{chauffeurs.map((chauffeur) => (
<tr key={chauffeur.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-lorange flex items-center justify-center text-white font-semibold">
{getInitials(chauffeur.nom, chauffeur.prenom)}
</div>
<div>
<div className="text-sm font-semibold text-gray-900">
{chauffeur.prenom} {chauffeur.nom}
</div>
<div className="text-sm text-gray-500">
Né le {formatDate(chauffeur.dateNaissance)}
</div>
</div>
</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">{chauffeur.telephone}</div>
<div className="text-sm text-gray-500">{chauffeur.email}</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">{chauffeur.adresse}</div>
</td>
<td className="px-6 py-4">
<div className="w-48">
<div className="flex items-center justify-between mb-1">
<span className="text-xs text-gray-600">
{chauffeur.heuresRestantes || chauffeur.heuresContrat}h restantes sur {chauffeur.heuresContrat}h
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-lgreen h-2 rounded-full"
style={{ width: `${getProgressPercentage(chauffeur.heuresRestantes || chauffeur.heuresContrat, chauffeur.heuresContrat)}%` }}
></div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
{chauffeur.status && (
<span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(chauffeur.status)}`}>
{chauffeur.status}
</span>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-3">
<button
onClick={() => handleView(chauffeur.id)}
className="text-lblue hover:text-dblue"
title="Voir"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
onClick={() => handleEdit(chauffeur)}
className="text-lblue hover:text-dblue"
title="Modifier"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button
onClick={() => handleDelete(chauffeur.id)}
className="text-red-500 hover:text-red-700"
title="Supprimer"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
{/* Modal formulaire */}
{showForm && (
<ChauffeurForm
chauffeur={editingChauffeur}
onClose={handleFormClose}
/>
)}
{/* Modal vue détaillée */}
{viewingChauffeur && (
<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-3xl w-full max-h-[90vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
{/* Header sobre */}
<div className="border-b border-gray-200 px-6 py-5 bg-white">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 font-semibold text-lg border-2 border-gray-200">
{getInitials(viewingChauffeur.nom, viewingChauffeur.prenom)}
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900">
{viewingChauffeur.prenom} {viewingChauffeur.nom}
</h2>
<p className="text-sm text-gray-500 mt-0.5">
Informations détaillées du chauffeur
</p>
</div>
</div>
<button
onClick={() => setViewingChauffeur(null)}
className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
>
<svg className="w-5 h-5" 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>
{/* Contenu scrollable */}
<div className="flex-1 overflow-y-auto px-6 py-6">
{/* Section Informations personnelles */}
<div className="mb-8">
<h3 className="text-sm font-semibold text-gray-900 mb-4 uppercase tracking-wide">
Informations personnelles
</h3>
<div className="space-y-3">
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Date de naissance</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="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 font-medium">{formatDate(viewingChauffeur.dateNaissance)}</span>
</div>
</div>
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Téléphone</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<a href={`tel:${viewingChauffeur.telephone}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors">
{viewingChauffeur.telephone}
</a>
</div>
</div>
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Email</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<a href={`mailto:${viewingChauffeur.email}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors break-all">
{viewingChauffeur.email}
</a>
</div>
</div>
<div className="flex items-start py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Adresse</span>
</div>
<div className="flex-1 flex items-start gap-2">
<svg className="h-4 w-4 text-gray-400 mt-0.5" 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>
<span className="text-sm text-gray-900 font-medium">{viewingChauffeur.adresse}</span>
</div>
</div>
</div>
</div>
{/* Section Contrat */}
<div className="mb-8">
<h3 className="text-sm font-semibold text-gray-900 mb-4 uppercase tracking-wide">
Informations contractuelles
</h3>
<div className="space-y-3">
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Contrat d'heure</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className="text-sm text-gray-900 font-semibold">{viewingChauffeur.heuresContrat}h</span>
</div>
</div>
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Date de début</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="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 font-medium">{formatDate(viewingChauffeur.dateDebutContrat)}</span>
</div>
</div>
{viewingChauffeur.dateFinContrat && (
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Date de fin</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="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 font-medium">{formatDate(viewingChauffeur.dateFinContrat)}</span>
</div>
</div>
)}
{viewingChauffeur.heuresRestantes !== undefined && (
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Heures restantes</span>
</div>
<div className="flex-1">
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-gray-900 font-medium">
{viewingChauffeur.heuresRestantes}h / {viewingChauffeur.heuresContrat}h
</span>
</div>
<div className="w-full bg-gray-100 rounded-full h-1.5">
<div
className="bg-lblue h-1.5 rounded-full"
style={{ width: `${getProgressPercentage(viewingChauffeur.heuresRestantes || viewingChauffeur.heuresContrat, viewingChauffeur.heuresContrat)}%` }}
></div>
</div>
</div>
</div>
)}
{viewingChauffeur.status && (
<div className="flex items-center py-3">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Status</span>
</div>
<div className="flex-1 flex items-center gap-2">
<span className={`px-2.5 py-1 text-xs font-medium rounded ${getStatusColor(viewingChauffeur.status)}`}>
{viewingChauffeur.status}
</span>
</div>
</div>
)}
</div>
</div>
</div>
{/* Footer sobre */}
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
<div className="flex justify-end gap-3">
<button
onClick={() => setViewingChauffeur(null)}
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
>
Fermer
</button>
<button
onClick={() => {
setViewingChauffeur(null);
handleEdit(viewingChauffeur);
}}
className="px-4 py-2 bg-lblue text-white text-sm font-medium rounded hover:bg-dblue transition-colors flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
Modifier
</button>
</div>
</div>
</div>
</div>
)}
</>
);
}

246
components/UniversProForm.tsx Normal file
View File

@@ -0,0 +1,246 @@
'use client';
import { useState, useEffect } from 'react';
interface UniversPro {
id: string;
nom: string;
prenom: string;
telephone: string;
email: string;
adresse: string;
nomEntreprise: string;
}
interface UniversProFormProps {
contact: UniversPro | null;
onClose: () => void;
}
export default function UniversProForm({ contact, onClose }: UniversProFormProps) {
const [loading, setLoading] = useState(false);
const [formData, setFormData] = useState({
nom: '',
prenom: '',
telephone: '',
email: '',
adresse: '',
nomEntreprise: '',
});
useEffect(() => {
if (contact) {
setFormData({
nom: contact.nom,
prenom: contact.prenom,
telephone: contact.telephone,
email: contact.email,
adresse: contact.adresse,
nomEntreprise: contact.nomEntreprise,
});
}
}, [contact]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
try {
const url = contact ? `/api/univers-pro/${contact.id}` : '/api/univers-pro';
const method = contact ? 'PUT' : 'POST';
const response = await fetch(url, {
method,
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
if (response.ok) {
onClose();
} else {
const error = await response.json();
alert(error.error || 'Une erreur est survenue');
}
} catch (error) {
console.error('Erreur:', error);
alert('Une erreur est survenue');
} finally {
setLoading(false);
}
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
<div className="flex justify-between items-start mb-6">
<div>
<h2 className="text-2xl font-semibold text-gray-900 mb-2">
{contact ? 'Modifier le contact' : 'Nouveau contact'}
</h2>
<p className="text-sm text-gray-600">
{contact ? 'Modifiez les informations du contact ci-dessous.' : 'Remplissez les informations pour créer un nouveau contact professionnel.'}
</p>
</div>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600"
>
<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>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label htmlFor="nom" className="block text-sm font-medium text-gray-700 mb-1">
Nom <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<input
type="text"
id="nom"
required
value={formData.nom}
onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="prenom" className="block text-sm font-medium text-gray-700 mb-1">
Prénom <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<input
type="text"
id="prenom"
required
value={formData.prenom}
onChange={(e) => setFormData({ ...formData, prenom: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="telephone" className="block text-sm font-medium text-gray-700 mb-1">
Téléphone <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<input
type="tel"
id="telephone"
required
value={formData.telephone}
onChange={(e) => setFormData({ ...formData, telephone: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
Email <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<input
type="email"
id="email"
required
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div>
<label htmlFor="nomEntreprise" className="block text-sm font-medium text-gray-700 mb-1">
Nom de l'entreprise <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
<input
type="text"
id="nomEntreprise"
required
value={formData.nomEntreprise}
onChange={(e) => setFormData({ ...formData, nomEntreprise: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
</div>
<div>
<label htmlFor="adresse" className="block text-sm font-medium text-gray-700 mb-1">
Adresse <span className="text-red-500">*</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="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>
<input
type="text"
id="adresse"
required
value={formData.adresse}
onChange={(e) => setFormData({ ...formData, adresse: e.target.value })}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
<div className="flex justify-end gap-3 pt-4">
<button
type="button"
onClick={onClose}
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
>
Annuler
</button>
<button
type="submit"
disabled={loading}
className="px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Enregistrement...' : contact ? 'Modifier' : 'Créer'}
</button>
</div>
</form>
</div>
</div>
);
}

363
components/UniversProTable.tsx Normal file
View File

@@ -0,0 +1,363 @@
'use client';
import { useState, useEffect } from 'react';
import UniversProForm from './UniversProForm';
interface UniversPro {
id: string;
nom: string;
prenom: string;
telephone: string;
email: string;
adresse: string;
nomEntreprise: string;
}
export default function UniversProTable() {
const [contacts, setContacts] = useState<UniversPro[]>([]);
const [search, setSearch] = useState('');
const [loading, setLoading] = useState(true);
const [showForm, setShowForm] = useState(false);
const [editingContact, setEditingContact] = useState<UniversPro | null>(null);
const [viewingContact, setViewingContact] = useState<UniversPro | null>(null);
const fetchContacts = async (searchTerm: string = '') => {
setLoading(true);
try {
const url = searchTerm
? `/api/univers-pro?search=${encodeURIComponent(searchTerm)}`
: '/api/univers-pro';
const response = await fetch(url);
if (response.ok) {
const data = await response.json();
setContacts(data);
}
} catch (error) {
console.error('Erreur lors du chargement des contacts:', error);
} finally {
setLoading(false);
}
};
useEffect(() => {
const timeoutId = setTimeout(() => {
fetchContacts(search);
}, 300);
return () => clearTimeout(timeoutId);
}, [search]);
useEffect(() => {
fetchContacts();
}, []);
const handleDelete = async (id: string) => {
if (!confirm('Êtes-vous sûr de vouloir supprimer ce contact ?')) {
return;
}
try {
const response = await fetch(`/api/univers-pro/${id}`, {
method: 'DELETE',
});
if (response.ok) {
fetchContacts(search);
} else {
alert('Erreur lors de la suppression');
}
} catch (error) {
console.error('Erreur lors de la suppression:', error);
alert('Erreur lors de la suppression');
}
};
const handleEdit = (contact: UniversPro) => {
setEditingContact(contact);
setShowForm(true);
};
const handleView = async (id: string) => {
try {
const response = await fetch(`/api/univers-pro/${id}`);
if (response.ok) {
const data = await response.json();
setViewingContact(data);
}
} catch (error) {
console.error('Erreur lors de la récupération:', error);
}
};
const handleFormClose = () => {
setShowForm(false);
setEditingContact(null);
fetchContacts(search);
};
const getInitials = (nom: string, prenom: string) => {
return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
};
return (
<>
{/* Barre de recherche et actions */}
<div className="bg-white rounded-lg shadow-sm p-4 mb-6">
<div className="flex flex-col md:flex-row gap-4 items-center">
{/* Barre de recherche */}
<div className="flex-1 w-full md:w-auto">
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
placeholder="Rechercher un contact..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="block w-full pl-10 pr-3 py-2 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>
</div>
{/* Boutons d'action */}
<div className="flex gap-3">
<button
onClick={() => {
setEditingContact(null);
setShowForm(true);
}}
className="flex items-center gap-2 px-4 py-2 bg-lgreen text-white 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 contact
</button>
<button className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Importer
</button>
<button className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4-4m0 0l-4-4m4 4V4" />
</svg>
Exporter
</button>
</div>
</div>
</div>
{/* Tableau */}
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
{loading ? (
<div className="p-8 text-center text-gray-500">Chargement...</div>
) : contacts.length === 0 ? (
<div className="p-8 text-center text-gray-500">Aucun contact trouvé</div>
) : (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NOM</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CONTACT</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ADRESSE</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ENTREPRISE</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ACTIONS</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{contacts.map((contact) => (
<tr key={contact.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap">
<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">
{getInitials(contact.nom, contact.prenom)}
</div>
<div>
<div className="text-sm font-semibold text-gray-900">
{contact.prenom} {contact.nom}
</div>
</div>
</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">{contact.telephone}</div>
<div className="text-sm text-gray-500">{contact.email}</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">{contact.adresse}</div>
</td>
<td className="px-6 py-4">
<div className="text-sm font-medium text-gray-900">{contact.nomEntreprise}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-3">
<button
onClick={() => handleView(contact.id)}
className="text-lblue hover:text-dblue"
title="Voir"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
onClick={() => handleEdit(contact)}
className="text-lblue hover:text-dblue"
title="Modifier"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button
onClick={() => handleDelete(contact.id)}
className="text-red-500 hover:text-red-700"
title="Supprimer"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
{/* Modal formulaire */}
{showForm && (
<UniversProForm
contact={editingContact}
onClose={handleFormClose}
/>
)}
{/* Modal vue détaillée */}
{viewingContact && (
<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-3xl w-full max-h-[90vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
{/* Header */}
<div className="border-b border-gray-200 px-6 py-5 bg-white">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 font-semibold text-lg border-2 border-gray-200">
{getInitials(viewingContact.nom, viewingContact.prenom)}
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900">
{viewingContact.prenom} {viewingContact.nom}
</h2>
<p className="text-sm text-gray-500 mt-0.5">
Informations détaillées du contact
</p>
</div>
</div>
<button
onClick={() => setViewingContact(null)}
className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
>
<svg className="w-5 h-5" 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>
{/* Contenu scrollable */}
<div className="flex-1 overflow-y-auto px-6 py-6">
<div className="space-y-3">
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Téléphone</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<a href={`tel:${viewingContact.telephone}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors">
{viewingContact.telephone}
</a>
</div>
</div>
<div className="flex items-center py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Email</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<a href={`mailto:${viewingContact.email}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors break-all">
{viewingContact.email}
</a>
</div>
</div>
<div className="flex items-start py-3 border-b border-gray-100">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Adresse</span>
</div>
<div className="flex-1 flex items-start gap-2">
<svg className="h-4 w-4 text-gray-400 mt-0.5" 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>
<span className="text-sm text-gray-900 font-medium">{viewingContact.adresse}</span>
</div>
</div>
<div className="flex items-center py-3">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Entreprise</span>
</div>
<div className="flex-1 flex items-center gap-2">
<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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
<span className="text-sm text-gray-900 font-medium">{viewingContact.nomEntreprise}</span>
</div>
</div>
</div>
</div>
{/* Footer */}
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
<div className="flex justify-end gap-3">
<button
onClick={() => setViewingContact(null)}
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
>
Fermer
</button>
<button
onClick={() => {
setViewingContact(null);
handleEdit(viewingContact);
}}
className="px-4 py-2 bg-lblue text-white text-sm font-medium rounded hover:bg-dblue transition-colors flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
Modifier
</button>
</div>
</div>
</div>
</div>
)}
</>
);
}

BIN
prisma/dev.db
View File

Binary file not shown.

29
prisma/schema.prisma
View File

@@ -18,3 +18,32 @@ model User {
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Chauffeur {
id String @id @default(cuid())
nom String
prenom String
dateNaissance DateTime
telephone String
email String
adresse String
heuresContrat Int @default(35) // Nombre d'heures dans le contrat (ex: 35h)
dateDebutContrat DateTime // Date de début du contrat
dateFinContrat DateTime? // Date de fin du contrat (modifiable à tout moment, peut être null)
heuresRestantes Int @default(35) // Heures restantes (calculé/géré séparément)
status String @default("Disponible") // Disponible, Vacances, Arrêt Maladie
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model UniversPro {
id String @id @default(cuid())
nom String
prenom String
telephone String
email String
adresse String // Adresse de résidence
nomEntreprise String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}