feat(prod): implementation of missing features for production readiness

apps/admin/src/App.tsx

@@ -1,103 +1,52 @@
-import { BrowserRouter as Router, Routes, Route, Link, Navigate, useNavigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Link, Navigate, useNavigate, useParams } from 'react-router-dom';
 import { useEffect, useState, createContext, useContext } from 'react';
+import { Users, PlayCircle, CheckCircle, Lightbulb, Download, BookOpen, Plus, Edit2, Trash2, ChevronRight, X, Save, BarChart2, DollarSign, ArrowLeft } from 'lucide-react';
 
-// ── Auth Context ────────────────────────────────────────────────────────────────
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
 const SESSION_KEY = 'edtech_admin_key';
-
-const AuthContext = createContext<{
-    apiKey: string | null;
-    login: (key: string) => void;
-    logout: () => void;
-}>({
-    apiKey: null,
-    login: () => { },
-    logout: () => { },
-});
-
+const AuthContext = createContext<{ apiKey: string | null; login: (k: string) => void; logout: () => void; }>({ apiKey: null, login: () => {}, logout: () => {} });
 function AuthProvider({ children }: { children: React.ReactNode }) {
-    const [apiKey, setApiKey] = useState<string | null>(
-        () => sessionStorage.getItem(SESSION_KEY)
-    );
-
-    const login = (key: string) => {
-        sessionStorage.setItem(SESSION_KEY, key);
-        setApiKey(key);
-    };
-
-    const logout = () => {
-        sessionStorage.removeItem(SESSION_KEY);
-        setApiKey(null);
-    };
-
+    const [apiKey, setApiKey] = useState<string | null>(() => sessionStorage.getItem(SESSION_KEY));
+    const login = (k: string) => { sessionStorage.setItem(SESSION_KEY, k); setApiKey(k); };
+    const logout = () => { sessionStorage.removeItem(SESSION_KEY); setApiKey(null); };
     return <AuthContext.Provider value={{ apiKey, login, logout }}>{children}</AuthContext.Provider>;
 }
-
 const useAuth = () => useContext(AuthContext);
-
+const ah = (k: string) => ({ 'Authorization': `Bearer ${k}`, 'Content-Type': 'application/json' });
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
     const { apiKey } = useAuth();
     if (!apiKey) return <Navigate to="/login" replace />;
     return <>{children}</>;
 }
 
-// ── Login Page ──────────────────────────────────────────────────────────────────
 function LoginPage() {
     const { login, apiKey } = useAuth();
     const navigate = useNavigate();
     const [key, setKey] = useState('');
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
-
-    useEffect(() => {
-        if (apiKey) navigate('/', { replace: true });
-    }, [apiKey, navigate]);
-
+    useEffect(() => { if (apiKey) navigate('/', { replace: true }); }, [apiKey, navigate]);
     const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError('');
-        setLoading(true);
+        e.preventDefault(); setError(''); setLoading(true);
         try {
-            const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
-            const res = await fetch(`${API_URL}/v1/admin/stats`, {
-                headers: { 'Authorization': `Bearer ${key}` }
-            });
-            if (res.ok) {
-                login(key);
-                navigate('/', { replace: true });
-            } else {
-                setError('Clé API invalide. Vérifie ton ADMIN_API_KEY.');
-            }
-        } catch {
-            setError('Impossible de joindre le serveur.');
-        } finally {
-            setLoading(false);
-        }
+            const res = await fetch(`${API_URL}/v1/admin/stats`, { headers: { 'Authorization': `Bearer ${key}` } });
+            if (res.ok) { login(key); navigate('/', { replace: true }); }
+            else setError('Clé API invalide.');
+        } catch { setError('Impossible de joindre le serveur.'); } finally { setLoading(false); }
     };
-
     return (
         <div className="min-h-screen bg-slate-900 flex items-center justify-center p-4">
             <div className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-sm">
-                <div className="text-center mb-6">
-                    <div className="text-3xl mb-2">🔐</div>
+                <div className="text-center mb-6"><div className="text-3xl mb-2">🔐</div>
                     <h1 className="text-2xl font-bold text-slate-800">Admin Access</h1>
-                    <p className="text-sm text-slate-500 mt-1">Entrez votre ADMIN_API_KEY</p>
-                </div>
+                    <p className="text-sm text-slate-500 mt-1">Entrez votre ADMIN_API_KEY</p></div>
                 <form onSubmit={handleSubmit} className="space-y-4">
-                    <input
-                        id="apiKey"
-                        type="password"
-                        required
-                        placeholder="sk-admin-..."
-                        value={key}
+                    <input id="apiKey" type="password" required placeholder="sk-admin-..." value={key}
                         onChange={e => setKey(e.target.value)}
-                        className="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-slate-400 transition"
-                    />
+                        className="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-slate-400" />
                     {error && <p className="text-red-500 text-sm">{error}</p>}
-                    <button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full bg-slate-900 hover:bg-slate-700 text-white py-3 rounded-xl font-bold text-sm transition disabled:opacity-50"
-                    >
+                    <button type="submit" disabled={loading}
+                        className="w-full bg-slate-900 hover:bg-slate-700 text-white py-3 rounded-xl font-bold text-sm transition disabled:opacity-50">
                         {loading ? 'Vérification...' : 'Se connecter'}
                     </button>
                 </form>
@@ -105,161 +54,289 @@ function LoginPage() {
         </div>
     );
 }
