+ ); +} + +export { Skeleton }; diff --git a/frontend/src/features/auth/AvatarSelector.tsx b/frontend/src/features/auth/AvatarSelector.tsx new file mode 100644 index 0000000..133eb0e --- /dev/null +++ b/frontend/src/features/auth/AvatarSelector.tsx @@ -0,0 +1,46 @@ +import { Check } from 'lucide-react'; + +const AVATAR_SEEDS = [ + 'Felix', 'Aneka', 'Zoe', 'Marc', 'Trouble', 'Coco', 'Sasha', 'Jack' +]; + +interface AvatarSelectorProps { + selectedAvatar: string; + onSelect: (url: string) => void; +} + +export function AvatarSelector({ selectedAvatar, onSelect }: AvatarSelectorProps) { + // We use DiceBear "Fun Emoji" style for kid-friendly avatars + const getAvatarUrl = (seed: string) => `https://api.dicebear.com/7.x/fun-emoji/svg?seed=${seed}`; + + return ( +

+ {AVATAR_SEEDS.map((seed) => { + const url = getAvatarUrl(seed); + const isSelected = selectedAvatar === url; + + return ( + + ); + })} +

+ ); +} diff --git a/frontend/src/features/auth/LoginPage.tsx b/frontend/src/features/auth/LoginPage.tsx new file mode 100644 index 0000000..28699ed --- /dev/null +++ b/frontend/src/features/auth/LoginPage.tsx @@ -0,0 +1,164 @@ +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { z } from 'zod'; +import { useAuth } from '../../stores/useAuth'; +import { useNavigate, Link } from 'react-router-dom'; +import { useState } from 'react'; +import { Eye, EyeOff, Loader2, Lock, Mail } from 'lucide-react'; + +const loginSchema = z.object({ + identifier: z.string().min(1, "L'identifiant ou l'email est requis"), + password: z.string().min(4, "Le mot de passe/PIN doit contenir au moins 4 chiffres"), +}); + +type LoginForm = z.infer; + +export const LoginPage = () => { + const { login } = useAuth(); + const navigate = useNavigate(); + const [isParentMode, setIsParentMode] = useState(true); + const [globalError, setGlobalError] = useState(null); + const [showPassword, setShowPassword] = useState(false); + + const { register, handleSubmit, formState: { errors, isSubmitting }, reset } = useForm({ + resolver: zodResolver(loginSchema) + }); + + const toggleMode = (mode: boolean) => { + setIsParentMode(mode); + setGlobalError(null); + reset(); + }; + + const onSubmit = async (data: LoginForm) => { + try { + setGlobalError(null); + const loginData = isParentMode + ? { email: data.identifier, password: data.password } + : { username: data.identifier, password: data.password }; + + await login(loginData); + navigate('/'); + } catch (err) { + setGlobalError("Identifiants invalides ou erreur de connexion"); + } + }; + + return ( +

+ +

+ Reviflow +

+ Heureux de vous revoir ! Connectez-vous. +

+ +

+ {/* Role Toggle */} +

+ + +

+ + + {globalError && ( +

+ ⚠️ {globalError} +

+ )} + +

+ + {isParentMode ? 'Adresse Email' : 'Identifiant'} + +

+ {isParentMode ? : } +

+ +

+ {errors.identifier &&

{errors.identifier.message}

} +

+ +

+ + {isParentMode ? 'Mot de passe' : 'Code PIN'} + +

+ +

+ + +

+ {errors.password &&

{errors.password.message}

} +

+ +

+ + +

+ Pas encore de compte ?{' '} + + Créer un accès parent + +

+ +

+ ); +}; diff --git a/frontend/src/features/auth/ParentalGate.tsx b/frontend/src/features/auth/ParentalGate.tsx new file mode 100644 index 0000000..ce05d0e --- /dev/null +++ b/frontend/src/features/auth/ParentalGate.tsx @@ -0,0 +1,134 @@ +import React, { useState } from 'react'; +import { motion } from 'framer-motion'; + +import { useAuth } from '../../stores/useAuth'; +import { Lock, ShieldCheck, AlertCircle } from 'lucide-react'; + +interface ParentalGateProps { + onSuccess: () => void; + onCancel: () => void; +} + +export const ParentalGate: React.FC = ({ onSuccess, onCancel }) => { + const { user, verifyParentalGate } = useAuth(); + const [pin, setPin] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(null); + const [isSubmitting, setIsSubmitting] = useState(false); + const [mode, setMode] = useState<'pin' | 'password'>(user?.has_parental_pin ? 'pin' : 'password'); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(null); + setIsSubmitting(true); + + try { + await verifyParentalGate(mode === 'pin' ? { pin } : { password }); + onSuccess(); + } catch (err: any) { + setError(err.message || 'Vérification échouée'); + } finally { + setIsSubmitting(false); + } + }; + + return ( +

+ +

+ Accès Parent Requis +

+ Veuillez entrer votre {mode === 'pin' ? 'code PIN' : 'mot de passe'} pour accéder aux paramètres. +

+ +

+ {mode === 'pin' ? ( +

+ setPin(e.target.value)} + className="w-32 text-center text-3xl tracking-[0.5em] font-mono border-b-2 border-indigo-200 focus:border-indigo-600 outline-none bg-transparent py-2 transition-colors uppercase" + placeholder="••••" + autoFocus + disabled={isSubmitting} + /> +

+ ) : ( +

+ setPassword(e.target.value)} + className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-gray-900" + placeholder="Mot de passe du compte parent" + autoFocus + disabled={isSubmitting} + /> +

+ )} + + {error && ( +

+ + {error} +

+ )} + +

+ + + + Retour + + +

+ + {user?.has_parental_pin && ( +

+ +

+ )} +

+ ); +}; diff --git a/frontend/src/features/auth/ProfileSelectionPage.tsx b/frontend/src/features/auth/ProfileSelectionPage.tsx new file mode 100644 index 0000000..69c9a6a --- /dev/null +++ b/frontend/src/features/auth/ProfileSelectionPage.tsx @@ -0,0 +1,198 @@ +import React, { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { useAuth } from '../../stores/useAuth'; +import { UserPlus, Sparkles, LogOut, X } from 'lucide-react'; +import { AvatarSelector } from './AvatarSelector'; +import { Skeleton } from '../../components/ui/Skeleton'; + +export const ProfileSelectionPage: React.FC = () => { + const { user, learnerProfiles, fetchProfiles, selectProfile, createChildAccount, logout } = useAuth(); + const navigate = useNavigate(); + const [isCreating, setIsCreating] = React.useState(false); + const [newProfileName, setNewProfileName] = React.useState(''); + const [newProfilePin, setNewProfilePin] = React.useState('1234'); + const [newProfileAvatar, setNewProfileAvatar] = React.useState('https://api.dicebear.com/7.x/fun-emoji/svg?seed=Felix'); + + useEffect(() => { + fetchProfiles(); + }, []); + + const handleCreate = async () => { + if (!newProfileName.trim()) return; + try { + await createChildAccount({ + username: newProfileName.toLowerCase().replace(/\s/g, ''), + password: newProfilePin, + first_name: newProfileName, + avatar_url: newProfileAvatar + }); + setIsCreating(false); + setNewProfileName(''); + } catch (err) { + alert("Erreur lors de la création"); + } + }; + + const handleSelect = async (id: string) => { + try { + await selectProfile(id); + navigate('/dashboard'); + } catch (err) { + console.error("Selection failed", err); + } + }; + + return ( +

+ {/* Background Decorations */} +

+ +

+ + Reviflow +

+ Quel enfant va réviser aujourd'hui ? +

+ Bonjour {user?.first_name || 'Parent'}. Sélectionnez le profil de votre enfant pour commencer la session. +

+ +

+ {learnerProfiles.length === 0 ? ( + // Skeleton Loading State + Array.from({ length: 4 }).map((_, i) => ( +

+ + +

+ )) + ) : ( + learnerProfiles.map((profile, idx) => ( + + )) + )} + + {/* Add Profile Placeholder */} + +

+ +

+ + {/* Create Profile Modal */} + {isCreating && ( +

+ + +

+ + Nouveau Profil +

+ +

+ Prénom + setNewProfileName(e.target.value)} + className="w-full px-4 py-3 rounded-xl border-2 border-gray-100 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all font-semibold outline-none" + placeholder="Ex: Léo" + autoFocus + /> +

+ +

+ Code PIN (4 chiffres) + setNewProfilePin(e.target.value.replace(/\D/g, ''))} + className="w-full px-4 py-3 rounded-xl border-2 border-gray-100 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all font-mono text-center text-2xl tracking-[0.5em] font-bold outline-none" + placeholder="1234" + /> +

+ +

+ Avatar +

+ +

+ + +

+ )} +

+ ); +}; diff --git a/frontend/src/features/auth/RegisterPage.tsx b/frontend/src/features/auth/RegisterPage.tsx new file mode 100644 index 0000000..274c771 --- /dev/null +++ b/frontend/src/features/auth/RegisterPage.tsx @@ -0,0 +1,135 @@ +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { z } from 'zod'; +import { useAuth } from '../../stores/useAuth'; +import { useNavigate, Link } from 'react-router-dom'; +import { useState } from 'react'; + +const registerSchema = z.object({ + email: z.string().email("Adresse email invalide"), + password: z.string().min(6, "Le mot de passe doit contenir au moins 6 caractères"), + confirmPassword: z.string().min(6, "Le mot de passe doit contenir au moins 6 caractères"), +}).refine((data) => data.password === data.confirmPassword, { + message: "Les mots de passe ne correspondent pas", + path: ["confirmPassword"], +}); + +type RegisterForm = z.infer; + +export const RegisterPage = () => { + const { register: registerUser, login } = useAuth(); + const navigate = useNavigate(); + const [globalError, setGlobalError] = useState(null); + const [success, setSuccess] = useState(false); + + const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({ + resolver: zodResolver(registerSchema) + }); + + const onSubmit = async (data: RegisterForm) => { + try { + setGlobalError(null); + await registerUser({ email: data.email, password: data.password }); + setSuccess(true); + // Auto-login after successful registration + await login({ email: data.email, password: data.password }); + navigate('/'); + } catch (err: any) { + const detail = err.response?.data?.detail; + if (Array.isArray(detail)) { + setGlobalError(detail.map((e: any) => `${e.loc.join('.')}: ${e.msg}`).join(', ')); + } else { + setGlobalError(detail || "Échec de l'inscription. Cet email est peut-être déjà utilisé."); + } + } + }; + + return ( +

+ Créer un compte +

+ Ou{' '} + + connectez-vous à votre compte existant + +

+ +

+ {globalError && ( +

+ ⚠️ {globalError} +

+ )} + {success && ( +

+ ✅ Compte créé avec succès ! Connexion en cours... +

+ )} + +

+ + Adresse Email + + + {errors.email &&

{errors.email.message}

} +

+ +

+ + Mot de passe + + + {errors.password &&

{errors.password.message}

} +

+ +

+ + Confirmer le mot de passe + + + {errors.confirmPassword &&

{errors.confirmPassword.message}

} +

+ +

+ ); +}; diff --git a/frontend/src/features/dashboard/ActivityTimeline.tsx b/frontend/src/features/dashboard/ActivityTimeline.tsx new file mode 100644 index 0000000..9d9ffc7 --- /dev/null +++ b/frontend/src/features/dashboard/ActivityTimeline.tsx @@ -0,0 +1,157 @@ +import { useEffect, useState } from 'react'; +import { api } from '../../lib/api'; +import { Clock, BookOpen, CheckCircle, Calendar } from 'lucide-react'; +import { Skeleton } from '../../components/ui/Skeleton'; + +interface ActivityItem { + type: 'REVISION' | 'QUIZ'; + id: string; + revision_id?: string; + topic: string; + created_at: string; + minutes: number; + details: string; +} + +interface DailyActivity { + date: string; // YYYY-MM-DD + total_minutes: number; + items: ActivityItem[]; +} + +interface ActivityStats { + summary: { + today_minutes: number; + week_minutes: number; + total_quizzes: number; + total_revisions: number; + }; + history: DailyActivity[]; +} + +interface ActivityTimelineProps { + learnerId?: string; +} + +export function ActivityTimeline({ learnerId }: ActivityTimelineProps) { + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + setLoading(true); + const url = learnerId + ? `/quiz/stats/activity?learner_id=${learnerId}` + : `/quiz/stats/activity`; + + api.get(url) + .then(res => { + setData(res.data); + setLoading(false); + }) + .catch(err => { + console.error("Failed to fetch activity stats", err); + setLoading(false); + }); + }, [learnerId]); + + if (loading) { + return ( +

+ + +

+ +

+ ); + } + + if (!data || !data.summary) return

Aucune donnée disponible

