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

Added new design to modals

Browse Source
This commit is contained in:
Pierre
2026-02-08 14:16:55 +01:00
parent ccff904464
commit ff6201a42c
15 changed files with 1134 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
app/api/conversations/[id]/messages/route.ts
View File

@@ -4,6 +4,7 @@ import { getCurrentUser } from '@/lib/auth';
import { writeFile } from 'fs/promises';
import { join } from 'path';
import { existsSync, mkdirSync } from 'fs';
import { createNotification } from '@/lib/notifications';
// GET - Récupérer les messages d'une conversation
export async function GET(
@@ -23,7 +24,17 @@ export async function GET(
const conversation = await prisma.conversation.findUnique({
where: { id: params.id },
include: {
participants: true,
participants: {
include: {
user: {
select: {
id: true,
name: true,
email: true,
},
},
},
},
},
});
@@ -101,7 +112,17 @@ export async function POST(
const conversation = await prisma.conversation.findUnique({
where: { id: params.id },
include: {
participants: true,
participants: {
include: {
user: {
select: {
id: true,
name: true,
email: true,
},
},
},
},
},
});
@@ -203,6 +224,37 @@ export async function POST(
data: { updatedAt: new Date() },
});
// Créer des notifications pour tous les participants sauf l'expéditeur
const participants = conversation.participants.filter((p) => p.userId !== user.id);
// Récupérer le nom de la conversation
let conversationName = '';
if (conversation.type === 'group') {
conversationName = conversation.name || 'Groupe';
} else {
// Pour une conversation directe, utiliser le nom de l'autre participant
const otherParticipant = participants.find((p) => p.user);
conversationName = otherParticipant?.user?.name || otherParticipant?.user?.email || 'Utilisateur';
}
const messagePreview = content
? (content.length > 100 ? content.substring(0, 100) + '...' : content)
: files.length > 0
? `${files.length} fichier${files.length > 1 ? 's' : ''}`
: 'Nouveau message';
await Promise.all(
participants.map((participant) =>
createNotification({
userId: participant.userId,
type: 'message',
title: conversationName,
message: messagePreview,
link: `/dashboard/messagerie?conversation=${params.id}`,
})
)
);
return NextResponse.json(messageWithFiles, { status: 201 });
}
@@ -212,6 +264,35 @@ export async function POST(
data: { updatedAt: new Date() },
});
// Créer des notifications pour tous les participants sauf l'expéditeur
const participants = conversation.participants.filter((p) => p.userId !== user.id);
// Récupérer le nom de la conversation
let conversationName = '';
if (conversation.type === 'group') {
conversationName = conversation.name || 'Groupe';
} else {
// Pour une conversation directe, utiliser le nom de l'autre participant
const otherParticipant = participants.find((p) => p.user);
conversationName = otherParticipant?.user?.name || otherParticipant?.user?.email || 'Utilisateur';
}
const messagePreview = content
? (content.length > 100 ? content.substring(0, 100) + '...' : content)
: 'Nouveau message';
await Promise.all(
participants.map((participant) =>
createNotification({
userId: participant.userId,
type: 'message',
title: conversationName,
message: messagePreview,
link: `/dashboard/messagerie?conversation=${params.id}`,
})
)
);
return NextResponse.json(message, { status: 201 });
} catch (error) {
console.error('Erreur lors de l\'envoi du message:', error);

115
app/api/notifications/route.ts Normal file
View File

@@ -0,0 +1,115 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getCurrentUser } from '@/lib/auth';
// GET - Récupérer les notifications de l'utilisateur
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 = parseInt(searchParams.get('limit') || '50');
const unreadOnly = searchParams.get('unreadOnly') === 'true';
const where: any = {
userId: user.id,
};
if (unreadOnly) {
where.read = false;
}
const notifications = await prisma.notification.findMany({
where,
orderBy: {
createdAt: 'desc',
},
take: limit,
});
const unreadCount = await prisma.notification.count({
where: {
userId: user.id,
read: false,
},
});
return NextResponse.json({
notifications,
unreadCount,
});
} catch (error) {
console.error('Erreur lors de la récupération des notifications:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}
// POST - Marquer une notification comme lue
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 { notificationId, markAllAsRead } = body;
if (markAllAsRead) {
// Marquer toutes les notifications comme lues
await prisma.notification.updateMany({
where: {
userId: user.id,
read: false,
},
data: {
read: true,
},
});
return NextResponse.json({ success: true });
}
if (!notificationId) {
return NextResponse.json(
{ error: 'ID de notification requis' },
{ status: 400 }
);
}
// Vérifier que la notification appartient à l'utilisateur
const notification = await prisma.notification.findFirst({
where: {
id: notificationId,
userId: user.id,
},
});
if (!notification) {
return NextResponse.json(
{ error: 'Notification non trouvée' },
{ status: 404 }
);
}
// Marquer comme lue
await prisma.notification.update({
where: { id: notificationId },
data: { read: true },
});
return NextResponse.json({ success: true });
} catch (error) {
console.error('Erreur lors de la mise à jour de la notification:', error);
return NextResponse.json(
{ error: 'Erreur serveur' },
{ status: 500 }
);
}
}

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

