Merge branch 'front_foundation' of https://gitea.piair.dev/piair/MyINPulse into front_foundation

fix: api service
fix: idk
2025-04-28 23:08:59 +02:00 · 2025-04-28 23:08:19 +02:00 · 2025-04-28 23:05:04 +02:00 · 2025-04-28 22:52:09 +02:00 · 2025-04-28 22:51:21 +02:00 · 2025-04-28 22:49:07 +02:00
43 changed files with 4038 additions and 69 deletions
--- a/3
+++ b/3
@ -33,6 +33,8 @@ dev-front: clean vite keycloak
 	@cp config/frontdev.docker-compose.yaml docker-compose.yaml
 	@docker compose up -d --build
 	@cd ./front/MyINPulse-front/ && npm run dev
 	@echo "cd MyINPulse-back" && echo 'export $$(cat .env | xargs)'
 	@echo "./gradlew bootRun --args='--server.port=8081'"
 prod: clean keycloak
 	@cp config/prod.env front/MyINPulse-front/.env
@ -40,6 +42,7 @@ prod: clean keycloak
 	@cp config/prod.env .env
 	@cp config/prod.docker-compose.yaml docker-compose.yaml
 	@docker compose up -d --build
--- a/front/Dockerfile
+++ b/front/Dockerfile
--- a/front/MyINPulse-front/index.html
+++ b/front/MyINPulse-front/index.html
@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
-  <head>
+    <head>
-    <meta charset="UTF-8">
+        <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico">
+        <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+        <title>Vite App</title>
-  </head>
+    </head>
-  <body>
+    <body>
-    <div id="app"></div>
+        <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+        <script type="module" src="/src/main.ts"></script>
-  </body>
+    </body>
 </html>
--- a/front/MyINPulse-front/package-lock.json
+++ b/front/MyINPulse-front/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "axios": "^1.7.9",
        "cors": "^2.8.5",
        "jwt-decode": "^4.0.0",
        "keycloak-js": "^26.1.0",
        "pinia": "^2.3.1",
        "pinia-plugin-persistedstate": "^4.2.0",
@ -3588,6 +3589,15 @@
        "graceful-fs": "^4.1.6"
      }
    },
    "node_modules/jwt-decode": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
      "license": "MIT",
      "engines": {
        "node": ">=18"
      }
    },
    "node_modules/keycloak-js": {
      "version": "26.1.0",
      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-26.1.0.tgz",
--- a/front/MyINPulse-front/package.json
+++ b/front/MyINPulse-front/package.json
@ -18,7 +18,8 @@
    "pinia": "^2.3.1",
    "pinia-plugin-persistedstate": "^4.2.0",
    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
    "jwt-decode": "^4.0.0"
  },
  "devDependencies": {
    "@playwright/test": "^1.49.1",
--- a/front/MyINPulse-front/src/ApiClasses/Appointment.ts
+++ b/front/MyINPulse-front/src/ApiClasses/Appointment.ts
@ -0,0 +1,68 @@
 // appointment.ts
 class Appointment {
    private _idAppointment?: number;
    private _appointmentDate?: string;
    private _appointmentTime?: string;
    private _appointmentDuration?: string;
    private _appointmentPlace?: string;
    private _appointmentSubject?: string;
    constructor(data: Partial<Appointment> = {}) {
        this._idAppointment = data.idAppointment;
        this._appointmentDate = data.appointmentDate;
        this._appointmentTime = data.appointmentTime;
        this._appointmentDuration = data.appointmentDuration;
        this._appointmentPlace = data.appointmentPlace;
        this._appointmentSubject = data.appointmentSubject;
    }
    get idAppointment(): number | undefined {
        return this._idAppointment;
    }
    set idAppointment(value: number | undefined) {
        this._idAppointment = value;
    }
    get appointmentDate(): string | undefined {
        return this._appointmentDate;
    }
    set appointmentDate(value: string | undefined) {
        this._appointmentDate = value;
    }
    get appointmentTime(): string | undefined {
        return this._appointmentTime;
    }
    set appointmentTime(value: string | undefined) {
        this._appointmentTime = value;
    }
    get appointmentDuration(): string | undefined {
        return this._appointmentDuration;
    }
    set appointmentDuration(value: string | undefined) {
        this._appointmentDuration = value;
    }
    get appointmentPlace(): string | undefined {
        return this._appointmentPlace;
    }
    set appointmentPlace(value: string | undefined) {
        this._appointmentPlace = value;
    }
    get appointmentSubject(): string | undefined {
        return this._appointmentSubject;
    }
    set appointmentSubject(value: string | undefined) {
        this._appointmentSubject = value;
    }
 }
 export default Appointment;
--- a/front/MyINPulse-front/src/ApiClasses/JoinRequest.ts
+++ b/front/MyINPulse-front/src/ApiClasses/JoinRequest.ts
@ -0,0 +1,32 @@
 // joinRequest.ts
 import UserEntrepreneur from "./UserEntrepreneur";
 class JoinRequest {
    private _idProject?: number;
    private _entrepreneur?: UserEntrepreneur;
    constructor(data: Partial<JoinRequest> = {}) {
        this._idProject = data.idProject;
        this._entrepreneur = data.entrepreneur
            ? new UserEntrepreneur(data.entrepreneur)
            : undefined;
    }
    get idProject(): number | undefined {
        return this._idProject;
    }
    set idProject(value: number | undefined) {
        this._idProject = value;
    }
    get entrepreneur(): UserEntrepreneur | undefined {
        return this._entrepreneur;
    }
    set entrepreneur(value: UserEntrepreneur | undefined) {
        this._entrepreneur = value;
    }
 }
 export default JoinRequest;
--- a/front/MyINPulse-front/src/ApiClasses/JoinRequestDecision.ts
+++ b/front/MyINPulse-front/src/ApiClasses/JoinRequestDecision.ts
@ -0,0 +1,18 @@
 // joinRequestDecision.ts
 class JoinRequestDecision {
    private _isAccepted?: boolean;
    constructor(data: Partial<JoinRequestDecision> = {}) {
        this._isAccepted = data.isAccepted;
    }
    get isAccepted(): boolean | undefined {
        return this._isAccepted;
    }
    set isAccepted(value: boolean | undefined) {
        this._isAccepted = value;
    }
 }
 export default JoinRequestDecision;
--- a/front/MyINPulse-front/src/ApiClasses/Project.ts
+++ b/front/MyINPulse-front/src/ApiClasses/Project.ts
@ -0,0 +1,72 @@
 // project.ts
 class Project {
    private _idProject?: number;
    private _projectName?: string;
    private _creationDate?: string;
    private _logo?: string;
    private _status?: "PENDING" | "ACTIVE" | "ENDED" | "ABORTED" | "REJECTED";
    constructor(data: Partial<Project> = {}) {
        this._idProject = data.idProject;
        this._projectName = data.projectName;
        this._creationDate = data.creationDate;
        this._logo = data.logo;
        this._status = data.status;
    }
    get idProject(): number | undefined {
        return this._idProject;
    }
    set idProject(value: number | undefined) {
        this._idProject = value;
    }
    get projectName(): string | undefined {
        return this._projectName;
    }
    set projectName(value: string | undefined) {
        this._projectName = value;
    }
    get creationDate(): string | undefined {
        return this._creationDate;
    }
    set creationDate(value: string | undefined) {
        this._creationDate = value;
    }
    get logo(): string | undefined {
        return this._logo;
    }
    set logo(value: string | undefined) {
        this._logo = value;
    }
    get status():
        | "PENDING"
        | "ACTIVE"
        | "ENDED"
        | "ABORTED"
        | "REJECTED"
        | undefined {
        return this._status;
    }
    set status(
        value:
            | "PENDING"
            | "ACTIVE"
            | "ENDED"
            | "ABORTED"
            | "REJECTED"
            | undefined
    ) {
        this._status = value;
    }
 }
 export default Project;
--- a/front/MyINPulse-front/src/ApiClasses/ProjectDecision.ts
+++ b/front/MyINPulse-front/src/ApiClasses/ProjectDecision.ts
@ -0,0 +1,38 @@
 // projectDecision.ts
 class ProjectDecision {
    private _projectId?: number;
    private _adminId?: number;
    private _isAccepted?: boolean;
    constructor(data: Partial<ProjectDecision> = {}) {
        this._projectId = data.projectId;
        this._adminId = data.adminId;
        this._isAccepted = data.isAccepted;
    }
    get projectId(): number | undefined {
        return this._projectId;
    }
    set projectId(value: number | undefined) {
        this._projectId = value;
    }
    get adminId(): number | undefined {
        return this._adminId;
    }
    set adminId(value: number | undefined) {
        this._adminId = value;
    }
    get isAccepted(): boolean | undefined {
        return this._isAccepted;
    }
    set isAccepted(value: boolean | undefined) {
        this._isAccepted = value;
    }
 }
 export default ProjectDecision;
--- a/front/MyINPulse-front/src/ApiClasses/Repport.ts
+++ b/front/MyINPulse-front/src/ApiClasses/Repport.ts
@ -0,0 +1,28 @@
 // report.ts
 class Report {
    private _idReport?: number;
    private _reportContent?: string;
    constructor(data: Partial<Report> = {}) {
        this._idReport = data.idReport;
        this._reportContent = data.reportContent;
    }
    get idReport(): number | undefined {
        return this._idReport;
    }
    set idReport(value: number | undefined) {
        this._idReport = value;
    }
    get reportContent(): string | undefined {
        return this._reportContent;
    }
    set reportContent(value: string | undefined) {
        this._reportContent = value;
    }
 }
 export default Report;
--- a/front/MyINPulse-front/src/ApiClasses/SectionCell.ts
+++ b/front/MyINPulse-front/src/ApiClasses/SectionCell.ts
@ -0,0 +1,57 @@
 // sectionCell.ts
 class SectionCell {
    private _idSectionCell?: number;
    private _sectionId?: number;
    private _contentSectionCell?: string;
    private _modificationDate?: string;
    constructor(data: Partial<SectionCell> = {}) {
        this._idSectionCell = data.idSectionCell;
        this._sectionId = data.sectionId;
        this._contentSectionCell = data.contentSectionCell;
        this._modificationDate = data.modificationDate;
    }
    get idSectionCell(): number | undefined {
        return this._idSectionCell;
    }
    set idSectionCell(value: number | undefined) {
        this._idSectionCell = value;
    }
    get sectionId(): number | undefined {
        return this._sectionId;
    }
    set sectionId(value: number | undefined) {
        this._sectionId = value;
    }
    get contentSectionCell(): string | undefined {
        return this._contentSectionCell;
    }
    set contentSectionCell(value: string | undefined) {
        this._contentSectionCell = value;
    }
    get modificationDate(): string | undefined {
        return this._modificationDate;
    }
    set modificationDate(value: string | undefined) {
        this._modificationDate = value;
    }
    toPlainObject() {
        return {
            idSectionCell: this._idSectionCell,
            sectionId: this._sectionId,
            contentSectionCell: this._contentSectionCell,
            modificationDate: this._modificationDate,
        };
    }
 }
 export default SectionCell;
--- a/front/MyINPulse-front/src/ApiClasses/User.ts
+++ b/front/MyINPulse-front/src/ApiClasses/User.ts
@ -0,0 +1,67 @@
 class User {
    private _idUser?: number;
    private _userSurname?: string;
    private _userName?: string;
    private _primaryMail?: string;
    private _secondaryMail?: string;
    private _phoneNumber?: string;
    constructor(data: Partial<User> = {}) {
        this._idUser = data.idUser;
        this._userSurname = data.userSurname;
        this._userName = data.userName;
        this._primaryMail = data.primaryMail;
        this._secondaryMail = data.secondaryMail;
        this._phoneNumber = data.phoneNumber;
    }
    get idUser(): number | undefined {
        return this._idUser;
    }
    set idUser(value: number | undefined) {
        this._idUser = value;
    }
    get userSurname(): string | undefined {
        return this._userSurname;
    }
    set userSurname(value: string | undefined) {
        this._userSurname = value;
    }
    get userName(): string | undefined {
        return this._userName;
    }
    set userName(value: string | undefined) {
        this._userName = value;
    }
    get primaryMail(): string | undefined {
        return this._primaryMail;
    }
    set primaryMail(value: string | undefined) {
        this._primaryMail = value;
    }
    get secondaryMail(): string | undefined {
        return this._secondaryMail;
    }
    set secondaryMail(value: string | undefined) {
        this._secondaryMail = value;
    }
    get phoneNumber(): string | undefined {
        return this._phoneNumber;
    }
    set phoneNumber(value: string | undefined) {
        this._phoneNumber = value;
    }
 }
 export default User;
--- a/front/MyINPulse-front/src/ApiClasses/UserAdmin.ts
+++ b/front/MyINPulse-front/src/ApiClasses/UserAdmin.ts
@ -0,0 +1,10 @@
 // user-admin.ts
 import User from "./User";
 class UserAdmin extends User {
    constructor(data: Partial<UserAdmin> = {}) {
        super(data);
    }
 }
 export default UserAdmin;
--- a/front/MyINPulse-front/src/ApiClasses/UserEntrepreneur.ts
+++ b/front/MyINPulse-front/src/ApiClasses/UserEntrepreneur.ts
@ -0,0 +1,41 @@
 // user-entrepreneur.ts
 import User from "./User";
 class UserEntrepreneur extends User {
    private _school?: string;
    private _course?: string;
    private _sneeStatus?: boolean;
    constructor(data: Partial<UserEntrepreneur> = {}) {
        super(data);
        this._school = data.school;
        this._course = data.course;
        this._sneeStatus = data.sneeStatus;
    }
    get school(): string | undefined {
        return this._school;
    }
    set school(value: string | undefined) {
        this._school = value;
    }
    get course(): string | undefined {
        return this._course;
    }
    set course(value: string | undefined) {
        this._course = value;
    }
    get sneeStatus(): boolean | undefined {
        return this._sneeStatus;
    }
    set sneeStatus(value: boolean | undefined) {
        this._sneeStatus = value;
    }
 }
 export default UserEntrepreneur;
--- a/front/MyINPulse-front/src/App.vue
+++ b/front/MyINPulse-front/src/App.vue
@ -1,47 +1,12 @@
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+import { /*RouterLink,*/ RouterView } from "vue-router";
 import ErrorWrapper from "@/views/errorWrapper.vue";
 import ProjectComponent from "@/components/ProjectComponent.vue";
 </script>
 <template>
-    <HeaderComponent />
+    <Header />
-    <error-wrapper></error-wrapper>
+    <ErrorWrapper />
-    <div id="main">
+    <!--<RouterLink to="/">Home</RouterLink> | -->
-        <ProjectComponent
+    <!--<RouterLink to="/canvas">Canvas</RouterLink> -->
            v-for="(project, index) in projects"
            :key="index"
            :project-name="project.name"
        />
    </div>
    <RouterView />
 </template>
 <script lang="ts">
 import HeaderComponent from "@/components/HeaderComponent.vue";
 export default {
    name: "App",
    components: {
        HeaderComponent,
    },
    data() {
        return {
            projects: [
                {
                    name: "Projet Alpha",
                    //link: './project-alpha.html',
                    //members: ['Alice', 'Bob', 'Charlie'],
                },
                {
                    name: "Projet Beta",
                    //link: './project-beta.html',
                    //members: ['David', 'Eve', 'Frank'],
                },
            ],
        };
    },
 };
 </script>
 <style scoped></style>
--- a/front/MyINPulse-front/src/components/AddProjectForm.vue
+++ b/front/MyINPulse-front/src/components/AddProjectForm.vue
@ -0,0 +1,108 @@
 <template>
    <form class="add-project-form" @submit.prevent="submitProject">
        <h2>Ajouter un projet</h2>
        <div class="form-group">
            <label for="projectName">Nom du projet</label>
            <input
                id="projectName"
                v-model="project.projectName"
                type="text"
                required
            />
        </div>
        <div class="form-group">
            <label for="creationDate">Date de création</label>
            <input
                id="creationDate"
                v-model="project.creationDate"
                type="text"
                placeholder="JJ-MM-AAAA"
                required
            />
        </div>
        <div class="form-group">
            <label for="logo">Logo</label>
            <input
                id="logo"
                v-model="project.logo"
                type="text"
                placeholder="(à discuter)"
            />
        </div>
        <button type="submit">Ajouter</button>
    </form>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
 import { postApi } from "@/services/api.ts";
 const project = ref({
    projectName: "",
    creationDate: "",
    logo: "to be discussed not yet fixed",
 });
 function submitProject() {
    postApi("/admin/projects/add", project.value);
 }
 </script>
 <style scoped>
 h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
 }
 .add-project-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
 }
 .form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
 }
 label {
    font-weight: bold;
    margin-bottom: 5px;
 }
 input {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
 }
 button {
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
 }
 button:hover {
    background-color: #45a049;
 }
 </style>
