const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment } = React; const CONFIG = { API_URL: 'https://api.helvia.app' }; // ==================== ADMIN IMPERSONATION BOOTSTRAP ==================== // Admin can land here with ?impersonate_token=...&impersonate_user=BASE64. // We persist them into localStorage and clean the URL before React boots. (() => { try { const params = new URLSearchParams(window.location.search); const tok = params.get('impersonate_token'); if (!tok) return; localStorage.setItem('vocal_my_token', tok); const userB64 = params.get('impersonate_user'); if (userB64) { try { const u = JSON.parse(decodeURIComponent(escape(atob(userB64)))); localStorage.setItem('vocal_my_user', JSON.stringify(u)); } catch (e) {} } sessionStorage.setItem('vocal_my_impersonating', '1'); const clean = window.location.pathname + window.location.hash; window.history.replaceState(null, '', clean); } catch (e) {} })(); 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: 'Webhook', color: 'badge-orange' }, }; const CALL_STATUS = { completed: { label: 'Terminé', color: 'badge-success' }, ringing: { label: 'Sonne', color: 'badge-info' }, 'in-progress': { label: 'En cours', color: 'badge-info' }, busy: { label: 'Occupé', color: 'badge-warning' }, 'no-answer': { label: 'Sans réponse', color: 'badge-warning' }, failed: { label: 'Échoué', color: 'badge-danger' }, canceled: { label: 'Annulé', color: 'badge-gray' }, missed: { label: 'Manqué', color: 'badge-danger' }, }; // ==================== FORMATTERS ==================== function formatDate(d) { if (!d) return '-'; return new Date(d).toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit', year: 'numeric' }); } // Les timestamps SQLite (datetime('now')) sont en UTC mais sans suffixe Z. // On force l'interprétation UTC pour que getHours() retourne l'heure locale du navigateur. function parseUtcDate(d) { if (!d) return null; if (d instanceof Date) return d; if (typeof d === 'number') return new Date(d); const s = String(d).trim(); // Déjà ISO avec Z ou offset (+02:00, -05:00, etc.) → laisser tel quel if (/Z$|[+-]\d{2}:?\d{2}$/.test(s)) return new Date(s); // Format SQLite "YYYY-MM-DD HH:MM:SS[.fff]" → ajouter T...Z if (/^\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}(:\d{2}(\.\d+)?)?$/.test(s)) { return new Date(s.replace(' ', 'T') + 'Z'); } return new Date(s); } function formatDateTime(d) { const x = parseUtcDate(d); if (!x) return '-'; return `${String(x.getDate()).padStart(2,'0')}/${String(x.getMonth()+1).padStart(2,'0')}/${x.getFullYear()} ${String(x.getHours()).padStart(2,'0')}:${String(x.getMinutes()).padStart(2,'0')}`; } function formatTimeOnly(d) { const x = parseUtcDate(d); if (!x) return ''; return x.toLocaleTimeString('fr-CH', { hour: '2-digit', minute: '2-digit' }); } function formatDateShort(d) { const x = parseUtcDate(d); if (!x) return ''; return `${String(x.getDate()).padStart(2,'0')}/${String(x.getMonth()+1).padStart(2,'0')}/${String(x.getFullYear()).slice(-2)}`; } function formatCurrency(amount, currency = 'CHF') { if (amount === null || amount === undefined) return '-'; return `${Number(amount).toFixed(2)} ${currency}`; } function formatDuration(s) { if (!s) return '-'; const m = Math.floor(s/60); const sec = s%60; if (m === 0) return `${sec}s`; return `${m}m${sec>0?String(sec).padStart(2,'0')+'s':''}`; } function formatRelative(d) { if (!d) return '-'; const diff = (Date.now() - new Date(d).getTime()) / 1000; if (diff < 60) return 'à l\'instant'; if (diff < 3600) return `il y a ${Math.floor(diff / 60)} min`; if (diff < 86400) return `il y a ${Math.floor(diff / 3600)} h`; if (diff < 604800) return `il y a ${Math.floor(diff / 86400)} j`; return formatDate(d); } function formatAmount(n, currency = 'CHF', sign = false) { if (n === null || n === undefined) return '-'; const v = Number(n); const prefix = sign && v > 0 ? '+' : ''; return `${prefix}${v.toFixed(2)} ${currency}`; } // ==================== I18N ==================== const I18N = { fr: { 'nav.dashboard': 'Tableau de bord', 'nav.lines': 'Lignes', 'nav.calls': 'Appels', 'nav.sms': 'SMS', 'nav.bots': 'Bots vocaux', 'nav.contacts': 'Contacts', 'nav.proxy': 'Numéros temporaires', 'nav.spam': 'Spam & blacklist', 'nav.porting': 'Portabilité', 'nav.api': 'Clés API', 'nav.billing': 'Facturation', 'nav.profile': 'Profil', 'nav.routing': 'Routing avancé', 'nav.nps': 'Satisfaction (NPS)', 'nav.conversations': 'Conversations', 'nav.voice_clones': 'Voix custom', 'nav.studio': 'Studio voix', 'nav.modules': 'Modules', 'nav.live': 'Live (center)', 'common.save': 'Enregistrer', 'common.cancel': 'Annuler', 'common.delete': 'Supprimer', 'common.edit': 'Modifier', 'common.add': 'Ajouter', 'common.search': 'Rechercher', 'common.loading': 'Chargement…', 'common.empty': 'Aucun élément', 'common.back': 'Retour', 'lang.label': 'Langue', }, de: { 'nav.dashboard': 'Übersicht', 'nav.lines': 'Leitungen', 'nav.calls': 'Anrufe', 'nav.sms': 'SMS', 'nav.bots': 'Sprachbots', 'nav.contacts': 'Kontakte', 'nav.proxy': 'Temporäre Nummern', 'nav.spam': 'Spam & Blacklist', 'nav.porting': 'Portierung', 'nav.api': 'API-Schlüssel', 'nav.billing': 'Abrechnung', 'nav.profile': 'Profil', 'nav.routing': 'Erweitertes Routing', 'nav.nps': 'Zufriedenheit (NPS)', 'nav.conversations': 'Konversationen', 'nav.voice_clones': 'Eigene Stimmen', 'nav.studio': 'Sprachstudio', 'nav.modules': 'Module', 'nav.live': 'Live (Center)', 'common.save': 'Speichern', 'common.cancel': 'Abbrechen', 'common.delete': 'Löschen', 'common.edit': 'Bearbeiten', 'common.add': 'Hinzufügen', 'common.search': 'Suchen', 'common.loading': 'Lädt…', 'common.empty': 'Keine Einträge', 'common.back': 'Zurück', 'lang.label': 'Sprache', }, en: { 'nav.dashboard': 'Dashboard', 'nav.lines': 'Lines', 'nav.calls': 'Calls', 'nav.sms': 'SMS', 'nav.bots': 'Voice bots', 'nav.contacts': 'Contacts', 'nav.proxy': 'Temporary numbers', 'nav.spam': 'Spam & blacklist', 'nav.porting': 'Porting', 'nav.api': 'API keys', 'nav.billing': 'Billing', 'nav.profile': 'Profile', 'nav.routing': 'Advanced routing', 'nav.nps': 'Satisfaction (NPS)', 'nav.conversations': 'Conversations', 'nav.voice_clones': 'Custom voices', 'nav.studio': 'Voice studio', 'nav.modules': 'Modules', 'nav.live': 'Live (center)', 'common.save': 'Save', 'common.cancel': 'Cancel', 'common.delete': 'Delete', 'common.edit': 'Edit', 'common.add': 'Add', 'common.search': 'Search', 'common.loading': 'Loading…', 'common.empty': 'No items', 'common.back': 'Back', 'lang.label': 'Language', }, it: { 'nav.dashboard': 'Cruscotto', 'nav.lines': 'Linee', 'nav.calls': 'Chiamate', 'nav.sms': 'SMS', 'nav.bots': 'Bot vocali', 'nav.contacts': 'Contatti', 'nav.proxy': 'Numeri temporanei', 'nav.spam': 'Spam & blacklist', 'nav.porting': 'Portabilità', 'nav.api': 'Chiavi API', 'nav.billing': 'Fatturazione', 'nav.profile': 'Profilo', 'nav.routing': 'Routing avanzato', 'nav.nps': 'Soddisfazione (NPS)', 'nav.conversations': 'Conversazioni', 'nav.voice_clones': 'Voci personalizzate', 'nav.studio': 'Studio voce', 'nav.modules': 'Moduli', 'nav.live': 'Live (center)', 'common.save': 'Salva', 'common.cancel': 'Annulla', 'common.delete': 'Elimina', 'common.edit': 'Modifica', 'common.add': 'Aggiungi', 'common.search': 'Cerca', 'common.loading': 'Caricamento…', 'common.empty': 'Nessun elemento', 'common.back': 'Indietro', 'lang.label': 'Lingua', }, }; const LANG_KEY = 'vocal_lang'; function getLang() { return localStorage.getItem(LANG_KEY) || (navigator.language || 'fr').slice(0,2); } function setLang(l) { localStorage.setItem(LANG_KEY, l); window.dispatchEvent(new Event('lang-change')); } function useLang() { const [lang, setLangState] = React.useState(getLang()); React.useEffect(() => { const h = () => setLangState(getLang()); window.addEventListener('lang-change', h); return () => window.removeEventListener('lang-change', h); }, []); return lang; } function t(key, lang) { const L = lang || getLang(); return (I18N[L] && I18N[L][key]) || I18N.fr[key] || key; } // ==================== ICONS ==================== const Icons = { Phone: ({ className = "w-5 h-5", ...rest }) => (), PhoneIn: ({ className = "w-5 h-5", ...rest }) => (), Home: ({ className = "w-5 h-5", ...rest }) => (), Key: ({ className = "w-5 h-5", ...rest }) => (), Send: ({ className = "w-5 h-5", ...rest }) => (), Chat: ({ className = "w-5 h-5", ...rest }) => (), Settings: ({ className = "w-5 h-5", ...rest }) => (), Search: ({ className = "w-5 h-5", ...rest }) => (), Plus: ({ className = "w-5 h-5", ...rest }) => (), Trash: ({ className = "w-5 h-5", ...rest }) => (), Refresh: ({ className = "w-5 h-5", ...rest }) => (), Menu: ({ className = "w-5 h-5", ...rest }) => (), LogOut: ({ className = "w-5 h-5", ...rest }) => (), Eye: ({ className = "w-5 h-5", ...rest }) => (), EyeOff: ({ className = "w-5 h-5", ...rest }) => (), Copy: ({ className = "w-5 h-5", ...rest }) => (), Check: ({ className = "w-5 h-5", ...rest }) => (), ChevronLeft: ({ className = "w-5 h-5", ...rest }) => (), ChevronRight: ({ className = "w-5 h-5", ...rest }) => (), Clock: ({ className = "w-5 h-5", ...rest }) => (), Card: ({ className = "w-5 h-5", ...rest }) => (), Wallet: ({ className = "w-5 h-5", ...rest }) => (), Edit: ({ className = "w-5 h-5", ...rest }) => (), Star: ({ className = "w-5 h-5", ...rest }) => (), AlertTriangle: ({ className = "w-5 h-5", ...rest }) => (), ArrowLeft: ({ className = "w-5 h-5", ...rest }) => (), Robot: ({ className = "w-5 h-5", ...rest }) => (), Calendar: ({ className = "w-5 h-5", ...rest }) => (), Sparkles: ({ className = "w-5 h-5", ...rest }) => (), Mic: ({ className = "w-5 h-5", ...rest }) => (), Globe: ({ className = "w-5 h-5", ...rest }) => (), Document: ({ className = "w-5 h-5", ...rest }) => (), Play: ({ className = "w-5 h-5", ...rest }) => (), Users: ({ className = "w-5 h-5", ...rest }) => (), Shield: ({ className = "w-5 h-5", ...rest }) => (), AlertCircle: ({ className = "w-5 h-5", ...rest }) => (), Moon: ({ className = "w-5 h-5", ...rest }) => (), Briefcase: ({ className = "w-5 h-5", ...rest }) => (), MessageSquare: ({ className = "w-5 h-5", ...rest }) => (), X: ({ className = "w-5 h-5", ...rest }) => (), ExternalLink: ({ className = "w-5 h-5", ...rest }) => (), Upload: ({ className = "w-5 h-5", ...rest }) => (), Download: ({ className = "w-5 h-5", ...rest }) => (), Stop: ({ className = "w-5 h-5", ...rest }) => (), Volume: ({ className = "w-5 h-5", ...rest }) => (), FileAudio: ({ className = "w-5 h-5", ...rest }) => (), CheckCircle: ({ className = "w-5 h-5", ...rest }) => (), }; const CallDirectionIcon = ({ direction }) => direction === 'outbound' ? : ; const CallStatusDot = ({ status }) => { const colors = { completed: '#22c55e', ringing: '#3b82f6', 'in-progress': '#3b82f6', busy: '#f59e0b', 'no-answer': '#f59e0b', failed: '#ef4444', canceled: '#9ca3af', missed: '#ef4444' }; return ; }; // ==================== 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) => (
))}
); 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 ==================== // Wrapper fetch qui dispatch vocal:network-down / vocal:network-up. // Une perte de réseau provoque un TypeError ("Failed to fetch") côté navigateur. // On retente la requête en boucle pendant l'offline, et on émet network-up dès // que ça repasse, pour que l'UI continue son flow sans recharger la page. async function vocalFetch(input, init, opts = {}) { const maxWait = opts.maxWaitMs ?? 60_000; // attend jusqu'à 60s un retour réseau avant de rejeter const start = Date.now(); let attempt = 0; while (true) { try { const resp = await fetch(input, init); // succès : si on était signalés offline, on dit que c'est ok if (!navigator.onLine || window.__vocalOffline) { window.dispatchEvent(new CustomEvent('vocal:network-up')); } return resp; } catch (e) { // TypeError = fetch a échoué (réseau coupé / DNS / CORS pre-net) const isNetErr = e instanceof TypeError; if (!isNetErr) throw e; window.dispatchEvent(new CustomEvent('vocal:network-down', { detail: { error: e.message } })); if (Date.now() - start >= maxWait) throw e; attempt += 1; const delay = Math.min(500 + attempt * 500, 3000); await new Promise(r => setTimeout(r, delay)); } } } 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 vocalFetch(`${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) }); }, patch(path, body) { return this.req(path, { method: 'PATCH', 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 vocalFetch(`${CONFIG.API_URL}${path}`, { method: 'POST', headers, body: formData }); return resp.json(); }, }; // ==================== OFFLINE OVERLAY ==================== // Affiche un overlay bloquant non-fermable dès qu'on détecte une coupure réseau, // disparaît automatiquement quand la connexion revient. const OfflineOverlay = () => { const [offline, setOffline] = useState(false); const [since, setSince] = useState(null); const [pinging, setPinging] = useState(false); useEffect(() => { const goOffline = () => { window.__vocalOffline = true; setOffline(prev => { if (!prev) setSince(Date.now()); return true; }); }; const goOnline = () => { window.__vocalOffline = false; setOffline(false); setSince(null); }; window.addEventListener('offline', goOffline); window.addEventListener('online', goOnline); window.addEventListener('vocal:network-down', goOffline); window.addEventListener('vocal:network-up', goOnline); if (!navigator.onLine) goOffline(); return () => { window.removeEventListener('offline', goOffline); window.removeEventListener('online', goOnline); window.removeEventListener('vocal:network-down', goOffline); window.removeEventListener('vocal:network-up', goOnline); }; }, []); // Ping périodique vers /health quand on est offline pour récupérer dès que possible useEffect(() => { if (!offline) return; let stopped = false; const tick = async () => { if (stopped) return; setPinging(true); try { const r = await fetch(`${CONFIG.API_URL}/health`, { cache: 'no-store' }); if (r.ok && !stopped) { window.__vocalOffline = false; setOffline(false); setSince(null); window.dispatchEvent(new CustomEvent('vocal:network-up')); } } catch (_) { /* still offline */ } finally { setPinging(false); } if (!stopped) setTimeout(tick, 3000); }; const t = setTimeout(tick, 2000); return () => { stopped = true; clearTimeout(t); }; }, [offline]); const [elapsed, setElapsed] = useState(0); useEffect(() => { if (!offline || !since) return; const id = setInterval(() => setElapsed(Math.floor((Date.now() - since) / 1000)), 1000); return () => clearInterval(id); }, [offline, since]); if (!offline) return null; return (
📡

