Maj gestion des articles

frontend/src/components/Pages/Dashboard.jsx

@@ -1,4 +1,6 @@
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { getToken, logout } from "../../auth"; // Importation de la fonction logout
 import {
   Box,
   Typography,
@@ -6,12 +8,26 @@ import {
   Card,
   CardContent,
   IconButton,
+  Button,
 } from "@mui/material";
+import LogoutIcon from "@mui/icons-material/Logout"; // Icône de déconnexion
 import ArticleIcon from "@mui/icons-material/Article";
 import DashboardIcon from "@mui/icons-material/Dashboard";
 
 function Dashboard() {
   const navigate = useNavigate();
+  const token = getToken();
+
+  useEffect(() => {
+    if (!token) {
+      navigate("/admin/login"); // Redirige vers la page de connexion si non authentifié
+    }
+  }, [token, navigate]);
+
+  const handleLogout = () => {
+    logout(); // Déconnecte l'utilisateur
+    navigate("/admin/login"); // Redirige vers la page de connexion
+  };
 
   return (
     <Box
@@ -35,10 +51,30 @@ function Dashboard() {
           borderRadius: 3,
           boxShadow: 6,
           textAlign: "center",
+          position: "relative", // Permet de positionner des éléments enfants
         }}
       >
+        {/* Bouton de déconnexion placé en haut à gauche de la boîte blanche */}
+        <Button
+          variant="contained"
+          color="error"
+          startIcon={<LogoutIcon />}
+          onClick={handleLogout}
+          sx={{
+            position: "absolute",
+            top: 10,
+            left: 10,
+            backgroundColor: "#d32f2f",
+            "&:hover": { backgroundColor: "#b71c1c" },
+            fontSize: "0.875rem",
+            padding: "6px 12px",
+          }}
+        >
+          
+        </Button>
+
         {/* En-tête */}
-        <Typography variant="h4" sx={{ fontWeight: "bold", mb: 4 }}>
+        <Typography variant="h4" sx={{ fontWeight: "bold", mb: 4, mt: 4 }}>
           <DashboardIcon sx={{ fontSize: 40, color: "#0e467f", mr: 1 }} />
           Tableau de Bord
         </Typography>
@@ -47,7 +83,7 @@ function Dashboard() {
         <Grid container spacing={3} justifyContent="center">
           <Grid item xs={12} sm={6} md={4}>
             <Card
-              onClick={() => navigate("/posts")}
+              onClick={() => navigate("/admin/gestion-articles")}
               sx={{
                 cursor: "pointer",
                 textAlign: "center",