--- a/front/MyINPulse-front/src/components/AdminAppointments.vue
+++ b/front/MyINPulse-front/src/components/AdminAppointments.vue
@ -0,0 +1,178 @@
 <template>
    <div>
        <h2>Ajouter / Modifier un Rapport pour un Rendez-vous</h2>
        <form @submit.prevent="submitReport">
            <div>
                <label for="appointmentId">ID du rendez-vous :</label>
                <div style="display: flex; align-items: center; gap: 0.5rem">
                    <button type="button" @click="decrementId">-</button>
                    <input
                        id="appointmentId"
                        v-model.number="appointmentId"
                        type="number"
                        min="1"
                        style="width: 60px; text-align: center"
                    />
                    <button type="button" @click="incrementId">+</button>
                </div>
            </div>
            <div>
                <label for="reportContent">Contenu du rapport :</label>
                <textarea
                    id="reportContent"
                    v-model="reportContent"
                    required
                ></textarea>
            </div>
            <button type="submit">
                {{ isUpdate ? "Mettre à jour" : "Créer" }} le rapport
            </button>
        </form>
        <p v-if="responseMessage">{{ responseMessage }}</p>
    </div>
 </template>
 <script>
 export default {
    name: "AdminAppointmentsComponent",
    data() {
        return {
            appointmentId: 1,
            reportContent: "",
            responseMessage: "",
            isUpdate: false,
        };
    },
    watch: {
        appointmentId(newVal) {
            if (newVal) {
                this.isUpdate = true;
            }
        },
    },
    methods: {
        incrementId() {
            this.appointmentId++;
        },
        decrementId() {
            if (this.appointmentId > 1) {
                this.appointmentId--;
            }
        },
        async submitReport() {
            const reportData = {
                reportContent: this.reportContent,
            };
            const url = `/admin/appointments/report/${this.appointmentId}`;
            const method = this.isUpdate ? "PUT" : "POST";
            try {
                const response = await this.$axios({
                    method,
                    url,
                    data: reportData,
                });
                if (response.status === 201 || response.status === 200) {
                    this.responseMessage =
                        "Rapport " +
                        (this.isUpdate ? "mis à jour" : "créé") +
                        " avec succès.";
                }
            } catch (error) {
                if (error.response && error.response.status === 400) {
                    this.responseMessage =
                        "Requête invalide. Vérifiez les informations.";
                } else if (error.response && error.response.status === 401) {
                    this.responseMessage =
                        "Vous n'êtes pas autorisé à effectuer cette action.";
                } else {
                    this.responseMessage =
                        "Une erreur est survenue. Veuillez réessayer.";
                }
            }
        },
    },
 };
 </script>
 <style scoped>
 /* Centrer le formulaire */
 div {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 /* Titre */
 h2 {
    text-align: center;
    color: #333;
    margin-bottom: 1rem;
 }
 /* Formulaire */
 form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }
 /* Boutons */
 button {
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
 }
 button:hover {
    background-color: #0056b3;
 }
 /* Input et Textarea */
 input[type="number"],
 textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
 }
 textarea {
    height: 120px;
    resize: none;
 }
 /* Message de réponse */
 p {
    text-align: center;
    font-weight: bold;
    color: green;
 }
 /* Boutons d'incrémentation/décrémentation */
 div[style*="display: flex"] button {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
 }
 div[style*="display: flex"] button:hover {
    background-color: #5a6268;
 }
 </style>
