feat(admin): add viewing full chat history in user list

apps/admin/src/App.tsx

@@ -317,7 +317,24 @@ function TrackDays() {
 function UserList() {
     const { apiKey } = useAuth();
     const [users, setUsers] = useState<any[]>([]); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(true);
+    const [selectedUser, setSelectedUser] = useState<any>(null); const [messages, setMessages] = useState<any[]>([]); const [loadingMsg, setLoadingMsg] = useState(false);
+
     useEffect(() => { fetch(`${API_URL}/v1/admin/users`, { headers: ah(apiKey!) }).then(r => r.json()).then(d => { setUsers(d.users || d); setTotal(d.total || 0); setLoading(false); }); }, []);
+
+    const viewMessages = async (userId: string) => {
+        setLoadingMsg(true); setSelectedUser({ id: userId });
+        try {
+            const res = await fetch(`${API_URL}/v1/admin/users/${userId}/messages`, { headers: ah(apiKey!) });
+            const data = await res.json();
+            setSelectedUser(data.user);
+            setMessages(data.messages || []);
+        } catch (e) {
+            alert("Erreur lors du chargement des messages.");
+        } finally {
+            setLoadingMsg(false);
+        }
+    };
+
     if (loading) return <div className="p-8 text-slate-400">Chargement...</div>;
     return (
         <div className="p-8">
@@ -325,7 +342,7 @@ function UserList() {
             <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
                 <table className="w-full text-sm">
                     <thead className="bg-slate-50 text-xs text-slate-500 uppercase">
-                        <tr>{['Téléphone', 'Nom', 'Langue', 'Secteur', 'Inscrip.', 'Réponses', 'Date'].map(h => <th key={h} className="px-5 py-3 text-left">{h}</th>)}</tr>
+                        <tr>{['Téléphone', 'Nom', 'Langue', 'Secteur', 'Inscrip.', 'Réponses', 'Date', 'Actions'].map(h => <th key={h} className="px-5 py-3 text-left">{h}</th>)}</tr>
                     </thead>
                     <tbody>
                         {users.map((u: any) => (
@@ -337,12 +354,58 @@ function UserList() {
                                 <td className="px-5 py-3 text-center">{u._count?.enrollments || 0}</td>
                                 <td className="px-5 py-3 text-center">{u._count?.responses || 0}</td>
                                 <td className="px-5 py-3 text-slate-400 text-xs">{new Date(u.createdAt).toLocaleDateString('fr-FR')}</td>
+                                <td className="px-5 py-3 text-right">
+                                    <button onClick={() => viewMessages(u.id)} className="text-xs bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-1.5 rounded-lg font-medium transition-colors">Conversation</button>
+                                </td>
                             </tr>
                         ))}
-                        {!users.length && <tr><td colSpan={7} className="px-5 py-8 text-center text-slate-400">Aucun utilisateur</td></tr>}
+                        {!users.length && <tr><td colSpan={8} className="px-5 py-8 text-center text-slate-400">Aucun utilisateur</td></tr>}
                     </tbody>
                 </table>
             </div>
+
+            {selectedUser && (
+                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+                    <div className="bg-slate-50 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
+                        <div className="bg-white px-6 py-4 flex items-center justify-between border-b border-slate-200">
+                            <div>
+                                <h3 className="font-bold text-slate-800">{selectedUser.name || 'Chat Utilisateur'}</h3>
+                                <p className="text-xs text-slate-500">{selectedUser.phone}</p>
+                            </div>
+                            <button onClick={() => { setSelectedUser(null); setMessages([]); }} className="p-2 hover:bg-slate-100 rounded-full"><X className="w-5 h-5 text-slate-500" /></button>
+                        </div>
+                        <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-[#e5ddd5]">
+                            {loadingMsg ? (
+                                <div className="text-center text-slate-500 py-10">Chargement de l'historique...</div>
+                            ) : messages.length === 0 ? (
+                                <div className="text-center text-slate-500 py-10 bg-white/50 rounded-xl">Aucun message pour cet utilisateur.</div>
+                            ) : (
+                                messages.map((m: any) => {
+                                    const isBot = m.direction === 'OUTBOUND';
+                                    return (
+                                        <div key={m.id} className={`flex ${isBot ? 'justify-start' : 'justify-end'}`}>
+                                            <div className={`max-w-[80%] rounded-2xl px-4 py-2.5 shadow-sm text-sm ${isBot ? 'bg-white text-slate-800 rounded-tl-none' : 'bg-[#dcf8c6] text-slate-900 rounded-tr-none'}`}>
+                                                {m.mediaUrl && (
+                                                    <div className="mb-2">
+                                                        {m.mediaUrl.endsWith('.mp3') || m.mediaUrl.endsWith('.ogg') || m.mediaUrl.endsWith('.webm') ?
+                                                            <audio src={m.mediaUrl} controls className="h-10 max-w-full" /> :
+                                                            <a href={m.mediaUrl} target="_blank" rel="noreferrer" className="text-blue-600 underline">Voir Media</a>
+                                                        }
+                                                    </div>
+                                                )}
+                                                {m.content && <p className="whitespace-pre-wrap">{m.content}</p>}
+                                                <p className={`text-[10px] mt-1 text-right ${isBot ? 'text-slate-400' : 'text-slate-500'}`}>
+                                                    {new Date(m.createdAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

apps/api/src/routes/admin.ts

@@ -69,6 +69,23 @@ export async function adminRoutes(fastify: FastifyInstance) {
         return { users, total, page, limit };
     });
 
+    fastify.get('/users/:userId/messages', async (req, reply) => {
+        const { userId } = req.params as { userId: string };
+        const messages = await prisma.message.findMany({
+            where: { userId },
+            orderBy: { createdAt: 'asc' },
+        });
+
+        const user = await prisma.user.findUnique({
+            where: { id: userId },
+            select: { id: true, name: true, phone: true }
+        });
+
+        if (!user) return reply.status(404).send({ error: 'User not found' });
+
+        return { user, messages };
+    });
+
     // ── Enrollments ────────────────────────────────────────────────────────────
     fastify.get('/enrollments', async () => {
         const enrollments = await prisma.enrollment.findMany({