changes

frontend/src/pages/Admin.jsx

@@ -1,72 +1,179 @@
-const MOCK_STATS = {
-  totalParticipants: 1248,
-  gainsRemis: 342,
-  gainsEnAttente: 906,
-  tauxParticipation: '78%',
+import { useState, useEffect } from 'react'
+import { getStatsApi, getUsersApi, drawWinnerApi, getWinnerApi } from '../services/admin'
+
+function StatCard({ label, value, sub }) {
+  return (
+    <div className="bg-white rounded-xl shadow p-4 text-center">
+      <p className="text-2xl sm:text-3xl font-bold text-green-700">{value ?? '—'}</p>
+      <p className="text-xs sm:text-sm text-gray-500 mt-1">{label}</p>
+      {sub && <p className="text-xs text-gray-400 mt-0.5">{sub}</p>}
+    </div>
+  )
 }
 
-const MOCK_USERS = [
-  { id: 1, name: 'Jean Dupont', email: 'jean.dupont@email.com', gains: 2 },
-  { id: 2, name: 'Marie Martin', email: 'marie.martin@email.com', gains: 1 },
-  { id: 3, name: 'Paul Bernard', email: 'paul.bernard@email.com', gains: 3 },
-]
-
 export default function Admin() {
+  const [stats, setStats] = useState(null)
+  const [users, setUsers] = useState([])
+  const [winner, setWinner] = useState(undefined)
+  const [drawing, setDrawing] = useState(false)
+  const [drawError, setDrawError] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    Promise.all([getStatsApi(), getUsersApi(), getWinnerApi()])
+      .then(([s, u, w]) => {
+        setStats(s)
+        setUsers(u.users)
+        setWinner(w)
+      })
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const handleDraw = async () => {
+    if (!window.confirm('Lancer le tirage au sort ? Cette action est irréversible.')) return
+    setDrawing(true)
+    setDrawError('')
+    try {
+      const data = await drawWinnerApi()
+      setWinner(data)
+    } catch (e) {
+      setDrawError(e.message)
+    } finally {
+      setDrawing(false)
+    }
+  }
+
+  if (loading) return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <p className="text-gray-400">Chargement...</p>
+    </div>
+  )
+
+  if (error) return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
+      <p className="text-red-500 text-sm">{error}</p>
+    </div>
+  )
+
   return (
     <div className="min-h-screen bg-gray-50 p-4 sm:p-6">
-      <div className="max-w-4xl mx-auto">
-        <h1 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6">Tableau de bord Admin</h1>
+      <div className="max-w-5xl mx-auto space-y-6">
 
-        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
-          {[
-            { label: 'Participants', value: MOCK_STATS.totalParticipants },
-            { label: 'Gains remis', value: MOCK_STATS.gainsRemis },
-            { label: 'En attente', value: MOCK_STATS.gainsEnAttente },
-            { label: 'Taux participation', value: MOCK_STATS.tauxParticipation },
-          ].map((stat) => (
-            <div key={stat.label} className="bg-white rounded-xl shadow p-3 sm:p-4 text-center">
-              <p className="text-xl sm:text-2xl font-bold text-green-700">{stat.value}</p>
-              <p className="text-xs sm:text-sm text-gray-500 mt-1">{stat.label}</p>
-            </div>
-          ))}
+        <h1 className="text-xl sm:text-2xl font-bold text-gray-800">Tableau de bord Admin</h1>
+
+        {/* Stats principales */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
+          <StatCard label="Participants" value={stats?.users} />
+          <StatCard label="Participations" value={stats?.participations} />
+          <StatCard label="Gains en attente" value={stats?.claimsPending} />
+          <StatCard label="Gains remis" value={stats?.claimsDelivered} />
         </div>
 
+        {/* Stats tickets */}
+        <div className="grid grid-cols-3 gap-3 sm:gap-4">
+          <StatCard label="Tickets total" value={stats?.ticketsTotal} />
+          <StatCard label="Tickets utilisés" value={stats?.ticketsUsed} />
+          <StatCard label="Tickets restants" value={stats?.ticketsRemaining} />
+        </div>
+
+        {/* Répartition par lot */}
+        {stats?.lotsStats?.length > 0 && (
+          <div className="bg-white rounded-xl shadow p-4 sm:p-6">
+            <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Répartition des lots</h2>
+            <div className="overflow-x-auto -mx-4 sm:mx-0">
+              <table className="w-full text-sm min-w-[480px]">
+                <thead>
+                  <tr className="text-left text-gray-500 border-b text-xs sm:text-sm">
+                    <th className="pb-2 px-4 sm:px-0">Lot</th>
+                    <th className="pb-2 px-4 sm:px-0 text-center">%</th>
+                    <th className="pb-2 px-4 sm:px-0 text-center">Tickets</th>
+                    <th className="pb-2 px-4 sm:px-0 text-center">Participations</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {stats.lotsStats.map((lot) => (
+                    <tr key={lot.id} className="border-b last:border-0">
+                      <td className="py-2.5 px-4 sm:px-0 font-medium text-gray-800 text-xs sm:text-sm">{lot.name}</td>
+                      <td className="py-2.5 px-4 sm:px-0 text-center text-gray-500 text-xs sm:text-sm">{lot.percentage}%</td>
+                      <td className="py-2.5 px-4 sm:px-0 text-center text-gray-600 text-xs sm:text-sm">{lot._count.tickets.toLocaleString('fr-FR')}</td>
+                      <td className="py-2.5 px-4 sm:px-0 text-center text-green-700 font-semibold text-xs sm:text-sm">{lot._count.participations}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
         {/* Tirage au sort */}
-        <div className="bg-white rounded-xl shadow p-4 sm:p-6 mb-4 sm:mb-6">
+        <div className="bg-white rounded-xl shadow p-4 sm:p-6">
           <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-3">Grand tirage au sort</h2>
-          <button
-            onClick={() => alert('TODO: connecter au backend')}
-            className="bg-green-700 hover:bg-green-800 text-white font-semibold px-5 sm:px-6 py-2 sm:py-2.5 rounded-lg transition-colors text-sm sm:text-base"
-          >
-            Lancer le tirage
-          </button>
+
+          {winner?.winner ? (
+            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+              <p className="text-green-700 font-semibold mb-1">🏆 Gagnant tiré au sort</p>
+              <p className="text-gray-800 font-medium">
+                {winner.winner.user.firstname} {winner.winner.user.lastname}
+              </p>
+              <p className="text-gray-500 text-sm">{winner.winner.user.email}</p>
+              <p className="text-gray-400 text-xs mt-1">
+                Lot : {winner.winner.prize}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              <button
+                onClick={handleDraw}
+                disabled={drawing}
+                className="bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white font-semibold px-5 py-2.5 rounded-lg transition-colors text-sm"
+              >
+                {drawing ? 'Tirage en cours...' : 'Lancer le tirage'}
+              </button>
+              {drawError && <p className="text-red-500 text-xs">{drawError}</p>}
+            </div>
+          )}
         </div>
 
         {/* Liste participants */}
         <div className="bg-white rounded-xl shadow p-4 sm:p-6">
-          <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Participants</h2>
+          <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">
+            Participants <span className="text-gray-400 font-normal text-sm">({users.length})</span>
+          </h2>
           <div className="overflow-x-auto -mx-4 sm:mx-0">
             <table className="w-full text-sm min-w-[400px]">
               <thead>
-                <tr className="text-left text-gray-500 border-b">
+                <tr className="text-left text-gray-500 border-b text-xs sm:text-sm">
                   <th className="pb-2 px-4 sm:px-0">Nom</th>
                   <th className="pb-2 px-4 sm:px-0">Email</th>
-                  <th className="pb-2 px-4 sm:px-0 text-right">Gains</th>
+                  <th className="pb-2 px-4 sm:px-0 text-right">Participations</th>
                 </tr>
               </thead>
               <tbody>
-                {MOCK_USERS.map((user) => (
+                {users.length === 0 && (
+                  <tr>
+                    <td colSpan={3} className="py-6 text-center text-gray-400 text-sm">
+                      Aucun participant pour le moment
+                    </td>
+                  </tr>
+                )}
+                {users.map((user) => (
                   <tr key={user.id} className="border-b last:border-0">
-                    <td className="py-3 px-4 sm:px-0 font-medium text-gray-800 whitespace-nowrap">{user.name}</td>
-                    <td className="py-3 px-4 sm:px-0 text-gray-500 text-xs sm:text-sm">{user.email}</td>
-                    <td className="py-3 px-4 sm:px-0 text-right text-green-700 font-semibold">{user.gains}</td>
+                    <td className="py-3 px-4 sm:px-0 font-medium text-gray-800 whitespace-nowrap text-xs sm:text-sm">
+                      {user.firstname} {user.lastname}
+                    </td>
+                    <td className="py-3 px-4 sm:px-0 text-gray-500 text-xs">{user.email}</td>
+                    <td className="py-3 px-4 sm:px-0 text-right text-green-700 font-semibold text-xs sm:text-sm">
+                      {user._count.participations}
+                    </td>
                   </tr>
                 ))}
               </tbody>
             </table>
           </div>
         </div>
+
       </div>
     </div>
   )

frontend/src/pages/MesGains.jsx

@@ -1,39 +1,6 @@
 import { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
 import { myGainsApi } from '../services/game'
-
-function TabNav({ active }) {
-  return (
-    <div className="flex border-b border-gray-200 mb-6">
-      <Link
-        to="/mes-gains"
-        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
-          active === 'gains'
-            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
-            : 'text-gray-400'
-        }`}
-      >
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" d="M20 12V22H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" />
-        </svg>
-        Mes gains
-      </Link>
-      <Link
-        to="/profile"
-        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
-          active === 'profile'
-            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
-            : 'text-gray-400'
-        }`}
-      >
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-        </svg>
-        Profile
-      </Link>
-    </div>
-  )
-}
+import UserNav from '../components/UserNav'
 
 function formatDate(dateStr) {
   return new Date(dateStr).toLocaleDateString('fr-FR', {
@@ -57,21 +24,9 @@ export default function MesGains() {
 
   return (
     <div className="min-h-screen bg-white max-w-sm mx-auto px-6 pt-6">
-      <TabNav active="gains" />
+      <UserNav active="gains" />
 
-      <Link
-        to="/saisir-code-unique"
-        className="flex items-center justify-center gap-2 w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors mb-6 text-sm"
-      >
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
-        </svg>
-        Saisir un nouveau code
-      </Link>
-
-      {loading && (
-        <p className="text-center text-gray-400 text-sm mt-8">Chargement...</p>
-      )}
+      {loading && <p className="text-center text-gray-400 text-sm mt-8">Chargement...</p>}
 
       {error && (
         <div className="px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
@@ -83,19 +38,13 @@ export default function MesGains() {
         <p className="text-center text-gray-400 text-sm mt-8">Aucun gain pour le moment.</p>
       )}
 
-      {/* Timeline */}
       <div className="relative">
         {gains.map((gain, index) => (
           <div key={gain.participationId} className="flex gap-4">
-            {/* Ligne verticale + cercle */}
             <div className="flex flex-col items-center">
               <div className="w-3 h-3 mt-1 rounded-full border-2 border-gray-400 flex-shrink-0" />
-              {index < gains.length - 1 && (
-                <div className="w-px flex-1 bg-gray-200 my-1" />
-              )}
+              {index < gains.length - 1 && <div className="w-px flex-1 bg-gray-200 my-1" />}
             </div>
-
-            {/* Contenu */}
             <div className={`flex-1 pb-6 ${index === 0 ? 'bg-gray-50 rounded-lg px-3 pt-1 -ml-1' : ''}`}>
               <p className="font-semibold text-gray-800 text-sm">{gain.lot}</p>
               <p className="text-gray-500 text-xs mt-1 leading-relaxed">{gain.description}</p>

frontend/src/pages/NotFound.jsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-white flex flex-col items-center justify-center px-6 text-center">
+
+      <p className="text-8xl sm:text-9xl font-bold text-[#006B6B] leading-none">404</p>
+
+      <h1 className="text-2xl sm:text-3xl font-bold italic font-serif text-gray-800 mt-4 mb-2">
+        Page introuvable
+      </h1>
+
+      <p className="text-gray-400 text-sm sm:text-base max-w-xs mb-8">
+        La page que vous recherchez n'existe pas ou a été déplacée.
+      </p>
+
+      <Link
+        to="/accueil"
+        className="bg-[#006B6B] hover:bg-[#005959] text-white font-medium px-8 py-3 rounded-lg transition-colors text-sm sm:text-base"
+      >
+        Retour à l'accueil
+      </Link>
+
+    </div>
+  )
+}

frontend/src/pages/Profile.jsx

@@ -1,41 +1,7 @@
-import { Link } from 'react-router-dom'
-
-function TabNav({ active }) {
-  return (
-    <div className="flex border-b border-gray-200 mb-6">
-      <Link
-        to="/mes-gains"
-        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
-          active === 'gains'
-            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
-            : 'text-gray-400'
-        }`}
-      >
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" d="M20 12V22H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" />
-        </svg>
-        Mes gains
-      </Link>
-      <Link
-        to="/profile"
-        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
-          active === 'profile'
-            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
-            : 'text-gray-400'
-        }`}
-      >
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-        </svg>
-        Profile
-      </Link>
-    </div>
-  )
-}
+import UserNav from '../components/UserNav'
 
 export default function Profile() {
   const user = JSON.parse(localStorage.getItem('user') || '{}')
-
   const initials = `${(user.firstname || '?')[0]}${(user.lastname || '?')[0]}`.toUpperCase()
 
   const handleSubmit = (e) => {
@@ -46,9 +12,8 @@ export default function Profile() {
 
   return (
     <div className="min-h-screen bg-white max-w-sm mx-auto px-6 pt-6">
-      <TabNav active="profile" />
+      <UserNav active="profile" />
 
-      {/* Avatar */}
       <div className="mb-6">
         <div className="w-14 h-14 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-lg font-bold">
           {initials}
@@ -62,21 +27,18 @@ export default function Profile() {
             {user.email || '—'}
           </div>
         </div>
-
         <div>
           <label className="block text-sm font-medium text-gray-800 mb-1">Nom</label>
           <div className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 bg-gray-50">
             {user.lastname || '—'}
           </div>
         </div>
-
         <div>
           <label className="block text-sm font-medium text-gray-800 mb-1">Prénom</label>
           <div className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 bg-gray-50">
             {user.firstname || '—'}
           </div>
         </div>
-
         <button
           type="submit"
           className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"

frontend/src/pages/SaisirCodeUnique.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { participateApi } from '../services/game'
+import UserNav from '../components/UserNav'
 
 export default function SaisirCodeUnique() {
   const navigate = useNavigate()
@@ -24,6 +25,8 @@ export default function SaisirCodeUnique() {
   return (
     <div className="min-h-screen bg-gray-50 flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
 
+      <UserNav active="code" />
+
       <div className="mb-8">
         <h1 className="text-2xl font-bold italic font-serif text-[#006B6B]">Saisir mon code gagnant</h1>
         <p className="text-gray-500 mt-2 text-sm">Saisissez le code présent sur votre ticket</p>

frontend/src/pages/Sitemap.jsx

@@ -0,0 +1,96 @@
+import { Link } from 'react-router-dom'
+
+const sections = [
+  {
+    title: 'Navigation principale',
+    links: [
+      { label: 'Accueil', to: '/accueil', desc: "Page d'accueil du jeu-concours" },
+      { label: 'Règles du jeu', to: '/regles-jeu', desc: 'Comment participer et que gagner' },
+      { label: 'Contact', to: '/contact', desc: 'Nous contacter' },
+    ],
+  },
+  {
+    title: 'Compte utilisateur',
+    links: [
+      { label: 'Connexion', to: '/connexion', desc: 'Se connecter à son espace' },
+      { label: 'Inscription', to: '/inscription', desc: 'Créer un compte participant' },
+      { label: 'Mon profil', to: '/profile', desc: 'Voir et modifier ses informations' },
+    ],
+  },
+  {
+    title: 'Jeu-concours',
+    links: [
+      { label: 'Saisir mon code', to: '/saisir-code-unique', desc: 'Entrer son code ticket' },
+      { label: 'Mes gains', to: '/mes-gains', desc: 'Historique de ses participations et lots' },
+    ],
+  },
+  {
+    title: 'Espaces professionnels',
+    links: [
+      { label: 'Espace employé', to: '/employe', desc: 'Vérifier et remettre un lot' },
+      { label: 'Tableau de bord admin', to: '/admin', desc: 'Statistiques et gestion du jeu' },
+    ],
+  },
+  {
+    title: 'Informations légales',
+    links: [
+      { label: 'Mentions légales', to: '/mentions-legales', desc: 'Informations légales du site' },
+      { label: 'Politique de confidentialité', to: '/confidentialite', desc: 'Gestion des données personnelles' },
+    ],
+  },
+]
+
+export default function Sitemap() {
+  return (
+    <main className="bg-green-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
+      <div className="max-w-4xl mx-auto">
+
+        <div className="mb-8 sm:mb-10">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-green-800 mb-2">
+            Plan du site
+          </h1>
+          <p className="text-gray-500 text-sm sm:text-base">
+            Retrouvez ici l'ensemble des pages disponibles sur le site Thé Tip Top.
+          </p>
+        </div>
+
+        <div className="grid sm:grid-cols-2 gap-6">
+          {sections.map((section) => (
+            <div key={section.title} className="bg-white rounded-2xl shadow p-5 sm:p-6">
+              <h2 className="text-base sm:text-lg font-bold text-green-700 mb-4 pb-2 border-b border-gray-100">
+                {section.title}
+              </h2>
+              <ul className="space-y-3">
+                {section.links.map((link) => (
+                  <li key={link.to}>
+                    <Link
+                      to={link.to}
+                      className="group flex items-start gap-3"
+                    >
+                      <svg
+                        className="w-4 h-4 mt-0.5 text-[#006B6B] flex-shrink-0"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                        viewBox="0 0 24 24"
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                      </svg>
+                      <div>
+                        <p className="text-sm font-medium text-gray-800 group-hover:text-[#006B6B] transition-colors">
+                          {link.label}
+                        </p>
+                        <p className="text-xs text-gray-400 mt-0.5">{link.desc}</p>
+                      </div>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+      </div>
+    </main>
+  )
+}