--- a/front/MyINPulse-front/src/components/AgendaComponent.vue
+++ b/front/MyINPulse-front/src/components/AgendaComponent.vue
@ -0,0 +1,93 @@
 <template>
    <div id="agenda">
        <h3>Rendez-vous</h3>
        <table>
            <thead>
                <tr>
                    <th>Projet</th>
                    <th>Date</th>
                    <th>Lieu</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(p, index) in projectRDV" :key="index">
                    <td>{{ p.projectName }}</td>
                    <td>{{ p.date }}</td>
                    <td>{{ p.lieu }}</td>
                </tr>
            </tbody>
        </table>
    </div>
 </template>
 <script setup lang="ts">
 import { defineProps } from "vue";
 interface rendezVous {
    projectName: string;
    date: string;
    lieu: string;
 }
 defineProps<{
    projectRDV: rendezVous[];
 }>();
 </script>
 <style scoped>
 h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
 }
 #agenda {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }
 /* Table Styling */
 table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    text-align: left;
    margin-top: 20px;
    border: 1px solid #ccc;
 }
 th {
    background-color: #f0f2f5;
    padding: 12px;
    font-weight: 600;
    color: #333;
 }
 /* Table Body Rows */
 tbody tr {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s ease; /* Smooth hover effect */
 }
 tbody tr:hover {
    background-color: #f9f9f9; /* Highlight row on hover */
 }
 /* Cells Styling */
 td {
    padding: 10px;
    border: 1px solid #eee;
    font-size: 14px;
    vertical-align: middle; /* Align text to middle */
 }
 /* First Column Styling */
 td:first-child {
    text-align: center;
    width: 50px; /* Adjust width as needed */
 }
 </style>
--- a/front/MyINPulse-front/src/components/HeaderComponent.vue
+++ b/front/MyINPulse-front/src/components/HeaderComponent.vue
@ -1,6 +1,16 @@
 <template>
    <header>
-        <img src="./icons/logo inpulse.png" alt="INPulse" />
+        <a
            href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
            target="_blank"
            rel="noopener"
        >
            <img
                src="./icons/logo inpulse.png"
                alt="INPulse Logo"
                class="logo"
            />
        </a>
    </header>
 </template>
--- a/front/MyINPulse-front/src/components/LoginComponent.vue
+++ b/front/MyINPulse-front/src/components/LoginComponent.vue
@ -0,0 +1,207 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { jwtDecode } from "jwt-decode"; // i hope this doesn't break the code later
 import { store } from "../main.ts";
 import { callApi } from "@/services/api.ts";
 import Header from "@/components/HeaderComponent.vue";
 const router = useRouter();
 type TokenPayload = {
    realm_access?: {
        roles?: string[];
    };
 };
 const customRequest = ref("");
 onMounted(() => {
    if (store.authenticated && store.user.token) {
        try {
            const decoded = jwtDecode<TokenPayload>(store.user.token);
            const roles = decoded.realm_access?.roles || [];
            if (roles.includes("MyINPulse-admin")) {
                router.push("/admin");
            } else if (roles.includes("MyINPulse-entrepreneur")) {
                router.push("/leanCanva");
            }
        } catch (err) {
            console.error("Failed to decode token", err);
        }
    }
 });
 /*
 const loading = ref(false);
 const callApiWithLoading = async (path: string) => {
  loading.value = true;
  await callApi(path);
  loading.value = false;
 };
 */
 </script>
 <template>
    <Header />
    <error-wrapper></error-wrapper>
    <div class="auth-container">
        <div class="auth-card">
            <h1>Bienvenue</h1>
            <div
                class="status"
                :class="store.authenticated ? 'success' : 'error'"
            >
                <p>
                    {{
                        store.authenticated
                            ? "✅ Authenticated"
                            : "❌ Not Authenticated"
                    }}
                </p>
            </div>
            <div class="actions">
                <button @click="store.login">Login</button>
                <button @click="store.logout">Logout</button>
                <button @click="store.signup">Signup-admin</button>
                <button @click="store.signup">Signup-Entrepreneur</button>
                <button @click="store.refreshUserToken">Refresh Token</button>
            </div>
            <div v-if="store.authenticated" class="token-section">
                <p><strong>Access Token:</strong></p>
                <pre>{{ store.user.token }}</pre>
                <p><strong>Refresh Token:</strong></p>
                <pre>{{ store.user.refreshToken }}</pre>
            </div>
            <div class="api-calls">
                <h2>Test API Calls</h2>
                <button @click="callApi('random')">
                    Call Entrepreneur API
                </button>
                <button @click="callApi('random2')">Call Admin API</button>
                <button @click="callApi('unauth/dev')">Call Unauth API</button>
                <div class="custom-call">
                    <input
                        v-model="customRequest"
                        placeholder="Custom endpoint"
                    />
                    <button @click="callApi(customRequest)">Call</button>
                </div>
            </div>
        </div>
    </div>
 </template>
 <style scoped>
 .auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    min-height: 100vh;
    background-color: #eef1f5;
    font-family: Arial, sans-serif;
 }
 .auth-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
 }
 h1 {
    text-align: center;
    margin-bottom: 1rem;
    color: #333;
 }
 .status {
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: bold;
 }
 .success {
    color: green;
 }
 .error {
    color: red;
 }
 .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
 }
 .actions button {
    padding: 0.6rem 1rem;
    background-color: #4a90e2;
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
 }
 .actions button:hover {
    background-color: #357abd;
 }
 .token-section pre {
    background: #f6f8fa;
    padding: 0.5rem;
    overflow-x: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
 }
 .api-calls {
    margin-top: 2rem;
 }
 .api-calls h2 {
    margin-bottom: 1rem;
    color: #444;
    font-size: 1.1rem;
 }
 .api-calls button {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
 }
 .custom-call {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
 }
 .custom-call input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
 }
 /* 
 .status {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  display: inline-block;
  background-color: #e0f7e9; 
  color: #2e7d32;
 }
 */
 .status.error {
    background-color: #ffe2e2;
    color: #c62828;
 }
 </style>
--- a/front/MyINPulse-front/src/components/PendingProjectComponent.vue
+++ b/front/MyINPulse-front/src/components/PendingProjectComponent.vue
@ -0,0 +1,129 @@
 <template>
    <div class="project">
        <div class="project-header">
            <div class="project-title">
                <h2>{{ projectName }}</h2>
                <p>Projet mis le: {{ creationDate }}</p>
            </div>
            <div class="project-buttons">
                <button id="accept" @click="acceptProject">Accepter</button>
                <button id="refus" @click="refuseProject">Refuser</button>
            </div>
        </div>
    </div>
 </template>
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { postApi } from "@/services/api";
 import { addNewMessage, color } from "@/services/popupDisplayer";
 const props = defineProps<{
    projectName: string;
    creationDate: string;
 }>();
 const URI = "/admin/projects/pending/decision";
 const sendDecision = (decision: "true" | "false") => {
    postApi(
        URI,
        {
            projectName: props.projectName,
            decision,
        },
        () => {
            addNewMessage(
                `Projet ${props.projectName} ${decision === "true" ? "accepté" : "refusé"}`,
                color.Green
            );
        },
        (err) => {
            addNewMessage(`Erreur lors de la décision`, color.Red);
            console.error(err);
        }
    );
 };
 const acceptProject = () => sendDecision("true");
 const refuseProject = () => sendDecision("false");
 </script>
 <style scoped>
 .project {
    background: linear-gradient(to right, #f8f9fb, #ffffff);
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
    transition: box-shadow 0.3s ease;
 }
 .project:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
 }
 .project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
 }
 .project-title {
    display: flex;
    flex-direction: column;
 }
 .project-title h2 {
    font-size: 1.25rem;
    color: #222;
    margin: 0;
    font-weight: 600;
 }
 .project-title p {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
 }
 .project-buttons {
    display: flex;
    gap: 0.75rem;
 }
 button {
    padding: 0.5rem 1.1rem;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
 }
 #accept {
    background-color: #4caf50;
 }
 #accept:hover {
    background-color: #3e8e41;
    transform: translateY(-2px);
 }
 #refus {
    background-color: #e74c3c;
 }
 #refus:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
 }
 </style>
--- a/front/MyINPulse-front/src/components/ProjectComponent.vue
+++ b/front/MyINPulse-front/src/components/ProjectComponent.vue
@ -1,21 +1,280 @@
 <template>
    <div class="project">
        <div class="project-header">
-            <h2>{{ projectName }}</h2>
+            <h2 @click="goToLink">{{ projectName }}</h2>
            <div class="header-actions">
                <div class="dropdown-wrapper">
                    <!-- Empêche la propagation du clic vers le parent -->
                    <button class="contact-button" @click.stop="toggleDropdown">
                        Contact
                    </button>
                    <div v-if="isDropdownOpen" class="dropdown-menu">
                        <button @click.stop="contactAll">Contacter tous</button>
                        <button
                            v-for="(email, index) in entrepreneurEmails"
                            :key="index"
                            @click.stop="contactSingle(email)"
                        >
                            {{ email }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Toute cette partie est cliquable -->
        <div class="project-body" @click="goToLink">
            <ul>
                <li v-for="(name, index) in listName" :key="index">
                    {{ name }}
                </li>
            </ul>
        </div>
    </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import type { PropType } from "vue";
+import { defineProps, ref, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import axios from "axios";
-export default {
+const IS_MOCK_MODE = true;
-    name: "ProjectComponent",
+
-    props: {
+const props = defineProps<{
-        projectName: {
+    projectName: string;
-            type: Object as PropType<string>,
+    listName: string[];
-            required: true,
+    projectLink: string;
-        },
+    projectId: number;
-    },
+}>();
 const router = useRouter();
 const isDropdownOpen = ref(false);
 const entrepreneurEmails = ref<string[]>([]);
 // Pour fermer le dropdown si on clique ailleurs
 const handleClickOutside = (event: MouseEvent) => {
    const dropdown = document.querySelector(".dropdown-wrapper");
    if (dropdown && !dropdown.contains(event.target as Node)) {
        isDropdownOpen.value = false;
    }
 };
 onMounted(() => {
    fetchEntrepreneurs(props.projectId, IS_MOCK_MODE);
    document.addEventListener("click", handleClickOutside);
 });
 onBeforeUnmount(() => {
    document.removeEventListener("click", handleClickOutside);
 });
 const toggleDropdown = () => {
    isDropdownOpen.value = !isDropdownOpen.value;
 };
 const goToLink = () => {
    if (props.projectLink) {
        router.push(props.projectLink);
    }
 };
 const fetchEntrepreneurs = async (
    projectId: number,
    useMock = IS_MOCK_MODE
 ) => {
    try {
        const responseData: Entrepreneur[] = useMock
            ? await mockFetchEntrepreneurs(/*projectId*/)
            : (
                  await axios.get(
                      `http://localhost:5000/shared/projects/entrepreneurs/${projectId}`
                  )
              ).data;
        entrepreneurEmails.value = responseData.map(
            (item: Entrepreneur) => item.primaryMail
        );
    } catch (error) {
        console.error(
            "Erreur lors de la récupération des entrepreneurs :",
            error
        );
    }
 };
 type Entrepreneur = {
    idUser: number;
    userSurname: string;
    userName: string;
    primaryMail: string;
    secondaryMail: string;
    phoneNumber: string;
    school: string;
    course: string;
    sneeStatus: boolean;
 };
 const mockFetchEntrepreneurs = async (/*projectId: number*/) => {
    return new Promise<Entrepreneur[]>((resolve) => {
        setTimeout(() => {
            resolve([
                {
                    idUser: 1,
                    userSurname: "Doe",
                    userName: "John",
                    primaryMail: "john.doe@example.com",
                    secondaryMail: "johndoe@backup.com",
                    phoneNumber: "612345678",
                    school: "ENSEIRB",
                    course: "Info",
                    sneeStatus: false,
                },
                {
                    idUser: 2,
                    userSurname: "Smith",
                    userName: "Jane",
                    primaryMail: "jane.smith@example.com",
                    secondaryMail: "janesmith@backup.com",
                    phoneNumber: "698765432",
                    school: "ENSEIRB",
                    course: "Info",
                    sneeStatus: true,
                },
            ]);
        }, 500);
    });
 };
 const contactAll = () => {
    const allEmails = entrepreneurEmails.value.join(", ");
    navigator.clipboard.writeText(allEmails).then(() => {
        alert("Tous les emails copiés dans le presse-papiers !");
        window.open("https://partage.bordeaux-inp.fr/", "_blank");
    });
 };
 const contactSingle = (email: string) => {
    navigator.clipboard.writeText(email).then(() => {
        alert(`Adresse copiée : ${email}`);
        window.open("https://partage.bordeaux-inp.fr/", "_blank");
    });
 };
 </script>
 <style scoped>
 .project {
    background: linear-gradient(to right, #f8f9fb, #ffffff);
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
    cursor: pointer;
 }
 .project:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
 }
 .project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
 }
 .project-header h2 {
    font-size: 1.25rem;
    color: #222;
    margin: 0;
    font-weight: 600;
 }
 .project-buttons {
    display: flex;
    gap: 0.5rem;
 }
 .contact-btn {
    background-color: #007bff;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
 }
 .contact-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
 }
 .project-body {
    margin-top: 1rem;
 }
 .project-body ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin: 0;
 }
 .project-body ul li {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
 }
 button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
 }
 button:hover {
    background-color: #0056b3;
 }
 .dropdown-wrapper {
    position: relative;
 }
 .dropdown-menu {
    position: absolute;
    top: 100%; /* juste en dessous du bouton */
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    padding: 0.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    min-width: 150px;
 }
 .dropdown-menu button {
    text-align: left;
    padding: 0.3rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
 }
 .dropdown-menu button:hover {
    background-color: #f0f0f0;
 }
 </style>
