Ajout de la page Profile

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Participation from './pages/Participation'
 import MesGains from './pages/MesGains'
 import Employe from './pages/Employe'
 import Admin from './pages/Admin'
+import Profile from './pages/Profile'
 
 export default function App() {
   return (
@@ -17,6 +18,7 @@ export default function App() {
         <Route path="/mes-gains" element={<MesGains />} />
         <Route path="/employe" element={<Employe />} />
         <Route path="/admin" element={<Admin />} />
+        <Route path="/profile" element={<Profile />} />
       </Routes>
     </BrowserRouter>
   )

frontend/src/pages/Profile.jsx

@@ -0,0 +1,94 @@
+import { useState } from 'react'
+
+export default function Profile() {
+    const [form, setForm] = useState({
+        firstName: '',
+        lastName: '',
+        email: '',
+    })
+
+    const handleChange = (e) => {
+        const { name, value } = e.target
+        setForm({ ...form, [name]: value })
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        // TODO: appeler backend pour update profil
+        alert('Profil mis à jour')
+    }
+
+    // Initiales pour l'avatar
+    const initials = 'MD'
+
+    return (
+        <div className="min-h-screen bg-green-50 flex items-center justify-center p-4">
+            <div className="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
+                <h1 className="text-2xl font-bold text-gray-800 mb-6">Mon Profil</h1>
+                {/* Avatar */}
+                <div className="flex flex-col mb-6">
+                    <div className="w-20 h-20 rounded-full bg-green-700 flex items-center justify-center text-white text-2xl font-bold uppercase">
+                        {initials}
+                    </div>
+                </div>
+
+                {/* Formulaire */}
+                <form onSubmit={handleSubmit} className="space-y-5">
+
+                    {/* Email */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Adresse email
+                        </label>
+                        <input 
+                            type="email"
+                            name="email"
+                            value={form.email}
+                            onChange={handleChange}
+                            placeholder="mathieu.dupont@example.com"
+                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
+                        />
+                    </div>
+
+                    {/* Nom */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Nom
+                        </label>
+                        <input 
+                            type="text"
+                            name="lastName"
+                            value={form.lastName}
+                            onChange={handleChange}
+                            placeholder="Dupont"
+                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
+                        />
+                    </div>
+                    
+                    {/* Prénom */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                            Prénom
+                        </label>
+                        <input 
+                            type="text"
+                            name="firstName"
+                            value={form.firstName}
+                            onChange={handleChange}
+                            placeholder="Mathieu"
+                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
+                        />
+                    </div>
+                    
+                    {/* Bouton de soumission */}
+                    <button 
+                        type="submit"
+                        className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors"
+                    >
+                        Modifier mon profil
+                    </button>
+                </form>
+            </div>
+        </div>
+    )
+}