ajout card dashboard

src/App.jsx

@@ -5,9 +5,11 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import LoginPage from './pages/LoginPage/LoginPage';
 import DashboardPage from './pages/DashboardPage/DashboardPage';
+import ServerDetails from './pages/ServerDetails/ServerDetails';  
 import { auth } from './service/firebase';
 import styles from './App.module.scss';
 import Loading from './pages/Loading/loading';
+import NotFound from './pages/NotFound/NotFound'; 
 
 const App = () => {
   const [user, setUser] = useState(null);
@@ -40,7 +42,9 @@ const App = () => {
         <Routes>
           <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
           <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
+          <Route path="/server/:serverName" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} /> {/* Ajout de cette ligne */}
           <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
+          <Route path="*" element={<NotFound />} /> {/*  route 404 */}
         </Routes>
         <ToastContainer />
       </div>

src/components/serverCard/serverCard.jsx

@@ -1,13 +1,15 @@
+// src/components/serverCard/serverCard.jsx
 import React from 'react';
+import { Link } from 'react-router-dom';
 import styles from './serverCard.module.scss';
 
-import paper from '../../assets/frameworks/paper_mc.png'
-import spigot from '../../assets/frameworks/spigot.png'
-import bukkit from '../../assets/frameworks/bukkit.png'
-import vanilla from '../../assets/frameworks/vanilla.png'
-import delete_button from '../../assets/frameworks/delete.png'
+import paper from '../../assets/frameworks/paper_mc.png';
+import spigot from '../../assets/frameworks/spigot.png';
+import bukkit from '../../assets/frameworks/bukkit.png';
+import vanilla from '../../assets/frameworks/vanilla.png';
+import delete_button from '../../assets/frameworks/delete.png';
 
-const ServerCard = ({status, version, link, name, framework, onRunClick, onStopClick, onDeleteClick }) => {
+const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick }) => {
 
   const getFrameworkSource = () => {
     switch (framework) {
@@ -20,7 +22,7 @@ const ServerCard = ({status, version, link, name, framework, onRunClick, onStopC
       default:
         return vanilla;
     }
-  }
+  };
 
   const handleRun = async () => {
     try {
@@ -47,11 +49,11 @@ const ServerCard = ({status, version, link, name, framework, onRunClick, onStopC
   };
 
   return (
-    <a href={link} className={styles.serverCard}>
+    <Link to={`/server/${name}`} className={styles.serverCard}>
       <div className={styles.leftCard}>
         <div className={styles.status}>
           <div className={styles.name}>{name}</div>
-          <img src={getFrameworkSource()} alt={`${name} Icon`} className={styles.frameworkIcon}/>
+          <img src={getFrameworkSource()} alt={`${name} Icon`} className={styles.frameworkIcon} />
           <div className="tooltip"></div>
         </div>
         <div className={styles.buttonContainer}>
@@ -64,8 +66,8 @@ const ServerCard = ({status, version, link, name, framework, onRunClick, onStopC
         </div>
       </div>
       <div className={styles.version}>Version: {version}</div>
-      <button className={styles.runningButton} onClick={handleDelete}><img src={delete_button} className={styles.deleteButton}/></button>
-    </a>
+      <button className={styles.runningButton} onClick={handleDelete}><img src={delete_button} className={styles.deleteButton} /></button>
+    </Link>
   );
 };
 

src/components/serverCard/serverCard.module.scss

@@ -10,8 +10,11 @@
   background-color: var(--card-bg-color);
   color: var(--text-color);
   margin-bottom: 1.5rem;
+  cursor: pointer;
 }
 
+
+
 .status {
   display: flex;
   align-items: center;

src/pages/NotFound/NotFound.jsx

@@ -0,0 +1,18 @@
+// src/pages/NotFoundPage/NotFoundPage.jsx
+import React from 'react';
+import Navbar from '../../components/navbar/Navbar';
+import styles from './NotFound.module.scss';
+
+const NotFoundPage = () => {
+  return (
+    <div className={styles.notFoundContainer}>
+      <Navbar />
+      <div className={styles.message}>
+        <h1>Page inconnue</h1>
+        <p>La page que vous recherchez n'existe pas.</p>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;

src/pages/NotFound/NotFound.module.scss

@@ -0,0 +1,35 @@
+// src/pages/NotFound/NotFound.module.scss
+.notFoundContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    text-align: center;
+    color:white;
+  }
+  
+  .message {
+    margin-top: 50px;
+  }
+  
+  .message h1 {
+    font-size: 3rem;
+    margin-bottom: 20px;
+  }
+  
+  .message p {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+  }
+  
+  .message a {
+    font-size: 1.2rem;
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  .message a:hover {
+    text-decoration: underline;
+  }
+  

src/pages/ServerDetails/ServerDetails.jsx

@@ -0,0 +1,50 @@
+// src/pages/ServerDetails/ServerDetails.jsx
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import Navbar from '../../components/navbar/Navbar';
+import styles from './ServerDetails.module.scss';
+import serviiApi from "../../service/api.tsx";
+import Loading from '../Loading/loading';
+
+const ServerDetails = ({ user }) => {
+  const { serverName } = useParams();
+  const [server, setServer] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadServer = async () => {
+      try {
+        const ApiResponse = await serviiApi.fetchServer(serverName);
+        setServer(ApiResponse.message);
+      } catch (error) {
+        console.error('Error fetching server data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadServer();
+  }, [serverName]);
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className={styles.serverDetailsContainer}>
+      <Navbar user={user} />
+      {server ? (
+        <div className={styles.details}>
+          <h1>{server.name}</h1>
+          <p>Status: {server.running ? 'Running' : 'Stopped'}</p>
+          <p>Version: {server.version}</p>
+          <p>Framework: {server.framework}</p>
+          {/* Ajoutez d'autres détails ici */}
+        </div>
+      ) : (
+        <div>Server not found</div>
+      )}
+    </div>
+  );
+};
+
+export default ServerDetails;