const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment } = React; const CONFIG = { API_URL: 'https://api.vocal.ch' }; 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}`; } // ==================== 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" }) => (), }; 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','billing','subscriptions','api-keys','settings'].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 navigate = useCallback((v, opts = {}) => { setView(v); setSidebarOpen(false); if (opts.lineId) setSelectedLineId(opts.lineId); if (v !== 'line-detail') { try { window.history.replaceState(null, '', `#${v}`); } catch (e) {} } }, []); const value = useMemo(() => ({ user, view, sidebarOpen, setSidebarOpen, selectedLineId, setSelectedLineId, login, logout, navigate, notify, refreshProfile, setUser, }), [user, view, sidebarOpen, selectedLineId, 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 items = [ { id: 'dashboard', label: 'Tableau de bord', icon: Icons.Home, section: 'main' }, { id: 'lines', label: 'Mes lignes', icon: Icons.Phone, section: 'main' }, { id: 'calls', label: 'Appels', icon: Icons.PhoneIn, section: 'main' }, { id: 'sms', label: 'SMS', icon: Icons.Send, section: 'main' }, { id: 'whatsapp', label: 'WhatsApp', icon: Icons.Chat, section: 'main' }, { id: 'billing', label: 'Crédits', icon: Icons.Wallet, section: 'billing' }, { id: 'subscriptions', label: 'Abonnements', icon: Icons.Card, section: 'billing' }, { id: 'api-keys', label: 'Clés API', icon: Icons.Key, section: 'tools' }, { id: 'settings', label: 'Paramètres', icon: Icons.Settings, section: 'tools' }, ]; const sections = { main: 'ESPACE PERSONNEL', billing: 'FACTURATION', tools: 'OUTILS', }; const grouped = Object.entries(sections).map(([key, label]) => ({ label, items: items.filter(i => i.section === key), })); return ( <> {sidebarOpen && (
setSidebarOpen(false)} />)} ); }; 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 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); 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 || '', }); } catch (e) { notify.error('Erreur chargement ligne'); } finally { setLoading(false); } }, [selectedLineId, notify]); useEffect(() => { load(); }, [load]); const save = async () => { setSaving(true); try { const r = await api.put(`/my/lines/${selectedLineId}`, form); 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 t = LINE_TYPES[line.type] || { label: line.type, color: 'badge-gray' }; return ( <>

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

{line.label &&

{line.label}

}
{tab === 'config' && !editMode && ( )}
{[ { id: 'summary', label: 'Résumé', icon: Icons.Home }, { id: 'config', label: 'Configuration', icon: Icons.Settings }, { 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.)" />