Connexion perdue

Attente de récupération de votre connexion Internet… L'application reprendra automatiquement dès que le réseau sera de retour.

{pinging ? 'Tentative de reconnexion…' : 'En attente du réseau…'}
Hors-ligne depuis {elapsed >= 60 ? `${Math.floor(elapsed / 60)}m ${elapsed % 60}s` : `${elapsed}s`}
); }; // ==================== 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_my_user'); const token = localStorage.getItem('vocal_my_token'); if (saved && token) { api.token = token; return { ...JSON.parse(saved), token }; } return null; }); const [view, setView] = useState(() => { const h = (window.location.hash || '').replace('#', ''); return h && ['dashboard','lines','calls','sms','whatsapp','bots','contacts','proxy','spam','billing','subscriptions','porting','api-keys','settings','conversations','nps','voice-clones','studio','modules','callback-requests','callback-requests-pending','callback-requests-done','callback-requests-cancelled','callback-requests-all','whatsapp-inbox','whatsapp-messages','whatsapp-senders','sip'].includes(h) ? h : 'dashboard'; }); const [sidebarOpen, setSidebarOpen] = useState(false); const [selectedLineId, setSelectedLineId] = useState(null); const notify = useNotifications(); const login = useCallback((userData, token) => { api.token = token; setUser({ ...userData, token }); localStorage.setItem('vocal_my_user', JSON.stringify(userData)); localStorage.setItem('vocal_my_token', token); notify.success('Connexion réussie'); }, [notify]); const logout = useCallback(() => { api.post('/auth/logout').catch(() => {}); api.token = null; setUser(null); localStorage.removeItem('vocal_my_user'); localStorage.removeItem('vocal_my_token'); notify.info('Déconnexion réussie'); }, [notify]); // Auto-login magic link : exécuté au boot quel que soit l'état de session. // Si on est déjà loggué avec le bon email -> on consomme le code en silence + clean URL. // Si on est loggué avec un autre email ou pas loggué -> on switch sur le compte du lien. useEffect(() => { const params = new URLSearchParams(window.location.search); const magicEmail = params.get('email'); const magicCode = params.get('code'); if (!magicEmail || !magicCode) return; const cleanUrl = () => { const sp = new URLSearchParams(window.location.search); sp.delete('email'); sp.delete('code'); const qs = sp.toString(); const newUrl = window.location.pathname + (qs ? '?' + qs : '') + (window.location.hash || ''); window.history.replaceState({}, '', newUrl); }; // Si on est déjà loggué avec le même email, on consomme silencieusement le code // (best effort : il sera invalide après, c'est OK puisqu'on a déjà la session) et on nettoie. const currentEmail = (user && user.email) ? user.email.toLowerCase() : null; const targetEmail = magicEmail.toLowerCase(); if (currentEmail === targetEmail) { cleanUrl(); return; } // Sinon : on consomme le code, on login (en remplaçant la session existante si différente). fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: targetEmail, code: magicCode }), }) .then(r => r.json()) .then(data => { if (data && data.success && data.token) { api.token = data.token; const u = data.user || { email: targetEmail }; setUser({ ...u, token: data.token }); localStorage.setItem('vocal_my_user', JSON.stringify(u)); localStorage.setItem('vocal_my_token', data.token); } }) .catch(() => {}) .finally(() => { cleanUrl(); }); }, []); const refreshProfile = useCallback(async () => { try { const data = await api.get('/auth/me'); if (data?.success && data.user) { setUser(prev => ({ ...prev, ...data.user, token: prev?.token })); localStorage.setItem('vocal_my_user', JSON.stringify(data.user)); } } catch (e) {} }, []); const [selectedBotId, setSelectedBotId] = useState(null); const navigate = useCallback((v, opts = {}) => { setView(v); setSidebarOpen(false); if (opts.lineId) setSelectedLineId(opts.lineId); if (opts.botId) setSelectedBotId(opts.botId); if (v !== 'line-detail') { try { window.history.replaceState(null, '', `#${v}`); } catch (e) {} } }, []); const value = useMemo(() => ({ user, view, sidebarOpen, setSidebarOpen, selectedLineId, setSelectedLineId, selectedBotId, setSelectedBotId, login, logout, navigate, notify, refreshProfile, setUser, }), [user, view, sidebarOpen, selectedLineId, selectedBotId, login, logout, navigate, notify, refreshProfile]); 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(''); // Note : l'auto-login magic link est géré dans AppProvider au boot. // Si on arrive ici, c'est que le code a échoué (déjà consommé / expiré) : // on pré-remplit l'email pour faciliter la ressaisie d'un code. useEffect(() => { const params = new URLSearchParams(window.location.search); const magicEmail = params.get('email'); if (magicEmail && !email) { setEmail(magicEmail); setStep('code'); } }, []); 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: 'Statistiques en temps réel', desc: 'Suivez vos appels, SMS et coûts' }, { icon: '📞', title: 'Vos lignes', desc: 'Consultez la configuration de vos lignes' }, { icon: '🔑', title: 'Clés API', desc: 'Gérez vos accès pour intégrations tierces' }, { icon: '⚙️', title: 'Self-service', desc: 'Espace personnel sécurisé' }, ]; return (
Vocal
{step === 'email' ? (

Mon Espace Vocal

Recevez un lien magique de connexion par email

setEmail(e.target.value)} placeholder="vous@exemple.com" className="form-input" autoFocus />
{error &&

{error}

}

Pas de mot de passe : un email suffit. Votre compte est créé automatiquement.

) : (

Vérification

Code envoyé à {email}

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

{error}

}
)}

