const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } = React; const CONFIG = { API_URL: 'https://api.helvia.app', MCP_URL: 'https://mcp.helvia.app' }; const LINE_TYPES = { forward: { label: 'Redirection', color: 'badge-info' }, ivr: { label: 'Menu IVR', color: 'badge-warning' }, voice_ai: { label: 'IA Vocale', color: 'badge-primary' }, voicemail: { label: 'Messagerie', color: 'badge-gray' }, browser: { label: 'Navigateur', color: 'badge-success' }, link: { label: 'Envoi de lien', color: 'badge-purple' }, webhook: { label: 'Webhook', color: 'badge-orange' }, external_api: { label: 'API externe', color: 'badge-dark' }, }; // Parse rapide d'un User-Agent (sans dépendance externe). function parseUserAgent(ua) { if (!ua) return '—'; const u = String(ua); let browser = 'Inconnu', version = ''; if (/Edg\//.test(u)) { browser = 'Edge'; version = (u.match(/Edg\/([\d.]+)/) || [])[1] || ''; } else if (/OPR\//.test(u) || /Opera/.test(u)) { browser = 'Opera'; version = (u.match(/OPR\/([\d.]+)/) || [])[1] || ''; } else if (/Chrome\//.test(u)) { browser = 'Chrome'; version = (u.match(/Chrome\/([\d.]+)/) || [])[1] || ''; } else if (/Safari\//.test(u)) { browser = 'Safari'; version = (u.match(/Version\/([\d.]+)/) || [])[1] || ''; } else if (/Firefox\//.test(u)) { browser = 'Firefox'; version = (u.match(/Firefox\/([\d.]+)/) || [])[1] || ''; } let os = 'Inconnu'; if (/Windows NT 10/.test(u)) os = 'Windows 10/11'; else if (/Windows/.test(u)) os = 'Windows'; else if (/Mac OS X/.test(u)) os = 'macOS ' + ((u.match(/Mac OS X ([\d_]+)/) || [])[1] || '').replace(/_/g, '.'); else if (/Android/.test(u)) os = 'Android ' + ((u.match(/Android ([\d.]+)/) || [])[1] || ''); else if (/iPhone|iPad/.test(u)) os = 'iOS ' + ((u.match(/OS ([\d_]+)/) || [])[1] || '').replace(/_/g, '.'); else if (/Linux/.test(u)) os = 'Linux'; const device = /Mobile|Android|iPhone/.test(u) ? 'Mobile' : 'Desktop'; return `${browser}${version ? ' ' + version.split('.')[0] : ''} · ${os} · ${device}`; } function formatDate(dateStr) { if (!dateStr) return '-'; return new Date(dateStr).toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit', year: 'numeric' }); } function formatCurrency(amount, currency = 'CHF') { if (amount === null || amount === undefined) return '-'; return `${Number(amount).toFixed(2)} ${currency}`; } // ==================== ICONS ==================== const Icons = { Phone: ({ className = "w-5 h-5" }) => ( ), PhoneIncoming: ({ className = "w-5 h-5" }) => ( ), Users: ({ className = "w-5 h-5" }) => ( ), CreditCard: ({ className = "w-5 h-5" }) => ( ), Key: ({ className = "w-5 h-5" }) => ( ), Shield: ({ className = "w-5 h-5" }) => ( ), HeadphonesIcon: ({ className = "w-5 h-5" }) => ( ), BarChart: ({ className = "w-5 h-5" }) => ( ), Settings: ({ className = "w-5 h-5" }) => ( ), Plus: ({ className = "w-5 h-5" }) => ( ), X: ({ className = "w-5 h-5" }) => ( ), ChevronRight: ({ className = "w-5 h-5" }) => ( ), ChevronLeft: ({ className = "w-5 h-5" }) => ( ), ChevronDown: ({ className = "w-5 h-5" }) => ( ), ChevronUp: ({ className = "w-5 h-5" }) => ( ), ArrowRight: ({ className = "w-5 h-5" }) => ( ), Download: ({ className = "w-5 h-5" }) => ( ), Wallet: ({ className = "w-5 h-5" }) => ( ), LogOut: ({ className = "w-5 h-5" }) => ( ), Search: ({ className = "w-5 h-5" }) => ( ), Edit: ({ className = "w-5 h-5" }) => ( ), Trash: ({ className = "w-5 h-5" }) => ( ), Mail: ({ className = "w-5 h-5" }) => ( ), AlertTriangle: ({ className = "w-5 h-5" }) => ( ), Bell: ({ className = "w-5 h-5" }) => ( ), Refresh: ({ className = "w-5 h-5" }) => ( ), Menu: ({ className = "w-5 h-5" }) => ( ), Home: ({ className = "w-5 h-5" }) => ( ), Link: ({ className = "w-5 h-5" }) => ( ), Globe: ({ className = "w-5 h-5" }) => ( ), Server: ({ className = "w-5 h-5" }) => ( ), Eye: ({ className = "w-5 h-5" }) => ( ), MessageSquare: ({ className = "w-5 h-5" }) => ( ), Send: ({ className = "w-5 h-5" }) => ( ), ExternalLink: ({ className = "w-5 h-5" }) => ( ), EyeOff: ({ className = "w-5 h-5" }) => ( ), Check: ({ className = "w-5 h-5" }) => ( ), Copy: ({ className = "w-5 h-5" }) => ( ), Gift: ({ className = "w-5 h-5" }) => ( ), LogIn: ({ className = "w-5 h-5" }) => ( ), Sparkles: ({ className = "w-5 h-5" }) => ( ), TrendingUp: ({ className = "w-5 h-5" }) => ( ), DollarSign: ({ className = "w-5 h-5" }) => ( ), Activity: ({ className = "w-5 h-5" }) => ( ), Code: ({ className = "w-5 h-5" }) => ( ), RefreshCw: ({ className = "w-5 h-5" }) => ( ), Terminal: ({ className = "w-5 h-5" }) => ( ), Lightbulb: ({ className = "w-5 h-5" }) => ( ), PieChart: ({ className = "w-5 h-5" }) => ( ), Clock: ({ className = "w-5 h-5" }) => ( ), Calendar: ({ className = "w-5 h-5" }) => ( ), Bot: ({ className = "w-5 h-5" }) => ( ), }; // ==================== SKELETON ==================== const Skeleton = ({ width, height, className = '', style = {}, circle = false }) => (   ); const SkeletonStatsGrid = ({ count = 4 }) => (
{Array.from({ length: count }).map((_, i) => (
))}
); const SkeletonTable = ({ rows = 8, cols = 6, hasHeader = true }) => (
{hasHeader && ( {Array.from({ length: cols }).map((_, c) => ( ))} )} {Array.from({ length: rows }).map((_, r) => ( {Array.from({ length: cols }).map((_, c) => ( ))} ))}
); const SkeletonCards = ({ count = 6, columns = 3 }) => (
{Array.from({ length: count }).map((_, i) => (
))}
); // Debounce a value for search inputs const useDebouncedValue = (value, delay = 300) => { const [debounced, setDebounced] = useState(value); useEffect(() => { const t = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(t); }, [value, delay]); return debounced; }; // ==================== API SERVICE ==================== const api = { token: null, async req(path, options = {}) { const headers = { 'Content-Type': 'application/json', ...options.headers }; if (this.token) headers['Authorization'] = `Bearer ${this.token}`; const resp = await fetch(`${CONFIG.API_URL}${path}`, { ...options, headers }); return resp.json(); }, get(path) { return this.req(path); }, post(path, body) { return this.req(path, { method: 'POST', body: JSON.stringify(body) }); }, put(path, body) { return this.req(path, { method: 'PUT', body: JSON.stringify(body) }); }, del(path) { return this.req(path, { method: 'DELETE' }); }, async upload(path, formData) { const headers = {}; if (this.token) headers['Authorization'] = `Bearer ${this.token}`; const resp = await fetch(`${CONFIG.API_URL}${path}`, { method: 'POST', headers, body: formData }); return resp.json(); }, }; // API dédiée au worker MCP (mcp.helvia.app) — réutilise le token de session admin const mcpApi = { async req(path, options = {}) { const headers = { 'Content-Type': 'application/json', ...options.headers }; if (api.token) headers['Authorization'] = `Bearer ${api.token}`; const resp = await fetch(`${CONFIG.MCP_URL}${path}`, { ...options, headers }); return resp.json(); }, get(path) { return this.req(path); }, post(path, body) { return this.req(path, { method: 'POST', body: JSON.stringify(body) }); }, patch(path, body) { return this.req(path, { method: 'PATCH', body: JSON.stringify(body) }); }, del(path) { return this.req(path, { method: 'DELETE' }); }, }; // ==================== NOTIFICATIONS ==================== const useNotifications = () => { const show = useCallback((message, type = 'info') => { const el = document.createElement('div'); el.style.cssText = ` position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999; padding:0.875rem 1.25rem;border-radius:10px;font-size:0.875rem;font-weight:500; color:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.18); transform:translateY(0);opacity:1;transition:all 0.3s ease; max-width:360px;font-family:Inter,sans-serif; `; const colors = { success: '#16a34a', error: '#dc2626', info: '#6366f1' }; el.style.background = colors[type] || colors.info; el.textContent = message; document.body.appendChild(el); setTimeout(() => { el.style.opacity = '0'; el.style.transform = 'translateY(12px)'; setTimeout(() => el.remove(), 300); }, 4000); }, []); return useMemo(() => ({ success: (m) => show(m, 'success'), error: (m) => show(m, 'error'), info: (m) => show(m, 'info'), }), [show]); }; // ==================== CONTEXT ==================== const AppContext = createContext(); const useApp = () => useContext(AppContext); const AppProvider = ({ children }) => { const [user, setUser] = useState(() => { const saved = localStorage.getItem('vocal_adm_user'); const token = localStorage.getItem('vocal_adm_token'); if (saved && token) { api.token = token; return { ...JSON.parse(saved), token }; } return null; }); const [view, setView] = useState('dashboard'); const [sidebarOpen, setSidebarOpen] = useState(false); const [selectedLine, setSelectedLine] = useState(null); const [selectedClient, setSelectedClient] = useState(null); const notify = useNotifications(); const login = useCallback((userData, token) => { api.token = token; setUser({ ...userData, token }); localStorage.setItem('vocal_adm_user', JSON.stringify(userData)); localStorage.setItem('vocal_adm_token', token); notify.success('Connexion réussie'); }, [notify]); const logout = useCallback(() => { api.post('/auth/logout').catch(() => {}); api.token = null; setUser(null); localStorage.removeItem('vocal_adm_user'); localStorage.removeItem('vocal_adm_token'); notify.info('Déconnexion réussie'); }, [notify]); const navigate = useCallback((v) => { setView(v); setSidebarOpen(false); }, []); const value = useMemo(() => ({ user, view, sidebarOpen, setSidebarOpen, selectedLine, setSelectedLine, selectedClient, setSelectedClient, login, logout, navigate, notify, }), [user, view, sidebarOpen, selectedLine, selectedClient, login, logout, navigate, notify]); return {children}; }; // ==================== LOGIN ==================== const LoginScreen = () => { const { login } = useApp(); const [email, setEmail] = useState(''); const [code, setCode] = useState(''); const [step, setStep] = useState('email'); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); useEffect(() => { const params = new URLSearchParams(window.location.search); const magicEmail = params.get('email'); const magicCode = params.get('code'); if (magicEmail && magicCode) { window.history.replaceState({}, '', window.location.pathname); setLoading(true); fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: magicEmail, code: magicCode }), }) .then(r => r.json()) .then(data => { if (data.success && data.token) login(data.user || { email: magicEmail }, data.token); else { setEmail(magicEmail); setStep('code'); setError(data.error || 'Lien expiré, entrez le code manuellement'); } }) .catch(() => { setEmail(magicEmail); setStep('code'); setError('Erreur réseau'); }) .finally(() => setLoading(false)); } }, []); const handleSendCode = async (e) => { e.preventDefault(); if (!email) return; setLoading(true); setError(''); try { const resp = await fetch(`${CONFIG.API_URL}/auth/request-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }), }); const data = await resp.json(); if (data.success) setStep('code'); else setError(data.error || 'Erreur'); } catch (e) { setError('Erreur réseau'); } finally { setLoading(false); } }; const handleVerify = async (e) => { e.preventDefault(); if (!code) return; setLoading(true); setError(''); try { const resp = await fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, code }), }); const data = await resp.json(); if (data.success && data.token) login(data.user || { email }, data.token); else setError(data.error || 'Code invalide'); } catch (e) { setError('Erreur réseau'); } finally { setLoading(false); } }; const features = [ { icon: '📞', title: 'Gestion des lignes', desc: 'Administrez toutes les lignes téléphoniques' }, { icon: '📊', title: 'Suivi des appels', desc: 'Statistiques et analyses en temps réel' }, { icon: '🤖', title: 'IA Vocale', desc: 'Assistants vocaux intelligents' }, { icon: '🎧', title: 'Support intégré', desc: 'Gestion des tickets et assistance' }, ]; return (
Vocal
{step === 'email' ? (

Bienvenue

Connectez-vous à l'espace d'administration

setEmail(e.target.value)} placeholder="admin@helvia.app" className="form-input" autoFocus />
{error &&

{error}

}
) : (

Vérification

Code envoyé à {email}

setCode(e.target.value)} placeholder="000000" className="form-code-input" maxLength="6" autoFocus />
{error &&

{error}

}
)}