@@ -1,6 +1,7 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getCurrentUser } from '@/lib/auth';
import { createNotificationForAllUsers } from '@/lib/notifications';
// GET - Récupérer un trajet spécifique
export async function GET(
@@ -103,6 +104,57 @@ export async function PUT(
},
});
// Créer une notification si le statut a changé
if (statut) {
const oldTrajet = await prisma.trajet.findUnique({
where: { id: params.id },
include: {
adherent: {
select: {
nom: true,
prenom: true,
},
},
},
});
if (oldTrajet && oldTrajet.statut !== statut) {
const dateFormatted = new Date(trajet.date).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'long',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
let notificationType: 'trajet_cancelled' | 'trajet_completed' | null = null;
let notificationTitle = '';
let notificationMessage = '';
if (statut === 'Annulé') {
notificationType = 'trajet_cancelled';
notificationTitle = 'Trajet annulé';
notificationMessage = `Le trajet pour ${trajet.adherent.prenom} ${trajet.adherent.nom} du ${dateFormatted} a été annulé`;
} else if (statut === 'Terminé') {
notificationType = 'trajet_completed';
notificationTitle = 'Trajet terminé';
notificationMessage = `Le trajet pour ${trajet.adherent.prenom} ${trajet.adherent.nom} du ${dateFormatted} est terminé`;
}
if (notificationType) {
await createNotificationForAllUsers(
{
type: notificationType,
title: notificationTitle,
message: notificationMessage,
link: '/dashboard/calendrier',
},
user.id
);
}
}
}
return NextResponse.json(trajet);
} catch (error) {
console.error('Erreur lors de la mise à jour du trajet:', error);

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

@@ -1,6 +1,7 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getCurrentUser } from '@/lib/auth';
import { createNotificationForAllUsers } from '@/lib/notifications';
// GET - Liste tous les trajets avec leurs relations
export async function GET(request: NextRequest) {
@@ -125,6 +126,25 @@ export async function POST(request: NextRequest) {
},
});
// Créer une notification pour tous les utilisateurs sauf celui qui a créé le trajet
const dateFormatted = new Date(date).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'long',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
await createNotificationForAllUsers(
{
type: 'trajet_created',
title: 'Nouveau trajet programmé',
message: `Trajet programmé pour ${trajet.adherent.prenom} ${trajet.adherent.nom} le ${dateFormatted}`,
link: '/dashboard/calendrier',
},
user.id
);
return NextResponse.json(trajet, { status: 201 });
} catch (error) {
console.error('Erreur lors de la création du trajet:', error);

2
app/error.tsx
View File

@@ -67,7 +67,7 @@ export default function Error({ error, reset }: ErrorProps) {
{/* Footer */}
<div className="mt-12 text-center text-xs text-gray-500">
© 2025 MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</div>
</div>
</div>

2
app/login/page.tsx
View File

@@ -39,7 +39,7 @@ export default async function LoginPage() {
{/* Footer */}
<div className="mt-8 text-center text-xs text-gray-500">
© 2025 MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</div>
</div>
</div>

2
app/not-found.tsx
View File

@@ -44,7 +44,7 @@ export default function NotFound() {
{/* Footer */}
<div className="mt-12 text-center text-xs text-gray-500">
© 2025 MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</div>
</div>
</div>

341
components/AdherentsTable.tsx
View File

@@ -1132,31 +1132,31 @@ export default function AdherentsTable() {
/>
)}
{/* Modal vue détaillée */}
{/* Modal vue détaillée - Design épuré */}
{viewingAdherent && (
<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">
<div className="bg-white rounded-xl shadow-2xl max-w-5xl w-full max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
{/* Header épuré */}
<div className="border-b border-gray-200 px-8 py-6 bg-white">
<div className="flex items-start justify-between">
<div className="flex items-center gap-5">
<div className="w-16 h-16 rounded-full bg-lblue flex items-center justify-center text-white font-bold text-xl border-4 border-lblue/10 shadow-sm">
{getInitials(viewingAdherent.nom, viewingAdherent.prenom)}
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900">
<h2 className="text-2xl font-bold text-gray-900 mb-1">
{viewingAdherent.prenom} {viewingAdherent.nom}
</h2>
<p className="text-sm text-gray-500 mt-0.5">
<p className="text-gray-500 text-sm">
Informations détaillées de l'adhérent
</p>
</div>
</div>
<button
onClick={() => setViewingAdherent(null)}
className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
@@ -1164,165 +1164,240 @@ export default function AdherentsTable() {
</div>
{/* Contenu scrollable */}
<div className="flex-1 overflow-y-auto px-6 py-6">
{/* Informations principales */}
<div className="mb-8">
<h3 className="text-sm font-semibold text-gray-900 mb-4 uppercase tracking-wide">
<div className="flex-1 overflow-y-auto">
<div className="p-8">
{/* Actions rapides */}
<div className="mb-8 flex flex-wrap gap-3">
<a
href={`tel:${viewingAdherent.telephone}`}
className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors"
>
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<span className="text-sm font-medium">Appeler</span>
</a>
{viewingAdherent.telephoneSecondaire && (
<a
href={`tel:${viewingAdherent.telephoneSecondaire}`}
className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors"
>
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<span className="text-sm font-medium">Téléphone secondaire</span>
</a>
)}
<a
href={`mailto:${viewingAdherent.email}`}
className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors"
>
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span className="text-sm font-medium">Envoyer un email</span>
</a>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Carte Informations principales */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-200">
<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="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>
<h3 className="text-lg font-semibold text-gray-900">
Informations principales
</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">
<div className="space-y-4">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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(viewingAdherent.dateNaissance)}</span>
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Date de naissance</p>
<p className="text-sm font-semibold text-gray-900">{formatDate(viewingAdherent.dateNaissance)}</p>
</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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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:${viewingAdherent.telephone}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors">
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Téléphone</p>
<a href={`tel:${viewingAdherent.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors">
{viewingAdherent.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:${viewingAdherent.email}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors break-all">
{viewingAdherent.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">{viewingAdherent.adresse}</span>
</div>
</div>
</div>
</div>
{/* Informations complémentaires */}
<div>
<h3 className="text-sm font-semibold text-gray-900 mb-4 uppercase tracking-wide">
Informations complémentaires
</h3>
<div className="space-y-3">
{viewingAdherent.situation && (
<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">Situation</span>
</div>
<div className="flex-1">
<span className="text-sm text-gray-900 font-medium">{viewingAdherent.situation}</span>
</div>
</div>
)}
{viewingAdherent.prescripteur && (
<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">Prescripteur</span>
</div>
<div className="flex-1">
<span className="text-sm text-gray-900 font-medium">{viewingAdherent.prescripteur}</span>
</div>
</div>
)}
{viewingAdherent.facturation && (
<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">Facturation</span>
</div>
<div className="flex-1">
<span className="text-sm text-gray-900 font-medium">{viewingAdherent.facturation}</span>
</div>
</div>
)}
{viewingAdherent.forfait && (
<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">Forfait</span>
</div>
<div className="flex-1">
<span className="text-sm text-gray-900 font-medium">{viewingAdherent.forfait}</span>
</div>
</div>
)}
{viewingAdherent.telephoneSecondaire && (
<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 secondaire</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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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:${viewingAdherent.telephoneSecondaire}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors">
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Téléphone secondaire</p>
<a href={`tel:${viewingAdherent.telephoneSecondaire}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors">
{viewingAdherent.telephoneSecondaire}
</a>
</div>
</div>
)}
{viewingAdherent.commentaire && (
<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">Commentaire</span>
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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>
<div className="flex-1">
<p className="text-sm text-gray-900 font-medium whitespace-pre-wrap">{viewingAdherent.commentaire}</p>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Email</p>
<a href={`mailto:${viewingAdherent.email}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
{viewingAdherent.email}
</a>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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 className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Adresse</p>
<p className="text-sm font-semibold text-gray-900">{viewingAdherent.adresse}</p>
</div>
</div>
</div>
</div>
{/* Carte Informations complémentaires */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-200">
<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900">
Informations complémentaires
</h3>
</div>
<div className="space-y-4">
{viewingAdherent.situation && (
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Situation</p>
<p className="text-sm font-semibold text-gray-900">{viewingAdherent.situation}</p>
</div>
</div>
)}
{viewingAdherent.prescripteur && (
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Prescripteur</p>
<p className="text-sm font-semibold text-gray-900">{viewingAdherent.prescripteur}</p>
</div>
</div>
)}
{viewingAdherent.facturation && (
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2zM10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 0a.5.5 0 11-1 0 .5.5 0 011 0z" />
</svg>
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Facturation</p>
<p className="text-sm font-semibold text-gray-900">{viewingAdherent.facturation}</p>
</div>
</div>
)}
{viewingAdherent.forfait && (
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Forfait</p>
<p className="text-sm font-semibold text-gray-900">{viewingAdherent.forfait}</p>
</div>
</div>
)}
{viewingAdherent.commentaire && (
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Commentaire</p>
<p className="text-sm font-semibold text-gray-900 whitespace-pre-wrap">{viewingAdherent.commentaire}</p>
</div>
</div>
)}
{viewingAdherent.instructions && (
<div className="flex items-start py-3">
<div className="w-32 flex-shrink-0">
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Instructions</span>
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<div className="flex-1">
<p className="text-sm text-gray-900 font-medium whitespace-pre-wrap">{viewingAdherent.instructions}</p>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Instructions</p>
<p className="text-sm font-semibold text-gray-900 whitespace-pre-wrap">{viewingAdherent.instructions}</p>
</div>
</div>
)}
{!viewingAdherent.situation && !viewingAdherent.prescripteur && !viewingAdherent.facturation && !viewingAdherent.forfait && !viewingAdherent.commentaire && !viewingAdherent.instructions && (
<div className="text-center py-8 text-gray-400 text-sm">
Aucune information complémentaire
</div>
)}
</div>
</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">
{/* Footer avec actions */}
<div className="border-t border-gray-200 px-8 py-5 bg-white">
<div className="flex items-center justify-between">
<button
onClick={() => setViewingAdherent(null)}
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
Fermer
</button>
@@ -1331,12 +1406,12 @@ export default function AdherentsTable() {
setViewingAdherent(null);
handleEdit(viewingAdherent);
}}
className="px-4 py-2 bg-lblue text-white text-sm font-medium rounded hover:bg-dblue transition-colors flex items-center gap-2"
className="px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
Modifier
Modifier l'adhérent
</button>
</div>
</div>

239
components/ChauffeursTable.tsx
View File

@@ -145,7 +145,7 @@ export default function ChauffeursTable() {
const getStatusColor = (status: string) => {
switch (status) {
case 'Disponible':
return 'bg-lgreen text-white';
return 'bg-lblue text-white';
case 'Vacances':
return 'bg-lblue text-white';
case 'Arrêt Maladie':
@@ -1018,31 +1018,38 @@ export default function ChauffeursTable() {
/>
)}
{/* Modal vue détaillée */}
{/* Modal vue détaillée - Design épuré */}
{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">
<div className="bg-white rounded-xl shadow-2xl max-w-5xl w-full max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
{/* Header épuré */}
<div className="border-b border-gray-200 px-8 py-6 bg-white">
<div className="flex items-start justify-between">
<div className="flex items-center gap-5">
<div className="w-16 h-16 rounded-full bg-lblue flex items-center justify-center text-white font-bold text-xl border-4 border-lblue/10 shadow-sm">
{getInitials(viewingChauffeur.nom, viewingChauffeur.prenom)}
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900">
<h2 className="text-2xl font-bold text-gray-900 mb-1">
{viewingChauffeur.prenom} {viewingChauffeur.nom}
</h2>
<p className="text-sm text-gray-500 mt-0.5">
<p className="text-gray-500 text-sm mb-2">
Informations détaillées du chauffeur
</p>
{viewingChauffeur.status && (
<div>
<span className={`px-3 py-1 text-xs font-semibold rounded-full ${getStatusColor(viewingChauffeur.status)}`}>
{viewingChauffeur.status}
</span>
</div>
)}
</div>
</div>
<button
onClick={() => setViewingChauffeur(null)}
className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
@@ -1050,155 +1057,187 @@ export default function ChauffeursTable() {
</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">
<div className="flex-1 overflow-y-auto">
<div className="p-8">
{/* Actions rapides */}
<div className="mb-8 flex flex-wrap gap-3">
<a
href={`tel:${viewingChauffeur.telephone}`}
className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors"
>
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<span className="text-sm font-medium">Appeler</span>
</a>
<a
href={`mailto:${viewingChauffeur.email}`}
className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors"
>
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span className="text-sm font-medium">Envoyer un email</span>
</a>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Carte Informations personnelles */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-200">
<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="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>
<h3 className="text-lg font-semibold text-gray-900">
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">
<div className="space-y-4">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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 className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Date de naissance</p>
<p className="text-sm font-semibold text-gray-900">{formatDate(viewingChauffeur.dateNaissance)}</p>
</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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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">
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Téléphone</p>
<a href={`tel:${viewingChauffeur.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue 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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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">
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Email</p>
<a href={`mailto:${viewingChauffeur.email}`} className="text-sm font-semibold text-lblue hover:text-dblue 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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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 className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Adresse</p>
<p className="text-sm font-semibold text-gray-900">{viewingChauffeur.adresse}</p>
</div>
</div>
</div>
</div>
{/* Section Contrat */}
<div className="mb-8">
<h3 className="text-sm font-semibold text-gray-900 mb-4 uppercase tracking-wide">
{/* Carte Informations contractuelles */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-200">
<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900">
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">
<div className="space-y-4">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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 className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Contrat d'heure</p>
<p className="text-lg font-bold text-gray-900">{viewingChauffeur.heuresContrat}h</p>
</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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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 className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Date de début</p>
<p className="text-sm font-semibold text-gray-900">{formatDate(viewingChauffeur.dateDebutContrat)}</p>
</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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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 className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Date de fin</p>
<p className="text-sm font-semibold text-gray-900">{formatDate(viewingChauffeur.dateFinContrat)}</p>
</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
<div className="pt-2">
<div className="flex items-center justify-between mb-3">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide">Heures restantes</p>
<span className="text-lg font-bold text-gray-900">
{viewingChauffeur.heuresRestantes}h <span className="text-sm font-normal text-gray-500">/ {viewingChauffeur.heuresContrat}h</span>
</span>
</div>
<div className="w-full bg-gray-100 rounded-full h-1.5">
<div className="relative w-full bg-gray-200 rounded-full h-3 overflow-hidden">
<div
className="bg-lblue h-1.5 rounded-full"
style={{ width: `${getProgressPercentage(viewingChauffeur.heuresRestantes || viewingChauffeur.heuresContrat, viewingChauffeur.heuresContrat)}%` }}
className={`h-3 rounded-full transition-all duration-500 ${
(viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) < 0.2
? 'bg-orange-500'
: (viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) < 0.5
? 'bg-orange-400'
: 'bg-lblue'
}`}
style={{ width: `${(viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) * 100}%` }}
></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>
<p className="text-xs text-gray-500 mt-2">
{Math.round((viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) * 100)}% d'heures restantes
</p>
</div>
)}
</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">
{/* Footer avec actions */}
<div className="border-t border-gray-200 px-8 py-5 bg-white">
<div className="flex items-center justify-between">
<button
onClick={() => setViewingChauffeur(null)}
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
Fermer
</button>
@@ -1207,12 +1246,12 @@ export default function ChauffeursTable() {
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"
className="px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
Modifier
Modifier le chauffeur
</button>
</div>
</div>

115
components/DashboardLayout.tsx
View File

@@ -42,6 +42,29 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
}
);
// Récupérer les notifications
const { data: notificationsData, mutate: mutateNotifications } = useSWR<{
notifications: Array<{
id: string;
type: string;
title: string;
message: string;
read: boolean;
link: string | null;
createdAt: string;
}>;
unreadCount: number;
}>(
'/api/notifications',
fetcher,
{
refreshInterval: 3000, // Rafraîchir toutes les 3 secondes
}
);
const notifications = notificationsData?.notifications || [];
const unreadNotificationsCount = notificationsData?.unreadCount || 0;
// Récupérer les pages accessibles pour l'utilisateur
const { data: userPagesData } = useSWR<{ pages: string[] }>(
'/api/user/pages',
@@ -222,7 +245,7 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
{/* Footer */}
<div className="p-6 border-t border-gray-200">
<p className="text-xs text-gray-500 text-center">
© 2025 MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</p>
</div>
</aside>
@@ -244,19 +267,105 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
{/* Badge de notification */}
<span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></span>
{unreadNotificationsCount > 0 && (
<span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] bg-red-500 text-white text-[10px] font-semibold rounded-full border-2 border-white flex items-center justify-center px-1">
{unreadNotificationsCount > 99 ? '99+' : unreadNotificationsCount}
</span>
)}
</button>
{/* Dropdown Notifications */}
{showNotifications && (
<div className="absolute right-0 top-12 w-80 bg-white rounded-lg shadow-xl border border-gray-200 z-50 animate-slideUp">
<div className="p-4 border-b border-gray-200">
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-900">Notifications</h3>
{unreadNotificationsCount > 0 && (
<button
onClick={async () => {
try {
await fetch('/api/notifications', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ markAllAsRead: true }),
});
mutateNotifications();
} catch (error) {
console.error('Erreur lors du marquage des notifications:', error);
}
}}
className="text-xs text-lblue hover:text-dblue font-medium"
>
Tout marquer comme lu
</button>
)}
</div>
<div className="max-h-96 overflow-y-auto">
{notifications.length === 0 ? (
<div className="p-4 text-center text-sm text-gray-500">
Aucune notification
</div>
) : (
<div className="divide-y divide-gray-100">
{notifications.map((notification) => (
<button
key={notification.id}
onClick={async () => {
// Marquer comme lue
if (!notification.read) {
try {
await fetch('/api/notifications', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ notificationId: notification.id }),
});
mutateNotifications();
} catch (error) {
console.error('Erreur lors du marquage de la notification:', error);
}
}
// Naviguer vers le lien si disponible
if (notification.link) {
router.push(notification.link);
setShowNotifications(false);
}
}}
className={`w-full text-left p-4 hover:bg-gray-50 transition-colors ${
!notification.read ? 'bg-blue-50/50' : ''
}`}
>
<div className="flex items-start gap-3">
<div className={`flex-shrink-0 w-2 h-2 rounded-full mt-2 ${
!notification.read ? 'bg-lblue' : 'bg-transparent'
}`}></div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between mb-1">
<p className={`text-sm font-medium ${
!notification.read ? 'text-gray-900' : 'text-gray-700'
}`}>
{notification.title}
</p>
<span className="text-xs text-gray-400 ml-2 flex-shrink-0">
{new Date(notification.createdAt).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'short',
hour: '2-digit',
minute: '2-digit',
})}
</span>
</div>
<p className="text-xs text-gray-600 line-clamp-2">
{notification.message}
</p>
</div>
</div>
</button>
))}
</div>
)}
</div>
</div>
)}