Mon Espace Vocal

Pilotez votre téléphonie cloud depuis un seul endroit

{features.map((f, i) => (
{f.icon}
{f.title}
{f.desc}
))}
); }; // ==================== SIDEBAR ==================== // =================== APP SWITCHER =================== // Permet de basculer entre les apps Vocal (Compte / Studio / Bots) en // auto-loguant l'utilisateur sur l'app cible via /go/magic-link. const VOCAL_APPS = [ { id: 'my', label: 'Compte', desc: 'Lignes, appels, facturation', url: 'https://my.helvia.app', pill: 'Compte', color: '#2563eb' }, { id: 'studio', label: 'Studio', desc: 'Voix synthétiques (TTS)', url: 'https://studio.helvia.app', pill: 'Voice', color: '#7c3aed' }, { id: 'bots', label: 'Bots', desc: 'Agents IA & conversations', url: 'https://bots.helvia.app', pill: 'Bots', color: '#0891b2' }, ]; const CURRENT_APP_ID = 'my'; const AppSwitcher = () => { const [open, setOpen] = useState(false); const [loadingId, setLoadingId] = useState(null); const [error, setError] = useState(''); const goTo = async (app) => { if (app.id === CURRENT_APP_ID) { setOpen(false); return; } setLoadingId(app.id); setError(''); try { const res = await api.post('/go/magic-link', { target: app.url }); if (res && res.url) { window.location.href = res.url; } else { setError(res?.error || 'Impossible de générer le lien'); setLoadingId(null); } } catch (e) { setError('Erreur réseau'); setLoadingId(null); } }; return ( <> {open && (
e.target === e.currentTarget && setOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem' }} >

