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

Added optimizations for mobile

Browse Source
This commit is contained in:
Pierre
2026-02-08 15:27:44 +01:00
parent f1e9e3f8d4
commit da2e32d004
28 changed files with 1667 additions and 1075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/dashboard/adherents/page.tsx
View File

@@ -18,11 +18,11 @@ export default async function AdherentsPage() {
return (
<DashboardLayout user={user}>
<div className="p-6">
<h1 className="text-3xl font-semibold text-cblack mb-1">
<div className="p-4 md:p-6">
<h1 className="text-2xl md:text-3xl font-semibold text-cblack mb-1">
Adhérents
</h1>
<p className="text-sm text-cgray mb-6">
<p className="text-xs md:text-sm text-cgray mb-4 md:mb-6">
Base de données des adhérents
</p>

6
app/dashboard/archives/page.tsx
View File

@@ -17,9 +17,9 @@ export default async function ArchivesPage() {
return (
<DashboardLayout user={user}>
<div className="p-8">
<h1 className="text-3xl font-semibold text-cblack mb-2">Archives</h1>
<p className="text-sm text-cgray mb-8">Trajets archivés</p>
<div className="p-4 md:p-6 lg:p-8">
<h1 className="text-2xl md:text-3xl font-semibold text-cblack mb-2">Archives</h1>
<p className="text-xs md:text-sm text-cgray mb-6 md:mb-8">Trajets archivés</p>
<ArchivesTrajets />
</div>
</DashboardLayout>

6
app/dashboard/calendrier/page.tsx
View File

@@ -18,11 +18,11 @@ export default async function CalendrierPage() {
return (
<DashboardLayout user={user}>
<div className="p-8">
<h1 className="text-3xl font-semibold text-cblack mb-2">
<div className="p-4 sm:p-6 lg:p-8">
<h1 className="text-2xl sm:text-3xl font-semibold text-cblack mb-2">
Calendrier
</h1>
<p className="text-sm text-cgray mb-8">
<p className="text-xs sm:text-sm text-cgray mb-6 sm:mb-8">
Gestion des trajets et planning des chauffeurs
</p>

6
app/dashboard/chauffeurs/page.tsx
View File

@@ -18,11 +18,11 @@ export default async function ChauffeursPage() {
return (
<DashboardLayout user={user}>
<div className="p-6">
<h1 className="text-3xl font-semibold text-cblack mb-1">
<div className="p-4 md:p-6">
<h1 className="text-2xl md:text-3xl font-semibold text-cblack mb-1">
Chauffeurs
</h1>
<p className="text-sm text-cgray mb-6">
<p className="text-xs md:text-sm text-cgray mb-4 md:mb-6">
Base de données des chauffeurs
</p>

6
app/dashboard/univers-pro/page.tsx
View File

@@ -18,11 +18,11 @@ export default async function UniversProPage() {
return (
<DashboardLayout user={user}>
<div className="p-6">
<h1 className="text-3xl font-semibold text-cblack mb-1">
<div className="p-4 md:p-6">
<h1 className="text-2xl md:text-3xl font-semibold text-cblack mb-1">
Univers Pro
</h1>
<p className="text-sm text-cgray mb-6">
<p className="text-xs md:text-sm text-cgray mb-4 md:mb-6">
Base de données des contacts professionnels
</p>

31
app/error.tsx
View File

@@ -16,49 +16,50 @@ export default function Error({ error, reset }: ErrorProps) {
}, [error]);
return (
<div className="min-h-screen flex items-center justify-center bg-cwhite">
<div className="text-center px-4">
<div className="min-h-screen flex items-center justify-center bg-cwhite px-4 py-8">
<div className="text-center w-full max-w-md mx-auto">
{/* Logo */}
<div className="flex justify-center mb-8">
<div className="flex justify-center mb-6 md:mb-8">
<Image
src="/logo.svg"
alt="MAD Logo"
width={120}
height={120}
width={100}
height={100}
className="w-20 h-20 md:w-[120px] md:h-[120px]"
/>
</div>
{/* 500 Content */}
<div className="max-w-md mx-auto">
<h1 className="text-9xl font-bold text-lorange mb-4">500</h1>
<h2 className="text-3xl font-semibold text-gray-900 mb-4">
<h1 className="text-7xl md:text-9xl font-bold text-lorange mb-3 md:mb-4">500</h1>
<h2 className="text-2xl md:text-3xl font-semibold text-gray-900 mb-3 md:mb-4">
Erreur serveur
</h2>
<p className="text-gray-600 mb-2">
<p className="text-sm md:text-base text-gray-600 mb-2 px-2">
Une erreur inattendue s'est produite sur le serveur.
</p>
{error.message && (
<p className="text-sm text-gray-500 mb-8 font-mono bg-gray-100 p-3 rounded-lg">
<p className="text-xs md:text-sm text-gray-500 mb-6 md:mb-8 font-mono bg-gray-100 p-2 md:p-3 rounded-lg break-all text-left mt-3">
{error.message}
</p>
)}
{!error.message && (
<p className="text-gray-600 mb-8">
<p className="text-sm md:text-base text-gray-600 mb-6 md:mb-8 px-2">
Veuillez réessayer dans quelques instants.
</p>
)}
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<div className="flex flex-col gap-3 md:gap-4 justify-center">
<button
onClick={reset}
className="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-lorange hover:bg-dorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors"
className="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-lorange hover:bg-dorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors w-full md:w-auto"
>
Réessayer
</button>
<Link
href="/dashboard"
className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors"
className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors w-full md:w-auto"
>
Retour au tableau de bord
</Link>
@@ -66,8 +67,8 @@ export default function Error({ error, reset }: ErrorProps) {
</div>
{/* Footer */}
<div className="mt-12 text-center text-xs text-gray-500">
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
<div className="mt-8 md:mt-12 text-center text-xs text-gray-500 px-4">
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" rel="noopener noreferrer" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</div>
</div>
</div>

19
app/login/page.tsx
View File

@@ -11,25 +11,26 @@ export default async function LoginPage() {
}
return (
<div className="min-h-screen flex items-center justify-center bg-cwhite">
<div className="w-full max-w-lg bg-white rounded-3xl shadow-lg py-8 px-12">
<div className="min-h-screen flex items-center justify-center bg-cwhite px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
<div className="w-full max-w-lg bg-white rounded-2xl sm:rounded-3xl shadow-lg py-6 sm:py-8 px-6 sm:px-8 md:px-12">
{/* Logo */}
<div className="flex justify-center mb-6">
<div className="flex justify-center mb-4 sm:mb-6">
<Image
src="/logo.svg"
alt="MAD Logo"
width={120}
height={120}
width={100}
height={100}
className="w-20 h-20 sm:w-24 sm:h-24 md:w-[120px] md:h-[120px]"
priority
/>
</div>
{/* Heading */}
<div className="text-center mb-6">
<h2 className="text-2xl font-bold text-gray-900 mb-2">
<div className="text-center mb-5 sm:mb-6">
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
Content de vous revoir
</h2>
<p className="text-sm text-gray-600">
<p className="text-xs sm:text-sm text-gray-600 px-2">
Connectez-vous pour accéder à la plateforme.
</p>
</div>
@@ -38,7 +39,7 @@ export default async function LoginPage() {
<LoginForm />
{/* Footer */}
<div className="mt-8 text-center text-xs text-gray-500">
<div className="mt-6 sm:mt-8 text-center text-[10px] sm:text-xs text-gray-500 px-2">
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</div>
</div>

27
app/not-found.tsx
View File

@@ -3,39 +3,40 @@ import Image from 'next/image';
export default function NotFound() {
return (
<div className="min-h-screen flex items-center justify-center bg-cwhite">
<div className="text-center px-4">
<div className="min-h-screen flex items-center justify-center bg-cwhite px-4 py-8">
<div className="text-center w-full max-w-md mx-auto">
{/* Logo */}
<div className="flex justify-center mb-8">
<div className="flex justify-center mb-6 md:mb-8">
<Image
src="/logo.svg"
alt="MAD Logo"
width={120}
height={120}
width={100}
height={100}
className="w-20 h-20 md:w-[120px] md:h-[120px]"
/>
</div>
{/* 404 Content */}
<div className="max-w-md mx-auto">
<h1 className="text-9xl font-bold text-lblue mb-4">404</h1>
<h2 className="text-3xl font-semibold text-gray-900 mb-4">
<h1 className="text-7xl md:text-9xl font-bold text-lblue mb-3 md:mb-4">404</h1>
<h2 className="text-2xl md:text-3xl font-semibold text-gray-900 mb-3 md:mb-4">
Page non trouvée
</h2>
<p className="text-gray-600 mb-8">
<p className="text-sm md:text-base text-gray-600 mb-6 md:mb-8 px-2">
Désolé, la page que vous recherchez n'existe pas ou a été déplacée.
</p>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<div className="flex flex-col gap-3 md:gap-4 justify-center">
<Link
href="/dashboard"
className="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-lblue hover:bg-dblue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lblue transition-colors"
className="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-lblue hover:bg-dblue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lblue transition-colors w-full md:w-auto"
>
Retour au tableau de bord
</Link>
<Link
href="/login"
className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lblue transition-colors"
className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lblue transition-colors w-full md:w-auto"
>
Page de connexion
</Link>
@@ -43,8 +44,8 @@ export default function NotFound() {
</div>
{/* Footer */}
<div className="mt-12 text-center text-xs text-gray-500">
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
<div className="mt-8 md:mt-12 text-center text-xs text-gray-500 px-4">
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" rel="noopener noreferrer" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
</div>
</div>
</div>

57
components/AdherentForm.tsx
View File

@@ -27,6 +27,7 @@ interface AdherentFormProps {
export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
const [loading, setLoading] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [alertModal, setAlertModal] = useState<{
show: boolean;
type: 'success' | 'error' | 'info' | 'warning';
@@ -64,6 +65,17 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
fetchOptions();
}, []);
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768); // md breakpoint
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
const fetchOptions = async () => {
try {
const response = await fetch('/api/settings/adherent-options');
@@ -153,6 +165,51 @@ export default function AdherentForm({ adherent, onClose }: AdherentFormProps) {
}
};
// Si on est sur mobile, afficher un message au lieu du formulaire
if (isMobile) {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
<div className="flex justify-between items-start mb-6">
<div className="flex-1">
<h2 className="text-xl font-semibold text-gray-900 mb-2">
{adherent ? 'Modifier l\'adhérent' : 'Nouvel adhérent'}
</h2>
</div>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 ml-4"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="text-center py-8">
<div className="mb-6">
<svg className="w-16 h-16 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-3">
Utilisez un ordinateur
</h3>
<p className="text-sm text-gray-600 mb-6">
Pour {adherent ? 'modifier' : 'créer'} un adhérent, veuillez utiliser un ordinateur. Cette fonctionnalité n'est pas optimisée pour les appareils mobiles.
</p>
<button
onClick={onClose}
className="px-6 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
>
Fermer
</button>
</div>
</div>
</div>
);
}
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-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">

458
components/AdherentsTable.tsx
View File

@@ -722,169 +722,281 @@ export default function AdherentsTable() {
</div>
{/* Boutons d'action */}
<div className="flex gap-3">
<div className="flex gap-2 md:gap-3 w-full md:w-auto">
<button
onClick={() => {
setEditingAdherent(null);
setShowForm(true);
}}
className="flex items-center gap-2 px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors text-sm md:text-base flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
Nouvel adhérent
<span className="hidden sm:inline">Nouvel adhérent</span>
<span className="sm:hidden">Nouveau</span>
</button>
<button
onClick={() => setShowImportModal(true)}
className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm md:text-base"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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
<span className="hidden sm:inline">Importer</span>
</button>
<button
onClick={handleExport}
disabled={selectedIds.size === 0}
className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm md:text-base"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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 {selectedIds.size > 0 && `(${selectedIds.size})`}
<span className="hidden sm:inline">Exporter</span>
{selectedIds.size > 0 && <span className="ml-1">({selectedIds.size})</span>}
</button>
</div>
</div>
</div>
{/* Tableau */}
{/* Tableau - Desktop */}
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
{loading ? (
<div className="p-8 text-center text-gray-500">Chargement...</div>
) : adherents.length === 0 ? (
<div className="p-8 text-center text-gray-500">Aucun adhérent 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">
<input
type="checkbox"
checked={adherents.length > 0 && selectedIds.size === adherents.length}
onChange={(e) => handleSelectAll(e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</th>
<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">PRESCRIPTEUR</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SITUATION</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">
{adherents.map((adherent) => (
<tr key={adherent.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap">
<>
{/* Vue desktop - Tableau */}
<div className="hidden md:block 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">
<input
type="checkbox"
checked={selectedIds.has(adherent.id)}
onChange={(e) => handleSelectOne(adherent.id, e.target.checked)}
checked={adherents.length > 0 && selectedIds.size === adherents.length}
onChange={(e) => handleSelectAll(e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold">
{getInitials(adherent.nom, adherent.prenom)}
</div>
<div>
<div className="text-sm font-semibold text-gray-900">
{adherent.prenom} {adherent.nom}
</th>
<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">PRESCRIPTEUR</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SITUATION</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">
{adherents.map((adherent) => (
<tr key={adherent.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap">
<input
type="checkbox"
checked={selectedIds.has(adherent.id)}
onChange={(e) => handleSelectOne(adherent.id, e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold">
{getInitials(adherent.nom, adherent.prenom)}
</div>
<div className="text-sm text-gray-500">
Né le {formatDate(adherent.dateNaissance)}
<div>
<div className="text-sm font-semibold text-gray-900">
{adherent.prenom} {adherent.nom}
</div>
<div className="text-sm text-gray-500">
Né le {formatDate(adherent.dateNaissance)}
</div>
</div>
</div>
</div>
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2 mb-1">
<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>
<span className="text-sm text-gray-900 font-medium">{adherent.telephone}</span>
<span className="text-xs text-gray-500">(Principal)</span>
</div>
{adherent.telephoneSecondaire && (
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2 mb-1">
<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>
<span className="text-sm text-gray-600">{adherent.telephoneSecondaire}</span>
<span className="text-xs text-gray-500">(Secondaire)</span>
<span className="text-sm text-gray-900 font-medium">{adherent.telephone}</span>
<span className="text-xs text-gray-500">(Principal)</span>
</div>
{adherent.telephoneSecondaire && (
<div className="flex items-center gap-2 mb-1">
<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>
<span className="text-sm text-gray-600">{adherent.telephoneSecondaire}</span>
<span className="text-xs text-gray-500">(Secondaire)</span>
</div>
)}
<div className="flex items-center gap-2 mt-1">
<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>
<span className="text-sm text-gray-500">{adherent.email}</span>
</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">{adherent.adresse}</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">
{adherent.prescripteur || '-'}
</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">
{adherent.situation || '-'}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-3">
<button
onClick={() => handleView(adherent.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(adherent)}
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(adherent.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>
{/* Vue mobile - Cartes */}
<div className="md:hidden divide-y divide-gray-200">
{adherents.map((adherent) => (
<div key={adherent.id} className="p-4 hover:bg-gray-50">
<div className="flex items-start gap-3">
{/* Checkbox */}
<input
type="checkbox"
checked={selectedIds.has(adherent.id)}
onChange={(e) => handleSelectOne(adherent.id, e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue mt-1"
/>
{/* Avatar */}
<div className="w-12 h-12 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold flex-shrink-0">
{getInitials(adherent.nom, adherent.prenom)}
</div>
{/* Contenu principal */}
<div className="flex-1 min-w-0">
{/* Nom et date de naissance */}
<div className="mb-2">
<div className="text-base font-semibold text-gray-900">
{adherent.prenom} {adherent.nom}
</div>
<div className="text-xs text-gray-500">
Né le {formatDate(adherent.dateNaissance)}
</div>
)}
<div className="flex items-center gap-2 mt-1">
<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>
<span className="text-sm text-gray-500">{adherent.email}</span>
</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">{adherent.adresse}</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">
{adherent.prescripteur || '-'}
{/* Contact */}
<div className="mb-2">
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Contact</div>
<a href={`tel:${adherent.telephone}`} className="text-sm text-gray-900 block truncate">
{adherent.telephone} <span className="text-xs text-gray-500">(Principal)</span>
</a>
{adherent.telephoneSecondaire && (
<a href={`tel:${adherent.telephoneSecondaire}`} className="text-sm text-gray-600 block truncate">
{adherent.telephoneSecondaire} <span className="text-xs text-gray-500">(Secondaire)</span>
</a>
)}
<a href={`mailto:${adherent.email}`} className="text-sm text-gray-500 block truncate">
{adherent.email}
</a>
</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-900">
{adherent.situation || '-'}
{/* Adresse */}
<div className="mb-2">
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Adresse</div>
<div className="text-sm text-gray-900 line-clamp-2">
{adherent.adresse}
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-3">
{/* Prescripteur et Situation */}
<div className="mb-3 flex flex-wrap gap-3">
{adherent.prescripteur && (
<div>
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Prescripteur</div>
<div className="text-sm text-gray-900">{adherent.prescripteur}</div>
</div>
)}
{adherent.situation && (
<div>
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Situation</div>
<div className="text-sm text-gray-900">{adherent.situation}</div>
</div>
)}
</div>
{/* Actions */}
<div className="flex items-center gap-4 pt-2 border-t border-gray-200">
<button
onClick={() => handleView(adherent.id)}
className="text-lblue hover:text-dblue"
title="Voir"
className="flex items-center gap-1 text-lblue hover:text-dblue text-sm"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" 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>
Voir
</button>
<button
onClick={() => handleEdit(adherent)}
className="text-lblue hover:text-dblue"
title="Modifier"
className="flex items-center gap-1 text-lblue hover:text-dblue text-sm"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
<button
onClick={() => handleDelete(adherent.id)}
className="text-red-500 hover:text-red-700"
title="Supprimer"
className="flex items-center gap-1 text-red-500 hover:text-red-700 text-sm ml-auto"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" 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>
Supprimer
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
))}
</div>
</>
)}
</div>
@@ -1134,29 +1246,29 @@ export default function AdherentsTable() {
{/* 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-xl shadow-2xl max-w-5xl w-full max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-0 md:p-4 animate-fadeIn">
<div className="bg-white rounded-none md:rounded-xl shadow-2xl max-w-5xl w-full h-full md:h-auto md:max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border-0 md:border border-gray-200">
{/* Header épuré */}
<div className="border-b border-gray-200 px-8 py-6 bg-white">
<div className="border-b border-gray-200 px-4 md:px-8 py-4 md: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">
<div className="flex items-center gap-3 md:gap-5 flex-1 min-w-0">
<div className="w-12 h-12 md:w-16 md:h-16 rounded-full bg-lblue flex items-center justify-center text-white font-bold text-lg md:text-xl border-2 md:border-4 border-lblue/10 shadow-sm flex-shrink-0">
{getInitials(viewingAdherent.nom, viewingAdherent.prenom)}
</div>
<div>
<h2 className="text-2xl font-bold text-gray-900 mb-1">
<div className="flex-1 min-w-0">
<h2 className="text-xl md:text-2xl font-bold text-gray-900 mb-1 truncate">
{viewingAdherent.prenom} {viewingAdherent.nom}
</h2>
<p className="text-gray-500 text-sm">
<p className="text-gray-500 text-xs md: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-2 hover:bg-gray-100 rounded-lg"
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg flex-shrink-0 ml-2"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-5 h-5 md:w-6 md: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>
@@ -1165,57 +1277,57 @@ export default function AdherentsTable() {
{/* Contenu scrollable */}
<div className="flex-1 overflow-y-auto">
<div className="p-8">
<div className="p-4 md:p-8">
{/* Actions rapides */}
<div className="mb-8 flex flex-wrap gap-3">
<div className="mb-6 md:mb-8 flex flex-wrap gap-2 md: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"
className="flex items-center gap-2 px-3 md: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 flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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>
<span className="text-xs md: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"
className="flex items-center gap-2 px-3 md: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 flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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>
<span className="text-xs md: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"
className="flex items-center gap-2 px-3 md: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 flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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>
<span className="text-xs md:text-sm font-medium">Envoyer un email</span>
</a>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md: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">
<div className="bg-white rounded-lg md:rounded-xl border border-gray-200 p-4 md:p-6 shadow-sm">
<div className="flex items-center gap-2 md:gap-3 mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-lblue/10 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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">
<h3 className="text-base md:text-lg font-semibold text-gray-900">
Informations principales
</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">
<div className="space-y-3 md:space-y-4">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
</div>
@@ -1225,39 +1337,39 @@ export default function AdherentsTable() {
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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:${viewingAdherent.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors">
<a href={`tel:${viewingAdherent.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
{viewingAdherent.telephone}
</a>
</div>
</div>
{viewingAdherent.telephoneSecondaire && (
<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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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 secondaire</p>
<a href={`tel:${viewingAdherent.telephoneSecondaire}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors">
<a href={`tel:${viewingAdherent.telephoneSecondaire}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
{viewingAdherent.telephoneSecondaire}
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
@@ -1269,38 +1381,38 @@ export default function AdherentsTable() {
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
<p className="text-sm font-semibold text-gray-900 break-words">{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">
<div className="bg-white rounded-lg md:rounded-xl border border-gray-200 p-4 md:p-6 shadow-sm">
<div className="flex items-center gap-2 md:gap-3 mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-lblue/10 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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">
<h3 className="text-base md:text-lg font-semibold text-gray-900">
Informations complémentaires
</h3>
</div>
<div className="space-y-4">
<div className="space-y-3 md: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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
@@ -1312,9 +1424,9 @@ export default function AdherentsTable() {
)}
{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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
@@ -1326,9 +1438,9 @@ export default function AdherentsTable() {
)}
{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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
@@ -1340,9 +1452,9 @@ export default function AdherentsTable() {
)}
{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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
@@ -1354,29 +1466,29 @@ export default function AdherentsTable() {
)}
{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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
<p className="text-sm font-semibold text-gray-900 whitespace-pre-wrap break-words">{viewingAdherent.commentaire}</p>
</div>
</div>
)}
{viewingAdherent.instructions && (
<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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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 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>
<p className="text-sm font-semibold text-gray-900 whitespace-pre-wrap break-words">{viewingAdherent.instructions}</p>
</div>
</div>
)}
@@ -1393,11 +1505,11 @@ export default function AdherentsTable() {
</div>
{/* Footer avec actions */}
<div className="border-t border-gray-200 px-8 py-5 bg-white">
<div className="flex items-center justify-between">
<div className="border-t border-gray-200 px-4 md:px-8 py-4 md:py-5 bg-white">
<div className="flex flex-col-reverse md:flex-row items-stretch md:items-center justify-between gap-3 md:gap-0">
<button
onClick={() => setViewingAdherent(null)}
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"
className="px-4 md: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 w-full md:w-auto"
>
Fermer
</button>
@@ -1406,9 +1518,9 @@ export default function AdherentsTable() {
setViewingAdherent(null);
handleEdit(viewingAdherent);
}}
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"
className="px-4 md:px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors flex items-center justify-center gap-2 w-full md:w-auto"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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 l'adhérent

58
components/ArchivesTrajets.tsx
View File

@@ -130,8 +130,8 @@ export default function ArchivesTrajets() {
if (loading) {
return (
<div className="bg-white rounded-lg shadow-sm p-8">
<div className="text-center text-gray-500">Chargement des archives...</div>
<div className="bg-white rounded-lg shadow-sm p-4 md:p-8">
<div className="text-center text-sm md:text-base text-gray-500">Chargement des archives...</div>
</div>
);
}
@@ -139,18 +139,18 @@ export default function ArchivesTrajets() {
return (
<div className="bg-white rounded-lg shadow-sm">
{/* Barre de recherche */}
<div className="p-6 border-b border-gray-200">
<div className="flex items-center gap-4">
<div className="p-3 md:p-4 lg:p-6 border-b border-gray-200">
<div className="flex items-center gap-2 md:gap-4">
<div className="flex-1 relative">
<input
type="text"
placeholder="Rechercher dans les archives..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-4 py-2.5 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-lblue focus:border-transparent"
className="w-full px-3 md:px-4 py-2 md:py-2.5 pl-9 md:pl-10 text-sm md:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-lblue focus:border-transparent"
/>
<svg
className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"
className="w-4 h-4 md:w-5 md:h-5 text-gray-400 absolute left-2.5 md:left-3 top-1/2 transform -translate-y-1/2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -162,73 +162,73 @@ export default function ArchivesTrajets() {
</div>
{/* Liste des trajets archivés */}
<div className="p-6">
<div className="p-3 md:p-4 lg:p-6">
{filteredTrajets.length === 0 ? (
<div className="text-center py-12 text-gray-500">
<div className="text-center py-8 md:py-12 text-sm md:text-base text-gray-500">
{searchTerm ? 'Aucun trajet trouvé' : 'Aucun trajet archivé'}
</div>
) : (
<div className="space-y-4">
<div className="space-y-3 md:space-y-4">
{filteredTrajets.map((trajet) => (
<div
key={trajet.id}
className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
className="border border-gray-200 rounded-lg p-3 md:p-4 hover:shadow-md transition-shadow"
>
<div className="flex items-start justify-between">
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-3 md:gap-4">
<div className="flex-1">
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold text-sm">
<div className="flex items-center gap-2 md:gap-3 mb-2 md:mb-3 flex-wrap">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-lgreen flex items-center justify-center text-white font-semibold text-xs md:text-sm flex-shrink-0">
{getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
</div>
<div>
<div className="font-semibold text-gray-900">
<div className="flex-1 min-w-0">
<div className="font-semibold text-sm md:text-base text-gray-900 truncate">
{trajet.adherent.prenom} {trajet.adherent.nom}
</div>
<div className="text-sm text-gray-500">
<div className="text-xs md:text-sm text-gray-500">
{formatDate(trajet.date)} à {formatTime(trajet.date)}
</div>
</div>
<span className={`px-2 py-1 text-xs font-medium rounded border ${getStatutColor(trajet.statut)}`}>
<span className={`px-2 py-1 text-xs font-medium rounded border ${getStatutColor(trajet.statut)} flex-shrink-0`}>
{trajet.statut}
</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3 mb-2 md:mb-3">
<div className="flex items-start gap-2">
<div className="w-6 h-6 rounded-full bg-lgreen flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
<div className="w-5 h-5 md:w-6 md:h-6 rounded-full bg-lgreen flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
A
</div>
<div>
<div className="min-w-0 flex-1">
<div className="text-xs text-gray-500">Départ</div>
<div className="text-sm text-gray-900">{trajet.adresseDepart}</div>
<div className="text-xs md:text-sm text-gray-900 break-words">{trajet.adresseDepart}</div>
</div>
</div>
<div className="flex items-start gap-2">
<div className="w-6 h-6 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
<div className="w-5 h-5 md:w-6 md:h-6 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-bold mt-0.5 flex-shrink-0">
B
</div>
<div>
<div className="min-w-0 flex-1">
<div className="text-xs text-gray-500">Arrivée</div>
<div className="text-sm text-gray-900">{trajet.adresseArrivee}</div>
<div className="text-xs md:text-sm text-gray-900 break-words">{trajet.adresseArrivee}</div>
</div>
</div>
</div>
{trajet.chauffeur && (
<div className="flex items-center gap-2 text-sm text-gray-600">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-600">
<svg className="w-3.5 h-3.5 md:w-4 md:h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}</span>
<span className="truncate">Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}</span>
</div>
)}
</div>
<button
onClick={() => handleRestoreClick(trajet.id)}
className="ml-4 px-4 py-2 text-sm font-medium text-lgreen hover:text-dgreen transition-colors flex items-center gap-2"
className="md:ml-4 px-3 md:px-4 py-2 text-xs md:text-sm font-medium text-lgreen hover:text-dgreen transition-colors flex items-center justify-center gap-1.5 md:gap-2 w-full md:w-auto"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-3.5 h-3.5 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Restaurer

2
components/CalendrierPageContent.tsx
View File

@@ -12,7 +12,7 @@ export default function CalendrierPageContent() {
};
return (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
{/* Calendrier - Prend 2 colonnes sur grand écran */}
<div className="lg:col-span-2">
<CalendrierTrajets refreshTrigger={refreshTrigger} />

84
components/CalendrierTrajets.tsx
View File

@@ -97,16 +97,16 @@ function DraggableTrajetEvent({ trajet, onClick }: { trajet: Trajet; onClick: (e
{...listeners}
{...attributes}
onClick={(e) => onClick(e, trajet)}
className={`text-[10px] px-1.5 py-0.5 rounded border ${styleObj.bg} ${styleObj.text} ${styleObj.border} font-semibold truncate w-full text-left transition-all flex items-center gap-1 ${canDrag ? 'hover:shadow-md cursor-grab active:cursor-grabbing' : 'cursor-default opacity-75'} ${isDragging ? 'opacity-50' : ''}`}
className={`text-[9px] sm:text-[10px] px-1 sm:px-1.5 py-0.5 rounded border ${styleObj.bg} ${styleObj.text} ${styleObj.border} font-semibold truncate w-full text-left transition-all flex items-center gap-0.5 sm:gap-1 ${canDrag ? 'hover:shadow-md cursor-grab active:cursor-grabbing' : 'cursor-default opacity-75'} ${isDragging ? 'opacity-50' : ''}`}
title={`${trajet.adherent.prenom} ${trajet.adherent.nom} - ${trajet.chauffeur ? `${trajet.chauffeur.prenom} ${trajet.chauffeur.nom}` : 'Sans chauffeur'} - ${trajet.statut}`}
>
<span className="font-bold">
<span className="font-bold text-[8px] sm:text-[9px]">
{trajet.chauffeur
? `${trajet.chauffeur.prenom.charAt(0)}${trajet.chauffeur.nom.charAt(0)}`
: '?'}
</span>
<span className="opacity-90">•</span>
<span className="opacity-90">{formatTime(trajet.date)}</span>
<span className="opacity-90 hidden sm:inline">•</span>
<span className="opacity-90 truncate">{formatTime(trajet.date)}</span>
</button>
);
}
@@ -137,7 +137,7 @@ function DroppableDayCell({
<button
ref={setNodeRef}
onClick={() => onDateClick(date)}
className={`h-24 p-2 rounded-lg border-2 transition-all flex flex-col ${
className={`h-16 sm:h-20 md:h-24 p-1 sm:p-1.5 md:p-2 rounded-lg border-2 transition-all flex flex-col ${
isSelected
? 'border-lblue bg-lblue/10'
: isToday
@@ -369,34 +369,34 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
}
return (
<div className="bg-white rounded-lg shadow-sm p-6">
<div className="bg-white rounded-lg shadow-sm p-4 sm:p-6">
{/* En-tête du calendrier */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-semibold text-gray-900">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0 mb-4 sm:mb-6">
<h2 className="text-lg sm:text-xl font-semibold text-gray-900 capitalize">
{currentDate.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}
</h2>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 w-full sm:w-auto">
<button
onClick={goToPreviousMonth}
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
className="p-1.5 sm:p-2 rounded-lg hover:bg-gray-100 transition-colors"
title="Mois précédent"
>
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
onClick={goToToday}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
className="px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors flex-1 sm:flex-initial"
>
Aujourd'hui
</button>
<button
onClick={goToNextMonth}
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
className="p-1.5 sm:p-2 rounded-lg hover:bg-gray-100 transition-colors"
title="Mois suivant"
>
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
@@ -404,15 +404,15 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
</div>
{loading ? (
<div className="text-center py-8 text-gray-500">Chargement...</div>
<div className="text-center py-6 sm:py-8 text-sm text-gray-500">Chargement...</div>
) : (
<>
{/* Grille du calendrier avec drag and drop */}
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<div className="grid grid-cols-7 gap-2 mb-6">
<div className="grid grid-cols-7 gap-1 sm:gap-2 mb-4 sm:mb-6">
{/* En-têtes des jours */}
{days.map((day) => (
<div key={day} className="text-center text-sm font-semibold text-gray-600 py-2">
<div key={day} className="text-center text-[10px] sm:text-xs md:text-sm font-semibold text-gray-600 py-1 sm:py-2">
{day}
</div>
))}
@@ -442,21 +442,21 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
isSelected={isSelected}
onDateClick={handleDateClick}
>
<div className="text-sm font-medium text-gray-900 mb-1">
<div className="text-xs sm:text-sm font-medium text-gray-900 mb-0.5 sm:mb-1">
{date.getDate()}
</div>
{trajetsDuJour.length > 0 && (
<div className="space-y-1 flex-1 overflow-hidden">
{trajetsDuJour.slice(0, 3).map((trajet) => (
<div className="space-y-0.5 sm:space-y-1 flex-1 overflow-hidden">
{trajetsDuJour.slice(0, 2).map((trajet) => (
<DraggableTrajetEvent
key={trajet.id}
trajet={trajet}
onClick={handleTrajetClick}
/>
))}
{trajetsDuJour.length > 3 && (
<div className="text-[10px] text-gray-500 font-semibold text-center pt-0.5">
+{trajetsDuJour.length - 3}
{trajetsDuJour.length > 2 && (
<div className="text-[9px] sm:text-[10px] text-gray-500 font-semibold text-center pt-0.5">
+{trajetsDuJour.length - 2}
</div>
)}
</div>
@@ -484,11 +484,11 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
{/* Détails des trajets du jour sélectionné */}
{selectedDate && selectedTrajets.length > 0 && (
<div className="mt-6 pt-6 border-t border-gray-200">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
<div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-200">
<h3 className="text-base sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4">
Trajets du {formatDate(selectedDate)}
</h3>
<div className="space-y-3">
<div className="space-y-2 sm:space-y-3">
{selectedTrajets.map((trajet) => {
const getStatutColor = (statut: string) => {
switch (statut) {
@@ -509,55 +509,55 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
<button
key={trajet.id}
onClick={() => setSelectedTrajet(trajet)}
className="w-full p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all text-left"
className="w-full p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all text-left"
>
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<span className="text-sm font-semibold text-gray-900">
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-2">
<span className="text-xs sm:text-sm font-semibold text-gray-900">
{trajet.adherent.prenom} {trajet.adherent.nom}
</span>
<span className="px-2 py-0.5 text-xs font-medium rounded bg-lblue/10 text-lblue">
<span className="px-1.5 sm:px-2 py-0.5 text-[10px] sm:text-xs font-medium rounded bg-lblue/10 text-lblue">
{formatTime(trajet.date)}
</span>
<span
className={`px-2 py-0.5 text-xs font-medium rounded border ${getStatutColor(trajet.statut)}`}
className={`px-1.5 sm:px-2 py-0.5 text-[10px] sm:text-xs font-medium rounded border ${getStatutColor(trajet.statut)}`}
>
{trajet.statut}
</span>
</div>
<div className="text-sm text-gray-600 mb-1">
<div className="text-xs sm:text-sm text-gray-600 mb-1 break-words">
<span className="font-medium">Départ:</span> {trajet.adresseDepart}
</div>
<div className="text-sm text-gray-600 mb-2">
<div className="text-xs sm:text-sm text-gray-600 mb-2 break-words">
<span className="font-medium">Arrivée:</span> {trajet.adresseArrivee}
</div>
{trajet.chauffeur ? (
<div className="flex items-center gap-2 mt-2">
<svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span className="text-sm font-medium text-gray-900">
<span className="text-xs sm:text-sm font-medium text-gray-900 truncate">
Chauffeur: {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
</span>
</div>
) : (
<div className="flex items-center gap-2 mt-2">
<svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-orange-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span className="text-sm text-orange-600 font-medium">
<span className="text-xs sm:text-sm text-orange-600 font-medium">
Aucun chauffeur assigné
</span>
</div>
)}
{trajet.commentaire && (
<div className="mt-2 text-sm text-gray-500 italic line-clamp-2">
<div className="mt-2 text-xs sm:text-sm text-gray-500 italic line-clamp-2 break-words">
{trajet.commentaire}
</div>
)}
</div>
<svg className="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>
@@ -569,7 +569,7 @@ export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsP
)}
{selectedDate && selectedTrajets.length === 0 && (
<div className="mt-6 pt-6 border-t border-gray-200 text-center text-gray-500">
<div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-200 text-center text-xs sm:text-sm text-gray-500">
Aucun trajet prévu pour le {formatDate(selectedDate)}
</div>
)}

54
components/ChatWindow.tsx
View File

@@ -46,6 +46,7 @@ interface ChatWindowProps {
conversation: Conversation;
onNewMessage: () => void;
onShowGroupSettings: () => void;
onShowSidebar?: () => void;
}
const fetcher = (url: string) => fetch(url).then((res) => res.json());
@@ -55,6 +56,7 @@ export default function ChatWindow({
conversation,
onNewMessage,
onShowGroupSettings,
onShowSidebar,
}: ChatWindowProps) {
const [message, setMessage] = useState('');
const [files, setFiles] = useState<File[]>([]);
@@ -288,10 +290,22 @@ export default function ChatWindow({
return (
<div className="flex flex-col h-full">
{/* En-tête */}
<div className="p-4 border-b border-gray-200 flex items-center justify-between bg-white">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center">
<span className="text-white font-semibold text-sm">
<div className="p-3 md:p-4 border-b border-gray-200 flex items-center justify-between bg-white">
<div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
{/* Bouton retour sur mobile */}
{onShowSidebar && (
<button
onClick={onShowSidebar}
className="p-2 rounded-lg hover:bg-gray-100 transition-colors md:hidden flex-shrink-0"
title="Retour aux conversations"
>
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
)}
<div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center flex-shrink-0">
<span className="text-white font-semibold text-xs md:text-sm">
{conversation.type === 'group'
? conversation.displayName.charAt(0).toUpperCase()
: conversation.displayName
@@ -302,8 +316,8 @@ export default function ChatWindow({
.slice(0, 2)}
</span>
</div>
<div>
<h3 className="font-semibold text-gray-900">{conversation.displayName}</h3>
<div className="flex-1 min-w-0">
<h3 className="font-semibold text-gray-900 text-sm md:text-base truncate">{conversation.displayName}</h3>
{conversation.type === 'group' && (
<p className="text-xs text-gray-500">
{conversation.participants.length} participant{conversation.participants.length > 1 ? 's' : ''}
@@ -314,7 +328,7 @@ export default function ChatWindow({
{conversation.type === 'group' && (
<button
onClick={onShowGroupSettings}
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
className="p-2 rounded-lg hover:bg-gray-100 transition-colors flex-shrink-0"
title="Paramètres du groupe"
>
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -325,7 +339,7 @@ export default function ChatWindow({
</div>
{/* Messages */}
<div className="flex-1 overflow-y-auto p-4 bg-gray-50">
<div className="flex-1 overflow-y-auto p-2 md:p-4 bg-gray-50">
{error && (
<div className="text-center text-red-600 py-4">
Erreur lors du chargement des messages
@@ -348,7 +362,7 @@ export default function ChatWindow({
className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
>
<div
className={`max-w-[70%] rounded-lg p-3 ${
className={`max-w-[85%] md:max-w-[70%] rounded-lg p-2 md:p-3 ${
isOwnMessage
? 'bg-lblue text-white'
: 'bg-white text-gray-900 border border-gray-200'
@@ -507,19 +521,19 @@ export default function ChatWindow({
</div>
{/* Zone de saisie */}
<div className="p-4 border-t border-gray-200 bg-white">
<div className="p-2 md:p-4 border-t border-gray-200 bg-white">
{/* Fichiers sélectionnés */}
{files.length > 0 && (
<div className="mb-2 flex flex-wrap gap-2">
{files.map((file, index) => (
<div
key={index}
className="flex items-center gap-2 bg-gray-100 rounded-lg px-3 py-2 text-sm"
className="flex items-center gap-2 bg-gray-100 rounded-lg px-2 md:px-3 py-1 md:py-2 text-xs md:text-sm"
>
<span className="text-gray-700">{file.name}</span>
<span className="text-gray-700 truncate max-w-[150px] md:max-w-none">{file.name}</span>
<button
onClick={() => removeFile(index)}
className="text-red-600 hover:text-red-700"
className="text-red-600 hover:text-red-700 flex-shrink-0"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
@@ -535,7 +549,7 @@ export default function ChatWindow({
</div>
)}
<div className="flex items-end gap-2">
<div className="flex items-end gap-1 md:gap-2">
<input
type="file"
ref={fileInputRef}
@@ -546,10 +560,10 @@ export default function ChatWindow({
/>
<label
htmlFor="file-input"
className="p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
className="p-1.5 md:p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer flex-shrink-0"
title="Joindre un fichier"
>
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
@@ -563,17 +577,17 @@ export default function ChatWindow({
onChange={handleMessageChange}
onKeyPress={handleKeyPress}
placeholder="Tapez votre message..."
className="flex-1 min-h-[44px] max-h-32 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent resize-none text-gray-900 placeholder-gray-400"
className="flex-1 min-h-[40px] md:min-h-[44px] max-h-32 px-3 md:px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent resize-none text-sm md:text-base text-gray-900 placeholder-gray-400"
rows={1}
/>
<button
onClick={handleSendMessage}
disabled={(!message.trim() && files.length === 0) || isSending}
className="p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="p-1.5 md:p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
title="Envoyer"
>
{isSending ? (
<svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md:h-5 animate-spin" fill="none" viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
@@ -589,7 +603,7 @@ export default function ChatWindow({
/>
</svg>
) : (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"

57
components/ChauffeurForm.tsx
View File

@@ -25,6 +25,7 @@ interface ChauffeurFormProps {
export default function ChauffeurForm({ chauffeur, onClose }: ChauffeurFormProps) {
const [loading, setLoading] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [alertModal, setAlertModal] = useState<{
show: boolean;
type: 'success' | 'error' | 'info' | 'warning';
@@ -44,6 +45,17 @@ export default function ChauffeurForm({ chauffeur, onClose }: ChauffeurFormProps
status: 'Disponible',
});
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768); // md breakpoint
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
useEffect(() => {
if (chauffeur) {
const dateNaissance = new Date(chauffeur.dateNaissance);
@@ -110,6 +122,51 @@ export default function ChauffeurForm({ chauffeur, onClose }: ChauffeurFormProps
}
};
// Si on est sur mobile, afficher un message au lieu du formulaire
if (isMobile) {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
<div className="flex justify-between items-start mb-6">
<div className="flex-1">
<h2 className="text-xl font-semibold text-gray-900 mb-2">
{chauffeur ? 'Modifier le chauffeur' : 'Nouveau chauffeur'}
</h2>
</div>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 ml-4"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="text-center py-8">
<div className="mb-6">
<svg className="w-16 h-16 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-3">
Utilisez un ordinateur
</h3>
<p className="text-sm text-gray-600 mb-6">
Pour {chauffeur ? 'modifier' : 'créer'} un chauffeur, veuillez utiliser un ordinateur. Cette fonctionnalité n'est pas optimisée pour les appareils mobiles.
</p>
<button
onClick={onClose}
className="px-6 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
>
Fermer
</button>
</div>
</div>
</div>
);
}
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">

407
components/ChauffeursTable.tsx
View File

@@ -617,104 +617,217 @@ export default function ChauffeursTable() {
</div>
{/* Boutons d'action */}
<div className="flex gap-3">
<div className="flex gap-2 md:gap-3 w-full md:w-auto">
<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"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors text-sm md:text-base flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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
<span className="hidden sm:inline">Nouveau chauffeur</span>
<span className="sm:hidden">Nouveau</span>
</button>
<button
onClick={() => setShowImportModal(true)}
className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm md:text-base"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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
<span className="hidden sm:inline">Importer</span>
</button>
<button
onClick={handleExport}
disabled={selectedIds.size === 0}
className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm md:text-base"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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 {selectedIds.size > 0 && `(${selectedIds.size})`}
<span className="hidden sm:inline">Exporter</span>
{selectedIds.size > 0 && <span className="ml-1">({selectedIds.size})</span>}
</button>
</div>
</div>
</div>
{/* Tableau */}
{/* Tableau - Desktop */}
<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">
<input
type="checkbox"
checked={chauffeurs.length > 0 && selectedIds.size === chauffeurs.length}
onChange={(e) => handleSelectAll(e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</th>
<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">
<>
{/* Vue desktop - Tableau */}
<div className="hidden md:block 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">
<input
type="checkbox"
checked={selectedIds.has(chauffeur.id)}
onChange={(e) => handleSelectOne(chauffeur.id, e.target.checked)}
checked={chauffeurs.length > 0 && selectedIds.size === chauffeurs.length}
onChange={(e) => handleSelectAll(e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</td>
<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)}
</th>
<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">
<input
type="checkbox"
checked={selectedIds.has(chauffeur.id)}
onChange={(e) => handleSelectOne(chauffeur.id, e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</td>
<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>
<div>
<div className="text-sm font-semibold text-gray-900">
{chauffeur.prenom} {chauffeur.nom}
</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="text-sm text-gray-500">
Né le {formatDate(chauffeur.dateNaissance)}
<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>
{/* Vue mobile - Cartes */}
<div className="md:hidden divide-y divide-gray-200">
{chauffeurs.map((chauffeur) => (
<div key={chauffeur.id} className="p-4 hover:bg-gray-50">
<div className="flex items-start gap-3">
{/* Checkbox */}
<input
type="checkbox"
checked={selectedIds.has(chauffeur.id)}
onChange={(e) => handleSelectOne(chauffeur.id, e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue mt-1"
/>
{/* Avatar */}
<div className="w-12 h-12 rounded-full bg-lorange flex items-center justify-center text-white font-semibold flex-shrink-0">
{getInitials(chauffeur.nom, chauffeur.prenom)}
</div>
{/* Contenu principal */}
<div className="flex-1 min-w-0">
{/* Nom et date de naissance */}
<div className="mb-2">
<div className="text-base font-semibold text-gray-900">
{chauffeur.prenom} {chauffeur.nom}
</div>
<div className="text-xs text-gray-500">
Né le {formatDate(chauffeur.dateNaissance)}
</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">
{/* Contact */}
<div className="mb-2">
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Contact</div>
<a href={`tel:${chauffeur.telephone}`} className="text-sm text-gray-900 block truncate">
{chauffeur.telephone}
</a>
<a href={`mailto:${chauffeur.email}`} className="text-sm text-gray-500 block truncate">
{chauffeur.email}
</a>
</div>
{/* Adresse */}
<div className="mb-2">
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Adresse</div>
<div className="text-sm text-gray-900 line-clamp-2">
{chauffeur.adresse}
</div>
</div>
{/* Heures */}
<div className="mb-2">
<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
@@ -727,51 +840,53 @@ export default function ChauffeursTable() {
></div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
{/* Status */}
{chauffeur.status && (
<span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(chauffeur.status)}`}>
{chauffeur.status}
</span>
<div className="mb-3">
<span className={`px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded-full ${getStatusColor(chauffeur.status)}`}>
{chauffeur.status}
</span>
</div>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-3">
{/* Actions */}
<div className="flex items-center gap-4 pt-2 border-t border-gray-200">
<button
onClick={() => handleView(chauffeur.id)}
className="text-lblue hover:text-dblue"
title="Voir"
className="flex items-center gap-1 text-lblue hover:text-dblue text-sm"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" 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>
Voir
</button>
<button
onClick={() => handleEdit(chauffeur)}
className="text-lblue hover:text-dblue"
title="Modifier"
className="flex items-center gap-1 text-lblue hover:text-dblue text-sm"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
<button
onClick={() => handleDelete(chauffeur.id)}
className="text-red-500 hover:text-red-700"
title="Supprimer"
className="flex items-center gap-1 text-red-500 hover:text-red-700 text-sm ml-auto"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" 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>
Supprimer
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
))}
</div>
</>
)}
</div>
@@ -1020,25 +1135,25 @@ export default function ChauffeursTable() {
{/* 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-xl shadow-2xl max-w-5xl w-full max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-0 md:p-4 animate-fadeIn">
<div className="bg-white rounded-none md:rounded-xl shadow-2xl max-w-5xl w-full h-full md:h-auto md:max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border-0 md:border border-gray-200">
{/* Header épuré */}
<div className="border-b border-gray-200 px-8 py-6 bg-white">
<div className="border-b border-gray-200 px-4 md:px-8 py-4 md: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">
<div className="flex items-center gap-3 md:gap-5 flex-1 min-w-0">
<div className="w-12 h-12 md:w-16 md:h-16 rounded-full bg-lblue flex items-center justify-center text-white font-bold text-lg md:text-xl border-2 md:border-4 border-lblue/10 shadow-sm flex-shrink-0">
{getInitials(viewingChauffeur.nom, viewingChauffeur.prenom)}
</div>
<div>
<h2 className="text-2xl font-bold text-gray-900 mb-1">
<div className="flex-1 min-w-0">
<h2 className="text-xl md:text-2xl font-bold text-gray-900 mb-1 truncate">
{viewingChauffeur.prenom} {viewingChauffeur.nom}
</h2>
<p className="text-gray-500 text-sm mb-2">
<p className="text-gray-500 text-xs md: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)}`}>
<span className={`px-2 md:px-3 py-1 text-xs font-semibold rounded-full ${getStatusColor(viewingChauffeur.status)}`}>
{viewingChauffeur.status}
</span>
</div>
@@ -1047,9 +1162,9 @@ export default function ChauffeursTable() {
</div>
<button
onClick={() => setViewingChauffeur(null)}
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg"
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg flex-shrink-0 ml-2"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-5 h-5 md:w-6 md: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>
@@ -1058,46 +1173,46 @@ export default function ChauffeursTable() {
{/* Contenu scrollable */}
<div className="flex-1 overflow-y-auto">
<div className="p-8">
<div className="p-4 md:p-8">
{/* Actions rapides */}
<div className="mb-8 flex flex-wrap gap-3">
<div className="mb-6 md:mb-8 flex flex-wrap gap-2 md: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"
className="flex items-center gap-2 px-3 md: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 flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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>
<span className="text-xs md: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"
className="flex items-center gap-2 px-3 md: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 flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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>
<span className="text-xs md:text-sm font-medium">Envoyer un email</span>
</a>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md: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">
<div className="bg-white rounded-lg md:rounded-xl border border-gray-200 p-4 md:p-6 shadow-sm">
<div className="flex items-center gap-2 md:gap-3 mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-lblue/10 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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">
<h3 className="text-base md:text-lg font-semibold text-gray-900">
Informations personnelles
</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">
<div className="space-y-3 md:space-y-4">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
</div>
@@ -1107,23 +1222,23 @@ export default function ChauffeursTable() {
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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:${viewingChauffeur.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors">
<a href={`tel:${viewingChauffeur.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
{viewingChauffeur.telephone}
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
@@ -1135,49 +1250,49 @@ export default function ChauffeursTable() {
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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">{viewingChauffeur.adresse}</p>
<p className="text-sm font-semibold text-gray-900 break-words">{viewingChauffeur.adresse}</p>
</div>
</div>
</div>
</div>
{/* 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">
<div className="bg-white rounded-lg md:rounded-xl border border-gray-200 p-4 md:p-6 shadow-sm">
<div className="flex items-center gap-2 md:gap-3 mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-lblue/10 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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">
<h3 className="text-base md:text-lg font-semibold text-gray-900">
Informations contractuelles
</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">
<div className="space-y-3 md:space-y-4">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
</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>
<p className="text-base md:text-lg font-bold text-gray-900">{viewingChauffeur.heuresContrat}h</p>
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
</div>
@@ -1188,9 +1303,9 @@ export default function ChauffeursTable() {
</div>
{viewingChauffeur.dateFinContrat && (
<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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
</div>
@@ -1203,15 +1318,15 @@ export default function ChauffeursTable() {
{viewingChauffeur.heuresRestantes !== undefined && (
<div className="pt-2">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center justify-between mb-2 md: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 className="text-base md:text-lg font-bold text-gray-900">
{viewingChauffeur.heuresRestantes}h <span className="text-xs md:text-sm font-normal text-gray-500">/ {viewingChauffeur.heuresContrat}h</span>
</span>
</div>
<div className="relative w-full bg-gray-200 rounded-full h-3 overflow-hidden">
<div className="relative w-full bg-gray-200 rounded-full h-2 md:h-3 overflow-hidden">
<div
className={`h-3 rounded-full transition-all duration-500 ${
className={`h-2 md:h-3 rounded-full transition-all duration-500 ${
(viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) < 0.2
? 'bg-orange-500'
: (viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) < 0.5
@@ -1233,11 +1348,11 @@ export default function ChauffeursTable() {
</div>
{/* Footer avec actions */}
<div className="border-t border-gray-200 px-8 py-5 bg-white">
<div className="flex items-center justify-between">
<div className="border-t border-gray-200 px-4 md:px-8 py-4 md:py-5 bg-white">
<div className="flex flex-col-reverse md:flex-row items-stretch md:items-center justify-between gap-3 md:gap-0">
<button
onClick={() => setViewingChauffeur(null)}
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"
className="px-4 md: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 w-full md:w-auto"
>
Fermer
</button>
@@ -1246,9 +1361,9 @@ export default function ChauffeursTable() {
setViewingChauffeur(null);
handleEdit(viewingChauffeur);
}}
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"
className="px-4 md:px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors flex items-center justify-center gap-2 w-full md:w-auto"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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 le chauffeur

39
components/ConfigurationContent.tsx
View File

@@ -170,6 +170,7 @@ OptionCard.displayName = 'OptionCard';
export default function ConfigurationContent() {
const router = useRouter();
const { showNotification } = useNotification();
const [isMobile, setIsMobile] = useState(false);
const [activeConfigSection, setActiveConfigSection] = useState<'adherents' | 'comptes' | 'roles' | null>('adherents');
const [options, setOptions] = useState<OptionsByType>({
situation: [],
@@ -225,6 +226,15 @@ export default function ConfigurationContent() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
const handleAdd = useCallback(async (type: 'situation' | 'prescripteur' | 'facturation' | 'forfait') => {
const currentValue = newValue[type]?.trim() || '';
if (!currentValue) {
@@ -1097,6 +1107,35 @@ export default function ConfigurationContent() {
);
};
// Afficher une modale sur mobile
if (isMobile) {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6 md:p-8">
<div className="text-center mb-6">
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-lblue/10 flex items-center justify-center mx-auto mb-4">
<svg className="w-8 h-8 md:w-10 md:h-10 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h2 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
Configuration sur ordinateur recommandée
</h2>
<p className="text-sm md:text-base text-gray-600">
Pour une meilleure expérience, veuillez utiliser un ordinateur pour accéder à la configuration de la plateforme.
</p>
</div>
<button
onClick={() => router.push('/dashboard/parametres')}
className="w-full px-4 py-3 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors font-medium text-sm md:text-base"
>
Retour aux paramètres
</button>
</div>
</div>
);
}
return (
<div className="p-6">
<div className="mb-6 flex items-center gap-4">

170
components/DashboardContent.tsx
View File

@@ -156,54 +156,54 @@ export default function DashboardContent({ userName }: DashboardContentProps) {
};
return (
<div className="p-6 space-y-8">
<div className="p-4 sm:p-6 space-y-6 sm:space-y-8">
{/* En-tête */}
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">
<div className="mb-6 sm:mb-8">
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
Content de vous revoir <span className="text-dyellow">{userName || 'Utilisateur'}</span>
</h1>
<p className="text-sm text-gray-600">
<p className="text-xs sm:text-sm text-gray-600">
Bienvenue sur votre tableau de bord.
</p>
</div>
{/* Statistiques */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5">
{/* Participations du mois */}
<div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
<div className="flex items-start justify-between mb-4">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<svg className="w-6 h-6 text-dyellow" fill="currentColor" viewBox="0 0 24 24">
<div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
<div className="flex items-start justify-between mb-3 sm:mb-4">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-dyellow" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/>
</svg>
</div>
</div>
<div>
<p className="text-xs text-gray-600 mb-2 font-medium uppercase tracking-wide">Participations du mois</p>
<p className="text-3xl font-bold text-gray-900 mb-2">
<p className="text-[10px] sm:text-xs text-gray-600 mb-1.5 sm:mb-2 font-medium uppercase tracking-wide">Participations du mois</p>
<p className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1.5 sm:mb-2">
{stats ? `${stats.participationsMois.montant.toFixed(2).replace('.', ',')}€` : '0,00€'}
</p>
<p className="text-xs text-gray-500 font-medium">
<p className="text-[10px] sm:text-xs text-gray-500 font-medium">
{stats ? `${stats.participationsMois.nombreFactures} ${stats.participationsMois.nombreFactures > 1 ? 'Factures' : 'Facture'}` : '0 Facture'}
</p>
</div>
</div>
{/* Trajets Aujourd'hui */}
<div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
<div className="flex items-start justify-between mb-4">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<svg className="w-6 h-6 text-dyellow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
<div className="flex items-start justify-between mb-3 sm:mb-4">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-dyellow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
</div>
<div>
<p className="text-xs text-gray-600 mb-2 font-medium uppercase tracking-wide">Trajets Aujourd'hui</p>
<p className="text-3xl font-bold text-gray-900 mb-2">
<p className="text-[10px] sm:text-xs text-gray-600 mb-1.5 sm:mb-2 font-medium uppercase tracking-wide">Trajets Aujourd'hui</p>
<p className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1.5 sm:mb-2">
{stats ? stats.trajetsAujourdhui.nombre : 0}
</p>
<p className="text-xs text-gray-500 font-medium">
<p className="text-[10px] sm:text-xs text-gray-500 font-medium">
{stats && stats.trajetsAujourdhui.difference !== 0
? `${stats.trajetsAujourdhui.difference > 0 ? '+' : ''}${stats.trajetsAujourdhui.difference} vs hier`
: 'Aucun changement'}
@@ -212,20 +212,20 @@ export default function DashboardContent({ userName }: DashboardContentProps) {
</div>
{/* Trajets réalisés ce mois */}
<div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
<div className="flex items-start justify-between mb-4">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<svg className="w-6 h-6 text-dyellow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
<div className="flex items-start justify-between mb-3 sm:mb-4">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-dyellow" 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>
<div>
<p className="text-xs text-gray-600 mb-2 font-medium uppercase tracking-wide">Trajets réalisés ce mois</p>
<p className="text-3xl font-bold text-gray-900 mb-2">
<p className="text-[10px] sm:text-xs text-gray-600 mb-1.5 sm:mb-2 font-medium uppercase tracking-wide">Trajets réalisés ce mois</p>
<p className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1.5 sm:mb-2">
{stats ? stats.trajetsRealisesMois.nombre : 0}
</p>
<p className="text-xs text-gray-500 font-medium">
<p className="text-[10px] sm:text-xs text-gray-500 font-medium">
{stats && stats.trajetsRealisesMois.pourcentageEvolution !== 0
? `${stats.trajetsRealisesMois.pourcentageEvolution > 0 ? '+' : ''}${stats.trajetsRealisesMois.pourcentageEvolution}% vs mois dernier`
: 'Aucun changement'}
@@ -234,20 +234,20 @@ export default function DashboardContent({ userName }: DashboardContentProps) {
</div>
{/* Chauffeurs actifs */}
<div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
<div className="flex items-start justify-between mb-4">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<svg className="w-6 h-6 text-dyellow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:shadow-lg hover:border-dyellow/30 transition-all duration-300 group">
<div className="flex items-start justify-between mb-3 sm:mb-4">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-dyellow/20 to-dyellow/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-dyellow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
</div>
<div>
<p className="text-xs text-gray-600 mb-2 font-medium uppercase tracking-wide">Chauffeurs actifs</p>
<p className="text-3xl font-bold text-gray-900 mb-2">
<p className="text-[10px] sm:text-xs text-gray-600 mb-1.5 sm:mb-2 font-medium uppercase tracking-wide">Chauffeurs actifs</p>
<p className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1.5 sm:mb-2">
{stats ? stats.chauffeursActifs.nombre : 0}
</p>
<p className="text-xs text-gray-500 font-medium">
<p className="text-[10px] sm:text-xs text-gray-500 font-medium">
{stats ? `Sur ${stats.chauffeursActifs.total} total` : 'Sur 0 total'}
</p>
</div>
@@ -255,126 +255,126 @@ export default function DashboardContent({ userName }: DashboardContentProps) {
</div>
{/* Actions Rapides et Trajets Récents côte à côte */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5 sm:gap-6">
{/* Actions Rapides */}
<div>
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-bold text-gray-900">Actions Rapides</h2>
<div className="flex items-center justify-between mb-3 sm:mb-4">
<h2 className="text-lg sm:text-xl font-bold text-gray-900">Actions Rapides</h2>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-2 gap-3 sm:gap-4">
<button
onClick={() => setShowTrajetForm(true)}
className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:border-lblue hover:shadow-lg transition-all duration-300 text-left group relative overflow-hidden"
className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:border-lblue hover:shadow-lg transition-all duration-300 text-left group relative overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-br from-lblue/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-lblue/15 to-lblue/5 flex items-center justify-center mb-4 group-hover:scale-110 group-hover:from-lblue/25 group-hover:to-lblue/15 transition-all duration-300">
<svg className="w-6 h-6 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-lblue/15 to-lblue/5 flex items-center justify-center mb-3 sm:mb-4 group-hover:scale-110 group-hover:from-lblue/25 group-hover:to-lblue/15 transition-all duration-300">
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
</svg>
</div>
<h3 className="text-sm font-bold text-gray-900 group-hover:text-lblue transition-colors">Nouveau trajet</h3>
<h3 className="text-xs sm:text-sm font-bold text-gray-900 group-hover:text-lblue transition-colors">Nouveau trajet</h3>
</div>
</button>
<button
onClick={() => setShowAdherentForm(true)}
className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:border-lblue hover:shadow-lg transition-all duration-300 text-left group relative overflow-hidden"
className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:border-lblue hover:shadow-lg transition-all duration-300 text-left group relative overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-br from-lblue/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-lblue/15 to-lblue/5 flex items-center justify-center mb-4 group-hover:scale-110 group-hover:from-lblue/25 group-hover:to-lblue/15 transition-all duration-300">
<svg className="w-6 h-6 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-lblue/15 to-lblue/5 flex items-center justify-center mb-3 sm:mb-4 group-hover:scale-110 group-hover:from-lblue/25 group-hover:to-lblue/15 transition-all duration-300">
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<h3 className="text-sm font-bold text-gray-900 group-hover:text-lblue transition-colors">Nouvel adhérent</h3>
<h3 className="text-xs sm:text-sm font-bold text-gray-900 group-hover:text-lblue transition-colors">Nouvel adhérent</h3>
</div>
</button>
<button
onClick={() => router.push('/dashboard/factures')}
className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:border-lblue hover:shadow-lg transition-all duration-300 text-left group relative overflow-hidden"
className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 hover:border-lblue hover:shadow-lg transition-all duration-300 text-left group relative overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-br from-lblue/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-lblue/15 to-lblue/5 flex items-center justify-center mb-4 group-hover:scale-110 group-hover:from-lblue/25 group-hover:to-lblue/15 transition-all duration-300">
<svg className="w-6 h-6 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-lblue/15 to-lblue/5 flex items-center justify-center mb-3 sm:mb-4 group-hover:scale-110 group-hover:from-lblue/25 group-hover:to-lblue/15 transition-all duration-300">
<svg className="w-5 h-5 sm:w-6 sm:h-6 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-sm font-bold text-gray-900 group-hover:text-lblue transition-colors">Nouvelle facture</h3>
<h3 className="text-xs sm:text-sm font-bold text-gray-900 group-hover:text-lblue transition-colors">Nouvelle facture</h3>
</div>
</button>
<div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100 opacity-60 cursor-not-allowed">
<div className="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center mb-4">
<svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 opacity-60 cursor-not-allowed">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gray-100 flex items-center justify-center mb-3 sm:mb-4">
<svg className="w-5 h-5 sm:w-6 sm:h-6 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>
<h3 className="text-sm font-bold text-gray-400">Bientôt ?</h3>
<h3 className="text-xs sm:text-sm font-bold text-gray-400">Bientôt ?</h3>
</div>
</div>
</div>
{/* Trajets Récents */}
<div>
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-bold text-gray-900">Trajets Récents</h2>
<div className="flex items-center justify-between mb-3 sm:mb-4">
<h2 className="text-lg sm:text-xl font-bold text-gray-900">Trajets Récents</h2>
<button
onClick={fetchTrajetsRecents}
className="text-sm text-lblue hover:text-dblue font-medium flex items-center gap-2"
className="text-xs sm:text-sm text-lblue hover:text-dblue font-medium flex items-center gap-1 sm:gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Actualiser
<span className="hidden sm:inline">Actualiser</span>
</button>
</div>
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
{loading ? (
<div className="text-center py-8 text-gray-500">Chargement...</div>
<div className="text-center py-6 sm:py-8 text-sm text-gray-500">Chargement...</div>
) : trajetsRecents.length === 0 ? (
<div className="text-center py-8 text-gray-500">
<div className="text-center py-6 sm:py-8 text-sm text-gray-500">
Aucun trajet créé récemment
</div>
) : (
<div className="p-6 space-y-3">
<div className="p-4 sm:p-6 space-y-3">
{trajetsRecents.map((trajet) => (
<div
key={trajet.id}
onClick={() => setSelectedTrajet(trajet)}
className="p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all cursor-pointer"
className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all cursor-pointer"
>
<div className="flex items-start gap-4">
<div className="flex items-start gap-3 sm:gap-4">
{/* Avatar adhérent */}
<div className="w-12 h-12 rounded-full bg-lgreen flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-lgreen flex items-center justify-center text-white text-xs sm:text-sm font-semibold flex-shrink-0">
{getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
</div>
{/* Informations principales */}
<div className="flex-1 min-w-0">
<div className="flex items-start justify-between gap-4 mb-2">
<div>
<h3 className="text-sm font-semibold text-gray-900">
<div className="flex items-start justify-between gap-2 sm:gap-4 mb-2">
<div className="flex-1 min-w-0">
<h3 className="text-xs sm:text-sm font-semibold text-gray-900 truncate">
{trajet.adherent.prenom} {trajet.adherent.nom}
</h3>
<div className="flex items-center gap-3 mt-1">
<span className="text-xs text-gray-500 flex items-center gap-1">
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex flex-wrap items-center gap-2 sm:gap-3 mt-1">
<span className="text-[10px] sm:text-xs text-gray-500 flex items-center gap-1">
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
{formatDate(trajet.date)}
</span>
<span className="text-xs text-gray-500 flex items-center gap-1">
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<span className="text-[10px] sm:text-xs text-gray-500 flex items-center gap-1">
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{formatTime(trajet.date)}
</span>
<span
className={`px-2 py-0.5 text-xs font-medium rounded ${
className={`px-1.5 sm:px-2 py-0.5 text-[10px] sm:text-xs font-medium rounded ${
trajet.statut === 'Terminé'
? 'bg-green-100 text-green-700'
: trajet.statut === 'En cours'
@@ -394,36 +394,36 @@ export default function DashboardContent({ userName }: DashboardContentProps) {
{/* Adresses */}
<div className="space-y-1 mb-2">
<div className="text-sm text-gray-600">
<div className="text-xs sm:text-sm text-gray-600">
<span className="font-medium">Départ:</span>{' '}
<span className="text-gray-900">{trajet.adresseDepart}</span>
<span className="text-gray-900 break-words">{trajet.adresseDepart}</span>
</div>
<div className="text-sm text-gray-600">
<div className="text-xs sm:text-sm text-gray-600">
<span className="font-medium">Arrivée:</span>{' '}
<span className="text-gray-900">{trajet.adresseArrivee}</span>
<span className="text-gray-900 break-words">{trajet.adresseArrivee}</span>
</div>
</div>
{/* Chauffeur */}
<div className="flex items-center gap-4 mt-3">
<div className="flex items-center gap-2 sm:gap-4 mt-2 sm:mt-3">
{trajet.chauffeur ? (
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-semibold">
<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-lblue flex items-center justify-center text-white text-[10px] sm:text-xs font-semibold">
{getInitials(trajet.chauffeur.nom, trajet.chauffeur.prenom)}
</div>
<div>
<div className="text-xs text-gray-500">Chauffeur</div>
<div className="text-sm font-medium text-gray-900">
<div className="text-[10px] sm:text-xs text-gray-500">Chauffeur</div>
<div className="text-xs sm:text-sm font-medium text-gray-900">
{trajet.chauffeur.prenom} {trajet.chauffeur.nom}
</div>
</div>
</div>
) : (
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex items-center gap-1.5 sm:gap-2">
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span className="text-sm text-orange-600 font-medium">
<span className="text-xs sm:text-sm text-orange-600 font-medium">
Aucun chauffeur assigné
</span>
</div>
@@ -433,7 +433,7 @@ export default function DashboardContent({ userName }: DashboardContentProps) {
{/* Commentaire */}
{trajet.commentaire && (
<div className="mt-2 pt-2 border-t border-gray-200">
<p className="text-xs text-gray-500 italic">{trajet.commentaire}</p>
<p className="text-[10px] sm:text-xs text-gray-500 italic break-words">{trajet.commentaire}</p>
</div>
)}
</div>

92
components/DashboardLayout.tsx
View File

@@ -33,6 +33,7 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
const [loading, setLoading] = useState(false);
const [showNotifications, setShowNotifications] = useState(false);
const [showProfileMenu, setShowProfileMenu] = useState(false);
const [sidebarOpen, setSidebarOpen] = useState(false);
// Récupérer les conversations pour compter les messages non lus
const { data: conversations } = useSWR<Array<{ unreadCount: number }>>(
@@ -190,10 +191,20 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
return (
<div className="min-h-screen bg-cwhite flex">
{/* Mobile Sidebar Overlay */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
onClick={() => setSidebarOpen(false)}
/>
)}
{/* Sidebar */}
<aside className="w-64 bg-white flex flex-col h-screen sticky top-0 border-r border-gray-200">
<aside className={`fixed lg:static inset-y-0 left-0 z-50 w-64 bg-white flex flex-col h-screen border-r border-gray-200 transform transition-transform duration-300 ease-in-out ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
}`}>
{/* Logo Section */}
<div className="py-5 m-auto">
<div className="py-5 px-4 flex items-center justify-between lg:justify-center">
<div className="flex items-center gap-3">
<Image
src="/logo.svg"
@@ -202,9 +213,19 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
height={32}
/>
<div className="flex items-center gap-2">
<span className="font-semibold text-gray-900">Association MAD</span>
<span className="font-semibold text-gray-900 hidden sm:inline">Association MAD</span>
<span className="font-semibold text-gray-900 sm:hidden">MAD</span>
</div>
</div>
{/* Close button mobile */}
<button
onClick={() => setSidebarOpen(false)}
className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
>
<svg className="w-6 h-6 text-gray-600" 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>
{/* Navigation */}
@@ -228,6 +249,7 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
<li key={item.href}>
<Link
href={item.href}
onClick={() => setSidebarOpen(false)}
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors relative ${
isActive
? 'bg-lblue text-white'
@@ -261,22 +283,32 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
{/* Main Content Area */}
<div className="flex-1 flex flex-col">
{/* Top Navbar */}
<header className="bg-white border-b border-gray-200 px-6 py-4">
<header className="bg-white border-b border-gray-200 px-4 sm:px-6 py-3 sm:py-4">
<div className="flex items-center justify-between">
<h1 className="text-xl font-semibold text-gray-900"></h1>
<div className="flex items-center gap-3">
{/* Hamburger menu button */}
<button
onClick={() => setSidebarOpen(true)}
className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
>
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<h1 className="text-xl font-semibold text-gray-900 hidden lg:block"></h1>
<div className="flex items-center gap-1.5 sm:gap-3">
{/* Notification Button */}
<div className="relative">
<button
onClick={() => setShowNotifications(!showNotifications)}
className="relative w-10 h-10 rounded-lg bg-gray-50 hover:bg-gray-100 border border-gray-200 flex items-center justify-center transition-all duration-200 hover:shadow-sm group"
className="relative w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gray-50 hover:bg-gray-100 border border-gray-200 flex items-center justify-center transition-all duration-200 hover:shadow-sm group"
aria-label={`Notifications${unreadNotificationsCount > 0 ? ` (${unreadNotificationsCount} non lues)` : ''}`}
>
<svg className="w-5 h-5 text-gray-600 group-hover:text-gray-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600 group-hover:text-gray-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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 */}
{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">
<span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 sm:min-w-[18px] sm:h-[18px] bg-red-500 text-white text-[9px] sm:text-[10px] font-semibold rounded-full border-2 border-white flex items-center justify-center px-0.5 sm:px-1">
{unreadNotificationsCount > 99 ? '99+' : unreadNotificationsCount}
</span>
)}
@@ -284,9 +316,9 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
{/* 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 flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-900">Notifications</h3>
<div className="fixed sm:absolute right-2 sm:right-0 top-14 sm:top-12 w-[calc(100vw-1rem)] sm:w-80 max-w-sm bg-white rounded-lg shadow-xl border border-gray-200 z-50 animate-slideUp max-h-[calc(100vh-4rem)] sm:max-h-96 flex flex-col">
<div className="p-3 sm:p-4 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
<h3 className="text-xs sm:text-sm font-semibold text-gray-900">Notifications</h3>
{unreadNotificationsCount > 0 && (
<button
onClick={async () => {
@@ -303,15 +335,15 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
console.error('Erreur lors du marquage des notifications:', error);
}
}}
className="text-xs text-lblue hover:text-dblue font-medium"
className="text-[10px] sm:text-xs text-lblue hover:text-dblue font-medium"
>
Tout marquer comme lu
</button>
)}
</div>
<div className="max-h-96 overflow-y-auto">
<div className="overflow-y-auto flex-1 min-h-0">
{notifications.length === 0 ? (
<div className="p-4 text-center text-sm text-gray-500">
<div className="p-4 text-center text-xs sm:text-sm text-gray-500">
Aucune notification
</div>
) : (
@@ -341,22 +373,22 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
setShowNotifications(false);
}
}}
className={`w-full text-left p-4 hover:bg-gray-50 transition-colors ${
className={`w-full text-left p-3 sm:p-4 hover:bg-gray-50 transition-colors active:bg-gray-100 ${
!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 ${
<div className="flex items-start gap-2 sm:gap-3">
<div className={`flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full mt-1.5 sm: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 ${
<div className="flex items-start sm:items-center justify-between gap-2 mb-1">
<p className={`text-xs sm:text-sm font-medium flex-1 ${
!notification.read ? 'text-gray-900' : 'text-gray-700'
}`}>
{notification.title}
</p>
<span className="text-xs text-gray-400 ml-2 flex-shrink-0">
<span className="text-[10px] sm:text-xs text-gray-400 flex-shrink-0 whitespace-nowrap">
{new Date(notification.createdAt).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'short',
@@ -365,7 +397,7 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
})}
</span>
</div>
<p className="text-xs text-gray-600 line-clamp-2">
<p className="text-[11px] sm:text-xs text-gray-600 line-clamp-2 sm:line-clamp-3">
{notification.message}
</p>
</div>
@@ -383,31 +415,31 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
<div className="relative">
<button
onClick={() => setShowProfileMenu(!showProfileMenu)}
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 border border-gray-200 transition-all duration-200 hover:shadow-sm group"
className="flex items-center gap-2 sm:gap-3 px-2 sm:px-3 py-2 rounded-lg hover:bg-gray-50 border border-gray-200 transition-all duration-200 hover:shadow-sm group"
>
{userPhotoUrl ? (
<img
src={userPhotoUrl}
alt={user.name || 'Utilisateur'}
className="w-9 h-9 rounded-lg object-cover shadow-sm border border-gray-200"
className="w-8 h-8 sm:w-9 sm:h-9 rounded-lg object-cover shadow-sm border border-gray-200"
/>
) : (
<div className="w-9 h-9 rounded-lg bg-gradient-to-br from-lblue to-dblue flex items-center justify-center shadow-sm">
<span className="text-white text-sm font-semibold">{getUserInitials()}</span>
<div className="w-8 h-8 sm:w-9 sm:h-9 rounded-lg bg-gradient-to-br from-lblue to-dblue flex items-center justify-center shadow-sm">
<span className="text-white text-xs sm:text-sm font-semibold">{getUserInitials()}</span>
</div>
)}
<div className="hidden md:block text-left">
<div className="hidden lg:block text-left">
<div className="text-sm font-medium text-gray-900">{user.name || 'Utilisateur'}</div>
<div className="text-xs text-gray-500">{user.email}</div>
</div>
<svg className="w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="hidden sm:block w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{/* Dropdown Profile Menu */}
{showProfileMenu && (
<div className="absolute right-0 top-14 w-56 bg-white rounded-lg shadow-xl border border-gray-200 z-50 animate-slideUp">
<div className="absolute right-0 top-14 w-56 sm:w-64 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="text-sm font-medium text-gray-900">{user.name || 'Utilisateur'}</div>
<div className="text-xs text-gray-500 mt-1">{user.email}</div>
@@ -454,7 +486,7 @@ export default function DashboardLayout({ user, children }: DashboardLayoutProps
{/* Overlay pour fermer les menus */}
{(showNotifications || showProfileMenu) && (
<div
className="fixed inset-0 z-40"
className="fixed inset-0 z-40 lg:z-30"
onClick={() => {
setShowNotifications(false);
setShowProfileMenu(false);

121
components/ListeTrajets.tsx
View File

@@ -118,14 +118,14 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
};
return (
<div className="bg-white rounded-lg shadow-sm">
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
{/* Bloc d'actions */}
<div className="p-6 border-b border-gray-200">
<div className="flex flex-col gap-4">
<div className="p-4 sm:p-6 border-b border-gray-200">
<div className="flex flex-col gap-3 sm:gap-4">
{/* Barre de recherche */}
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="h-4 w-4 sm:h-5 sm: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>
@@ -134,7 +134,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
placeholder="Rechercher un trajet..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="block w-full pl-10 pr-3 py-2.5 text-sm border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
className="block w-full pl-10 sm:pl-12 pr-4 py-3 text-base border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-lblue transition-all max-w-full"
/>
</div>
@@ -142,35 +142,36 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
<div className="flex items-center gap-2">
<button
onClick={() => setShowTrajetForm(true)}
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-lgreen text-white text-sm font-medium rounded-lg hover:bg-dgreen transition-colors"
className="flex-1 flex items-center justify-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 sm:py-2.5 bg-lgreen text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-dgreen transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
Nouveau trajet
<span className="hidden sm:inline">Nouveau trajet</span>
<span className="sm:hidden">Nouveau</span>
</button>
<button
onClick={() => setShowFilters(!showFilters)}
className={`px-4 py-2.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-2 ${
className={`px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-medium rounded-lg transition-colors flex items-center gap-1.5 sm:gap-2 ${
showFilters || filterStatut || startDate || endDate
? 'bg-lblue text-white hover:bg-dblue'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
Filtrer
<span className="hidden sm:inline">Filtrer</span>
</button>
</div>
{/* Filtres */}
{showFilters && (
<div className="pt-3 border-t border-gray-200 space-y-4">
<div className="pt-3 border-t border-gray-200 space-y-3 sm: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">
<label className="block text-xs sm:text-sm font-medium text-gray-700">
Plage de dates
</label>
{(startDate || endDate) && (
@@ -179,33 +180,33 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
setStartDate('');
setEndDate('');
}}
className="text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors flex items-center gap-1"
className="text-[10px] sm: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">
<svg className="w-2.5 h-2.5 sm:w-3 sm: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>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
<div className="min-w-0">
<label className="block text-xs font-medium text-gray-700 mb-1.5">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"
className="block w-full px-3 py-2 text-sm sm:text-base border border-gray-300 rounded-lg bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-lblue transition-all max-w-full box-border"
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Date de fin</label>
<div className="min-w-0">
<label className="block text-xs font-medium text-gray-700 mb-1.5">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"
className="block w-full px-3 py-2 text-sm sm:text-base border border-gray-300 rounded-lg bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-lblue transition-all max-w-full box-border"
/>
</div>
</div>
@@ -213,13 +214,13 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
{/* Filtre par statut */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
<label className="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
Statut
</label>
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-1.5 sm:gap-2">
<button
onClick={() => setFilterStatut('')}
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
!filterStatut
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -229,7 +230,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
<button
onClick={() => setFilterStatut('Planifié')}
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
filterStatut === 'Planifié'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -239,7 +240,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
<button
onClick={() => setFilterStatut('En cours')}
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
filterStatut === 'En cours'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -249,7 +250,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
<button
onClick={() => setFilterStatut('Terminé')}
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
filterStatut === 'Terminé'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -259,7 +260,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</button>
<button
onClick={() => setFilterStatut('Annulé')}
className={`px-3 py-2 text-xs font-medium rounded transition-colors ${
className={`px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs font-medium rounded transition-colors ${
filterStatut === 'Annulé'
? 'bg-lblue text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
@@ -275,65 +276,65 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
</div>
{/* Liste des trajets */}
<div className="p-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-semibold text-gray-900">
<div className="p-4 sm:p-6">
<div className="flex items-center justify-between mb-4 sm:mb-6">
<h2 className="text-lg sm:text-xl font-semibold text-gray-900">
Derniers trajets créés
</h2>
<button
onClick={fetchTrajets}
className="text-sm text-lblue hover:text-dblue font-medium flex items-center gap-2"
className="text-xs sm:text-sm text-lblue hover:text-dblue font-medium flex items-center gap-1 sm:gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Actualiser
<span className="hidden sm:inline">Actualiser</span>
</button>
</div>
{loading ? (
<div className="text-center py-8 text-gray-500">Chargement...</div>
<div className="text-center py-6 sm:py-8 text-sm text-gray-500">Chargement...</div>
) : filteredTrajets.length === 0 ? (
<div className="text-center py-8 text-gray-500">
<div className="text-center py-6 sm:py-8 text-xs sm:text-sm text-gray-500">
{trajets.length === 0
? 'Aucun trajet créé récemment'
: 'Aucun trajet ne correspond à votre recherche'}
</div>
) : (
<div className="space-y-3">
<div className="space-y-2 sm:space-y-3">
{filteredTrajets.map((trajet) => (
<div
key={trajet.id}
className="p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors"
className="p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors"
>
<div className="flex items-start gap-4">
<div className="flex items-start gap-3 sm:gap-4">
{/* Avatar adhérent */}
<div className="w-12 h-12 rounded-full bg-lgreen flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-lgreen flex items-center justify-center text-white text-xs sm:text-sm font-semibold flex-shrink-0">
{getInitials(trajet.adherent.nom, trajet.adherent.prenom)}
</div>
{/* Informations principales */}
<div className="flex-1 min-w-0">
<div className="flex items-start justify-between gap-4 mb-2">
<div>
<h3 className="text-sm font-semibold text-gray-900">
<div className="flex items-start justify-between gap-2 sm:gap-4 mb-2">
<div className="flex-1 min-w-0">
<h3 className="text-xs sm:text-sm font-semibold text-gray-900 truncate">
{trajet.adherent.prenom} {trajet.adherent.nom}
</h3>
<div className="flex items-center gap-3 mt-1">
<span className="text-xs text-gray-500 flex items-center gap-1">
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex flex-wrap items-center gap-2 sm:gap-3 mt-1">
<span className="text-[10px] sm:text-xs text-gray-500 flex items-center gap-1">
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
{formatDate(trajet.date)}
</span>
<span className="text-xs text-gray-500 flex items-center gap-1">
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<span className="text-[10px] sm:text-xs text-gray-500 flex items-center gap-1">
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{formatTime(trajet.date)}
</span>
<span
className={`px-2 py-0.5 text-xs font-medium rounded ${
className={`px-1.5 sm:px-2 py-0.5 text-[10px] sm:text-xs font-medium rounded ${
trajet.statut === 'Terminé'
? 'bg-green-100 text-green-700'
: trajet.statut === 'En cours'
@@ -351,36 +352,36 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
{/* Adresses */}
<div className="space-y-1 mb-2">
<div className="text-sm text-gray-600">
<div className="text-xs sm:text-sm text-gray-600 break-words">
<span className="font-medium">Départ:</span>{' '}
<span className="text-gray-900">{trajet.adresseDepart}</span>
</div>
<div className="text-sm text-gray-600">
<div className="text-xs sm:text-sm text-gray-600 break-words">
<span className="font-medium">Arrivée:</span>{' '}
<span className="text-gray-900">{trajet.adresseArrivee}</span>
</div>
</div>
{/* Chauffeur */}
<div className="flex items-center gap-4 mt-3">
<div className="flex items-center gap-2 sm:gap-4 mt-2 sm:mt-3">
{trajet.chauffeur ? (
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-full bg-lblue flex items-center justify-center text-white text-xs font-semibold">
<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-lblue flex items-center justify-center text-white text-[10px] sm:text-xs font-semibold">
{getInitials(trajet.chauffeur.nom, trajet.chauffeur.prenom)}
</div>
<div>
<div className="text-xs text-gray-500">Chauffeur</div>
<div className="text-sm font-medium text-gray-900">
<div className="text-[10px] sm:text-xs text-gray-500">Chauffeur</div>
<div className="text-xs sm:text-sm font-medium text-gray-900 truncate">
{trajet.chauffeur.prenom} {trajet.chauffeur.nom}
</div>
</div>
</div>
) : (
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex items-center gap-1.5 sm:gap-2">
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-orange-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span className="text-sm text-orange-600 font-medium">
<span className="text-xs sm:text-sm text-orange-600 font-medium">
Aucun chauffeur assigné
</span>
</div>
@@ -390,7 +391,7 @@ export default function ListeTrajets({ onTrajetCreated }: ListeTrajetsProps) {
{/* Commentaire */}
{trajet.commentaire && (
<div className="mt-2 pt-2 border-t border-gray-200">
<p className="text-xs text-gray-500 italic">{trajet.commentaire}</p>
<p className="text-[10px] sm:text-xs text-gray-500 italic break-words">{trajet.commentaire}</p>
</div>
)}
</div>

20
components/LoginForm.tsx
View File

@@ -41,21 +41,21 @@ export default function LoginForm() {
};
return (
<form className="space-y-5" onSubmit={handleSubmit}>
<form className="space-y-4 sm:space-y-5" onSubmit={handleSubmit}>
{error && (
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
<div className="bg-red-50 border border-red-200 text-red-600 px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg text-xs sm:text-sm">
{error}
</div>
)}
{/* Email Field */}
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor="email" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
Email
</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-lorange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="h-4 w-4 sm:h-5 sm:w-5 text-lorange" 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>
@@ -65,7 +65,7 @@ export default function LoginForm() {
type="email"
autoComplete="email"
required
className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent sm:text-sm"
className="block w-full pl-9 sm:pl-10 pr-3 py-2.5 sm:py-3 border border-gray-300 rounded-lg placeholder-gray-400 text-gray-900 text-base focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
placeholder="admin@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
@@ -75,12 +75,12 @@ export default function LoginForm() {
{/* Password Field */}
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor="password" className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
Mot de passe
</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-lorange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="h-4 w-4 sm:h-5 sm:w-5 text-lorange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
@@ -90,7 +90,7 @@ export default function LoginForm() {
type="password"
autoComplete="current-password"
required
className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent sm:text-sm"
className="block w-full pl-9 sm:pl-10 pr-3 py-2.5 sm:py-3 border border-gray-300 rounded-lg placeholder-gray-400 text-gray-900 text-base focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
@@ -103,14 +103,14 @@ export default function LoginForm() {
<button
type="submit"
disabled={loading}
className="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg text-sm font-medium text-white bg-lblue hover:bg-dblue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lblue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="w-full flex justify-center items-center py-2.5 sm:py-3 px-4 border border-transparent rounded-lg text-xs sm:text-sm font-medium text-white bg-lblue hover:bg-dblue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lblue disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{loading ? (
'Connexion...'
) : (
<>
Se connecter
<svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="ml-2 h-3.5 w-3.5 sm:h-4 sm:w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</>

62
components/Messagerie.tsx
View File

@@ -45,6 +45,7 @@ export default function Messagerie() {
const [selectedConversation, setSelectedConversation] = useState<string | null>(null);
const [showNewConversation, setShowNewConversation] = useState(false);
const [showGroupSettings, setShowGroupSettings] = useState(false);
const [showSidebar, setShowSidebar] = useState(false);
const { data: conversations, error, mutate } = useSWR<Conversation[]>(
'/api/conversations',
@@ -69,20 +70,41 @@ export default function Messagerie() {
};
return (
<div className="flex h-[calc(100vh-80px)] bg-white">
<div className="flex h-[calc(100vh-80px)] bg-white relative">
{/* Overlay pour mobile */}
{showSidebar && (
<div
className="fixed inset-0 bg-black/50 z-40 md:hidden"
onClick={() => setShowSidebar(false)}
/>
)}
{/* Liste des conversations */}
<div className="w-80 border-r border-gray-200 flex flex-col">
<div className={`absolute md:relative w-80 border-r border-gray-200 flex flex-col bg-white z-50 md:z-auto h-full transition-transform duration-300 ${
showSidebar ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
}`}>
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
<h2 className="text-lg font-semibold text-gray-900">Messages</h2>
<button
onClick={() => setShowNewConversation(true)}
className="p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors"
title="Nouvelle conversation"
>
<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>
</button>
<div className="flex items-center gap-2">
<button
onClick={() => setShowNewConversation(true)}
className="p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors"
title="Nouvelle conversation"
>
<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>
</button>
<button
onClick={() => setShowSidebar(false)}
className="p-2 rounded-lg hover:bg-gray-100 transition-colors md:hidden"
title="Fermer"
>
<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>
<div className="flex-1 overflow-y-auto">
@@ -106,6 +128,7 @@ export default function Messagerie() {
key={conversation.id}
onClick={() => {
setSelectedConversation(conversation.id);
setShowSidebar(false); // Fermer la sidebar sur mobile après sélection
if (conversation.type === 'group') {
setShowGroupSettings(false);
}
@@ -149,7 +172,7 @@ export default function Messagerie() {
)}
</div>
{conversation.lastMessage ? (
<p className="text-sm text-gray-600 truncate">
<p className="text-xs md:text-sm text-gray-600 truncate">
{conversation.type === 'group' && conversation.lastMessage.senderName
? `${conversation.lastMessage.senderName}: `
: ''}
@@ -158,7 +181,7 @@ export default function Messagerie() {
: conversation.lastMessage.content || '📎 Fichier'}
</p>
) : (
<p className="text-sm text-gray-400 italic">Aucun message</p>
<p className="text-xs md:text-sm text-gray-400 italic">Aucun message</p>
)}
</div>
</div>
@@ -170,17 +193,18 @@ export default function Messagerie() {
</div>
{/* Fenêtre de chat */}
<div className="flex-1 flex flex-col">
<div className="flex-1 flex flex-col w-full">
{selectedConversation && selectedConv ? (
<ChatWindow
conversationId={selectedConversation}
conversation={selectedConv}
onNewMessage={handleNewMessage}
onShowGroupSettings={() => setShowGroupSettings(true)}
onShowSidebar={() => setShowSidebar(true)}
/>
) : (
<div className="flex-1 flex items-center justify-center bg-gray-50">
<div className="text-center">
<div className="text-center p-4">
<svg
className="w-16 h-16 text-gray-400 mx-auto mb-4"
fill="none"
@@ -194,7 +218,13 @@ export default function Messagerie() {
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
<p className="text-gray-500">Sélectionnez une conversation pour commencer</p>
<p className="text-gray-500 mb-4">Sélectionnez une conversation pour commencer</p>
<button
onClick={() => setShowSidebar(true)}
className="md:hidden px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
>
Voir les conversations
</button>
</div>
</div>
)}

469
components/ModifierCompteContent.tsx
View File

@@ -2,8 +2,7 @@
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useNotification } from './NotificationProvider';
import useSWR from 'swr';
import AlertModal from './AlertModal';
interface UserProfile {
id: string;
@@ -17,61 +16,53 @@ interface UserProfile {
} | null;
}
const fetcher = (url: string) => fetch(url).then((res) => res.json());
export default function ModifierCompteContent() {
const router = useRouter();
const { showNotification } = useNotification();
const { data: userProfile, mutate } = useSWR<UserProfile>('/api/user/profile', fetcher);
const [loading, setLoading] = useState(false);
const [loadingProfile, setLoadingProfile] = useState(true);
const [alertModal, setAlertModal] = useState<{
show: boolean;
type: 'success' | 'error' | 'info' | 'warning';
title: string;
message: string;
} | null>(null);
const [formData, setFormData] = useState({
name: '',
email: '',
photoUrl: '',
currentPassword: '',
newPassword: '',
confirmPassword: '',
});
const [profile, setProfile] = useState<UserProfile | null>(null);
useEffect(() => {
if (userProfile) {
setFormData({
name: userProfile.name || '',
email: userProfile.email || '',
photoUrl: userProfile.photoUrl || '',
currentPassword: '',
newPassword: '',
confirmPassword: '',
fetchProfile();
}, []);
const fetchProfile = async () => {
try {
const response = await fetch('/api/user/profile');
if (response.ok) {
const data = await response.json();
setProfile(data);
setFormData({
name: data.name || '',
email: data.email || '',
currentPassword: '',
newPassword: '',
confirmPassword: '',
});
}
} catch (error) {
console.error('Erreur lors du chargement du profil:', error);
setAlertModal({
show: true,
type: 'error',
title: 'Erreur',
message: 'Erreur lors du chargement du profil',
});
}
}, [userProfile]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
// Vérifier la taille du fichier (max 5MB)
if (file.size > 5 * 1024 * 1024) {
showNotification('L\'image est trop grande (max 5MB)', 'error');
return;
}
// Vérifier le type de fichier
if (!file.type.startsWith('image/')) {
showNotification('Veuillez sélectionner une image', 'error');
return;
}
const reader = new FileReader();
reader.onloadend = () => {
setFormData((prev) => ({ ...prev, photoUrl: reader.result as string }));
};
reader.readAsDataURL(file);
} finally {
setLoadingProfile(false);
}
};
@@ -79,28 +70,25 @@ export default function ModifierCompteContent() {
e.preventDefault();
setLoading(true);
// Vérifier que les mots de passe correspondent si un nouveau mot de passe est fourni
if (formData.newPassword && formData.newPassword !== formData.confirmPassword) {
setAlertModal({
show: true,
type: 'error',
title: 'Erreur',
message: 'Les mots de passe ne correspondent pas',
});
setLoading(false);
return;
}
try {
// Vérifier que les mots de passe correspondent si un nouveau mot de passe est fourni
if (formData.newPassword) {
if (formData.newPassword !== formData.confirmPassword) {
showNotification('Les mots de passe ne correspondent pas', 'error');
setLoading(false);
return;
}
if (formData.newPassword.length < 6) {
showNotification('Le mot de passe doit contenir au moins 6 caractères', 'error');
setLoading(false);
return;
}
}
const updateData: any = {
name: formData.name.trim() || null,
email: formData.email.trim(),
photoUrl: formData.photoUrl || null,
name: formData.name,
email: formData.email,
};
// Ajouter le changement de mot de passe si fourni
if (formData.newPassword) {
updateData.currentPassword = formData.currentPassword;
updateData.newPassword = formData.newPassword;
@@ -114,238 +102,229 @@ export default function ModifierCompteContent() {
body: JSON.stringify(updateData),
});
const data = await response.json();
if (response.ok) {
showNotification('Profil mis à jour avec succès', 'success');
mutate();
setAlertModal({
show: true,
type: 'success',
title: 'Succès',
message: 'Votre profil a été mis à jour avec succès',
});
// Réinitialiser les champs de mot de passe
setFormData((prev) => ({
...prev,
setFormData({
...formData,
currentPassword: '',
newPassword: '',
confirmPassword: '',
}));
});
// Recharger le profil
fetchProfile();
} else {
showNotification(data.error || 'Erreur lors de la mise à jour', 'error');
const error = await response.json();
setAlertModal({
show: true,
type: 'error',
title: 'Erreur',
message: error.error || 'Une erreur est survenue',
});
}
} catch (error) {
console.error('Erreur:', error);
showNotification('Erreur lors de la mise à jour', 'error');
setAlertModal({
show: true,
type: 'error',
title: 'Erreur',
message: 'Une erreur est survenue',
});
} finally {
setLoading(false);
}
};
const getUserInitials = () => {
if (userProfile?.name) {
const names = userProfile.name.split(' ');
if (names.length >= 2) {
return `${names[0].charAt(0)}${names[1].charAt(0)}`.toUpperCase();
}
return userProfile.name.charAt(0).toUpperCase();
}
return userProfile?.email?.charAt(0).toUpperCase() || 'U';
};
if (!userProfile) {
if (loadingProfile) {
return (
<div className="p-6">
<div className="text-center py-12 text-gray-500">Chargement...</div>
<div className="text-center text-gray-500">Chargement...</div>
</div>
);
}
return (
<div className="p-6">
<div className="mb-8">
<button
onClick={() => router.back()}
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 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="M15 19l-7-7 7-7" />
</svg>
Retour aux paramètres
</button>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Modifier mon compte</h1>
<p className="text-sm text-gray-600">
Mettez à jour vos informations personnelles et votre mot de passe
<div className="p-4 md:p-6">
<div className="mb-6">
<h1 className="text-2xl md:text-3xl font-semibold text-cblack mb-1">
Modifier mon compte
</h1>
<p className="text-sm text-cgray">
Gérez vos informations personnelles et votre mot de passe
</p>
</div>
<form onSubmit={handleSubmit} className="max-w-3xl">
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8 space-y-8">
{/* Photo de profil */}
<div className="bg-white rounded-lg shadow-sm p-4 md:p-6">
<form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
{/* Nom */}
<div>
<label className="block text-sm font-semibold text-gray-900 mb-4">
Photo de profil
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
Nom <span className="text-red-500">*</span>
</label>
<div className="flex items-center gap-6">
<div className="relative">
{formData.photoUrl ? (
<img
src={formData.photoUrl}
alt="Photo de profil"
className="w-24 h-24 rounded-full object-cover border-4 border-gray-200"
/>
) : (
<div className="w-24 h-24 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center border-4 border-gray-200">
<span className="text-white text-2xl font-bold">{getUserInitials()}</span>
</div>
)}
</div>
<div className="flex-1">
<label className="block">
<input
type="file"
accept="image/*"
onChange={handleImageUpload}
className="hidden"
/>
<span className="inline-flex items-center gap-2 px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer 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 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Choisir une image
</span>
</label>
{formData.photoUrl && (
<button
type="button"
onClick={() => setFormData((prev) => ({ ...prev, photoUrl: '' }))}
className="mt-2 text-sm text-red-600 hover:text-red-700"
>
Supprimer la photo
</button>
)}
<p className="text-xs text-gray-500 mt-2">JPG, PNG ou GIF (max 5MB)</p>
<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="name"
required
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: 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"
placeholder="Votre nom"
/>
</div>
</div>
{/* Nom et prénom */}
<div>
<label htmlFor="name" className="block text-sm font-semibold text-gray-900 mb-2">
Nom et prénom
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleInputChange}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
placeholder="Votre nom complet"
/>
</div>
{/* Email */}
<div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-900 mb-2">
Email
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
Email <span className="text-red-500">*</span>
</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleInputChange}
required
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
placeholder="votre@email.com"
/>
</div>
{/* Section changement de mot de passe */}
<div className="pt-6 border-t border-gray-200">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Changer le mot de passe</h3>
<p className="text-sm text-gray-600 mb-6">
Laissez ces champs vides si vous ne souhaitez pas changer votre mot de passe
</p>
<div className="space-y-4">
<div>
<label htmlFor="currentPassword" className="block text-sm font-semibold text-gray-900 mb-2">
Mot de passe actuel
</label>
<input
type="password"
id="currentPassword"
name="currentPassword"
value={formData.currentPassword}
onChange={handleInputChange}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
placeholder="Entrez votre mot de passe actuel"
/>
</div>
<div>
<label htmlFor="newPassword" className="block text-sm font-semibold text-gray-900 mb-2">
Nouveau mot de passe
</label>
<input
type="password"
id="newPassword"
name="newPassword"
value={formData.newPassword}
onChange={handleInputChange}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
placeholder="Au moins 6 caractères"
/>
</div>
<div>
<label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-900 mb-2">
Confirmer le nouveau mot de passe
</label>
<input
type="password"
id="confirmPassword"
name="confirmPassword"
value={formData.confirmPassword}
onChange={handleInputChange}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
placeholder="Confirmez votre nouveau mot de passe"
/>
<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"
placeholder="votre@email.com"
/>
</div>
</div>
{/* Boutons d'action */}
<div className="flex items-center justify-end gap-4 pt-6 border-t border-gray-200">
{/* Rôle (lecture seule) */}
{profile?.role && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Rôle
</label>
<div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-600">
{profile.role.name}
</div>
</div>
)}
{/* Séparateur */}
<div className="border-t border-gray-200 pt-4 md:pt-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
Changer le mot de passe
</h2>
<p className="text-sm text-gray-600 mb-4">
Laissez ces champs vides si vous ne souhaitez pas changer votre mot de passe
</p>
</div>
{/* Mot de passe actuel */}
<div>
<label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700 mb-1">
Mot de passe actuel
</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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input
type="password"
id="currentPassword"
value={formData.currentPassword}
onChange={(e) => setFormData({ ...formData, currentPassword: 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"
placeholder="Entrez votre mot de passe actuel"
/>
</div>
</div>
{/* Nouveau mot de passe */}
<div>
<label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
Nouveau mot de passe
</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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input
type="password"
id="newPassword"
value={formData.newPassword}
onChange={(e) => setFormData({ ...formData, newPassword: 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"
placeholder="Entrez votre nouveau mot de passe"
/>
</div>
</div>
{/* Confirmer le mot de passe */}
<div>
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
Confirmer le nouveau mot de passe
</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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input
type="password"
id="confirmPassword"
value={formData.confirmPassword}
onChange={(e) => setFormData({ ...formData, confirmPassword: 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"
placeholder="Confirmez votre nouveau mot de passe"
/>
</div>
</div>
{/* Boutons */}
<div className="flex flex-col-reverse md:flex-row justify-end gap-3 pt-4 border-t border-gray-200">
<button
type="button"
onClick={() => router.back()}
className="px-6 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors w-full md:w-auto"
>
Annuler
</button>
<button
type="submit"
disabled={loading}
className="px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
className="px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full md:w-auto"
>
{loading ? (
<>
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Enregistrement...
</>
) : (
<>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
Enregistrer les modifications
</>
)}
{loading ? 'Enregistrement...' : 'Enregistrer les modifications'}
</button>
</div>
</div>
</form>
</form>
</div>
{/* Modal d'alerte */}
{alertModal && (
<AlertModal
isOpen={alertModal.show}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
onClose={() => setAlertModal(null)}
/>
)}
</div>
);
}

36
components/NewConversationModal.tsx
View File

@@ -113,16 +113,16 @@ export default function NewConversationModal({
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
<div className="p-6 border-b border-gray-200">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-0 md:p-4">
<div className="bg-white rounded-none md:rounded-lg shadow-xl w-full h-full md:h-auto md:max-w-md md:mx-4 md:max-h-[90vh] flex flex-col">
<div className="p-4 md:p-6 border-b border-gray-200 flex-shrink-0">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold text-gray-900">Nouvelle conversation</h2>
<h2 className="text-lg md:text-xl font-semibold text-gray-900">Nouvelle conversation</h2>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 transition-colors"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
@@ -134,7 +134,7 @@ export default function NewConversationModal({
</div>
</div>
<div className="p-6 space-y-4">
<div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-4">
{/* Type de conversation */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
@@ -198,36 +198,36 @@ export default function NewConversationModal({
</div>
{/* Liste des utilisateurs */}
<div className="max-h-64 overflow-y-auto border border-gray-200 rounded-lg">
<div className="max-h-48 md:max-h-64 overflow-y-auto border border-gray-200 rounded-lg">
{error && (
<div className="p-4 text-sm text-red-600">
<div className="p-3 md:p-4 text-sm text-red-600">
Erreur lors du chargement des utilisateurs
</div>
)}
{!users && !error && (
<div className="p-4 text-sm text-gray-500 text-center">Chargement...</div>
<div className="p-3 md:p-4 text-sm text-gray-500 text-center">Chargement...</div>
)}
{availableUsers.length === 0 && users && (
<div className="p-4 text-sm text-gray-500 text-center">Aucun utilisateur trouvé</div>
<div className="p-3 md:p-4 text-sm text-gray-500 text-center">Aucun utilisateur trouvé</div>
)}
{availableUsers.length > 0 && (
<div className="divide-y divide-gray-100">
{availableUsers.map((user) => (
<label
key={user.id}
className="flex items-center gap-3 p-3 hover:bg-gray-50 cursor-pointer"
className="flex items-center gap-2 md:gap-3 p-2 md:p-3 hover:bg-gray-50 cursor-pointer"
>
<input
type="checkbox"
checked={selectedUsers.includes(user.id)}
onChange={() => handleUserToggle(user.id)}
className="rounded border-gray-300 text-lblue focus:ring-lblue"
className="rounded border-gray-300 text-lblue focus:ring-lblue w-4 h-4 md:w-auto md:h-auto"
/>
<div className="flex-1">
<div className="text-sm font-medium text-gray-900">
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-gray-900 truncate">
{user.name || 'Utilisateur'}
</div>
<div className="text-xs text-gray-500">{user.email}</div>
<div className="text-xs text-gray-500 truncate">{user.email}</div>
</div>
</label>
))}
@@ -245,17 +245,17 @@ export default function NewConversationModal({
)}
</div>
<div className="p-6 border-t border-gray-200 flex justify-end gap-3">
<div className="p-4 md:p-6 border-t border-gray-200 flex flex-col-reverse md:flex-row justify-end gap-2 md:gap-3 flex-shrink-0">
<button
onClick={onClose}
className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors w-full md:w-auto"
>
Annuler
</button>
<button
onClick={handleCreate}
disabled={isCreating || selectedUsers.length === 0}
className="px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full md:w-auto"
>
{isCreating ? 'Création...' : 'Créer'}
</button>

48
components/ParametresContent.tsx
View File

@@ -316,45 +316,45 @@ export default function ParametresContent() {
const router = useRouter();
return (
<div className="p-6">
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Paramètres</h1>
<p className="text-sm text-gray-600">
<div className="p-4 md:p-6">
<div className="mb-6 md:mb-8">
<h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">Paramètres</h1>
<p className="text-xs md:text-sm text-gray-600">
Gérez votre profil et configurez la plateforme
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
{/* Colonne de gauche - Profil/Compte */}
<div>
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<div className="text-center mb-6">
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
<div className="text-center mb-4 md:mb-6">
{user?.photoUrl ? (
<img
src={user.photoUrl}
alt={user.name || 'Utilisateur'}
className="w-20 h-20 rounded-full object-cover mx-auto mb-4 shadow-lg border-4 border-white"
className="w-16 h-16 md:w-20 md:h-20 rounded-full object-cover mx-auto mb-3 md:mb-4 shadow-lg border-2 md:border-4 border-white"
/>
) : (
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center mx-auto mb-4 shadow-lg">
<span className="text-white text-2xl font-bold">{getUserInitials()}</span>
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center mx-auto mb-3 md:mb-4 shadow-lg">
<span className="text-white text-xl md:text-2xl font-bold">{getUserInitials()}</span>
</div>
)}
<h2 className="text-xl font-bold text-gray-900 mb-1">
<h2 className="text-lg md:text-xl font-bold text-gray-900 mb-1">
{user?.name || 'Utilisateur'}
</h2>
<p className="text-sm text-gray-500">{user?.email}</p>
<p className="text-xs md:text-sm text-gray-500 break-words">{user?.email}</p>
</div>
<button
onClick={() => router.push('/dashboard/parametres/compte')}
className="w-full px-4 py-3 bg-gray-50 hover:bg-gray-100 rounded-lg text-left transition-colors border border-gray-200"
className="w-full px-3 md:px-4 py-2.5 md:py-3 bg-gray-50 hover:bg-gray-100 rounded-lg text-left transition-colors border border-gray-200"
>
<div className="flex items-center gap-3">
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex items-center gap-2 md:gap-3">
<svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600 flex-shrink-0" 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>
<span className="font-medium text-gray-900">Modifier le compte</span>
<span className="font-medium text-sm md:text-base text-gray-900">Modifier le compte</span>
</div>
</button>
</div>
@@ -365,24 +365,24 @@ export default function ParametresContent() {
<div>
<button
onClick={() => router.push('/dashboard/parametres/configuration')}
className="w-full bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md hover:border-lblue transition-all text-left group"
className="w-full bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6 hover:shadow-md hover:border-lblue transition-all text-left group"
>
<div className="flex items-center gap-4">
<div className="w-16 h-16 rounded-xl bg-lblue/10 flex items-center justify-center group-hover:bg-lblue/20 transition-colors">
<svg className="w-8 h-8 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="flex items-center gap-3 md:gap-4">
<div className="w-12 h-12 md:w-16 md:h-16 rounded-xl bg-lblue/10 flex items-center justify-center group-hover:bg-lblue/20 transition-colors flex-shrink-0">
<svg className="w-6 h-6 md:w-8 md:h-8 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div className="flex-1">
<h3 className="text-xl font-bold text-gray-900 mb-1 group-hover:text-lblue transition-colors">
<div className="flex-1 min-w-0">
<h3 className="text-lg md:text-xl font-bold text-gray-900 mb-1 group-hover:text-lblue transition-colors">
Configuration
</h3>
<p className="text-sm text-gray-600">
<p className="text-xs md:text-sm text-gray-600">
Configurez les paramètres de la plateforme
</p>
</div>
<svg className="w-5 h-5 text-gray-400 group-hover:text-lblue transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md:h-5 text-gray-400 group-hover:text-lblue transition-colors flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>

57
components/UniversProForm.tsx
View File

@@ -20,6 +20,7 @@ interface UniversProFormProps {
export default function UniversProForm({ contact, onClose }: UniversProFormProps) {
const [loading, setLoading] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [alertModal, setAlertModal] = useState<{
show: boolean;
type: 'success' | 'error' | 'info' | 'warning';
@@ -48,6 +49,17 @@ export default function UniversProForm({ contact, onClose }: UniversProFormProps
}
}, [contact]);
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768); // md breakpoint
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
@@ -88,6 +100,51 @@ export default function UniversProForm({ contact, onClose }: UniversProFormProps
}
};
// Si on est sur mobile, afficher un message au lieu du formulaire
if (isMobile) {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
<div className="flex justify-between items-start mb-6">
<div className="flex-1">
<h2 className="text-xl font-semibold text-gray-900 mb-2">
{contact ? 'Modifier le contact' : 'Nouveau contact'}
</h2>
</div>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 ml-4"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="text-center py-8">
<div className="mb-6">
<svg className="w-16 h-16 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-3">
Utilisez un ordinateur
</h3>
<p className="text-sm text-gray-600 mb-6">
Pour {contact ? 'modifier' : 'créer'} un contact professionnel, veuillez utiliser un ordinateur. Cette fonctionnalité n'est pas optimisée pour les appareils mobiles.
</p>
<button
onClick={onClose}
className="px-6 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
>
Fermer
</button>
</div>
</div>
</div>
);
}
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">

344
components/UniversProTable.tsx
View File

@@ -485,138 +485,234 @@ export default function UniversProTable() {
</div>
{/* Boutons d'action */}
<div className="flex gap-3">
<div className="flex gap-2 md:gap-3 w-full md:w-auto">
<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"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors text-sm md:text-base flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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
<span className="hidden sm:inline">Nouveau contact</span>
<span className="sm:hidden">Nouveau</span>
</button>
<button
onClick={() => setShowImportModal(true)}
className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm md:text-base"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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
<span className="hidden sm:inline">Importer</span>
</button>
<button
onClick={handleExport}
disabled={selectedIds.size === 0}
className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm md:text-base"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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 {selectedIds.size > 0 && `(${selectedIds.size})`}
<span className="hidden sm:inline">Exporter</span>
{selectedIds.size > 0 && <span className="ml-1">({selectedIds.size})</span>}
</button>
</div>
</div>
</div>
{/* Tableau */}
{/* Tableau - Desktop */}
<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">
<input
type="checkbox"
checked={contacts.length > 0 && selectedIds.size === contacts.length}
onChange={(e) => handleSelectAll(e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</th>
<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">
<>
{/* Vue desktop - Tableau */}
<div className="hidden md:block 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">
<input
type="checkbox"
checked={selectedIds.has(contact.id)}
onChange={(e) => handleSelectOne(contact.id, e.target.checked)}
checked={contacts.length > 0 && selectedIds.size === contacts.length}
onChange={(e) => handleSelectAll(e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</td>
<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}
</th>
<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">
<input
type="checkbox"
checked={selectedIds.has(contact.id)}
onChange={(e) => handleSelectOne(contact.id, e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
/>
</td>
<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>
{/* Vue mobile - Cartes */}
<div className="md:hidden divide-y divide-gray-200">
{contacts.map((contact) => (
<div key={contact.id} className="p-4 hover:bg-gray-50">
<div className="flex items-start gap-3">
{/* Checkbox */}
<input
type="checkbox"
checked={selectedIds.has(contact.id)}
onChange={(e) => handleSelectOne(contact.id, e.target.checked)}
className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue mt-1"
/>
{/* Avatar */}
<div className="w-12 h-12 rounded-full bg-lblue flex items-center justify-center text-white font-semibold flex-shrink-0">
{getInitials(contact.nom, contact.prenom)}
</div>
{/* Contenu principal */}
<div className="flex-1 min-w-0">
{/* Nom */}
<div className="mb-2">
<div className="text-base font-semibold text-gray-900">
{contact.prenom} {contact.nom}
</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">
{/* Contact */}
<div className="mb-2">
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Contact</div>
<a href={`tel:${contact.telephone}`} className="text-sm text-gray-900 block truncate">
{contact.telephone}
</a>
<a href={`mailto:${contact.email}`} className="text-sm text-gray-500 block truncate">
{contact.email}
</a>
</div>
{/* Adresse */}
<div className="mb-2">
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Adresse</div>
<div className="text-sm text-gray-900 line-clamp-2">
{contact.adresse}
</div>
</div>
{/* Entreprise */}
<div className="mb-3">
<div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Entreprise</div>
<div className="text-sm font-medium text-gray-900">
{contact.nomEntreprise}
</div>
</div>
{/* Actions */}
<div className="flex items-center gap-4 pt-2 border-t border-gray-200">
<button
onClick={() => handleView(contact.id)}
className="text-lblue hover:text-dblue"
title="Voir"
className="flex items-center gap-1 text-lblue hover:text-dblue text-sm"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" 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>
Voir
</button>
<button
onClick={() => handleEdit(contact)}
className="text-lblue hover:text-dblue"
title="Modifier"
className="flex items-center gap-1 text-lblue hover:text-dblue text-sm"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
<button
onClick={() => handleDelete(contact.id)}
className="text-red-500 hover:text-red-700"
title="Supprimer"
className="flex items-center gap-1 text-red-500 hover:text-red-700 text-sm ml-auto"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4" 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>
Supprimer
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
))}
</div>
</>
)}
</div>
@@ -864,29 +960,29 @@ export default function UniversProTable() {
{/* 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-xl shadow-2xl max-w-5xl w-full max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-0 md:p-4 animate-fadeIn">
<div className="bg-white rounded-none md:rounded-xl shadow-2xl max-w-5xl w-full h-full md:h-auto md:max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border-0 md:border border-gray-200">
{/* Header épuré */}
<div className="border-b border-gray-200 px-8 py-6 bg-white">
<div className="border-b border-gray-200 px-4 md:px-8 py-4 md: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">
<div className="flex items-center gap-3 md:gap-5 flex-1 min-w-0">
<div className="w-12 h-12 md:w-16 md:h-16 rounded-full bg-lblue flex items-center justify-center text-white font-bold text-lg md:text-xl border-2 md:border-4 border-lblue/10 shadow-sm flex-shrink-0">
{getInitials(viewingContact.nom, viewingContact.prenom)}
</div>
<div>
<h2 className="text-2xl font-bold text-gray-900 mb-1">
<div className="flex-1 min-w-0">
<h2 className="text-xl md:text-2xl font-bold text-gray-900 mb-1 truncate">
{viewingContact.prenom} {viewingContact.nom}
</h2>
<p className="text-gray-500 text-sm">
<p className="text-gray-500 text-xs md: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-2 hover:bg-gray-100 rounded-lg"
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg flex-shrink-0 ml-2"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-5 h-5 md:w-6 md: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>
@@ -895,60 +991,60 @@ export default function UniversProTable() {
{/* Contenu scrollable */}
<div className="flex-1 overflow-y-auto">
<div className="p-8">
<div className="p-4 md:p-8">
{/* Actions rapides */}
<div className="mb-8 flex flex-wrap gap-3">
<div className="mb-6 md:mb-8 flex flex-wrap gap-2 md: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"
className="flex items-center gap-2 px-3 md: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 flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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>
<span className="text-xs md: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"
className="flex items-center gap-2 px-3 md: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 flex-1 md:flex-none justify-center"
>
<svg className="w-5 h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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>
<span className="text-xs md:text-sm font-medium">Envoyer un email</span>
</a>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md: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">
<div className="bg-white rounded-lg md:rounded-xl border border-gray-200 p-4 md:p-6 shadow-sm">
<div className="flex items-center gap-2 md:gap-3 mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-lblue/10 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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">
<h3 className="text-base md: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">
<div className="space-y-3 md:space-y-4">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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">
<a href={`tel:${viewingContact.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
{viewingContact.telephone}
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
@@ -960,43 +1056,43 @@ export default function UniversProTable() {
</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">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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">{viewingContact.adresse}</p>
<p className="text-sm font-semibold text-gray-900 break-words">{viewingContact.adresse}</p>
</div>
</div>
</div>
</div>
{/* 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">
<div className="bg-white rounded-lg md:rounded-xl border border-gray-200 p-4 md:p-6 shadow-sm">
<div className="flex items-center gap-2 md:gap-3 mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-lblue/10 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
</div>
<h3 className="text-lg font-semibold text-gray-900">
<h3 className="text-base md: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">
<div className="space-y-3 md:space-y-4">
<div className="flex items-start gap-3 md:gap-4">
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 md:w-5 md: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>
<p className="text-base md:text-lg font-bold text-gray-900">{viewingContact.nomEntreprise}</p>
</div>
</div>
</div>
@@ -1006,11 +1102,11 @@ export default function UniversProTable() {
</div>
{/* Footer avec actions */}
<div className="border-t border-gray-200 px-8 py-5 bg-white">
<div className="flex items-center justify-between">
<div className="border-t border-gray-200 px-4 md:px-8 py-4 md:py-5 bg-white">
<div className="flex flex-col-reverse md:flex-row items-stretch md:items-center justify-between gap-3 md:gap-0">
<button
onClick={() => setViewingContact(null)}
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"
className="px-4 md: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 w-full md:w-auto"
>
Fermer
</button>
@@ -1019,9 +1115,9 @@ export default function UniversProTable() {
setViewingContact(null);
handleEdit(viewingContact);
}}
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"
className="px-4 md:px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors flex items-center justify-center gap-2 w-full md:w-auto"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 md:w-5 md: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 le contact

BIN
prisma/dev.db
View File

Binary file not shown.