Added few functions to the platform
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import AdherentForm from './AdherentForm';
|
||||
import ConfirmModal from './ConfirmModal';
|
||||
|
||||
interface Adherent {
|
||||
id: string;
|
||||
@@ -14,6 +15,7 @@ interface Adherent {
|
||||
situation?: string | null;
|
||||
prescripteur?: string | null;
|
||||
facturation?: string | null;
|
||||
forfait?: string | null;
|
||||
commentaire?: string | null;
|
||||
telephoneSecondaire?: string | null;
|
||||
instructions?: string | null;
|
||||
@@ -26,6 +28,19 @@ export default function AdherentsTable() {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingAdherent, setEditingAdherent] = useState<Adherent | null>(null);
|
||||
const [viewingAdherent, setViewingAdherent] = useState<Adherent | 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 fetchAdherents = async (searchTerm: string = '') => {
|
||||
setLoading(true);
|
||||
@@ -58,23 +73,46 @@ export default function AdherentsTable() {
|
||||
}, []);
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Êtes-vous sûr de vouloir supprimer cet adhérent ?')) {
|
||||
return;
|
||||
}
|
||||
setConfirmDeleteModal({
|
||||
show: true,
|
||||
id,
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = async () => {
|
||||
if (!confirmDeleteModal?.id) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/adherents/${id}`, {
|
||||
const response = await fetch(`/api/adherents/${confirmDeleteModal.id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
fetchAdherents(search);
|
||||
setResultModal({
|
||||
show: true,
|
||||
type: 'success',
|
||||
title: 'Suppression réussie',
|
||||
message: 'L\'adhérent a été supprimé avec succès',
|
||||
});
|
||||
} else {
|
||||
alert('Erreur lors de la suppression');
|
||||
setResultModal({
|
||||
show: true,
|
||||
type: 'error',
|
||||
title: 'Erreur',
|
||||
message: 'Erreur lors de la suppression',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la suppression:', error);
|
||||
alert('Erreur lors de la suppression');
|
||||
setResultModal({
|
||||
show: true,
|
||||
type: 'error',
|
||||
title: 'Erreur',
|
||||
message: 'Erreur lors de la suppression',
|
||||
});
|
||||
} finally {
|
||||
setConfirmDeleteModal(null);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -110,6 +148,556 @@ export default function AdherentsTable() {
|
||||
return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||||
};
|
||||
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedIds(new Set(adherents.map(a => a.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 adhérent à exporter',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedAdherents = adherents.filter(a => selectedIds.has(a.id));
|
||||
|
||||
// Créer les en-têtes CSV avec tous les champs disponibles
|
||||
const headers = [
|
||||
'Nom',
|
||||
'Prénom',
|
||||
'Date de naissance',
|
||||
'Adresse',
|
||||
'Email',
|
||||
'Téléphone',
|
||||
'Téléphone secondaire',
|
||||
'Situation',
|
||||
'Prescripteur',
|
||||
'Facturation',
|
||||
'Forfait',
|
||||
'Commentaire',
|
||||
'Instructions'
|
||||
];
|
||||
|
||||
// Créer les lignes CSV
|
||||
const rows = selectedAdherents.map(adherent => {
|
||||
const formatDateForCSV = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||||
};
|
||||
|
||||
return [
|
||||
adherent.nom || '',
|
||||
adherent.prenom || '',
|
||||
formatDateForCSV(adherent.dateNaissance),
|
||||
adherent.adresse || '',
|
||||
adherent.email || '',
|
||||
adherent.telephone || '',
|
||||
adherent.telephoneSecondaire || '',
|
||||
adherent.situation || '',
|
||||
adherent.prescripteur || '',
|
||||
adherent.facturation || '',
|
||||
adherent.forfait || '',
|
||||
(adherent.commentaire || '').replace(/"/g, '""'), // Échapper les guillemets
|
||||
(adherent.instructions || '').replace(/"/g, '""') // Échapper les guillemets
|
||||
];
|
||||
});
|
||||
|
||||
// Créer le contenu CSV
|
||||
const csvContent = [
|
||||
headers.join(','),
|
||||
...rows.map(row => row.map(cell => `"${cell}"`).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', `adherents_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',
|
||||
'Date de naissance',
|
||||
'Adresse',
|
||||
'Email',
|
||||
'Téléphone',
|
||||
'Téléphone secondaire',
|
||||
'Situation',
|
||||
'Prescripteur',
|
||||
'Facturation',
|
||||
'Forfait',
|
||||
'Commentaire',
|
||||
'Instructions'
|
||||
];
|
||||
|
||||
// Ligne d'exemple
|
||||
const exampleRow = [
|
||||
'Dupont',
|
||||
'Jean',
|
||||
'15/03/1980',
|
||||
'123 Rue de la Paix, 75001 Paris',
|
||||
'jean.dupont@example.com',
|
||||
'0123456789',
|
||||
'0987654321',
|
||||
'Aucun',
|
||||
'Aucun',
|
||||
'Aucun',
|
||||
'Aucun',
|
||||
'',
|
||||
''
|
||||
];
|
||||
|
||||
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_adherents.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;
|
||||
}
|
||||
|
||||
// Charger les options existantes
|
||||
let existingOptions: {
|
||||
situation: Array<{ id: string; value: string }>;
|
||||
prescripteur: Array<{ id: string; value: string }>;
|
||||
facturation: Array<{ id: string; value: string }>;
|
||||
forfait: Array<{ id: string; value: string }>;
|
||||
} = {
|
||||
situation: [],
|
||||
prescripteur: [],
|
||||
facturation: [],
|
||||
forfait: [],
|
||||
};
|
||||
|
||||
try {
|
||||
const optionsResponse = await fetch('/api/settings/adherent-options');
|
||||
if (optionsResponse.ok) {
|
||||
const optionsData = await optionsResponse.json();
|
||||
existingOptions = {
|
||||
situation: optionsData.situation || [],
|
||||
prescripteur: optionsData.prescripteur || [],
|
||||
facturation: optionsData.facturation || [],
|
||||
forfait: optionsData.forfait || [],
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des options:', error);
|
||||
}
|
||||
|
||||
// Fonction pour créer une nouvelle option si elle n'existe pas
|
||||
const ensureOptionExists = async (type: 'situation' | 'prescripteur' | 'facturation' | 'forfait', value: string): Promise<boolean> => {
|
||||
if (!value || value.trim() === '') return true; // Valeur vide, pas besoin de créer
|
||||
|
||||
const existing = existingOptions[type].find(opt => opt.value.toLowerCase() === value.toLowerCase());
|
||||
if (existing) return true; // L'option existe déjà
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/settings/adherent-options', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type,
|
||||
value: value.trim(),
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const newOption = await response.json();
|
||||
existingOptions[type].push(newOption);
|
||||
return true;
|
||||
} else {
|
||||
// Si l'option existe déjà (erreur 400), c'est OK
|
||||
const errorData = await response.json();
|
||||
if (errorData.error?.includes('existe déjà')) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Erreur lors de la création de l'option ${type}:`, error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 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;
|
||||
// Utiliser le séparateur le plus fréquent, ou point-virgule par défaut pour les fichiers français
|
||||
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;
|
||||
};
|
||||
|
||||
// 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);
|
||||
|
||||
// Fonction pour normaliser les noms de colonnes (enlever accents, espaces, mettre en minuscule)
|
||||
const normalizeHeader = (header: string): string => {
|
||||
return header
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '') // Enlever les accents
|
||||
.replace(/\s+/g, '') // Enlever les espaces
|
||||
.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;
|
||||
};
|
||||
|
||||
// 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';
|
||||
|
||||
// Pour la date de naissance, chercher une colonne qui contient "date" ET "naissance" ou des variantes
|
||||
const dateNaissanceIndex = (() => {
|
||||
for (let i = 0; i < headers.length; i++) {
|
||||
const normalized = normalizeHeader(headers[i]);
|
||||
if ((normalized.includes('date') || normalized.includes('naissance') || normalized.includes('birth') || normalized.includes('dob')) &&
|
||||
(normalized.includes('naissance') || normalized.includes('birth') || normalized.includes('dob') || normalized.includes('date'))) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
})();
|
||||
const dateNaissanceHeader = dateNaissanceIndex >= 0 ? headers[dateNaissanceIndex] : 'Date de naissance';
|
||||
const adresseIndex = findColumnIndex(['adresse']);
|
||||
const adresseHeader = adresseIndex >= 0 ? headers[adresseIndex] : 'Adresse';
|
||||
const emailIndex = findColumnIndex(['email', 'mail', 'courriel']);
|
||||
const emailHeader = emailIndex >= 0 ? headers[emailIndex] : 'Email';
|
||||
const telephoneIndex = findColumnIndex(['telephone', 'téléphone', 'tel', 'phone'], ['secondaire', 'sec']);
|
||||
const telephoneHeader = telephoneIndex >= 0 ? headers[telephoneIndex] : 'Téléphone';
|
||||
const telephoneSecondaireIndex = findColumnIndex(['telephone', 'téléphone', 'tel', 'phone'], []); // Trouver celui qui contient "secondaire"
|
||||
const telephoneSecondaireHeader = (() => {
|
||||
for (let i = 0; i < headers.length; i++) {
|
||||
const normalized = normalizeHeader(headers[i]);
|
||||
if ((normalized.includes('telephone') || normalized.includes('tel') || normalized.includes('phone')) &&
|
||||
(normalized.includes('secondaire') || normalized.includes('sec') || normalized.includes('2'))) {
|
||||
return headers[i];
|
||||
}
|
||||
}
|
||||
return 'Téléphone secondaire';
|
||||
})();
|
||||
const situationIndex = findColumnIndex(['situation']);
|
||||
const situationHeader = situationIndex >= 0 ? headers[situationIndex] : 'Situation';
|
||||
const prescripteurIndex = findColumnIndex(['prescripteur']);
|
||||
const prescripteurHeader = prescripteurIndex >= 0 ? headers[prescripteurIndex] : 'Prescripteur';
|
||||
const facturationIndex = findColumnIndex(['facturation']);
|
||||
const facturationHeader = facturationIndex >= 0 ? headers[facturationIndex] : 'Facturation';
|
||||
const forfaitIndex = findColumnIndex(['forfait']);
|
||||
const forfaitHeader = forfaitIndex >= 0 ? headers[forfaitIndex] : 'Forfait';
|
||||
const commentaireIndex = findColumnIndex(['commentaire', 'comment']);
|
||||
const commentaireHeader = commentaireIndex >= 0 ? headers[commentaireIndex] : 'Commentaire';
|
||||
const instructionsIndex = findColumnIndex(['instructions', 'instruction']);
|
||||
const instructionsHeader = instructionsIndex >= 0 ? headers[instructionsIndex] : 'Instructions';
|
||||
|
||||
// Vérifier que les colonnes obligatoires sont présentes (après le mapping)
|
||||
const missingRequiredColumns: string[] = [];
|
||||
if (nomIndex === -1) missingRequiredColumns.push('Nom');
|
||||
if (prenomIndex === -1) missingRequiredColumns.push('Prénom');
|
||||
if (dateNaissanceIndex === -1) missingRequiredColumns.push('Date de naissance');
|
||||
if (adresseIndex === -1) missingRequiredColumns.push('Adresse');
|
||||
if (emailIndex === -1) missingRequiredColumns.push('Email');
|
||||
if (telephoneIndex === -1) missingRequiredColumns.push('Téléphone');
|
||||
|
||||
if (missingRequiredColumns.length > 0) {
|
||||
// Afficher les colonnes disponibles pour aider au débogage
|
||||
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[] = [];
|
||||
const newOptionsCreated: 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 dateNaissance = dateNaissanceIndex >= 0 ? (row[dateNaissanceIndex] || '').trim() : '';
|
||||
const adresse = adresseIndex >= 0 ? (row[adresseIndex] || '').trim() : '';
|
||||
const email = emailIndex >= 0 ? (row[emailIndex] || '').trim() : '';
|
||||
const telephone = telephoneIndex >= 0 ? (row[telephoneIndex] || '').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 (!dateNaissance) missingFields.push(dateNaissanceHeader);
|
||||
if (!adresse) missingFields.push(adresseHeader);
|
||||
if (!email) missingFields.push(emailHeader);
|
||||
if (!telephone) missingFields.push(telephoneHeader);
|
||||
|
||||
if (missingFields.length > 0) {
|
||||
errorCount++;
|
||||
const fieldsList = missingFields.join(', ');
|
||||
errors.push(`Ligne ${i + 2}: Colonnes manquantes ou vides : ${fieldsList}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Convertir la date au format ISO
|
||||
let dateISO = '';
|
||||
try {
|
||||
const dateParts = dateNaissance.split('/');
|
||||
if (dateParts.length === 3) {
|
||||
dateISO = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
|
||||
} else {
|
||||
dateISO = new Date(dateNaissance).toISOString().split('T')[0];
|
||||
}
|
||||
} catch {
|
||||
errorCount++;
|
||||
errors.push(`Ligne ${i + 2}: Colonne "${dateNaissanceHeader}" - Format de date invalide (attendu: JJ/MM/AAAA)`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Récupérer les valeurs des champs optionnels
|
||||
const situationValue = situationIndex >= 0 ? row[situationIndex]?.trim() : '';
|
||||
const prescripteurValue = prescripteurIndex >= 0 ? row[prescripteurIndex]?.trim() : '';
|
||||
const facturationValue = facturationIndex >= 0 ? row[facturationIndex]?.trim() : '';
|
||||
const forfaitValue = forfaitIndex >= 0 ? row[forfaitIndex]?.trim() : '';
|
||||
|
||||
// Créer les options manquantes avant de créer l'adhérent
|
||||
if (situationValue) {
|
||||
const existed = existingOptions.situation.find(opt => opt.value.toLowerCase() === situationValue.toLowerCase());
|
||||
if (!existed) {
|
||||
const created = await ensureOptionExists('situation', situationValue);
|
||||
if (created) {
|
||||
newOptionsCreated.push(`Situation: "${situationValue}"`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (prescripteurValue) {
|
||||
const existed = existingOptions.prescripteur.find(opt => opt.value.toLowerCase() === prescripteurValue.toLowerCase());
|
||||
if (!existed) {
|
||||
const created = await ensureOptionExists('prescripteur', prescripteurValue);
|
||||
if (created) {
|
||||
newOptionsCreated.push(`Prescripteur: "${prescripteurValue}"`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (facturationValue) {
|
||||
const existed = existingOptions.facturation.find(opt => opt.value.toLowerCase() === facturationValue.toLowerCase());
|
||||
if (!existed) {
|
||||
const created = await ensureOptionExists('facturation', facturationValue);
|
||||
if (created) {
|
||||
newOptionsCreated.push(`Facturation: "${facturationValue}"`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (forfaitValue) {
|
||||
const existed = existingOptions.forfait.find(opt => opt.value.toLowerCase() === forfaitValue.toLowerCase());
|
||||
if (!existed) {
|
||||
const created = await ensureOptionExists('forfait', forfaitValue);
|
||||
if (created) {
|
||||
newOptionsCreated.push(`Forfait: "${forfaitValue}"`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/adherents', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
nom,
|
||||
prenom,
|
||||
dateNaissance: dateISO,
|
||||
adresse,
|
||||
email,
|
||||
telephone,
|
||||
telephoneSecondaire: telephoneSecondaireIndex >= 0 ? row[telephoneSecondaireIndex]?.trim() || null : null,
|
||||
situation: situationValue || null,
|
||||
prescripteur: prescripteurValue || null,
|
||||
facturation: facturationValue || null,
|
||||
forfait: forfaitValue || null,
|
||||
commentaire: commentaireIndex >= 0 ? row[commentaireIndex]?.trim() || null : null,
|
||||
instructions: instructionsIndex >= 0 ? row[instructionsIndex]?.trim() || null : null,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
successCount++;
|
||||
} else {
|
||||
errorCount++;
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
// Essayer d'identifier les champs problématiques depuis le message d'erreur
|
||||
let errorMsg = errorData.error || 'Erreur lors de l\'import';
|
||||
if (errorMsg.includes('champs obligatoires')) {
|
||||
// Si l'erreur vient du serveur, on peut ajouter plus de contexte
|
||||
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';
|
||||
|
||||
let message = errorCount === 0
|
||||
? `${successCount} adhérent(s) importé(s) avec succès`
|
||||
: `${successCount} adhérent(s) importé(s) avec succès, ${errorCount} erreur(s)`;
|
||||
|
||||
// Ajouter les informations sur les nouvelles options créées
|
||||
if (newOptionsCreated.length > 0) {
|
||||
message += `\n\n${newOptionsCreated.length} nouvelle(s) option(s) ajoutée(s) aux sélecteurs.`;
|
||||
}
|
||||
|
||||
// Combiner les erreurs et les nouvelles options dans les détails
|
||||
const details: string[] = [];
|
||||
if (newOptionsCreated.length > 0) {
|
||||
details.push('Nouvelles options créées :');
|
||||
details.push(...newOptionsCreated);
|
||||
if (errors.length > 0) {
|
||||
details.push('');
|
||||
details.push('Erreurs :');
|
||||
}
|
||||
}
|
||||
if (errors.length > 0) {
|
||||
details.push(...errors);
|
||||
}
|
||||
|
||||
setResultModal({
|
||||
show: true,
|
||||
type: errorCount === 0 ? 'success' : 'error',
|
||||
title,
|
||||
message,
|
||||
details: details.length > 0 ? details : undefined,
|
||||
});
|
||||
|
||||
// Rafraîchir la liste
|
||||
fetchAdherents(search);
|
||||
setShowImportModal(false);
|
||||
};
|
||||
|
||||
reader.readAsText(file, 'UTF-8');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Barre de recherche et actions */}
|
||||
@@ -147,17 +735,24 @@ export default function AdherentsTable() {
|
||||
</svg>
|
||||
Nouvel adhérent
|
||||
</button>
|
||||
<button className="flex items-center gap-2 px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors">
|
||||
<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 className="flex items-center gap-2 px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors">
|
||||
<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
|
||||
Exporter {selectedIds.size > 0 && `(${selectedIds.size})`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -174,6 +769,14 @@ export default function AdherentsTable() {
|
||||
<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>
|
||||
@@ -185,6 +788,14 @@ export default function AdherentsTable() {
|
||||
<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">
|
||||
@@ -285,6 +896,242 @@ export default function AdherentsTable() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 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 adhérents
|
||||
</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" 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"
|
||||
name="file-upload"
|
||||
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>Les champs Nom, Prénom, Date de naissance, Adresse, Email et Téléphone sont obligatoires</li>
|
||||
<li>Le format de date attendu est JJ/MM/AAAA</li>
|
||||
<li>Les autres champs sont optionnels</li>
|
||||
<li>Assurez-vous que le fichier utilise l'encodage UTF-8</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">
|
||||
Erreurs :
|
||||
</h3>
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 max-h-64 overflow-y-auto">
|
||||
<ul className="space-y-1">
|
||||
{resultModal.details.slice(0, 10).map((error, index) => (
|
||||
<li key={index} className="text-sm text-red-800">
|
||||
{error}
|
||||
</li>
|
||||
))}
|
||||
{resultModal.details.length > 10 && (
|
||||
<li className="text-sm text-red-600 italic">
|
||||
... et {resultModal.details.length - 10} autre(s) erreur(s)
|
||||
</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 l'adhérent"
|
||||
message="Êtes-vous sûr de vouloir supprimer cet adhérent ?"
|
||||
confirmText="Supprimer"
|
||||
cancelText="Annuler"
|
||||
confirmColor="danger"
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => setConfirmDeleteModal(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Modal vue détaillée */}
|
||||
{viewingAdherent && (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
|
||||
@@ -418,6 +1265,17 @@ export default function AdherentsTable() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewingAdherent.forfait && (
|
||||
<div className="flex items-center py-3 border-b border-gray-100">
|
||||
<div className="w-32 flex-shrink-0">
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Forfait</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm text-gray-900 font-medium">{viewingAdherent.forfait}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewingAdherent.telephoneSecondaire && (
|
||||
<div className="flex items-center py-3 border-b border-gray-100">
|
||||
<div className="w-32 flex-shrink-0">
|
||||
|
||||
Reference in New Issue
Block a user