Vocal Admin

Plateforme d'administration de votre téléphonie cloud

{features.map((f, i) => (
{f.icon}
{f.title}
{f.desc}
))}
); }; // ==================== SIDEBAR ==================== const Sidebar = () => { const { user, view, sidebarOpen, setSidebarOpen, navigate, logout } = useApp(); const navSections = [ { title: 'PRINCIPAL', items: [ { id: 'dashboard', label: 'Dashboard', icon: Icons.Home }, { id: 'analytics-platform', label: 'Analytics', icon: Icons.PieChart }, ], }, { title: 'GESTION', items: [ { id: 'clients', label: 'Clients', icon: Icons.Users }, { id: 'lines', label: 'Lignes', icon: Icons.Phone }, { id: 'calls', label: 'Appels', icon: Icons.PhoneIncoming }, { id: 'demandes', label: 'Demandes', icon: Icons.Refresh }, { id: 'sms', label: 'SMS', icon: Icons.Send }, { id: 'whatsapp', label: 'WhatsApp', icon: Icons.MessageSquare }, { id: 'subscriptions', label: 'Abonnements', icon: Icons.CreditCard }, { id: 'modules', label: 'Modules', icon: Icons.CreditCard }, { id: 'partners', label: 'Partenaires', icon: Icons.Link }, { id: 'api', label: 'API', icon: Icons.Key }, ], }, { title: 'SYSTÈME', items: [ { id: 'twilio', label: 'Comptes Twilio', icon: Icons.Server }, { id: 'settings', label: 'Paramètres', icon: Icons.Settings }, { id: 'access', label: 'Access', icon: Icons.Key }, { id: 'admins', label: 'Administrateurs', icon: Icons.Shield }, { id: 'analytics', label: 'Analytics IA', icon: Icons.Sparkles }, { id: 'mcp-keys', label: 'MCP Keys', icon: Icons.Code }, { id: 'diagnostic', label: 'Diagnostic', icon: Icons.AlertTriangle }, { id: 'support', label: 'Support', icon: Icons.HeadphonesIcon }, ], }, ]; return ( <> {sidebarOpen && (
setSidebarOpen(false)} /> )} ); }; // ==================== DASHBOARD ==================== const DashboardView = () => { const { user, notify, navigate } = useApp(); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const load = async (silent = false) => { if (silent) setRefreshing(true); else setLoading(true); try { const r = await api.get('/api/admin/dashboard/stats'); if (r?.error) throw new Error(r.error); setData(r); } catch (e) { notify.error('Erreur dashboard: ' + e.message); } finally { setLoading(false); setRefreshing(false); } }; useEffect(() => { load(); /* eslint-disable-next-line */ }, []); // Auto refresh toutes les 60s useEffect(() => { const t = setInterval(() => load(true), 60000); return () => clearInterval(t); }, []); const fmtCHF = (n) => `${(Number(n) || 0).toLocaleString('fr-CH', { maximumFractionDigits: 2 })} CHF`; const fmtNum = (n) => (Number(n) || 0).toLocaleString('fr-CH'); const fmtDur = (sec) => { const s = Number(sec) || 0; if (s < 60) return `${s} s`; if (s < 3600) return `${Math.round(s / 60)} min`; return `${(s / 3600).toFixed(1)} h`; }; const fmtDay = (iso) => { try { const d = new Date(iso + 'T00:00:00'); return d.toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit' }); } catch { return iso; } }; if (loading) { return ( <>

