983 lines
42 KiB
TypeScript
983 lines
42 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import UniversProForm from './UniversProForm';
|
|
import ConfirmModal from './ConfirmModal';
|
|
|
|
interface UniversPro {
|
|
id: string;
|
|
nom: string;
|
|
prenom: string;
|
|
telephone: string;
|
|
email: string;
|
|
adresse: string;
|
|
nomEntreprise: string;
|
|
}
|
|
|
|
export default function UniversProTable() {
|
|
const [contacts, setContacts] = useState<UniversPro[]>([]);
|
|
const [search, setSearch] = useState('');
|
|
const [loading, setLoading] = useState(true);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editingContact, setEditingContact] = useState<UniversPro | null>(null);
|
|
const [viewingContact, setViewingContact] = useState<UniversPro | null>(null);
|
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
|
const [showImportModal, setShowImportModal] = useState(false);
|
|
const [resultModal, setResultModal] = useState<{
|
|
show: boolean;
|
|
type: 'success' | 'error' | 'info';
|
|
title: string;
|
|
message: string;
|
|
details?: string[];
|
|
} | null>(null);
|
|
const [confirmDeleteModal, setConfirmDeleteModal] = useState<{
|
|
show: boolean;
|
|
id: string | null;
|
|
} | null>(null);
|
|
|
|
const fetchContacts = async (searchTerm: string = '') => {
|
|
setLoading(true);
|
|
try {
|
|
const url = searchTerm
|
|
? `/api/univers-pro?search=${encodeURIComponent(searchTerm)}`
|
|
: '/api/univers-pro';
|
|
const response = await fetch(url);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setContacts(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des contacts:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
fetchContacts(search);
|
|
}, 300);
|
|
|
|
return () => clearTimeout(timeoutId);
|
|
}, [search]);
|
|
|
|
useEffect(() => {
|
|
fetchContacts();
|
|
}, []);
|
|
|
|
const handleDelete = async (id: string) => {
|
|
setConfirmDeleteModal({
|
|
show: true,
|
|
id,
|
|
});
|
|
};
|
|
|
|
const confirmDelete = async () => {
|
|
if (!confirmDeleteModal?.id) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/univers-pro/${confirmDeleteModal.id}`, {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response.ok) {
|
|
fetchContacts(search);
|
|
setResultModal({
|
|
show: true,
|
|
type: 'success',
|
|
title: 'Suppression réussie',
|
|
message: 'Le contact a été supprimé avec succès',
|
|
});
|
|
} else {
|
|
setResultModal({
|
|
show: true,
|
|
type: 'error',
|
|
title: 'Erreur',
|
|
message: 'Erreur lors de la suppression',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de la suppression:', error);
|
|
setResultModal({
|
|
show: true,
|
|
type: 'error',
|
|
title: 'Erreur',
|
|
message: 'Erreur lors de la suppression',
|
|
});
|
|
} finally {
|
|
setConfirmDeleteModal(null);
|
|
}
|
|
};
|
|
|
|
const handleEdit = (contact: UniversPro) => {
|
|
setEditingContact(contact);
|
|
setShowForm(true);
|
|
};
|
|
|
|
const handleView = async (id: string) => {
|
|
try {
|
|
const response = await fetch(`/api/univers-pro/${id}`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setViewingContact(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de la récupération:', error);
|
|
}
|
|
};
|
|
|
|
const handleFormClose = () => {
|
|
setShowForm(false);
|
|
setEditingContact(null);
|
|
fetchContacts(search);
|
|
};
|
|
|
|
const getInitials = (nom: string, prenom: string) => {
|
|
return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
|
|
};
|
|
|
|
const handleSelectAll = (checked: boolean) => {
|
|
if (checked) {
|
|
setSelectedIds(new Set(contacts.map(c => c.id)));
|
|
} else {
|
|
setSelectedIds(new Set());
|
|
}
|
|
};
|
|
|
|
const handleSelectOne = (id: string, checked: boolean) => {
|
|
const newSelected = new Set(selectedIds);
|
|
if (checked) {
|
|
newSelected.add(id);
|
|
} else {
|
|
newSelected.delete(id);
|
|
}
|
|
setSelectedIds(newSelected);
|
|
};
|
|
|
|
const handleExport = () => {
|
|
if (selectedIds.size === 0) {
|
|
setResultModal({
|
|
show: true,
|
|
type: 'info',
|
|
title: 'Aucune sélection',
|
|
message: 'Veuillez sélectionner au moins un contact à exporter',
|
|
});
|
|
return;
|
|
}
|
|
|
|
const selectedContacts = contacts.filter(c => selectedIds.has(c.id));
|
|
|
|
// Créer les en-têtes CSV avec tous les champs disponibles
|
|
const headers = [
|
|
'Nom',
|
|
'Prénom',
|
|
'Téléphone',
|
|
'Email',
|
|
'Adresse',
|
|
'Nom entreprise'
|
|
];
|
|
|
|
// Créer les lignes CSV
|
|
const rows = selectedContacts.map(contact => {
|
|
return [
|
|
contact.nom || '',
|
|
contact.prenom || '',
|
|
contact.telephone || '',
|
|
contact.email || '',
|
|
contact.adresse || '',
|
|
contact.nomEntreprise || ''
|
|
];
|
|
});
|
|
|
|
// Créer le contenu CSV
|
|
const csvContent = [
|
|
headers.join(','),
|
|
...rows.map(row => row.map(cell => `"${cell.replace(/"/g, '""')}"`).join(','))
|
|
].join('\n');
|
|
|
|
// Créer le blob et télécharger
|
|
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' }); // BOM pour Excel
|
|
const link = document.createElement('a');
|
|
const url = URL.createObjectURL(blob);
|
|
link.setAttribute('href', url);
|
|
link.setAttribute('download', `contacts_pro_export_${new Date().toISOString().split('T')[0]}.csv`);
|
|
link.style.visibility = 'hidden';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
|
|
// Réinitialiser la sélection
|
|
setSelectedIds(new Set());
|
|
};
|
|
|
|
const handleDownloadTemplate = () => {
|
|
const headers = [
|
|
'Nom',
|
|
'Prénom',
|
|
'Téléphone',
|
|
'Email',
|
|
'Adresse',
|
|
'Nom entreprise'
|
|
];
|
|
|
|
// Ligne d'exemple
|
|
const exampleRow = [
|
|
'Dupont',
|
|
'Jean',
|
|
'0123456789',
|
|
'jean.dupont@example.com',
|
|
'123 Rue de la Paix, 75001 Paris',
|
|
'BNP Paribas'
|
|
];
|
|
|
|
const csvContent = [
|
|
headers.join(','),
|
|
exampleRow.map(cell => `"${cell}"`).join(',')
|
|
].join('\n');
|
|
|
|
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
const link = document.createElement('a');
|
|
const url = URL.createObjectURL(blob);
|
|
link.setAttribute('href', url);
|
|
link.setAttribute('download', 'modele_import_contacts_pro.csv');
|
|
link.style.visibility = 'hidden';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
};
|
|
|
|
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = async (e) => {
|
|
const text = e.target?.result as string;
|
|
const lines = text.split('\n').filter(line => line.trim());
|
|
|
|
if (lines.length < 2) {
|
|
setResultModal({
|
|
show: true,
|
|
type: 'error',
|
|
title: 'Fichier invalide',
|
|
message: 'Le fichier CSV doit contenir au moins une ligne d\'en-tête et une ligne de données',
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Détecter le séparateur (virgule ou point-virgule)
|
|
const detectSeparator = (firstLine: string): string => {
|
|
const commaCount = (firstLine.match(/,/g) || []).length;
|
|
const semicolonCount = (firstLine.match(/;/g) || []).length;
|
|
return semicolonCount >= commaCount ? ';' : ',';
|
|
};
|
|
|
|
// Parser le CSV (gestion simple des guillemets avec détection automatique du séparateur)
|
|
const parseCSVLine = (line: string, separator: string): string[] => {
|
|
const result: string[] = [];
|
|
let current = '';
|
|
let inQuotes = false;
|
|
|
|
for (let i = 0; i < line.length; i++) {
|
|
const char = line[i];
|
|
if (char === '"') {
|
|
if (inQuotes && line[i + 1] === '"') {
|
|
current += '"';
|
|
i++;
|
|
} else {
|
|
inQuotes = !inQuotes;
|
|
}
|
|
} else if (char === separator && !inQuotes) {
|
|
result.push(current.trim());
|
|
current = '';
|
|
} else {
|
|
current += char;
|
|
}
|
|
}
|
|
result.push(current.trim());
|
|
return result;
|
|
};
|
|
|
|
// Fonction pour normaliser les noms de colonnes
|
|
const normalizeHeader = (header: string): string => {
|
|
return header
|
|
.toLowerCase()
|
|
.normalize('NFD')
|
|
.replace(/[\u0300-\u036f]/g, '')
|
|
.replace(/\s+/g, '')
|
|
.trim();
|
|
};
|
|
|
|
// Fonction pour trouver une colonne avec plusieurs variantes possibles
|
|
const findColumnIndex = (patterns: string[], excludePatterns: string[] = []): number => {
|
|
for (let i = 0; i < headers.length; i++) {
|
|
const normalized = normalizeHeader(headers[i]);
|
|
const matchesPattern = patterns.some(pattern => normalized.includes(pattern));
|
|
const matchesExclude = excludePatterns.some(pattern => normalized.includes(pattern));
|
|
|
|
if (matchesPattern && !matchesExclude) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1;
|
|
};
|
|
|
|
// Détecter le séparateur depuis la première ligne
|
|
const separator = detectSeparator(lines[0]);
|
|
|
|
const headers = parseCSVLine(lines[0], separator);
|
|
const dataLines = lines.slice(1);
|
|
|
|
// Mapping des colonnes avec leurs noms d'affichage
|
|
const nomIndex = findColumnIndex(['nom'], ['prenom', 'prénom']);
|
|
const nomHeader = nomIndex >= 0 ? headers[nomIndex] : 'Nom';
|
|
const prenomIndex = findColumnIndex(['prenom', 'prénom']);
|
|
const prenomHeader = prenomIndex >= 0 ? headers[prenomIndex] : 'Prénom';
|
|
const telephoneIndex = findColumnIndex(['telephone', 'téléphone', 'tel', 'phone']);
|
|
const telephoneHeader = telephoneIndex >= 0 ? headers[telephoneIndex] : 'Téléphone';
|
|
const emailIndex = findColumnIndex(['email', 'mail', 'courriel']);
|
|
const emailHeader = emailIndex >= 0 ? headers[emailIndex] : 'Email';
|
|
const adresseIndex = findColumnIndex(['adresse']);
|
|
const adresseHeader = adresseIndex >= 0 ? headers[adresseIndex] : 'Adresse';
|
|
const nomEntrepriseIndex = findColumnIndex(['entreprise', 'company', 'societe', 'société']);
|
|
const nomEntrepriseHeader = nomEntrepriseIndex >= 0 ? headers[nomEntrepriseIndex] : 'Nom entreprise';
|
|
|
|
// Vérifier que les colonnes obligatoires sont présentes
|
|
const missingRequiredColumns: string[] = [];
|
|
if (nomIndex === -1) missingRequiredColumns.push('Nom');
|
|
if (prenomIndex === -1) missingRequiredColumns.push('Prénom');
|
|
if (telephoneIndex === -1) missingRequiredColumns.push('Téléphone');
|
|
if (emailIndex === -1) missingRequiredColumns.push('Email');
|
|
if (adresseIndex === -1) missingRequiredColumns.push('Adresse');
|
|
if (nomEntrepriseIndex === -1) missingRequiredColumns.push('Nom entreprise');
|
|
|
|
if (missingRequiredColumns.length > 0) {
|
|
const availableColumns = headers.length > 0 ? headers : ['Aucune colonne détectée'];
|
|
setResultModal({
|
|
show: true,
|
|
type: 'error',
|
|
title: 'Colonnes manquantes',
|
|
message: `Le fichier CSV ne contient pas les colonnes obligatoires suivantes : ${missingRequiredColumns.join(', ')}`,
|
|
details: [
|
|
'Colonnes détectées dans le fichier :',
|
|
...availableColumns.map(col => ` • ${col}`),
|
|
'',
|
|
'Conseil : Vérifiez que les noms de colonnes correspondent exactement au modèle (les accents et la casse sont importants).'
|
|
],
|
|
});
|
|
return;
|
|
}
|
|
|
|
let successCount = 0;
|
|
let errorCount = 0;
|
|
const errors: string[] = [];
|
|
|
|
for (let i = 0; i < dataLines.length; i++) {
|
|
const row = parseCSVLine(dataLines[i], separator);
|
|
if (row.length === 0) continue;
|
|
|
|
const nom = nomIndex >= 0 ? (row[nomIndex] || '').trim() : '';
|
|
const prenom = prenomIndex >= 0 ? (row[prenomIndex] || '').trim() : '';
|
|
const telephone = telephoneIndex >= 0 ? (row[telephoneIndex] || '').trim() : '';
|
|
const email = emailIndex >= 0 ? (row[emailIndex] || '').trim() : '';
|
|
const adresse = adresseIndex >= 0 ? (row[adresseIndex] || '').trim() : '';
|
|
const nomEntreprise = nomEntrepriseIndex >= 0 ? (row[nomEntrepriseIndex] || '').trim() : '';
|
|
|
|
// Validation des champs obligatoires avec identification précise des colonnes manquantes
|
|
const missingFields: string[] = [];
|
|
if (!nom) missingFields.push(nomHeader);
|
|
if (!prenom) missingFields.push(prenomHeader);
|
|
if (!telephone) missingFields.push(telephoneHeader);
|
|
if (!email) missingFields.push(emailHeader);
|
|
if (!adresse) missingFields.push(adresseHeader);
|
|
if (!nomEntreprise) missingFields.push(nomEntrepriseHeader);
|
|
|
|
if (missingFields.length > 0) {
|
|
errorCount++;
|
|
const fieldsList = missingFields.join(', ');
|
|
errors.push(`Ligne ${i + 2}: Colonnes manquantes ou vides : ${fieldsList}`);
|
|
continue;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/univers-pro', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
nom,
|
|
prenom,
|
|
telephone,
|
|
email,
|
|
adresse,
|
|
nomEntreprise,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
successCount++;
|
|
} else {
|
|
errorCount++;
|
|
try {
|
|
const errorData = await response.json();
|
|
let errorMsg = errorData.error || 'Erreur lors de l\'import';
|
|
if (errorMsg.includes('champs obligatoires')) {
|
|
errorMsg = `Erreur de validation : ${errorMsg}`;
|
|
}
|
|
errors.push(`Ligne ${i + 2}: ${errorMsg}`);
|
|
} catch {
|
|
errors.push(`Ligne ${i + 2}: Erreur serveur lors de l'import`);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
errorCount++;
|
|
errors.push(`Ligne ${i + 2}: Erreur réseau - ${error instanceof Error ? error.message : 'Connexion impossible'}`);
|
|
}
|
|
}
|
|
|
|
// Afficher les résultats dans une modale
|
|
const title = errorCount > 0
|
|
? `Import terminé avec ${errorCount} erreur(s)`
|
|
: 'Import réussi';
|
|
|
|
const message = errorCount === 0
|
|
? `${successCount} contact(s) importé(s) avec succès`
|
|
: `${successCount} contact(s) importé(s) avec succès, ${errorCount} erreur(s)`;
|
|
|
|
setResultModal({
|
|
show: true,
|
|
type: errorCount === 0 ? 'success' : 'error',
|
|
title,
|
|
message,
|
|
details: errors.length > 0 ? errors : undefined,
|
|
});
|
|
|
|
// Rafraîchir la liste
|
|
fetchContacts(search);
|
|
setShowImportModal(false);
|
|
};
|
|
|
|
reader.readAsText(file, 'UTF-8');
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Barre de recherche et actions */}
|
|
<div className="bg-white rounded-lg shadow-sm p-4 mb-6">
|
|
<div className="flex flex-col md:flex-row gap-4 items-center">
|
|
{/* Barre de recherche */}
|
|
<div className="flex-1 w-full md:w-auto">
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="Rechercher un contact..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Boutons d'action */}
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => {
|
|
setEditingContact(null);
|
|
setShowForm(true);
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Nouveau contact
|
|
</button>
|
|
<button
|
|
onClick={() => setShowImportModal(true)}
|
|
className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
Importer
|
|
</button>
|
|
<button
|
|
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"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4-4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
Exporter {selectedIds.size > 0 && `(${selectedIds.size})`}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tableau */}
|
|
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
{loading ? (
|
|
<div className="p-8 text-center text-gray-500">Chargement...</div>
|
|
) : contacts.length === 0 ? (
|
|
<div className="p-8 text-center text-gray-500">Aucun contact trouvé</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<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">
|
|
<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>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modal formulaire */}
|
|
{showForm && (
|
|
<UniversProForm
|
|
contact={editingContact}
|
|
onClose={handleFormClose}
|
|
/>
|
|
)}
|
|
|
|
{/* Modal import */}
|
|
{showImportModal && (
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
|
|
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full animate-slideUp border border-gray-200">
|
|
{/* Header */}
|
|
<div className="border-b border-gray-200 px-6 py-5 bg-white">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
Importer des contacts
|
|
</h2>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Téléchargez le modèle d'exemple, remplissez-le et importez-le ici
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowImportModal(false)}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contenu */}
|
|
<div className="px-6 py-6">
|
|
<div className="space-y-6">
|
|
{/* Télécharger le modèle */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-semibold text-blue-900 mb-1">
|
|
Télécharger le modèle d'exemple
|
|
</h3>
|
|
<p className="text-sm text-blue-700 mb-3">
|
|
Téléchargez le fichier CSV modèle pour voir le format attendu et remplir vos données.
|
|
</p>
|
|
<button
|
|
onClick={handleDownloadTemplate}
|
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
|
|
>
|
|
<svg className="w-4 h-4" 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>
|
|
Télécharger le modèle CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upload fichier */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Sélectionner le fichier CSV à importer
|
|
</label>
|
|
<div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-lblue transition-colors">
|
|
<div className="space-y-1 text-center">
|
|
<svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
|
|
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
<div className="flex text-sm text-gray-600">
|
|
<label htmlFor="file-upload-pro" className="relative cursor-pointer bg-white rounded-md font-medium text-lblue hover:text-dblue focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-lblue">
|
|
<span>Cliquez pour sélectionner un fichier</span>
|
|
<input
|
|
id="file-upload-pro"
|
|
name="file-upload-pro"
|
|
type="file"
|
|
accept=".csv"
|
|
onChange={handleFileUpload}
|
|
className="sr-only"
|
|
/>
|
|
</label>
|
|
<p className="pl-1">ou glissez-déposez</p>
|
|
</div>
|
|
<p className="text-xs text-gray-500">CSV jusqu'à 10MB</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Instructions */}
|
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">
|
|
Instructions :
|
|
</h3>
|
|
<ul className="text-sm text-gray-600 space-y-1 list-disc list-inside">
|
|
<li>Tous les champs sont obligatoires : Nom, Prénom, Téléphone, Email, Adresse, Nom entreprise</li>
|
|
<li>Assurez-vous que le fichier utilise l'encodage UTF-8</li>
|
|
<li>Le séparateur peut être une virgule (,) ou un point-virgule (;)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={() => setShowImportModal(false)}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
|
|
>
|
|
Fermer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal résultat */}
|
|
{resultModal && resultModal.show && (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
|
|
onClick={() => setResultModal(null)}
|
|
>
|
|
<div
|
|
className="bg-white rounded-lg shadow-xl max-w-lg w-full animate-slideUp border border-gray-200"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div className={`border-b border-gray-200 px-6 py-5 ${
|
|
resultModal.type === 'success' ? 'bg-green-50' :
|
|
resultModal.type === 'error' ? 'bg-red-50' :
|
|
'bg-blue-50'
|
|
}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
{resultModal.type === 'success' && (
|
|
<svg className="w-6 h-6 text-green-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>
|
|
)}
|
|
{resultModal.type === 'error' && (
|
|
<svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
)}
|
|
{resultModal.type === 'info' && (
|
|
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
)}
|
|
<h2 className={`text-xl font-semibold ${
|
|
resultModal.type === 'success' ? 'text-green-900' :
|
|
resultModal.type === 'error' ? 'text-red-900' :
|
|
'text-blue-900'
|
|
}`}>
|
|
{resultModal.title}
|
|
</h2>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setResultModal(null)}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contenu */}
|
|
<div className="px-6 py-6">
|
|
<p className={`text-sm font-medium mb-4 ${
|
|
resultModal.type === 'success' ? 'text-green-800' :
|
|
resultModal.type === 'error' ? 'text-red-800' :
|
|
'text-blue-800'
|
|
}`}>
|
|
{resultModal.message}
|
|
</p>
|
|
|
|
{resultModal.details && resultModal.details.length > 0 && (
|
|
<div className="mt-4">
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">
|
|
{resultModal.details[0].includes('Colonnes détectées') ? 'Détails :' : 'Erreurs :'}
|
|
</h3>
|
|
<div className={`border rounded-lg p-4 max-h-64 overflow-y-auto ${
|
|
resultModal.type === 'error' ? 'bg-red-50 border-red-200' : 'bg-gray-50 border-gray-200'
|
|
}`}>
|
|
<ul className="space-y-1">
|
|
{resultModal.details.map((detail, index) => (
|
|
<li key={index} className={`text-sm ${
|
|
resultModal.type === 'error' ? 'text-red-800' : 'text-gray-800'
|
|
}`}>
|
|
{detail}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => setResultModal(null)}
|
|
className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${
|
|
resultModal.type === 'success'
|
|
? 'bg-green-600 text-white hover:bg-green-700' :
|
|
resultModal.type === 'error'
|
|
? 'bg-red-600 text-white hover:bg-red-700' :
|
|
'bg-blue-600 text-white hover:bg-blue-700'
|
|
}`}
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal de confirmation de suppression */}
|
|
{confirmDeleteModal && (
|
|
<ConfirmModal
|
|
isOpen={confirmDeleteModal.show}
|
|
title="Supprimer le contact"
|
|
message="Êtes-vous sûr de vouloir supprimer ce contact ?"
|
|
confirmText="Supprimer"
|
|
cancelText="Annuler"
|
|
confirmColor="danger"
|
|
onConfirm={confirmDelete}
|
|
onCancel={() => setConfirmDeleteModal(null)}
|
|
/>
|
|
)}
|
|
|
|
{/* Modal vue détaillée */}
|
|
{viewingContact && (
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
|
|
<div className="bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-hidden flex flex-col animate-slideUp border border-gray-200">
|
|
{/* Header */}
|
|
<div className="border-b border-gray-200 px-6 py-5 bg-white">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 font-semibold text-lg border-2 border-gray-200">
|
|
{getInitials(viewingContact.nom, viewingContact.prenom)}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
{viewingContact.prenom} {viewingContact.nom}
|
|
</h2>
|
|
<p className="text-sm text-gray-500 mt-0.5">
|
|
Informations détaillées du contact
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setViewingContact(null)}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contenu scrollable */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-6">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center py-3 border-b border-gray-100">
|
|
<div className="w-32 flex-shrink-0">
|
|
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Téléphone</span>
|
|
</div>
|
|
<div className="flex-1 flex items-center gap-2">
|
|
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
<a href={`tel:${viewingContact.telephone}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors">
|
|
{viewingContact.telephone}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center py-3 border-b border-gray-100">
|
|
<div className="w-32 flex-shrink-0">
|
|
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Email</span>
|
|
</div>
|
|
<div className="flex-1 flex items-center gap-2">
|
|
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
<a href={`mailto:${viewingContact.email}`} className="text-sm text-gray-900 font-medium hover:text-lblue transition-colors break-all">
|
|
{viewingContact.email}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start py-3 border-b border-gray-100">
|
|
<div className="w-32 flex-shrink-0">
|
|
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Adresse</span>
|
|
</div>
|
|
<div className="flex-1 flex items-start gap-2">
|
|
<svg className="h-4 w-4 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span className="text-sm text-gray-900 font-medium">{viewingContact.adresse}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center py-3">
|
|
<div className="w-32 flex-shrink-0">
|
|
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Entreprise</span>
|
|
</div>
|
|
<div className="flex-1 flex items-center gap-2">
|
|
<svg className="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
<span className="text-sm text-gray-900 font-medium">{viewingContact.nomEntreprise}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={() => setViewingContact(null)}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
|
|
>
|
|
Fermer
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setViewingContact(null);
|
|
handleEdit(viewingContact);
|
|
}}
|
|
className="px-4 py-2 bg-lblue text-white text-sm font-medium rounded hover:bg-dblue transition-colors flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
Modifier
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|