From 8bf5b3facf9b46dbaeddbfb5d4508b1066b5e617 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Tue, 13 Aug 2024 19:29:42 +0200 Subject: [PATCH 1/7] more versions --- src/components/CreateServer/CreateServer.jsx | 121 +++++++++--------- .../CreateServer/CreateServer.module.scss | 19 ++- 2 files changed, 77 insertions(+), 63 deletions(-) diff --git a/src/components/CreateServer/CreateServer.jsx b/src/components/CreateServer/CreateServer.jsx index ebe5422..0b1eda1 100644 --- a/src/components/CreateServer/CreateServer.jsx +++ b/src/components/CreateServer/CreateServer.jsx @@ -10,26 +10,10 @@ import spigot from '../../assets/frameworks/spigot.png'; import paper from '../../assets/frameworks/paper.png'; const versions = { - vanilla: ['1.21', '1.20', '1.19'], - bukkit: [ - '1.15.0', '1.15.1', '1.15.2', '1.15.3', '1.15.4', '1.15.5', - '1.16.0', '1.16.1', '1.16.2', '1.16.3', '1.16.4', '1.16.5', - '1.17.0', '1.17.1', '1.17.2', '1.17.3', '1.17.4', '1.17.5', - '1.18.1', '1.18.2', - '1.19.1', '1.19.2', '1.19.3', '1.19.4', - '1.20.1', '1.20.2', '1.20.4', '1.20.6' - ], - spigot: ['1.21', '1.20'], - paper: [ - '1.13.1', '1.13.2', - '1.14.1', '1.14.2', '1.14.3', '1.14.4', - '1.15.1', '1.15.2', - '1.16.1', '1.16.2', '1.16.3', '1.16.4', '1.16.5', - '1.17.1', - '1.18.1', '1.18.2', - '1.19.1', '1.19.2', '1.19.3', '1.19.4', - '1.20.1', '1.20.2', '1.20.4', '1.20.5', '1.20.6' - ], + vanilla:[ "1.21.1", "1.21", "1.20.6", "1.20.5", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1", "1.18.2", "1.18.1", "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.15.2", "1.15.1", "1.14.4", "1.14.3", "1.14.2", "1.14.1", "1.13.2", "1.13.1", "1.12.2", "1.12.1", "1.11.2", "1.10.2", "1.9.4"], + bukkit: [ "1.20.6", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1", "1.18.2", "1.17.5", "1.17.4", "1.17.3", "1.17.2", "1.17.0", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.16.0", "1.15.5", "1.15.4", "1.15.3", "1.15.2", "1.15.1", "1.15.0", "1.14.5", "1.14.4", "1.14.3", "1.14.2", "1.14.1", "1.14.0", "1.13.5", "1.13.4", "1.13.3", "1.13.2", "1.13.1", "1.13.0", "1.12.5", "1.12.4", "1.12.3", "1.12.2", "1.12.1", "1.12.0", "1.11.5", "1.11.4", "1.11.3", "1.11.2", "1.11.1", "1.11.0", "1.10.5", "1.10.4", "1.10.3", "1.10.2", "1.10.1", "1.10.0", "1.9.5", "1.9.4", "1.9.3", "1.9.2", "1.9.1", "1.9.0", "1.8.5", "1.8.4", "1.8.3", "1.8.2", "1.8.1", "1.8.0", "1.7.5", "1.7.4", "1.7.3", "1.7.2", "1.7.1", "1.7.0", "1.6.5", "1.6.4", "1.6.3", "1.6.2", "1.6.1", "1.6.0", "1.5.5", "1.5.4", "1.5.3", "1.5.2", "1.5.1", "1.5.0", "1.4.5", "1.4.4", "1.4.3", "1.4.2", "1.4.1", "1.4.0", "1.3.5", "1.3.4", "1.3.3", "1.3.2", "1.3.1", "1.3.0", "1.2.5", "1.2.4", "1.2.3", "1.2.2", "1.2.1", "1.2.0", "1.1.5", "1.1.4", "1.1.3", "1.1.2", "1.1.1", "1.1.0", "1.0.5", "1.0.4", "1.0.3", "1.0.2", "1.0.1", "1.0.0"], + spigot: [ "1.21", "1.20.6", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1", "1.18.2", "1.18.1", "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.15.2", "1.15.1", "1.14.4", "1.14.3", "1.14.2", "1.14.1", "1.13.2", "1.13.1", "1.12.2", "1.12.1", "1.11.2", "1.11.1", "1.10.2", "1.9.4", "1.9.2", "1.8.8", "1.8.7", "1.8.6", "1.8.5", "1.8.4", "1.8.3", "1.7.10", "1.7.9", "1.7.8", "1.7.5", "1.7.2", "1.6.4", "1.6.2", "1.5.2", "1.5.1", "1.4.7", "1.4.6"], + paper: [ "1.21.1", "1.21", "1.20.6", "1.20.5", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1", "1.18.2", "1.18.1", "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.15.2", "1.15.1", "1.14.4", "1.14.3", "1.14.2", "1.14.1", "1.13.2", "1.13.1", "1.12.2", "1.12.1", "1.11.2", "1.10.2", "1.9.4"] }; const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noServers }) => { @@ -37,7 +21,7 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer const [subdomainInput, setSubdomainInput] = useState(''); const [serverName, setServerName] = useState(''); const [serverVersion, setServerVersion] = useState(); - const [selectedFramework, setSelectedFramework] = useState("vanilla"); + const [selectedFramework, setSelectedFramework] = useState("paper"); const loadSubdomain = async () => { try { @@ -69,11 +53,13 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer const handleCreateServer = async () => { try { - await onCreateServer(serverName, serverVersion, selectedFramework); + const frameworkToSend = selectedFramework === 'vanilla' ? 'paper' : selectedFramework; + await onCreateServer(serverName, serverVersion, frameworkToSend); } catch (error) { - console.error('Error creating server:', error); + console.error('Error creating server:', error); } - }; +}; + const validateInput = (input) => { return input.replace(/[^a-zA-Z]/g, ''); @@ -124,45 +110,56 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
Sélection du framework
- Vanilla Logo { - setSelectedFramework('vanilla'); - setServerVersion(''); - }} - /> - Bukkit Logo { - setSelectedFramework('bukkit'); - setServerVersion(''); - }} - /> - Spigot Logo { - setSelectedFramework('spigot'); - setServerVersion(''); - }} - /> - Paper Logo { - setSelectedFramework('paper'); - setServerVersion(''); - }} - /> -
+
+ Vanilla Logo { + setSelectedFramework('vanilla'); + setServerVersion(''); + }} + /> +
+ +
+ Bukkit Logo { + setSelectedFramework('bukkit'); + setServerVersion(''); + }} + /> +
-
Sélection de la version
+
+ Spigot Logo { + setSelectedFramework('spigot'); + setServerVersion(''); + }} + /> +
+ +
+ Paper Logo { + setSelectedFramework('paper'); + setServerVersion(''); + }} + /> + {} +
+ +
Sélection de la version
- - - - +
+
+
+ Logo +
+
+