; + + return ( +

+ {/* Summary Cards */} +

Aujourd'hui

{data.summary.today_minutes} min

Cette semaine

{data.summary.week_minutes} min

Total Quiz

{data.summary.total_quizzes}

Total Révisions

{data.summary.total_revisions}

+ + {/* Timeline */} +

+ + Historique +

+ +

+ {data.history.map((day) => ( +

+ {/* Date Marker */} +

+ +

+ {new Date(day.date).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })} +

{day.total_minutes} min d'activité

+ +

+ {day.items.map((item, idx) => ( +

{ + if (item.type === 'REVISION') { + // Assuming we have useNavigate or just window.location for now, + // but let's use a simple anchor or navigate prop if passed, + // defaulting to direct window location as fail safe or refactor to useLink + window.location.href = `/revision/${item.id}`; + } + }} + className={`bg-white border border-slate-200 p-4 rounded-lg shadow-sm flex items-center gap-4 hover:border-slate-300 transition-colors ${item.type === 'REVISION' ? 'cursor-pointer hover:bg-slate-50' : ''}`} + > +

+ {item.type === 'QUIZ' ? : } +

{item.topic}

{item.details}

{new Date(item.created_at).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}

+ {item.minutes} min +

+ ))} +

+ ))} + + {data.history.length === 0 && ( +

+ Aucune activité récente. +

+ )} +

+ ); +} diff --git a/frontend/src/features/dashboard/GamificationWidget.tsx b/frontend/src/features/dashboard/GamificationWidget.tsx new file mode 100644 index 0000000..59b0d27 --- /dev/null +++ b/frontend/src/features/dashboard/GamificationWidget.tsx @@ -0,0 +1,70 @@ +import { useAuth } from '../../stores/useAuth'; +import { Trophy, Star, TrendingUp } from 'lucide-react'; + +export function GamificationWidget() { + const { activeLearner } = useAuth(); + + if (!activeLearner) return null; + + const level = activeLearner.level || 1; + const currentXP = activeLearner.xp || 0; + + // Formula inverse: XP = 50 * (Level-1)^2 + // But easier: Calculate bounds for current level to show progress bar + // Level N starts at: 50 * (N-1)^2 + // Level N+1 starts at: 50 * N^2 + const currentLevelStartXP = 50 * Math.pow(level - 1, 2); + const nextLevelStartXP = 50 * Math.pow(level, 2); + const xpNeededForLevel = nextLevelStartXP - currentLevelStartXP; + const xpProgressInLevel = currentXP - currentLevelStartXP; + + // Calculate percentage + const progressPercent = Math.min(100, Math.max(0, (xpProgressInLevel / xpNeededForLevel) * 100)); + + // Level Titles (Flavor text) + const getLevelTitle = (lvl: number) => { + if (lvl >= 50) return "Légende Vivante"; + if (lvl >= 30) return "Grand Maître"; + if (lvl >= 20) return "Érudit"; + if (lvl >= 10) return "Explorateur"; + if (lvl >= 5) return "Apprenti"; + return "Novice"; + }; + + return ( +

+ {/* Background Decorations */} +

+ +

Niveau {level}

{getLevelTitle(level)}

+ +

+ {currentXP} XP Totaux + Prochain niveau: {Math.round(nextLevelStartXP - currentXP)} XP +

+ + {/* Progress Bar Container */} +

+ {/* Active Progress */} +

+ {/* Shimmer Effect */} +

+ ); +} diff --git a/frontend/src/features/dashboard/HistoryWidget.tsx b/frontend/src/features/dashboard/HistoryWidget.tsx new file mode 100644 index 0000000..37a0161 --- /dev/null +++ b/frontend/src/features/dashboard/HistoryWidget.tsx @@ -0,0 +1,111 @@ +import { useEffect, useState } from 'react'; +import { Link } from 'react-router-dom'; +import { api } from '../../lib/api'; +import { useAuth } from '../../stores/useAuth'; +import { Skeleton } from '../../components/ui/Skeleton'; + +interface Score { + id: string; + topic: string; + score: number; + total_questions: number; + created_at: string; + revision_id?: string; +} + +export function HistoryWidget() { + const [history, setHistory] = useState([]); + const [loading, setLoading] = useState(true); + + const { activeLearner } = useAuth(); + + useEffect(() => { + const fetchHistory = async () => { + try { + const params = activeLearner ? { learner_id: activeLearner.id } : {}; + const response = await api.get('/quiz/history', { params }); + setHistory(response.data); + } catch (error) { + console.error("Failed to load history", error); + } finally { + setLoading(false); + } + }; + + fetchHistory(); + }, [activeLearner]); + + if (loading) { + return ( +

+ + +

+ {[1, 2, 3].map((i) => ( +

+ + +

+ +

+ ))} +

+ ); + } + + if (history.length === 0) { + return ( +

📚

Aucune révision pour le moment

Scannez un cours pour commencer à apprendre !

+ ); + } + + return ( +

Révisions Récentes

+ Total: {history.length} +

+
+
+
{item.topic}
+
+ + {new Date(item.created_at).toLocaleDateString()} +
+
+
+ {item.revision_id && ( + + Revoir + + )} +
= 0.8 ? 'border-emerald-100 text-emerald-600 bg-emerald-50 shadow-lg shadow-emerald-100/50' : + (item.score / item.total_questions) >= 0.5 ? 'border-amber-100 text-amber-600 bg-amber-50 shadow-lg shadow-amber-100/50' : + 'border-red-100 text-red-600 bg-red-50 shadow-lg shadow-red-100/50' + }`}> + {item.score}/{item.total_questions} +
+
+
+

+ ); +} diff --git a/frontend/src/features/dashboard/MasteryWidget.tsx b/frontend/src/features/dashboard/MasteryWidget.tsx new file mode 100644 index 0000000..afb83be --- /dev/null +++ b/frontend/src/features/dashboard/MasteryWidget.tsx @@ -0,0 +1,156 @@ +import { useEffect, useState } from 'react'; +import { useAuth } from '../../stores/useAuth'; +import { api } from '../../lib/api'; +import { Clock } from 'lucide-react'; +import { Skeleton } from '../../components/ui/Skeleton'; + +interface MasteryItem { + topic: string; + mastery_score: number; + quizzes_count: number; + pending_errors: number; + status: 'LEARNING' | 'REVIEWING' | 'MASTERED'; + last_activity: string; +} + +interface MasteryWidgetProps { + learnerId?: string; +} + +export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) { + const { activeLearner } = useAuth(); + const targetId = learnerId || activeLearner?.id; + const [stats, setStats] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (!targetId) return; + + setLoading(true); + api.get(`/quiz/stats/mastery?learner_id=${targetId}`) + .then(res => { + setStats(res.data); + setLoading(false); + }) + .catch(err => { + console.error(err); + setLoading(false); + }); + }, [targetId]); + + if (!targetId) return null; + + if (loading) { + return ( +

+ {/* Background Decorations */} +

+ +

+ {[1, 2, 3].map((i) => ( +

+ + +

+ +

+ ))} +

+ ); + } + + if (stats.length === 0) { + return ( +

+ 📊 +

Pas encore de résultats

Termine un quiz pour voir tes statistiques !

+ ); + } + + return ( +

+ {/* Background Decorations */} +

+ +

Maîtrise des Sujets 🧠

+ +

+ {stats.map((item, index) => ( +

{item.topic}

+ {item.last_activity ? new Date(item.last_activity).toLocaleDateString() : '—'} + • + {item.quizzes_count || 0} quiz +

+ +

+ {/* Status Label */} + + + {/* Circular Progress (Minimal CSS) */} +

+ + {Math.round(item.mastery_score || 0)}% +

+ ))} +

+ + +

+ ); +} diff --git a/frontend/src/features/dashboard/RecentRevisionsWidget.tsx b/frontend/src/features/dashboard/RecentRevisionsWidget.tsx new file mode 100644 index 0000000..c45af89 --- /dev/null +++ b/frontend/src/features/dashboard/RecentRevisionsWidget.tsx @@ -0,0 +1,534 @@ + +import { useNavigate } from 'react-router-dom'; +import { Play, BookOpen, ArrowRight, Book, AlertTriangle, X, Trash2, Sparkles, Lightbulb, Brain } from 'lucide-react'; +import { useAuth } from '../../stores/useAuth'; +import { api } from '../../lib/api'; +import { useEffect, useState } from 'react'; +import { Skeleton } from '../../components/ui/Skeleton'; +import { AnimatePresence, motion } from 'framer-motion'; + +interface RevisionItem { + id: string; + topic: string; + subject?: string; + created_at: string; + status: string; + current_series: number; + total_series: number; + pending_errors?: number; +} + +export const RecentRevisionsWidget = () => { + const { activeLearner } = useAuth(); + const navigate = useNavigate(); + const [revisions, setRevisions] = useState([]); + const [loading, setLoading] = useState(true); + const [remediationLoadingId, setRemediationLoadingId] = useState(null); + + // Restart Modal State + const [restartModal, setRestartModal] = useState<{ isOpen: boolean, revisionId: string | null }>({ + isOpen: false, + revisionId: null + }); + const [isRestarting, setIsRestarting] = useState(false); + + // Delete Modal State + const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean, revisionId: string | null }>({ + isOpen: false, + revisionId: null + }); + const [isDeleting, setIsDeleting] = useState(false); + + // Summary Modal State + const [summaryModal, setSummaryModal] = useState<{ + isOpen: boolean, + data: any | null, + loading: boolean + }>({ + isOpen: false, + data: null, + loading: false + }); + + useEffect(() => { + if (!activeLearner) return; + + api.get(`/quiz/stats/activity?learner_id=${activeLearner.id}`) + .then(res => { + const allRevisions = res.data.history + .flatMap((day: any) => day.items) + .filter((item: any) => item.type === 'REVISION'); + setRevisions(allRevisions); + setLoading(false); + }) + .catch(() => setLoading(false)); + }, [activeLearner]); + + const getSubjectStyle = (subject?: string) => { + if (subject === 'Mathématiques') return { color: 'text-blue-500', bg: 'bg-blue-50', icon: }; + if (subject === 'Histoire') return { color: 'text-amber-600', bg: 'bg-amber-50', icon: }; + return { color: 'text-indigo-500', bg: 'bg-indigo-50', icon: }; + }; + + const handleRemediation = async (e: React.MouseEvent, revisionId: string) => { + e.stopPropagation(); + if (!activeLearner) return; + setRemediationLoadingId(revisionId); + try { + const res = await api.post('/quiz/remediation/generate', { + learner_id: activeLearner.id, + revision_id: revisionId + }); + const quizData = res.data; + navigate('/quiz', { state: { quizData: quizData, textContent: "REMEDIATION_MODE", revisionId: revisionId } }); + } catch (e) { + console.error(e); + alert("Impossible de générer la révision des erreurs."); + } finally { + setRemediationLoadingId(null); + } + }; + + const confirmRestart = async () => { + if (!restartModal.revisionId) return; + setIsRestarting(true); + try { + const res = await api.post('/quiz/reset', { revision_id: restartModal.revisionId }); + navigate('/quiz', { state: { quizData: res.data, revisionId: res.data.revision_id } }); + } catch (err) { + alert("Erreur lors du redémarrage."); + setIsRestarting(false); + setRestartModal({ isOpen: false, revisionId: null }); + } + }; + + const confirmDelete = async () => { + if (!deleteModal.revisionId) return; + setIsDeleting(true); + try { + await api.delete(`/quiz/revision/${deleteModal.revisionId}`); + // Remove from UI + setRevisions(prev => prev.filter(r => r.id !== deleteModal.revisionId)); + setDeleteModal({ isOpen: false, revisionId: null }); + } catch (err) { + alert("Erreur lors de la suppression."); + } finally { + setIsDeleting(false); + } + }; + + const openSummary = async (e: React.MouseEvent, revisionId: string) => { + e.stopPropagation(); + setSummaryModal(prev => ({ ...prev, isOpen: true, loading: true })); + try { + const res = await api.get(`/quiz/review/${revisionId}`); + setSummaryModal({ isOpen: true, data: res.data, loading: false }); + } catch (err) { + console.error(err); + setSummaryModal({ isOpen: false, data: null, loading: false }); + } + }; + + if (loading) return ; + if (revisions.length === 0) return null; + + return ( + <> +

+ {/* Background Decorations */} +

+ +

+ Mes Cours +

+ +

+ {revisions.slice(0, 4).map(rev => { + const style = getSubjectStyle(rev.subject); + return ( + navigate(`/play/${rev.id}`)} + > + {/* Delete Button - Subtle top right */} + { + e.stopPropagation(); + setDeleteModal({ isOpen: true, revisionId: rev.id }); + }} + className="absolute top-4 right-4 p-2 text-slate-200 hover:text-red-500 hover:bg-red-50 transition-all rounded-xl z-20" + title="Supprimer" + > + + + + {/* Top Section: Icon + Title Group */} +

+ openSummary(e, rev.id)} + className="relative shrink-0 cursor-help" + title="Voir le résumé" + > +

{style.icon}

+ {rev.status === 'COMPLETED' && ( +

+ ✅ +

+ )} + + +

+ + {rev.subject || 'Général'} + +

+ {rev.topic} +

+ + {/* Bottom Section: Progress + Primary Actions */} +

+ Ajouté le {new Date(rev.created_at).toLocaleDateString()} +

+ Progression: {rev.current_series}/{rev.total_series} QUIZZ +

+ +

+ {rev.pending_errors && rev.pending_errors > 0 ? ( + handleRemediation(e, rev.id)} + className="h-14 px-5 bg-amber-50 text-amber-700 border-2 border-amber-100 rounded-2xl flex items-center gap-3 shadow-sm hover:bg-amber-100 transition-colors" + > + {remediationLoadingId === rev.id ? ( + + ) : ( + + Corriger + {rev.pending_errors} + + )} + + ) : null} + + {rev.status === 'COMPLETED' ? ( + { + e.stopPropagation(); + setRestartModal({ isOpen: true, revisionId: rev.id }); + }} + className="w-14 h-14 rounded-2xl bg-slate-50 border-2 border-slate-100 flex items-center justify-center text-slate-400 hover:bg-green-500 hover:text-white hover:border-transparent transition-all shadow-sm group/btn" + title="Recommencer" + > + 🔄 + + ) : ( + + + + )} +

+ + ); + })} +

+ navigate('/history')} + className="w-full mt-6 py-4 px-6 bg-white border-2 border-slate-100 text-indigo-600 rounded-2xl font-black text-sm flex items-center justify-center gap-3 shadow-sm hover:border-indigo-200 hover:bg-indigo-50/30 transition-all active:bg-indigo-50" + > + Tout voir + + +

+ + {/* Restart Confirmation Modal */} + + {restartModal.isOpen && ( + setRestartModal({ isOpen: false, revisionId: null })} + > + e.stopPropagation()} + className="bg-white rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden" + > +

+ +

Recommencer le cours ?

+ Vous allez recommencer ce cours depuis le début. Votre progression actuelle (série en cours) sera réinitialisée. +

+ +

+ + +

+ + + )} + + + {/* Delete Confirmation Modal */} + + {deleteModal.isOpen && ( + setDeleteModal({ isOpen: false, revisionId: null })} + > + e.stopPropagation()} + className="bg-white rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden ring-4 ring-red-50" + > +

+ +

Supprimer ce cours ?

+ Cette action est irréversible. Toutes les données (progression, quiz, notes) seront effacées. +

+ +

+ + +

+ + + )} + + + {/* Summary Modal */} + + {summaryModal.isOpen && ( + setSummaryModal(prev => ({ ...prev, isOpen: false }))} + > + e.stopPropagation()} + className="bg-[#FDFCF8] rounded-[2.5rem] p-8 shadow-2xl max-w-2xl w-full my-auto relative border border-white/50" + > +

+ +

+ + {summaryModal.loading ? ( +

Chargement du résumé...

+ ) : summaryModal.data ? ( +

+ Résumé du cours +

+ {summaryModal.data.topic} +

+ +

+ {/* Synthesis Section (Magic Summary) */} + {summaryModal.data.synthesis && ( +

+ + Résumé Magique +

+ {summaryModal.data.synthesis} +

+ )} + + {/* Tips & Mnemonics Split Section */} + {summaryModal.data.study_tips && ( +

+ {(() => { + try { + const allTips: string[] = JSON.parse(summaryModal.data.study_tips); + if (!Array.isArray(allTips)) return null; + + const mnemonics = allTips.filter(tip => + tip.toLowerCase().includes('moyen') || + tip.toLowerCase().includes('mémo') || + tip.toLowerCase().includes('phrase') || + tip.length < 50 + ); + const regularTips = allTips.filter(tip => !mnemonics.includes(tip)); + + return ( + <> + {/* Regular Tips Column */} +

+ + Astuces +

+ {regularTips.length > 0 ? regularTips.map((tip, idx) => ( +

+ "{tip}" +

+ )) : ( +

Aucun conseil particulier.

+ )} +

+ + {/* Mnemonics Column */} +

+ + Mémos +

+ {mnemonics.length > 0 ? mnemonics.map((memo, idx) => ( +

+ {memo} +

+ )) : ( +

Pas de mémotechnique.

+ )} +

+ + ); + } catch (e) { return null; } + })()} +

+ )} +

+ +

+ ) : null} + + + )} + + + ); +}; diff --git a/frontend/src/features/dashboard/TimeWidget.tsx b/frontend/src/features/dashboard/TimeWidget.tsx new file mode 100644 index 0000000..2fae3d7 --- /dev/null +++ b/frontend/src/features/dashboard/TimeWidget.tsx @@ -0,0 +1,55 @@ +import { useState, useEffect } from 'react'; +import { Clock, Calendar } from 'lucide-react'; + +export function TimeWidget() { + const [date, setDate] = useState(new Date()); + + useEffect(() => { + const timer = setInterval(() => setDate(new Date()), 1000); + return () => clearInterval(timer); + }, []); + + // Format Date: "Lundi 30 Janvier" + const dateString = date.toLocaleDateString('fr-FR', { + weekday: 'long', + day: 'numeric', + month: 'long' + }); + + // Format Time: "14:05" + const timeString = date.toLocaleTimeString('fr-FR', { + hour: '2-digit', + minute: '2-digit' + }); + + return ( +

+ {/* Background Decorations */} +

+ +

+ + + {dateString} + +

+ +

+ {timeString} +

+ {/* Animated seconds indicator or simple colon blinking (optional, keeping clean for now) */} +

+ +

+ + + Temps Réel + +

+ ); +} diff --git a/frontend/src/features/dashboard/UsageWidget.tsx b/frontend/src/features/dashboard/UsageWidget.tsx new file mode 100644 index 0000000..3901395 --- /dev/null +++ b/frontend/src/features/dashboard/UsageWidget.tsx @@ -0,0 +1,41 @@ +import { useAuth } from '../../stores/useAuth'; + +export function UsageWidget() { + const { user } = useAuth(); + + // Safety check + if (!user) return null; + + const totalTokens = user.total_tokens_used || 0; + const totalCost = user.total_cost_usd || 0; + + return ( +

+ {/* Background Decorations */} +

+ +

Ma Consommation

Aperçu de l'utilisation de l'IA.

+ +

Tokens

+ {totalTokens.toLocaleString()} +

Coût

+ {totalCost.toFixed(4)} USD +

+ ); +} diff --git a/frontend/src/features/gamification/BadgeIcon.tsx b/frontend/src/features/gamification/BadgeIcon.tsx new file mode 100644 index 0000000..92a4363 --- /dev/null +++ b/frontend/src/features/gamification/BadgeIcon.tsx @@ -0,0 +1,72 @@ +import { type LucideIcon, Trophy, Flame, Star, Zap, Award, BookOpen, Clock } from 'lucide-react'; +import { motion } from 'framer-motion'; + +interface BadgeIconProps { + code: string; + size?: 'sm' | 'md' | 'lg' | 'xl'; + unlocked?: boolean; +} + +// Badge Definitions +const BADGE_CONFIG: Record = { + 'FIRST_STEPS': { icon: Trophy, color: 'text-amber-700', bg: 'bg-gradient-to-br from-amber-100 to-amber-200', tier: 'bronze' }, + 'ON_FIRE': { icon: Flame, color: 'text-orange-600', bg: 'bg-gradient-to-br from-orange-100 to-orange-200', tier: 'gold' }, + 'MATH_CHAMP': { icon: Zap, color: 'text-blue-600', bg: 'bg-gradient-to-br from-blue-100 to-blue-200', tier: 'silver' }, + 'NIGHT_OWL': { icon: Clock, color: 'text-indigo-600', bg: 'bg-gradient-to-br from-indigo-100 to-indigo-200', tier: 'bronze' }, + 'PERFECT_SCORE': { icon: Star, color: 'text-yellow-600', bg: 'bg-gradient-to-br from-yellow-100 to-yellow-200', tier: 'gold' }, + 'BOOKWORM': { icon: BookOpen, color: 'text-emerald-600', bg: 'bg-gradient-to-br from-emerald-100 to-emerald-200', tier: 'silver' }, +}; + +const SIZES = { + sm: 'w-8 h-8 text-xs', + md: 'w-12 h-12 text-base', + lg: 'w-16 h-16 text-xl', + xl: 'w-24 h-24 text-3xl' +}; + +const BORDERS = { + bronze: 'border-amber-300', + silver: 'border-slate-300', + gold: 'border-yellow-300' +}; + +export function BadgeIcon({ code, size = 'md', unlocked = true }: BadgeIconProps) { + const config = BADGE_CONFIG[code] || { icon: Award, color: 'text-gray-500', bg: 'bg-gray-100', tier: 'silver' }; + const Icon = config.icon; + + if (!unlocked) { + return ( +

+ +

+ ); + } + + return ( + + {/* Shine effect */} +

+ + + + {/* Tier Star (Optional tiny indicator) */} + {config.tier === 'gold' && ( + + )} + + ); +} diff --git a/frontend/src/features/ingest/AnalyzePage.tsx b/frontend/src/features/ingest/AnalyzePage.tsx new file mode 100644 index 0000000..ab8c78e --- /dev/null +++ b/frontend/src/features/ingest/AnalyzePage.tsx @@ -0,0 +1,220 @@ +import { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; + +interface ProgressStep { + step: string; + message: string; + progress: number; + result?: AnalysisResult; +} + +interface AnalysisResult { + title: string; + subject: string; + raw_text: string; + synthesis: string; + study_tips: string[]; + is_math_content: boolean; + math_safety_triggered: boolean; +} + +const STEP_ICONS: Record = { + uploading: '📤', + reading: '👁️', + analyzing: '🧠', + synthesizing: '✨', + complete: '✅', + error: '❌' +}; + +const STEP_LABELS: Record = { + uploading: 'Envoi', + reading: 'Lecture', + analyzing: 'Analyse', + synthesizing: 'Synthèse', + complete: 'Terminé', + error: 'Erreur' +}; + +export const AnalyzePage = () => { + const navigate = useNavigate(); + const [currentStep, setCurrentStep] = useState(null); + const [result, setResult] = useState(null); + const [error, setError] = useState(null); + + useEffect(() => { + const docs = sessionStorage.getItem('pendingDocuments'); + if (!docs) { + navigate('/new'); + return; + } + + try { + const imagesBase64 = JSON.parse(docs); + startAnalysis(imagesBase64); + } catch (e) { + console.error('Error parsing pending documents:', e); + navigate('/new'); + } + }, []); + + const startAnalysis = async (imagesBase64: string[]) => { + try { + const token = localStorage.getItem('access_token'); + + const response = await fetch('/api/ingest/analyze-stream', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + body: JSON.stringify({ images_base64: imagesBase64 }) + }); + + if (!response.ok) { + const errorData = await response.json(); + throw new Error(errorData.detail || 'Analyse échouée'); + } + + const reader = response.body?.getReader(); + const decoder = new TextDecoder(); + + if (!reader) { + throw new Error('Pas de corps de réponse'); + } + + while (true) { + const { done, value } = await reader.read(); + if (done) break; + + const chunk = decoder.decode(value); + const lines = chunk.split('\n'); + + for (const line of lines) { + if (line.startsWith('data: ')) { + const data = JSON.parse(line.slice(6)) as ProgressStep; + setCurrentStep(data); + + if (data.step === 'complete' && data.result) { + setResult(data.result); + sessionStorage.setItem('analysisResult', JSON.stringify(data.result)); + sessionStorage.removeItem('pendingDocuments'); + } else if (data.step === 'error') { + setError(data.message); + } + } + } + } + } catch (err: any) { + setError(err.message || 'Analyse échouée'); + } + }; + + const handleContinue = () => { + navigate('/review'); + }; + + const handleRetry = () => { + sessionStorage.removeItem('pendingDocuments'); + navigate('/new'); + }; + + if (error) { + return ( +

❌

Erreur d'analyse

{error}

+ +

+ ); + } + + if (result) { + return ( +

✅

Analyse terminée !

+ +

Détails de la leçon

+ {result.title} +

+ {result.subject} +

+ + {result.math_safety_triggered && ( +

+ ⚠️ + Mode mathématique activé +

+ )} + + +

+ ); + } + + return ( +

+ {STEP_ICONS[currentStep?.step || 'uploading'] || '⏳'} +

+ +

+ {currentStep?.message || "Analyse en cours..."} +

L'intelligence artificielle transforme votre cours en quiz interactif.

+ + {/* Progress Bar */} +

+ + {/* Step Indicators */} +

+ {['uploading', 'reading', 'analyzing', 'synthesizing'].map((step, i) => ( +

= (i + 1) * 25 + ? 'scale-110 opacity-100' + : 'opacity-40 grayscale scale-90' + }`} + > +