Dashboard

Vue d'ensemble de la plateforme

); } const c = data?.calls || {}; const r = data?.revenue || {}; const cnt = data?.counters || {}; const ts = c.timeseries_30d || []; const maxCalls = Math.max(1, ...ts.map(d => d.calls || 0)); const deltaPos = (c.delta_pct_vs_yesterday || 0) >= 0; return ( <>

Dashboard

Vue d'ensemble live de la plateforme · auto-refresh 60s

{/* ==================== APPELS — bloc principal ==================== */}
Appels aujourd'hui
{fmtNum(c.today)}
{deltaPos ? '▲' : '▼'} {Math.abs(c.delta_pct_vs_yesterday || 0).toFixed(1)}% vs hier ({fmtNum(c.yesterday)})
Durée totale : {fmtDur(c.today_duration_sec)}
Appels 7 jours
{fmtNum(c.last_7d)}
↗ Entrants : {fmtNum(c.by_direction_7d?.inbound)} · ↙ Sortants : {fmtNum(c.by_direction_7d?.outbound)}
Durée : {fmtDur(c.last_7d_duration_sec)}
Appels 30 jours
{fmtNum(c.last_30d)}
Mois en cours : {fmtNum(c.month)}
Durée : {fmtDur(c.last_30d_duration_sec)}
Appels en cours
{fmtNum(cnt.active_calls_now)}
En direct sur la plateforme
0 ? '#dc2626' : '#94a3b8', fontWeight: cnt.unread_errors_24h > 0 ? 600 : 400 }}> {cnt.unread_errors_24h > 0 ? `⚠️ ${cnt.unread_errors_24h} erreur(s) 24h` : 'Aucune erreur 24h'}
{/* ==================== Mini-graph appels 30 derniers jours ==================== */}
📞 Volume d'appels — 30 derniers jours
Total : {fmtNum(c.last_30d)} appels · pic : {fmtNum(maxCalls)}/jour
{ts.map((d, i) => { const h = Math.max(2, (d.calls / maxCalls) * 100); const isToday = i === ts.length - 1; return (
{(i % 5 === 0 || isToday) ? fmtDay(d.day) : ''}
); })}
{/* ==================== Plateforme — KPIs business ==================== */}
} /> } /> } /> } /> } /> } /> } /> } />
{/* ==================== Top clients par volume d'appels (7j) ==================== */} {Array.isArray(data?.top_clients_calls_7d) && data.top_clients_calls_7d.length > 0 && (
🏆 Top 5 clients par volume d'appels (7 jours)
{data.top_clients_calls_7d.map((tc, i) => (
{i + 1}
{tc.name || `Client #${tc.id}`}
{fmtNum(tc.calls)} appels · {fmtDur(tc.duration)}
{fmtNum(tc.calls)}
))}
)}