--- a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
+++ b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
@ -0,0 +1,572 @@
 <template>
    <div :class="['cell', { expanded }]" @click="handleClick">
        <h3 class="fs-5 fw-medium">{{ titleText }}</h3>
        <div class="tooltip-explain">{{ description }}</div>
        <template v-if="expanded">
            <div class="explain">
                <p>{{ description }}</p>
            </div>
        </template>
        <div class="description-wrapper custom-flow">
            <div
                v-for="(desc, index) in currentDescriptions"
                :key="desc.idSectionCell || index"
                :class="[
                    'section-bloc',
                    index % 2 === 0 ? 'from-left' : 'from-right',
                ]"
            >
                <!-- ADMIN -------------------------------------------------------------------------------------------->
                <template v-if="IS_ADMIN">
                    <div class="description">
                        <p class="m-0">{{ desc.contentSectionCell }}</p>
                    </div>
                </template>
                <!-- ENTREP ------------------------------------------------------------------------------------------->
                <template v-else>
                    <!-- Mode affichage -->
                    <template v-if="!isEditing[index]">
                        <div class="description">
                            <p class="m-0">{{ desc.contentSectionCell }}</p>
                        </div>
                        <div class="button-container">
                            <button
                                v-if="expanded"
                                class="edit-button"
                                @click.stop="startEditing(index)"
                            >
                                Éditer
                            </button>
                        </div>
                    </template>
                    <!-- Mode édition -->
                    <template v-else>
                        <div class="edit-row">
                            <textarea
                                v-model="
                                    editedDescriptions[index].contentSectionCell
                                "
                                class="edit-input"
                            ></textarea>
                            <div class="button-container">
                                <button
                                    class="save-button"
                                    @click.stop="saveEdit(index)"
                                >
                                    Enregistrer
                                </button>
                                <button
                                    class="cancel-button"
                                    @click.stop="cancelEdit(index)"
                                >
                                    Annuler
                                </button>
                            </div>
                        </div>
                    </template>
                </template>
            </div>
            <template v-if="expanded">
                <div class="canvas-exit-hint">
                    Cliquez n'importe où pour quitter le canvas (terminez
                    d'abord vos modifications)
                </div>
            </template>
        </div>
    </div>
 </template>
 <script setup lang="ts">
 import { ref, defineProps, onMounted } from "vue";
 import { getSectionCellsByDate } from "@/services/Apis/Shared.ts";
 import { addSectionCell } from "@/services/Apis/Entrepreneurs.ts";
 import SectionCell from "@/ApiClasses/SectionCell";
 import type { AxiosResponse, AxiosError } from "axios";
 const props = defineProps<{
    projectId: number;
    title: number;
    titleText: string;
    description: string;
    isAdmin: number;
 }>();
 const IS_MOCK_MODE = false;
 const IS_ADMIN = props.isAdmin;
 const expanded = ref(false);
 const currentDescriptions = ref<SectionCell[]>([]);
 const editedDescriptions = ref<SectionCell[]>([]);
 const isEditing = ref<boolean[]>([]);
 function getCurrentFormattedDate(): string {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // +1 car janvier = 0
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
 }
 onMounted(() => {
    fetchData(props.projectId, props.title, getCurrentFormattedDate(), IS_MOCK_MODE);
 });
 // Fonctions
 const startEditing = (index: number) => {
    isEditing.value[index] = true;
 };
 const cancelEdit = (index: number) => {
    editedDescriptions.value[index].contentSectionCell =
        currentDescriptions.value[index].contentSectionCell;
    isEditing.value[index] = false;
 };
 const saveEdit = (index: number) => {
    currentDescriptions.value[index].contentSectionCell =
        editedDescriptions.value[index].contentSectionCell;
    isEditing.value[index] = false;
    if (!IS_MOCK_MODE){
        addSectionCell(currentDescriptions.value[index],
            (response) => {
                console.log("Modification enregistrée avec succès :", response.data);
            },
            (error) => {
                console.error("Erreur lors de l'enregistrement :", error);
            }
        );
    }
 };
 const handleClick = () => {
    if (expanded.value) {
        const editingInProgress = isEditing.value.some((edit) => edit);
        if (!editingInProgress) {
            expanded.value = false;
        }
    } else {
        expanded.value = true;
    }
 };
 // fetchData
 const handleFetchSuccess = (sectionCells: SectionCell[]) => {
    currentDescriptions.value = sectionCells;
    editedDescriptions.value = sectionCells.map(
        (cell) => new SectionCell({
                    idSectionCell: cell.idSectionCell,
                    sectionId: cell.sectionId,
                    contentSectionCell: cell.contentSectionCell,
                    modificationDate: cell.modificationDate, })
    );
    isEditing.value = Array(sectionCells.length).fill(false);
 };
 const handleFetchError = (error: unknown) => {
    console.error("Erreur lors de la récupération des données :", error);
 };
 const fetchData = async ( projectId: number, title: number, date: string, useMock = false ) => {
    try {
        if (useMock) {
            const responseData = await mockFetch(projectId, title, date);
            handleFetchSuccess(responseData);
        } else {
            await new Promise<void>((resolve, reject) => {
                getSectionCellsByDate( projectId, title, date,
                    (response: AxiosResponse) => {
                        const data = response.data;
                        if (Array.isArray(data) && data.length > 0) {
                            const sectionCells = data.map((cellData) => new SectionCell({
                                                    idSectionCell: cellData.idSectionCell,
                                                    sectionId: cellData.sectionId,
                                                    contentSectionCell: cellData.contentSectionCell,
                                                    modificationDate:
                                                    cellData.modificationDate, })
                            );
                            handleFetchSuccess(sectionCells);
                        } else {
                            console.warn( "Aucune donnée reçue ou format inattendu :", data);
                        }
                        resolve();
                    },
                    (error: AxiosError) => {
                        handleFetchError(error);
                        reject(error);
                    }
                );
            });
        }
    } catch (error) {
        handleFetchError(error);
    }
 };
 const mockFetch = async ( projectId: number, title: number, date: string ): Promise<SectionCell[]> => {
    console.log(
        `Mock fetch pour projectId: ${projectId}, title: ${title}, date: ${date}`
    );
    const leanCanvasData: Record<number, string[]> = {
        1: [
            "Les clients ont du mal à trouver des produits écoresponsables abordables.",
            "Le processus d'achat en ligne est trop complexe.",
            "Manque de transparence sur l’origine des produits.",
            "Peu d’alternatives locales et durables sur le marché.",
        ],
        2: [
            "Jeunes urbains engagés dans la cause écologique.",
            "Familles à revenu moyen voulant consommer responsable.",
            "Entreprises soucieuses de leur empreinte carbone.",
        ],
        3: [
            "Une plateforme centralisée avec des produits écologiques certifiés.",
            "Un service client humain et réactif.",
            "Livraison éco-responsable avec suivi.",
        ],
        4: [
            "Application intuitive avec suggestions personnalisées.",
            "Emballages recyclables et réutilisables.",
        ],
        5: [
            "Algorithme exclusif de recommandations durables.",
            "Forte communauté engagée sur les réseaux.",
        ],
        6: [
            "Canaux digitaux : réseaux sociaux, SEO.",
            "Partenariats avec influenceurs écoresponsables.",
            "Boutique physique en pop-up stores.",
        ],
        7: [
            "Taux de rétention client mensuel.",
            "Taux de satisfaction utilisateur (NPS).",
        ],
        8: [
            "Coût du développement logiciel initial.",
            "Campagnes publicitaires et communication.",
            "Frais logistiques (emballages, transport).",
        ],
        9: [
            "Ventes directes sur la plateforme.",
            "Abonnement mensuel premium pour livraison gratuite.",
            "Revenus via partenariats de marque.",
        ],
    };
    // On extrait les descriptions pour la section demandée
    const section = leanCanvasData[title] || ["Aucune donnée disponible."];
    // On crée des instances de SectionCell
    const result = section.map(
        (txt, index) => new SectionCell({ idSectionCell: index + 1, sectionId: title,
                                    contentSectionCell: txt, modificationDate: date, })
    );
    return new Promise<SectionCell[]>((resolve) => {
        setTimeout(() => resolve(result), 500);
    });
 };
 </script>
 <style scoped>