93
components/ListeTrajets.tsx
View File

@@ -35,19 +35,44 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
const [search, setSearch] = useState('');
const [showFilters, setShowFilters] = useState(false);
const [filterStatut, setFilterStatut] = useState<string>('');
const [startDate, setStartDate] = useState<string>('');
const [endDate, setEndDate] = useState<string>('');
const [showTrajetForm, setShowTrajetForm] = useState(false);
useEffect(() => {
fetchTrajets();
}, []);
}, [startDate, endDate]);
const fetchTrajets = async () => {
setLoading(true);
try {
const response = await fetch('/api/trajets?limit=10');
const params = new URLSearchParams();
// Si des filtres de date sont appliqués, ne pas limiter les résultats
// Sinon, limiter à 10 pour afficher les derniers trajets créés
if (!startDate && !endDate) {
params.append('limit', '10');
}
if (startDate) {
// Ajouter l'heure au début de la journée (00:00:00)
const start = new Date(startDate);
start.setHours(0, 0, 0, 0);
params.append('startDate', start.toISOString());
}
if (endDate) {
// Ajouter l'heure à la fin de la journée (23:59:59)
const end = new Date(endDate);
end.setHours(23, 59, 59, 999);
params.append('endDate', end.toISOString());
}
const response = await fetch(`/api/trajets?${params.toString()}`);
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)
// ou par date du trajet si un filtre de date est appliqué
setTrajets(data);
}
} catch (error) {
@@ -127,7 +152,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
<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
showFilters || filterStatut || startDate || endDate
? 'bg-lblue text-white hover:bg-dblue'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
@@ -141,11 +166,60 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
{/* Filtres */}
{showFilters && (
<div className="pt-3 border-t border-gray-200">
<div className="pt-3 border-t border-gray-200 space-y-4">
{/* Filtre par plage de dates */}
<div>
<div className="flex items-center justify-between mb-2">
<label className="block text-sm font-medium text-gray-700">
Plage de dates
</label>
{(startDate || endDate) && (
<button
onClick={() => {
setStartDate('');
setEndDate('');
}}
className="text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors 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="M6 18L18 6M6 6l12 12" />
</svg>
Réinitialiser
</button>
)}
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label className="block text-xs text-gray-500 mb-1">Date de début</label>
<input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="block w-full px-3 py-2 text-sm 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-xs text-gray-500 mb-1">Date de fin</label>
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
min={startDate || undefined}
className="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
</div>
</div>
</div>
{/* Filtre par statut */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Statut
</label>
<div className="flex flex-wrap gap-2">
<button
onClick={() => setFilterStatut('')}
className={`px-3 py-2 text-xs font-medium rounded ${
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
!filterStatut
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -155,7 +229,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
<button
onClick={() => setFilterStatut('Planifié')}
className={`px-3 py-2 text-xs font-medium rounded ${
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
filterStatut === 'Planifié'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -165,7 +239,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
<button
onClick={() => setFilterStatut('En cours')}
className={`px-3 py-2 text-xs font-medium rounded ${
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
filterStatut === 'En cours'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -175,7 +249,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
<button
onClick={() => setFilterStatut('Terminé')}
className={`px-3 py-2 text-xs font-medium rounded ${
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
filterStatut === 'Terminé'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -185,7 +259,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
<button
onClick={() => setFilterStatut('Annulé')}
className={`px-3 py-2 text-xs font-medium rounded ${
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
filterStatut === 'Annulé'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -195,6 +269,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
</div>
</div>
</div>
)}
</div>
</div>

152
components/UniversProTable.tsx
View File

@@ -862,31 +862,31 @@ export default function UniversProTable() {
/>
)}
{/* Modal vue détaillée */}
{/* Modal vue détaillée - Design épuré */}
{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">
<div className="bg-white rounded-xl shadow-2xl max-w-5xl w-full max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
{/* Header épuré */}
<div className="border-b border-gray-200 px-8 py-6 bg-white">
<div className="flex items-start justify-between">
<div className="flex items-center gap-5">
<div className="w-16 h-16 rounded-full bg-lblue flex items-center justify-center text-white font-bold text-xl border-4 border-lblue/10 shadow-sm">
{getInitials(viewingContact.nom, viewingContact.prenom)}
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900">
<h2 className="text-2xl font-bold text-gray-900 mb-1">
{viewingContact.prenom} {viewingContact.nom}
</h2>
<p className="text-sm text-gray-500 mt-0.5">
Informations détaillées du contact
<p className="text-gray-500 text-sm">
Informations détaillées du contact professionnel
</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"
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
@@ -894,69 +894,123 @@ export default function UniversProTable() {
</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">
<div className="flex-1 overflow-y-auto">
<div className="p-8">
{/* Actions rapides */}
<div className="mb-8 flex flex-wrap gap-3">
<a
href={`tel:${viewingContact.telephone}`}
className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors"
>
<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="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">
<span className="text-sm font-medium">Appeler</span>
</a>
<a
href={`mailto:${viewingContact.email}`}
className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors"
>
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span className="text-sm font-medium">Envoyer un email</span>
</a>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Carte Informations de contact */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-200">
<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="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>
<h3 className="text-lg font-semibold text-gray-900">
Informations de contact
</h3>
</div>
<div className="space-y-4">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Téléphone</p>
<a href={`tel:${viewingContact.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue 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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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">
</div>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Email</p>
<a href={`mailto:${viewingContact.email}`} className="text-sm font-semibold text-lblue hover:text-dblue 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">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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 className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Adresse</p>
<p className="text-sm font-semibold text-gray-900">{viewingContact.adresse}</p>
</div>
</div>
</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">
{/* Carte Informations entreprise */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-200">
<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="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>
<h3 className="text-lg font-semibold text-gray-900">
Informations entreprise
</h3>
</div>
<div className="space-y-4">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<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="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>
<div className="flex-1 min-w-0">
<p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Nom de l'entreprise</p>
<p className="text-lg font-bold text-gray-900">{viewingContact.nomEntreprise}</p>
</div>
</div>
</div>
</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">
{/* Footer avec actions */}
<div className="border-t border-gray-200 px-8 py-5 bg-white">
<div className="flex items-center justify-between">
<button
onClick={() => setViewingContact(null)}
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
Fermer
</button>
@@ -965,12 +1019,12 @@ export default function UniversProTable() {
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"
className="px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
Modifier
Modifier le contact
</button>
</div>
</div>

62
lib/notifications.ts Normal file
View File

@@ -0,0 +1,62 @@
import { prisma } from './prisma';
export interface CreateNotificationParams {
userId: string;
type: 'message' | 'trajet_created' | 'trajet_cancelled' | 'trajet_completed';
title: string;
message: string;
link?: string;
}
/**
* Crée une notification pour un utilisateur
*/
export async function createNotification(params: CreateNotificationParams) {
try {
await prisma.notification.create({
data: {
userId: params.userId,
type: params.type,
title: params.title,
message: params.message,
link: params.link || null,
},
});
} catch (error) {
console.error('Erreur lors de la création de la notification:', error);
}
}
/**
* Crée des notifications pour tous les utilisateurs sauf celui qui a déclenché l'action
*/
export async function createNotificationForAllUsers(
params: Omit<CreateNotificationParams, 'userId'>,
excludeUserId?: string
) {
try {
const users = await prisma.user.findMany({
where: excludeUserId
? {
id: {
not: excludeUserId,
},
}
: undefined,
select: {
id: true,
},
});
await Promise.all(
users.map((user) =>
createNotification({
...params,
userId: user.id,
})
)
);
} catch (error) {
console.error('Erreur lors de la création des notifications:', error);
}
}

BIN
prisma/dev.db
View File

Binary file not shown.

17
prisma/schema.prisma
View File

@@ -21,6 +21,7 @@ model User {
updatedAt DateTime @updatedAt
conversations ConversationParticipant[]
sentMessages Message[]
notifications Notification[]
}
model Role {
@@ -188,3 +189,19 @@ model AdherentOption {
@@unique([type, value])
@@index([type])
}
model Notification {
id String @id @default(cuid())
userId String // Utilisateur destinataire de la notification
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
type String // "message", "trajet_created", "trajet_cancelled", "trajet_completed"
title String // Titre de la notification
message String // Message de la notification
read Boolean @default(false) // Indique si la notification a été lue
link String? // Lien optionnel vers la ressource (ex: /dashboard/messagerie, /dashboard/calendrier)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@index([userId, read])
@@index([userId, createdAt])
}