= (i + 1) * 25 ? 'bg-indigo-600 shadow-lg shadow-indigo-100 text-white' : 'bg-white border-2 border-slate-100 text-slate-300'}`}> + {STEP_ICONS[step]} +

+ {STEP_LABELS[step]} +

+ ))} +

+ ); +}; diff --git a/frontend/src/features/ingest/NewRevisionPage.tsx b/frontend/src/features/ingest/NewRevisionPage.tsx new file mode 100644 index 0000000..6974dac --- /dev/null +++ b/frontend/src/features/ingest/NewRevisionPage.tsx @@ -0,0 +1,219 @@ +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { motion } from 'framer-motion'; + +import * as pdfjs from 'pdfjs-dist'; +import { X, Plus, FileText, Image as ImageIcon, Loader2, ArrowLeft } from 'lucide-react'; + +// Initialize PDF.js worker +pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; + +interface DocumentItem { + id: string; + url: string; + type: 'image' | 'pdf_page'; + name: string; +} + +const convertPdfToImages = async (file: File): Promise => { + const arrayBuffer = await file.arrayBuffer(); + const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise; + const items: DocumentItem[] = []; + + for (let i = 1; i <= pdf.numPages; i++) { + const page = await pdf.getPage(i); + const viewport = page.getViewport({ scale: 1.5 }); + + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + if (!context) throw new Error('No 2d context'); + + canvas.height = viewport.height; + canvas.width = viewport.width; + + await page.render({ + canvasContext: context, + viewport: viewport, + canvas: canvas + }).promise; + + items.push({ + id: `${file.name}-p${i}-${Date.now()}`, + url: canvas.toDataURL('image/jpeg', 0.8), + type: 'pdf_page', + name: `${file.name} (Page ${i})` + }); + } + return items; +}; + +export const NewRevisionPage = () => { + const navigate = useNavigate(); + const [documents, setDocuments] = useState([]); + const [isProcessing, setIsProcessing] = useState(false); + + const handleFiles = async (files: FileList) => { + setIsProcessing(true); + const newDocs: DocumentItem[] = []; + + try { + for (let i = 0; i < files.length; i++) { + const file = files[i]; + if (file.type === 'application/pdf') { + const pdfPages = await convertPdfToImages(file); + newDocs.push(...pdfPages); + } else if (file.type.startsWith('image/')) { + const url = await new Promise((resolve) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result as string); + reader.readAsDataURL(file); + }); + newDocs.push({ + id: `${file.name}-${Date.now()}`, + url, + type: 'image', + name: file.name + }); + } + } + setDocuments(prev => [...prev, ...newDocs]); + } catch (error) { + console.error('Error processing files:', error); + alert('Erreur lors du traitement de certains fichiers.'); + } finally { + setIsProcessing(false); + } + }; + + const handleFileChange = (e: React.ChangeEvent) => { + if (e.target.files) handleFiles(e.target.files); + }; + + const removeDocument = (id: string) => { + setDocuments(prev => prev.filter(doc => doc.id !== id)); + }; + + const handleAnalyze = () => { + if (documents.length === 0) return; + + // Store all images for analysis + const imagesBase64 = documents.map(doc => doc.url); + sessionStorage.setItem('pendingDocuments', JSON.stringify(imagesBase64)); + navigate('/analyze'); + }; + + return ( +

+ navigate(-1)} + className="mb-8 flex items-center gap-3 px-4 py-2 bg-white border-2 border-slate-100 text-slate-500 font-bold rounded-xl hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm group" + > + + Retour + + + +

+ Nouveau Cours +

+ Ajoutez vos documents (PDF ou Photos) pour créer vos fiches de révision. +

+ +

+ {/* Upload Section */} +

+ + +

+ +

Ajouter des fichiers

PDF ou Photos (JPG, PNG)

+ + +

+ + {documents.length > 0 && ( + + )} +

+ + {/* Gallery Section */} +

+ {documents.length === 0 ? ( +

+ +

Aucun document ajouté

+ ) : ( +

+ {documents.map((doc) => ( +

+ +

+ {doc.type === 'pdf_page' ? ( + + ) : ( + + )} +

+ {doc.name} +

+ ))} +

+ )} +

+ ); +}; diff --git a/frontend/src/features/ingest/ReviewPage.tsx b/frontend/src/features/ingest/ReviewPage.tsx new file mode 100644 index 0000000..d348c3e --- /dev/null +++ b/frontend/src/features/ingest/ReviewPage.tsx @@ -0,0 +1,236 @@ +import { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { api } from '../../lib/api'; +import { useAuth } from '../../stores/useAuth'; +import { DyslexiaToggle } from '../../components/DyslexiaToggle'; +import { useAccessibility } from '../../stores/useAccessibility'; +import { motion } from 'framer-motion'; + + +interface AnalysisResult { + title: string; + subject: string; + raw_text: string; + synthesis: string; + study_tips?: string[]; + is_math_content: boolean; + math_safety_triggered: boolean; +} + +const SUBJECTS = [ + 'Histoire', + 'Géographie', + 'Français', + 'Mathématiques', + 'Sciences', + 'Physique-Chimie', + 'SVT', + 'Anglais', + 'Espagnol', + 'Allemand', + 'Arts Plastiques', + 'Musique', + 'EPS', + 'Technologie', + 'Autre' +]; + +export const ReviewPage = () => { + const navigate = useNavigate(); + const { isDyslexic } = useAccessibility(); + const { activeLearner } = useAuth(); + const [result, setResult] = useState(null); + const [title, setTitle] = useState(''); + const [subject, setSubject] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + const [error, setError] = useState(null); + + useEffect(() => { + const storedResult = sessionStorage.getItem('analysisResult'); + if (!storedResult) { + navigate('/new'); + return; + } + + const parsed = JSON.parse(storedResult) as AnalysisResult; + setResult(parsed); + setTitle(parsed.title); + setSubject(parsed.subject); + }, []); + + const handleSubmit = async () => { + if (!result) return; + setIsSubmitting(true); + setError(null); + + const updatedResult = { ...result, title, subject }; + + try { + await api.post('/quiz/generate', { + text_content: updatedResult.raw_text, + difficulty: 'medium', + title: updatedResult.title, + subject: updatedResult.subject, + synthesis: updatedResult.synthesis, + study_tips: updatedResult.study_tips, + learner_id: activeLearner?.id + }); + + sessionStorage.removeItem('analysisResult'); + sessionStorage.removeItem('lessonData'); + navigate('/dashboard'); + } catch (err: any) { + console.error(err); + setError("Erreur lors de la sauvegarde : " + (err.response?.data?.detail || err.message)); + setIsSubmitting(false); + } + }; + + const handleBack = () => { + sessionStorage.removeItem('analysisResult'); + navigate('/new'); + }; + + if (!result) { + return ( +

Chargement...

+ ); + } + + return ( +

+ Vérifiez l'analyse +

Ajustez les détails avant de générer votre quiz.

+ +

+ + {/* Math Safety Warning */} + {result.math_safety_triggered && ( +

⚠️

+ Contenu mathématique détecté +

+ Le mode "Extraction Stricte" est activé. Les équations ont été extraites sans résolution. +

+ )} + + {/* Editable Fields */} +

+ + Titre de la leçon + +

setTitle(e.target.value)}
+                                className="w-full px-5 py-4 bg-slate-50 border-2 border-transparent rounded-2xl focus:border-indigo-500 focus:bg-white transition-all font-bold outline-none text-slate-900 resize-none h-auto min-h-[5rem]"
+                                placeholder="Ex: La Révolution Française"
+                                rows={2}
+                            />
+                        </div>
+                        <div className="space-y-2 md:col-span-2">
+                            <label className="block text-sm font-black text-slate-700 uppercase tracking-widest ml-1">
+                                Matière
+                            </label>
+                            <select
+                                value={subject}
+                                onChange={(e) => setSubject(e.target.value)}
+                                className="w-full px-5 py-4 bg-slate-50 border-2 border-transparent rounded-2xl focus:border-indigo-500 focus:bg-white transition-all font-bold outline-none text-slate-900 appearance-none"
+                            >
+                                {SUBJECTS.map((s) => (
+                                    <option key={s} value={s}>{s}</option>
+                                ))}
+                            </select>
+                        </div>
+                    </div>
+
+                    {/* Synthesis */}
+                    <div className="mb-10">
+                        <label className="block text-sm font-black text-slate-700 uppercase tracking-widest ml-1 mb-3">
+                            Résumé magique ✨
+                        </label>
+                        <div className="p-8 bg-indigo-50/30 border border-indigo-50 rounded-[2rem] whitespace-pre-wrap text-slate-700 font-medium leading-relaxed italic">
+                            {result.synthesis}
+                        </div>
+                    </div>
+
+                    {/* Study Tips */}
+                    {result.study_tips && result.study_tips.length > 0 && (
+                        <div className="mb-10">
+                            <label className="block text-sm font-black text-slate-700 uppercase tracking-widest ml-1 mb-3">
+                                Conseils Métho 💡
+                            </label>
+                            <div className="grid gap-4 md:grid-cols-3">
+                                {result.study_tips.map((tip, idx) => (
+                                    <div key={idx} className="p-6 bg-emerald-50/50 border border-emerald-100 rounded-[1.5rem] shadow-sm">
+                                        <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center text-emerald-600 font-black text-sm mb-3 shadow-sm border border-emerald-50">
+                                            {idx + 1}
+                                        </div>
+                                        <p className="text-slate-700 font-bold text-sm leading-relaxed">
+                                            {tip}
+                                        </p>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Raw Text (collapsed by default) */}
+                    <details className="group">
+                        <summary className="cursor-pointer text-sm font-black text-indigo-500 uppercase tracking-widest hover:text-indigo-600 transition-colors list-none flex items-center gap-2">
+                            <span className="group-open:rotate-180 transition-transform">📄</span>
+                            Voir le texte extrait complet
+                        </summary>
+                        <div className="mt-6 p-6 bg-slate-50 rounded-2xl whitespace-pre-wrap text-slate-400 font-mono text-xs max-h-64 overflow-y-auto border border-slate-100">
+                            {result.raw_text}
+                        </div>
+                    </details>
+                </div>
+
+                {/* Actions */}
+                <div className="flex gap-4">
+                    <motion.button
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                        onClick={handleBack}
+                        className="flex-1 py-5 px-6 bg-white border-2 border-slate-100 rounded-2xl text-slate-600 font-black hover:bg-slate-50 hover:border-slate-200 transition-all shadow-sm flex items-center justify-center gap-3"
+                    >
+                        <span>← Retour</span>
+                    </motion.button>
+
+                    <button
+                        onClick={handleSubmit}
+                        disabled={isSubmitting || !title.trim()}
+                        className="flex-1 py-5 px-6 bg-indigo-600 text-white rounded-2xl font-black shadow-xl shadow-indigo-100 hover:bg-indigo-700 transition-all disabled:opacity-50 active:scale-95 flex items-center justify-center gap-3"
+                    >
+                        {isSubmitting ? (
+                            <>
+                                <span className="animate-spin text-xl">⏳</span>
+                                Sauvegarde...
+                            </>
+                        ) : 'Valider & Sauvegarder'}
+                    </button>
+                    {error && (
+                        <div className="md:col-span-2 text-red-500 font-bold text-center mt-4 bg-red-50 p-4 rounded-xl w-full">
+                            {error}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/frontend/src/features/quiz/HistoryPage.tsx b/frontend/src/features/quiz/HistoryPage.tsx
new file mode 100644
index 0000000..ac5f858
--- /dev/null
+++ b/frontend/src/features/quiz/HistoryPage.tsx
@@ -0,0 +1,173 @@
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { api } from '../../lib/api';
+import { useAuth } from '../../stores/useAuth';
+import {
+    BookOpen,
+    Calendar,
+    ChevronLeft,
+    ArrowRight,
+    Search,
+    Book,
+    Lightbulb,
+    Atom,
+    Globe,
+    Music,
+    Palette
+} from 'lucide-react';
+import { motion } from 'framer-motion';
+
+// reuse styles from widget
+const SUBJECT_STYLES: Record<string, { icon: React.ReactNode, bg: string, color: string }> = {
+    'Mathématiques': { icon: <Atom className="w-5 h-5" />, bg: 'bg-blue-100', color: 'text-blue-600' },
+    'Français': { icon: <Book className="w-5 h-5" />, bg: 'bg-orange-100', color: 'text-orange-600' },
+    'Sciences': { icon: <Lightbulb className="w-5 h-5" />, bg: 'bg-emerald-100', color: 'text-emerald-600' },
+    'Histoire-Géo': { icon: <Globe className="w-5 h-5" />, bg: 'bg-purple-100', color: 'text-purple-600' },
+    'Musique': { icon: <Music className="w-5 h-5" />, bg: 'bg-pink-100', color: 'text-pink-600' },
+    'Arts': { icon: <Palette className="w-5 h-5" />, bg: 'bg-amber-100', color: 'text-amber-600' },
+    'default': { icon: <BookOpen className="w-5 h-5" />, bg: 'bg-slate-100', color: 'text-slate-600' }
+};
+
+interface Revision {
+    id: string;
+    topic: string;
+    subject: string;
+    created_at: string;
+    current_series: number;
+    total_series: number;
+    status: string;
+    pending_errors?: number;
+}
+
+export const HistoryPage: React.FC = () => {
+    const navigate = useNavigate();
+    const { activeLearner } = useAuth();
+    const [revisions, setRevisions] = useState<Revision[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    useEffect(() => {
+        const fetchAll = async () => {
+            if (!activeLearner) return;
+            try {
+                const res = await api.get(`/quiz/revisions?learner_id=${activeLearner.id}`);
+                setRevisions(res.data);
+            } catch (e) {
+                console.error(e);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchAll();
+    }, [activeLearner]);
+
+    const filteredRevisions = revisions.filter(rev =>
+        (rev.topic?.toLowerCase().includes(searchTerm.toLowerCase())) ||
+        (rev.subject?.toLowerCase().includes(searchTerm.toLowerCase()))
+    );
+
+    const getSubjectStyle = (subject: string) => SUBJECT_STYLES[subject] || SUBJECT_STYLES['default'];
+
+    return (
+        <div className="min-h-screen bg-[#f8fafc] font-sans text-gray-900 pb-20">
+            {/* Nav */}
+            <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-40">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="flex items-center justify-between h-16">
+                        <motion.button
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                            onClick={() => navigate('/dashboard')}
+                            className="flex items-center gap-2 px-4 py-2 bg-white border-2 border-slate-100 text-slate-500 font-bold rounded-xl hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm"
+                        >
+                            <ChevronLeft className="w-5 h-5" />
+                            <span>Retour</span>
+                        </motion.button>
+                        <h1 className="text-xl font-black tracking-tight text-gray-900">Mes Cours</h1>
+                        <div className="w-20"></div> {/* spacer */}
+                    </div>
+                </div>
+            </nav>
+
+            <main className="max-w-4xl mx-auto py-10 px-4">
+                {/* Search Bar */}
+                <div className="relative mb-10">
+                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 w-5 h-5" />
+                    <input
+                        type="text"
+                        placeholder="Rechercher un cours ou une matière..."
+                        className="w-full pl-12 pr-6 py-4 bg-white border border-slate-200 rounded-2xl shadow-sm focus:ring-4 focus:ring-indigo-50 focus:border-indigo-200 transition-all outline-none font-medium"
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                    />
+                </div>
+
+                {loading ? (
+                    <div className="flex flex-col items-center justify-center py-20 gap-4">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+                        <p className="font-bold text-slate-400">Chargement de tes cours...</p>
+                    </div>
+                ) : filteredRevisions.length > 0 ? (
+                    <div className="grid grid-cols-1 gap-4">
+                        {filteredRevisions.map((rev) => {
+                            const style = getSubjectStyle(rev.subject);
+                            return (
+                                <motion.div
+                                    key={rev.id}
+                                    initial={{ opacity: 0, y: 10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    onClick={() => navigate(`/play/${rev.id}`)}
+                                    className="group bg-white border border-slate-200 p-5 rounded-2xl hover:border-indigo-200 hover:shadow-xl hover:shadow-indigo-50/50 transition-all cursor-pointer flex items-center gap-6"
+                                >
+                                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 ${style.bg} ${style.color}`}>
+                                        {style.icon}
+                                    </div>
+
+                                    <div className="flex-1 min-w-0">
+                                        <div className={`text-[11px] font-black uppercase tracking-widest mb-1 ${style.color}`}>
+                                            {rev.subject || 'Général'}
+                                        </div>
+                                        <h3 className="text-lg font-bold text-slate-800 group-hover:text-indigo-600 transition-colors truncate">
+                                            {rev.topic}
+                                        </h3>
+                                        <div className="flex items-center gap-3 mt-1.5">
+                                            <div className="flex items-center gap-1 text-xs font-bold text-slate-400 bg-slate-50 px-2 py-0.5 rounded-md">
+                                                <Calendar className="w-3 h-3" />
+                                                {new Date(rev.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
+                                            </div>
+                                            <span className="text-slate-300">•</span>
+                                            <div className="text-xs font-black text-indigo-400 uppercase tracking-tight">
+                                                Quizz {rev.current_series}/{rev.total_series}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="flex items-center gap-3">
+                                        {rev.status === 'COMPLETED' && (
+                                            <span className="hidden sm:flex px-3 py-1.5 bg-green-50 text-green-600 text-[10px] font-black uppercase tracking-widest rounded-lg border border-green-100 items-center gap-2">
+                                                <span>✅</span> Terminé
+                                            </span>
+                                        )}
+                                        <div className="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-300 group-hover:bg-indigo-600 group-hover:text-white transition-all">
+                                            <ArrowRight className="w-5 h-5" />
+                                        </div>
+                                    </div>
+                                </motion.div>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <div className="text-center py-20 bg-white rounded-[2rem] border border-dashed border-slate-200">
+                        <div className="text-4xl mb-4">🔍</div>
+                        <h3 className="text-xl font-bold text-slate-800">Aucun cours trouvé</h3>
+                        <p className="text-slate-500 mt-2">Essaie une autre recherche ou crée un nouveau cours !</p>
+                        <Link to="/new" className="mt-6 inline-flex px-6 py-3 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 transition-all active:scale-95 shadow-lg shadow-indigo-100">
+                            Créer un cours
+                        </Link>
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+};
diff --git a/frontend/src/features/quiz/QuestionCard.tsx b/frontend/src/features/quiz/QuestionCard.tsx
new file mode 100644
index 0000000..ef49940
--- /dev/null
+++ b/frontend/src/features/quiz/QuestionCard.tsx
@@ -0,0 +1,117 @@
+
+import { useState, useEffect } from 'react';
+
+interface QuestionCardProps {
+    question: string;
+    options: string[];
+    selectedOption: number | null;
+    correctAnswer: number;
+    onSelectOption: (index: number) => void;
+    currentStep: number;
+    totalSteps: number;
+    explanation?: string;
+}
+
+export function QuestionCard({
+    question,
+    options,
+    selectedOption,
+    correctAnswer,
+    onSelectOption,
+    currentStep,
+    totalSteps,
+    explanation
+}: QuestionCardProps) {
+    const [animation, setAnimation] = useState<'pop' | 'shake' | null>(null);
+
+    useEffect(() => {
+        if (selectedOption !== null) {
+            if (selectedOption === correctAnswer) {
+                setAnimation('pop');
+            } else {
+                setAnimation('shake');
+            }
+            // Removed auto-hide timer for animation to keep state clear, 
+            // but we might want to keep the effect. 
+            // The user wants "time to read", so we shouldn't auto-advance too fast in parent.
+            const timer = setTimeout(() => setAnimation(null), 500);
+            return () => clearTimeout(timer);
+        }
+    }, [selectedOption, correctAnswer]);
+
+    const isCorrect = selectedOption === correctAnswer;
+
+    return (
+        <div className={`bg-white rounded-xl border border-slate-200 shadow-soft-indigo overflow-hidden max-w-2xl mx-auto mt-8 p-8 transition-transform duration-300 ${animation === 'pop' ? 'scale-105' : animation === 'shake' ? 'animate-shake' : ''
+            }`}>
+            <div className="mb-10">
+                <div className="flex justify-between items-center mb-3">
+                    <span className="text-xs font-black text-indigo-400 uppercase tracking-[0.2em]">Question {currentStep} / {totalSteps}</span>
+                    <span className="text-xs font-black text-slate-400">{Math.round((currentStep / totalSteps) * 100)}%</span>
+                </div>
+                <div className="w-full bg-slate-100 rounded-full h-2.5 p-0.5">
+                    <div
+                        className="bg-gradient-to-r from-indigo-500 to-purple-500 h-1.5 rounded-full transition-all duration-700 ease-out shadow-sm"
+                        style={{ width: `${(currentStep / totalSteps) * 100}%` }}
+                    ></div>
+                </div>
+            </div>
+
+            <h2 className="text-3xl font-black text-slate-900 mb-10 leading-tight tracking-tight">{question}</h2>
+
+            <div className="grid grid-cols-1 gap-4 mb-4">
+                {options.map((option, index) => (
+                    <button
+                        key={index}
+                        disabled={selectedOption !== null}
+                        onClick={() => onSelectOption(index)}
+                        className={`w-full text-left p-5 border-2 rounded-xl transition-all duration-200 group relative ${selectedOption === null
+                            ? 'border-slate-100 hover:border-soft-indigo hover:bg-indigo-50/30'
+                            : selectedOption === index
+                                ? index === correctAnswer
+                                    ? 'border-green-500 bg-green-50 text-green-700'
+                                    : 'border-orange-400 bg-orange-50 text-orange-700'
+                                : index === correctAnswer
+                                    ? 'border-green-500 bg-green-50/50'
+                                    : 'border-slate-100 opacity-50'
+                            }`}
+                    >
+                        <div className="flex items-center">
+                            <span className={`flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-full border-2 text-sm font-bold transition-colors ${selectedOption === null
+                                ? 'border-slate-200 text-slate-400 group-hover:border-soft-indigo group-hover:text-soft-indigo'
+                                : selectedOption === index
+                                    ? index === correctAnswer
+                                        ? 'border-green-500 bg-green-500 text-white'
+                                        : 'border-orange-400 bg-orange-400 text-white'
+                                    : index === correctAnswer
+                                        ? 'border-green-500 text-green-500'
+                                        : 'border-slate-200 text-slate-300'
+                                }`}>
+                                {String.fromCharCode(65 + index)}
+                            </span>
+                            <span className="ml-4 text-lg font-medium">{option}</span>
+                        </div>
+                    </button>
+                ))}
+            </div>
+
+            {selectedOption !== null && (
+                <div className={`mt-6 p-6 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-300 ${isCorrect ? 'bg-green-50 border border-green-100' : 'bg-orange-50 border border-orange-100'}`}>
+                    <div className="flex items-start gap-4">
+                        <div className={`text-2xl ${isCorrect ? 'grayscale-0' : 'grayscale-0'}`}>
+                            {isCorrect ? '🎉' : '💡'}
+                        </div>
+                        <div>
+                            <h4 className={`font-black uppercase tracking-wider text-xs mb-1 ${isCorrect ? 'text-green-600' : 'text-orange-600'}`}>
+                                {isCorrect ? 'Bonne réponse !' : 'Oups, pas tout à fait...'}
+                            </h4>
+                            <p className="text-slate-800 font-medium leading-relaxed">
+                                {explanation || "Pas d'explication disponible."}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/frontend/src/features/quiz/QuizPage.tsx b/frontend/src/features/quiz/QuizPage.tsx
new file mode 100644
index 0000000..b494d9e
--- /dev/null
+++ b/frontend/src/features/quiz/QuizPage.tsx
@@ -0,0 +1,364 @@
+import { useEffect, useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { api } from '../../lib/api';
+import { QuestionCard } from './QuestionCard';
+import { ResultCard } from './ResultCard';
+import { DyslexiaToggle } from '../../components/DyslexiaToggle';
+import { useAccessibility } from '../../stores/useAccessibility';
+import { useAuth } from '../../stores/useAuth';
+import { Skeleton } from '../../components/ui/Skeleton';
+import { Modal } from '../../components/ui/Modal';
+
+interface Question {
+    id: number;
+    question: string;
+    options: string[];
+    correct_answer: number;
+    explanation: string;
+}
+
+interface QuizResponse {
+    topic: string;
+    questions: Question[];
+    series_info?: {
+        current: number;
+        total: number;
+    };
+}
+
+export function QuizPage() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const { isDyslexic } = useAccessibility();
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [quizData, setQuizData] = useState<QuizResponse | null>(null);
+    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+    const [selectedOption, setSelectedOption] = useState<number | null>(null);
+    const [score, setScore] = useState(0);
+    const [answers, setAnswers] = useState<any[]>([]); // Track details
+    const [isFinished, setIsFinished] = useState(false);
+    const [revisionId, setRevisionId] = useState<string | null>(null); // New state
+
+    // Badge Modal State
+    const [showBadgeModal, setShowBadgeModal] = useState(false);
+    const [newBadges, setNewBadges] = useState<string[]>([]);
+
+    // Get text content from navigation state OR params
+    const textContent = location.state?.textContent;
+    const { revisionId: paramRevisionId } = useParams();
+
+    useEffect(() => {
+        const loadQuiz = async () => {
+            setLoading(true);
+            try {
+                // Scenario 0: Quiz Data passed via State (e.g. Remediation)
+                if (location.state?.quizData) {
+                    setQuizData(location.state.quizData);
+                    if (location.state.revisionId) {
+                        setRevisionId(location.state.revisionId);
+                    } else if (location.state.quizData.revision_id) {
+                        setRevisionId(location.state.quizData.revision_id);
+                    }
+                    // If it's pure remediation, we might not want to save a new Revision in backend,
+                    // but we do want to track progress? 
+                    // For now, simple display is enough.
+                }
+                // Scenario A: Loading existing revision
+                else if (paramRevisionId) {
+                    setRevisionId(paramRevisionId);
+                    const res = await api.get(`/quiz/review/${paramRevisionId}`);
+                    // Revision has quiz_data as string
+                    if (res.data.quiz_data) {
+                        const parsedQuiz = JSON.parse(res.data.quiz_data);
+                        // Inject series info and completion status
+                        (parsedQuiz as any).series_info = {
+                            current: res.data.current_series,
+                            total: res.data.total_series,
+                            completed: res.data.completed_series || 0
+                        };
+                        setQuizData(parsedQuiz);
+
+                        // Checks for "Between Series" state
+                        if (res.data.progress_state) {
+                            const progress = JSON.parse(res.data.progress_state);
+                            setCurrentQuestionIndex(progress.current_index || 0);
+                            setScore(progress.score || 0);
+                            setAnswers(progress.answers || []);
+                        } else if (res.data.completed_series >= res.data.current_series && res.data.current_series < res.data.total_series) {
+                            // User finished this part but left before starting the next.
+                            setIsFinished(true);
+                        }
+                    } else {
+                        setError("Ce quiz ne contient pas de données valides.");
+                    }
+                }
+                // Scenario B: Generating new quiz
+                else if (textContent) {
+                    const response = await api.post<QuizResponse & { revision_id: string }>('/quiz/generate', {
+                        text_content: textContent,
+                        difficulty: 'medium',
+                        title: location.state?.title,
+                        subject: location.state?.subject,
+                        synthesis: location.state?.synthesis,
+                        study_tips: location.state?.study_tips,
+                        learner_id: useAuth.getState().activeLearner?.id
+                    });
+                    setQuizData(response.data);
+                    if (response.data.revision_id) {
+                        setRevisionId(response.data.revision_id);
+                    }
+                } else {
+                    setError("Aucun contenu fourni. Veuillez sélectionner une révision ou en créer une nouvelle.");
+                }
+            } catch (err: any) {
+                console.error("Quiz error:", err);
+                setError(err.response?.data?.detail || "Erreur lors du chargement du quiz.");
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        loadQuiz();
+    }, [textContent, paramRevisionId]);
+
+    // Manual advance handler
+    const handleNext = () => {
+        if (currentQuestionIndex < (quizData?.questions.length || 0) - 1) {
+            setCurrentQuestionIndex(prev => prev + 1);
+            setSelectedOption(null);
+        } else {
+            setIsFinished(true);
+        }
+    };
+
+    const handleOptionSelect = (index: number) => {
+        if (selectedOption !== null) return; // Prevent changing answer
+        setSelectedOption(index);
+
+        if (!quizData) return;
+
+        const currentQ = quizData.questions[currentQuestionIndex];
+        const isCorrect = index === currentQ.correct_answer;
+
+        if (isCorrect) {
+            setScore(prev => prev + 1);
+        }
+
+        // Record answer details
+        setAnswers(prev => [...prev, {
+            question: currentQ.question,
+            user_answer: currentQ.options[index],
+            correct_answer: currentQ.options[currentQ.correct_answer],
+            is_correct: isCorrect,
+            original_content: null
+        }]);
+    };
+
+    // Save score when quiz is finished
+    const { activeLearner, checkAuth } = useAuth();
+    const hasSaved = useRef(false);
+
+    useEffect(() => {
+        if (isFinished && quizData && !hasSaved.current) {
+            hasSaved.current = true;
+
+            // Trigger Confetti if score is good (> 50%)
+            if (activeLearner && score / quizData.questions.length > 0.5) {
+                import('canvas-confetti').then((confetti) => {
+                    confetti.default({
+                        particleCount: 100,
+                        spread: 70,
+                        origin: { y: 0.6 },
+                        colors: ['#6366f1', '#a855f7', '#ec4899', '#fwd700']
+                    });
+                });
+            }
+
+            const saveScore = async () => {
+                try {
+                    const response = await api.post('/quiz/score', {
+                        topic: quizData.topic,
+                        score: score,
+                        total_questions: quizData.questions.length,
+                        learner_id: activeLearner?.id,
+                        details: answers,
+                        revision_id: revisionId
+                    });
+
+                    // Refresh profile to get updated badges/streaks
+                    await checkAuth(true);
+
+                    // Check for new badges
+                    if (response.data.new_badges && response.data.new_badges.length > 0) {
+                        setNewBadges(response.data.new_badges);
+                        setShowBadgeModal(true);
+                    }
+
+                } catch (e) {
+                    console.error("Failed to save score", e);
+                    hasSaved.current = false;
+                }
+            };
+            saveScore();
+        }
+    }, [isFinished, quizData, score, activeLearner, checkAuth, answers, revisionId]);
+
+    const handlePause = async () => {
+        if (!revisionId) {
+            navigate('/dashboard');
+            return;
+        }
+
+        try {
+            await api.post('/quiz/progress/save', {
+                revision_id: revisionId,
+                current_index: currentQuestionIndex,
+                answers: answers,
+                score: score
+            });
+            navigate('/dashboard');
+        } catch (e) {
+            console.error("Failed to save progress", e);
+            navigate('/dashboard');
+        }
+    };
+
+    const handleNextSeries = async () => {
+        if (!revisionId) return;
+        setLoading(true);
+        try {
+            const res = await api.post('/quiz/next-series', { revision_id: revisionId });
+            setQuizData(res.data);
+            setCurrentQuestionIndex(0);
+            setScore(0);
+            setAnswers([]);
+            setSelectedOption(null); // Fix: Reset selected option to prevent "Ghost Answer" on Q1
+            setIsFinished(false);
+            setLoading(false);
+        } catch (e) {
+            console.error("Failed to load next series", e);
+            setError("Impossible de charger la suite du cours. Veuillez réessayer.");
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className={`min-h-screen bg-cream py-8 px-4 sm:px-6 lg:px-8 ${isDyslexic ? 'font-dyslexic' : 'font-sans'}`}>
+            <div className="max-w-screen-sm mx-auto relative content-center">
+
+                {/* Pause Button */}
+                {!loading && !error && !isFinished && (
+                    <motion.button
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                        onClick={handlePause}
+                        className="absolute -top-2 right-0 text-slate-400 hover:text-indigo-600 font-bold text-sm bg-white px-4 py-2 rounded-full shadow-sm hover:shadow-md transition-all border border-slate-100 flex items-center gap-2"
+                    >
+                        <span>⏸ Pause & Quitter</span>
+                    </motion.button>
+                )}
+
+                {loading && (
+                    <div className="w-full max-w-2xl mx-auto bg-white rounded-3xl shadow-xl p-8 animate-pulse">
+                        <div className="flex justify-between items-center mb-8">
+                            <Skeleton className="h-4 w-24 bg-indigo-50" />
+                            <Skeleton className="h-4 w-32 bg-indigo-50" />
+                        </div>
+
+                        <Skeleton className="h-8 w-3/4 mb-4 bg-gray-200" />
+                        <Skeleton className="h-8 w-1/2 mb-12 bg-gray-200" />
+
+                        <div className="space-y-4">
+                            {[1, 2, 3, 4].map((i) => (
+                                <Skeleton key={i} className="h-16 w-full rounded-xl bg-gray-100" />
+                            ))}
+                        </div>
+
+                        <div className="mt-8 text-center">
+                            <p className="text-indigo-600 font-medium animate-pulse">Génération de votre quiz en cours...</p>
+                        </div>
+                    </div>
+                )}
+
+                {error && (
+                    <div className="text-center text-red-600 bg-red-50 p-8 rounded-[2.5rem] mt-10 border-2 border-red-100 shadow-xl shadow-red-50 animate-in zoom-in duration-300">
+                        <div className="text-5xl mb-4">⚠️</div>
+                        <h3 className="text-2xl font-black mb-2">Une erreur est survenue</h3>
+                        <p className="font-medium text-red-500 opacity-80">{error}</p>
+                        <motion.button
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                            onClick={() => navigate('/dashboard')}
+                            className="mt-8 px-8 py-4 bg-white border-2 border-red-100 text-red-600 font-black rounded-2xl hover:bg-red-50 transition-all shadow-lg shadow-red-50 flex items-center justify-center gap-3"
+                        >
+                            Retour au tableau de bord
+                        </motion.button>
+
+                    </div>
+                )}
+
+                {!loading && !error && quizData && !isFinished && (
+                    <div className="flex flex-col items-center w-full">
+                        <QuestionCard
+                            question={quizData.questions[currentQuestionIndex].question}
+                            options={quizData.questions[currentQuestionIndex].options}
+                            selectedOption={selectedOption}
+                            correctAnswer={quizData.questions[currentQuestionIndex].correct_answer}
+                            onSelectOption={handleOptionSelect}
+                            currentStep={currentQuestionIndex + 1}
+                            totalSteps={quizData.questions.length}
+                            explanation={quizData.questions[currentQuestionIndex].explanation}
+                        />
+
+                        {/* NEXT BUTTON */}
+                        {selectedOption !== null && (
+                            <button
+                                onClick={handleNext}
+                                className="mt-8 bg-indigo-600 text-white font-black text-lg py-4 px-12 rounded-2xl shadow-xl shadow-indigo-200 hover:bg-indigo-700 hover:scale-105 hover:shadow-2xl transition-all duration-300 animate-in fade-in slide-in-from-bottom-4 flex items-center gap-3 group"
+                            >
+                                <span>Question Suivante</span>
+                                <span className="text-2xl group-hover:translate-x-1 transition-transform">➜</span>
+                            </button>
+                        )}
+                    </div>
+                )}
+
+                {isFinished && quizData && (
+                    <ResultCard
+                        score={score}
+                        totalQuestions={quizData.questions.length}
+                        topic={quizData.topic}
+                        onRetry={() => window.location.reload()}
+                        onNextSeries={handleNextSeries}
+                        seriesInfo={(quizData as any).series_info}
+                    />
+                )}
+
+                <div className="mt-8 flex justify-center">
+                    <DyslexiaToggle />
+                </div>
+
+                <Modal
+                    isOpen={showBadgeModal}
+                    onClose={() => setShowBadgeModal(false)}
+                    title="Nouveau Badge Débloqué !"
+                    icon="🏆"
+                >
+                    <div className="text-gray-600 text-lg">
+                        <p className="mb-4">Félicitations ! Vous avez gagné de nouveaux badges :</p>
+                        <div className="flex flex-wrap gap-2 justify-center">
+                            {newBadges.map((badge, idx) => (
+                                <span key={idx} className="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-xl font-bold">
+                                    {badge.replace('_', ' ')}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                </Modal>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/features/quiz/ResultCard.tsx b/frontend/src/features/quiz/ResultCard.tsx
new file mode 100644
index 0000000..c7da20e
--- /dev/null
+++ b/frontend/src/features/quiz/ResultCard.tsx
@@ -0,0 +1,99 @@
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import confetti from 'canvas-confetti';
+
+interface ResultCardProps {
+    score: number;
+    totalQuestions: number;
+    topic: string;
+    onRetry: () => void;
+    onNextSeries?: () => void;
+    seriesInfo?: { current: number, total: number, completed?: number };
+}
+
+export function ResultCard({ score, totalQuestions, topic, onRetry, onNextSeries, seriesInfo }: ResultCardProps) {
+    const percentage = Math.round((score / totalQuestions) * 100);
+
+    useEffect(() => {
+        if (percentage >= 80) {
+            const duration = 3 * 1000;
+            const animationEnd = Date.now() + duration;
+            const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+            const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
+
+            const interval: any = setInterval(function () {
+                const timeLeft = animationEnd - Date.now();
+
+                if (timeLeft <= 0) {
+                    return clearInterval(interval);
+                }
+
+                const particleCount = 50 * (timeLeft / duration);
+                confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
+                confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
+            }, 250);
+
+            return () => clearInterval(interval);
+        }
+    }, [percentage]);
+
+    let message = "Continue tes efforts !";
+    let color = "text-orange-500";
+    let bgColor = "bg-orange-50";
+
+    // Scenario: Resuming between series (Score is 0 because not re-fetched, but we want to encourage continuing)
+    const isResumingSeries = seriesInfo && seriesInfo.completed && seriesInfo.completed >= seriesInfo.current;
+
+    if (isResumingSeries) {
+        message = "Prêt pour la suite ?";
+        bgColor = "bg-blue-50";
+        color = "text-blue-600";
+    }
+    else if (percentage >= 80) {
+        message = "Excellent travail !";
+        color = "text-green-600";
+        bgColor = "bg-green-50";
+    } else if (percentage >= 50) {
+        message = "Bravo, bel effort !";
+        color = "text-soft-indigo";
+        bgColor = "bg-indigo-50";
+    }
+
+    return (
+        <div className="bg-white rounded-[3rem] shadow-2xl shadow-indigo-100 border border-slate-50 overflow-hidden max-w-xl mx-auto mt-10 p-12 text-center animate-in zoom-in-95 duration-500">
+            <h2 className="text-4xl font-black text-slate-900 mb-2 tracking-tight">Quiz Terminé !</h2>
+            <p className="text-slate-400 mb-10 font-bold uppercase tracking-widest text-xs">Sujet : {topic}</p>
+
+            <div className={`mb-10 p-8 rounded-2xl ${bgColor}`}>
+                <div className={`text-7xl font-black ${color} mb-4`}>{percentage}%</div>
+                <p className="text-slate-700 text-xl font-semibold">{score} sur {totalQuestions} corrects</p>
+                <p className={`text-lg mt-3 font-medium ${color}`}>{message}</p>
+            </div>
+
+            <div className="flex flex-col sm:flex-row justify-center gap-4">
+                <button
+                    onClick={onRetry}
+                    className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-soft-indigo text-soft-indigo rounded-xl hover:bg-indigo-50 font-bold transition-all"
+                >
+                    Recommencer
+                </button>
+
+                {onNextSeries && seriesInfo && seriesInfo.current < seriesInfo.total && (
+                    <button
+                        onClick={onNextSeries}
+                        className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 font-bold shadow-md shadow-indigo-200 transition-all animate-pulse"
+                    >
+                        Suite (Partie {seriesInfo.current + 1}/{seriesInfo.total})
+                    </button>
+                )}
+                <Link
+                    to="/dashboard"
+                    className="flex-1 inline-flex justify-center items-center px-6 py-3 border-2 border-transparent bg-soft-indigo text-white rounded-xl hover:opacity-90 font-bold shadow-md shadow-indigo-200 transition-all"
+                >
+                    Tableau de bord
+                </Link>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/features/quiz/RevisionViewPage.tsx b/frontend/src/features/quiz/RevisionViewPage.tsx
new file mode 100644
index 0000000..e34e471
--- /dev/null
+++ b/frontend/src/features/quiz/RevisionViewPage.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { api } from '../../lib/api';
+import { DyslexiaToggle } from '../../components/DyslexiaToggle';
+import { useAccessibility } from '../../stores/useAccessibility';
+import { motion } from 'framer-motion';
+
+
+interface Revision {
+    id: string;
+    topic: string;
+    text_content: string;
+    synthesis?: string;
+    study_tips?: string;
+    created_at: string;
+}
+
+export function RevisionViewPage() {
+    const { id } = useParams<{ id: string }>();
+    const navigate = useNavigate();
+    const { isDyslexic } = useAccessibility();
+    const [revision, setRevision] = useState<Revision | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchRevision = async () => {
+            try {
+                const response = await api.get<Revision>(`/quiz/review/${id}`);
+                setRevision(response.data);
+            } catch (err) {
+                console.error("Failed to load revision", err);
+                setError("Impossible de charger la révision.");
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (id) fetchRevision();
+    }, [id]);
+
+    const handleRetry = () => {
+        if (!revision) return;
+        // Navigate to quiz with original content to re-generate/take
+        navigate('/quiz', {
+            state: {
+                textContent: revision.text_content,
+                // We could pass topic too if QuizPage supports it, but textContent is key
+            }
+        });
+    };
+
+    if (loading) {
+        return (
+            <div className="min-h-screen bg-[#FDFCF8] flex items-center justify-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+            </div>
+        );
+    }
+
+    if (error || !revision) {
+        return (
+            <div className="min-h-screen bg-[#FDFCF8] flex items-center justify-center">
+                <div className="text-center p-8">
+                    <h2 className="text-2xl font-bold text-gray-900 mb-4">Oups !</h2>
+                    <p className="text-gray-600 mb-6">{error || "Révision introuvable."}</p>
+                    <button onClick={() => navigate('/dashboard')} className="text-indigo-600 font-bold hover:underline">
+                        Retour au tableau de bord
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={`min-h-screen bg-[#FDFCF8] py-12 ${isDyslexic ? 'font-dyslexic' : ''}`}>
+            <div className="max-w-4xl mx-auto px-4">
+                <div className="flex justify-between items-center mb-10">
+                    <motion.button
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                        onClick={() => navigate('/dashboard')}
+                        className="flex items-center gap-2 px-4 py-2 bg-white border-2 border-slate-100 text-slate-500 font-bold rounded-xl hover:text-indigo-600 hover:border-indigo-100 transition-all shadow-sm"
+                    >
+                        <span>← Retour</span>
+                    </motion.button>
+
+                    <DyslexiaToggle />
+                </div>
+
+                <div className="bg-white rounded-[2.5rem] shadow-xl shadow-indigo-100/50 border border-slate-50 p-10 mb-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+                    <div className="mb-8 border-b border-slate-100 pb-6">
+                        <h1 className="text-4xl font-black text-slate-900 mb-2">{revision.topic}</h1>
+                        <p className="text-slate-400 font-bold uppercase tracking-widest text-xs">
+                            Révision du {new Date(revision.created_at).toLocaleDateString()}
+                        </p>
+                    </div>
+
+                    <div className="prose prose-indigo max-w-none text-slate-600 leading-relaxed whitespace-pre-wrap font-medium">
+                        {/* Synthesis Section */}
+                        {revision.synthesis && (
+                            <div className="mb-10">
+                                <h3 className="text-lg font-black text-indigo-900 mb-4 flex items-center gap-2">
+                                    <span className="text-2xl">✨</span> Résumé Magique
+                                </h3>
+                                <div className="p-6 bg-indigo-50/50 border border-indigo-100 rounded-2xl italic text-slate-700">
+                                    {revision.synthesis}
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Tips Section */}
+                        {revision.study_tips && (
+                            <div className="mb-10">
+                                <h3 className="text-lg font-black text-emerald-900 mb-4 flex items-center gap-2">
+                                    <span className="text-2xl">💡</span> Conseils Métho
+                                </h3>
+                                <div className="grid gap-4 md:grid-cols-2">
+                                    {(() => {
+                                        try {
+                                            const tips = JSON.parse(revision.study_tips);
+                                            return Array.isArray(tips) ? tips.map((tip: string, idx: number) => (
+                                                <div key={idx} className="p-4 bg-emerald-50 border border-emerald-100 rounded-xl text-emerald-800 text-sm font-bold flex gap-3">
+                                                    <span className="w-6 h-6 bg-white rounded-full flex items-center justify-center text-xs shadow-sm shrink-0">{idx + 1}</span>
+                                                    {tip}
+                                                </div>
+                                            )) : null;
+                                        } catch (e) { return null; }
+                                    })()}
+                                </div>
+                            </div>
+                        )}
+
+                        <h3 className="text-lg font-black text-slate-900 mb-4 uppercase tracking-widest text-sm">Contenu du Cours</h3>
+                        {revision.text_content}
+                    </div>
+                </div>
+
+                <div className="flex justify-center">
+                    <button
+                        onClick={handleRetry}
+                        className="px-8 py-4 bg-indigo-600 text-white font-black rounded-2xl shadow-xl shadow-indigo-200 hover:bg-indigo-700 hover:scale-105 transition-all active:scale-95"
+                    >
+                        📝 Refaire le Quiz
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/features/settings/SettingsPage.tsx b/frontend/src/features/settings/SettingsPage.tsx
new file mode 100644
index 0000000..db73844
--- /dev/null
+++ b/frontend/src/features/settings/SettingsPage.tsx
@@ -0,0 +1,170 @@
+import { useForm } from 'react-hook-form';
+import { useAuth } from '../../stores/useAuth';
+import { api } from '../../lib/api';
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+
+
+interface SettingsForm {
+    openrouter_api_key: string;
+}
+
+interface ValidationStatus {
+    valid: boolean;
+    error?: string;
+}
+
+export const SettingsPage = () => {
+    const { user, checkAuth } = useAuth();
+    const navigate = useNavigate();
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+    const [validationStatus, setValidationStatus] = useState<ValidationStatus | null>(null);
+    const [isValidating, setIsValidating] = useState(false);
+
+    const { register, handleSubmit, formState: { isSubmitting } } = useForm<SettingsForm>({
+        defaultValues: {
+            openrouter_api_key: user?.openrouter_api_key || ''
+        }
+    });
+
+    // Check validation status on mount if key exists
+    useEffect(() => {
+        if (user?.openrouter_api_key) {
+            validateApiKey();
+        }
+    }, []);
+
+    const validateApiKey = async () => {
+        setIsValidating(true);
+        try {
+            const response = await api.get<ValidationStatus>('/auth/validate-api-key');
+            setValidationStatus(response.data);
+        } catch (err) {
+            setValidationStatus({ valid: false, error: 'Failed to validate' });
+        } finally {
+            setIsValidating(false);
+        }
+    };
+
+    const onSubmit = async (data: SettingsForm) => {
+        try {
+            await api.patch('/auth/users/me', data);
+            await checkAuth();
+            setSuccessMessage("API Key saved successfully!");
+            setTimeout(() => setSuccessMessage(null), 3000);
+            // Validate after save
+            if (data.openrouter_api_key) {
+                validateApiKey();
+            } else {
+                setValidationStatus(null);
+            }
+        } catch (err) {
+            console.error("Failed to update settings", err);
+        }
+    };
+
+    return (
+        <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+            <div className="flex items-center justify-between mb-8">
+                <h1 className="text-4xl font-black text-slate-900 tracking-tight">Paramètres</h1>
+                <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    onClick={() => navigate('/parent-hub')}
+                    className="inline-flex items-center px-6 py-3 bg-white border-2 border-slate-100 text-slate-600 font-bold rounded-2xl hover:bg-slate-50 hover:border-slate-200 transition-all shadow-sm"
+                >
+                    <svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+                    </svg>
+                    Retour
+                </motion.button>
+
+            </div>
+
+            <div className="bg-white rounded-[2.5rem] shadow-xl shadow-slate-200/50 border border-slate-50 overflow-hidden">
+                <div className="p-8 md:p-12">
+                    <div className="flex items-center gap-4 mb-8">
+                        <div className="p-4 bg-indigo-50 rounded-2xl text-indigo-600">
+                            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                            </svg>
+                        </div>
+                        <div>
+                            <h3 className="text-2xl font-black text-slate-900">Configuration IA</h3>
+                            <p className="text-slate-500 font-medium">Configurez l'intelligence artificielle pour activer les fonctions de révision.</p>
+                        </div>
+                    </div>
+
+                    {validationStatus && (
+                        <div className={`mb-8 p-4 rounded-2xl border-2 ${validationStatus.valid ? 'bg-emerald-50 border-emerald-100' : 'bg-red-50 border-red-100'}`}>
+                            <div className="flex items-center">
+                                {validationStatus.valid ? (
+                                    <>
+                                        <div className="p-2 bg-emerald-500 rounded-lg text-white mr-3">
+                                            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
+                                            </svg>
+                                        </div>
+                                        <span className="text-emerald-700 font-black uppercase tracking-wider text-sm">Clé API Valide</span>
+                                    </>
+                                ) : (
+                                    <>
+                                        <div className="p-2 bg-red-500 rounded-lg text-white mr-3">
+                                            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M6 18L18 6M6 6l12 12"></path>
+                                            </svg>
+                                        </div>
+                                        <span className="text-red-700 font-black uppercase tracking-wider text-sm">
+                                            {validationStatus.error === 'Failed to validate' ? 'Erreur de connexion' : 'Clé API Invalide'}
+                                        </span>
+                                    </>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                        <div>
+                            <label htmlFor="api_key" className="block text-sm font-bold text-slate-700 mb-2 ml-1 uppercase tracking-wider">Clé API OpenRouter</label>
+                            <div className="flex flex-col md:flex-row gap-4">
+                                <input
+                                    type="password"
+                                    id="api_key"
+                                    {...register('openrouter_api_key')}
+                                    className="flex-1 px-5 py-4 rounded-2xl bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white transition-all font-bold outline-none text-slate-900 placeholder:text-slate-300"
+                                    placeholder="sk-or-v1-..."
+                                />
+                                <div className="flex gap-3">
+                                    <button
+                                        type="submit"
+                                        disabled={isSubmitting}
+                                        className="inline-flex items-center px-8 py-4 bg-indigo-600 text-white font-black rounded-2xl hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 disabled:opacity-50 active:scale-95 whitespace-nowrap"
+                                    >
+                                        {isSubmitting ? 'Enregistrement...' : 'Enregistrer'}
+                                    </button>
+                                    <button
+                                        type="button"
+                                        onClick={validateApiKey}
+                                        disabled={isValidating}
+                                        className="inline-flex items-center px-8 py-4 bg-white border-2 border-slate-100 text-slate-600 font-black rounded-2xl hover:bg-slate-50 transition-all disabled:opacity-50 active:scale-95 whitespace-nowrap"
+                                    >
+                                        {isValidating ? 'Test en cours...' : 'Tester la connexion'}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+
+                    {successMessage && (
+                        <div className="mt-6 flex items-center gap-2 text-emerald-600 font-bold bg-emerald-50 py-3 px-5 rounded-xl border border-emerald-100 animate-in slide-in-from-top-2">
+                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path></svg>
+                            Clé API enregistrée avec succès !
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..6c2d1e3
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: theme('fontFamily.sans');
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: #FDFCF8;
+  /* cream */
+  color: #1E293B;
+  /* slate-800 */
+}
+
+@font-face {
+  font-family: 'OpenDyslexic';
+  src: url('./assets/fonts/OpenDyslexic-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.font-dyslexic {
+  font-family: 'OpenDyslexic', sans-serif !important;
+  line-height: 1.6 !important;
+}
+
+.font-dyslexic p,
+.font-dyslexic h1,
+.font-dyslexic h2,
+.font-dyslexic h3,
+.font-dyslexic span,
+.font-dyslexic div,
+.font-dyslexic button,
+.font-dyslexic a {
+  font-family: 'OpenDyslexic', sans-serif !important;
+}
+
+/* Custom Scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #E2E8F0;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #CBD5E1;
+}
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
new file mode 100644
index 0000000..59249f5
--- /dev/null
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,550 @@
+import { Link } from 'react-router-dom';
+import { useAuth } from '../stores/useAuth';
+
+import { UsageWidget } from '../features/dashboard/UsageWidget';
+import { GamificationWidget } from '../features/dashboard/GamificationWidget';
+import { MasteryWidget } from '../features/dashboard/MasteryWidget';
+import { ActivityTimeline } from '../features/dashboard/ActivityTimeline';
+import { RecentRevisionsWidget } from '../features/dashboard/RecentRevisionsWidget';
+import { LogOut, Flame } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+// --- Avatar Configuration (Original Fun-Emoji Style) ---
+const AVATAR_SEEDS = [
+    'Felix', 'Aneka', 'Zoe', 'Marc', 'Trouble', 'Coco', 'Sasha', 'Jack',
+    'Lulu', 'Bibi', 'Mimi', 'Titi', 'Gigi', 'Nana', 'Kiki', 'Pupu',
+    'Riri', 'Fifi', 'Loulou', 'Pipo', 'Pepa', 'Papi', 'Pomo', 'Pumi'
+];
+
+// --- Badges Configuration (Modern 30+ System) ---
+type BadgeRarity = 'BRONZE' | 'SILVER' | 'GOLD' | 'PLATINUM';
+interface BadgeDef {
+    code: string;
+    label: string;
+    description: string;
+    icon: string;
+    rarity: BadgeRarity;
+    category: string;
+}
+
+const ALL_BADGES: BadgeDef[] = [
+    // --- Les Débuts ---
+    { code: 'FIRST_STEPS', label: 'Premiers Pas', description: 'Ton tout premier quiz terminé !', icon: '🌱', rarity: 'BRONZE', category: 'Débuts' },
+    { code: 'PROFILE_MASTER', label: 'Bien chez soi', description: 'Personnalisation de ton avatar réussie.', icon: '🖼️', rarity: 'BRONZE', category: 'Débuts' },
+    { code: 'QUICK_START', label: 'Vite fait, bien fait', description: 'Premier exercice complété en moins de 2 minutes.', icon: '⚡', rarity: 'BRONZE', category: 'Débuts' },
+
+    // --- L'Érudit (Matières) ---
+    { code: 'MATH_CHAMP', label: 'Génie Maths', description: 'Atteins 80% de maîtrise en Mathématiques.', icon: '📐', rarity: 'SILVER', category: 'Savoir' },
+    { code: 'FRANCAIS_EXPERT', label: 'Molière en herbe', description: 'Maîtrise parfaite des bases du Français.', icon: '📚', rarity: 'SILVER', category: 'Savoir' },
+    { code: 'SCIENCE_STAR', label: 'P’tit Scientifique', description: 'Exploration des sciences complétée avec succès.', icon: '🧪', rarity: 'SILVER', category: 'Savoir' },
+    { code: 'GLOBAL_MASTER', label: 'Savant Fou', description: 'Atteins le niveau 20 dans toutes les matières.', icon: '🌎', rarity: 'GOLD', category: 'Savoir' },
+    { code: 'ENCYCLOPEDIE', label: 'L’Encyclopédie', description: 'Réponds correctement à 500 questions.', icon: '📖', rarity: 'PLATINUM', category: 'Savoir' },
+
+    // --- Le Marathonien (Assiduité) ---
+    { code: 'STREAK_3', label: 'Le Triplé', description: 'Révise pendant 3 jours consécutifs.', icon: '🥉', rarity: 'BRONZE', category: 'Marathon' },
+    { code: 'STREAK_7', label: 'Une Semaine au Top', description: '7 jours de révisions sans interruption !', icon: '🥈', rarity: 'SILVER', category: 'Marathon' },
+    { code: 'STREAK_30', label: 'Légende Mensuelle', description: '30 jours de folie ! Rien ne t’arrête.', icon: '🥇', rarity: 'GOLD', category: 'Marathon' },
+    { code: 'WEEKENDER', label: 'Guerrier du WE', description: 'Révise même le samedi et le dimanche.', icon: '📅', rarity: 'SILVER', category: 'Marathon' },
+    { code: 'EARLY_BIRD', label: 'Lève-tôt', description: 'Fais un quiz avant 8h du matin.', icon: '🌅', rarity: 'BRONZE', category: 'Marathon' },
+    { code: 'NIGHT_OWL', label: 'Oiseau de Nuit', description: 'Révise après 20h le soir.', icon: '🦉', rarity: 'BRONZE', category: 'Marathon' },
+
+    // --- L'Éclair (Performance) ---
+    { code: 'ON_FIRE', label: 'On Fire', description: 'Enchaîne 10 bonnes réponses d’affilée.', icon: '🔥', rarity: 'SILVER', category: 'Performance' },
+    { code: 'PERFECT_SCORE', label: 'Sans Faute', description: 'Obtiens 100% à un quiz difficile.', icon: '🎯', rarity: 'GOLD', category: 'Performance' },
+    { code: 'SPEED_DEMON', label: 'Éclair Argenté', description: 'Termine un quiz en un temps record.', icon: '🏎️', rarity: 'SILVER', category: 'Performance' },
+    { code: 'UNSTOPPABLE', label: 'Invincible', description: '50 bonnes réponses sans aucune erreur.', icon: '💎', rarity: 'GOLD', category: 'Performance' },
+    { code: 'SNIPER', label: 'Sniper Or', description: 'Précision de 95% sur l’ensemble de la semaine.', icon: '🏹', rarity: 'GOLD', category: 'Performance' },
+
+    // --- Social & Fun ---
+    { code: 'FEEDBACK_FAN', label: 'Curieux', description: 'Consulte tes erreurs après un quiz.', icon: '🧐', rarity: 'BRONZE', category: 'Découverte' },
+    { code: 'ZEN_MASTER', label: 'Maître Zen', description: 'Passe 1 heure totale en mode concentration.', icon: '🧘', rarity: 'SILVER', category: 'Découverte' },
+    { code: 'LEVEL_UP_FAST', label: 'Ascension Fulgurante', description: 'Gagne 2 niveaux en une seule journée.', icon: '🚀', rarity: 'GOLD', category: 'Performance' },
+    { code: 'LUCKY_STAR', label: 'Étoile Chanceuse', description: 'Débloque un badge caché.', icon: '✨', rarity: 'SILVER', category: 'Découverte' },
+    { code: 'TREASURE_HUNTER', label: 'Chasseur de Trésors', description: 'Débloque 15 badges différents.', icon: '🏴‍☠️', rarity: 'GOLD', category: 'Collection' },
+    { code: 'TRUE_LEGEND', label: 'La Vraie Légende', description: 'Atteins le niveau 50.', icon: '👑', rarity: 'PLATINUM', category: 'Collection' },
+    { code: 'COMPLETIONIST', label: 'Le Collectionneur', description: 'Obtiens tous les badges du jeu.', icon: '🏆', rarity: 'PLATINUM', category: 'Collection' },
+
+    // Extra variety
+    { code: 'BRAIN_POWER', label: 'Super Cerveau', description: 'Réponds à 20 questions de logique.', icon: '🧠', rarity: 'SILVER', category: 'Savoir' },
+    { code: 'LITERATURE_LOVER', label: 'Plume d’Or', description: 'Excellence en littérature.', icon: '✒️', rarity: 'GOLD', category: 'Savoir' },
+    { code: 'HISTORY_BUFF', label: 'Voyageur Temporel', description: 'Expert en Histoire.', icon: '⏳', rarity: 'SILVER', category: 'Savoir' },
+    { code: 'ART_CRITIC', label: 'Petit Artiste', description: 'Premier badge en Arts.', icon: '🎨', rarity: 'BRONZE', category: 'Savoir' },
+    { code: 'MUSIC_MAESTRO', label: 'Mélomane', description: 'Rythme de révision parfait.', icon: '🎵', rarity: 'BRONZE', category: 'Performance' },
+];
+
+function BadgeGalleryModal({ isOpen, onClose, unlockedBadges }: { isOpen: boolean, onClose: () => void, unlockedBadges: string[] }) {
+    const categories = Array.from(new Set(ALL_BADGES.map(b => b.category)));
+
+    // Gamified Medal Styles
+    const getBadgeStyle = (_rarity: BadgeRarity, isUnlocked: boolean) => {
+        const base = "relative flex flex-col items-center text-center transition-all duration-300 transform active:scale-95 group";
+
+        if (!isUnlocked) {
+            return `${base} opacity-60 grayscale scale-95`;
+        }
+
+        // Add hover:z-50 to ensure the badge and its tooltip appear on top of siblings
+        return `${base} hover:scale-110 hover:-translate-y-1 hover:brightness-110 hover:z-50`;
+    };
+
+    const getMedalClass = (rarity: BadgeRarity, isUnlocked: boolean) => {
+        const base = "relative w-16 h-18 sm:w-20 sm:h-22 p-4 flex items-center justify-center mb-2 shadow-lg transition-all duration-500 overflow-hidden";
+
+        // Custom "Medal" shape using clip-path or complex rounding
+        // Shield shape approximation with border-radius
+        const shape = "rounded-[20%_20%_50%_50%]";
+
+        if (!isUnlocked) {
+            return `${base} ${shape} bg-slate-200 border-2 border-slate-300`;
+        }
+
+        switch (rarity) {
+            case 'PLATINUM':
+                return `${base} ${shape} bg-gradient-to-b from-indigo-100 via-purple-100 to-indigo-300 border-2 border-white shadow-indigo-200/50 ring-2 ring-purple-400/20`;
+            case 'GOLD':
+                return `${base} ${shape} bg-gradient-to-b from-yellow-200 via-amber-300 to-orange-400 border-2 border-white shadow-amber-200/50 ring-2 ring-yellow-400/30`;
+            case 'SILVER':
+                return `${base} ${shape} bg-gradient-to-b from-slate-100 via-blue-100 to-slate-400 border-2 border-white shadow-blue-100/50 ring-2 ring-blue-300/20`;
+            default: // BRONZE
+                return `${base} ${shape} bg-gradient-to-b from-orange-100 via-orange-300 to-red-400 border-2 border-white shadow-orange-200/50 ring-2 ring-orange-400/20`;
+        }
+    };
+
+    const getRarityLabel = (rarity: BadgeRarity) => {
+        switch (rarity) {
+            case 'PLATINUM': return "PLATINE";
+            case 'GOLD': return "OR";
+            case 'SILVER': return "ARGENT";
+            default: return "BRONZE";
+        }
+    };
+
+    const getRarityColor = (rarity: BadgeRarity) => {
+        switch (rarity) {
+            case 'PLATINUM': return "text-indigo-600";
+            case 'GOLD': return "text-amber-600";
+            case 'SILVER': return "text-blue-600";
+            default: return "text-orange-700";
+        }
+    };
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-gray-900/40 backdrop-blur-md">
+                    <div className="absolute inset-0" onClick={onClose} />
+
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95, y: 30 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.95, y: 30 }}
+                        className="relative z-10 bg-white/95 rounded-[2.5rem] shadow-2xl w-full max-w-4xl max-h-[85vh] overflow-hidden flex flex-col border border-white/20"
+                    >
+                        {/* Header */}
+                        <div className="p-8 border-b border-gray-100 flex justify-between items-center bg-white/80 sticky top-0 z-20 backdrop-blur-sm">
+                            <div>
+                                <h3 className="text-3xl font-black text-gray-900 tracking-tight">Ma Collection 🏆</h3>
+                                <div className="mt-2 flex items-center gap-3">
+                                    <div className="h-2 w-48 bg-gray-100 rounded-full overflow-hidden border border-gray-200">
+                                        <div
+                                            className="h-full bg-gradient-to-r from-indigo-500 to-purple-600 transition-all duration-1000"
+                                            style={{ width: `${(unlockedBadges.length / ALL_BADGES.length) * 100}%` }}
+                                        />
+                                    </div>
+                                    <span className="text-xs font-black text-indigo-600">
+                                        {unlockedBadges.length} DE {ALL_BADGES.length} DÉBLOQUÉS
+                                    </span>
+                                </div>
+                            </div>
+                            <button onClick={onClose} className="p-3 bg-gray-50 hover:bg-gray-100 rounded-2xl transition-all active:scale-95 text-gray-400">
+                                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        {/* Content */}
+                        <div className="flex-1 overflow-y-auto p-8 space-y-12 scrollbar-hide">
+                            {categories.map(category => (
+                                <div key={category} className="space-y-6">
+                                    <h4 className="flex items-center gap-3 text-sm font-black uppercase tracking-[0.2em] text-gray-400">
+                                        <span className="h-px flex-1 bg-gray-100"></span>
+                                        {category}
+                                        <span className="h-px flex-1 bg-gray-100"></span>
+                                    </h4>
+
+                                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 gap-y-10">
+                                        {ALL_BADGES.filter(b => b.category === category).map(badge => {
+                                            const isUnlocked = unlockedBadges.includes(badge.code);
+                                            return (
+                                                <div
+                                                    key={badge.code}
+                                                    className={getBadgeStyle(badge.rarity, isUnlocked)}
+                                                >
+                                                    {/* Medal Body */}
+                                                    <div className={getMedalClass(badge.rarity, isUnlocked)}>
+                                                        {/* Inner Glossy Effect */}
+                                                        {isUnlocked && <div className="absolute top-0 left-0 w-full h-1/2 bg-white/20 -skew-x-12 translate-x-[-20%] pointer-events-none" />}
+
+                                                        <span className={`text-4xl sm:text-5xl drop-shadow-md select-none ${!isUnlocked ? 'filter-none grayscale' : ''}`}>
+                                                            {badge.icon}
+                                                        </span>
+                                                    </div>
+
+                                                    {/* Badge Info */}
+                                                    <div className="space-y-1 mt-1">
+                                                        <h5 className="text-[11px] font-black leading-tight text-gray-900 uppercase tracking-tight">
+                                                            {badge.label}
+                                                        </h5>
+                                                        <span className={`text-[8px] font-black uppercase tracking-widest ${getRarityColor(badge.rarity)}`}>
+                                                            {getRarityLabel(badge.rarity)}
+                                                        </span>
+                                                    </div>
+
+                                                    {/* Gamified Hover Tooltip (Top) */}
+                                                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-32 opacity-0 group-hover:opacity-100 transition-all pointer-events-none z-50 transform translate-y-2 group-hover:translate-y-0">
+                                                        <div className="bg-gray-900 text-white p-3 rounded-xl shadow-2xl border border-white/10 text-center ring-4 ring-black/5 relative">
+                                                            <p className="text-[10px] font-bold leading-relaxed">{badge.description}</p>
+                                                            {/* Arrow pointing down */}
+                                                            <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-900 rotate-45" />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+}
+
+function getAvatarUrl(seed: string) {
+    return `https://api.dicebear.com/7.x/fun-emoji/svg?seed=${seed}&radius=50`;
+}
+
+function AvatarSelector({ isOpen, onClose }: { isOpen: boolean, onClose: () => void }) {
+    const { updateProfile } = useAuth();
+    const [sending, setSending] = useState(false);
+
+    const handleSelect = async (seed: string) => {
+        setSending(true);
+        const url = getAvatarUrl(seed);
+        try {
+            await updateProfile({ avatar_url: url });
+            onClose();
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setSending(false);
+        }
+    };
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+                    <div className="absolute inset-0" onClick={onClose} />
+
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.9, y: 20 }}
+                        className="relative z-10 bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-gray-100"
+                    >
+                        <div className="p-6">
+                            <div className="flex justify-between items-center mb-6">
+                                <h3 className="text-xl font-bold text-gray-900">Choisis ton Avatar</h3>
+                                <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <div className="grid grid-cols-4 gap-3 max-h-[400px] overflow-y-auto p-1 scrollbar-hide">
+                                {AVATAR_SEEDS.map((seed) => (
+                                    <button
+                                        key={seed}
+                                        onClick={() => handleSelect(seed)}
+                                        disabled={sending}
+                                        className="aspect-square flex items-center justify-center p-2 bg-gray-50 rounded-full hover:bg-indigo-50 hover:scale-110 active:scale-95 transition-all outline-none border-2 border-transparent hover:border-indigo-200"
+                                    >
+                                        <img src={getAvatarUrl(seed)} alt={seed} className="w-full h-full object-contain" />
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+}
+
+// Function to render avatar content
+function AvatarDisplay({ url, size = "w-9 h-9", fontSize = "text-xl" }: { url: string | null, size?: string, fontSize?: string }) {
+    if (!url) return <div className={`${size} rounded-full bg-gray-200 flex items-center justify-center text-gray-400`}>?</div>;
+
+    // Check if it's a URL or a plain emoji
+    const isEmoji = !url.startsWith('http') && !url.startsWith('data:') && !url.includes('/');
+
+    return (
+        <div className={`${size} rounded-full bg-white border border-gray-200 overflow-hidden flex items-center justify-center shadow-sm`}>
+            {isEmoji ? (
+                <span className={fontSize}>{url}</span>
+            ) : (
+                <img src={url} alt="Avatar" className="w-full h-full object-cover" />
+            )}
+        </div>
+    );
+}
+
+// --- Dyslexia Toggle Button ---
+function DyslexiaToggle() {
+    const [isDyslexic, setIsDyslexic] = useState(() => {
+        return localStorage.getItem('dyslexic-mode') === 'true';
+    });
+
+    useEffect(() => {
+        if (isDyslexic) {
+            document.body.classList.add('font-dyslexic');
+        } else {
+            document.body.classList.remove('font-dyslexic');
+        }
+        localStorage.setItem('dyslexic-mode', String(isDyslexic));
+    }, [isDyslexic]);
+
+    return (
+        <button
+            onClick={() => setIsDyslexic(!isDyslexic)}
+            className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-bold transition-all ${isDyslexic
+                ? 'bg-indigo-100 text-indigo-700 border-indigo-200 shadow-inner'
+                : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50'
+                }`}
+            title="Activer la police adaptée pour la dyslexie"
+        >
+            <span className="text-lg leading-none">Aa</span>
+            <span className="hidden sm:inline">{isDyslexic ? 'Mode Lecture' : 'Dyslexie'}</span>
+        </button>
+    );
+}
+
+export default function DashboardPage() {
+    const { user, activeLearner, logout } = useAuth();
+    const [isAvatarPickerOpen, setIsAvatarPickerOpen] = useState(false);
+    const [isBadgeGalleryOpen, setIsBadgeGalleryOpen] = useState(false);
+
+    // Get recently unlocked badges (last 4)
+    const recentBadges = activeLearner?.badges?.slice(-4).reverse() || [];
+    const unlockedBadgeCodes = activeLearner?.badges?.map(b => b.badge_code) || [];
+    // Auto-generated avatar based on name
+    const currentAvatarUrl = activeLearner?.avatar_url;
+
+    return (
+        <div className="min-h-screen bg-[#f8fafc] flex flex-col font-sans text-gray-900 overflow-x-hidden">
+            <AvatarSelector isOpen={isAvatarPickerOpen} onClose={() => setIsAvatarPickerOpen(false)} />
+            <BadgeGalleryModal
+                isOpen={isBadgeGalleryOpen}
+                onClose={() => setIsBadgeGalleryOpen(false)}
+                unlockedBadges={unlockedBadgeCodes}
+            />
+            {/* Navigation */}
+            <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-40">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="flex justify-between h-16">
+                        <div className="flex items-center gap-6">
+                            <Link to="/dashboard" className="flex items-center gap-3">
+                                <img src="/logo.png" alt="Reviflow" className="w-8 h-8 rounded-lg shadow-sm object-cover bg-white" />
+                                <span className="text-lg font-bold tracking-tight text-gray-900">Reviflow</span>
+                            </Link>
+
+                            <div className="hidden sm:flex items-center space-x-1">
+                                <Link to="/dashboard" className="px-3 py-2 text-gray-900 bg-gray-100/50 rounded-md text-sm font-medium">
+                                    Tableau de bord
+                                </Link>
+                                {user?.role === 'parent' && (
+                                    <>
+                                        <Link to="/parent-hub" className="px-3 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-50 rounded-md text-sm font-medium transition-colors">
+                                            Espace Parent
+                                        </Link>
+                                    </>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Center: Date/Time */}
+                        <div className="hidden lg:flex flex-col items-center justify-center">
+                            <span className="text-sm font-black text-gray-900 capitalize">
+                                {new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
+                            </span>
+                            <span className="text-xs font-bold text-indigo-500 bg-indigo-50 px-2 py-0.5 rounded-full">
+                                {new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}
+                            </span>
+                        </div>
+
+                        <div className="flex items-center gap-4">
+                            {/* Dyslexia Toggle */}
+                            <DyslexiaToggle />
+
+                            <div className="h-6 w-px bg-gray-200 mx-1"></div>
+
+                            {/* Profile Info */}
+                            <div className="flex items-center gap-3">
+                                <div className="hidden md:block text-right">
+                                    <p className="text-sm font-bold text-gray-900 leading-none">
+                                        {activeLearner?.first_name || user?.first_name}
+                                    </p>
+                                </div>
+                                <button
+                                    onClick={() => user?.role === 'learner' && setIsAvatarPickerOpen(true)}
+                                    className="outline-none"
+                                    disabled={user?.role !== 'learner'}
+                                >
+                                    <AvatarDisplay url={currentAvatarUrl || null} />
+                                </button>
+                            </div>
+
+                            <button
+                                onClick={logout}
+                                className="p-2 text-gray-400 hover:text-red-900 transition-colors"
+                                title="Se déconnecter"
+                            >
+                                <LogOut className="w-4 h-4 ml-1" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            {/* Main Content */}
+            <main className="flex-grow py-8 px-4 sm:px-6">
+                <div className="max-w-6xl mx-auto">
+
+                    {/* Header Section */}
+                    <div className="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6 animate-in fade-in slide-in-from-top-2 duration-500">
+                        <div>
+                            <div className="flex flex-wrap gap-2 mb-2">
+                                {activeLearner && (activeLearner.streak_current || 0) > 0 && (
+                                    <div className="inline-flex items-center gap-1.5 px-2.5 py-0.5 bg-orange-50 border border-orange-100 rounded-full text-orange-700">
+                                        <Flame className="w-3 h-3 fill-orange-500 text-orange-500" />
+                                        <span className="text-[10px] font-bold uppercase tracking-wide">
+                                            {activeLearner.streak_current} jours
+                                        </span>
+                                    </div>
+                                )}
+                            </div>
+                            <h2 className="text-3xl font-bold text-gray-900 tracking-tight">
+                                Bonjour {activeLearner?.first_name}.
+                            </h2>
+                            <p className="text-gray-500 mt-1">Prêt à avancer sur tes objectifs ?</p>
+                        </div>
+
+                        <div className="flex gap-3">
+                            <Link
+                                to="/new"
+                                className="inline-flex items-center px-6 py-3 bg-gray-900 hover:bg-black text-white font-medium rounded-xl shadow-lg shadow-gray-200 hover:shadow-xl transition-all active:scale-95"
+                            >
+                                <span className="mr-2 text-lg">+</span>
+                                Ajouter un cours
+                            </Link>
+                        </div>
+                    </div>
+
+                    {/* Grid Layout */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.4 }}
+                        className="grid grid-cols-1 lg:grid-cols-12 gap-6"
+                    >
+                        {/* Left Column: Stats */}
+                        <div className="lg:col-span-4 space-y-6">
+                            <GamificationWidget />
+                            {/* TimeWidget Removed */}
+                            <RecentRevisionsWidget />
+                            {user?.role === 'parent' && <UsageWidget />}
+
+                            {user?.role === 'parent' && (
+                                <Link to="/parent-hub" className="block p-6 bg-indigo-900 rounded-xl text-white shadow-xl shadow-indigo-100 relative overflow-hidden group">
+                                    <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-3xl -mr-10 -mt-10"></div>
+                                    <div className="absolute bottom-0 left-0 w-24 h-24 bg-indigo-500/30 rounded-full blur-2xl -ml-5 -mb-5"></div>
+
+                                    <div className="relative z-10">
+                                        <h3 className="font-bold text-lg mb-1 group-hover:translate-x-1 transition-transform">Espace Parent</h3>
+                                        <p className="text-indigo-200 text-sm mb-4">Gérer les comptes et abonnements.</p>
+                                        <div className="flex items-center text-sm font-bold text-indigo-100">
+                                            Accéder <span className="ml-2">→</span>
+                                        </div>
+                                    </div>
+                                </Link>
+                            )}
+                        </div>
+
+                        {/* Right Column: Mastery & Activity */}
+                        <div className="lg:col-span-8 space-y-6">
+
+                            {/* Badges - Compact */}
+                            <div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm relative overflow-hidden">
+                                {/* Background Decorations */}
+                                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
+                                <div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
+
+                                <div className="relative z-10">
+                                    <div className="flex items-center justify-between mb-4">
+                                        <h3 className="font-bold text-gray-900">Succès Récents</h3>
+                                        <button
+                                            onClick={() => setIsBadgeGalleryOpen(true)}
+                                            className="text-[10px] font-black text-indigo-500 hover:text-indigo-700 uppercase tracking-widest bg-indigo-50 px-2 py-1 rounded-md transition-colors"
+                                        >
+                                            Collection →
+                                        </button>
+                                    </div>
+                                    <div className="flex gap-3 overflow-x-auto pb-4 scrollbar-hide">
+                                        {recentBadges.length > 0 ? (
+                                            recentBadges.map((badge) => {
+                                                const badgeDef = ALL_BADGES.find(b => b.code === badge.badge_code);
+                                                return (
+                                                    <div key={badge.badge_code} className="flex-shrink-0 flex items-center gap-3 px-4 py-2 rounded-full border border-indigo-100 bg-white text-indigo-900 shadow-md hover:scale-105 transition-all cursor-pointer ring-1 ring-indigo-50">
+                                                        <span className="text-xl drop-shadow-sm">{badgeDef?.icon || '🏆'}</span>
+                                                        <div className="flex flex-col">
+                                                            <span className="text-[10px] font-black leading-tight uppercase tracking-tight">{badgeDef?.label || badge.badge_code}</span>
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })
+                                        ) : (
+                                            <div className="flex items-center gap-3 px-4 py-3 rounded-xl border border-dashed border-gray-200 bg-gray-50/50 text-gray-400 w-full justify-center">
+                                                <span className="text-sm font-bold uppercase tracking-widest opacity-60">En attente de succès... 🚀</span>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <MasteryWidget />
+
+                            <div className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm min-h-[300px] relative overflow-hidden">
+                                {/* Background Decorations */}
+                                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
+                                <div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
+
+                                <div className="relative z-10">
+                                    <div className="flex items-center justify-between mb-6">
+                                        <h3 className="font-bold text-gray-900">Activités Récentes</h3>
+                                    </div>
+                                    <ActivityTimeline learnerId={activeLearner?.id} />
+                                </div>
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            </main>
+        </div>
+    );
+}
diff --git a/frontend/src/pages/ParentHubPage.tsx b/frontend/src/pages/ParentHubPage.tsx
new file mode 100644
index 0000000..5085bea
--- /dev/null
+++ b/frontend/src/pages/ParentHubPage.tsx
@@ -0,0 +1,340 @@
+import { useEffect, useState } from 'react';
+import { useAuth } from '../stores/useAuth';
+import { Users, Plus, TrendingUp, Settings as SettingsIcon, LogOut, X } from 'lucide-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { api } from '../lib/api';
+import { MasteryWidget } from '../features/dashboard/MasteryWidget';
+import { ActivityTimeline } from '../features/dashboard/ActivityTimeline';
+
+export const ParentHubPage = () => {
+    const [isCreating, setIsCreating] = useState(false);
+    const [selectedChildId, setSelectedChildId] = useState<string | null>(null); // For modal
+    const [newProfileName, setNewProfileName] = useState('');
+    const [newProfileUsername, setNewProfileUsername] = useState('');
+    const [newProfilePin, setNewProfilePin] = useState('');
+    const { user, fetchProfiles, learnerProfiles, logout, createChildAccount } = useAuth();
+    const [stats, setStats] = useState({ total_tokens: 0, total_cost: 0 });
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        fetchProfiles();
+
+        // Fetch Children Usage Stats
+        const fetchUsage = async () => {
+            if (!user) return;
+            try {
+                const res = await api.get('/auth/children');
+                const children = res.data;
+
+                let tokens = user.total_tokens_used || 0;
+                let cost = user.total_cost_usd || 0;
+
+                children.forEach((child: any) => {
+                    tokens += child.total_tokens_used || 0;
+                    cost += child.total_cost_usd || 0;
+                });
+
+                setStats({
+                    total_tokens: tokens,
+                    total_cost: cost
+                });
+            } catch (err) {
+                console.error("Failed to fetch children usage", err);
+            }
+        };
+
+        fetchUsage();
+    }, [user, fetchProfiles]);
+
+    const handleLogout = async () => {
+        await logout();
+        navigate('/login');
+    };
+
+    const handleCreate = async () => {
+        if (!newProfileName.trim() || !newProfileUsername.trim()) return;
+        try {
+            await createChildAccount({
+                username: newProfileUsername,
+                password: newProfilePin,
+                first_name: newProfileName,
+                avatar_url: `https://api.dicebear.com/7.x/fun-emoji/svg?seed=${newProfileName}`
+            });
+            setIsCreating(false);
+            setNewProfileName('');
+            setNewProfileUsername('');
+            setNewProfilePin('');
+        } catch (err) {
+            alert("Erreur lors de la création du compte enfant");
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-[#FDFCF8] flex flex-col">
+            {/* Navigation */}
+            <nav className="bg-white border-b border-gray-100 sticky top-0 z-40 shadow-sm/5">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="flex justify-between h-16">
+                        <div className="flex items-center">
+                            <Link to="/parent-hub" className="flex items-center group">
+                                <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white mr-3 shadow-indigo-100 shadow-lg group-hover:scale-110 transition-transform">
+                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                                    </svg>
+                                </div>
+                                <span className="text-xl font-black tracking-tight text-gray-900">Reviflow</span>
+                            </Link>
+
+                            <div className="hidden sm:ml-8 sm:flex sm:space-x-4">
+                                <Link to="/parent-hub" className="flex items-center gap-2 px-3 py-2 text-indigo-600 bg-indigo-50 rounded-lg text-sm font-bold transition-all">
+                                    <Users className="w-4 h-4" />
+                                    Espace Parent
+                                </Link>
+                                <Link to="/settings" className="flex items-center gap-2 px-3 py-2 text-gray-500 hover:text-indigo-600 hover:bg-gray-50 rounded-lg text-sm font-medium transition-all">
+                                    <SettingsIcon className="w-4 h-4" />
+                                    Paramètres
+                                </Link>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-4">
+                            <div className="flex items-center gap-3 pl-4 border-l border-gray-100">
+                                <div className="text-right">
+                                    <p className="text-sm font-bold text-gray-900 leading-none mb-1">{user?.first_name || 'Parent'}</p>
+                                    <p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Administrateur</p>
+                                </div>
+                            </div>
+                            <button
+                                onClick={handleLogout}
+                                className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all"
+                            >
+                                <LogOut className="w-5 h-5" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
+                <header className="mb-10">
+                    <h1 className="text-4xl font-black text-slate-900 tracking-tight">Bonjour, {user?.first_name || 'Parent'} ! 👋</h1>
+                    <p className="text-slate-500 mt-2 text-lg font-medium">Suivez les progrès de vos apprentis en toute sérénité.</p>
+                </header>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                    <div className="bg-white p-6 rounded-[2rem] shadow-xl shadow-slate-200/50 border border-slate-50">
+                        <div className="flex items-center space-x-4">
+                            <div className="p-4 bg-indigo-50 rounded-2xl text-indigo-600">
+                                <Users className="h-6 w-6" />
+                            </div>
+                            <div>
+                                <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">Apprentis</p>
+                                <p className="text-3xl font-black text-slate-900">{learnerProfiles.length}</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white p-6 rounded-[2rem] shadow-xl shadow-slate-200/50 border border-slate-50">
+                        <div className="flex items-center space-x-4">
+                            <div className="p-4 bg-amber-50 rounded-2xl text-amber-600">
+                                <TrendingUp className="h-6 w-6" />
+                            </div>
+                            <div>
+                                <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">Jetons AI</p>
+                                <p className="text-3xl font-black text-slate-900">{stats.total_tokens.toLocaleString()}</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-white p-6 rounded-[2rem] shadow-xl shadow-slate-200/50 border border-slate-50">
+                        <div className="flex items-center space-x-4">
+                            <div className="p-4 bg-emerald-50 rounded-2xl text-emerald-600">
+                                <div className="h-6 w-6 font-black flex items-center justify-center">€</div>
+                            </div>
+                            <div>
+                                <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">Coût estimé</p>
+                                <p className="text-3xl font-black text-slate-900">{stats.total_cost.toFixed(2)}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center justify-between mb-8">
+                    <h2 className="text-2xl font-black text-slate-900 tracking-tight border-b-4 border-indigo-100 pb-1">Mes Apprentis</h2>
+                    <button
+                        onClick={() => setIsCreating(true)}
+                        className="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-bold rounded-2xl hover:bg-indigo-700 transition-all shadow-xl shadow-indigo-100 hover:-translate-y-1 active:scale-95"
+                    >
+                        <Plus className="h-5 w-5 mr-2" />
+                        Nouvel accès enfant
+                    </button>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+                    {learnerProfiles.map(child => (
+                        <div key={child.id} className="bg-white rounded-[2.5rem] p-8 shadow-xl shadow-slate-200/50 border border-slate-50 hover:shadow-2xl hover:shadow-indigo-100 transition-all group">
+                            <div className="flex items-center space-x-5 mb-6">
+                                <div className="h-16 w-16 rounded-[1.5rem] bg-indigo-50 border-2 border-white shadow-md flex items-center justify-center text-2xl font-black text-indigo-400 overflow-hidden group-hover:scale-110 transition-transform">
+                                    {child.avatar_url && child.avatar_url.startsWith('http') ? (
+                                        <img src={child.avatar_url} alt="" className="h-full w-full object-cover" />
+                                    ) : (
+                                        <span className="text-4xl">{child.avatar_url || child.first_name[0].toUpperCase()}</span>
+                                    )}
+                                </div>
+                                <div>
+                                    <h3 className="text-xl font-black text-slate-900">{child.first_name}</h3>
+                                    <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">Niveau {child.level || 1}</p>
+                                </div>
+                            </div>
+                            <div className="space-y-4 pt-6 border-t border-slate-100">
+                                <div className="flex justify-between items-center">
+                                    <span className="text-sm font-medium text-slate-500">Série actuelle</span>
+                                    <span className="px-3 py-1 bg-orange-50 text-orange-600 text-xs font-black rounded-full border border-orange-100">
+                                        {child.streak_current || 0} JOURS 🔥
+                                    </span>
+                                </div>
+                                <div className="flex justify-between items-center text-sm">
+                                    <span className="text-slate-500 font-medium">Expérience</span>
+                                    <span className="font-bold text-slate-900">{child.xp || 0} XP</span>
+                                </div>
+                                <button
+                                    onClick={() => setSelectedChildId(child.id)}
+                                    className="w-full py-4 mt-2 bg-slate-50 text-slate-600 font-bold rounded-2xl hover:bg-indigo-50 hover:text-indigo-600 transition-all active:scale-95"
+                                >
+                                    Détails de progression
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+
+                    {learnerProfiles.length === 0 && (
+                        <div className="col-span-full py-20 text-center bg-slate-50/50 rounded-[3rem] border-4 border-dashed border-slate-100">
+                            <div className="p-6 bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-lg">
+                                <Users className="h-12 w-12 text-slate-200" />
+                            </div>
+                            <p className="text-slate-400 text-lg font-bold">Aucun compte apprenti créé pour le moment.</p>
+                            <button
+                                onClick={() => setIsCreating(true)}
+                                className="mt-6 text-indigo-600 font-black text-lg hover:underline underline-offset-8"
+                            >
+                                Créer maintenant →
+                            </button>
+                        </div>
+                    )}
+                </div>
+
+                {/* Create Profile Modal */}
+                {isCreating && (
+                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-in fade-in duration-300">
+                        <div className="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-md p-8 relative animate-in zoom-in-95 duration-300">
+                            <button
+                                onClick={() => setIsCreating(false)}
+                                className="absolute top-6 right-6 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors"
+                            >
+                                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                            </button>
+
+                            <h2 className="text-3xl font-black text-slate-900 mb-8 flex items-center gap-3">
+                                <div className="p-2 bg-indigo-50 rounded-xl">
+                                    <Plus className="w-6 h-6 text-indigo-600" />
+                                </div>
+                                Nouvel Apprenti
+                            </h2>
+
+                            <div className="space-y-6">
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2 ml-1 uppercase tracking-wider">Prénom de l'enfant</label>
+                                    <input
+                                        type="text"
+                                        value={newProfileName}
+                                        onChange={(e) => setNewProfileName(e.target.value)}
+                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white transition-all font-bold outline-none text-slate-900 placeholder:text-slate-300"
+                                        placeholder="Ex: Léo"
+                                        autoFocus
+                                    />
+                                </div>
+
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2 ml-1 uppercase tracking-wider">Identifiant (Login)</label>
+                                    <input
+                                        type="text"
+                                        value={newProfileUsername}
+                                        onChange={(e) => setNewProfileUsername(e.target.value.toLowerCase().replace(/\s/g, ''))}
+                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white transition-all font-bold outline-none text-slate-900 placeholder:text-slate-300"
+                                        placeholder="leo2026"
+                                    />
+                                    <p className="text-[10px] text-slate-400 mt-2 ml-1 font-bold uppercase tracking-widest">Utilisé pour se connecter sans email</p>
+                                </div>
+
+                                <div>
+                                    <label className="block text-sm font-bold text-slate-700 mb-2 ml-1 uppercase tracking-wider">Code PIN ou Mot de passe (4+ car.)</label>
+                                    <input
+                                        type="text"
+                                        value={newProfilePin}
+                                        onChange={(e) => setNewProfilePin(e.target.value)}
+                                        className="w-full px-5 py-4 rounded-2xl bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white transition-all font-bold text-center text-3xl tracking-widest outline-none text-indigo-600"
+                                        placeholder="1234"
+                                    />
+                                </div>
+
+                                <button
+                                    onClick={handleCreate}
+                                    disabled={!newProfileName.trim() || !newProfileUsername.trim() || newProfilePin.length < 4}
+                                    className="w-full py-5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-lg font-black rounded-2xl shadow-xl shadow-indigo-100 transition-all active:scale-[0.98] mt-4"
+                                >
+                                    Créer le compte
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Stats Modal */}
+                {selectedChildId && (
+                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-in fade-in duration-300">
+                        <div className="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-2xl p-8 relative animate-in zoom-in-95 duration-300 max-h-[90vh] overflow-y-auto">
+                            <button
+                                onClick={() => setSelectedChildId(null)}
+                                className="absolute top-6 right-6 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors"
+                            >
+                                <X className="w-6 h-6" />
+                            </button>
+
+                            <h2 className="text-3xl font-black text-slate-900 mb-8 flex items-center gap-3">
+                                📊 Progression
+                            </h2>
+
+                            <MasteryWidget learnerId={selectedChildId} />
+
+                            <div className="my-8 border-t border-slate-100"></div>
+
+                            <ActivityTimeline learnerId={selectedChildId} />
+
+                            <div className="mt-8 text-center">
+                                <button
+                                    onClick={() => setSelectedChildId(null)}
+                                    className="text-slate-500 font-bold hover:text-slate-800"
+                                >
+                                    Fermer
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </main>
+
+            <footer className="mt-auto py-12 border-t border-slate-100 bg-white">
+                <div className="max-w-7xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-6">
+                    <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 bg-slate-200 rounded-lg"></div>
+                        <span className="text-slate-400 font-black uppercase tracking-widest text-sm">Reviflow © 2026</span>
+                    </div>
+                    <div className="flex gap-10">
+                        <a href="#" className="text-slate-400 text-xs font-bold uppercase tracking-widest hover:text-indigo-600 transition-colors">Documentation</a>
+                        <a href="#" className="text-slate-400 text-xs font-bold uppercase tracking-widest hover:text-indigo-600 transition-colors">Privacy</a>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+};
diff --git a/frontend/src/stores/useAccessibility.ts b/frontend/src/stores/useAccessibility.ts
new file mode 100644
index 0000000..f4a3736
--- /dev/null
+++ b/frontend/src/stores/useAccessibility.ts
@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface AccessibilityState {
+    isDyslexic: boolean;
+    toggleDyslexic: () => void;
+}
+
+export const useAccessibility = create<AccessibilityState>()(
+    persist(
+        (set) => ({
+            isDyslexic: false,
+            toggleDyslexic: () => set((state) => ({ isDyslexic: !state.isDyslexic })),
+        }),
+        {
+            name: 'accessibility-storage',
+        }
+    )
+);
diff --git a/frontend/src/stores/useAuth.ts b/frontend/src/stores/useAuth.ts
new file mode 100644
index 0000000..6efe6fe
--- /dev/null
+++ b/frontend/src/stores/useAuth.ts
@@ -0,0 +1,224 @@
+import { create } from 'zustand';
+import { api } from '../lib/api';
+
+interface User {
+    id: string;
+    email: string;
+    username?: string;
+    is_active: boolean;
+    is_superuser: boolean;
+    role: 'parent' | 'learner';
+    first_name?: string;
+    openrouter_api_key?: string;
+    total_tokens_used?: number;
+    total_cost_usd?: number;
+    parent_id?: string;
+    has_parental_pin?: boolean;
+    learner_profile?: LearnerProfile;
+}
+
+interface LearnerProfile {
+    id: string;
+    first_name: string;
+    avatar_url: string | null;
+    streak_current?: number;
+    streak_max?: number;
+    xp?: number;
+    level?: number;
+    badges?: Badge[];
+}
+
+export interface Badge {
+    id: string;
+    badge_code: string;
+    earned_at: string;
+}
+
+interface AuthState {
+    user: User | null;
+    isAuthenticated: boolean;
+    isParentalModeActive: boolean;
+    learnerProfiles: LearnerProfile[];
+    activeLearner: LearnerProfile | null;
+    isLoading: boolean;
+    error: string | null;
+
+    // Actions
+    login: (credentials: any) => Promise<void>;
+    register: (credentials: any) => Promise<void>;
+    logout: () => Promise<void>;
+    checkAuth: (refresh?: boolean) => Promise<void>;
+    verifyParentalGate: (pinOrPassword: { pin?: string; password?: string }) => Promise<void>;
+    fetchProfiles: () => Promise<void>;
+    selectProfile: (learnerId: string) => Promise<void>;
+    updateProfile: (data: { first_name?: string; avatar_url?: string }) => Promise<void>;
+    createChildAccount: (data: { username: string; password?: string; first_name: string; avatar_url: string }) => Promise<void>;
+}
+
+export const useAuth = create<AuthState>((set, get) => ({
+    user: null,
+    isAuthenticated: false,
+    isParentalModeActive: false,
+    learnerProfiles: [],
+    activeLearner: null,
+    isLoading: true,
+    error: null,
+
+    login: async (credentials) => {
+        set({ isLoading: true, error: null });
+        try {
+            // 1. Login (Get Token/Cookie)
+            const formData = new URLSearchParams();
+            // In our system, 'username' in credentials can be Email OR Username
+            formData.append('username', credentials.username || credentials.email);
+            formData.append('password', credentials.password);
+
+            const loginResponse = await api.post('/auth/jwt/login', formData, {
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+            });
+
+            // Store the JWT token
+            const token = loginResponse.data.access_token;
+            if (token) {
+                localStorage.setItem('access_token', token);
+            }
+
+            // 2. Fetch User Profile
+            const userResponse = await api.get<User>('/auth/users/me');
+            const user = userResponse.data;
+
+            set({ user, isAuthenticated: true, isLoading: false, isParentalModeActive: user.role === 'parent' });
+
+            // 3. Auto-select profile if it's a learner
+            if (user.role === 'learner' && user.learner_profile) {
+                set({ activeLearner: user.learner_profile });
+                localStorage.setItem('active_learner_id', user.learner_profile.id);
+            } else {
+                // If parent, fetch all supervised child profiles
+                await get().fetchProfiles();
+            }
+        } catch (err: any) {
+            set({ error: 'Invalid credentials', isLoading: false });
+            throw err;
+        }
+    },
+
+    register: async (credentials) => {
+        set({ isLoading: true, error: null });
+        try {
+            await api.post('/auth/register', {
+                email: credentials.email,
+                password: credentials.password,
+                role: 'parent'
+            });
+            // Auto-login after register would happen here if desired
+            set({ isLoading: false });
+        } catch (err: any) {
+            set({ error: err.response?.data?.detail || 'Registration failed', isLoading: false });
+            throw err;
+        }
+    },
+
+    logout: async () => {
+        localStorage.removeItem('access_token');
+        set({ user: null, isAuthenticated: false, activeLearner: null });
+    },
+
+    checkAuth: async (refresh = false) => {
+        if (!refresh) set({ isLoading: true });
+        try {
+            const userResponse = await api.get<User>('/auth/users/me');
+            const user = userResponse.data;
+            set({ user, isAuthenticated: true, isParentalModeActive: user.role === 'parent' });
+
+            if (user.role === 'learner' && user.learner_profile) {
+                set({ activeLearner: user.learner_profile });
+            } else {
+                // Restore profiles for parent
+                const profileResponse = await api.get<LearnerProfile[]>('/auth/profiles');
+                const profiles = profileResponse.data;
+                set({ learnerProfiles: profiles });
+
+                // Restore active learner from localStorage (if parent previously selected one)
+                const storedLearnerId = localStorage.getItem('active_learner_id');
+                if (storedLearnerId) {
+                    const active = profiles.find(p => p.id === storedLearnerId);
+                    if (active) {
+                        set({ activeLearner: active });
+                    }
+                }
+            }
+            if (!refresh) set({ isLoading: false });
+        } catch (err) {
+            set({ user: null, isAuthenticated: false, isLoading: false, activeLearner: null });
+        }
+    },
+
+    verifyParentalGate: async (pinOrPassword) => {
+        try {
+            const response = await api.post('/auth/verify-parental-gate', pinOrPassword);
+            if (response.data.success) {
+                set({ isParentalModeActive: true });
+            } else {
+                throw new Error(response.data.error || 'Verification failed');
+            }
+        } catch (err: any) {
+            console.error("Parental verification failed", err);
+            throw err;
+        }
+    },
+
+    fetchProfiles: async () => {
+        try {
+            const response = await api.get<LearnerProfile[]>('/auth/profiles');
+            set({ learnerProfiles: response.data });
+        } catch (err) {
+            console.error("Failed to fetch profiles", err);
+        }
+    },
+
+    selectProfile: async (learnerId) => {
+        try {
+            const response = await api.post(`/auth/select-profile/${learnerId}`);
+            if (response.data.success) {
+                set({ activeLearner: response.data.profile });
+                // Store in local storage to persist choice
+                localStorage.setItem('active_learner_id', learnerId);
+            }
+        } catch (err) {
+            console.error("Failed to select profile", err);
+            throw err;
+        }
+    },
+    updateProfile: async (data: { first_name?: string; avatar_url?: string }) => {
+        try {
+            const response = await api.patch('/auth/profiles/me', data);
+            const updatedProfile = response.data;
+
+            set((state) => ({
+                user: state.user ? {
+                    ...state.user,
+                    learner_profile: state.user.role === 'learner' ? updatedProfile : state.user.learner_profile
+                } : null,
+                activeLearner: state.activeLearner?.id === updatedProfile.id ? updatedProfile : state.activeLearner,
+                learnerProfiles: state.learnerProfiles.map(p => p.id === updatedProfile.id ? updatedProfile : p)
+            }));
+        } catch (err) {
+            console.error("Failed to update profile", err);
+            throw err;
+        }
+    },
+
+    createChildAccount: async (data) => {
+        try {
+            const response = await api.post('/auth/profiles', data);
+            if (response.data.success) {
+                // Refresh profiles
+                await get().fetchProfiles();
+            }
+        } catch (err) {
+            console.error("Failed to create child account", err);
+            throw err;
+        }
+    }
+}));
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..ed37a5d
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,29 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                cream: '#FDFCF8',
+                'soft-indigo': '#6366F1',
+                success: '#22C55E', // Vibrant Green
+            },
+            fontFamily: {
+                sans: ['Inter', 'system-ui', 'sans-serif'],
+                dyslexic: ['OpenDyslexic', 'sans-serif'],
+            },
+            boxShadow: {
+                'soft-indigo': '0 10px 15px -3px rgba(99, 102, 241, 0.1), 0 4px 6px -2px rgba(99, 102, 241, 0.05)',
+            },
+            borderRadius: {
+                'xl': '0.75rem', // Reduced from 1rem default if needed, or keep standard
+                '2xl': '1rem',   // Standardize to 1rem for "clean" look (was often used as rounded-2xl)
+                '3xl': '1.5rem', // Reduced from larger values
+            }
+        },
+    },
+    plugins: [],
+}
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 0000000..a9b5a59
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..8a67f62
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..693f3ae
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: '../backend/static',
+    emptyOutDir: true,
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8000',
+        changeOrigin: true,
+      },
+    },
+  },
+  // PostCSS is handled by postcss.config.js automatically
+})
diff --git a/list_openrouter_models.py b/list_openrouter_models.py
new file mode 100644
index 0000000..d08ff2f
--- /dev/null
+++ b/list_openrouter_models.py
@@ -0,0 +1,21 @@
+
+import httpx
+import asyncio
+import json
+
+OPENROUTER_API_URL = "https://openrouter.ai/api/v1/models"
+
+async def list_models():
+    async with httpx.AsyncClient() as client:
+        response = await client.get(OPENROUTER_API_URL)
+        if response.status_code == 200:
+            models = response.json()["data"]
+            gemini_models = [m["id"] for m in models if "gemini" in m["id"] and "flash" in m["id"]]
+            print("Available Gemini Flash Models:")
+            for m in gemini_models:
+                print(f"- {m}")
+        else:
+            print(f"Error: {response.status_code} - {response.text}")
+
+if __name__ == "__main__":
+    asyncio.run(list_models())