const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment } = React; const CONFIG = { API_URL: 'https://api.vocal.ch' }; // ==================== 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: 'API externe', color: 'badge-dark' }, }; 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' }); } function formatDateTime(d) { if (!d) return '-'; const x = new Date(d); 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) { if (!d) return ''; return new Date(d).toLocaleTimeString('fr-CH', { hour: '2-digit', minute: '2-digit' }); } function formatDateShort(d) { if (!d) return ''; const x = new Date(d); 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" }) => (), PhoneIn: ({ className = "w-5 h-5" }) => (), Home: ({ className = "w-5 h-5" }) => (), Key: ({ className = "w-5 h-5" }) => (), Send: ({ className = "w-5 h-5" }) => (), Chat: ({ className = "w-5 h-5" }) => (), Settings: ({ className = "w-5 h-5" }) => (), Search: ({ className = "w-5 h-5" }) => (), Plus: ({ className = "w-5 h-5" }) => (), Trash: ({ className = "w-5 h-5" }) => (), Refresh: ({ className = "w-5 h-5" }) => (), Menu: ({ className = "w-5 h-5" }) => (), LogOut: ({ className = "w-5 h-5" }) => (), Eye: ({ className = "w-5 h-5" }) => (), EyeOff: ({ className = "w-5 h-5" }) => (), Copy: ({ className = "w-5 h-5" }) => (), Check: ({ className = "w-5 h-5" }) => (), ChevronLeft: ({ className = "w-5 h-5" }) => (), ChevronRight: ({ className = "w-5 h-5" }) => (), Clock: ({ className = "w-5 h-5" }) => (), Card: ({ className = "w-5 h-5" }) => (), Wallet: ({ className = "w-5 h-5" }) => (), Edit: ({ className = "w-5 h-5" }) => (), Star: ({ className = "w-5 h-5" }) => (), AlertTriangle: ({ className = "w-5 h-5" }) => (), ArrowLeft: ({ className = "w-5 h-5" }) => (), Robot: ({ className = "w-5 h-5" }) => (), Calendar: ({ className = "w-5 h-5" }) => (), Sparkles: ({ className = "w-5 h-5" }) => (), Globe: ({ className = "w-5 h-5" }) => (), Document: ({ className = "w-5 h-5" }) => (), Play: ({ className = "w-5 h-5" }) => (), Users: ({ className = "w-5 h-5" }) => (), Shield: ({ className = "w-5 h-5" }) => (), AlertCircle: ({ className = "w-5 h-5" }) => (), Moon: ({ className = "w-5 h-5" }) => (), Briefcase: ({ className = "w-5 h-5" }) => (), MessageSquare: ({ className = "w-5 h-5" }) => (), X: ({ className = "w-5 h-5" }) => (), ExternalLink: ({ className = "w-5 h-5" }) => (), }; 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 ==================== 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' }); }, }; // ==================== 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'].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]); 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(''); 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: '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 ==================== const Sidebar = () => { const { user, view, sidebarOpen, setSidebarOpen, navigate, logout } = useApp(); const lang = useLang(); const items = [ { id: 'dashboard', label: t('nav.dashboard', lang), icon: Icons.Home, section: 'main' }, { id: 'lines', label: t('nav.lines', lang), icon: Icons.Phone, section: 'main' }, { id: 'calls', label: t('nav.calls', lang), icon: Icons.PhoneIn, section: 'main' }, { id: 'sms', label: t('nav.sms', lang), icon: Icons.Send, section: 'main' }, { id: 'whatsapp', label: 'WhatsApp', icon: Icons.Chat, section: 'main' }, { id: 'bots', label: t('nav.bots', lang), icon: Icons.Robot, section: 'main' }, { id: 'voice-clones', label: t('nav.voice_clones', lang), icon: Icons.Sparkles, section: 'main' }, { id: 'studio', label: t('nav.studio', lang), icon: Icons.Sparkles, section: 'main' }, { id: 'contacts', label: t('nav.contacts', lang), icon: Icons.Users, section: 'crm' }, { id: 'conversations', label: t('nav.conversations', lang), icon: Icons.MessageSquare, section: 'crm' }, { id: 'nps', label: t('nav.nps', lang), icon: Icons.AlertCircle, section: 'crm' }, { id: 'proxy', label: t('nav.proxy', lang), icon: Icons.Shield, section: 'crm' }, { id: 'spam', label: t('nav.spam', lang), icon: Icons.AlertCircle, section: 'crm' }, { id: 'billing', label: t('nav.billing', lang), icon: Icons.Wallet, section: 'billing' }, { id: 'subscriptions', label: 'Abonnements', icon: Icons.Card, section: 'billing' }, { id: 'modules', label: t('nav.modules', lang), icon: Icons.Sparkles, section: 'billing' }, { id: 'porting', label: t('nav.porting', lang), icon: Icons.Refresh, section: 'billing' }, { id: 'api-keys', label: t('nav.api', lang), icon: Icons.Key, section: 'tools' }, { id: 'settings', label: 'Paramètres', icon: Icons.Settings, section: 'tools' }, ]; 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 + live center) ==================== const TopbarControls = () => { const lang = useLang(); return (
); }; const MobileHeader = () => { const { setSidebarOpen } = useApp(); return (
Vocal Mon Espace
); }; // ==================== DASHBOARD ==================== 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 && ( )} {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)}
)}

