import React, { useState, useEffect } from 'react'; import { Plus, Phone, Mail, MessageSquare, Edit3, Calendar, DollarSign, User, Building, Trash2, Eye, ChevronRight } from 'lucide-react'; const LeadManagementSystem = () => { const [leads, setLeads] = useState([]); const [showForm, setShowForm] = useState(false); const [selectedLead, setSelectedLead] = useState(null); const [viewMode, setViewMode] = useState('dashboard'); // dashboard, form, detail const [editingLead, setEditingLead] = useState(null); // Données de configuration const canaux = ['Instagram', 'Bouche-à-oreille', 'Publicité', 'Site web', 'Référencement', 'Salon/Événement', 'Autre']; const moyensContact = ['Appel', 'SMS', 'E-mail', 'WhatsApp', 'DM Instagram', 'Messenger', 'Autre']; const etatsLead = ['En attente de réponse', 'Lead non qualifié', 'Refus / Pas intéressé', 'Demande d\'informations', 'Demande de devis', 'En attente de documents', 'À relancer', 'Abandonné']; const etatsProjet = ['En attente de signature', 'Projet confirmé', 'Projet en préparation', 'Projet lancé', 'Projet en cours', 'Projet en pause', 'Projet terminé', 'Projet annulé']; const degresInteret = ['Fort', 'Moyen', 'Faible']; const priorites = ['Haute', 'Moyenne', 'Basse']; // Initialisation avec des données d'exemple useEffect(() => { const exampleLeads = [ { id: 1, dateEntree: '2024-07-10', nom: 'Martin Dubois', telephone: '06 12 34 56 78', email: 'martin.dubois@email.com', canal: 'Instagram', premierContact: true, moyensContactUtilises: ['Appel', 'E-mail'], etatLead: 'Demande de devis', derniereAction: 'Envoi devis - 2024-07-09', prochaineEtape: 'Relance téléphonique', dateRelance: '2024-07-12', commentaire: 'Très intéressé par nos services, budget confirmé', devisEnvoye: true, dateEnvoiDevis: '2024-07-09', devisAccepte: 'En réflexion', montantDevis: 2500, etatProjet: 'En attente de signature', degreInteret: 'Fort', priorite: 'Haute', responsable: 'Sophie Martin' }, { id: 2, dateEntree: '2024-07-08', nom: 'SAS TechCorp', telephone: '01 23 45 67 89', email: 'contact@techcorp.com', canal: 'Bouche-à-oreille', premierContact: false, moyensContactUtilises: ['E-mail'], etatLead: 'En attente de réponse', derniereAction: 'Envoi présentation - 2024-07-08', prochaineEtape: 'Appel de suivi', dateRelance: '2024-07-11', commentaire: 'Recommandé par client existant', devisEnvoye: false, degreInteret: 'Moyen', priorite: 'Moyenne', responsable: 'Jean Dupont' } ]; setLeads(exampleLeads); }, []); const getStatusColor = (etat) => { const colors = { 'En attente de réponse': 'bg-yellow-100 text-yellow-800', 'Lead non qualifié': 'bg-gray-100 text-gray-800', 'Refus / Pas intéressé': 'bg-red-100 text-red-800', 'Demande d\'informations': 'bg-blue-100 text-blue-800', 'Demande de devis': 'bg-purple-100 text-purple-800', 'En attente de documents': 'bg-orange-100 text-orange-800', 'À relancer': 'bg-yellow-100 text-yellow-800', 'Abandonné': 'bg-gray-100 text-gray-800' }; return colors[etat] || 'bg-gray-100 text-gray-800'; }; const getPriorityColor = (priorite) => { const colors = { 'Haute': 'bg-red-100 text-red-800', 'Moyenne': 'bg-yellow-100 text-yellow-800', 'Basse': 'bg-green-100 text-green-800' }; return colors[priorite] || 'bg-gray-100 text-gray-800'; }; const handleSubmit = (formData) => { if (editingLead) { setLeads(leads.map(lead => lead.id === editingLead.id ? { ...formData, id: editingLead.id } : lead )); setEditingLead(null); } else { const newLead = { ...formData, id: Date.now(), dateEntree: new Date().toISOString().split('T')[0] }; setLeads([...leads, newLead]); } setShowForm(false); setViewMode('dashboard'); }; const deleteLead = (id) => { setLeads(leads.filter(lead => lead.id !== id)); }; const editLead = (lead) => { setEditingLead(lead); setShowForm(true); setViewMode('form'); }; const viewLead = (lead) => { setSelectedLead(lead); setViewMode('detail'); }; // Statistiques const stats = { total: leads.length, enCours: leads.filter(l => !['Refus / Pas intéressé', 'Abandonné', 'Projet terminé'].includes(l.etatLead)).length, devis: leads.filter(l => l.devisEnvoye).length, projets: leads.filter(l => l.etatProjet && !['Projet annulé', 'Projet terminé'].includes(l.etatProjet)).length }; // Composant Dashboard const Dashboard = () => ( ); // Composant Formulaire const LeadForm = () => { const [formData, setFormData] = useState(editingLead || { nom: '', telephone: '', email: '', canal: '', premierContact: false, moyensContactUtilises: [], etatLead: 'En attente de réponse', derniereAction: '', prochaineEtape: '', dateRelance: '', commentaire: '', devisEnvoye: false, dateEnvoiDevis: '', devisAccepte: 'Non', montantDevis: '', etatProjet: '', degreInteret: 'Moyen', priorite: 'Moyenne', responsable: '' }); const handleInputChange = (e) => { const { name, value, type, checked } = e.target; setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value })); }; const handleMultiSelect = (name, value) => { setFormData(prev => ({ ...prev, [name]: prev[name].includes(value) ? prev[name].filter(item => item !== value) : [...prev[name], value] })); }; return ( ); }; // Composant Détail Lead const LeadDetail = () => { if (!selectedLead) return null; return ( ); }; // Rendu principal return ( ); }; export default LeadManagementSystem