-import { Users, PlayCircle, CheckCircle, Lightbulb, Download } from 'lucide-react'; interface DashboardData {
-    stats: {
-        totalUsers: number;
-        activeEnrollments: number;
-        completedEnrollments: number;
-        totalTracks: number;
-    } | null;
-    enrollments: any[];
-}
 
 function Dashboard() {
     const { apiKey, logout } = useAuth();
-    const [data, setData] = useState<DashboardData>({ stats: null, enrollments: [] });
+    const [stats, setStats] = useState<any>(null);
+    const [enrollments, setEnrollments] = useState<any[]>([]);
     const [loading, setLoading] = useState(true);
-
     useEffect(() => {
-        const fetchData = async () => {
+        (async () => {
             try {
-                const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
-                const headers = { 'Authorization': `Bearer ${apiKey}` };
-
-                const [statsRes, enrollmentsRes] = await Promise.all([
-                    fetch(`${API_URL}/v1/admin/stats`, { headers }),
-                    fetch(`${API_URL}/v1/admin/enrollments`, { headers })
+                const h = { 'Authorization': `Bearer ${apiKey}` };
+                const [sRes, eRes] = await Promise.all([
+                    fetch(`${API_URL}/v1/admin/stats`, { headers: h }),
+                    fetch(`${API_URL}/v1/admin/enrollments`, { headers: h })
                 ]);
-
-                if (statsRes.status === 401 || enrollmentsRes.status === 401) {
-                    logout();
-                    return;
-                }
-
-                const stats = await statsRes.json();
-                const enrollments = await enrollmentsRes.json();
-
-                setData({ stats, enrollments });
-            } catch (error) {
-                console.error("Error fetching dashboard data", error);
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchData();
+                if (sRes.status === 401) { logout(); return; }
+                setStats(await sRes.json());
+                setEnrollments(await eRes.json());
+            } finally { setLoading(false); }
+        })();
     }, [apiKey, logout]);
-
-    if (loading) return <div className="p-8 text-slate-500">Chargement du dashboard...</div>;
-
     const exportCSV = () => {
-        if (!data.enrollments || data.enrollments.length === 0) {
-            alert("No enrollments to export.");
-            return;
-        }
-
-        const headers = ['ID', 'User Phone', 'Track Title', 'Status', 'Current Day', 'Started At'];
-        const rows = data.enrollments.map(env => [
-            env.id,
-            env.user?.phone || 'Unknown',
-            env.track?.title || 'Unknown',
-            env.status,
-            env.currentDay,
-            env.startedAt
-        ]);
-
-        const csvContent = [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        const link = document.createElement('a');
-        const url = URL.createObjectURL(blob);
-        link.setAttribute('href', url);
-        link.setAttribute('download', `enrollments_export_${new Date().toISOString().slice(0, 10)}.csv`);
-        link.style.visibility = 'hidden';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
+        if (!enrollments.length) return alert('Aucune inscription.');
+        const rows = enrollments.map((e: any) => [e.id, e.user?.phone, e.track?.title, e.status, e.currentDay, e.startedAt]);
+        const csv = [['ID','Phone','Track','Status','Day','Started'].join(','), ...rows.map(r => r.join(','))].join('\n');
+        const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
+        a.download = `enrollments_${new Date().toISOString().slice(0,10)}.csv`; a.click();
     };
+    if (loading) return <div className="p-8 text-slate-400">Chargement...</div>;
+    const statCards = [
+        { icon: <Users className="w-6 h-6 text-slate-400" />, label: 'Utilisateurs', value: stats?.totalUsers || 0, color: 'text-slate-900' },
+        { icon: <PlayCircle className="w-6 h-6 text-blue-400" />, label: 'Actifs', value: stats?.activeEnrollments || 0, color: 'text-blue-600' },
+        { icon: <CheckCircle className="w-6 h-6 text-green-400" />, label: 'Complétés', value: stats?.completedEnrollments || 0, color: 'text-green-600' },
+        { icon: <Lightbulb className="w-6 h-6 text-purple-400" />, label: 'Parcours', value: stats?.totalTracks || 0, color: 'text-purple-600' },
+        { icon: <DollarSign className="w-6 h-6 text-emerald-400" />, label: 'Revenus', value: `${(stats?.totalRevenue||0).toLocaleString()} XOF`, color: 'text-emerald-600' },
+    ];
+    return (
+        <div className="p-8">
+            <h1 className="text-3xl font-bold mb-8 text-slate-800">Dashboard</h1>
+            <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
+                {statCards.map((s,i) => (
+                    <div key={i} className="bg-white p-5 rounded-xl shadow-sm border border-slate-100 flex flex-col items-center gap-2">
+                        {s.icon}<p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{s.label}</p>
+                        <p className={`text-2xl font-bold ${s.color}`}>{s.value}</p>
+                    </div>
+                ))}
+            </div>
+            <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+                <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
+                    <h2 className="text-lg font-semibold text-slate-800">Inscriptions récentes</h2>
+                    <button onClick={exportCSV} className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
+                        <Download className="w-4 h-4" /><span>Export CSV</span>
+                    </button>
+                </div>
+                <table className="w-full text-sm">
+                    <thead className="bg-slate-50 text-xs text-slate-500 uppercase">
+                        <tr>{['Téléphone','Parcours','Statut','Jour','Date'].map(h=><th key={h} className="px-6 py-3 text-left">{h}</th>)}</tr>
+                    </thead>
+                    <tbody>
+                        {enrollments.map((e:any)=>(
+                            <tr key={e.id} className="border-t border-slate-50 hover:bg-slate-50/50">
+                                <td className="px-6 py-4 font-medium text-slate-900">{e.user?.phone||'—'}</td>
+                                <td className="px-6 py-4">{e.track?.title||'—'}</td>
+                                <td className="px-6 py-4"><span className={`px-2 py-1 rounded-full text-xs font-medium ${e.status==='ACTIVE'?'bg-blue-100 text-blue-800':e.status==='COMPLETED'?'bg-green-100 text-green-800':'bg-slate-100 text-slate-800'}`}>{e.status}</span></td>
+                                <td className="px-6 py-4">Jour {e.currentDay}</td>
+                                <td className="px-6 py-4 text-slate-500">{new Date(e.startedAt).toLocaleDateString('fr-FR')}</td>
+                            </tr>
+                        ))}
+                        {!enrollments.length&&<tr><td colSpan={5} className="px-6 py-8 text-center text-slate-400">Aucune inscription</td></tr>}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
 
+function TrackList() {
+    const { apiKey } = useAuth(); const navigate = useNavigate();
+    const [tracks, setTracks] = useState<any[]>([]); const [loading, setLoading] = useState(true);
+    const load = async () => { const r = await fetch(`${API_URL}/v1/admin/tracks`,{headers:ah(apiKey!)}); setTracks(await r.json()); setLoading(false); };
+    useEffect(()=>{ load(); },[]);
+    const del = async(id:string)=>{ if(!confirm('Supprimer ce parcours ?')) return; await fetch(`${API_URL}/v1/admin/tracks/${id}`,{method:'DELETE',headers:ah(apiKey!)}); load(); };
+    if(loading) return <div className="p-8 text-slate-400">Chargement...</div>;
     return (
         <div className="p-8">
-            <h1 className="text-3xl font-bold mb-8 text-slate-800">Admin Dashboard</h1>
+            <div className="flex justify-between items-center mb-6">
+                <h1 className="text-3xl font-bold text-slate-800">Parcours</h1>
+                <button onClick={()=>navigate('/content/new')} className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-slate-700">
+                    <Plus className="w-4 h-4"/> Nouveau parcours
+                </button>
+            </div>
+            <div className="grid gap-4">
+                {tracks.map((t:any)=>(
+                    <div key={t.id} className="bg-white rounded-xl border border-slate-100 p-5 flex items-center justify-between shadow-sm hover:shadow-md transition">
+                        <div className="flex items-center gap-4">
+                            <div className="bg-purple-100 p-3 rounded-xl"><BookOpen className="w-5 h-5 text-purple-600"/></div>
+                            <div>
+                                <div className="flex items-center gap-2">
+                                    <h3 className="font-bold text-slate-800">{t.title}</h3>
+                                    {t.isPremium&&<span className="bg-amber-100 text-amber-700 text-xs px-2 py-0.5 rounded-full font-medium">Premium</span>}
+                                    <span className="bg-slate-100 text-slate-600 text-xs px-2 py-0.5 rounded-full">{t.language}</span>
+                                </div>
+                                <p className="text-sm text-slate-500 mt-0.5">{t._count?.days||0} jours · {t._count?.enrollments||0} inscrits · {t.duration}j</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <button onClick={()=>navigate(`/content/${t.id}`)} className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"><Edit2 className="w-4 h-4"/></button>
+                            <button onClick={()=>navigate(`/content/${t.id}/days`)} className="flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 px-3 py-2 rounded-lg hover:bg-slate-50">Jours <ChevronRight className="w-4 h-4"/></button>
+                            <button onClick={()=>del(t.id)} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg"><Trash2 className="w-4 h-4"/></button>
+                        </div>
+                    </div>
+                ))}
+                {!tracks.length&&<div className="text-center py-16 text-slate-400"><BookOpen className="w-12 h-12 mx-auto mb-3 opacity-30"/><p>Aucun parcours. Créez-en un !</p></div>}
+            </div>
+        </div>
+    );
+}
 
-            {/* Stats Overview */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-center items-center">
-                    <Users className="w-8 h-8 text-slate-400 mb-2" />
-                    <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-1">Total Users</h2>
-                    <p className="text-4xl font-bold text-slate-900">{data.stats?.totalUsers || 0}</p>
-                </div>
-                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-center items-center">
-                    <PlayCircle className="w-8 h-8 text-blue-400 mb-2" />
-                    <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-1">Active Enrollments</h2>
-                    <p className="text-4xl font-bold text-blue-600">{data.stats?.activeEnrollments || 0}</p>
+function TrackForm() {
+    const { apiKey } = useAuth(); const { id } = useParams<{id:string}>(); const navigate = useNavigate();
+    const isNew = id==='new';
+    const [form, setForm] = useState({title:'',description:'',duration:7,language:'FR',isPremium:false,priceAmount:0,stripePriceId:''});
+    const [saving, setSaving] = useState(false);
+    useEffect(()=>{ if(!isNew) fetch(`${API_URL}/v1/admin/tracks/${id}`,{headers:ah(apiKey!)}).then(r=>r.json()).then(t=>setForm({title:t.title,description:t.description||'',duration:t.duration,language:t.language,isPremium:t.isPremium,priceAmount:t.priceAmount||0,stripePriceId:t.stripePriceId||''})); },[id]);
+    const inp = "w-full border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300";
+    const handleSubmit = async(e:React.FormEvent)=>{ e.preventDefault(); setSaving(true);
+        const url = isNew?`${API_URL}/v1/admin/tracks`:`${API_URL}/v1/admin/tracks/${id}`;
+        await fetch(url,{method:isNew?'POST':'PUT',headers:ah(apiKey!),body:JSON.stringify({...form,priceAmount:form.priceAmount||undefined,stripePriceId:form.stripePriceId||undefined})});
+        navigate('/content'); };
+    return (
+        <div className="p-8 max-w-xl">
+            <div className="flex items-center gap-3 mb-6">
+                <button onClick={()=>navigate('/content')} className="p-2 hover:bg-slate-100 rounded-lg"><ArrowLeft className="w-4 h-4"/></button>
+                <h1 className="text-2xl font-bold text-slate-800">{isNew?'Nouveau parcours':'Modifier le parcours'}</h1>
+            </div>
+            <form onSubmit={handleSubmit} className="bg-white rounded-2xl border border-slate-100 p-6 space-y-4 shadow-sm">
+                <div><label className="text-sm font-medium text-slate-700 mb-1 block">Titre *</label>
+                    <input required className={inp} value={form.title} onChange={e=>setForm(f=>({...f,title:e.target.value}))}/></div>
+                <div><label className="text-sm font-medium text-slate-700 mb-1 block">Description</label>
+                    <textarea className={inp} rows={3} value={form.description} onChange={e=>setForm(f=>({...f,description:e.target.value}))}/></div>
+                <div className="grid grid-cols-2 gap-4">
+                    <div><label className="text-sm font-medium text-slate-700 mb-1 block">Durée (jours)</label>
+                        <input type="number" min={1} required className={inp} value={form.duration} onChange={e=>setForm(f=>({...f,duration:parseInt(e.target.value)}))}/></div>
+                    <div><label className="text-sm font-medium text-slate-700 mb-1 block">Langue</label>
+                        <select className={inp} value={form.language} onChange={e=>setForm(f=>({...f,language:e.target.value}))}>
+                            <option value="FR">Français</option><option value="WOLOF">Wolof</option>
+                        </select></div>
                 </div>
-                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-center items-center">
-                    <CheckCircle className="w-8 h-8 text-green-400 mb-2" />
-                    <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-1">Completed</h2>
-                    <p className="text-4xl font-bold text-green-600">{data.stats?.completedEnrollments || 0}</p>
+                <label className="flex items-center gap-3 p-3 bg-amber-50 rounded-xl cursor-pointer">
+                    <input type="checkbox" checked={form.isPremium} onChange={e=>setForm(f=>({...f,isPremium:e.target.checked}))} className="w-4 h-4"/>
+                    <span className="text-sm font-medium text-amber-800">Formation Premium (payante)</span>
+                </label>
+                {form.isPremium&&<div className="grid grid-cols-2 gap-4">
+                    <div><label className="text-sm font-medium text-slate-700 mb-1 block">Prix (XOF)</label>
+                        <input type="number" className={inp} value={form.priceAmount} onChange={e=>setForm(f=>({...f,priceAmount:parseInt(e.target.value)}))}/></div>
+                    <div><label className="text-sm font-medium text-slate-700 mb-1 block">Stripe Price ID</label>
+                        <input className={inp} value={form.stripePriceId} onChange={e=>setForm(f=>({...f,stripePriceId:e.target.value}))}/></div>
+                </div>}
+                <div className="flex gap-3 pt-2">
+                    <button type="button" onClick={()=>navigate('/content')} className="flex-1 border border-slate-200 text-slate-600 py-2.5 rounded-xl text-sm hover:bg-slate-50">Annuler</button>
+                    <button type="submit" disabled={saving} className="flex-1 bg-slate-900 text-white py-2.5 rounded-xl text-sm font-bold flex items-center justify-center gap-2 hover:bg-slate-700 disabled:opacity-50">
+                        <Save className="w-4 h-4"/>{saving?'Enregistrement...':'Enregistrer'}
+                    </button>
                 </div>
-                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col justify-center items-center">
-                    <Lightbulb className="w-8 h-8 text-purple-400 mb-2" />
-                    <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-1">Tracks</h2>
-                    <p className="text-4xl font-bold text-purple-600">{data.stats?.totalTracks || 0}</p>
+            </form>
+        </div>
+    );
+}
+
+function TrackDays() {
+    const { apiKey } = useAuth(); const { trackId } = useParams<{trackId:string}>(); const navigate = useNavigate();
+    const [days, setDays] = useState<any[]>([]); const [track, setTrack] = useState<any>(null); const [editing, setEditing] = useState<any>(null); const [saving, setSaving] = useState(false);
+    const load = async()=>{ const[tR,dR]=await Promise.all([fetch(`${API_URL}/v1/admin/tracks/${trackId}`,{headers:ah(apiKey!)}),fetch(`${API_URL}/v1/admin/tracks/${trackId}/days`,{headers:ah(apiKey!)})]); setTrack(await tR.json()); setDays(await dR.json()); };
+    useEffect(()=>{ load(); },[]);
+    const emptyDay = {dayNumber:(days.length||0)+1,title:'',lessonText:'',audioUrl:'',exerciseType:'TEXT',exercisePrompt:'',validationKeyword:''};
+    const saveDay = async(e:React.FormEvent)=>{ e.preventDefault(); setSaving(true);
+        const url = editing.id?`${API_URL}/v1/admin/tracks/${trackId}/days/${editing.id}`:`${API_URL}/v1/admin/tracks/${trackId}/days`;
+        await fetch(url,{method:editing.id?'PUT':'POST',headers:ah(apiKey!),body:JSON.stringify(editing)});
+        setEditing(null); load(); setSaving(false); };
+    const del = async(dayId:string)=>{ if(!confirm('Supprimer ce jour?')) return; await fetch(`${API_URL}/v1/admin/tracks/${trackId}/days/${dayId}`,{method:'DELETE',headers:ah(apiKey!)}); load(); };
+    const inp = "w-full border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300";
+    return (
+        <div className="p-8">
+            <div className="flex items-center gap-3 mb-6">
+                <button onClick={()=>navigate('/content')} className="p-2 hover:bg-slate-100 rounded-lg"><ArrowLeft className="w-4 h-4"/></button>
+                <div><h1 className="text-2xl font-bold text-slate-800">{track?.title}</h1>
+                    <p className="text-sm text-slate-500">{days.length} jours configurés</p></div>
+                <button onClick={()=>setEditing(emptyDay)} className="ml-auto flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-slate-700">
+                    <Plus className="w-4 h-4"/> Ajouter un jour
+                </button>
+            </div>
+            {editing&&(
+                <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
+                    <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
+                        <div className="flex items-center justify-between p-5 border-b">
+                            <h2 className="font-bold text-slate-800">{editing.id?`Modifier Jour ${editing.dayNumber}`:'Nouveau jour'}</h2>
+                            <button onClick={()=>setEditing(null)}><X className="w-5 h-5 text-slate-400"/></button>
+                        </div>
+                        <form onSubmit={saveDay} className="p-5 space-y-4">
+                            <div className="grid grid-cols-2 gap-3">
+                                <div><label className="text-xs font-medium text-slate-600 mb-1 block">Numéro du jour</label>
+                                    <input type="number" min={1} required className={inp} value={editing.dayNumber} onChange={e=>setEditing((d:any)=>({...d,dayNumber:parseInt(e.target.value)}))}/></div>
+                                <div><label className="text-xs font-medium text-slate-600 mb-1 block">Titre</label>
+                                    <input className={inp} value={editing.title||''} onChange={e=>setEditing((d:any)=>({...d,title:e.target.value}))}/></div>
+                            </div>
+                            <div><label className="text-xs font-medium text-slate-600 mb-1 block">Texte de la leçon</label>
+                                <textarea className={inp} rows={5} value={editing.lessonText||''} onChange={e=>setEditing((d:any)=>({...d,lessonText:e.target.value}))} placeholder="Contenu pédagogique..."/></div>
+                            <div><label className="text-xs font-medium text-slate-600 mb-1 block">URL Audio (optionnel)</label>
+                                <input className={inp} value={editing.audioUrl||''} onChange={e=>setEditing((d:any)=>({...d,audioUrl:e.target.value}))} placeholder="https://..."/></div>
+                            <div className="grid grid-cols-2 gap-3">
+                                <div><label className="text-xs font-medium text-slate-600 mb-1 block">Type exercice</label>
+                                    <select className={inp} value={editing.exerciseType} onChange={e=>setEditing((d:any)=>({...d,exerciseType:e.target.value}))}>
+                                        <option value="TEXT">Texte libre</option><option value="AUDIO">Audio</option><option value="BUTTON">Boutons</option>
+                                    </select></div>
+                                <div><label className="text-xs font-medium text-slate-600 mb-1 block">Mot-clé validation</label>
+                                    <input className={inp} value={editing.validationKeyword||''} onChange={e=>setEditing((d:any)=>({...d,validationKeyword:e.target.value}))}/></div>
+                            </div>
+                            <div><label className="text-xs font-medium text-slate-600 mb-1 block">Prompt exercice</label>
+                                <textarea className={inp} rows={2} value={editing.exercisePrompt||''} onChange={e=>setEditing((d:any)=>({...d,exercisePrompt:e.target.value}))} placeholder="Question posée à l'étudiant..."/></div>
+                            <div className="flex gap-3">
+                                <button type="button" onClick={()=>setEditing(null)} className="flex-1 border border-slate-200 text-slate-600 py-2.5 rounded-xl text-sm hover:bg-slate-50">Annuler</button>
+                                <button type="submit" disabled={saving} className="flex-1 bg-slate-900 text-white py-2.5 rounded-xl text-sm font-bold flex items-center justify-center gap-2 hover:bg-slate-700 disabled:opacity-50">
+                                    <Save className="w-4 h-4"/>{saving?'Enregistrement...':'Enregistrer'}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
                 </div>
+            )}
+            <div className="grid gap-3">
+                {days.map((d:any)=>(
+                    <div key={d.id} className="bg-white rounded-xl border border-slate-100 p-4 flex items-start justify-between shadow-sm">
+                        <div className="flex gap-4">
+                            <div className="bg-slate-900 text-white w-9 h-9 rounded-lg flex items-center justify-center text-sm font-bold shrink-0">{d.dayNumber}</div>
+                            <div>
+                                <p className="font-medium text-slate-800">{d.title||`Jour ${d.dayNumber}`}</p>
+                                <p className="text-xs text-slate-500 mt-0.5 line-clamp-1">{d.lessonText?.substring(0,100)||'Pas de texte'}</p>
+                                <div className="flex gap-2 mt-1.5">
+                                    <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">{d.exerciseType}</span>
+                                    {d.audioUrl&&<span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">🎵 Audio</span>}
+                                    {d.exercisePrompt&&<span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">🎯 Exercice</span>}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex gap-1 shrink-0 ml-4">
+                            <button onClick={()=>setEditing(d)} className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"><Edit2 className="w-4 h-4"/></button>
+                            <button onClick={()=>del(d.id)} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg"><Trash2 className="w-4 h-4"/></button>
+                        </div>
+                    </div>
+                ))}
+                {!days.length&&<div className="text-center py-12 text-slate-400 bg-white rounded-xl border border-dashed border-slate-200"><p>Aucun jour. Ajoutez le contenu pédagogique !</p></div>}
             </div>
+        </div>
+    );
+}
 
-            {/* Recent Enrollments Table */}
+function UserList() {
+    const { apiKey } = useAuth();
+    const [users, setUsers] = useState<any[]>([]); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(true);
+    useEffect(()=>{ fetch(`${API_URL}/v1/admin/users`,{headers:ah(apiKey!)}).then(r=>r.json()).then(d=>{ setUsers(d.users||d); setTotal(d.total||0); setLoading(false); }); },[]);
+    if(loading) return <div className="p-8 text-slate-400">Chargement...</div>;
+    return (
+        <div className="p-8">
+            <h1 className="text-3xl font-bold mb-6 text-slate-800">Utilisateurs <span className="text-lg font-normal text-slate-400">({total})</span></h1>
             <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
-                <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
-                    <h2 className="text-lg font-semibold text-slate-800">Recent Enrollments</h2>
-                    <button
-                        onClick={exportCSV}
-                        className="flex items-center space-x-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-                    >
-                        <Download className="w-4 h-4" />
-                        <span>Export CSV</span>
-                    </button>
-                </div>
-                <div className="overflow-x-auto">
-                    <table className="w-full text-sm text-left">
-                        <thead className="text-xs text-slate-500 bg-slate-50 uppercase">
-                            <tr>
-                                <th className="px-6 py-3">User (WhatsApp)</th>
-                                <th className="px-6 py-3">Track</th>
-                                <th className="px-6 py-3">Status</th>
-                                <th className="px-6 py-3">Progress</th>
-                                <th className="px-6 py-3">Date</th>
+                <table className="w-full text-sm">
+                    <thead className="bg-slate-50 text-xs text-slate-500 uppercase">
+                        <tr>{['Téléphone','Nom','Langue','Secteur','Inscrip.','Réponses','Date'].map(h=><th key={h} className="px-5 py-3 text-left">{h}</th>)}</tr>
+                    </thead>
+                    <tbody>
+                        {users.map((u:any)=>(
+                            <tr key={u.id} className="border-t border-slate-50 hover:bg-slate-50/50">
+                                <td className="px-5 py-3 font-medium">{u.phone}</td>
+                                <td className="px-5 py-3 text-slate-600">{u.name||'—'}</td>
+                                <td className="px-5 py-3"><span className="bg-blue-100 text-blue-700 text-xs px-2 py-0.5 rounded-full">{u.language}</span></td>
+                                <td className="px-5 py-3 text-slate-500 text-xs">{u.activity||'—'}</td>
+                                <td className="px-5 py-3 text-center">{u._count?.enrollments||0}</td>
+                                <td className="px-5 py-3 text-center">{u._count?.responses||0}</td>
+                                <td className="px-5 py-3 text-slate-400 text-xs">{new Date(u.createdAt).toLocaleDateString('fr-FR')}</td>
                             </tr>
-                        </thead>
-                        <tbody>
-                            {data.enrollments.map((env: any) => (
-                                <tr key={env.id} className="border-b border-slate-50 hover:bg-slate-50/50">
-                                    <td className="px-6 py-4 font-medium text-slate-900">{env.user?.phone || 'Unknown'}</td>
-                                    <td className="px-6 py-4">{env.track?.title || 'Unknown Track'}</td>
-                                    <td className="px-6 py-4">
-                                        <span className={`px-2.5 py-1 py-0.5 rounded-full text-xs font-medium
-                                            ${env.status === 'ACTIVE' ? 'bg-blue-100 text-blue-800' :
-                                                env.status === 'COMPLETED' ? 'bg-green-100 text-green-800' :
-                                                    'bg-slate-100 text-slate-800'}`}>
-                                            {env.status}
-                                        </span>
-                                    </td>
-                                    <td className="px-6 py-4">Day {env.currentDay}</td>
-                                    <td className="px-6 py-4 text-slate-500">
-                                        {new Date(env.startedAt).toLocaleDateString()}
-                                    </td>
-                                </tr>
-                            ))}
-                            {data.enrollments.length === 0 && (
-                                <tr>
-                                    <td colSpan={5} className="px-6 py-8 text-center text-slate-500">
-                                        No enrollments found.
-                                    </td>
-                                </tr>
-                            )}
-                        </tbody>
-                    </table>
-                </div>
+                        ))}
+                        {!users.length&&<tr><td colSpan={7} className="px-5 py-8 text-center text-slate-400">Aucun utilisateur</td></tr>}
+                    </tbody>
+                </table>
             </div>
         </div>
     );
@@ -267,37 +344,53 @@ function Dashboard() {
 
 function Settings() {
     return (
-        <div className="p-8">
-            <h1 className="text-3xl font-bold mb-4">Settings</h1>
-            <p>System configuration</p>
+        <div className="p-8 max-w-xl">
+            <h1 className="text-3xl font-bold mb-6 text-slate-800">Configuration</h1>
+            <div className="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm space-y-3">
+                <div className="flex items-center justify-between p-4 bg-slate-50 rounded-xl">
+                    <div><p className="font-medium text-slate-800">API URL</p><p className="text-sm text-slate-500 font-mono">{API_URL}</p></div>
+                </div>
+                <p className="text-sm font-medium text-slate-600">Variables Railway requises :</p>
+                {['WHATSAPP_VERIFY_TOKEN','WHATSAPP_APP_SECRET','WHATSAPP_ACCESS_TOKEN','OPENAI_API_KEY','DATABASE_URL','REDIS_URL','API_URL','ADMIN_API_KEY'].map(v=>(
+                    <div key={v} className="flex items-center gap-3 p-3 border border-slate-100 rounded-xl">
+                        <span className="font-mono text-xs text-slate-700">{v}</span>
+                    </div>
+                ))}
+            </div>
         </div>
     );
 }
 
 function AppShell() {
     const { logout } = useAuth();
+    const navItems = [
+        { to:'/', label:'Dashboard', icon:<BarChart2 className="w-4 h-4"/> },
+        { to:'/content', label:'Parcours', icon:<BookOpen className="w-4 h-4"/> },
+        { to:'/users', label:'Utilisateurs', icon:<Users className="w-4 h-4"/> },
+        { to:'/settings', label:'Paramètres', icon:<Lightbulb className="w-4 h-4"/> },
+    ];
     return (
         <div className="min-h-screen bg-gray-50 flex">
-            {/* Sidebar */}
-            <aside className="w-64 bg-slate-900 text-white p-6 flex flex-col">
-                <div className="text-xl font-bold mb-8">EdTech Admin</div>
-                <nav className="space-y-4 flex-1">
-                    <Link to="/" className="block hover:text-gray-300">Dashboard</Link>
-                    <Link to="/settings" className="block hover:text-gray-300">Settings</Link>
+            <aside className="w-56 bg-slate-900 text-white p-5 flex flex-col shrink-0">
+                <div className="text-lg font-bold mb-8 flex items-center gap-2"><span className="text-2xl">🎓</span>EdTech Admin</div>
+                <nav className="space-y-1 flex-1">
+                    {navItems.map(n=>(
+                        <Link key={n.to} to={n.to} className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-800 transition">
+                            {n.icon}{n.label}
+                        </Link>
+                    ))}
                 </nav>
-                <button
-                    onClick={logout}
-                    className="text-sm text-slate-400 hover:text-white transition mt-4 text-left"
-                >
-                    🔓 Se déconnecter
-                </button>
+                <button onClick={logout} className="text-xs text-slate-500 hover:text-white transition px-3 py-2 text-left">🔓 Se déconnecter</button>
             </aside>
-
-            {/* Main Content */}
-            <main className="flex-1">
+            <main className="flex-1 overflow-auto">
                 <Routes>
-                    <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
-                    <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
+                    <Route path="/" element={<Dashboard/>}/>
+                    <Route path="/content" element={<TrackList/>}/>
+                    <Route path="/content/new" element={<TrackForm/>}/>
+                    <Route path="/content/:id" element={<TrackForm/>}/>
+                    <Route path="/content/:trackId/days" element={<TrackDays/>}/>
+                    <Route path="/users" element={<UserList/>}/>
+                    <Route path="/settings" element={<Settings/>}/>
                 </Routes>
             </main>
         </div>
@@ -309,12 +402,11 @@ function App() {
         <AuthProvider>
             <Router>
                 <Routes>
-                    <Route path="/login" element={<LoginPage />} />
-                    <Route path="/*" element={<AppShell />} />
+                    <Route path="/login" element={<LoginPage/>}/>
+                    <Route path="/*" element={<ProtectedRoute><AppShell/></ProtectedRoute>}/>
                 </Routes>
             </Router>
         </AuthProvider>
     );
 }
-
-export default App
+export default App;

apps/api/src/index.ts

@@ -8,6 +8,7 @@ import { adminRoutes } from './routes/admin';
 import { aiRoutes } from './routes/ai';
 import { paymentRoutes, stripeWebhookRoute } from './routes/payments';
 import { internalRoutes } from './routes/internal';
+import { studentRoutes } from './routes/student';
 
 // ── Fail-fast: vérifier les secrets critiques au démarrage ─────────────────────
 // Only WHATSAPP_VERIFY_TOKEN is strictly needed at startup (for Meta webhook validation).
@@ -52,6 +53,7 @@ async function setupRateLimit() {
 
 // ── Public Routes (no auth) ────────────────────────────────────────────────────
 server.register(whatsappRoutes, { prefix: '/v1/whatsapp' });
+server.register(studentRoutes, { prefix: '/v1/student' });
 
 // ── Stripe Webhook (public — Stripe can't send API Key, verified by signature) ─
 server.register(stripeWebhookRoute, { prefix: '/v1/payments' });

apps/api/src/routes/admin.ts

@@ -1,42 +1,177 @@
 import { FastifyInstance } from 'fastify';
 import { prisma } from '../services/prisma';
+import { z } from 'zod';
 
+// ─── Zod Schemas ───────────────────────────────────────────────────────────────
+const TrackSchema = z.object({
+    title: z.string().min(1),
+    description: z.string().optional(),
+    duration: z.number().int().positive(),
+    language: z.enum(['FR', 'WOLOF']).default('FR'),
+    isPremium: z.boolean().default(false),
+    priceAmount: z.number().int().optional(),
+    stripePriceId: z.string().optional(),
+});
+
+const TrackDaySchema = z.object({
+    dayNumber: z.number().int().positive(),
+    title: z.string().optional(),
+    lessonText: z.string().optional(),
+    audioUrl: z.string().url().optional().or(z.literal('')),
+    exerciseType: z.enum(['TEXT', 'AUDIO', 'BUTTON']).default('TEXT'),
+    exercisePrompt: z.string().optional(),
+    validationKeyword: z.string().optional(),
+    buttonsJson: z.array(z.object({ id: z.string(), title: z.string() })).optional(),
+    unlockCondition: z.string().optional(),
+});
 
 export async function adminRoutes(fastify: FastifyInstance) {
-    // 1. Get Dashboard Stats
+
+    // ── Dashboard Stats ────────────────────────────────────────────────────────
     fastify.get('/stats', async () => {
-        const totalUsers = await prisma.user.count();
-        const activeEnrollments = await prisma.enrollment.count({ where: { status: 'ACTIVE' } });
-        const completedEnrollments = await prisma.enrollment.count({ where: { status: 'COMPLETED' } });
-        const totalTracks = await prisma.track.count();
-
-        return {
-            totalUsers,
-            activeEnrollments,
-            completedEnrollments,
-            totalTracks
-        };
-    });
-
-    // 2. Get Users List
-    fastify.get('/users', async () => {
-        const users = await prisma.user.findMany({
-            orderBy: { createdAt: 'desc' },
-            take: 50,
-        });
-        return users;
+        const [totalUsers, activeEnrollments, completedEnrollments, totalTracks, totalRevenue] = await Promise.all([
+            prisma.user.count(),
+            prisma.enrollment.count({ where: { status: 'ACTIVE' } }),
+            prisma.enrollment.count({ where: { status: 'COMPLETED' } }),
+            prisma.track.count(),
+            prisma.payment.aggregate({ where: { status: 'COMPLETED' }, _sum: { amount: true } }),
+        ]);
+        return { totalUsers, activeEnrollments, completedEnrollments, totalTracks, totalRevenue: totalRevenue._sum.amount || 0 };
+    });
+
+    // ── Users ──────────────────────────────────────────────────────────────────
+    fastify.get('/users', async (req) => {
+        const query = req.query as { page?: string; limit?: string };
+        const page = Math.max(1, parseInt(query.page || '1'));
+        const limit = Math.min(100, parseInt(query.limit || '50'));
+
+        const [users, total] = await Promise.all([
+            prisma.user.findMany({
+                orderBy: { createdAt: 'desc' },
+                skip: (page - 1) * limit,
+                take: limit,
+                include: {
+                    enrollments: { include: { track: true }, orderBy: { startedAt: 'desc' }, take: 1 },
+                    _count: { select: { enrollments: true, responses: true } }
+                }
+            }),
+            prisma.user.count()
+        ]);
+        return { users, total, page, limit };
     });
 
-    // 3. Get Recent Enrollments
+    // ── Enrollments ────────────────────────────────────────────────────────────
     fastify.get('/enrollments', async () => {
         const enrollments = await prisma.enrollment.findMany({
-            include: {
-                user: true,
-                track: true,
-            },
+            include: { user: true, track: true },
             orderBy: { startedAt: 'desc' },
-            take: 50,
+            take: 100,
         });
         return enrollments;
     });
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // TRACKS CRUD
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // List tracks
+    fastify.get('/tracks', async () => {
+        return prisma.track.findMany({
+            include: { _count: { select: { days: true, enrollments: true } } },
+            orderBy: { createdAt: 'desc' }
+        });
+    });
+
+    // Get single track with all days
+    fastify.get<{ Params: { id: string } }>('/tracks/:id', async (req, reply) => {
+        const track = await prisma.track.findUnique({
+            where: { id: req.params.id },
+            include: { days: { orderBy: { dayNumber: 'asc' } } }
+        });
+        if (!track) return reply.code(404).send({ error: 'Track not found' });
+        return track;
+    });
+
+    // Create track
+    fastify.post('/tracks', async (req, reply) => {
+        const body = TrackSchema.safeParse(req.body);
+        if (!body.success) return reply.code(400).send({ error: body.error.flatten() });
+        const track = await prisma.track.create({ data: body.data });
+        return reply.code(201).send(track);
+    });
+
+    // Update track
+    fastify.put<{ Params: { id: string } }>('/tracks/:id', async (req, reply) => {
+        const body = TrackSchema.partial().safeParse(req.body);
+        if (!body.success) return reply.code(400).send({ error: body.error.flatten() });
+        try {
+            const track = await prisma.track.update({ where: { id: req.params.id }, data: body.data });
+            return track;
+        } catch {
+            return reply.code(404).send({ error: 'Track not found' });
+        }
+    });
+
+    // Delete track
+    fastify.delete<{ Params: { id: string } }>('/tracks/:id', async (req, reply) => {
+        try {
+            await prisma.trackDay.deleteMany({ where: { trackId: req.params.id } });
+            await prisma.track.delete({ where: { id: req.params.id } });
+            return { ok: true };
+        } catch {
+            return reply.code(404).send({ error: 'Track not found' });
+        }
+    });
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // TRACK DAYS CRUD
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // List days for a track
+    fastify.get<{ Params: { trackId: string } }>('/tracks/:trackId/days', async (req) => {
+        return prisma.trackDay.findMany({
+            where: { trackId: req.params.trackId },
+            orderBy: { dayNumber: 'asc' }
+        });
+    });
+
+    // Create day
+    fastify.post<{ Params: { trackId: string } }>('/tracks/:trackId/days', async (req, reply) => {
+        const body = TrackDaySchema.safeParse(req.body);
+        if (!body.success) return reply.code(400).send({ error: body.error.flatten() });
+        const day = await prisma.trackDay.create({
+            data: {
+                ...body.data,
+                trackId: req.params.trackId,
+                audioUrl: body.data.audioUrl || null,
+                buttonsJson: body.data.buttonsJson ? body.data.buttonsJson : undefined
+            }
+        });
+        return reply.code(201).send(day);
+    });
+
+    // Update day
+    fastify.put<{ Params: { trackId: string; dayId: string } }>('/tracks/:trackId/days/:dayId', async (req, reply) => {
+        const body = TrackDaySchema.partial().safeParse(req.body);
+        if (!body.success) return reply.code(400).send({ error: body.error.flatten() });
+        try {
+            const day = await prisma.trackDay.update({
+                where: { id: req.params.dayId },
+                data: { ...body.data, audioUrl: body.data.audioUrl === '' ? null : body.data.audioUrl }
+            });
+            return day;
+        } catch {
+            return reply.code(404).send({ error: 'Day not found' });
+        }
+    });
+
+    // Delete day
+    fastify.delete<{ Params: { trackId: string; dayId: string } }>('/tracks/:trackId/days/:dayId', async (req, reply) => {
+        try {
+            await prisma.trackDay.delete({ where: { id: req.params.dayId } });
+            return { ok: true };
+        } catch {
+            return reply.code(404).send({ error: 'Day not found' });
+        }
+    });
 }

apps/api/src/routes/student.ts

@@ -0,0 +1,71 @@
+import { FastifyInstance } from 'fastify';
+import { prisma } from '../services/prisma';
+import { z } from 'zod';
+
+/**
+ * Student-facing public routes (query by phone number).
+ * Protected by ADMIN_API_KEY in the guarded scope.
+ */
+export async function studentRoutes(fastify: FastifyInstance) {
+
+    // GET /v1/student/me?phone=221771234567
+    // Returns user profile + enrollments + generated documents
+    fastify.get('/me', async (req, reply) => {
+        const query = req.query as { phone?: string };
+
+        const phoneSchema = z.string().min(7);
+        const phoneResult = phoneSchema.safeParse(query.phone);
+        if (!phoneResult.success) {
+            return reply.code(400).send({ error: 'phone query param is required' });
+        }
+
+        const phone = phoneResult.data.replace(/\s+/g, '').replace(/^\+/, '');
+
+        const user = await prisma.user.findUnique({
+            where: { phone },
+            include: {
+                enrollments: {
+                    include: {
+                        track: {
+                            include: { days: { orderBy: { dayNumber: 'asc' }, take: 1 } }
+                        }
+                    },
+                    orderBy: { startedAt: 'desc' }
+                },
+                payments: {
+                    where: { status: 'COMPLETED' },
+                    orderBy: { createdAt: 'desc' }
+                },
+                progress: {
+                    orderBy: { lastInteraction: 'desc' }
+                }
+            }
+        });
+
+        if (!user) {
+            return reply.code(404).send({ error: 'User not found. Send INSCRIPTION on WhatsApp to register.' });
+        }
+
+        return {
+            id: user.id,
+            phone: user.phone,
+            name: user.name,
+            language: user.language,
+            activity: user.activity,
+            createdAt: user.createdAt,
+            enrollments: user.enrollments.map(e => ({
+                id: e.id,
+                trackId: e.trackId,
+                trackTitle: e.track.title,
+                status: e.status,
+                currentDay: e.currentDay,
+                totalDays: e.track.duration,
+                progressPercent: Math.round((e.currentDay / e.track.duration) * 100),
+                startedAt: e.startedAt,
+                completedAt: e.completedAt,
+            })),
+            payments: user.payments,
+            // R2 document URLs are stored as Payment metadata (future enhancement)
+        };
+    });
+}

apps/api/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/plugins/auth.ts","./src/routes/admin.ts","./src/routes/ai.ts","./src/routes/internal.ts","./src/routes/payments.ts","./src/routes/whatsapp.ts","./src/services/prisma.ts","./src/services/queue.ts","./src/services/storage.ts","./src/services/stripe.ts","./src/services/whatsapp.ts","./src/services/ai/index.ts","./src/services/ai/mock-provider.ts","./src/services/ai/openai-provider.ts","./src/services/ai/types.ts","./src/services/renderers/pdf-renderer.ts","./src/services/renderers/pptx-renderer.ts","./src/services/renderers/types.ts"],"version":"5.9.3"}
+{"root":["./src/index.ts","./src/plugins/auth.ts","./src/routes/admin.ts","./src/routes/ai.ts","./src/routes/internal.ts","./src/routes/payments.ts","./src/routes/student.ts","./src/routes/whatsapp.ts","./src/services/prisma.ts","./src/services/queue.ts","./src/services/storage.ts","./src/services/stripe.ts","./src/services/whatsapp.ts","./src/services/ai/index.ts","./src/services/ai/mock-provider.ts","./src/services/ai/openai-provider.ts","./src/services/ai/types.ts","./src/services/renderers/pdf-renderer.ts","./src/services/renderers/pptx-renderer.ts","./src/services/renderers/types.ts"],"version":"5.9.3"}

apps/web/src/App.tsx

@@ -1,7 +1,9 @@
-import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';
-import { BookOpen, FileText, Smartphone, ArrowRight, Phone } from 'lucide-react';
+import { BrowserRouter as Router, Routes, Route, Link, useNavigate, useSearchParams, useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { BookOpen, FileText, Smartphone, ArrowRight, Phone, CheckCircle, Download, AlertCircle } from 'lucide-react';
 
 const WA_NUMBER = import.meta.env.VITE_WHATSAPP_NUMBER || '221771234567';
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
 
 function Navbar() {
     return (
@@ -12,19 +14,13 @@ function Navbar() {
                         <div className="bg-primary/10 p-2 rounded-xl group-hover:bg-primary/20 transition-colors">
                             <BookOpen className="h-6 w-6 text-primary" />
                         </div>
-                        <span className="font-heading font-bold text-2xl text-secondary tracking-tight">SafeTrack<span className="text-primary">.edu</span></span>
+                        <span className="font-heading font-bold text-2xl text-secondary tracking-tight">EdTech<span className="text-primary">.sn</span></span>
                     </Link>
                     <div className="flex items-center space-x-4">
-                        <Link to="/login" className="text-secondary font-medium hover:text-primary transition-colors">
-                            Student Login
-                        </Link>
-                        <a
-                            href={`https://wa.me/${WA_NUMBER}?text=Hello! I want to enroll.`}
-                            target="_blank"
-                            rel="noreferrer"
-                            className="bg-primary text-white px-5 py-2.5 rounded-full font-medium hover:bg-emerald-700 hover:shadow-lg hover:shadow-primary/30 transition-all active:scale-95 hidden sm:inline-flex items-center"
-                        >
-                            Start Learning <ArrowRight className="ml-2 w-4 h-4" />
+                        <Link to="/student" className="text-secondary font-medium hover:text-primary transition-colors">Mon espace</Link>
+                        <a href={`https://wa.me/${WA_NUMBER}?text=INSCRIPTION`} target="_blank" rel="noreferrer"
+                            className="bg-primary text-white px-5 py-2.5 rounded-full font-medium hover:bg-emerald-700 hover:shadow-lg hover:shadow-primary/30 transition-all active:scale-95 hidden sm:inline-flex items-center">
+                            Commencer <ArrowRight className="ml-2 w-4 h-4" />
                         </a>
                     </div>
                 </div>
@@ -36,45 +32,26 @@ function Navbar() {
 function Hero() {
     return (
         <div className="relative overflow-hidden bg-slate-50 pt-24 pb-32">
-            {/* Background Decorations */}
-            <div className="absolute top-0 right-0 -translate-y-12 translate-x-1/3">
-                <div className="w-96 h-96 bg-accent/20 rounded-full blur-3xl"></div>
-            </div>
-            <div className="absolute bottom-0 left-0 translate-y-1/3 -translate-x-1/3">
-                <div className="w-[500px] h-[500px] bg-primary/10 rounded-full blur-3xl"></div>
-            </div>
-
+            <div className="absolute top-0 right-0 -translate-y-12 translate-x-1/3"><div className="w-96 h-96 bg-accent/20 rounded-full blur-3xl"></div></div>
+            <div className="absolute bottom-0 left-0 translate-y-1/3 -translate-x-1/3"><div className="w-[500px] h-[500px] bg-primary/10 rounded-full blur-3xl"></div></div>
             <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                 <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-50 text-secondary font-medium text-sm mb-8 border border-blue-100 shadow-sm">
                     <span className="flex h-2 w-2 rounded-full bg-blue-600 mr-2 animate-pulse"></span>
-                    Learn directly on WhatsApp
+                    Formation directement sur WhatsApp
                 </div>
-
                 <h1 className="font-heading font-extrabold text-5xl md:text-7xl text-secondary mb-6 leading-tight tracking-tight">
-                    Master Business Skills, <br className="hidden md:block" />
-                    One Message at a Time.
+                    Maîtrise ton business,<br className="hidden md:block" /> un message à la fois.
                 </h1>
-
                 <p className="max-w-2xl mx-auto text-xl text-gray-600 mb-10 font-sans">
-                    Join our interactive audio and text courses directly via WhatsApp.
-                    Build your startup pitch and get AI-generated slide decks automatically.
+                    Des formations audio interactives sur WhatsApp pour les entrepreneurs du Sénégal. Reçois ta leçon chaque matin et génère ton dossier business en IA.
                 </p>
-
                 <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
-                    <a
-                        href={`https://wa.me/${WA_NUMBER}?text=Start`}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="w-full sm:w-auto bg-primary text-white text-lg px-8 py-4 rounded-full font-bold shadow-xl shadow-primary/30 hover:bg-emerald-700 hover:scale-105 transition-all flex items-center justify-center group"
-                    >
-                        <Phone className="mr-2 w-5 h-5 group-hover:rotate-12 transition-transform" />
-                        Enroll via WhatsApp
+                    <a href={`https://wa.me/${WA_NUMBER}?text=INSCRIPTION`} target="_blank" rel="noreferrer"
+                        className="w-full sm:w-auto bg-primary text-white text-lg px-8 py-4 rounded-full font-bold shadow-xl shadow-primary/30 hover:bg-emerald-700 hover:scale-105 transition-all flex items-center justify-center group">
+                        <Phone className="mr-2 w-5 h-5 group-hover:rotate-12 transition-transform" />S'inscrire sur WhatsApp
                     </a>
-                    <Link
-                        to="/login"
-                        className="w-full sm:w-auto bg-white text-secondary border-2 border-gray-200 text-lg px-8 py-4 rounded-full font-bold hover:border-secondary hover:bg-gray-50 transition-all flex items-center justify-center"
-                    >
-                        Student Portal
+                    <Link to="/student" className="w-full sm:w-auto bg-white text-secondary border-2 border-gray-200 text-lg px-8 py-4 rounded-full font-bold hover:border-secondary hover:bg-gray-50 transition-all flex items-center justify-center">
+                        Mon espace étudiant
                     </Link>
                 </div>
             </div>
@@ -83,121 +60,217 @@ function Hero() {
 }
 
 function Features() {
+    const features = [
+        { icon: <Smartphone className="w-7 h-7 text-primary" />, title: 'WhatsApp natif', desc: 'Pas d\'application à installer. Reçois tes leçons audio et exercices directement dans WhatsApp.' },
+        { icon: <BookOpen className="w-7 h-7 text-accent" />, title: 'Parcours structurés', desc: 'Des formations multi-jours conçues pour les entrepreneurs de l\'informel au Sénégal.' },
+        { icon: <FileText className="w-7 h-7 text-secondary" />, title: 'Dossier IA', desc: 'À la fin de ta formation, l\'IA génère automatiquement ton One-Pager PDF et ton Pitch Deck.' },
+    ];
     return (
         <div className="py-24 bg-white">
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div className="text-center mb-16">
-                    <h2 className="font-heading font-bold text-3xl md:text-4xl text-secondary mb-4">How It Works</h2>
-                    <p className="text-lg text-gray-500 max-w-2xl mx-auto">An effortless learning experience designed for mobile-first entrepreneurs.</p>
+                    <h2 className="font-heading font-bold text-3xl md:text-4xl text-secondary mb-4">Comment ça marche</h2>
+                    <p className="text-lg text-gray-500 max-w-2xl mx-auto">Une expérience d'apprentissage conçue pour les entrepreneurs mobiles.</p>
                 </div>
-
                 <div className="grid md:grid-cols-3 gap-12">
-                    <div className="group bg-slate-50 p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 transition-all">
-                        <div className="bg-white w-14 h-14 rounded-2xl flex items-center justify-center shadow-sm mb-6 group-hover:scale-110 transition-transform">
-                            <Smartphone className="w-7 h-7 text-primary" />
+                    {features.map((f, i) => (
+                        <div key={i} className="group bg-slate-50 p-8 rounded-3xl border border-slate-100 hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 transition-all">
+                            <div className="bg-white w-14 h-14 rounded-2xl flex items-center justify-center shadow-sm mb-6 group-hover:scale-110 transition-transform">{f.icon}</div>
+                            <h3 className="font-heading font-bold text-xl text-secondary mb-3">{f.title}</h3>
+                            <p className="text-gray-600 leading-relaxed text-sm">{f.desc}</p>
                         </div>
-                        <h3 className="font-heading font-bold text-xl text-secondary mb-3">WhatsApp Native</h3>
-                        <p className="text-gray-600 leading-relaxed text-sm">
-                            No apps to install. Receive daily interactive micro-lessons right where you already chat. Listen to audio clips and submit assignments easily.
-                        </p>
-                    </div>
-
-                    <div className="group bg-slate-50 p-8 rounded-3xl border border-slate-100 hover:border-accent/30 hover:shadow-xl hover:shadow-accent/5 transition-all">
-                        <div className="bg-white w-14 h-14 rounded-2xl flex items-center justify-center shadow-sm mb-6 group-hover:scale-110 transition-transform">
-                            <BookOpen className="w-7 h-7 text-accent" />
-                        </div>
-                        <h3 className="font-heading font-bold text-xl text-secondary mb-3">Structured Tracks</h3>
-                        <p className="text-gray-600 leading-relaxed text-sm">
-                            Follow expertly designed multi-day tracks. Learn how to structure your business, define your target audience, and build your value proposition.
-                        </p>
-                    </div>
-
-                    <div className="group bg-slate-50 p-8 rounded-3xl border border-slate-100 hover:border-blue-900/30 hover:shadow-xl hover:shadow-blue-900/5 transition-all">
-                        <div className="bg-white w-14 h-14 rounded-2xl flex items-center justify-center shadow-sm mb-6 group-hover:scale-110 transition-transform">
-                            <FileText className="w-7 h-7 text-secondary" />
-                        </div>
-                        <h3 className="font-heading font-bold text-xl text-secondary mb-3">AI Document Generation</h3>
-                        <p className="text-gray-600 leading-relaxed text-sm">
-                            Finish a track and our AI automatically organizes your answers into a beautiful PDF One-Pager and a PPTX Pitch Deck.
-                        </p>
-                    </div>
+                    ))}
                 </div>
             </div>
         </div>
     );
 }
 
-function Login() {
+// ── Student Portal ────────────────────────────────────────────────────────────────
+function StudentPortal() {
     const navigate = useNavigate();
+    const [phone, setPhone] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
 
-    const handleLogin = (e: React.FormEvent) => {
+    const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        // Mock login - in a real app, this would hit the API
-        setTimeout(() => {
-            alert("Magic link sent to your WhatsApp!");
-            navigate('/');
-        }, 500);
+        setError(''); setLoading(true);
+        const cleaned = phone.replace(/\s+/g, '').replace(/^\+/, '');
+        try {
+            const res = await fetch(`${API_URL}/v1/student/me?phone=${cleaned}`);
+            if (res.ok) {
+                navigate(`/student/${cleaned}`);
+            } else if (res.status === 404) {
+                setError('Numéro non trouvé. Envoie INSCRIPTION sur WhatsApp pour t\'inscrire.');
+            } else {
+                setError('Erreur serveur. Réessaie dans un moment.');
+            }
+        } catch {
+            setError('Impossible de joindre le serveur.');
+        } finally { setLoading(false); }
     };
 
     return (
         <div className="min-h-[80vh] flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-slate-50">
             <div className="sm:mx-auto sm:w-full sm:max-w-md text-center">
-                <div className="inline-flex bg-primary/10 p-4 rounded-full mb-4">
-                    <BookOpen className="w-10 h-10 text-primary" />
-                </div>
-                <h2 className="text-center text-3xl font-heading font-extrabold text-secondary">
-                    Welcome Back
-                </h2>
-                <p className="mt-2 text-center text-sm text-gray-600">
-                    Access your learning materials and AI documents.
-                </p>
+                <div className="inline-flex bg-primary/10 p-4 rounded-full mb-4"><BookOpen className="w-10 h-10 text-primary" /></div>
+                <h2 className="text-center text-3xl font-heading font-extrabold text-secondary">Mon espace étudiant</h2>
+                <p className="mt-2 text-center text-sm text-gray-600">Entre ton numéro WhatsApp pour voir ta progression.</p>
             </div>
-
             <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
                 <div className="bg-white py-8 px-4 shadow sm:rounded-2xl sm:px-10 border border-gray-100">
-                    <form className="space-y-6" onSubmit={handleLogin}>
+                    <form className="space-y-6" onSubmit={handleSubmit}>
                         <div>
-                            <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
-                                WhatsApp Phone Number
-                            </label>
+                            <label htmlFor="phone" className="block text-sm font-medium text-gray-700">Numéro WhatsApp</label>
                             <div className="mt-1 relative rounded-md shadow-sm">
                                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                     <Phone className="h-5 w-5 text-gray-400" />
                                 </div>
-                                <input
-                                    id="phone"
-                                    name="phone"
-                                    type="tel"
-                                    required
+                                <input id="phone" name="phone" type="tel" required value={phone} onChange={e => setPhone(e.target.value)}
                                     className="focus:ring-primary focus:border-primary block w-full pl-10 sm:text-sm border-gray-300 rounded-xl py-3 border outline-none transition-colors"
-                                    placeholder="+221 77 123 45 67"
-                                />
+                                    placeholder="+221 77 123 45 67" />
                             </div>
                         </div>
-
-                        <div>
-                            <button
-                                type="submit"
-                                className="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-bold text-white bg-secondary hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all active:scale-95"
-                            >
-                                Send Magic Link
-                            </button>
-                        </div>
+                        {error && <div className="flex items-start gap-2 p-3 bg-red-50 rounded-xl text-sm text-red-700"><AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />{error}</div>}
+                        <button type="submit" disabled={loading}
+                            className="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-bold text-white bg-secondary hover:bg-blue-900 focus:outline-none transition-all active:scale-95 disabled:opacity-50">
+                            {loading ? 'Recherche...' : 'Voir ma progression'}
+                        </button>
                     </form>
+                    <p className="mt-6 text-center text-xs text-gray-400">
+                        Pas encore inscrit ? <a href={`https://wa.me/${WA_NUMBER}?text=INSCRIPTION`} className="text-primary font-medium">Envoie INSCRIPTION sur WhatsApp</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
 
-                    <div className="mt-6">
-                        <div className="relative">
-                            <div className="absolute inset-0 flex items-center">
-                                <div className="w-full border-t border-gray-200" />
-                            </div>
-                            <div className="relative flex justify-center text-sm">
-                                <span className="px-2 bg-white text-gray-500">
-                                    Format: +[Country Code][Number]
-                                </span>
+// ── Student Dashboard ─────────────────────────────────────────────────────────────
+function StudentDashboard() {
+    const { phone } = useParams<{ phone: string }>();
+    const [data, setData] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        fetch(`${API_URL}/v1/student/me?phone=${phone}`)
+            .then(r => { if (!r.ok) throw new Error('not found'); return r.json(); })
+            .then(setData)
+            .catch(() => setError('Impossible de charger tes données.'))
+            .finally(() => setLoading(false));
+    }, [phone]);
+
+    if (loading) return <div className="min-h-screen flex items-center justify-center text-slate-400">Chargement...</div>;
+    if (error) return (
+        <div className="min-h-screen flex flex-col items-center justify-center gap-4">
+            <AlertCircle className="w-10 h-10 text-red-400" />
+            <p className="text-slate-600">{error}</p>
+            <Link to="/student" className="text-primary font-medium">← Retour</Link>
+        </div>
+    );
+
+    return (
+        <div className="min-h-screen bg-slate-50 py-12">
+            <div className="max-w-3xl mx-auto px-4">
+                <div className="flex items-center justify-between mb-8">
+                    <div>
+                        <h1 className="text-2xl font-bold text-slate-800">{data.name || 'Mon espace'}</h1>
+                        <p className="text-sm text-slate-500">{data.phone} · {data.language} · {data.activity || 'Secteur non défini'}</p>
+                    </div>
+                    <Link to="/student" className="text-sm text-slate-400 hover:text-slate-600">← Changer de compte</Link>
+                </div>
+
+                {/* Enrollments */}
+                <h2 className="text-lg font-bold text-slate-700 mb-4">Mes formations</h2>
+                {data.enrollments.length === 0 ? (
+                    <div className="bg-white rounded-2xl border border-slate-100 p-8 text-center text-slate-400 mb-8">
+                        <BookOpen className="w-10 h-10 mx-auto mb-3 opacity-30" />
+                        <p>Tu n'es inscrit à aucune formation.</p>
+                        <a href={`https://wa.me/${WA_NUMBER}?text=FORMATION`} target="_blank" rel="noreferrer"
+                            className="mt-4 inline-block bg-primary text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-emerald-700 transition">
+                            Voir les formations disponibles
+                        </a>
+                    </div>
+                ) : (
+                    <div className="grid gap-4 mb-8">
+                        {data.enrollments.map((e: any) => (
+                            <div key={e.id} className="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
+                                <div className="flex items-start justify-between mb-4">
+                                    <div>
+                                        <h3 className="font-bold text-slate-800">{e.trackTitle}</h3>
+                                        <p className="text-sm text-slate-500 mt-1">Jour {e.currentDay} sur {e.totalDays}</p>
+                                    </div>
+                                    <span className={`text-xs font-medium px-2.5 py-1 rounded-full ${e.status === 'ACTIVE' ? 'bg-blue-100 text-blue-700' : e.status === 'COMPLETED' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'}`}>
+                                        {e.status === 'ACTIVE' ? '🟢 En cours' : e.status === 'COMPLETED' ? '✅ Terminé' : e.status}
+                                    </span>
+                                </div>
+                                {/* Progress bar */}
+                                <div className="w-full bg-slate-100 rounded-full h-2 mb-2">
+                                    <div className="bg-primary h-2 rounded-full transition-all" style={{ width: `${e.progressPercent}%` }}></div>
+                                </div>
+                                <p className="text-xs text-slate-400 text-right">{e.progressPercent}% complété</p>
+                                {e.status === 'ACTIVE' && (
+                                    <a href={`https://wa.me/${WA_NUMBER}?text=SUITE`} target="_blank" rel="noreferrer"
+                                        className="mt-4 flex items-center justify-center gap-2 bg-primary/10 text-primary font-medium text-sm py-2.5 rounded-xl hover:bg-primary/20 transition">
+                                        <Phone className="w-4 h-4" /> Continuer sur WhatsApp
+                                    </a>
+                                )}
                             </div>
-                        </div>
+                        ))}
                     </div>
+                )}
+
+                {/* Payments */}
+                {data.payments.length > 0 && (
+                    <>
+                        <h2 className="text-lg font-bold text-slate-700 mb-4">Mes paiements</h2>
+                        <div className="bg-white rounded-2xl border border-slate-100 p-5 shadow-sm">
+                            {data.payments.map((p: any) => (
+                                <div key={p.id} className="flex items-center justify-between py-3 border-b border-slate-50 last:border-0">
+                                    <div className="flex items-center gap-3">
+                                        <CheckCircle className="w-5 h-5 text-green-500" />
+                                        <div>
+                                            <p className="text-sm font-medium text-slate-800">{p.amount.toLocaleString()} {p.currency}</p>
+                                            <p className="text-xs text-slate-400">{new Date(p.createdAt).toLocaleDateString('fr-FR')}</p>
+                                        </div>
+                                    </div>
+                                    <span className="text-xs text-green-600 font-medium bg-green-50 px-2 py-1 rounded-full">Payé</span>
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+// ── Payment Success ───────────────────────────────────────────────────────────────
+function PaymentSuccess() {
+    const [searchParams] = useSearchParams();
+    const phone = searchParams.get('phone') || '';
+    return (
+        <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
+            <div className="bg-white rounded-3xl shadow-xl p-10 max-w-md w-full text-center">
+                <div className="inline-flex bg-green-100 p-5 rounded-full mb-6">
+                    <CheckCircle className="w-12 h-12 text-green-500" />
                 </div>
+                <h1 className="text-3xl font-heading font-bold text-slate-800 mb-3">Paiement réussi !</h1>
+                <p className="text-gray-500 mb-8">Ta formation a été débloquée. Tu vas recevoir ta première leçon sur WhatsApp dans quelques minutes.</p>
+                <div className="bg-slate-50 rounded-2xl p-5 mb-8">
+                    <p className="text-sm text-slate-500 mb-4">Continue ton apprentissage :</p>
+                    <a href={`https://wa.me/${WA_NUMBER}?text=SUITE`} target="_blank" rel="noreferrer"
+                        className="flex items-center justify-center gap-2 bg-primary text-white font-bold py-3.5 px-6 rounded-xl hover:bg-emerald-700 transition shadow-lg shadow-primary/30">
+                        <Phone className="w-5 h-5" /> Ouvrir WhatsApp
+                    </a>
+                </div>
+                {phone && (
+                    <Link to={`/student/${phone.replace(/^\+/, '')}`} className="text-sm text-primary font-medium hover:underline flex items-center justify-center gap-1">
+                        <Download className="w-4 h-4" /> Voir mon espace étudiant
+                    </Link>
+                )}
+                <Link to="/" className="block mt-4 text-sm text-slate-400 hover:text-slate-600">← Retour à l'accueil</Link>
             </div>
         </div>
     );
@@ -210,45 +283,30 @@ function Footer() {
                 <div className="col-span-2">
                     <Link to="/" className="flex items-center space-x-2 mb-4">
                         <BookOpen className="h-6 w-6 text-primary" />
-                        <span className="font-heading font-bold text-xl tracking-tight">SafeTrack<span className="text-primary">.edu</span></span>
+                        <span className="font-heading font-bold text-xl tracking-tight">EdTech<span className="text-primary">.sn</span></span>
                     </Link>
-                    <p className="text-gray-400 text-sm max-w-sm">
-                        Empowering entrepreneurs across Africa through accessible, mobile-first education powered by Artificial Intelligence.
-                    </p>
+                    <p className="text-gray-400 text-sm max-w-sm">Former les entrepreneurs d'Afrique grâce à une éducation accessible, mobile-first et propulsée par l'IA.</p>
                 </div>
-                <div>
-                    <h4 className="font-bold mb-4 font-heading">Platform</h4>
+                <div><h4 className="font-bold mb-4 font-heading">Plateforme</h4>
                     <ul className="space-y-2 text-sm text-gray-400">
-                        <li><a href="#" className="hover:text-white transition-colors">Courses</a></li>
-                        <li><a href="#" className="hover:text-white transition-colors">AI Generator</a></li>
-                        <li><a href="#" className="hover:text-white transition-colors">Pricing</a></li>
+                        <li><a href={`https://wa.me/${WA_NUMBER}?text=INSCRIPTION`} className="hover:text-white transition">S'inscrire</a></li>
+                        <li><Link to="/student" className="hover:text-white transition">Mon espace</Link></li>
                     </ul>
                 </div>
-                <div>
-                    <h4 className="font-bold mb-4 font-heading">Company</h4>
+                <div><h4 className="font-bold mb-4 font-heading">Entreprise</h4>
                     <ul className="space-y-2 text-sm text-gray-400">
-                        <li><a href="#" className="hover:text-white transition-colors">About</a></li>
-                        <li><a href="#" className="hover:text-white transition-colors">Contact</a></li>
-                        <li><a href="#" className="hover:text-white transition-colors">Privacy Policy</a></li>
+                        <li><a href="#" className="hover:text-white transition">À propos</a></li>
+                        <li><a href="#" className="hover:text-white transition">Contact</a></li>
                     </ul>
                 </div>
             </div>
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-white/10 text-center text-sm text-gray-400">
-                &copy; {new Date().getFullYear()} SafeTrack. All rights reserved.
+            <div className="max-w-7xl mx-auto px-4 mt-12 pt-8 border-t border-white/10 text-center text-sm text-gray-400">
+                © {new Date().getFullYear()} EdTech.sn. Tous droits réservés.
             </div>
         </footer>
     );
 }
 
-function Home() {
-    return (
-        <div className="min-h-screen bg-white">
-            <Hero />
-            <Features />
-        </div>
-    );
-}
-
 function App() {
     return (
         <Router>
@@ -256,8 +314,10 @@ function App() {
                 <Navbar />
                 <main className="flex-grow">
                     <Routes>
-                        <Route path="/" element={<Home />} />
-                        <Route path="/login" element={<Login />} />
+                        <Route path="/" element={<><Hero /><Features /></>} />
+                        <Route path="/student" element={<StudentPortal />} />
+                        <Route path="/student/:phone" element={<StudentDashboard />} />
+                        <Route path="/payment/success" element={<PaymentSuccess />} />
                     </Routes>
                 </main>
                 <Footer />
@@ -265,5 +325,4 @@ function App() {
         </Router>
     );
 }
-
 export default App;

apps/whatsapp-worker/src/scheduler.ts

@@ -1,9 +1,9 @@
 import cron from 'node-cron';
 import { Queue } from 'bullmq';
 import { PrismaClient } from '@prisma/client';
+import Redis from 'ioredis';
 
 const prisma = new PrismaClient();
-import Redis from 'ioredis';
 
 const connection = process.env.REDIS_URL
     ? new Redis(process.env.REDIS_URL, { maxRetriesPerRequest: null })
@@ -19,31 +19,56 @@ const connection = process.env.REDIS_URL
 const whatsappQueue = new Queue('whatsapp-queue', { connection: connection as any });
 
 export function startDailyScheduler() {
-    // Runs at 08:00 AM every day
+    // Runs at 08:00 AM every day (Dakar time = UTC+0 in winter, so 8 UTC = 8 Dakar)
     cron.schedule('0 8 * * *', async () => {
-        console.log('[SCHEDULER] Running daily content check for active enrollments...');
+        console.log('[SCHEDULER] Running daily content check...');
 
         try {
             const activeEnrollments = await prisma.enrollment.findMany({
-                where: { status: 'ACTIVE' }
+                where: { status: 'ACTIVE' },
             });
 
             for (const enrollment of activeEnrollments) {
+                // ── Skip if exercise still PENDING (user hasn't responded yet) ───
+                const progress = await prisma.userProgress.findUnique({
+                    where: { userId_trackId: { userId: enrollment.userId, trackId: enrollment.trackId } }
+                });
+
+                if (progress?.exerciseStatus === 'PENDING') {
+                    console.log(`[SCHEDULER] Skip User ${enrollment.userId} — Day ${enrollment.currentDay} still PENDING`);
+                    continue;
+                }
+
                 const nextDay = enrollment.currentDay + 1;
 
-                // Queue the next day's content for sending
+                // ── Check the next day content exists ──────────────────────────
+                const nextDayContent = await prisma.trackDay.findFirst({
+                    where: { trackId: enrollment.trackId, dayNumber: nextDay }
+                });
+
+                if (!nextDayContent) {
+                    // No more content → mark enrollment COMPLETED
+                    console.log(`[SCHEDULER] No Day ${nextDay} for Track ${enrollment.trackId} — marking COMPLETED`);
+                    await prisma.enrollment.update({
+                        where: { id: enrollment.id },
+                        data: { status: 'COMPLETED', completedAt: new Date() }
+                    });
+                    continue;
+                }
+
+                // ── Queue the next lesson ─────────────────────────────────────
                 await whatsappQueue.add('send-content', {
                     userId: enrollment.userId,
                     trackId: enrollment.trackId,
                     dayNumber: nextDay
                 });
 
-                console.log(`[SCHEDULER] Queued Day ${nextDay} content for User ${enrollment.userId} (Track: ${enrollment.trackId})`);
+                console.log(`[SCHEDULER] Queued Day ${nextDay} for User ${enrollment.userId}`);
             }
         } catch (error) {
-            console.error('[SCHEDULER] Error running daily scheduler:', error);
+            console.error('[SCHEDULER] Error:', error);
         }
     });
 
-    console.log('Daily Content Scheduler initialized (cron schedule: 0 8 * * *).');
+    console.log('Daily Content Scheduler initialized (cron: 0 8 * * *).');
 }

packages/database/seed.ts

@@ -1,229 +1,113 @@
+/**
+ * Seed Script — Module 1 : Eco-Moto Business
+ * Inserts a realistic Track + 3 TrackDays for testing.
+ * Run: npx ts-node scripts/seed.ts
+ * Or: add SEED_DATA to whatsapp trigger (handled in whatsapp.ts)
+ */
 import { PrismaClient } from '@prisma/client';
-
 const prisma = new PrismaClient();
 
 async function main() {
-    // 1. Module 1: Comprendre Son Business (FR)
-    const comprendreBusinessFR = await prisma.track.create({
-        data: {
-            title: "Comprendre Son Business (FR)",
-            description: "Apprenez à définir, tester et vendre votre projet en 12 leçons.",
-            duration: 12,
-            language: "FR",
-            days: {
-                create: [
-                    {
-                        dayNumber: 1,
-                        exerciseType: "AUDIO",
-                        lessonText: "Aujourd’hui, on commence simple. Beaucoup de personnes disent : je fais le commerce. Mais ça ne veut rien dire. Dis-moi clairement : Tu aides QUI, à faire QUOI, et comment tu gagnes de l’argent. Exemple : Je vends du jus bissap aux étudiants devant l’université. Maintenant, c’est à toi. Dis ta phrase en 15 secondes.",
-                        exercisePrompt: "Envoie-moi un court message vocal (ou texte) avec ta phrase d'activité :"
-                    },
-                    {
-                        dayNumber: 2,
-                        exerciseType: "AUDIO",
-                        lessonText: "Le client n’achète pas ton produit. Il achète un résultat. Il n’achète pas du savon. Il achète la propreté. Va demander à 2 clients : Pourquoi tu achètes ça ? Écoute bien leurs mots.",
-                        exercisePrompt: "Envoie un audio résumant les 2 réponses de tes clients."
-                    },
-                    {
-                        dayNumber: 3,
-                        exerciseType: "BUTTON",
-                        lessonText: "Si tu vends à tout le monde, tu ne vends à personne. Choisis un seul client principal. Qui est le plus intéressé par ton produit ?",
-                        exercisePrompt: "Sélectionne ton client principal ci-dessous :",
-                        buttonsJson: [
-                            { id: "jeunes", title: "Jeunes" },
-                            { id: "femmes", title: "Femmes" },
-                            { id: "commercants", title: "Commerçants" }
-                        ]
-                    },
-                    {
-                        dayNumber: 4,
-                        exerciseType: "TEXT",
-                        lessonText: "Ton client a un problème. Quel est son plus grand problème ? Parle à 3 personnes aujourd’hui. Pose cette question. Écoute sans expliquer ton produit.",
-                        exercisePrompt: "Quel est le problème N°1 que tes clients t'ont partagé ?"
-                    },
-                    {
-                        dayNumber: 5,
-                        exerciseType: "BUTTON",
-                        lessonText: "À quel moment ton client a ce problème ?",
-                        exercisePrompt: "Choisis le moment d'apparition du problème :",
-                        buttonsJson: [
-                            { id: "matin_midi", title: "Matin ou Midi" },
-                            { id: "soir", title: "Le Soir" },
-                            { id: "tout_le_temps", title: "Tout le temps" }
-                        ]
-                    },
-                    {
-                        dayNumber: 6,
-                        exerciseType: "TEXT",
-                        lessonText: "Avant toi, il faisait comment ?",
-                        exercisePrompt: "Donne-moi 2 solutions que ton client utilisait avant de te connaître :"
-                    },
-                    {
-                        dayNumber: 7,
-                        exerciseType: "TEXT",
-                        lessonText: "Explique ta solution en mots simples. Pas compliqué.",
-                        exercisePrompt: "Décris-moi ton offre très simplement en une phrase :"
-                    },
-                    {
-                        dayNumber: 8,
-                        exerciseType: "BUTTON",
-                        lessonText: "Tu ne peux pas promettre tout. Choisis une seule force.",
-                        exercisePrompt: "Quelle est ta promesse principale ?",
-                        buttonsJson: [
-                            { id: "rapide", title: "Rapide" },
-                            { id: "moins_cher", title: "Moins cher" },
-                            { id: "fiable_proche", title: "Fiable / Proche" }
-                        ]
-                    },
-                    {
-                        dayNumber: 9,
-                        exerciseType: "TEXT",
-                        lessonText: "Parle à 5 personnes. Dis ta phrase. Combien disent OUI ?",
-                        exercisePrompt: "Combien t'ont dit OUI ? (Envoie juste un chiffre)"
-                    },
-                    {
-                        dayNumber: 10,
-                        exerciseType: "TEXT",
-                        lessonText: "Ton prix doit couvrir tes coûts. Note 2 dépenses importantes.",
-                        exercisePrompt: "Quelles sont tes 2 plus grosses dépenses pour ce projet ?"
-                    },
-                    {
-                        dayNumber: 11,
-                        exerciseType: "BUTTON",
-                        lessonText: "Pourquoi toi et pas un autre ?",
-                        exercisePrompt: "Quel est ton vrai avantage concurrentiel ?",
-                        buttonsJson: [
-                            { id: "qualite", title: "Qualité" },
-                            { id: "rapidite", title: "Rapidité" },
-                            { id: "confiance", title: "Confiance" }
-                        ]
-                    },
-                    {
-                        dayNumber: 12,
-                        exerciseType: "AUDIO",
-                        lessonText: "Maintenant tu es prêt. Dis en 30 secondes : Je suis... J’aide... Parce que... Je vends... À...",
-                        exercisePrompt: "C'est l'heure du test ! Envoie-moi un audio avec ton Mini Pitch de 30 secondes :"
-                    }
-                ]
-            }
+    console.log('🌱 Seeding database...');
+
+    // Upsert Track
+    const track = await prisma.track.upsert({
+        where: { id: 'seed-module-1-ecomoto' },
+        update: {},
+        create: {
+            id: 'seed-module-1-ecomoto',
+            title: 'Lancer son Business – Module 1',
+            description: 'Formation de 3 jours pour structurer son idée de business et rédiger son pitch.',
+            duration: 3,
+            language: 'FR',
+            isPremium: false,
         }
     });
 
-    // 2. Module 1: Comprendre Son Business (WOLOF)
-    const comprendreBusinessWO = await prisma.track.create({
-        data: {
-            title: "Comprendre Son Business (WOLOF)",
-            description: "Apprenez à définir, tester et vendre votre projet en 12 leçons.",
-            duration: 12,
-            language: "WOLOF",
-            days: {
-                create: [
-                    {
-                        dayNumber: 1,
-                        exerciseType: "AUDIO",
-                        lessonText: "Tey, danuy tàmbalee ak lu yomb. Nit ñu bari dañuy wax : dama def commerce. Waaye loolu amul solo. Wax ma leer : Yaay jàppalé KAN, mu def LAN, te naka nga amee xaalis. Misaal : Damaa jaay jus bissap ci taalibe yu université. Léegi sa waxtu la. Wax sa activité ci 15 seconde.",
-                        exercisePrompt: "Yónnee ma ab kàddu (audio) walla message bu gatt ngir wax sa mbir :"
-                    },
-                    {
-                        dayNumber: 2,
-                        exerciseType: "AUDIO",
-                        lessonText: "Kiliifa bi du jënd sa produit rek. Mu jënd ab résultat. Du jënd savon rek. Mu jënd set. Dem laaj 2 kiliifa : Lu tax nga jënd lii ? Déggal bu baax li ñuy wax.",
-                        exercisePrompt: "Yónnee ma audio ngir tënk ñaari tontu ya."
-                    },
-                    {
-                        dayNumber: 3,
-                        exerciseType: "BUTTON",
-                        lessonText: "Su nga jaay ci ñépp, doo jaay ci kenn. Tànnal benn kiliifa bu mag. Kan moo gën a soxla sa produit ?",
-                        exercisePrompt: "Tànnal sa kiliifa bu mag ci suuf :",
-                        buttonsJson: [
-                            { id: "ndaw_nyi", title: "Ndaw ñi / Jeunes" },
-                            { id: "jigeen_nyi", title: "Jigeen ñi / Femmes" },
-                            { id: "jaaykat_yi", title: "Jaaykat yi / Comms" }
-                        ]
-                    },
-                    {
-                        dayNumber: 4,
-                        exerciseType: "TEXT",
-                        lessonText: "Sa kiliifa am na jafe jafe. Lan mooy jafe jafe bu gën a rëy ? Dem waxtaan ak 3 nit. Laaj leen. Bul def publicité.",
-                        exercisePrompt: "Lan mooy jafe jafe bu gën a mag bi sa kiliifa yi am ?"
-                    },
-                    {
-                        dayNumber: 5,
-                        exerciseType: "BUTTON",
-                        lessonText: "Kañ la jafe jafe bi di ñëw ?",
-                        exercisePrompt: "Tànnal jamono ji jafe jafe bi di faral di am :",
-                        buttonsJson: [
-                            { id: "suba_bëccëg", title: "Suba walla Bëccëg" },
-                            { id: "ngoon", title: "Ngoon / Guddi" },
-                            { id: "saa_su_ne", title: "Saa su nekk" }
-                        ]
-                    },
-                    {
-                        dayNumber: 6,
-                        exerciseType: "TEXT",
-                        lessonText: "Balaa yaw, naka la daan def ?",
-                        exercisePrompt: "Wax ma ñaari pexe yi kiliifa bi daan jëfandikoo balaa xam sa produit :"
-                    },
-                    {
-                        dayNumber: 7,
-                        exerciseType: "TEXT",
-                        lessonText: "Wax sa solution ci wax yu yomb.",
-                        exercisePrompt: "Tënkal sa solution ci benn phrase bu yomb :"
-                    },
-                    {
-                        dayNumber: 8,
-                        exerciseType: "BUTTON",
-                        lessonText: "Bul promettre lépp. Tànnal benn doole.",
-                        exercisePrompt: "Lan mooy sa dige bu mag ?",
-                        buttonsJson: [
-                            { id: "gaaw", title: "Dafa gaaw" },
-                            { id: "yomb", title: "Dafa yomb / Prix" },
-                            { id: "woor", title: "Dafa woor" }
-                        ]
-                    },
-                    {
-                        dayNumber: 9,
-                        exerciseType: "TEXT",
-                        lessonText: "Dem waxtaan ak 5 nit. Ñaata ñu wax WAAN ?",
-                        exercisePrompt: "Ñaata nit ñoo wax WAAN ? (Bind ma chiffre bi rek)"
-                    },
-                    {
-                        dayNumber: 10,
-                        exerciseType: "TEXT",
-                        lessonText: "Sa priix war na japp sa dépense. Bind ñaari dépense.",
-                        exercisePrompt: "Bind ma ñaari dépense yu gën a rëy ci sa mbir :"
-                    },
-                    {
-                        dayNumber: 11,
-                        exerciseType: "BUTTON",
-                        lessonText: "Lu tax yaw te du keneen ?",
-                        exercisePrompt: "Lan nga gën a mën ci ñeneen ñi ?",
-                        buttonsJson: [
-                            { id: "baax", title: "Dafa baax" },
-                            { id: "gaaw", title: "Dafa gaaw" },
-                            { id: "koolute", title: "Kooluté / Confiance" }
-                        ]
-                    },
-                    {
-                        dayNumber: 12,
-                        exerciseType: "AUDIO",
-                        lessonText: "Léegi nga hazır. Wax ci 30 seconde : Man ma... Damaa jàppalé... Ndax... Damaa jaay... Ci... Yónnee sa audio.",
-                        exercisePrompt: "Yónnee ma sa Pitch bu gatt ci 30 seconde :"
-                    }
-                ]
-            }
+    console.log(`✅ Track: ${track.title}`);
+
+    const days = [
+        {
+            dayNumber: 1,
+            title: 'Jour 1 – Ton idée business',
+            lessonText: `Bienvenue dans ta formation ! 🎉
+
+Aujourd'hui, on parle de TON idée.
+
+Une bonne idée business répond à un problème réel que les gens autour de toi ont vraiment.
+
+👉 EXEMPLE : La réparation de motos à domicile. Le problème ? Les gens perdent du temps à aller chez le mécanicien. La solution ? Le mécanicien vient à eux.
+
+Pour TON business, réponds à ces 3 questions :
+1️⃣ Quel problème tu résous ?
+2️⃣ Pour qui ? (femmes, jeunes, commerçants...)
+3️⃣ Pourquoi toi et pas un autre ?`,
+            exerciseType: 'TEXT' as const,
+            exercisePrompt: '📝 Décris ton idée business en 2-3 phrases. Quel problème tu résous ? Pour qui ?',
+            validationKeyword: null,
+        },
+        {
+            dayNumber: 2,
+            title: 'Jour 2 – Tes clients cibles',
+            lessonText: `Félicitations pour hier ! 🌟
+
+Aujourd'hui : TES CLIENTS.
+
+Beaucoup d'entrepreneurs échouent parce qu'ils veulent vendre à "tout le monde". ❌
+
+La règle d'or : commence par un groupe précis.
+
+👤 EXEMPLE Eco-Moto :
+• Qui ? Artisans et commerçants de Dakar
+• Âge ? 25-45 ans
+• Problème spécifique ? Leur moto tombe en panne et ils perdent des clients
+
+Plus tu connais ton client, plus tu peux lui parler directement.`,
+            exerciseType: 'TEXT' as const,
+            exercisePrompt: '📝 Décris ton client cible idéal : Qui est-il ? Quel âge ? Où vit-il ? Quel est son problème principal ?',
+            validationKeyword: null,
+        },
+        {
+            dayNumber: 3,
+            title: 'Jour 3 – Ton pitch en 1 minute',
+            lessonText: `Tu es presque un entrepreneur ! 🚀
+
+Aujourd'hui : TON PITCH.
+
+Un pitch c'est une présentation rapide de ton business. En 60 secondes, tu dois convaincre quelqu'un d'investir ou d'acheter.
+
+📣 STRUCTURE :
+1. Le problème (10 sec)
+2. Ta solution (10 sec)
+3. Tes clients (10 sec)
+4. Pourquoi toi (10 sec)
+5. Ce que tu demandes (20 sec)
+
+EXEMPLE :
+"En Afrique, 60% des motos tombent en panne sans accès rapide à un mécanicien. Eco-Moto envoie un mécanicien qualifié chez vous en moins de 30 minutes. On cible les artisans et commerçants de Dakar qui dépendent de leur moto. On a déjà 50 clients satisfaits. On cherche 500 000 XOF pour acheter nos premiers équipements."`,
+            exerciseType: 'TEXT' as const,
+            exercisePrompt: '🎤 Écris ton pitch en utilisant la structure ci-dessus. Sois précis et concis !',
+            validationKeyword: null,
         }
-    });
+    ];
+
+    for (const day of days) {
+        const existing = await prisma.trackDay.findFirst({
+            where: { trackId: track.id, dayNumber: day.dayNumber }
+        });
+        if (existing) {
+            await prisma.trackDay.update({ where: { id: existing.id }, data: day });
+            console.log(`✅ Updated Day ${day.dayNumber}: ${day.title}`);
+        } else {
+            await prisma.trackDay.create({ data: { ...day, trackId: track.id } });
+            console.log(`✅ Created Day ${day.dayNumber}: ${day.title}`);
+        }
+    }
 
-    console.log({ comprendreBusinessFR, comprendreBusinessWO });
+    console.log('\n🎉 Seed complete! Track ID:', track.id);
+    console.log('Send INSCRIPTION + FORMATION on WhatsApp to test.');
 }
 
 main()
-    .then(async () => {
-        await prisma.$disconnect()
-    })
-    .catch(async (e) => {
-        console.error(e)
-        await prisma.$disconnect()
-        process.exit(1)
-    })
+    .catch(console.error)
+    .finally(() => prisma.$disconnect());