Bienvenue sur Mon Espace Vocal

Cet espace vous permet de consulter vos lignes, vos appels et de gérer vos clés API pour intégrer Vocal dans votre application.

Pour ajouter une nouvelle ligne ou modifier la configuration, contactez votre administrateur Vocal.

); }; // ==================== LINES ==================== 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] || new Date(s.created_at) > new Date(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
{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'}
)}
); }; // ==================== 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; } const LineDetailView = () => { const { selectedLineId, navigate, notify } = useApp(); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [tab, setTab] = useState('summary'); const [editMode, setEditMode] = useState(false); const [form, setForm] = useState({}); const [saving, setSaving] = useState(false); const load = useCallback(async () => { if (!selectedLineId) return; setLoading(true); try { const d = await api.get(`/my/lines/${selectedLineId}`); if (d?.error) { notify.error(d.error); return; } setData(d); const parsedHours = (() => { try { return d.line.business_hours ? JSON.parse(d.line.business_hours) : defaultBusinessHours(); } catch (e) { return defaultBusinessHours(); } })(); setForm({ label: d.line.label || '', description: d.line.description || '', forward_number: d.line.forward_number || '', voicemail_email: d.line.voicemail_email || '', notification_number: d.line.notification_number || '', webhook_url: d.line.webhook_url || '', link_url: d.line.link_url || '', link_email: d.line.link_email || '', link_sms_sender: d.line.link_sms_sender || '', record_calls: !!d.line.record_calls, transcription_enabled: !!d.line.transcription_enabled, transcription_email: d.line.transcription_email || '', transcription_language: d.line.transcription_language || 'fr', business_hours_enabled: !!d.line.business_hours_enabled, business_hours: parsedHours, timezone: d.line.timezone || 'Europe/Zurich', out_of_hours_action: d.line.out_of_hours_action || 'message', out_of_hours_forward_number: d.line.out_of_hours_forward_number || '', out_of_hours_message: d.line.out_of_hours_message || '', voice_bot_id: d.line.voice_bot_id || null, }); } catch (e) { notify.error('Erreur chargement ligne'); } finally { setLoading(false); } }, [selectedLineId, notify]); useEffect(() => { load(); }, [load]); const save = async () => { setSaving(true); try { const payload = { ...form }; if (payload.business_hours && typeof payload.business_hours === 'object') { payload.business_hours = JSON.stringify(payload.business_hours); } const r = await api.put(`/my/lines/${selectedLineId}`, payload); if (r?.error) notify.error(r.error); else { notify.success('Ligne mise à jour'); setEditMode(false); load(); } } catch (e) { notify.error('Erreur'); } finally { setSaving(false); } }; if (loading || !data) { return ( <>

Chargement…

); } const { line, stats, subscription, recent_calls } = data; const lineMeta = LINE_TYPES[line.type] || { label: line.type, color: 'badge-gray' }; return ( <>

{line.phone_number} {line.is_active ? 'Active' : 'Inactive'} {lineMeta.label}

{line.label &&

{line.label}

}
{(tab === 'config' || tab === 'hours' || tab === 'bot' || tab === 'dnd' || tab === 'vacation' || tab === 'callback' || tab === 'queue') && !editMode && ( )}
{[ { id: 'summary', label: 'Résumé', icon: Icons.Home }, { id: 'config', label: 'Configuration', icon: Icons.Settings }, { id: 'hours', label: 'Horaires', icon: Icons.Calendar }, { id: 'dnd', label: 'Ne pas déranger', icon: Icons.Moon }, { id: 'vacation', label: 'Vacances', icon: Icons.Briefcase }, { id: 'callback', label: 'Rappel auto', icon: Icons.Refresh }, ...(line && line.type === 'queue' ? [{ id: 'queue', label: 'Agents', icon: Icons.Users }] : []), { id: 'bot', label: 'Bot vocal', icon: Icons.Robot }, { id: 'routing', label: t('nav.routing'), icon: Icons.Sparkles }, { id: 'nps', label: t('nav.nps'), icon: Icons.AlertCircle }, { id: 'subscription', label: 'Abonnement', icon: Icons.Card }, { id: 'widget', label: 'Widget & API', icon: Icons.Key }, ].map(t => ( ))}
{tab === 'summary' && ( <>
Total appels
{stats.total_calls || 0}
Ce mois
{stats.month_calls || 0}
Durée totale
{formatDuration(stats.total_duration)}
Coût total
{formatCurrency(stats.total_cost)}

Derniers appels

{(!recent_calls || recent_calls.length === 0) ? (
Aucun appel
) : (
{recent_calls.map(c => { const st = CALL_STATUS[c.status] || { label: c.status, color: 'badge-gray' }; return ( ); })}
DateDeVersStatutDurée
{formatDateTime(c.created_at)} {c.from_number || '-'} {c.to_number || '-'}
{st.label}
 {formatDuration(c.duration)}
)}
)} {tab === 'config' && (

Configuration de la ligne

setForm({ ...form, label: e.target.value })} disabled={!editMode} placeholder="Nom interne (ex: Standard, Support, etc.)" />