Bienvenue, {user?.name || user?.email || 'Admin'}

Pour une analyse approfondie de la plateforme (timeseries, distribution horaire, statuts d'appels, conversations multi-canal, voice bots, modules, erreurs système…), ouvrez le menu Analytics.

); }; // ==================== CLIENTS ==================== const ClientsView = () => { const { notify, setSelectedClient, navigate } = useApp(); const [clients, setClients] = useState([]); const [loading, setLoading] = useState(true); const [search, setSearch] = useState(''); const [showModal, setShowModal] = useState(false); const [editing, setEditing] = useState(null); const [saving, setSaving] = useState(false); const [form, setForm] = useState({ name: '', email: '', phone: '', company: '', notes: '' }); const [creditTarget, setCreditTarget] = useState(null); const [creditForm, setCreditForm] = useState({ amount: '', description: '' }); const [creditSaving, setCreditSaving] = useState(false); const [loginAsLoading, setLoginAsLoading] = useState(null); const loadClients = async () => { setLoading(true); try { const data = await api.get('/api/admin/clients'); setClients(Array.isArray(data) ? data : data.clients || []); } catch (e) { console.error(e); } finally { setLoading(false); } }; useEffect(() => { loadClients(); }, []); const openCreate = () => { setEditing(null); setForm({ name: '', email: '', phone: '', company: '', notes: '' }); setShowModal(true); }; const openEdit = (c) => { setEditing(c); setForm({ name: c.name || '', email: c.email || '', phone: c.phone || '', company: c.company || '', notes: c.notes || '' }); setShowModal(true); }; const handleSave = async () => { if (!form.name.trim()) return notify.error('Le nom est requis'); setSaving(true); try { if (editing) { await api.put(`/api/admin/clients/${editing.id}`, form); notify.success('Client modifié'); } else { await api.post('/api/admin/clients', form); notify.success('Client créé'); } setShowModal(false); loadClients(); } catch (e) { notify.error('Erreur: ' + e.message); } finally { setSaving(false); } }; const handleToggle = async (c) => { try { await api.put(`/api/admin/clients/${c.id}`, { is_active: c.is_active ? 0 : 1 }); notify.success(c.is_active ? 'Client désactivé' : 'Client activé'); loadClients(); } catch (e) { notify.error('Erreur'); } }; const handleDelete = async (c) => { if (!confirm(`Supprimer le client "${c.name}" ? Cette action est irréversible.`)) return; try { await api.del(`/api/admin/clients/${c.id}`); notify.success('Client supprimé'); loadClients(); } catch (e) { notify.error('Erreur'); } }; const openCredit = (c) => { setCreditTarget(c); setCreditForm({ amount: '', description: '' }); }; const handleCredit = async () => { const amount = parseFloat(creditForm.amount); if (!amount || amount <= 0) return notify.error('Montant invalide'); setCreditSaving(true); try { const r = await api.post(`/api/admin/clients/${creditTarget.id}/credit`, { amount, description: creditForm.description || undefined, }); if (r?.error) { notify.error(r.error); return; } const summary = `+${amount.toFixed(2)} ${r.currency || 'CHF'} crédités · solde: ${(r.new_balance ?? 0).toFixed(2)}`; if (r.email_sent) { notify.success(`${summary} · email de confirmation envoyé`); } else if (r.email_error) { notify.error(`${summary}, mais email non envoyé: ${r.email_error}`); } else if (creditTarget && !creditTarget.email) { notify.success(`${summary} (pas d'email - aucune notification envoyée)`); } else { notify.success(summary); } setCreditTarget(null); loadClients(); } catch (e) { notify.error('Erreur: ' + e.message); } finally { setCreditSaving(false); } }; const handleLoginAs = async (c, target = null) => { if (!c.email) return notify.error("Ce client n'a pas d'email"); const label = target === 'wa' ? 'wa.helvia.app (WhatsApp)' : 'my.helvia.app'; if (!confirm(`Ouvrir ${label} en tant que "${c.name}" (${c.email}) ?\n\nUne nouvelle session sera créée pour cet utilisateur.`)) return; setLoginAsLoading(`${c.id}:${target || 'my'}`); try { const r = await api.post(`/api/admin/clients/${c.id}/login-as`, target ? { target } : undefined); if (r?.error) { notify.error(r.error); return; } if (!r?.target_url) { notify.error("Réponse invalide de l'API"); return; } window.open(r.target_url, '_blank', 'noopener,noreferrer'); notify.success(`Session ouverte pour ${c.email} sur ${label}`); } catch (e) { notify.error('Erreur: ' + e.message); } finally { setLoginAsLoading(null); } }; const filtered = useMemo(() => { if (!search) return clients; const s = search.toLowerCase(); return clients.filter(c => (c.name || '').toLowerCase().includes(s) || (c.email || '').toLowerCase().includes(s) || (c.company || '').toLowerCase().includes(s) ); }, [clients, search]); return ( <>