{user.displayName}

+ {user.email} +
+
+
Mes serveurs
 + setSelectedMenu('options')}>
Propriétés
 + setSelectedMenu('console')}>
Console
 + setSelectedMenu('history')}>
Historique
 + setSelectedMenu('players')}>
Joueurs
 + setSelectedMenu('worlds')}>
Mondes
 + setSelectedMenu('backups')}>
Sauvegardes
 + setSelectedMenu('access')}>
Accès
 +
+
-
- - +
+ {renderContent()}
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- -
-
+ ); }; @@ -162,4 +83,5 @@ ServerDetails.propTypes = { }), ]), }; + export default ServerDetails; diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss index 782bf06..065da33 100644 --- a/src/pages/ServerDetails/ServerDetails.module.scss +++ b/src/pages/ServerDetails/ServerDetails.module.scss @@ -1,133 +1,94 @@ +.container { + display: flex; + min-height: 100vh; +} + +.sidebar { + width: 20rem; + background-color: #100D25; + padding: 2rem; + box-sizing: border-box; + position: fixed; + height: 100vh; + top: 0; + color: white; +} + +.logo img { + width: 150px; + margin-bottom: 2rem; +} + +.user { + margin-bottom: 2rem; +} + +.user p { + font-size: 1.25rem; + font-weight: bold; +} + +.user small { + font-size: 0.875rem; + color: #9CA3AF; +} + +.menu { + display: flex; + flex-direction: column; +} + +.menuItem { + display: flex; + align-items: center; + padding: 1rem 0; + font-size: 1.5rem; + cursor: pointer; + color: #D1D5DB; + text-decoration: none; +} + +.menuItem:hover { + color: white; +} + +.menuItem svg { + margin-right: 1rem; + font-size: 1.25rem; +} + +.logoutButton { + margin-top: 2rem; + padding: 0.75rem 1.5rem; + background-color: #EF4444; + border: none; + color: white; + cursor: pointer; + width: 100%; + text-align: center; +} + +.logoutButton:hover { + background-color: #DC2626; +} + .serverDetailsContainer { + flex: 1; + margin-left: 20rem; padding-top: var(--navbar-height); background-color: var(--main-bg-color); display: flex; flex-direction: column; align-items: center; color: var(--text-color); - width: 100%; - box-sizing: border-box; -} - -.details { - margin-top: 5rem; - padding: 3rem; - padding-top: 0; - background-color: var(--card-bg-color); - width: 100%; - max-width: 60rem; - border-radius: 1.5rem; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); box-sizing: border-box; } -.formGroup { - margin-bottom: 2.5rem; - display: flex; - flex-direction: column; -} - -.formGroup label { - font-weight: 600; - margin-bottom: 1rem; - font-size: 1.4rem; - color: var(--label-color); -} - -.formGroup input, -.formGroup select { - width: 100%; - padding: 1.2rem; - height: auto; - background-color: var(--input-bg-color); - border: 1px solid var(--input-border-color); - border-radius: 0.75rem; - color: var(--text-color); - font-size: 1.2rem; - line-height: 1.5rem; - box-sizing: border-box; - transition: border-color 0.3s ease, box-shadow 0.3s ease; -} - -.formGroup input:focus, -.formGroup select:focus { - border-color: var(--focus-border-color); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - outline: none; -} - -/* Chrome- styles */ -@supports (-webkit-appearance: none) { - .formGroup select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: no-repeat; - background-position: right 1.2rem center; - background-size: 1rem; - padding-right: 3rem; - } -} - -.saveButton, -.quitButton { - padding: 1.2rem 2.5rem; - color: var(--button-text-color); - border: none; - border-radius: 0.75rem; - cursor: pointer; - transition: background-color 0.3s ease, transform 0.3s ease; - font-size: 1.2rem; - margin-top: 1rem; -} - -.saveButton { - background-color: #05a771; -} - -.saveButton:hover { - background-color: #05a77183; -} - -.quitButton { - background-color: gray; - margin-left: 1rem; -} - - -.error { - color: var(--error-color); - font-size: 1.2rem; -} - -.details h1 { - font-size: 2.5rem; - margin-bottom: 3rem; - color: var(--header-color); -} - -@media (max-width: 768px) { - .details { - width: 90%; - padding: 2rem; - } - - .formGroup input, - .formGroup select { - height: auto; - font-size: 1.1rem; - padding: 1rem; - } - - .saveButton, - .quitButton { - padding: 1rem 2rem; - font-size: 1.1rem; - } - - .details h1 { - font-size: 2rem; - margin-bottom: 2rem; - } +.navbar { + position: fixed; + top: 0; + width: 100%; + height: var(--navbar-height); + background-color: var(--navbar-bg-color); + z-index: 1000; } diff --git a/src/pages/ServerProperties/ServerProperties.jsx b/src/pages/ServerProperties/ServerProperties.jsx new file mode 100644 index 0000000..674360e --- /dev/null +++ b/src/pages/ServerProperties/ServerProperties.jsx @@ -0,0 +1,156 @@ +import { useEffect, useState } from 'react'; +import { useParams, useNavigate } from 'react-router-dom'; +import styles from './ServerProperties.module.scss'; +import serviiApi from "../../service/api.tsx"; +import Loading from '../Loading/loading'; +import PropTypes from "prop-types"; + +const ServerProprieties = ({ user }) => { + const { serverName } = useParams(); + const navigate = useNavigate(); + const [server, setServer] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchServer = async () => { + try { + const ApiResponse = await serviiApi.fetchServers(); + const data = ApiResponse.message; + const foundServer = data.find(server => server.name === serverName); + + if (foundServer) { + setServer(foundServer); + } else { + setError('Server not found'); + } + } catch (error) { + console.error('Error fetching server:', error); + setError('Error fetching server'); + } finally { + setLoading(false); + } + }; + + fetchServer(); + }, [serverName]); + + const validateInput = (input) => { + return input.replace(/[^a-zA-Z]/g, ''); + }; + + const handleChange = (e) => { + const { name, value } = e.target; + const validatedValue = name === 'motd' ? validateInput(value) : value; + setServer({ ...server, [name]: validatedValue }); + }; + + const handleSave = async () => { + try { + const props = [ + ['max-players', server.maxPlayers.toString()], + ['motd', server.motd], + ['difficulty', server.difficulty], + ['enable-command-block', server.enableCommandBlock.toString()], + ['gamemode', server.gamemode.toString()], + ['hardcore', server.hardcore.toString()], + ['online-mode', server.onlineMode.toString()], + ['pvp', server.pvp.toString()] + ]; + + await serviiApi.updateProperties(server.name, props); + } catch (error) { + console.error('Error updating server:', error); + alert('Error updating server'); + } + }; + + if (loading) { + return ; + } + + if (error) { + return ( +
+
+

{error}

+ +
+
+ ); + } + + return ( +
+
+

Propriétés du serveur {server.name}

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ ); +}; + +ServerProprieties.propTypes = { + user: PropTypes.oneOfType([ + PropTypes.shape({ + uid: PropTypes.string.isRequired, + displayName: PropTypes.string, + email: PropTypes.string, + }), + ]), +}; + +export default ServerProprieties; diff --git a/src/pages/ServerProperties/ServerProperties.module.scss b/src/pages/ServerProperties/ServerProperties.module.scss new file mode 100644 index 0000000..ccf14c8 --- /dev/null +++ b/src/pages/ServerProperties/ServerProperties.module.scss @@ -0,0 +1,133 @@ +.serverDetailsContainer { + padding-top: var(--navbar-height); + background-color: var(--main-bg-color); + display: flex; + flex-direction: column; + align-items: center; + color: var(--text-color); + width: 100%; + box-sizing: border-box; + } + + .details { + padding: 3rem; + padding-top: 0; + background-color: var(--card-bg-color); + width: 100%; + max-width: 60rem; + border-radius: 1.5rem; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + box-sizing: border-box; + } + + .formGroup { + margin-bottom: 2.5rem; + display: flex; + flex-direction: column; + } + + .formGroup label { + font-weight: 600; + margin-bottom: 1rem; + font-size: 1.4rem; + color: var(--label-color); + } + + .formGroup input, + .formGroup select { + width: 100%; + padding: 1.2rem; + height: auto; + background-color: var(--input-bg-color); + border: 1px solid var(--input-border-color); + border-radius: 0.75rem; + color: var(--text-color); + font-size: 1.2rem; + line-height: 1.5rem; + box-sizing: border-box; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + } + + .formGroup input:focus, + .formGroup select:focus { + border-color: var(--focus-border-color); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + outline: none; + } + + /* Chrome- styles */ + @supports (-webkit-appearance: none) { + .formGroup select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 1.2rem center; + background-size: 1rem; + padding-right: 3rem; + } + } + + .saveButton, + .quitButton { + padding: 1.2rem 2.5rem; + color: var(--button-text-color); + border: none; + border-radius: 0.75rem; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; + font-size: 1.2rem; + margin-top: 1rem; + } + + .saveButton { + background-color: #05a771; + } + + .saveButton:hover { + background-color: #05a77183; + } + + .quitButton { + background-color: gray; + margin-left: 1rem; + } + + + .error { + color: var(--error-color); + font-size: 1.2rem; + } + + .details h1 { + font-size: 2.5rem; + margin-bottom: 3rem; + color: var(--header-color); + } + + @media (max-width: 768px) { + .details { + width: 90%; + padding: 2rem; + } + + .formGroup input, + .formGroup select { + height: auto; + font-size: 1.1rem; + padding: 1rem; + } + + .saveButton, + .quitButton { + padding: 1rem 2rem; + font-size: 1.1rem; + } + + .details h1 { + font-size: 2rem; + margin-bottom: 2rem; + } + } + \ No newline at end of file From 76272696f3e05aee7a8b5bd046fa7e5c7bf18113 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Thu, 15 Aug 2024 18:17:43 +0200 Subject: [PATCH 3/7] + fetching log in console --- src/App.jsx | 3 +- src/components/serverCard/serverCard.jsx | 2 +- src/pages/ServerConsole/ServerConsole.jsx | 30 ++++- .../ServerConsole/ServerConsole.module.scss | 69 +++++++++--- src/pages/ServerDetails/ServerDetails.jsx | 104 ++++++++++-------- .../ServerDetails/ServerDetails.module.scss | 68 ++++++++---- src/service/api.tsx | 14 ++- 7 files changed, 202 insertions(+), 88 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index c2c8f18..edea5c8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -33,7 +33,8 @@ const App = () => { : } /> : } /> - : } /> + } /> + : } /> } /> } /> diff --git a/src/components/serverCard/serverCard.jsx b/src/components/serverCard/serverCard.jsx index 65a1b07..0617dbd 100644 --- a/src/components/serverCard/serverCard.jsx +++ b/src/components/serverCard/serverCard.jsx @@ -50,7 +50,7 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, }; return ( - +
{`${name} diff --git a/src/pages/ServerConsole/ServerConsole.jsx b/src/pages/ServerConsole/ServerConsole.jsx index 075eb56..a3eefd2 100644 --- a/src/pages/ServerConsole/ServerConsole.jsx +++ b/src/pages/ServerConsole/ServerConsole.jsx @@ -7,11 +7,38 @@ import PropTypes from "prop-types"; const ServerConsole = ({ user }) => { const navigate = useNavigate(); + const { serverName } = useParams(); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); - const [logs, setLogs] = useState(''); + useEffect(() => { + const fetchServerLogs = async () => { + setLoading(true); + setError(null); + + try { + const response = await serviiApi.fetchLogs(serverName); + if (response.return_code === 200) { + // Nettoyer la chaîne de caractères en supprimant les [ ] et en remplaçant les \\n + let logString = response.message; + logString = logString.slice(1, -1); // Supprime les crochets [ ] au début et à la fin + logString = logString.replace(/\\n/g, '\n'); // Remplace les \\n par de véritables sauts de ligne + logString = logString.replace(/\\\"/g, '"'); // Supprime les échappements de guillemets + setLogs(logString); + } else { + setError(`Erreur lors de la récupération des logs: ${response.message}`); + } + } catch (err) { + setError(`Erreur: ${err.message}`); + } finally { + setLoading(false); + } + }; + + fetchServerLogs(); + }, [serverName]); + if (loading) { return ; } @@ -30,6 +57,7 @@ const ServerConsole = ({ user }) => { return (
+
Console

Console

diff --git a/src/pages/ServerConsole/ServerConsole.module.scss b/src/pages/ServerConsole/ServerConsole.module.scss
index b68dd2b..998e0d5 100644
--- a/src/pages/ServerConsole/ServerConsole.module.scss
+++ b/src/pages/ServerConsole/ServerConsole.module.scss
@@ -1,19 +1,56 @@
+/* Container for the entire console section */
 .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: var(--navbar-height);
-    width: 60rem;
-    height: 90%;
-    margin-bottom: 1rem;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: var(--navbar-height);
+  width: 100%;
+  height: calc(100vh - var(--navbar-height) - 2rem);
+  margin-bottom: 1rem;
+  overflow: hidden; 
+}
 
 .containerConsole {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: red;
-    width: 50rem;
-    height: 100%;
-    overflow: auto;
-  }
\ No newline at end of file
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  background-color: #100D25;
+  width: 100%;
+  max-width: 50rem;
+  height: 100%;
+  overflow-y: auto; 
+  border: .1rem solid #343947;
+  padding: 1rem;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+}
+
+.header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: #1D1836;
+  width: 100%;
+  height: 3rem;
+  font-size: 1rem;
+  font-weight: 500;
+  border-bottom: .1rem solid #343947;
+}
+
+.logs {
+  font-family: 'Courier New', Courier, monospace; 
+  font-size: 0.9rem;
+  color: #ffffff;
+  white-space: pre-wrap; 
+  line-height: 1.5;
+}
+
+.sidebar {
+  overflow: hidden; 
+}
+
+.logContainer {
+  width: 100%;
+  height: calc(100% - 3rem);
+  overflow-y: auto; 
+}
diff --git a/src/pages/ServerDetails/ServerDetails.jsx b/src/pages/ServerDetails/ServerDetails.jsx
index dbd5e3c..33575b2 100644
--- a/src/pages/ServerDetails/ServerDetails.jsx
+++ b/src/pages/ServerDetails/ServerDetails.jsx
@@ -1,73 +1,91 @@
-import { useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, Route, Routes, Link } from 'react-router-dom';
 import Navbar from '../../components/navbar/Navbar';
 import ServerProperties from '../ServerProperties/ServerProperties'; 
-import styles from './ServerDetails.module.scss';
-import PropTypes from "prop-types";
-import { FaServer, FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
 import ServerConsole from '../ServerConsole/ServerConsole';
 // import ServerHistory from '../ServerHistory/ServerHistory';
 // import ServerPlayers from '../ServerPlayers/ServerPlayers';
 // import ServerWorlds from '../ServerWorlds/ServerWorlds';
 // import ServerBackups from '../ServerBackups/ServerBackups';
 // import ServerAccess from '../ServerAccess/ServerAccess';
+import styles from './ServerDetails.module.scss';
+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';
 
 const ServerDetails = ({ user }) => {
   const { serverName } = useParams(); 
   const navigate = useNavigate();
-  const [selectedMenu, setSelectedMenu] = useState(''); 
 
   const handleQuit = () => {
     navigate('/dashboard');
   };
 
-  const renderContent = () => {
-    switch (selectedMenu) {
-      case 'options':
-        return ;
-      case 'console':
-        return ; 
-      case 'history':
-        return 
Cette fonctionnalité sera prochainement disponible.
; //  
-      case 'players':
-        return 
Cette fonctionnalité sera prochainement disponible.
; //  
-      case 'worlds':
-        return 
Cette fonctionnalité sera prochainement disponible.
; //  
-      case 'backups':
-        return 
Cette fonctionnalité sera prochainement disponible.
; //  
-      case 'access':
-        return 
Cette fonctionnalité sera prochainement disponible.
; //  
-      default:
-        return 
{serverName || 'Server name not available'}
;
-    }
-  };
-
   return (
     <>
       
       

         

-          

-            Logo
-          

-          

-            
{user.displayName}

-            {user.email}
+          

+            

+              
{user.displayName}

+            

           

           

-            
 Mes serveurs

-             setSelectedMenu('options')}>
 Propriétés

-             setSelectedMenu('console')}>
 Console

-             setSelectedMenu('history')}>
 Historique

-             setSelectedMenu('players')}>
 Joueurs

-             setSelectedMenu('worlds')}>
 Mondes

-             setSelectedMenu('backups')}>
 Sauvegardes

-             setSelectedMenu('access')}>
 Accès

+             isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+               Propriétés
+            
+
+             isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+               Console
+            
+
+             isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+               Historique
+            
+
+             isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+               Joueurs
+            
+
+             isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+               Mondes
+            
+
+             isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+               Sauvegardes
+            
+
+             isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+               Accès
+            
           

-          
         

         

-          {renderContent()}
+          
+            } />
+            } />
+            Cette fonctionnalité sera prochainement disponible.} />
+            Cette fonctionnalité sera prochainement disponible.} />
+            Cette fonctionnalité sera prochainement disponible.} />
+            Cette fonctionnalité sera prochainement disponible.} />
+            Cette fonctionnalité sera prochainement disponible.} />
+            } />
+          
         

       

     
diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss
index 065da33..6e4e973 100644
--- a/src/pages/ServerDetails/ServerDetails.module.scss
+++ b/src/pages/ServerDetails/ServerDetails.module.scss
@@ -1,24 +1,43 @@
 .container {
   display: flex;
-  min-height: 100vh; 
+  min-height: 100vh;
+  margin-top: var(--navbar-height);  
 }
 
 .sidebar {
   width: 20rem;
   background-color: #100D25;
-  padding: 2rem;
+  padding: 2rem 1rem;
+  padding-left: 0rem;
   box-sizing: border-box;
-  position: fixed;  
-  height: 100vh;  
-  top: 0;  
-  color: white; 
+  position: fixed;
+  height: calc(100vh - var(--navbar-height));  
+  top: var(--navbar-height);
+  color: white;
 }
 
-.logo img {
-  width: 150px;  
-  margin-bottom: 2rem;
+.menuItem {
+  display: flex;
+  align-items: center;
+  padding: 0.7rem 1rem ;
+  margin: .5rem 0rem;
+  padding-right: 0rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #D1D5DB;
+  text-decoration: none;
+  width: 100%;
+  &.active { 
+    background-color: red;
+    color: white;
+  }
 }
 
+.menuItem:hover {
+  color: white;
+}
+
+
 .user {
   margin-bottom: 2rem;
 }
@@ -38,18 +57,9 @@
   flex-direction: column;
 }
 
-.menuItem {
-  display: flex;
-  align-items: center;
-  padding: 1rem 0;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #D1D5DB;
-  text-decoration: none;
-}
 
 .menuItem:hover {
-  color: white;  
+  color: white;
 }
 
 .menuItem svg {
@@ -60,7 +70,7 @@
 .logoutButton {
   margin-top: 2rem;
   padding: 0.75rem 1.5rem;
-  background-color: #EF4444;  
+  background-color: #EF4444;
   border: none;
   color: white;
   cursor: pointer;
@@ -73,9 +83,9 @@
 }
 
 .serverDetailsContainer {
-  flex: 1; 
+  flex: 1;
   margin-left: 20rem;  
-  padding-top: var(--navbar-height);
+  padding-top: 2rem;  
   background-color: var(--main-bg-color);
   display: flex;
   flex-direction: column;
@@ -87,8 +97,18 @@
 .navbar {
   position: fixed;
   top: 0;
-  width: 100%;  
-  height: var(--navbar-height); 
+  left: 0;
+  width: 100%; 
+  height: var(--navbar-height);
   background-color: var(--navbar-bg-color);  
   z-index: 1000;  
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
 }
+
+.userinfo {
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  flex-direction: column;
+  margin-left: 1rem;
+}
\ No newline at end of file
diff --git a/src/service/api.tsx b/src/service/api.tsx
index 1c21977..f9e4487 100644
--- a/src/service/api.tsx
+++ b/src/service/api.tsx
@@ -36,6 +36,10 @@ interface CommandRequest extends BaseRequest {
   name: string;
 }
 
+interface FetchLogsRequest extends BaseRequest {
+  name: string; 
+}
+
 enum serviiRequest {
   setSubdomain = 'SetSubdomain',
   fetchServers = 'FetchServers',
@@ -47,6 +51,7 @@ enum serviiRequest {
   serverStop = 'ServerStop',
   updateProperty = 'UpdateProperties',
   command = 'Command',
+  fetchLogs = 'FetchLogs',
 }
 
 class serviiApi {
@@ -65,7 +70,7 @@ class serviiApi {
 
     if (json.message === undefined) {
       if (!(endpoint === serviiRequest.fetchServers)) {
-        return { return_code: status, message: "Couldn't find an available API, we're sorry for the inconvenience." };
+        return { return_code: status, message: "Couldn't find an available API" };
       }
       return { return_code: status, message: json };
     }
@@ -150,13 +155,18 @@ class serviiApi {
       name: name,
       props: props,
     };
-    return this.call(serviiRequest.updateProperty, payload); // Correct usage here
+    return this.call(serviiRequest.updateProperty, payload); 
   }
 
   public static async command(command: string, name: string): Promise {
     const payload: CommandRequest = { token: this.token(), command: command, name: name };
     return this.call(serviiRequest.command, payload);
   }
+
+  public static async fetchLogs(name: string): Promise { 
+    const payload: FetchLogsRequest = { token: this.token(), name: name };
+    return this.call(serviiRequest.fetchLogs, payload);
+  }
 }
 
 export default serviiApi;

From ef1e5fc2accc4100d0cf2f3e6935916873cca12d Mon Sep 17 00:00:00 2001
From: AntoninoP 
Date: Sat, 17 Aug 2024 11:11:55 +0200
Subject: [PATCH 4/7] new console

---
 src/pages/ServerConsole/ServerConsole.jsx     | 42 +++++++++++--
 .../ServerConsole/ServerConsole.module.scss   | 61 ++++++++++++++-----
 .../ServerDetails/ServerDetails.module.scss   | 10 +--
 3 files changed, 89 insertions(+), 24 deletions(-)

diff --git a/src/pages/ServerConsole/ServerConsole.jsx b/src/pages/ServerConsole/ServerConsole.jsx
index a3eefd2..a658bb9 100644
--- a/src/pages/ServerConsole/ServerConsole.jsx
+++ b/src/pages/ServerConsole/ServerConsole.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import styles from './ServerConsole.module.scss';
 import serviiApi from "../../service/api.tsx";
@@ -11,6 +11,13 @@ const ServerConsole = ({ user }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [logs, setLogs] = useState('');
+  const [message, setMessage] = useState(''); 
+
+  const logsEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
 
   useEffect(() => {
     const fetchServerLogs = async () => {
@@ -20,11 +27,10 @@ const ServerConsole = ({ user }) => {
       try {
         const response = await serviiApi.fetchLogs(serverName);
         if (response.return_code === 200) {
-          // Nettoyer la chaîne de caractères en supprimant les [ ] et en remplaçant les \\n
           let logString = response.message;
-          logString = logString.slice(1, -1); // Supprime les crochets [ ] au début et à la fin
-          logString = logString.replace(/\\n/g, '\n'); // Remplace les \\n par de véritables sauts de ligne
-          logString = logString.replace(/\\\"/g, '"'); // Supprime les échappements de guillemets
+          logString = logString.slice(1, -1);
+          logString = logString.replace(/\\n/g, '\n');
+          logString = logString.replace(/\\\"/g, '"');
           setLogs(logString);
         } else {
           setError(`Erreur lors de la récupération des logs: ${response.message}`);
@@ -39,6 +45,17 @@ const ServerConsole = ({ user }) => {
     fetchServerLogs();
   }, [serverName]);
 
+  useEffect(() => {
+    scrollToBottom();
+  }, [logs]);
+
+  const handleSendMessage = () => {
+    if (message.trim()) {
+      console.log(`Message envoyé: ${message}`);
+      setMessage(''); 
+    }
+  };
+
   if (loading) {
     return ;
   }
@@ -58,11 +75,24 @@ const ServerConsole = ({ user }) => {
     

       

         
Console

-        
Console

         

           
             {logs}
           

+          

+        

+        {}
+        

+           setMessage(e.target.value)}
+            placeholder="Écrire un message..."
+          />
+          
         

       

     

diff --git a/src/pages/ServerConsole/ServerConsole.module.scss b/src/pages/ServerConsole/ServerConsole.module.scss
index 998e0d5..1a4fd57 100644
--- a/src/pages/ServerConsole/ServerConsole.module.scss
+++ b/src/pages/ServerConsole/ServerConsole.module.scss
@@ -1,13 +1,10 @@
-/* Container for the entire console section */
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: var(--navbar-height);
   width: 100%;
-  height: calc(100vh - var(--navbar-height) - 2rem);
-  margin-bottom: 1rem;
-  overflow: hidden; 
+  overflow: hidden;
 }
 
 .containerConsole {
@@ -18,11 +15,12 @@
   background-color: #100D25;
   width: 100%;
   max-width: 50rem;
-  height: 100%;
-  overflow-y: auto; 
+  height: 38rem;
+  overflow: hidden; 
   border: .1rem solid #343947;
-  padding: 1rem;
+  padding: 0; 
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+  margin-bottom: 2rem;
 }
 
 .header {
@@ -35,6 +33,15 @@
   font-size: 1rem;
   font-weight: 500;
   border-bottom: .1rem solid #343947;
+  padding-left: 1rem; /* Ajoutez du padding à l'intérieur */
+}
+
+.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 */
+  overflow-y: auto;
+  padding: 1rem; /* Ajoutez du padding pour éviter que le texte touche les bords */
+  box-sizing: border-box; /* Inclut le padding dans la taille totale */
 }
 
 .logs {
@@ -43,14 +50,40 @@
   color: #ffffff;
   white-space: pre-wrap; 
   line-height: 1.5;
+  margin: 0; /* Supprimez les marges par défaut de 
 */
 }
 
-.sidebar {
-  overflow: hidden; 
-}
-
-.logContainer {
+.chatInputContainer {
+  display: flex;
   width: 100%;
-  height: calc(100% - 3rem);
-  overflow-y: auto; 
+  padding: 0.5rem;
+  background-color: #1D1836;
+  border-top: .1rem solid #343947;
+  border-left: .1rem solid #343947;
+  border-right: .1rem solid #343947;
+}
+
+.chatInput {
+  flex: 1;
+  padding: 0.5rem;
+  border: .1rem solid #343947;
+  background-color: #2C2A3E;
+  color: #ffffff;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+
+.sendButton {
+  margin-left: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: #3E3B59;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.3s;
+}
+
+.sendButton:hover {
+  background-color: #5A567E;
 }
diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss
index 6e4e973..1642042 100644
--- a/src/pages/ServerDetails/ServerDetails.module.scss
+++ b/src/pages/ServerDetails/ServerDetails.module.scss
@@ -1,7 +1,6 @@
 .container {
   display: flex;
-  min-height: 100vh;
-  margin-top: var(--navbar-height);  
+  min-height: calc(100vh - var(--navbar-height));
 }
 
 .sidebar {
@@ -83,17 +82,20 @@
 }
 
 .serverDetailsContainer {
+  margin-top: var(--navbar-height);
   flex: 1;
-  margin-left: 20rem;  
-  padding-top: 2rem;  
+  margin-left: 20rem;
+  padding-top: 1rem; 
   background-color: var(--main-bg-color);
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--text-color);
   box-sizing: border-box;
+  overflow-y: auto; 
 }
 
+
 .navbar {
   position: fixed;
   top: 0;

From 3e329d5bb30795cf45aa4b66d3a0d39c2d3cf810 Mon Sep 17 00:00:00 2001
From: Charles Le Maux 
Date: Sat, 17 Aug 2024 12:03:30 +0200
Subject: [PATCH 5/7] [~] Added toast exclusion list for API calls. Removed
 FetchLogsRequest calls interface (duplicate of base ServerRequest)

---
 src/service/api.tsx | 62 ++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/service/api.tsx b/src/service/api.tsx
index f9e4487..056d8e5 100644
--- a/src/service/api.tsx
+++ b/src/service/api.tsx
@@ -36,10 +36,6 @@ interface CommandRequest extends BaseRequest {
   name: string;
 }
 
-interface FetchLogsRequest extends BaseRequest {
-  name: string; 
-}
-
 enum serviiRequest {
   setSubdomain = 'SetSubdomain',
   fetchServers = 'FetchServers',
@@ -54,6 +50,12 @@ enum serviiRequest {
   fetchLogs = 'FetchLogs',
 }
 
+
+const nonToastableCalls: string[] = [
+  serviiRequest.fetchServers,
+  serviiRequest.fetchLogs,
+ ];
+
 class serviiApi {
   constructor() {}
 
@@ -75,28 +77,30 @@ class serviiApi {
       return { return_code: status, message: json };
     }
 
-    let toastType: 'success' | 'error' | 'info';
-    let toastColor: string;
+    if (!nonToastableCalls.includes(endpoint)) {
 
-    if (status >= 200 && status < 300) {
-      toastType = 'success';
-    } else if (status >= 400 && status < 600) {
-      toastType = 'error';
-    } else {
-      toastType = 'info';
-    }
+      let toastType: 'success' | 'error' | 'info';
 
-    toast[toastType](json.message, {
-      position: "top-right",
-      autoClose: 3500,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-      theme: "light",
-      transition: Bounce,
-    });
+      if (status >= 200 && status < 300) {
+        toastType = 'success';
+      } else if (status >= 400 && status < 600) {
+        toastType = 'error';
+      } else {
+        toastType = 'info';
+      }
+
+      toast[toastType](json.message, {
+        position: "top-right",
+        autoClose: 3500,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        transition: Bounce,
+      });
+  }
 
     return { return_code: status, message: json.message };
   }
@@ -119,6 +123,11 @@ class serviiApi {
     return this.call(serviiRequest.fetchServers, payload);
   }
 
+  public static async fetchLogs(name: string): Promise { 
+    const payload: ServerRequest = { token: this.token(), name: name };
+    return this.call(serviiRequest.fetchLogs, payload);
+  }
+
   public static async accountCreate(): Promise {
     const payload: BaseRequest = { token: this.token() };
     return this.call(serviiRequest.accountCreate, payload);
@@ -162,11 +171,6 @@ class serviiApi {
     const payload: CommandRequest = { token: this.token(), command: command, name: name };
     return this.call(serviiRequest.command, payload);
   }
-
-  public static async fetchLogs(name: string): Promise { 
-    const payload: FetchLogsRequest = { token: this.token(), name: name };
-    return this.call(serviiRequest.fetchLogs, payload);
-  }
 }
 
 export default serviiApi;

From e25dcbcf6af425edfd1e2fe498d5ba20bab14c4b Mon Sep 17 00:00:00 2001
From: AntoninoP 
Date: Sun, 18 Aug 2024 18:55:22 +0200
Subject: [PATCH 6/7] console fix

---
 src/pages/ServerConsole/ServerConsole.jsx | 46 ++++++++++++-----------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/pages/ServerConsole/ServerConsole.jsx b/src/pages/ServerConsole/ServerConsole.jsx
index a658bb9..b782339 100644
--- a/src/pages/ServerConsole/ServerConsole.jsx
+++ b/src/pages/ServerConsole/ServerConsole.jsx
@@ -19,29 +19,33 @@ const ServerConsole = ({ user }) => {
     logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
 
-  useEffect(() => {
-    const fetchServerLogs = async () => {
-      setLoading(true);
-      setError(null);
+  const fetchServerLogs = async () => {
+    setLoading(true);
+    setError(null);
 
-      try {
-        const response = await serviiApi.fetchLogs(serverName);
-        if (response.return_code === 200) {
-          let logString = response.message;
-          logString = logString.slice(1, -1);
-          logString = logString.replace(/\\n/g, '\n');
-          logString = logString.replace(/\\\"/g, '"');
-          setLogs(logString);
-        } else {
-          setError(`Erreur lors de la récupération des logs: ${response.message}`);
-        }
-      } catch (err) {
-        setError(`Erreur: ${err.message}`);
-      } finally {
-        setLoading(false);
+    try {
+      const response = await serviiApi.fetchLogs(serverName);
+      if (response.return_code === 200) {
+        let logString = response.message;
+        logString = logString.slice(1, -1);  
+        logString = logString.replace(/\\n/g, '\n');  
+        logString = logString.replace(/\\\"/g, '"');  
+        logString = logString.replace(/, ?/g, '');  
+        logString = logString.replace(/"{2,}/g, '');  
+        logString = logString.replace(/'{2,}/g, '');
+        logString = logString.trim();
+        setLogs(logString);
+      } else {
+        setError(`Erreur lors de la récupération des logs: ${response.message}`);
       }
-    };
+    } catch (err) {
+      setError(`Erreur: ${err.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
 
+  useEffect(() => {
     fetchServerLogs();
   }, [serverName]);
 
@@ -53,6 +57,7 @@ const ServerConsole = ({ user }) => {
     if (message.trim()) {
       console.log(`Message envoyé: ${message}`);
       setMessage(''); 
+      fetchServerLogs(); 
     }
   };
 
@@ -81,7 +86,6 @@ const ServerConsole = ({ user }) => {
           

           

         

-        {}
         

           
Date: Mon, 19 Aug 2024 12:03:28 +0200
Subject: [PATCH 7/7] final newdetails

---
 src/components/navbar/Navbar.jsx              |  1 -
 src/components/serverCard/serverCard.jsx      |  6 ++-
 src/pages/DashboardPage/DashboardPage.jsx     |  4 +-
 src/pages/ServerConsole/ServerConsole.jsx     | 43 +++++++++++++------
 .../ServerConsole/ServerConsole.module.scss   | 20 ++++++---
 src/pages/ServerDetails/ServerDetails.jsx     | 29 ++++++++-----
 .../ServerDetails/ServerDetails.module.scss   | 16 +++----
 7 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index 784b5aa..104a13b 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -35,7 +35,6 @@ const Navbar = ({ user }) => {
   }, []);
 
   useEffect(() => {
-    console.log('User data:', user); 
   }, [user]);
 
   return (
diff --git a/src/components/serverCard/serverCard.jsx b/src/components/serverCard/serverCard.jsx
index 0617dbd..26c9d91 100644
--- a/src/components/serverCard/serverCard.jsx
+++ b/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 (
-    
+    
       

         

           {`${name}
diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
index 965bd52..adde911 100644
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/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) {
diff --git a/src/pages/ServerConsole/ServerConsole.jsx b/src/pages/ServerConsole/ServerConsole.jsx
index b782339..f4f8efa 100644
--- a/src/pages/ServerConsole/ServerConsole.jsx
+++ b/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,13 +54,19 @@ const ServerConsole = ({ user }) => {
     scrollToBottom();
   }, [logs]);
 
-  const handleSendMessage = () => {
-    if (message.trim()) {
-      console.log(`Message envoyé: ${message}`);
-      setMessage(''); 
+  const handleSendMessage = async () => {
+    if (message.trim() === "") {
+      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 ;
@@ -79,12 +86,23 @@ const ServerConsole = ({ user }) => {
   return (
     

       

-        
Console

+        

+          Console {status ? '(En marche)' : '(Arrêté)'}
+        

         

-          
-            {logs}
-          

-          

+          {status ? (
+            <>
+              
+                {logs}
+              

+              

+            
+          ) : (
+            

+              
+              Serveur hors ligne
+            

+          )}
         

         

            {
       

     

   );
+  
 };
 
 ServerConsole.propTypes = {
diff --git a/src/pages/ServerConsole/ServerConsole.module.scss b/src/pages/ServerConsole/ServerConsole.module.scss
index 1a4fd57..3e0808b 100644
--- a/src/pages/ServerConsole/ServerConsole.module.scss
+++ b/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 */
-  box-sizing: border-box; /* Inclut le padding dans la taille totale */
+  padding: 1rem; 
+  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 
 */
+  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;
+}
\ No newline at end of file
diff --git a/src/pages/ServerDetails/ServerDetails.jsx b/src/pages/ServerDetails/ServerDetails.jsx
index 33575b2..033a4d5 100644
--- a/src/pages/ServerDetails/ServerDetails.jsx
+++ b/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 ServerDetails = ({ user   }) => {
   const { serverName } = useParams(); 
   const navigate = useNavigate();
+  const location = useLocation();
+  const status = location.state?.status; 
 
   const handleQuit = () => {
     navigate('/dashboard');
   };
 
+
   return (
     <>
       
@@ -39,6 +44,7 @@ const ServerDetails = ({ user }) => {
             
 
              isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
                Console
@@ -74,18 +80,19 @@ const ServerDetails = ({ user }) => {
                Accès
             
           

+          
         

         

-          
-            } />
-            } />
-            Cette fonctionnalité sera prochainement disponible.} />
-            Cette fonctionnalité sera prochainement disponible.} />
-            Cette fonctionnalité sera prochainement disponible.} />
-            Cette fonctionnalité sera prochainement disponible.} />
-            Cette fonctionnalité sera prochainement disponible.} />
-            } />
-          
+        
+          } />
+          } />
+          Cette fonctionnalité sera prochainement disponible.} />
+          Cette fonctionnalité sera prochainement disponible.} />
+          Cette fonctionnalité sera prochainement disponible.} />
+          Cette fonctionnalité sera prochainement disponible.} />
+          Cette fonctionnalité sera prochainement disponible.} />
+          } />
+        
         

       

     
diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss
index 1642042..e2ab77d 100644
--- a/src/pages/ServerDetails/ServerDetails.module.scss
+++ b/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 {
-  margin-top: 2rem;
-  padding: 0.75rem 1.5rem;
-  background-color: #EF4444;
+.BackButton {
+  margin-top: 1rem;
+  padding: 0.70rem 1.5rem;
+  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 {