Applications Vocal

Vous êtes connecté une seule fois. Cliquez pour basculer sans ressaisir votre code.

{VOCAL_APPS.map(app => { const isCurrent = app.id === CURRENT_APP_ID; const isLoading = loadingId === app.id; return ( ); })}
{error &&
{error}
}
)} ); }; const Sidebar = () => { const { user, view, sidebarOpen, setSidebarOpen, navigate, logout } = useApp(); const lang = useLang(); // Niveau client : 1 (minimal) → 5 (tout). minLevel par item. // Niveau 1 voit : dashboard, lines, calls, sms, demandes, contacts, spam, billing, subscriptions, settings. const clientLevel = user?.client?.level ?? 1; const allItems = [ { id: 'dashboard', label: t('nav.dashboard', lang), icon: Icons.Home, section: 'main', minLevel: 1 }, { id: 'lines', label: t('nav.lines', lang), icon: Icons.Phone, section: 'main', minLevel: 1, keepOwnView: true }, { id: 'calls', label: t('nav.calls', lang), icon: Icons.PhoneIn, section: 'main', minLevel: 1, parent: 'lines' }, { id: 'sms', label: t('nav.sms', lang), icon: Icons.Send, section: 'main', minLevel: 1 }, { id: 'callback-requests', label: 'Demandes', icon: Icons.Refresh, section: 'main', minLevel: 1 }, { id: 'callback-requests-pending', label: 'À traiter', icon: Icons.AlertCircle, section: 'main', minLevel: 1, parent: 'callback-requests' }, { id: 'callback-requests-done', label: 'Traités', icon: Icons.Phone, section: 'main', minLevel: 1, parent: 'callback-requests' }, { id: 'callback-requests-cancelled', label: 'Annulés', icon: Icons.AlertCircle, section: 'main', minLevel: 1, parent: 'callback-requests' }, { id: 'callback-requests-all', label: 'Tous', icon: Icons.MessageSquare, section: 'main', minLevel: 1, parent: 'callback-requests' }, { id: 'whatsapp', label: 'WhatsApp', icon: Icons.Chat, section: 'main', minLevel: 1 }, { id: 'whatsapp-inbox', label: 'Conversations', icon: Icons.MessageSquare, section: 'main', minLevel: 1, parent: 'whatsapp' }, { id: 'whatsapp-messages', label: 'Historique brut', icon: Icons.Send, section: 'main', minLevel: 1, parent: 'whatsapp' }, { id: 'whatsapp-senders', label: 'Comptes Business', icon: Icons.Shield, section: 'main', minLevel: 1, parent: 'whatsapp' }, { id: 'ai-agents', label: 'Agents IA', icon: Icons.Sparkles, section: 'main', minLevel: 1 }, { id: 'widgets', label: 'Widgets', icon: Icons.Globe, section: 'main', minLevel: 1 }, { id: 'bots', label: t('nav.bots', lang), icon: Icons.Robot, section: 'main', minLevel: 2 }, { id: 'voice-clones', label: t('nav.voice_clones', lang), icon: Icons.Sparkles, section: 'main', minLevel: 3 }, { id: 'studio', label: t('nav.studio', lang), icon: Icons.Sparkles, section: 'main', minLevel: 3 }, { id: 'contacts', label: t('nav.contacts', lang), icon: Icons.Users, section: 'crm', minLevel: 1 }, { id: 'conversations', label: t('nav.conversations', lang), icon: Icons.MessageSquare, section: 'crm', minLevel: 2 }, { id: 'nps', label: t('nav.nps', lang), icon: Icons.AlertCircle, section: 'crm', minLevel: 3 }, { id: 'proxy', label: t('nav.proxy', lang), icon: Icons.Shield, section: 'crm', minLevel: 2 }, { id: 'spam', label: t('nav.spam', lang), icon: Icons.AlertCircle, section: 'crm', minLevel: 1 }, { id: 'billing', label: t('nav.billing', lang), icon: Icons.Wallet, section: 'billing', minLevel: 1 }, { id: 'subscriptions', label: 'Abonnements', icon: Icons.Card, section: 'billing', minLevel: 1 }, { id: 'modules', label: t('nav.modules', lang), icon: Icons.Sparkles, section: 'billing', minLevel: 2 }, { id: 'porting', label: t('nav.porting', lang), icon: Icons.Refresh, section: 'billing', minLevel: 2 }, { id: 'api-keys', label: t('nav.api', lang), icon: Icons.Key, section: 'tools', minLevel: 1 }, { id: 'sip', label: 'SIP / Wildix', icon: Icons.Phone, section: 'tools', minLevel: 1 }, { id: 'settings', label: 'Paramètres', icon: Icons.Settings, section: 'tools', minLevel: 1 }, ]; const items = allItems.filter(i => clientLevel >= (i.minLevel || 1)); const sections = { main: 'ESPACE PERSONNEL', crm: 'RELATIONS', billing: 'FACTURATION', tools: 'OUTILS', }; const grouped = Object.entries(sections).map(([key, label]) => ({ label, items: items.filter(i => i.section === key), })); return ( <> {sidebarOpen && (
setSidebarOpen(false)} />)} ); }; // ==================== TOPBAR CONTROLS (lang) ==================== const TopbarControls = () => { const lang = useLang(); return (
); }; const MobileHeader = () => { const { setSidebarOpen } = useApp(); return (
Vocal Mon Espace
); }; // ==================== DASHBOARD ==================== // ==================== RECOMMENDATIONS CARD (personnalisées) ==================== // Affiche jusqu'à 3 suggestions calculées côté serveur (modules à activer, packs adaptés, etc). // Le client peut masquer une reco (persistée localStorage) ou tout déplier pour voir le détail + CTA. const RECO_TYPE_STYLE = { module: { color: '#a855f7', label: 'Module suggéré' }, bot: { color: '#6366f1', label: 'Bot vocal' }, pack: { color: '#0891b2', label: 'Pack recommandé' }, recharge_urgent: { color: '#dc2626', label: 'Wallet bas' }, reallocation: { color: '#0d9488', label: 'Crédit non utilisé' }, upgrade_annual: { color: '#059669', label: 'Économisez en annuel' }, }; const PersonalRecommendationsCard = ({ navigate, notify }) => { const [recos, setRecos] = useState(null); const [loading, setLoading] = useState(true); const [expanded, setExpanded] = useState(false); const [hidden, setHidden] = useState(() => { try { return new Set(JSON.parse(localStorage.getItem('vocal_my_reco_hidden') || '[]')); } catch (e) { return new Set(); } }); const persistHidden = (s) => { setHidden(new Set(s)); try { localStorage.setItem('vocal_my_reco_hidden', JSON.stringify([...s])); } catch (e) {} }; useEffect(() => { let cancel = false; (async () => { try { const r = await api.get('/my/recommendations'); if (!cancel && !r?.error) setRecos(r); } catch (e) { /* silencieux */ } finally { if (!cancel) setLoading(false); } })(); return () => { cancel = true; }; }, []); if (loading || !recos || !recos.offers || recos.offers.length === 0) return null; const visible = recos.offers.filter(o => !hidden.has(o.code)); if (visible.length === 0) return null; const top = expanded ? visible : visible.slice(0, 3); const ctaTarget = (offer) => { if (offer.type === 'pack' || offer.type === 'recharge_urgent') return 'billing'; if (offer.type === 'module' || offer.type === 'reallocation') return 'modules'; if (offer.type === 'bot') return null; if (offer.type === 'upgrade_annual') return 'lines'; return null; }; const externalLink = (offer) => { if (offer.type === 'bot') return `https://bots.helvia.app?token=${encodeURIComponent(localStorage.getItem('vocal_my_token') || '')}`; return null; }; return (
Suggestions personnalisées pour vous
Calculées d'après votre usage des 30 derniers jours.
{visible.length > 3 && ( )}
{top.map((o, i) => { const meta = RECO_TYPE_STYLE[o.type] || { color: '#6366f1', label: 'Suggestion' }; const internal = ctaTarget(o); const external = externalLink(o); return (
{meta.label.toUpperCase()}
{o.title}
{o.desc}
{internal && ( )} {external && ( Ouvrir bots.helvia.app )} {!internal && !external && ( )}
); })}
{hidden.size > 0 && (
)}
); }; const DashboardView = () => { const { user, navigate, notify } = useApp(); const [stats, setStats] = useState(null); const [balance, setBalance] = useState(null); const [recent, setRecent] = useState([]); const [loading, setLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const load = useCallback(async (background = false) => { if (background) setRefreshing(true); else setLoading(true); try { const [s, c, b] = await Promise.all([ api.get('/my/stats'), api.get('/my/calls?page=1&limit=5'), api.get('/my/billing/balance'), ]); if (s?.error) { notify.error(s.error); setStats({ lines: { total: 0, active: 0 }, calls: { total: 0, today: 0, month: 0, total_duration: 0, total_cost: 0 }, api_keys: { total: 0 } }); } else { setStats(s); } setBalance(b); setRecent(c?.calls || []); } catch (e) { notify.error('Erreur chargement dashboard'); } finally { setLoading(false); setRefreshing(false); } }, [notify]); useEffect(() => { load(); }, [load]); const cards = stats ? [ { label: 'Mes lignes actives', value: `${stats.lines?.active || 0} / ${stats.lines?.total || 0}`, icon: Icons.Phone, color: 'green', view: 'lines' }, { label: 'Appels ce mois', value: stats.calls?.month || 0, icon: Icons.PhoneIn, color: 'blue', view: 'calls' }, { label: 'Coût total', value: formatCurrency(stats.calls?.total_cost || 0), icon: Icons.Card, color: 'purple', view: 'calls' }, { label: 'Clés API', value: stats.api_keys?.total || 0, icon: Icons.Key, color: 'orange', view: 'api-keys' }, ] : []; return ( <>

Bonjour, {user?.name || user?.client?.name || user?.email?.split('@')[0]}

Vue d'ensemble de votre activité Vocal

{/* Mini-widget solde */} {!loading && balance && ( )} {/* Suggestions personnalisées (masquées au niveau 1 pour ne pas brouiller l'expérience) */} {(user?.client?.level ?? 1) >= 2 && ( )} {loading ? ( ) : (
{cards.map((c, i) => ( ))}
)}

Derniers appels

{loading ? ( ) : recent.length === 0 ? (

Aucun appel récent

) : (
{recent.map(call => { const st = CALL_STATUS[call.status] || { label: call.status, color: 'badge-gray' }; return ( ); })}
DateAppelantLigneStatutDurée
{formatDateShort(call.created_at)}
{formatTimeOnly(call.created_at)}
 {call.from_number || '-'} {call.line_label || call.line_phone || '-'}
{st.label}
 {formatDuration(call.duration)}
)}
); }; // ==================== LINES ==================== // Bouton "Activer WhatsApp" pour une ligne — détecte le sender Twilio, l'importe // en DB, synchronise les webhooks et active le bot. Idempotent : recliquer // resynchronise simplement les webhooks. const WhatsappActivateButton = ({ line }) => { const { notify } = useApp(); const [busy, setBusy] = useState(false); const [state, setState] = useState(line.wa_bot_enabled ? 'enabled' : 'unknown'); const run = async () => { if (busy) return; setBusy(true); try { const r = await api.post(`/my/lines/${line.id}/whatsapp-activate`, {}); if (r?.error) { notify.error(r.error); setState('error'); return; } if (r.ready === false) { const help = r.reason === 'no_sender_on_twilio' ? 'Aucun sender WhatsApp. Créez-le via "Activer un numéro".' : r.message || 'Pas prêt'; notify.warning ? notify.warning(help) : notify.error(help); setState('not_ready'); return; } if (r.webhook_sync && r.webhook_sync.ok === false) { notify.error('Sender importé mais erreur sync webhooks : ' + (r.webhook_sync.twilio_error || r.webhook_sync.error || '')); setState('partial'); return; } notify.success(r.message || 'WhatsApp activé'); setState('enabled'); } catch (e) { notify.error('Erreur activation WhatsApp'); setState('error'); } finally { setBusy(false); } }; if (state === 'enabled') { return ( ); } return ( ); }; const LinesView = () => { const { notify, navigate } = useApp(); const [lines, setLines] = useState([]); const [subs, setSubs] = useState([]); const [loading, setLoading] = useState(true); const [search, setSearch] = useState(''); const load = useCallback(async () => { setLoading(true); try { const [l, s] = await Promise.all([api.get('/my/lines'), api.get('/my/subscriptions')]); if (l?.error) notify.error(l.error); setLines(l?.lines || []); setSubs(s?.subscriptions || []); } catch (e) { notify.error('Erreur chargement lignes'); } finally { setLoading(false); } }, [notify]); useEffect(() => { load(); }, [load]); const subByLine = useMemo(() => { const m = {}; for (const s of subs) { if (!m[s.line_id] || parseUtcDate(s.created_at) > parseUtcDate(m[s.line_id].created_at)) m[s.line_id] = s; } return m; }, [subs]); const filtered = useMemo(() => { if (!search) return lines; const q = search.toLowerCase(); return lines.filter(l => (l.phone_number || '').toLowerCase().includes(q) || (l.label || '').toLowerCase().includes(q) || (l.description || '').toLowerCase().includes(q)); }, [lines, search]); return ( <>

Mes lignes

{lines.length} ligne(s) configurée(s)

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

Aucune ligne

Vous n'avez pas encore de ligne assignée. Contactez l'équipe Vocal pour configurer votre numéro.

Contacter Vocal
) : (
{filtered.map(l => { const t = LINE_TYPES[l.type] || { label: l.type, color: 'badge-gray' }; const sub = subByLine[l.id]; const isSubActive = sub && (sub.status === 'active' || sub.status === 'trialing'); return ( navigate('line-detail', { lineId: l.id })} style={{ cursor: 'pointer' }}> ); })}
Numéro Libellé Type Abonnement Appels (mois) Total Statut WhatsApp
{l.phone_number}
{l.label || '-'}
{l.description &&
{l.description.length > 60 ? l.description.slice(0, 60) + '…' : l.description}
} 		{t.label} {sub ? ( {sub.billing_period === 'yearly' ? 'Annuel' : 'Mensuel'} • {isSubActive ? 'actif' : sub.status} ) : Aucun} {l.month_calls || 0} {l.total_calls || 0} {l.is_active ? 'Active' : 'Inactive'} {l.wa_bot_enabled ? '💬 Actif' : '○ Inactif'}
)}
); }; // ==================== LINE DETAIL ==================== const DAY_LABELS = [ { id: 'monday', label: 'Lundi' }, { id: 'tuesday', label: 'Mardi' }, { id: 'wednesday', label: 'Mercredi' }, { id: 'thursday', label: 'Jeudi' }, { id: 'friday', label: 'Vendredi' }, { id: 'saturday', label: 'Samedi' }, { id: 'sunday', label: 'Dimanche' }, ]; function defaultBusinessHours() { const out = { holidays: [] }; DAY_LABELS.forEach(d => { const isWeekend = d.id === 'saturday' || d.id === 'sunday'; out[d.id] = { open: !isWeekend, from: '09:00', to: '18:00' }; }); return out; } // === Bloc "Message d'accueil" pour le mode Redirection === // Permet d'activer un greeting joué AVANT le transfert : soit un texte (voix Twilio), // soit un MP3/WAV uploadé (priorité à l'audio si les deux sont remplis). // Zone de dépôt audio réutilisable : drag & drop + sélecteur de fichier classique // + lecteur intégré quand un audio est défini. Accepte MP3, WAV, OGG, M4A. const AudioDropzone = ({ value, onChange, disabled, notify, hint, maxSizeMB = 10 }) => { const [uploading, setUploading] = useState(false); const [dragOver, setDragOver] = useState(false); const inputRef = useRef(null); const ACCEPT = 'audio/mpeg,audio/mp3,audio/wav,audio/ogg,audio/m4a,audio/x-m4a,audio/webm'; const ACCEPT_EXT = /\.(mp3|wav|ogg|m4a|webm)$/i; const upload = async (file) => { if (!file) return; const isAudio = (file.type && file.type.startsWith('audio/')) || ACCEPT_EXT.test(file.name); if (!isAudio) { notify.error('Format audio non supporté'); return; } if (file.size > maxSizeMB * 1024 * 1024) { notify.error(`Fichier trop volumineux (max ${maxSizeMB} Mo)`); return; } setUploading(true); try { const fd = new FormData(); fd.append('file', file); const res = await api.upload('/api/audio/upload', fd); if (res?.url) { onChange(res.url); notify.success('Audio uploadé'); } else { notify.error(res?.error || 'Erreur upload'); } } catch (err) { notify.error('Erreur upload'); } finally { setUploading(false); } }; const handleFileInput = async (e) => { const file = e.target.files && e.target.files[0]; await upload(file); try { e.target.value = ''; } catch (_) {} }; const handleDrop = async (e) => { e.preventDefault(); e.stopPropagation(); setDragOver(false); if (disabled || uploading) return; const file = e.dataTransfer.files && e.dataTransfer.files[0]; await upload(file); }; const onDragEnter = (e) => { e.preventDefault(); e.stopPropagation(); if (!disabled && !uploading) setDragOver(true); }; const onDragOver = (e) => { e.preventDefault(); e.stopPropagation(); if (!disabled && !uploading) setDragOver(true); }; const onDragLeave = (e) => { e.preventDefault(); e.stopPropagation(); setDragOver(false); }; if (value) { return (
); } return (
!disabled && !uploading && inputRef.current?.click()} onDragEnter={onDragEnter} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={handleDrop} style={{ border: `2px dashed ${dragOver ? 'var(--primary)' : 'var(--border)'}`, background: dragOver ? 'rgba(124,58,237,0.06)' : '#fff', borderRadius: '0.6rem', padding: '0.9rem 1rem', textAlign: 'center', cursor: disabled || uploading ? 'not-allowed' : 'pointer', opacity: disabled ? 0.55 : 1, transition: 'border-color 120ms ease, background 120ms ease', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.6rem', minHeight: 64, }} > {uploading ? '⏳' : '🎵'}
{uploading ? 'Upload en cours…' : (dragOver ? 'Relâcher pour uploader' : 'Glisser un fichier ici ou cliquer pour parcourir')}
MP3, WAV, OGG, M4A — max {maxSizeMB} Mo
{hint && {hint}}
); }; const ForwardWelcomePanel = ({ form, setForm, editMode, notify }) => (

Message d'accueil avant la redirection

Joue un court message à l'appelant avant que ça sonne sur votre numéro (ex : "Vous êtes bien chez X, je vous mets en relation"). Vous pouvez choisir un texte (voix synthétique) ou uploader un MP3 personnalisé. Si les deux sont définis, l'audio est prioritaire.

{form.welcome_enabled && (