mise a jour

frontend/src/components/Header.jsx

@@ -1,18 +1,17 @@
 import { useState } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import logo from '../assets/img/logo.png'
+import { useAuth } from '../context/AuthContext'
 
 export default function Header() {
   const [menuOpen, setMenuOpen] = useState(false)
   const { pathname } = useLocation()
   const navigate = useNavigate()
-
-  const user = JSON.parse(localStorage.getItem('user') || 'null')
+  const { user, logout } = useAuth()
   const isLoggedIn = !!user
 
   const handleLogout = () => {
-    localStorage.removeItem('token')
-    localStorage.removeItem('user')
+    logout()
     setMenuOpen(false)
     navigate('/connexion')
   }

frontend/src/components/ProtectedRoute.jsx

@@ -1,10 +1,10 @@
 import { Navigate } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
 
 export default function ProtectedRoute({ children, roles }) {
-  const token = localStorage.getItem('token')
-  const user = JSON.parse(localStorage.getItem('user') || 'null')
+  const { user } = useAuth()
 
-  if (!token || !user) {
+  if (!user) {
     return <Navigate to="/connexion" replace />
   }
 

frontend/src/components/UserNav.jsx

@@ -40,10 +40,10 @@ export default function UserNav({ active }) {
         <Link
           key={tab.key}
           to={tab.to}
-          className={`flex-1 flex items-center justify-center gap-1.5 py-3 text-xs sm:text-sm font-medium transition-colors ${
+          className={`flex-1 flex items-center justify-center gap-1.5 py-3 text-xs sm:text-sm font-medium transition-colors border-b-2 ${
             active === tab.key
-              ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
-              : 'text-gray-400 hover:text-gray-600'
+              ? 'text-[#006B6B] border-[#006B6B]'
+              : 'text-gray-400 border-transparent hover:text-gray-600'
           }`}
         >
           {tab.icon}