@import "@/components/canvas/style-project.css";
 .cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
 }
 .expanded-content {
    justify-content: flex-start !important;
 }
 .tooltip-explain {
    position: absolute;
    bottom: 101%; /* au-dessus de la carte */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 10;
 }
 .cell:not(.expanded):hover .tooltip-explain {
    opacity: 0.9;
 }
 .cell:not(.expanded):hover {
    transform: scale(1.05);
    box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
 }
 .cell h3 {
    font-size: 15px;
    font-weight: 500;
    font-family: "Arial", sans-serif;
 }
 .p {
    font-size: 10px;
    color: #666;
    font-family: "Arial", sans-serif;
 }
 .expanded {
    padding-top: 10%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 }
 .description {
    font-size: 5px;
    color: #333;
    word-break: break-word;
    width: 90%;
    margin: 5px 0;
 }
 .description + .p {
    align-items: center;
    justify-content: center;
    text-align: center;
 }
 .edit-input {
    width: 100%;
    height: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 10px;
    box-sizing: border-box;
    margin-left: 2%;
    max-height: none;
    overflow: hidden;
 }
 .button-container {
    display: block;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-right: 1%;
 }
 .section-bloc {
    background-color: #f3f3f3;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: "Arial", sans-serif;
    color: #333;
    word-break: break-word;
    flex-shrink: 0;
    cursor: default;
    max-width: 100%;
    width: fit-content;
    overflow-wrap: break-word;
    box-sizing: border-box;
    min-width: 120px;
 }
 .editing-section-bloc {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-right: 10%;
    margin: 10px;
 }
 .edit-button {
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 12px;
    margin-right: 20px;
 }
 .description p {
    font-size: 12px;
 }
 .save-button,
 .cancel-button {
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 12px;
    margin-bottom: 5px;
 }
 .edit-button {
    background-color: #007bff;
    color: white;
 }
 .save-button {
    background-color: #28a745;
    color: white;
 }
 .cancel-button {
    background-color: #dc3545;
    color: white;
 }
 .edit-button:hover {
    background-color: #0056b3;
 }
 .save-button:hover {
    background-color: #218838;
 }
 .cancel-button:hover {
    background-color: #c82333;
 }
 .canvas-exit-hint {
    font-size: 0.75rem;
    color: #666;
    position: fixed;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1000;
 }
 .description-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    overflow: hidden;
    max-height: 100%;
    width: 100%;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    max-height: 100%;
    box-sizing: border-box;
 }
 .custom-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
 }
 .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: min-content;
    grid-auto-flow: dense;
    gap: 1rem;
 }
 .float-up {
    transform: translateY(-10px);
 }
 .float-left {
    transform: translateX(-10px);
 }
 .float-right {
    transform: translateX(10px);
 }
 .wiggle {
    transform: rotate(1deg);
 }
 .tilt {
    transform: rotate(-1deg);
 }
 .from-left {
    align-self: flex-start;
 }
 .from-right {
    align-self: flex-end;
 }
 .section-bloc.from-left {
    margin-right: auto;
    margin-left: 20%;
 }
 .section-bloc.from-right {
    margin-left: auto;
    margin-right: 20%;
 }
 .explain {
    font-size: 16px;
    color: #444;
    background-color: #f9f9f9;
    padding: 7px;
    border-left: 4px solid #0d6efd;
    border-right: 4px solid #0d6efd;
    border-radius: 6px;
    margin-bottom: 20px;
    margin-top: 20px;
    line-height: 1.6;
    font-family: "Segoe UI", sans-serif;
 }
 </style>
--- a/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
@ -0,0 +1,253 @@
 <template>
    <header class="header">
        <a
            href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
            target="_blank"
            rel="noopener"
        >
            <img
                src="../icons/logo inpulse.png"
                alt="INPulse Logo"
                class="logo"
            />
        </a>
        <div class="header-actions">
            <div ref="dropdownRef" class="dropdown-wrapper">
                <button class="contact-button" @click.stop="toggleDropdown">
                    Contact
                </button>
                <div
                    class="contact-dropdown"
                    :class="{ 'dropdown-visible': isDropdownOpen }"
                >
                    <button @click="contactAll">Contacter tous</button>
                    <button
                        v-for="(email, index) in entrepreneurEmails"
                        :key="index"
                        @click="contactSingle(email)"
                    >
                        {{ email }}
                    </button>
                </div>
            </div>
            <RouterLink to="/" class="return-button">Retour</RouterLink>
        </div>
    </header>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import axios from "axios";
 const IS_MOCK_MODE = true;
 const dropdownRef = ref<HTMLElement | null>(null); // ref pour le dropdown
 const props = defineProps<{
    projectId: number;
 }>();
 type Entrepreneur = {
    idUser: number;
    userSurname: string;
    userName: string;
    primaryMail: string;
    secondaryMail: string;
    phoneNumber: string;
    school: string;
    course: string;
    sneeStatus: boolean;
 };
 const isDropdownOpen = ref(false);
 const entrepreneurEmails = ref<string[]>([]);
 const toggleDropdown = () => {
    isDropdownOpen.value = !isDropdownOpen.value;
    console.log("Dropdown toggled:", isDropdownOpen.value);
 };
 const fetchEntrepreneurs = async (
    projectId: number,
    useMock = IS_MOCK_MODE
 ) => {
    try {
        const responseData: Entrepreneur[] = useMock
            ? await mockFetchEntrepreneurs(projectId)
            : (
                  await axios.get(
                      `http://localhost:5000/shared/projects/entrepreneurs/${projectId}`
                  )
              ).data;
        if (responseData.length > 0) {
            entrepreneurEmails.value = responseData.map(
                (item: Entrepreneur) => item.primaryMail
            );
        } else {
            console.warn("Aucun entrepreneur trouvé.");
        }
    } catch (error) {
        console.error(
            "Erreur lors de la récupération des entrepreneurs :",
            error
        );
    }
 };
 // Fonction de simulation de l'API
 const mockFetchEntrepreneurs = async (projectId: number) => {
    console.log(`Mock fetch pour projectId: ${projectId}`);
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([
                {
                    idUser: 1,
                    userSurname: "Doe",
                    userName: "John",
                    primaryMail: "john.doe@example.com",
                    secondaryMail: "johndoe@backup.com",
                    phoneNumber: "612345678",
                    school: "ENSEIRB",
                    course: "Info",
                    sneeStatus: false,
                },
                {
                    idUser: 2,
                    userSurname: "Smith",
                    userName: "Jane",
                    primaryMail: "jane.smith@example.com",
                    secondaryMail: "janesmith@backup.com",
                    phoneNumber: "698765432",
                    school: "ENSEIRB",
                    course: "Info",
                    sneeStatus: true,
                },
            ]);
        }, 500);
    });
 };
 const contactAll = () => {
    const allEmails = entrepreneurEmails.value.join(", ");
    navigator.clipboard
        .writeText(allEmails)
        .then(() => {
            alert("Tous les emails copiés dans le presse-papiers !");
            window.open("https://partage.bordeaux-inp.fr/", "_blank");
        })
        .catch((err) => {
            console.error("Erreur lors de la copie :", err);
        });
 };
 const contactSingle = (email: string) => {
    navigator.clipboard
        .writeText(email)
        .then(() => {
            alert(`Adresse copiée : ${email}`);
            window.open("https://partage.bordeaux-inp.fr/", "_blank");
        })
        .catch((err) => {
            console.error("Erreur lors de la copie :", err);
        });
 };
 // Cacher le menu si on clique en dehors
 const handleClickOutside = (event: MouseEvent) => {
    if (
        isDropdownOpen.value &&
        dropdownRef.value &&
        !dropdownRef.value.contains(event.target as Node)
    ) {
        isDropdownOpen.value = false;
    }
 };
 onMounted(() => {
    fetchEntrepreneurs(props.projectId, IS_MOCK_MODE);
    document.addEventListener("click", handleClickOutside);
 });
 onBeforeUnmount(() => {
    document.removeEventListener("click", handleClickOutside);
 });
 </script>
 <style scoped>
@import "@/components/canvas/style-project.css";
 .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .logo {
    height: 50px;
 }
 .header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
 }
 .contact-button,
 .return-button {
    background-color: #009cde;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-family: Arial, sans-serif;
 }
 .return-button:hover,
 .contact-button:hover {
    background-color: #007bad;
 }
 .contact-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #000;
    color: white;
    box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-top: 5px;
    z-index: 1000;
    min-width: 200px;
    display: none;
 }
 .contact-dropdown button {
    display: block;
    width: 100%;
    padding: 5px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    color: white;
 }
 .contact-dropdown button:hover {
    background-color: #009cde;
 }
 .contact-dropdown.dropdown-visible {
    display: block;
 }
 </style>
--- a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
@ -0,0 +1,204 @@
 <template>
    <div class="canvas container-fluid">
        <CanvasItem
            v-for="(item, index) in items"
            :key="index"
            :title="item.title"
            :title-text="item.title_text"
            :description="item.description"
            :project-id="item.projectId"
            :class="['canvas-item', item.class, 'card', 'shadow', 'p-3']"
            :is-admin="props.isAdmin"
        />
    </div>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
 import CanvasItem from "@/components/canvas/CanvasItem.vue";
 const props = defineProps<{
    isAdmin: number;
 }>();
 const items = ref([
    {
        projectId: 1,
        title: 1,
        title_text: "1. Problème",
        description: "3 problèmes essentiels à résoudre pour le client",
        class: "Probleme",
    },
    {
        projectId: 1,
        title: 2,
        title_text: "2. Segments",
        description: "Les segments de clientèle visés",
        class: "Segments",
    },
    {
        projectId: 1,
        title: 3,
        title_text: "3. Valeur",
        description: "La proposition de valeur",
        class: "Valeur",
    },
    {
        projectId: 1,
        title: 4,
        title_text: "4. Solution",
        description: "Les solutions proposées",
        class: "Solution",
    },
    {
        projectId: 1,
        title: 5,
        title_text: "5. Avantage",
        description: "Les avantages concurrentiels",
        class: "Avantage",
    },
    {
        projectId: 1,
        title: 6,
        title_text: "6. Canaux",
        description: "Les canaux de distribution",
        class: "Canaux",
    },
    {
        projectId: 1,
        title: 7,
        title_text: "7. Indicateurs",
        description: "Les indicateurs clés de performance",
        class: "Indicateurs",
    },
    {
        projectId: 1,
        title: 8,
        title_text: "8. Coûts",
        description: "Les coûts associés",
        class: "Couts",
    },
    {
        projectId: 1,
        title: 9,
        title_text: "9. Revenus",
        description: "Les sources de revenus",
        class: "Revenus",
    },
 ]);
 /*
 onMounted(() => {
    const bootstrapCss = document.createElement("link");
    bootstrapCss.rel = "stylesheet";
    bootstrapCss.href =
        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css";
    bootstrapCss.integrity =
        "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+Fpc+NC";
    bootstrapCss.crossOrigin = "anonymous";
    document.head.appendChild(bootstrapCss);
    const bootstrapJs = document.createElement("script");
    bootstrapJs.src =
        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js";
    bootstrapJs.integrity =
        "sha384-mQ93S0EhrF4Z1nM+fTflmYf0DyzsY5j7F5H3WlClDD6H3WUJh6kxBkF3GDW8n1j6";
    bootstrapJs.crossOrigin = "anonymous";
    document.body.appendChild(bootstrapJs);
 });
 */
 </script>
 <style scoped>
