final newdetails

src/components/navbar/Navbar.jsx

@@ -35,7 +35,6 @@ const Navbar = ({ user }) => {
   }, []);
 
   useEffect(() => {
-    console.log('User data:', user); 
   }, [user]);
 
   return (

src/components/serverCard/serverCard.jsx

@@ -9,6 +9,7 @@ import PropTypes from "prop-types";
 
 const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick , countPlayers , maxPlayers}) => {
 
+
   const getFrameworkSource = () => {
     switch (framework) {
       case "bukkit":
@@ -50,7 +51,10 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
   };
 
   return (
-    <Link to={`/server/${name}/options`} className={styles.serverCard}>
+    <Link 
+    to={`/server/${name}/options`} 
+    className={styles.serverCard}
+    state={{ status }}>
       <div className={styles.header}>
         <div className={styles.serverInfo}>
           <img src={getFrameworkSource()} alt={`${name} Icon`} className={styles.frameworkIcon} />

src/pages/DashboardPage/DashboardPage.jsx

@@ -88,9 +88,7 @@ const DashboardPage = ({ user }) => {
   const handleCopyAddress = () => {
     const address = `${subdomain}.servii.fr`;
     navigator.clipboard.writeText(address)
-      .then(() => {
+
-        console.log('Address copied to clipboard');
-      })
   };
 
   if (loading) {

src/pages/ServerConsole/ServerConsole.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { FaExclamationCircle } from 'react-icons/fa';
 import styles from './ServerConsole.module.scss';
 import serviiApi from "../../service/api.tsx";
 import Loading from '../Loading/loading.jsx';
@@ -12,6 +13,8 @@ const ServerConsole = ({ user }) => {
   const [error, setError] = useState(null);
   const [logs, setLogs] = useState('');
   const [message, setMessage] = useState(''); 
+  const location = useLocation();  
+  const status = location.state?.status;  
 
   const logsEndRef = useRef(null);
 
@@ -20,7 +23,6 @@ const ServerConsole = ({ user }) => {
   };
 
   const fetchServerLogs = async () => {
-    setLoading(true);
     setError(null);
 
     try {
@@ -41,7 +43,6 @@ const ServerConsole = ({ user }) => {
     } catch (err) {
       setError(`Erreur: ${err.message}`);
     } finally {
-      setLoading(false);
     }
   };
 
@@ -53,14 +54,20 @@ const ServerConsole = ({ user }) => {
     scrollToBottom();
   }, [logs]);
 
-  const handleSendMessage = () => {
+  const handleSendMessage = async () => {
-    if (message.trim()) {
+    if (message.trim() === "") {
-      console.log(`Message envoyé: ${message}`);
+      return; 
+    }
+    try {
+      const response = await serviiApi.command(message, serverName); 
       setMessage('');
       fetchServerLogs(); 
+    } catch (err) {
+      setError(`Erreur lors de l'envoi de la commande : ${err.message}`);
     }
   };
   
+
   if (loading) {
     return <Loading />;
   }
@@ -79,12 +86,23 @@ const ServerConsole = ({ user }) => {
   return (
     <div className={styles.container}>
       <div className={styles.containerConsole}>
-        <div className={styles.header}>Console</div>
+        <div className={styles.header}>
+          Console {status ? '(En marche)' : '(Arrêté)'}
+        </div>
         <div className={styles.logContainer}>
+          {status ? (
+            <>
               <pre className={styles.logs}>
                 {logs}
               </pre>
               <div ref={logsEndRef} />
+            </>
+          ) : (
+            <div className={styles.offline}>
+              <FaExclamationCircle style={{ marginRight: '.6rem' }} />
+              <span>Serveur hors ligne</span>
+            </div>
+          )}
         </div>
         <div className={styles.chatInputContainer}>
           <input
@@ -101,6 +119,7 @@ const ServerConsole = ({ user }) => {
       </div>
     </div>
   );
+  
 };
 
 ServerConsole.propTypes = {

src/pages/ServerConsole/ServerConsole.module.scss

@@ -33,15 +33,15 @@
   font-size: 1rem;
   font-weight: 500;
   border-bottom: .1rem solid #343947;
-  padding-left: 1rem; /* Ajoutez du padding à l'intérieur */
+  padding-left: 1rem; 
 }
 
 .logContainer {
   width: 100%;
-  height: calc(100% - 6rem); /* Prend en compte la hauteur de la barre d'en-tête et de la barre de chat */
+  height: calc(100% - 6rem); 
   overflow-y: auto;
-  padding: 1rem; /* Ajoutez du padding pour éviter que le texte touche les bords */
+  padding: 1rem; 
-  box-sizing: border-box; /* Inclut le padding dans la taille totale */
+  box-sizing: border-box;
 }
 
 .logs {
@@ -50,7 +50,7 @@
   color: #ffffff;
   white-space: pre-wrap; 
   line-height: 1.5;
-  margin: 0; /* Supprimez les marges par défaut de <pre> */
+  margin: 0; 
 }
 
 .chatInputContainer {
@@ -87,3 +87,13 @@
 .sendButton:hover {
   background-color: #5A567E;
 }
+
+
+.offline {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 1.5rem;
+}

src/pages/ServerDetails/ServerDetails.jsx

@@ -12,15 +12,20 @@ import PropTypes from "prop-types";
 import { FaServer, FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
 import NotFoundPage from '../NotFoundPage/NotFoundPage';
 import { NavLink } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+
 
 const ServerDetails = ({ user   }) => {
   const { serverName } = useParams(); 
   const navigate = useNavigate();
+  const location = useLocation();
+  const status = location.state?.status; 
 
   const handleQuit = () => {
     navigate('/dashboard');
   };
 
+
   return (
     <>
       <Navbar user={user} />
@@ -39,6 +44,7 @@ const ServerDetails = ({ user }) => {
             </NavLink>
 
             <NavLink 
+              state={{ status }}
               to={`/server/${serverName}/console`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
               <FaClipboardList /> Console
@@ -74,11 +80,12 @@ const ServerDetails = ({ user }) => {
               <FaLock /> Accès
             </NavLink>
           </div>
+          <button className={styles.BackButton} onClick={handleQuit}>Retour</button>
         </div>
         <div className={styles.serverDetailsContainer}>
         <Routes>
-            <Route path="options" element={<ServerProperties user={user} />} />
+          <Route path="options" element={<ServerProperties user={user} status={status} />} />
-            <Route path="console" element={<ServerConsole user={user} />} />
+          <Route path="console" element={<ServerConsole user={user} status={status} />} />
           <Route path="history" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
           <Route path="players" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />
           <Route path="worlds" element={<h2>Cette fonctionnalité sera prochainement disponible.</h2>} />

src/pages/ServerDetails/ServerDetails.module.scss

@@ -27,7 +27,7 @@
   text-decoration: none;
   width: 100%;
   &.active { 
-    background-color: red;
+    background-color: #1D1836;
     color: white;
   }
 }
@@ -66,19 +66,17 @@
   font-size: 1.25rem;
 }
 
-.logoutButton {
+.BackButton {
-  margin-top: 2rem;
+  margin-top: 1rem;
-  padding: 0.75rem 1.5rem;
+  padding: 0.70rem 1.5rem;
-  background-color: #EF4444;
+  background-color: #1D1836;
   border: none;
   color: white;
   cursor: pointer;
-  width: 100%;
+  width: 20rem;
   text-align: center;
-}
+  font-size: 1.25rem;
 
-.logoutButton:hover {
-  background-color: #DC2626;
 }
 
 .serverDetailsContainer {