Clients

{clients.length} clients enregistrés

setSearch(e.target.value)} placeholder="Rechercher un client..." className="form-input" style={{ paddingLeft: '2.25rem' }} />
{loading ? ( ) : filtered.length === 0 ? (

Aucun client

Les clients apparaîtront ici une fois créés.

) : (
{filtered.map((c) => ( { setSelectedClient(c); navigate('client-detail'); }}> ))}
ID Nom Email Lignes Statut Créé le Actions
{c.client_code || —} {c.name || '-'} {c.email || '-'} {c.lines_count ?? 0} { e.stopPropagation(); handleToggle(c); }}> {c.is_active !== false && c.is_active !== 0 ? 'Actif' : 'Inactif'} {formatDate(c.created_at)}
)}
{creditTarget && (
setCreditTarget(null)}>
e.stopPropagation()} style={{ maxWidth: '460px' }}>

Offrir des crédits

Pour {creditTarget.name} {creditTarget.email ? <> · {creditTarget.email} : null}
Solde actuel : {(creditTarget.balance ?? 0).toFixed(2)} {creditTarget.balance_currency || 'CHF'}

setCreditForm({ ...creditForm, amount: e.target.value })} placeholder="ex: 50.00" />
{[10, 25, 50, 100, 250].map(v => ( ))}
setCreditForm({ ...creditForm, description: e.target.value })} placeholder="ex: Cadeau de bienvenue, compensation, ..." /> Apparaîtra dans l'historique du wallet client et dans l'email de confirmation.
{creditTarget.email ? <>Un email de confirmation sera envoyé à {creditTarget.email} : <>Aucun email associé - le client ne recevra pas de notification.}
)} {showModal && (
setShowModal(false)}>
e.stopPropagation()} style={{ maxWidth: '500px' }}>

{editing ? 'Modifier le client' : 'Nouveau client'}

setForm({ ...form, name: e.target.value })} placeholder="Nom du client" autoFocus />
setForm({ ...form, email: e.target.value })} placeholder="email@exemple.com" />
setForm({ ...form, phone: e.target.value })} placeholder="+41..." />
setForm({ ...form, company: e.target.value })} placeholder="Nom de l'entreprise" />