@import "@/components/canvas/style-project.css";
 .canvas {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: min-content;
    gap: 12px;
    padding: 30px;
    position: relative;
    height: auto; /* autorise la hauteur à s'ajuster selon le contenu */
    max-height: none; /* enlève la limite de hauteur */
    box-sizing: border-box;
    overflow: visible; /* autorise le débordement visible */
 }
@media (max-width: 768px) {
    .canvas {
        grid-template-columns: repeat(1, 1fr);
    }
 }
 .Probleme {
    grid-column: 1 / 3;
    grid-row: 1 / 5;
 }
 .Segments {
    grid-column: 9 / 11;
    grid-row: 1 / 5;
 }
 .Valeur {
    grid-column: 5 / 7;
    grid-row: 1 / 5;
 }
 .Solution {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
 }
 .Avantage {
    grid-column: 7 / 9;
    grid-row: 1 / 3;
 }
 .Canaux {
    grid-column: 7 / 9;
    grid-row: 3 / 5;
 }
 .Indicateurs {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
 }
 .Couts {
    grid-column: 1 / 6;
    grid-row: 5 / 7;
 }
 .Revenus {
    grid-column: 6 / 11;
    grid-row: 5 / 7;
 }
 .canvas-item {
    /*background-color: white;*/
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
 }
 .Probleme {
    background-color: #ffdddd;
 }
 .Segments {
    background-color: #ddffdd;
 }
 .Valeur {
    background-color: #ddddff;
 }
 .Solution {
    background-color: #fff0b3;
 }
 .Avantage {
    background-color: #d1c4e9;
 }
 .Canaux {
    background-color: #b2ebf2;
 }
 .Indicateurs {
    background-color: #ffe082;
 }
 .Couts {
    background-color: #ffcdd2;
 }
 .Revenus {
    background-color: #c8e6c9;
 }
 </style>
--- a/front/MyINPulse-front/src/components/canvas/style-project.css
+++ b/front/MyINPulse-front/src/components/canvas/style-project.css
@ -0,0 +1,156 @@
 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
 }
 .row {
    display: flex;
 }
 .cell {
    flex: 1;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    background-color: #f1f1f1;
 }
 .produit {
    background-color: #f9e4e4;
 }
 .marche {
    background-color: #e4f1f9;
 }
 .valeur {
    background-color: #f9f4e4;
 }
 h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
 }
 p {
    margin: 5px 0 0;
    font-size: 14px;
 }
 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
 }
 h1 img {
    height: 80px;
    margin: 40px;
    text-align: center;
 }
 .row {
    display: flex;
    margin-bottom: 10px;
 }
 #ade {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    background-color: #e8f5e9;
    border: 2px solid #4caf50;
    border-radius: 10px;
 }
 #ade h3 {
    color: #2e7d32;
 }
 #ade p {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
 }
 header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 2px solid #ddd;
 }
 header img {
    height: 60px;
 }
 header .contact-menu {
    position: relative;
 }
 .contact-button,
 .return {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    background-color: #2196f3;
    color: #fff;
    cursor: pointer;
 }
 .contact-button:hover,
 .return:hover {
    background-color: #1976d2;
 }
 /* Dropdown styling */
 .contact-dropdown {
    position: absolute;
    right: 0;
    top: 50px;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
 }
 .contact-dropdown button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background-color: #4caf50;
    color: #fff;
    cursor: pointer;
 }
 .contact-dropdown button:hover {
    background-color: #388e3c;
 }
 .return {
    background-color: #f44336;
 }
 .return:hover {
    background-color: #d32f2f;
 }
 .header-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
 }
 a {
    color: white;
 }
--- a/front/MyINPulse-front/src/components/contact.ts
+++ b/front/MyINPulse-front/src/components/contact.ts
--- a/front/MyINPulse-front/src/components/icons/logo
+++ b/front/MyINPulse-front/src/components/icons/logo
--- a/front/MyINPulse-front/src/main.ts
+++ b/front/MyINPulse-front/src/main.ts
@ -28,4 +28,46 @@ keycloakService.CallInit(() => {
    }
 });
 // this shit made by me so i can run the canva vue app
 //createApp(App).use(router).mount('#app');
 // TODO: fix the comment
 /*
 function tokenInterceptor () {
    axios.interceptors.request.use(config => {
        const keycloak = useKeycloak()
        if (keycloak.authenticated) {
            // Note that this is a simple example.
            // you should be careful not to leak tokens to third parties.
            // in this example the token is added to all usage of axios.
            config.headers.Authorization = `Bearer ${keycloak.token}`
        }
        return config
    }, error => {
        console.error("tokenInterceptor: Rejected")
        return Promise.reject(error)
    })
 }
 */
 /*
 app.use(VueKeyCloak,{
    onReady: (keycloak) => {
        console.log("Ready !")
        tokenInterceptor()
    },
    init: {
        onLoad: 'login-required',
        checkLoginIframe: false,
    },
    config: {
        realm: 'test',
        url: 'http://localhost:7080',
        clientId: 'myinpulse'
    }
 }  );
 */
 export { store };
--- a/front/MyINPulse-front/src/plugins/authStore.ts
+++ b/front/MyINPulse-front/src/plugins/authStore.ts
@ -0,0 +1,16 @@
 // file: src/plugins/authStore.js
 import { useAuthStore } from "@/stores/authStore.ts";
 import keycloakService from "@/services/keycloak";
 import type { Pinia } from "pinia";
 import type { App } from "vue";
 // Setup auth store as a plugin so it can be accessed globally in our FE
 const authStorePlugin = {
    install(app: App, option: { pinia: Pinia }) {
        const store = useAuthStore(option.pinia);
        app.config.globalProperties.$store = store;
        keycloakService.CallInitStore(store);
    },
 };
 export default authStorePlugin;
--- a/front/MyINPulse-front/src/router/router.ts
+++ b/front/MyINPulse-front/src/router/router.ts
@ -11,6 +11,35 @@ const router = createRouter({
            // which is lazy-loaded when the route is visited.
            component: () => import("../views/testComponent.vue"),
        },
        {
            path: "/",
            name: "login",
            component: () => import("../components/LoginComponent.vue"),
        },
        {
            path: "/admin",
            name: "Admin-main",
            component: () => import("../views/AdminMain.vue"),
        },
        // route pour les canvas (made by adnane), in fact the two vue apps are separated for now
        {
            path: "/canvas",
            name: "canvas",
            component: () => import("../views/CanvasView.vue"),
        },
        {
            path: "/signup",
            name: "signup",
            component: () => import("../views/EntrepSignUp.vue"),
        },
        {
            path: "/JorCproject",
            name: "JorCproject",
            component: () => import("../views/JoinOrCreatProjectForEntrep.vue"),
        },
    ],
 });
