Merge branch 'master' into 'main'

Format de tables et de navbar

See merge request !2

package-lock.json

@@ -8,6 +8,7 @@
       "name": "gestion-stages-front",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
@@ -2314,6 +2315,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -17775,6 +17784,11 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
       "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q=="
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",

src/components/CandidacyList.jsx

-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 
-const CandidacyList = () => {
+function CandidacyList() {
   const [candidacies, setCandidacies] = useState([]);
-  const [error, setError] = useState(null);
 
   useEffect(() => {
     fetch("http://localhost:8080/api/candidacies")
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Erreur lors de la récupération des candidatures !");
-        }
-        return response.json();
-      })
+      .then((response) => response.json())
       .then((data) => setCandidacies(data))
-      .catch((err) => setError(err.message));
+      .catch((error) => console.error("Error fetching candidacies:", error));
   }, []);
 
   return (
-    <div>
-      <h2>Liste des Candidatures</h2>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      <ul>
-        {candidacies.length > 0 ? (
-          candidacies.map((candidacy) => (
-            <li key={candidacy.id}>
-              Étudiant: {candidacy.student.firstname} {candidacy.student.lastname} - 
-              Stage: {candidacy.stage.name} - 
-              Superviseur: {candidacy.univSupervisor.name}
-            </li>
-          ))
-        ) : (
-          <p>Aucune candidature trouvée.</p>
-        )}
-      </ul>
+    <div className="container mt-4">
+      <h2 className="mb-4">Liste des Candidatures</h2>
+      <table className="table table-striped table-hover">
+        <thead className="table-warning">
+          <tr>
+            <th>ID</th>
+            <th>Étudiant</th>
+            <th>Stage</th>
+            <th>Superviseur Universitaire</th>
+          </tr>
+        </thead>
+        <tbody>
+          {candidacies.map((candidacy) => (
+            <tr key={candidacy.id}>
+              <td>{candidacy.id}</td>
+              <td>{candidacy.student?.firstname} {candidacy.student?.lastname}</td>
+              <td>{candidacy.stage?.name}</td>
+              <td>{candidacy.univSupervisor?.name}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
-};
+}
 
 export default CandidacyList;

src/components/EnterpriseList.jsx

-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 
-const EnterpriseList = () => {
+function EnterpriseList() {
   const [enterprises, setEnterprises] = useState([]);
-  const [error, setError] = useState(null);
 
   useEffect(() => {
     fetch("http://localhost:8080/api/enterprises")
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Erreur lors de la récupération des entreprises !");
-        }
-        return response.json();
-      })
+      .then((response) => response.json())
       .then((data) => setEnterprises(data))
-      .catch((err) => setError(err.message));
+      .catch((error) => console.error("Error fetching enterprises:", error));
   }, []);
 
   return (
-    <div>
-      <h2>Liste des Entreprises</h2>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      <ul>
-        {enterprises.length > 0 ? (
-          enterprises.map((enterprise) => (
-            <li key={enterprise.id}>
-              <strong>{enterprise.name}</strong> - {enterprise.address}
-            </li>
-          ))
-        ) : (
-          <p>Aucune entreprise trouvée.</p>
-        )}
-      </ul>
+    <div className="container mt-4">
+      <h2 className="mb-4">Liste des Entreprises</h2>
+      <table className="table table-striped table-hover">
+        <thead className="table-primary">
+          <tr>
+            <th>ID</th>
+            <th>Nom</th>
+            <th>Adresse</th>
+          </tr>
+        </thead>
+        <tbody>
+          {enterprises.map((enterprise) => (
+            <tr key={enterprise.id}>
+              <td>{enterprise.id}</td>
+              <td>{enterprise.name}</td>
+              <td>{enterprise.address}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
-};
+}
 
 export default EnterpriseList;

src/components/Navbar.css

+/* Navbar styling */
+.navbar {
+  padding: 12px 20px;
+  font-size: 16px;
+  background: #ffffff;
+  border-bottom: 2px solid #007bff;
+}
+
+/* Brand */
+.navbar-brand {
+  font-size: 20px;
+  font-weight: bold;
+  color: #007bff !important;
+}
+
+/* Navbar Links */
+.navbar-nav .nav-link {
+  color: #333 !important;
+  font-weight: 500;
+  padding: 10px 15px;
+  transition: all 0.3s ease-in-out;
+}
+
+/* Highlight the active link */
+.navbar-nav .nav-link:hover,
+.navbar-nav .nav-link.active {
+  color: #007bff !important;
+  border-bottom: 2px solid #007bff;
+}
+
+/* Responsive styles */
+@media (max-width: 992px) {
+  .navbar-nav {
+    text-align: center;
+  }
+  .navbar-nav .nav-item {
+    margin-bottom: 5px;
+  }
+}

src/components/Navbar.js → src/components/Navbar.jsx

 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import "./Navbar.css"; // Optional: Add this for extra styling
 
 function Navbar() {
+  const location = useLocation();
+
   return (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav className="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
       <div className="container">
-        <Link className="navbar-brand" to="/">Gestion Stages</Link>
+        <Link className="navbar-brand fw-bold" to="/">
+          <i className="fas fa-graduation-cap"></i> Gestion Stages
+        </Link>
         <button
           className="navbar-toggler"
           type="button"
@@ -17,25 +22,56 @@ function Navbar() {
         >
           <span className="navbar-toggler-icon"></span>
         </button>
+
         <div className="collapse navbar-collapse" id="navbarNav">
-          <ul className="navbar-nav">
+          <ul className="navbar-nav ms-auto">
             <li className="nav-item">
-              <Link className="nav-link" to="/login">Login</Link>
+              <Link
+                className={`nav-link ${location.pathname === "/login" ? "active" : ""}`}
+                to="/login"
+              >
+                <i className="fas fa-sign-in-alt"></i> Login
+              </Link>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/stages">Stages</Link>
+              <Link
+                className={`nav-link ${location.pathname === "/stages" ? "active" : ""}`}
+                to="/stages"
+              >
+                <i className="fas fa-book"></i> Stages
+              </Link>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/etudiants">Étudiants</Link>
+              <Link
+                className={`nav-link ${location.pathname === "/etudiants" ? "active" : ""}`}
+                to="/etudiants"
+              >
+                <i className="fas fa-user-graduate"></i> Étudiants
+              </Link>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/entreprises">Entreprises</Link>
+              <Link
+                className={`nav-link ${location.pathname === "/entreprises" ? "active" : ""}`}
+                to="/entreprises"
+              >
+                <i className="fas fa-building"></i> Entreprises
+              </Link>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/candidatures">Candidatures</Link>
+              <Link
+                className={`nav-link ${location.pathname === "/candidatures" ? "active" : ""}`}
+                to="/candidatures"
+              >
+                <i className="fas fa-file-alt"></i> Candidatures
+              </Link>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/superviseurs">Superviseurs</Link>
+              <Link
+                className={`nav-link ${location.pathname === "/superviseurs" ? "active" : ""}`}
+                to="/superviseurs"
+              >
+                <i className="fas fa-chalkboard-teacher"></i> Superviseurs
+              </Link>
             </li>
           </ul>
         </div>

src/components/StageList.jsx

-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 
-const StageList = () => {
-  const [stages, setStages] = useState([]); // État pour stocker les stages
-  const [error, setError] = useState(null); // État pour gérer les erreurs
+function StageList() {
+  const [stages, setStages] = useState([]);
 
   useEffect(() => {
-    fetch("http://localhost:8080/api/stages") // Appel API
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Erreur lors de la récupération des stages !");
-        }
-        return response.json();
-      })
-      .then((data) => setStages(data)) // Mettre à jour l'état avec les données reçues
-      .catch((err) => setError(err.message)); // Gestion des erreurs
-  }, []); // Le tableau vide signifie que ça s'exécute une seule fois au chargement
+    fetch("http://localhost:8080/api/stages")
+      .then((response) => response.json())
+      .then((data) => setStages(data))
+      .catch((error) => console.error("Error fetching stages:", error));
+  }, []);
 
   return (
-    <div>
-      <h2>Liste des Stages</h2>
-      {error && <p style={{ color: "red" }}>{error}</p>} {/* Affichage des erreurs */}
-
-      <ul>
-        {stages.length > 0 ? (
-          stages.map((stage) => (
-            <li key={stage.id}>
-              <strong>{stage.name}</strong> - {stage.description}
-            </li>
-          ))
-        ) : (
-          <p>Aucun stage trouvé.</p>
-        )}
-      </ul>
+    <div className="container mt-4">
+      <h2 className="mb-4">Liste des Stages</h2>
+      <table className="table table-striped table-hover">
+        <thead className="table-success">
+          <tr>
+            <th>ID</th>
+            <th>Nom</th>
+            <th>Description</th>
+            <th>Entreprise</th>
+          </tr>
+        </thead>
+        <tbody>
+          {stages.map((stage) => (
+            <tr key={stage.id}>
+              <td>{stage.id}</td>
+              <td>{stage.name}</td>
+              <td>{stage.description}</td>
+              <td>{stage.enterprise?.name}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
-};
+}
 
 export default StageList;

src/components/StudentList.jsx

-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 
-const StudentList = () => {
+function StudentList() {
   const [students, setStudents] = useState([]);
-  const [error, setError] = useState(null);
 
   useEffect(() => {
     fetch("http://localhost:8080/api/students")
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Erreur lors de la récupération des étudiants !");
-        }
-        return response.json();
-      })
+      .then((response) => response.json())
       .then((data) => setStudents(data))
-      .catch((err) => setError(err.message));
+      .catch((error) => console.error("Error fetching students:", error));
   }, []);
 
   return (
-    <div>
-      <h2>Liste des Étudiants</h2>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      <ul>
-        {students.length > 0 ? (
-          students.map((student) => (
-            <li key={student.id}>
-              <strong>{student.firstname} {student.lastname}</strong>
-            </li>
-          ))
-        ) : (
-          <p>Aucun étudiant trouvé.</p>
-        )}
-      </ul>
+    <div className="container mt-4">
+      <h2 className="mb-4">Liste des Étudiants</h2>
+      <table className="table table-striped table-hover">
+        <thead className="table-info">
+          <tr>
+            <th>ID</th>
+            <th>Prénom</th>
+            <th>Nom</th>
+          </tr>
+        </thead>
+        <tbody>
+          {students.map((student) => (
+            <tr key={student.id}>
+              <td>{student.id}</td>
+              <td>{student.firstname}</td>
+              <td>{student.lastname}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
-};
+}
 
 export default StudentList;

src/components/UnivSupervisorList.jsx

-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 
-const UnivSupervisorList = () => {
-  const [supervisors, setSupervisors] = useState([]);
-  const [error, setError] = useState(null);
+function UnivSupervisorList() {
+  const [univSupervisors, setUnivSupervisors] = useState([]);
 
   useEffect(() => {
-    fetch("http://localhost:8080/api/univsupervisors")
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Erreur lors de la récupération des superviseurs !");
-        }
-        return response.json();
-      })
-      .then((data) => setSupervisors(data))
-      .catch((err) => setError(err.message));
+    fetch("http://localhost:8080/api/univSupervisors")
+      .then((response) => response.json())
+      .then((data) => setUnivSupervisors(data))
+      .catch((error) => console.error("Error fetching university supervisors:", error));
   }, []);
 
   return (
-    <div>
-      <h2>Liste des Superviseurs</h2>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      <ul>
-        {supervisors.length > 0 ? (
-          supervisors.map((supervisor) => (
-            <li key={supervisor.id}>
-              <strong>{supervisor.name}</strong>
-            </li>
-          ))
-        ) : (
-          <p>Aucun superviseur trouvé.</p>
-        )}
-      </ul>
+    <div className="container mt-4">
+      <h2 className="mb-4">Liste des Superviseurs Universitaires</h2>
+      <table className="table table-striped table-hover">
+        <thead className="table-danger">
+          <tr>
+            <th>ID</th>
+            <th>Nom du Superviseur Universitaire</th>
+          </tr>
+        </thead>
+        <tbody>
+          {univSupervisors.map((supervisor) => (
+            <tr key={supervisor.id}>
+              <td>{supervisor.id}</td>
+              <td>{supervisor.name}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
-};
+}
 
 export default UnivSupervisorList;

src/index.js

@@ -3,6 +3,10 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.bundle.min";
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(