--- a/front/MyINPulse-front/src/services/Apis/Admin.ts
+++ b/front/MyINPulse-front/src/services/Apis/Admin.ts
@ -0,0 +1,321 @@
 import { type AxiosError, type AxiosResponse } from "axios";
 import Project from "@/ApiClasses/Project";
 import Report from "@/ApiClasses/Repport";
 import { axiosInstance, defaultApiErrorHandler, defaultApiSuccessHandler } from "@/services/api"
 // Admin API
 function getPendingAccounts(
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get("/admin/pending-accounts")
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function validateUserAccount(
    userId: number,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post(`/admin/accounts/validate/${userId}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 // function getPendingProjectJoinRequests( // Not yet implemented [cite: 3]
 //     onSuccessHandler?: (response: AxiosResponse) => void,
 //     onErrorHandler?: (error: AxiosError) => void
 // ): void {
 //     axiosInstance
 //         .get("/admin/request-join")
 //          .then((response) => {
 //             if (onSuccessHandler) {
 //                 onSuccessHandler(response);
 //             } else {
 //                 defaultApiSuccessHandler(response);
 //             }
 //         })
 //         .catch((error: AxiosError) => {
 //             if (onErrorHandler) {
 //                 onErrorHandler(error);
 //             } else {
 //                 defaultApiErrorHandler(error);
 //             }
 //         });
 // }
 // function decideProjectJoinRequest( // Not yet implemented [cite: 3]
 //     joinRequestId: number,
 //     decision: { isAccepted: boolean },
 //     onSuccessHandler?: (response: AxiosResponse) => void,
 //     onErrorHandler?: (error: AxiosError) => void
 // ): void {
 //     axiosInstance
 //         .post(`/admin/request-join/decision/${joinRequestId}`, decision)
 //          .then((response) => {
 //             if (onSuccessHandler) {
 //                 onSuccessHandler(response);
 //             } else {
 //                 defaultApiSuccessHandler(response);
 //             }
 //         })
 //         .catch((error: AxiosError) => {
 //             if (onErrorHandler) {
 //                 onErrorHandler(error);
 //             } else {
 //                 defaultApiErrorHandler(error);
 //             }
 //         });
 // }
 function getAdminProjects(
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get("/admin/projects")
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function addProjectManually(
    projectDetails: Project, // Replace 'any' with a proper type for project details if available
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post("/admin/projects", projectDetails)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function getPendingProjects(
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get("/admin/projects/pending")
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function decidePendingProject(
    pendingProjectId: number,
    decision: { projectId: number; adminId: number; isAccepted: boolean }, // Replace 'any' with a proper type for project decision if available
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post(`/admin/projects/pending/decision/${pendingProjectId}`, decision)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function createAppointmentReport(
    appointmentId: number,
    reportContent: Report, // Replace 'any' with a proper type for report content if available
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post(`/admin/appointments/report/${appointmentId}`, reportContent)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function updateAppointmentReport(
    appointmentId: number,
    reportContent: Report, // Replace 'any' with a proper type for report content if available
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .put(`/admin/appointments/report/${appointmentId}`, reportContent)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function getUpcomingAppointments(
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get("/admin/appointments/upcoming")
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function removeProject(
    projectId: number,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .delete(`/admin/projects/${projectId}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function grantAdminRights(
    userId: number,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post(`/admin/make-admin/${userId}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 export {
    axiosInstance,
    // requestJoinProject, // Not yet implemented [cite: 4]
    getPendingAccounts,
    validateUserAccount,
    // getPendingProjectJoinRequests, // Not yet implemented [cite: 3]
    // decideProjectJoinRequest, // Not yet implemented [cite: 3]
    getAdminProjects,
    addProjectManually,
    getPendingProjects,
    decidePendingProject,
    createAppointmentReport,
    updateAppointmentReport,
    getUpcomingAppointments,
    removeProject,
    grantAdminRights,
 };
--- a/front/MyINPulse-front/src/services/Apis/Entrepreneurs.ts
+++ b/front/MyINPulse-front/src/services/Apis/Entrepreneurs.ts
@ -0,0 +1,134 @@
 import Project from "@/ApiClasses/Project";
 import SectionCell from "@/ApiClasses/SectionCell";
 import { axiosInstance, defaultApiErrorHandler, defaultApiSuccessHandler } from "@/services/api"
 axiosInstance.interceptors.response.use(
    (response) => response, // Directly return successful responses.
    async (error) => {
        const originalRequest = error.config;
        if (
            ((error.response && error.response.status === 401) ||
                error.code == "ERR_NETWORK") &&
            !originalRequest._retry &&
            store.authenticated
        ) {
            originalRequest._retry = true; // Mark the request as retried to avoid infinite loops.
            try {
                await store.refreshUserToken();
                // Update the authorization header with the new access token.
                axiosInstance.defaults.headers.common["Authorization"] =
                    `Bearer ${store.user.token}`;
                return axiosInstance(originalRequest); // Retry the original request with the new access token.
            } catch (refreshError) {
                // Handle refresh token errors by clearing stored tokens and redirecting to the login page.
                console.error("Token refresh failed:", refreshError);
                localStorage.removeItem("accessToken");
                localStorage.removeItem("refreshToken");
                router.push("/login");
                return Promise.reject(refreshError);
            }
        }
        return Promise.reject(error); // For all other errors, return the error as is.
    }
 );
 // Entrepreneurs API
 function requestProjectCreation(
    projectDetails: Project, // Replace 'any' with a proper type for project details if available
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post("/entrepreneur/projects/request", projectDetails)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function addSectionCell(
    sectionCellDetails: SectionCell,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post("/entrepreneur/sectionCells", sectionCellDetails.toPlainObject())  // <-- Ici
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function modifySectionCell(
    sectionCellId: number,
    sectionCellDetails: SectionCell, // Replace 'any' with a proper type for section cell details if available
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .put(`/entrepreneur/sectionCells/${sectionCellId}`, sectionCellDetails)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function removeSectionCell(
    sectionCellId: number,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .delete(`/entrepreneur/sectionCells/${sectionCellId}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 export {
    requestProjectCreation,
    addSectionCell,
    modifySectionCell,
    removeSectionCell,
 };
--- a/front/MyINPulse-front/src/services/Apis/Shared.ts
+++ b/front/MyINPulse-front/src/services/Apis/Shared.ts
@ -0,0 +1,154 @@
 import { type AxiosError, type AxiosResponse } from "axios";
 import Appointment from "@/ApiClasses/Appointment";
 import { axiosInstance, defaultApiErrorHandler, defaultApiSuccessHandler } from "@/services/api"
 // Shared API
 function getSectionCellsByDate(
    projectId: number,
    sectionId: number,
    date: string, // Use string for date in 'YYYY-MM-DD HH:mm' format
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get(`/shared/projects/sectionCells/${projectId}/${sectionId}/${date}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function getProjectEntrepreneurs(
    projectId: number,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get(`/shared/projects/entrepreneurs/${projectId}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function getProjectAdmin(
    projectId: number,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get(`/shared/projects/admin/${projectId}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function getProjectAppointments(
    projectId: number,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get(`/shared/projects/appointments/${projectId}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function getAppointmentReport(
    appointmentId: number,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .get(`/shared/appointments/report/${appointmentId}`)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 function requestAppointment(
    appointmentDetails: Appointment, // Replace 'any' with a proper type for appointment details if available
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post("/shared/appointments/request", appointmentDetails)
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 export {
    getSectionCellsByDate,
    getProjectEntrepreneurs,
    getProjectAdmin,
    getProjectAppointments,
    getAppointmentReport,
    requestAppointment,
 };
--- a/front/MyINPulse-front/src/services/Apis/Unauth.ts
+++ b/front/MyINPulse-front/src/services/Apis/Unauth.ts
@ -0,0 +1,56 @@
 import { type AxiosError, type AxiosResponse } from "axios";
 import { axiosInstance, defaultApiErrorHandler, defaultApiSuccessHandler } from "@/services/api"
 // Unauth API
 function finalizeAccount(
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post("/unauth/finalize")
        .then((response) => {
            if (onSuccessHandler) {
                onSuccessHandler(response);
            } else {
                defaultApiSuccessHandler(response);
            }
        })
        .catch((error: AxiosError) => {
            if (onErrorHandler) {
                onErrorHandler(error);
            } else {
                defaultApiErrorHandler(error);
            }
        });
 }
 // function requestJoinProject( // Not yet implemented [cite: 4]
 //     projectId: number,
 //     onSuccessHandler?: (response: AxiosResponse) => void,
 //     onErrorHandler?: (error: AxiosError) => void
 // ): void {
 //     axiosInstance
 //         .post(`/unauth/request-join/${projectId}`)
 //          .then((response) => {
 //             if (onSuccessHandler) {
 //                 onSuccessHandler(response);
 //             } else {
 //                 defaultApiSuccessHandler(response);
 //             }
 //         })
 //         .catch((error: AxiosError) => {
 //             if (onErrorHandler) {
 //                 onErrorHandler(error);
 //             } else {
 //                 defaultApiErrorHandler(error);
 //             }
 //         });
 // }
 export {   
    finalizeAccount,
    // requestJoinProject, // Not yet implemented [cite: 4]
 };
--- a/front/MyINPulse-front/src/services/api.ts
+++ b/front/MyINPulse-front/src/services/api.ts
@ -1,6 +1,7 @@
 import axios, { type AxiosError, type AxiosResponse } from "axios";
 import { store } from "@/main.ts";
 import { addNewMessage, color } from "@/services/popupDisplayer.ts";
 import router  from "@/router/router"; 
 const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_BACKEND_URL,
@ -31,7 +32,7 @@ axiosInstance.interceptors.response.use(
                console.error("Token refresh failed:", refreshError);
                localStorage.removeItem("accessToken");
                localStorage.removeItem("refreshToken");
-                window.location.href = "/login";
+                router.push("/login");
                return Promise.reject(refreshError);
            }
        }
@ -41,7 +42,10 @@ axiosInstance.interceptors.response.use(
 // TODO: spawn a error modal
 function defaultApiErrorHandler(err: AxiosError) {
-    addNewMessage(err.message, color.Red);
+    const errorMessage =
        (err.response?.data as { message?: string })?.message ??
        err.message;
    addNewMessage(errorMessage, color.Red);
 }
 function defaultApiSuccessHandler(response: AxiosResponse) {
@ -65,4 +69,29 @@ function callApi(
        );
 }
-export { callApi };
+function postApi(
    endpoint: string,
    data: unknown, //to fix eslint issue, go back here if errors occurs later
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .post(endpoint, data)
        .then(onSuccessHandler ?? defaultApiSuccessHandler)
        .catch(onErrorHandler ?? defaultApiErrorHandler);
 }
 function deleteApi(
    endpoint: string,
    onSuccessHandler?: (response: AxiosResponse) => void,
    onErrorHandler?: (error: AxiosError) => void
 ): void {
    axiosInstance
        .delete(endpoint)
        .then(onSuccessHandler ?? defaultApiSuccessHandler)
        .catch(onErrorHandler ?? defaultApiErrorHandler);
 }
 //export { axiosInstance, callApi, postApi, deleteApi };
 export{ axiosInstance, defaultApiErrorHandler, defaultApiSuccessHandler, callApi, postApi, deleteApi }
--- a/front/MyINPulse-front/src/stores/authStore.ts
+++ b/front/MyINPulse-front/src/stores/authStore.ts
@ -54,7 +54,7 @@ const useAuthStore = defineStore("storeAuth", {
        async logout() {
            try {
                await keycloakService.CallLogout(
-                    import.meta.env.VITE_APP_URL + "/test"
+                    import.meta.env.VITE_APP_URL + "/" //redirect to login page instead of test...
                );
                await this.clearUserData();
            } catch (error) {
--- a/front/MyINPulse-front/src/views/AdminMain.vue
+++ b/front/MyINPulse-front/src/views/AdminMain.vue
@ -0,0 +1,160 @@
 <template>
    <Header />
    <error-wrapper></error-wrapper>
    <div id="container">
        <div id="main">
            <h3>Projet en cours</h3>
            <ProjectComp
                v-for="(project, index) in projects"
                :key="index"
                :project-name="project.name"
                :list-name="project.members"
                :project-link="project.link"
                :project-id="0"
            />
            <div id="main">
                <h3>Projet en attente</h3>
                <PendingProjectComponent
                    v-for="(project, index) in pendingProjects"
                    :key="index"
                    :project-name="project.name"
                    :creation-date="project.creationDate"
                />
            </div>
            <AddProjectForm />
        </div>
        <Agenda :project-r-d-v="rendezVous" />
    </div>
 </template>
 <script setup lang="ts">
 import { ref /*, onMounted*/ } from "vue";
 //import { callApi } from "@/services/api";
 import Header from "../components/HeaderComponent.vue";
 import Agenda from "../components/AgendaComponent.vue";
 import ProjectComp from "../components/ProjectComponent.vue";
 import PendingProjectComponent from "@/components/PendingProjectComponent.vue";
 import AddProjectForm from "@/components/AddProjectForm.vue";
 //const PORT = "8081";
 //const URI = `http://localhost:${PORT}`;
 //const projects = ref<{ name: string; link: string; members: string[] }[]>([]);
 /* const fetchProjects = () => {
  callApi(
    `${URI}/admin/projects`,
    async (response) => {
      console.log(response);
      const projectList = response.data;
      const projectPromises = projectList.map((project: any) => {
        return new Promise(async (resolve) => {
          callApi(
            `${URI}/shared/projects/entrepreneurs/${project.idProject}`,
            (memberResponse) => {
              const members = memberResponse.data.map((m: any) => m.userName);
              resolve({
                name: project.projectName,
                link: `/project/${project.idProject}`,
                members,
              });
            },
            () => {
              // Error fetching members, still resolve with empty members
              resolve({
                name: project.projectName,
                link: `/project/${project.idProject}`,
                members: [],
              });
            }
          );
        });
      });
      projects.value = await Promise.all(projectPromises);
    },
    (error) => {
      console.error("Error fetching projects:", error);
    }
  );
 };
 onMounted(fetchProjects);
 */
 const projects = ref([
    {
        name: "Projet Alpha",
        link: "/canvas", // to test
        members: ["Alice", "Bob", "Charlie"],
    },
    {
        name: "Projet Beta",
        link: "./canvas", // to test
        members: ["David", "Eve", "Frank"],
    },
 ]);
 const pendingProjects = ref([
    { name: "l'eau", creationDate: "26-02-2024" },
    { name: "l'air", creationDate: "09-03-2023" },
 ]);
 const rendezVous = ref([
    { projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
    { projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },
 ]);
 </script>
 <style scoped>
 #container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    padding: 2rem;
    background-color: #f4f6f9;
    min-height: 100vh;
    box-sizing: border-box;
 }
 #main {
    background-color: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
 }
 button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s ease;
 }
 button:hover {
    background-color: #0056b3;
 }
 /* Add spacing between project sections */
 #main > * + * {
    margin-top: 2rem;
 }
 </style>
--- a/front/MyINPulse-front/src/views/CanvasView.vue
+++ b/front/MyINPulse-front/src/views/CanvasView.vue
@ -0,0 +1,149 @@
 <template>
    <div>
        <header>
            <HeaderCanvas :project-id="1" />
        </header>
    </div>
    <div>
        <h1 class="page-title">PAGE CANVAS</h1>
        <p class="canvas-help-text">
            Cliquez sur un champ du tableau pour afficher son contenu en détail
            ci-dessous.
        </p>
        <LeanCanvas :is-admin="isAdmin" />
        <div class="info-box">
            <p>
                Responsable :
                <strong>{{ admin.userName }} {{ admin.userSurname }}</strong
                ><br />
                Contact :
                <a href="mailto:{{ admin.primaryMail }}">{{
                    admin.primaryMail
                }}</a>
                |
                <a href="tel:{{ admin.phoneNumber }}">{{
                    admin.phoneNumber
                }}</a>
            </p>
            <div class="main"></div>
        </div>
    </div>
 </template>
 <script setup lang="ts">
 import HeaderCanvas from "../components/canvas/HeaderCanvas.vue";
 import LeanCanvas from "../components/canvas/LeanCanvas.vue";
 import { ref, onMounted /*, defineProps*/ } from "vue";
 import { axiosInstance } from "@/services/api.ts";
 const IS_MOCK_MODE = true;
 /* 
 const props = defineProps<{
  projectId: number;
  token: TokenPayload;
 }>();
 is_admin = token.includes("MyINPulse-admin")
  */
 const isAdmin = 0;
 // Variables pour les informations de l'administrateur
 const admin = ref({
    idUser: 0,
    userSurname: "",
    userName: "",
    primaryMail: "",
    secondaryMail: "",
    phoneNumber: "",
 });
 const mockAdminData = {
    idUser: 1,
    userSurname: "ALAMI",
    userName: "Adnane",
    primaryMail: "mock.admin@example.com",
    secondaryMail: "admin.backup@example.com",
    phoneNumber: "0600000000",
 };
 // Fonction pour récupérer les données de l'administrateur
 const fetchAdminData = async (projectId: number, useMock = IS_MOCK_MODE) => {
    try {
        if (useMock) {
            console.log(
                "Utilisation des données mockées pour l'administrateur"
            );
            admin.value = mockAdminData;
            return;
        }
        const response = await axiosInstance.get(
            `/shared/projects/admin/${projectId}`
        );
        admin.value = response.data;
    } catch (error) {
        console.error(
            "Erreur lors de la récupération des données de l'administrateur :",
            error
        );
    }
 };
 // Appeler la fonction fetch au montage du composant
 onMounted(() => {
    const projectId = 1;
    fetchAdminData(projectId);
 });
 </script>
 <style scoped>
 .page-title {
    text-align: center;
    font-size: 2.5rem;
    margin-top: 20px;
 }
 .canvas-help-text {
    text-align: center;
    font-size: 0.7rem;
    color: #666;
 }
 .info-box {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    width: 30%;
    max-width: 600px;
    margin: 20px auto;
 }
 .info-box p {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
 }
 .info-box a {
    color: #007bff;
    text-decoration: none;
 }
 .info-box a:hover {
    text-decoration: underline;
 }
 .canvas-help-text {
    margin-top: 20px;
    margin-bottom: -10px;
 }
 div:last-child {
    margin-bottom: 60px;
 }
 </style>
--- a/front/MyINPulse-front/src/views/EntrepSignUp.vue
+++ b/front/MyINPulse-front/src/views/EntrepSignUp.vue
@ -0,0 +1,185 @@
 <template>
    <form class="add-project-form" @submit.prevent="submitForm">
        <h2>Ajouter un projet</h2>
        <div class="form-group">
            <label for="name">Nom du projet</label>
            <input id="name" v-model="form.name" type="text" required />
        </div>
        <h3>Entrepreneur</h3>
        <div class="form-group">
            <label for="founderName">Nom</label>
            <input
                id="founderName"
                v-model="form.founder.userName"
                type="text"
                required
            />
        </div>
        <div class="form-group">
            <label for="founderSurname">Prénom</label>
            <input
                id="founderSurname"
                v-model="form.founder.userSurname"
                type="text"
                required
            />
        </div>
        <div class="form-group">
            <label for="founderPrimaryMail">Email Principal</label>
            <input
                id="founderPrimaryMail"
                v-model="form.founder.primaryMail"
                type="email"
                required
            />
        </div>
        <div class="form-group">
            <label for="founderSecondaryMail">Email Secondaire</label>
            <input
                id="founderSecondaryMail"
                v-model="form.founder.secondaryMail"
                type="email"
            />
        </div>
        <div class="form-group">
            <label for="founderPhoneNumber">Numéro de téléphone</label>
            <input
                id="founderPhoneNumber"
                v-model="form.founder.phoneNumber"
                type="tel"
                required
            />
        </div>
        <div class="form-group">
            <label for="founderSchool">École</label>
            <input
                id="founderSchool"
                v-model="form.founder.school"
                type="text"
                required
            />
        </div>
        <div class="form-group">
            <label for="founderCourse">Département</label>
            <input
                id="founderCourse"
                v-model="form.founder.course"
                type="text"
                required
            />
        </div>
        <div class="form-group">
            <label for="founderSneeStatus">Statut étudiant entrepreneur</label>
            <input
                id="founderSneeStatus"
                v-model="form.founder.sneeStatus"
                type="checkbox"
            />
        </div>
        <button type="submit">Soumettre</button>
    </form>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
 import { postApi } from "@/services/api";
 const form = ref({
    name: "",
    founder: {
        userSurname: "",
        userName: "",
        primaryMail: "",
        secondaryMail: "",
        phoneNumber: "",
        school: "",
        course: "",
        sneeStatus: false,
    },
 });
 function submitForm() {
    postApi("/entrepreneur/projects/request", form.value);
 }
 </script>
 <style scoped>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 .add-project-form {
    font-family: "Inter", sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 /* Le reste reste inchangé */
 h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
 }
 h3 {
    margin-top: 20px;
    font-size: 20px;
    color: #555;
 }
 .form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
 }
 label {
    font-weight: 500;
    margin-bottom: 5px;
 }
 input {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
 }
 input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
 }
 button {
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    width: 100%;
    font-weight: 500;
 }
 button:hover {
    background-color: #45a049;
 }
 button:active {
    background-color: #388e3c;
 }
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="tel"]:focus {
    border-color: #4caf50;
    outline: none;
 }
 </style>
--- a/front/MyINPulse-front/src/views/JoinOrCreatProjectForEntrep.vue
+++ b/front/MyINPulse-front/src/views/JoinOrCreatProjectForEntrep.vue
@ -0,0 +1,115 @@
 <template>
    <header class="header">
        <img
            src="@/components/icons/logo inpulse.png"
            alt="INPulse Logo"
            class="logo"
        />
    </header>
    <div class="choix-projet">
        <h1>Bienvenue sur MyINPulse</h1>
        <p>
            Souhaitez-vous créer un nouveau projet ou joindre un projet existant
            ?
        </p>
        <div class="button-group">
            <button @click="choisir('creer')">Créer un projet</button>
            <button @click="choisir('joindre')">Joindre un projet</button>
        </div>
        <div v-if="choix === 'creer'" class="form-creer">
            <h2>Créer un projet</h2>
            <label for="nomProjet">Nom du projet :</label>
            <input
                id="nomProjet"
                v-model="nomProjet"
                type="text"
                placeholder="Nom du projet"
            />
            <button @click="validerCreation">Valider</button>
        </div>
        <div v-if="choix === 'joindre'" class="message-indispo">
            <h2>Joindre un projet</h2>
            <p>Cette fonctionnalité n'est pas encore disponible.</p>
        </div>
    </div>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
 const choix = ref<string | null>(null);
 const nomProjet = ref("");
 const choisir = (option: "creer" | "joindre") => {
    choix.value = option;
 };
 const validerCreation = () => {
    if (!nomProjet.value.trim()) {
        alert("Veuillez entrer un nom de projet.");
        return;
    }
    alert(`Projet "${nomProjet.value}" créé avec succès !`);
 };
 </script>
 <style scoped>
@import "@/components/canvas/style-project.css";
 .choix-projet {
    max-width: 500px;
    margin: auto;
    padding: 2rem;
    background-color: #fefefe;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
 }
 .button-group {
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
 }
 button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
 }
 button:hover {
    background-color: #43a047;
 }
 input {
    padding: 10px;
    margin-top: 10px;
    width: 80%;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
 }
 .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 .logo {
    height: 50px;
 }
 </style>
--- a/front/MyINPulse-front/src/views/errorWrapper.vue
+++ b/front/MyINPulse-front/src/views/errorWrapper.vue
@ -18,7 +18,7 @@ import ErrorModal from "@/components/errorModal.vue";
 .error-wrapper {
    position: absolute;
    left: 70%;
-    //background-color: blue;
+    /*background-color: blue;*/
    height: 100%;
    width: 30%;
 }