fix: formatter

Reviewed-on: #12
Reviewed-by: adnane <adnane.alami@bordeaux-inp.fr>
Reviewed-by: omar <omar.el_alaoui_el_ismaili@bordeaux-inp.fr>
Reviewed-by: Theo <tlelez@enseirb-matmeca.fr>
Reviewed-by: anas <anas.maillal@bordeaux-inp.fr>

Makefile

@@ -2,7 +2,6 @@ help:
 	@echo "make [clean dev-front prod dev-back dev]"
 
 clean: 
-	pkill -9 node
 	@cp config/frontdev.env front/MyINPulse-front/.env
 	@cp config/frontdev.env .env
 	@cp config/frontdev.env MyINPulse-back/.env

MyINPulse-back/build.gradle

@@ -29,6 +29,8 @@ dependencies {
     implementation 'org.postgresql:postgresql'
     implementation group: 'com.itextpdf', name: 'itextpdf', version: '5.5.13.3'
 
+    runtimeOnly 'com.h2database:h2'
+
     testImplementation 'org.springframework.boot:spring-boot-starter-test'
     testImplementation 'com.h2database:h2'
 

MyINPulse-back/src/main/java/enseirb/myinpulse/service/AdminApiService.java

@@ -217,4 +217,8 @@ public class AdminApiService {
                 new Administrator(username, userSurname, primaryMail, secondaryMail, phoneNumber);
         this.administratorService.addAdministrator(a);
     }
+
+    public Iterable<Administrator> getAllAdmins() {
+        return this.administratorService.allAdministrators();
+    }
 }

MyINPulse-back/src/main/resources/application.properties_dbtest

@@ -0,0 +1,13 @@
+spring.application.name=myinpulse
+spring.security.oauth2.resourceserver.jwt.jwk-set-uri=http://localhost:7080/realms/test/protocol/openid-connect/certs
+spring.security.oauth2.resourceserver.jwt.issuer-uri=http://localhost:7080/realms/test
+
+logging.pattern.console=%d{yyyy-MMM-dd HH:mm:ss.SSS} [%thread] %highlight(%-5level) %cyan(%logger{15}) - %msg %n
+
+spring.datasource.url=jdbc:h2:mem:testdb;DB_CLOSE_DELAY=-1
+spring.datasource.driverClassName=org.h2.Driver
+spring.datasource.username=sa
+spring.datasource.password=
+spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
+
+spring.jpa.hibernate.ddl-auto=create

MyINPulse-back/src/main/resources/data.sql

@@ -1,99 +0,0 @@
-TRUNCATE project, user_inpulse, entrepreneur, administrator, section_cell, appointment, report, annotation CASCADE;
-
-SELECT setval('annotation_id_annotation_seq', 1, false);
-SELECT setval('appointment_id_appointment_seq', 1, false);
-SELECT setval('make_appointment_id_make_appointment_seq', 1, false);
-SELECT setval('project_id_project_seq', 1, false);
-SELECT setval('report_id_report_seq', 1, false);
-SELECT setval('section_cell_id_section_cell_seq', 1, false);
-SELECT setval('user_inpulse_id_user_seq', 1, false);
-
-INSERT INTO user_inpulse (user_surname, user_name, primary_mail, secondary_mail, phone_number)
-VALUES ('Dupont', 'Dupond', 'super@mail.fr', 'super2@mail.fr', '06 45 72 45 98'),
-       ('Martin', 'Matin', 'genial@mail.fr', 'genial2@mail.fr', '06 52 14 58 73'),
-       ('Charvet', 'Lautre', 'mieux@tmail.fr', 'mieux2@tmail.fr', '07 49 82 16 35'),
-       ('Leguez', 'Theo', 'bof@mesmails.fr', 'bof2@mesmails.fr', '+33 6 78 14 25 29'),
-       ('Kia', 'Bi', 'special@mail.fr', 'special2@mail.fr', '07 65 31 38 95'),
-       ('Ducaillou', 'Pierre', 'maildefou@xyz.fr', 'maildefou2@xyz.fr', '06 54 78 12 62'),
-       ('Janine', 'Dave', 'janine@labri.fr', 'janine2@labri.fr', '06 87 12 45 95');
-
-INSERT INTO administrator (id_administrator)
-VALUES (7);
-
-INSERT INTO project (project_name, logo, creation_date, project_status, id_administrator)
-VALUES ('Eau du robinet', decode('013d7d16d7ad4fefb61bd95b765c8ceb', 'hex'), TO_DATE('01-OCT-2023', 'DD-MON-YYYY'),
-        'En cours', 7),
-       ('Air oxygéné', decode('150647a0984e8f228cd14b54', 'hex'), TO_DATE('04-APR-2024', 'DD-MON-YYYY'), 'En cours', 7),
-       ('Débat concours', decode('022024abd5486e245c145dda65116f', 'hex'), TO_DATE('22-NOV-2023', 'DD-MON-YYYY'),
-        'Suspendu', 7),
-       ('HDeirbMI', decode('ab548d6c1d595a2975e6476f544d14c55a', 'hex'), TO_DATE('07-DEC-2024', 'DD-MON-YYYY'),
-        'Lancement', 7);
-
-
-INSERT INTO entrepreneur (school, course, snee_status, id_entrepreneur, id_project_participation, id_project_proposed)
-VALUES ('ENSEIRB-MATMECA', 'INFO', TRUE, 1, 4, 4),
-       ('ENSC', 'Cognitique', TRUE, 2, 2, null),
-       ('ENSEIRB-MATMECA', 'MATMECA', FALSE, 3, 3, 3),
-       ('SupOptique', 'Classique', TRUE, 4, 1, 1),
-       ('ENSEGID', 'Géoscience', FALSE, 5, 1, null),
-       ('ENSMAC', 'Matériaux composites - Mécanique', FALSE, 6, 2, 2);
-
-
-INSERT INTO section_cell (title, content_section_cell, modification_date, id_project)
-VALUES ('Problème', 'les problèmes...', TO_TIMESTAMP('15-JAN-2025 09:30:20', 'DD-MON-YYYY, HH24:MI:SS'), 2),
-       ('Segment de client', 'Le segment AB passant le client n°8 est de longueur 32mm.
-    Le segment BC a quant à lui un longueur de 28mm. Quelle la longueur du segment AC ?',
-        TO_TIMESTAMP('12-OCT-2022 17:47:38', 'DD-MON-YYYY, HH24:MI:SS'), 3),
-       ('Proposition de valeur unique', '''Son prix est de 2594€'' ''Ah oui c''est unique en effet',
-        TO_TIMESTAMP('25-MAY-2024 11:12:04', 'DD-MON-YYYY, HH24:MI:SS'), 2),
-       ('Solution', 'Un problème ? Une solution', TO_TIMESTAMP('08-FEB-2024 10:17:53', 'DD-MON-YYYY, HH24:MI:SS'), 1),
-       ('Canaux', 'Ici nous avons la Seine, là-bas le Rhin, oh et plus loin le canal de Suez',
-        TO_TIMESTAMP('19-JUL-2023 19:22:45', 'DD-MON-YYYY, HH24:MI:SS'), 4),
-       ('Sources de revenus', 'Y''en n''a pas on est pas payé. Enfin y''a du café quoi',
-        TO_TIMESTAMP('12-JAN-2025 11:40:26', 'DD-MON-YYYY, HH24:MI:SS'), 1),
-       ('Structure des coûts', '''Ah oui là ça va faire au moins 1000€ par mois'', Eirbware',
-        TO_TIMESTAMP('06-FEB-2025 13:04:06', 'DD-MON-YYYY, HH24:MI:SS'), 3),
-       ('Indicateurs clés', 'On apprend les clés comme des badges, ça se fait',
-        TO_TIMESTAMP('05-FEB-2025 12:42:38', 'DD-MON-YYYY, HH24:MI:SS'), 4),
-       ('Avantages concurrentiel', 'On est meilleur', TO_TIMESTAMP('23-APR-2024 16:24:02', 'DD-MON-YYYY, HH24:MI:SS'),
-        2);
-
-INSERT INTO appointment (appointment_date, appointment_time, appointment_duration, appointment_place,
-                         appointment_subject)
-VALUES (TO_DATE('24-DEC-2023', 'DD-MON-YYYY'), '00:00:00', '00:37:53', 'À la maison', 'Ouvrir les cadeaux'),
-       (TO_DATE('15-AUG-2024', 'DD-MON-YYYY'), '22:35:00', '00:12:36', 'Sur les quais ou dans un champ probablement',
-        'BOUM BOUM les feux d''artifices (on fête quoi déjà ?)'),
-       (TO_DATE('28-FEB-2023', 'DD-MON-YYYY'), '14:20:00', '00:20:00', 'Salle TD 15',
-        'Ah mince c''est pas une année bissextile !'),
-       (TO_DATE('23-JAN-2024', 'DD-MON-YYYY'), '12:56:27', '11:03:33', 'Là où le vent nous porte',
-        'Journée la plus importante de l''année'),
-       (TO_DATE('25-AUG-2025', 'DD-MON-YYYY'), '00:09:00', '01:00:00', 'Euh c''est par où l''amphi 56 ?',
-        'Rentrée scolaire (il fait trop froid c''est quoi ça on est en août)');
-
-INSERT INTO report (report_content, id_appointment)
-VALUES ('Ah oui ça c''est super, ah ouais j''aime bien, bien vu de penser à ça', 1),
-       ('Bonne réunion', 3),
-       ('Ouais, j''ai rien compris mais niquel on fait comme vous avez dit', 3),
-       ('Non non ça va pas du tout ce que tu me proposes, faut tout refaire', 4),
-       ('Réponse de la DSI : non', 2),
-       ('Trop dommage qu''Apple ait sorti leur logiciel avant nous, on avait la même idée et tout on aurait tellement pu leur faire de la concurrence',
-        5);
-
-INSERT INTO annotation (comment, id_administrator, id_section_cell)
-VALUES ('faut changer ça hein', 7, 5),
-       ('??? sérieusement, vous pensez que c''est une bonne idée ?', 7, 7),
-       ('ok donc ça c''est votre business plan, bah glhf la team', 7, 2);
-
-
-
-
-
-
-
-
-
-
-
-
-
-

MyINPulse-back/src/main/resources/delete.sql

@@ -1,2 +0,0 @@
-DROP TABLE IF EXISTS administrateurs, projets, utilisateurs, entrepreneurs, sections, rendez_vous, comptes_rendus, concerner CASCADE;
-DROP TABLE IF EXISTS administrator, project, user_inpulse, entrepreneur, section_cell, appointment, make_appointment, report, annotation, concern CASCADE;

MyINPulse-back/src/main/resources/import.sql

@@ -0,0 +1,92 @@
+-- Initial Database State Script
+
+-- Insert Administrators
+INSERT INTO administrator (idAdministrator) VALUES
+(1),
+(2),
+(3); -- Added more administrators
+
+-- Insert User Inpulse (some pending)
+INSERT INTO user_inpulse (idUser, userSurname, userName, primaryMail, secondaryMail, phoneNumber, pending) VALUES
+(1, 'Doe', 'John', 'john.doe@example.com', NULL, '123-456-7890', FALSE),
+(2, 'Smith', 'Jane', 'jane.smith@example.com', 'jane.s@altmail.com', '987-654-3210', FALSE),
+(3, 'Williams', 'Peter', 'peter.w@example.com', NULL, NULL, TRUE), -- Pending user
+(4, 'Jones', 'Mary', 'mary.j@example.com', NULL, '555-123-4567', FALSE),
+(5, 'Brown', 'Michael', 'michael.b@example.com', 'mike.brown@work.com', '111-222-3333', FALSE),
+(6, 'Garcia', 'Maria', 'maria.g@example.com', NULL, '444-555-6666', TRUE), -- Another pending user
+(7, 'Miller', 'David', 'david.m@example.com', NULL, '777-888-9999', FALSE);
+
+-- Insert Entrepreneurs
+INSERT INTO entrepreneur (idEntrepreneur, school, course, sneeStatus, idProjectParticipation, idProjectProposed, idMakeAppointment) VALUES
+(1, 'Business School A', 'MBA', TRUE, NULL, NULL, NULL),
+(2, 'Tech University B', 'Computer Science', FALSE, NULL, NULL, NULL),
+(3, 'Art Institute C', 'Graphic Design', TRUE, NULL, NULL, NULL),
+(4, 'Science College D', 'Biology', FALSE, NULL, NULL, NULL),
+(5, 'Engineering School E', 'Mechanical Engineering', TRUE, NULL, NULL, NULL); -- Added more entrepreneurs
+
+-- Insert Projects
+-- Main project
+INSERT INTO project (IdProject, projectName, loga, creationDate, projectStatus, pending, idAdministrator, entrepreneurProposed) VALUES
+(101, 'Innovative Startup Idea', NULL, '2023-10-26', 'In Progress', FALSE, 1, NULL),
+(102, 'Pending Project Alpha', NULL, '2024-01-15', 'Planning', TRUE, 1, NULL), -- Pending project
+(103, 'Pending Project Beta', NULL, '2024-02-20', 'Idea Stage', TRUE, NULL, 1), -- Another pending project, proposed by entrepreneur 1
+(104, 'E-commerce Platform Development', NULL, '2024-03-10', 'Completed', FALSE, 2, NULL), -- Completed project
+(105, 'Mobile App for Education', NULL, '2024-04-01', 'In Progress', FALSE, 3, NULL),
+(106, 'Pending Research Proposal', NULL, '2024-04-25', 'Drafting', TRUE, NULL, 4); -- Pending project proposed by entrepreneur 4
+
+-- Link Entrepreneurs to projects (Project Participation and Proposed)
+-- Based on the current schema, we'll update the entrepreneur table directly.
+-- This might need adjustment based on actual application logic if it's a many-to-many.
+UPDATE entrepreneur SET idProjectParticipation = 101 WHERE idEntrepreneur IN (1, 2); -- Entrepreneurs 1 and 2 participate in Project 101
+UPDATE entrepreneur SET idProjectParticipation = 104 WHERE idEntrepreneur = 3; -- Entrepreneur 3 participates in Project 104
+UPDATE entrepreneur SET idProjectProposed = 103 WHERE idEntrepreneur = 1; -- Entrepreneur 1 proposed Project 103
+UPDATE entrepreneur SET idProjectProposed = 106 WHERE idEntrepreneur = 4; -- Entrepreneur 4 proposed Project 106
+
+-- Insert Section Cells for the main project (Project 101) and other projects
+INSERT INTO section_cell (idSectionCell, IdReference, sectionid, contentSectionCell, modificationDate, idProject) VALUES
+(1001, NULL, 1, 'Initial project description for Project 101.', '2023-10-26 10:00:00', 101),
+(1002, 1001, 2, 'Market analysis summary for Project 101.', '2023-10-27 14:30:00', 101),
+(1003, NULL, 3, 'Team member profiles for Project 101.', '2023-10-28 09:00:00', 101),
+(1004, NULL, 1, 'Project brief for Project 104.', '2024-03-10 11:00:00', 104),
+(1005, 1004, 2, 'Technical specifications for Project 104.', '2024-03-15 16:00:00', 104),
+(1006, NULL, 1, 'Initial concept for Project 105.', '2024-04-01 09:30:00', 105);
+
+-- Insert Appointments
+INSERT INTO appointment (idAppointment, appointmentDate, appointmentTime, appointmentDuration, appointmentPlace, appointmentSubject) VALUES
+(2001, '2023-11-05', '11:00:00', '01:00:00', 'Meeting Room A', 'Project 101 Kick-off Meeting'),
+(2002, '2023-11-10', '14:00:00', '00:30:00', 'Online', 'Project 101 Follow-up Discussion'),
+(2003, '2024-03-20', '10:00:00', '01:30:00', 'Client Office', 'Project 104 Final Review'),
+(2004, '2024-04-10', '15:00:00', '00:45:00', 'Video Call', 'Project 105 Initial Sync'); -- Added more appointments
+
+-- Insert Concerns (linking Appointments and Section Cells)
+INSERT INTO concern (IdAppointment, idSectionCell) VALUES
+(2001, 1001), -- Kick-off meeting concerns section 1001 (Project 101)
+(2001, 1002), -- Kick-off meeting concerns section 1002 (Project 101)
+(2002, 1002), -- Follow-up concerns section 1002 (Project 101)
+(2003, 1004), -- Project 104 review concerns section 1004
+(2003, 1005), -- Project 104 review concerns section 1005
+(2004, 1006); -- Project 105 sync concerns section 1006
+
+-- Insert Make Appointments (linking Appointments, Administrators, and Entrepreneurs)
+INSERT INTO make_appointment (idMakeAppointment, idAppointment, idAdministrator, idEntrepreneur) VALUES
+(3001, 2001, 1, 1), -- Admin 1 scheduled appointment 2001 with Entrepreneur 1
+(3002, 2001, 1, 2), -- Admin 1 scheduled appointment 2001 with Entrepreneur 2
+(3003, 2002, 1, 1), -- Admin 1 scheduled appointment 2002 with Entrepreneur 1
+(3004, 2003, 2, 3), -- Admin 2 scheduled appointment 2003 with Entrepreneur 3
+(3005, 2004, 3, 5); -- Admin 3 scheduled appointment 2004 with Entrepreneur 5
+
+-- Insert Annotations (linking to Section Cells and Administrators)
+INSERT INTO annotation (IdAnnotation, comment, idSectionCell, idAdministrator) VALUES
+(4001, 'Needs more detail on market size.', 1002, 1),
+(4002, 'Looks good.', 1001, 1),
+(4003, 'Confirm technical requirements.', 1005, 2),
+(4004, 'Initial thoughts on UI/UX.', 1006, 3); -- Added more annotations
+
+-- Insert Reports (linking to Make Appointments)
+INSERT INTO report (IdReport, reportContent, idMakeAppointment) VALUES
+(5001, 'Discussed project scope and timelines for Project 101.', 3001),
+(5002, 'Reviewed market analysis feedback for Project 101.', 3003),
+(5003, 'Final sign-off on Project 104 deliverables.', 3004),
+(5004, 'Discussed initial concepts for Project 105.', 3005); -- Added more reports
+
+-- The project ID for the main project is 101.

front/MyINPulse-front/index.html

@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>

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",

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",

front/MyINPulse-front/src/ApiClasses/Appointment.ts

@@ -0,0 +1,79 @@
+// 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;
+    }
+
+    toObject() {
+        return {
+            idAppointment: this.idAppointment,
+            appointmentDate: this.appointmentDate,
+            appointmentTime: this.appointmentTime,
+            appointmentDuration: this.appointmentDuration,
+            appointmentPlace: this.appointmentPlace,
+            appointmentSubject: this.appointmentSubject,
+        };
+    }
+}
+
+export default Appointment;

front/MyINPulse-front/src/ApiClasses/JoinRequest.ts

@@ -0,0 +1,39 @@
+// 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;
+    }
+
+    toObject() {
+        return {
+            idProject: this.idProject,
+            entrepreneur: this.entrepreneur,
+        };
+    }
+}
+
+export default JoinRequest;

front/MyINPulse-front/src/ApiClasses/JoinRequestDecision.ts

@@ -0,0 +1,24 @@
+// 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;
+    }
+
+    toObject() {
+        return {
+            isAccepted: this._isAccepted,
+        };
+    }
+}
+
+export default JoinRequestDecision;

front/MyINPulse-front/src/ApiClasses/Project.ts

@@ -0,0 +1,89 @@
+// 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 {
+        return this._projectName ?? "";
+    }
+
+    set projectName(value: string | undefined) {
+        this._projectName = value;
+    }
+
+    get creationDate(): string {
+        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;
+    }
+
+    toObject() {
+        return {
+            idProject: this.idProject,
+            projectName: this.projectName,
+            creationDate: this.creationDate,
+            logo: this.logo,
+            status: this.status,
+        };
+    }
+
+    toCreatePayload() {
+        return {
+            projectName: this.projectName,
+            logo: this.logo,
+        };
+    }
+}
+
+export default Project;

front/MyINPulse-front/src/ApiClasses/ProjectDecision.ts

@@ -0,0 +1,46 @@
+// 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;
+    }
+
+    toObject() {
+        return {
+            projectId: this._projectId,
+            adminId: this._adminId,
+            isAccepted: this._isAccepted,
+        };
+    }
+}
+
+export default ProjectDecision;

front/MyINPulse-front/src/ApiClasses/Repport.ts

@@ -0,0 +1,35 @@
+// 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;
+    }
+
+    toObject() {
+        return {
+            idReport: this._idReport,
+            reportContent: this._reportContent,
+        };
+    }
+}
+
+export default Report;

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;
+    }
+
+    toObject() {
+        return {
+            idSectionCell: this._idSectionCell,
+            sectionId: this._sectionId,
+            contentSectionCell: this._contentSectionCell,
+            modificationDate: this._modificationDate,
+        };
+    }
+}
+
+export default SectionCell;

front/MyINPulse-front/src/ApiClasses/User.ts

@@ -0,0 +1,78 @@
+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;
+    }
+
+    toObject() {
+        return {
+            idUser: this._idUser,
+            userSurname: this._userSurname,
+            userName: this._userName,
+            primaryMail: this._primaryMail,
+            secondaryMail: this._secondaryMail,
+            phoneNumber: this._phoneNumber,
+        };
+    }
+}
+
+export default User;

front/MyINPulse-front/src/ApiClasses/UserAdmin.ts

@@ -0,0 +1,14 @@
+// user-admin.ts
+import User from "./User";
+
+class UserAdmin extends User {
+    constructor(data: Partial<UserAdmin> = {}) {
+        super(data);
+    }
+
+    get idUser(): number | undefined {
+        return super.idUser;
+    }
+}
+
+export default UserAdmin;

front/MyINPulse-front/src/ApiClasses/UserEntrepreneur.ts

@@ -0,0 +1,50 @@
+// 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;
+    }
+
+    toObject() {
+        return {
+            ...super.toObject(),
+            school: this._school,
+            course: this._course,
+            sneeStatus: this._sneeStatus,
+        };
+    }
+}
+
+export default UserEntrepreneur;

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 />
-    <error-wrapper></error-wrapper>
-    <div id="main">
-        <ProjectComponent
-            v-for="(project, index) in projects"
-            :key="index"
-            :project-name="project.name"
-        />
-    </div>
+    <Header />
+    <ErrorWrapper />
+    <!--<RouterLink to="/">Home</RouterLink> | -->
+    <!--<RouterLink to="/canvas">Canvas</RouterLink> -->
     <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>

front/MyINPulse-front/src/components/AddProjectForm.vue

@@ -0,0 +1,98 @@
+<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="logo">Logo</label>
+            <input
+                id="logo"
+                v-model="project.logo"
+                type="text"
+                placeholder="(Description)"
+            />
+        </div>
+
+        <button type="submit">Ajouter</button>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Project from "@/ApiClasses/Project";
+import { addProjectManually } from "@/services/Apis/Admin";
+
+const project = ref(new Project({}));
+
+function submitProject() {
+    addProjectManually(
+        project.value.toCreatePayload(),
+        (res) => console.log("Success:", res.data),
+        (err) => console.error("Error:", err)
+    );
+}
+</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>

front/MyINPulse-front/src/components/AdminAppointments.vue

@@ -0,0 +1,192 @@
+<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>
+import {
+    createAppointmentReport,
+    updateAppointmentReport,
+} from "@/services/Apis/Admin";
+
+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--;
+            }
+        },
+        submitReport() {
+            const reportData = { content: this.reportContent };
+            const onSuccess = (response) => {
+                if (response.status === 201 || response.status === 200) {
+                    this.responseMessage =
+                        "Rapport " +
+                        (this.isUpdate ? "mis à jour" : "créé") +
+                        " avec succès.";
+                }
+            };
+            const onError = (error) => {
+                console.error(
+                    "Erreur lors de l'envoi du rapport :",
+                    error.response || error.message
+                );
+                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.";
+                }
+            };
+
+            if (this.isUpdate) {
+                updateAppointmentReport(
+                    this.appointmentId,
+                    reportData,
+                    onSuccess,
+                    onError
+                );
+            } else {
+                createAppointmentReport(
+                    this.appointmentId,
+                    reportData,
+                    onSuccess,
+                    onError
+                );
+            }
+        },
+    },
+};
+</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>

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>

front/MyINPulse-front/src/components/AllEntrep.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="entrepreneur-list">
+        <button @click="fetchEntrepreneurs">Afficher les entrepreneurs</button>
+
+        <ul v-if="entrepreneurs.length">
+            <li
+                v-for="entrepreneur in entrepreneurs"
+                :key="entrepreneur.idUser"
+            >
+                {{ entrepreneur.userName }} {{ entrepreneur.userSurname }} -
+                {{ entrepreneur.primaryMail }}
+            </li>
+        </ul>
+
+        <p v-else-if="loading">Chargement...</p>
+        <p v-else-if="errorMessage">{{ errorMessage }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { AxiosResponse, AxiosError } from "axios";
+import { getAllEntrepreneurs } from "@/services/Apis/Unauth"; // ajuste ce chemin selon ton projet
+
+// Types
+interface Entrepreneur {
+    idUser: number;
+    userName: string;
+    userSurname: string;
+    primaryMail: string;
+}
+
+// Refs
+const entrepreneurs = ref<Entrepreneur[]>([]);
+const loading = ref(false);
+const errorMessage = ref("");
+
+// Méthode
+function fetchEntrepreneurs() {
+    loading.value = true;
+    errorMessage.value = "";
+    getAllEntrepreneurs(
+        (response: AxiosResponse) => {
+            if (Array.isArray(response.data)) {
+                entrepreneurs.value = response.data;
+            } else {
+                console.error("Format inattendu :", response.data);
+                errorMessage.value = "Réponse inattendue du serveur.";
+            }
+            loading.value = false;
+        },
+        (error: AxiosError) => {
+            errorMessage.value = "Erreur lors du chargement des entrepreneurs.";
+            console.error(error);
+            loading.value = false;
+        }
+    );
+}
+</script>
+
+<style scoped>
+button {
+    margin-bottom: 1rem;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+li {
+    margin-bottom: 0.5rem;
+}
+</style>

front/MyINPulse-front/src/components/GetAppointments.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="appointment-list">
+        <h2>Liste des rendez-vous</h2>
+        <h3>de {{ store.user.username }}</h3>
+        <ul v-if="appointments.length">
+            <li v-for="appt in appointments" :key="appt.idAppointment">
+                <strong>Sujet :</strong> {{ appt.appointmentSubject }}<br />
+                <strong>Date :</strong> {{ appt.appointmentDate }}<br />
+                <strong>Heure :</strong> {{ appt.appointmentTime }}<br />
+                <strong>Durée :</strong> {{ appt.appointmentDuration }}<br />
+                <strong>Lieu :</strong> {{ appt.appointmentPlace }}
+                <hr />
+            </li>
+        </ul>
+
+        <p v-else>Aucun rendez-vous trouvé.</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { callApi } from "@/services/api";
+import Appointment from "@/ApiClasses/Appointment";
+import { store } from "@/main.ts";
+
+// Define the interface for the API response
+interface AppointmentResponse {
+    idAppointment: number;
+    appointmentSubject: string;
+    appointmentDate: string;
+    appointmentTime: string;
+    appointmentDuration: string;
+    appointmentPlace: string;
+}
+
+const appointments = ref<Appointment[]>([]);
+
+function loadAppointments() {
+    if (!store.user) {
+        console.error(
+            "L'utilisateur n'est pas connecté ou les données utilisateur ne sont pas disponibles."
+        );
+        return;
+    }
+    //console.log("username :", store.user.username);
+    //console.log("token  :", store.user.token);
+    callApi(
+        "/admin/appointments/upcoming",
+        (response) => {
+            appointments.value = response.data.map(
+                (item: AppointmentResponse) => new Appointment(item)
+            );
+        },
+        (error) => {
+            console.error(
+                "Erreur lors de la récupération des rendez-vous :",
+                error
+            );
+        }
+    );
+}
+
+onMounted(() => {
+    loadAppointments();
+});
+</script>
+
+<style scoped>
+.appointment-list {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background: #fdfdfd;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+}
+
+h2 {
+    font-size: 1.8rem;
+    margin-bottom: 20px;
+    color: #333;
+    border-bottom: 2px solid #ddd;
+    padding-bottom: 10px;
+}
+
+li {
+    margin-bottom: 15px;
+    line-height: 1.6;
+}
+</style>

front/MyINPulse-front/src/components/HeaderComponent.vue

@@ -1,26 +1,64 @@
 <template>
-    <header>
-        <img src="./icons/logo inpulse.png" alt="INPulse" />
+    <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">
+            <button class="logout" @click="store.logout">Logout</button>
+        </div>
     </header>
 </template>
 
-<script lang="ts">
-export default {
-    name: "HeaderComponent",
-};
+<script setup lang="ts">
+import { store } from "@/main.ts";
 </script>
 
 <style scoped>
-header img {
-    width: 100px;
-}
+@import "@/components/canvas/style-project.css";
 
-header {
+.header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 20px;
-    background-color: #fff;
-    border-bottom: 2px solid #ddd;
+    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;
+}
+
+.logout {
+    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;
+}
+
+.logout:hover {
+    background-color: #007bad;
 }
 </style>

front/MyINPulse-front/src/components/LoginComponent.vue

@@ -0,0 +1,229 @@
+<script lang="ts" setup>
+import { onMounted } 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 { checkPending } from "@/services/Apis/Unauth";
+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");
+                return;
+            }
+
+            if (roles.includes("MyINPulse-entrepreneur")) {
+                router.push("/canvas");
+                return;
+            }
+
+            checkPending(
+                (response) => {
+                    const isValidated = response.data === true;
+                    if (
+                        isValidated &&
+                        roles.includes("MyINPulse-entrepreneur")
+                    ) {
+                        router.push("/canvas");
+                        //router.push("/JorCproject");
+                    } else {
+                        router.push("/JorCproject");
+                        //router.push("/finalize");
+                    }
+                },
+                (error) => {
+                    if (error.response?.status === 403) {
+                        router.push("/finalize");
+                    } else {
+                        console.error(
+                            "Unexpected error during checkPending",
+                            error
+                        );
+                    }
+                }
+            );
+        } catch (err) {
+            console.error("Failed to decode token", err);
+        }
+    }
+});
+</script>
+
+<template>
+    <Header />
+    <error-wrapper></error-wrapper>
+    <div class="auth-container">
+        <div class="auth-card">
+            <h1>Bienvenue à MyINPulse</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>

front/MyINPulse-front/src/components/PendingProjectComponent.vue

@@ -0,0 +1,132 @@
+<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 { addNewMessage, color } from "@/services/popupDisplayer";
+import { decidePendingProject } from "@/services/Apis/Admin";
+import ProjectDecision from "@/ApiClasses/ProjectDecision";
+
+const props = defineProps<{
+    projectId?: number;
+    projectName: string;
+    creationDate: string;
+    adminId?: number;
+}>();
+
+const sendDecision = (isAccepted: boolean) => {
+    const decision = new ProjectDecision({
+        projectId: props.projectId,
+        adminId: props.adminId,
+        isAccepted,
+    });
+
+    decidePendingProject(
+        decision,
+        () => {
+            addNewMessage(
+                `Projet ${props.projectName} ${isAccepted ? "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>

front/MyINPulse-front/src/components/PendingRequestsManager.vue

@@ -0,0 +1,228 @@
+<!-- <template>
+    <section class="pending-requests">
+      <h2>Comptes en attente</h2>
+      <ul v-if="pendingAccounts.length">
+        <li v-for="account in pendingAccounts" :key="account.userId">
+          {{ account.userName }} ({{ account.email }})
+          <button @click="validateAccount(account.userId)">Valider</button>
+        </li>
+      </ul>
+      <p v-else>Aucun compte en attente</p>
+  
+      <h2>Demandes de participation aux projets</h2>
+      <ul v-if="joinRequests.length">
+        <li v-for="request in joinRequests" :key="request.joinRequestId">
+          {{ request.userName }} veut rejoindre le projet {{ request.projectName }}
+          <button @click="decideJoinRequest(request.joinRequestId, true)">Accepter</button>
+          <button @click="decideJoinRequest(request.joinRequestId, false)">Refuser</button>
+        </li>
+      </ul>
+      <p v-else>Aucune demande de participation</p>
+    </section>
+  </template> -->
+
+<template>
+    <section class="section">
+        <h2>Comptes en attente</h2>
+        <div v-if="pendingAccounts.length">
+            <div
+                v-for="account in pendingAccounts"
+                :key="account.userId"
+                class="request-item"
+            >
+                <div class="request-info">
+                    {{ account.userName }} ({{ account.email }})
+                </div>
+                <div class="request-buttons">
+                    <button
+                        class="accept"
+                        @click="validateAccount(account.userId)"
+                    >
+                        Valider
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div v-else class="empty-message">Aucun compte en attente</div>
+    </section>
+
+    <section class="section">
+        <h2>Demandes de participation aux projets</h2>
+        <div v-if="joinRequests.length">
+            <div
+                v-for="request in joinRequests"
+                :key="request.joinRequestId"
+                class="request-item"
+            >
+                <div class="request-info">
+                    {{ request.userName }} veut rejoindre le projet "{{
+                        request.projectName
+                    }}"
+                </div>
+                <div class="request-buttons">
+                    <button
+                        class="accept"
+                        @click="decideJoinRequest(request.joinRequestId, true)"
+                    >
+                        Accepter
+                    </button>
+                    <button
+                        class="reject"
+                        @click="decideJoinRequest(request.joinRequestId, false)"
+                    >
+                        Refuser
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div v-else class="empty-message">Aucune demande de participation</div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import {
+    getPendingAccounts,
+    validateUserAccount,
+    getPendingProjectJoinRequests,
+    decideProjectJoinRequest,
+} from "@/services/Apis/Admin";
+
+type PendingAccount = {
+    userId: number;
+    userName: string;
+    email: string;
+};
+
+type JoinRequest = {
+    joinRequestId: number;
+    userName: string;
+    projectName: string;
+};
+
+const pendingAccounts = ref<PendingAccount[]>([]);
+const joinRequests = ref<JoinRequest[]>([]);
+
+function fetchAccounts() {
+    getPendingAccounts(
+        (res) => (pendingAccounts.value = res.data),
+        (err) => {
+            console.error("Erreur lors du chargement des comptes", err);
+        }
+    );
+}
+
+function fetchJoinRequests() {
+    getPendingProjectJoinRequests(
+        (res) => (joinRequests.value = res.data),
+        (err) => {
+            console.error("Erreur lors du chargement des demandes", err);
+        }
+    );
+}
+
+function validateAccount(userId: number) {
+    validateUserAccount(userId, () => {
+        pendingAccounts.value = pendingAccounts.value.filter(
+            (a) => a.userId !== userId
+        );
+    });
+}
+
+function decideJoinRequest(joinRequestId: number, isAccepted: boolean) {
+    decideProjectJoinRequest(joinRequestId, { isAccepted }, () => {
+        joinRequests.value = joinRequests.value.filter(
+            (r) => r.joinRequestId !== joinRequestId
+        );
+    });
+}
+
+onMounted(() => {
+    fetchAccounts();
+    fetchJoinRequests();
+});
+</script>
+
+<style>
+.section {
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    margin-bottom: 2rem;
+}
+
+.section h2 {
+    font-size: 1.4rem;
+    color: #2c3e50;
+    border-bottom: 2px solid #ddd;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.request-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    background: linear-gradient(to right, #f8f9fb, #ffffff);
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
+    transition: box-shadow 0.2s ease;
+}
+
+.request-item:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+}
+
+.request-info {
+    flex: 1;
+    font-size: 1rem;
+    color: #333;
+}
+
+.request-buttons {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.request-buttons button {
+    padding: 0.45rem 1rem;
+    font-size: 0.9rem;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+}
+
+.request-buttons button:hover {
+    transform: translateY(-1px);
+}
+
+button.accept {
+    background-color: #4caf50;
+}
+
+button.accept:hover {
+    background-color: #3e8e41;
+}
+
+button.reject {
+    background-color: #e74c3c;
+}
+
+button.reject:hover {
+    background-color: #c0392b;
+}
+
+.empty-message {
+    font-style: italic;
+    color: #777;
+    padding: 1rem 0;
+}
+</style>

front/MyINPulse-front/src/components/ProjectComponent.vue

@@ -1,21 +1,306 @@
 <template>
     <div class="project">
         <div class="project-header">
-            <h2>{{ projectName }}</h2>
+            <h2 @click="goToLink">{{ projectName }}</h2>
+            <div class="header-actions">
+                <div ref="dropdownRef" class="dropdown-wrapper">
+                    <button class="contact-button" @click.stop="toggleDropdown">
+                        Contact
+                    </button>
+                    <div
+                        v-if="entrepreneurEmails.length > 0"
+                        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>
+            </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">
-import type { PropType } from "vue";
+<script setup lang="ts">
+import { defineProps, ref, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import { getProjectEntrepreneurs } from "@/services/Apis/Shared.ts";
+import UserEntrepreneur from "@/ApiClasses/UserEntrepreneur.ts";
 
-export default {
-    name: "ProjectComponent",
-    props: {
-        projectName: {
-            type: Object as PropType<string>,
-            required: true,
-        },
-    },
+const IS_MOCK_MODE = false;
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const props = defineProps<{
+    projectName: string;
+    listName: string[];
+    projectLink: string;
+    projectId: number;
+}>();
+
+const router = useRouter();
+
+const isDropdownOpen = ref(false);
+const entrepreneurEmails = ref<string[]>([]);
+const entrepreneurs = ref<UserEntrepreneur[]>([]);
+
+const goToLink = () => {
+    if (props.projectLink) {
+        router.push(props.projectLink);
+    }
 };
+
+const toggleDropdown = () => {
+    isDropdownOpen.value = !isDropdownOpen.value;
+};
+
+const fetchMockEntrepreneurs = () => {
+    const mockData = [
+        {
+            userName: "Doe",
+            userSurname: "John",
+            primaryMail: "john.doe@example.com",
+        },
+        {
+            userName: "Smith",
+            userSurname: "Anna",
+            primaryMail: "anna.smith@example.com",
+        },
+        {
+            userName: "Mock",
+            userSurname: "User",
+            primaryMail: undefined,
+        },
+    ];
+
+    entrepreneurs.value = mockData.map((item) => new UserEntrepreneur(item));
+    entrepreneurEmails.value = entrepreneurs.value
+        .map((e) => e.primaryMail)
+        .filter((mail): mail is string => !!mail);
+
+    console.log("Mock entrepreneurs chargés :", entrepreneurs.value);
+};
+
+const fetchEntrepreneurs = (projectId: number, useMock = false) => {
+    if (useMock) {
+        fetchMockEntrepreneurs();
+    } else {
+        getProjectEntrepreneurs(
+            projectId,
+            (response) => {
+                const rawData = response.data as Partial<UserEntrepreneur>[];
+                entrepreneurs.value = rawData.map(
+                    (item) => new UserEntrepreneur(item)
+                );
+                entrepreneurEmails.value = entrepreneurs.value
+                    .map((e) => e.primaryMail)
+                    .filter((mail): mail is string => !!mail);
+            },
+            (error) => {
+                console.error(
+                    "Erreur lors de la récupération des entrepreneurs :",
+                    error
+                );
+            }
+        );
+    }
+};
+
+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));
+};
+
+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>
+.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;
+}
+
+.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>

front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -0,0 +1,687 @@
+<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]">
+                        <template v-if="expanded">
+                            <button
+                                class="delete-button"
+                                title="Supprimer"
+                                @click.stop="
+                                    deleteSectionCell(desc.idSectionCell, index)
+                                "
+                            >
+                                ✕
+                            </button>
+                        </template>
+
+                        <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 { removeSectionCell } from "@/services/Apis/Entrepreneurs.ts";
+import type { AxiosResponse, AxiosError } from "axios";
+
+const props = defineProps<{
+    projectId: number;
+    title: number;
+    titleText: string;
+    description: string;
+    isAdmin: boolean;
+}>();
+
+const IS_MOCK_MODE = true;
+const IS_ADMIN = props.isAdmin;
+
+const expanded = ref(false);
+const currentDescriptions = ref<SectionCell[]>([]);
+const editedDescriptions = ref<SectionCell[]>([]);
+const isEditing = ref<boolean[]>([]);
+
+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 deleteSectionCell = (id: number | undefined, index: number): void => {
+    if (id === -1) {
+        window.confirm("Êtes-vous sûr de vouloir supprimer cet élément ?");
+        console.error("Delete ignored");
+        return;
+    }
+
+    const confirmed = window.confirm(
+        "Êtes-vous sûr de vouloir supprimer cet élément ?"
+    );
+
+    if (!confirmed) return;
+
+    if (id === undefined) {
+        console.error("ID de la cellule non défini");
+        return;
+    }
+
+    removeSectionCell(
+        id,
+        () => {
+            currentDescriptions.value.splice(index, 1);
+            editedDescriptions.value.splice(index, 1);
+            isEditing.value.splice(index, 1);
+        },
+        (error: AxiosError) => {
+            console.error("Erreur lors de la suppression :", error);
+        }
+    );
+};
+
+const handleClick = () => {
+    if (expanded.value) {
+        const editingInProgress = isEditing.value.some((edit) => edit);
+        if (!editingInProgress) {
+            expanded.value = false;
+        }
+    } else {
+        expanded.value = true;
+    }
+};
+
+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 errorCell = new SectionCell({
+        idSectionCell: -1,
+        sectionId: -1,
+        contentSectionCell: "Échec du chargement des données.",
+        modificationDate: new Date().toISOString(),
+    });
+
+    currentDescriptions.value = [errorCell];
+    editedDescriptions.value = [errorCell];
+    isEditing.value = [false];
+};
+
+const fetchData = async (
+    projectId: number,
+    title: number,
+    date: string,
+    useMock = false
+) => {
+    try {
+        if (useMock) {
+            const responseData = await mockFetch(projectId, title, date);
+            handleFetchSuccess(responseData);
+        } else {
+            if (projectId == -1) {
+                const errorCell = new SectionCell({
+                    idSectionCell: -1,
+                    sectionId: -1,
+                    contentSectionCell: "Échec du chargement des données.",
+                    modificationDate: new Date().toISOString(),
+                });
+
+                currentDescriptions.value = [errorCell];
+                editedDescriptions.value = [errorCell];
+                isEditing.value = [false];
+
+                console.error(
+                    "No sections to show because no project was found."
+                );
+                return;
+            }
+            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.",
+        ],
+    };
+
+    const section = leanCanvasData[title] || ["Aucune donnée disponible."];
+
+    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);
+    });
+};
+
+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
+    );
+});
+</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%;
+    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-radius: 6px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    line-height: 1.6;
+    font-family: "Segoe UI", sans-serif;
+}
+
+.delete-button {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    background: transparent;
+    border: none;
+    color: #a00;
+    font-size: 1.2rem;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.section-bloc {
+    position: relative;
+}
+</style>

front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue

@@ -0,0 +1,239 @@
+<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">
+            <button class="return-button" @click="store.logout">Logout</button>
+
+            <div v-if="props.isAdmin">
+                <div ref="dropdownRef" class="dropdown-wrapper">
+                    <button class="contact-button" @click.stop="toggleDropdown">
+                        Contact
+                    </button>
+                    <div
+                        v-if="entrepreneurEmails.length > 0"
+                        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>
+            </div>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { store } from "@/main.ts";
+import { getProjectEntrepreneurs } from "@/services/Apis/Shared.ts";
+import UserEntrepreneur from "@/ApiClasses/UserEntrepreneur.ts";
+
+const dropdownRef = ref<HTMLElement | undefined>(undefined);
+
+const props = defineProps<{
+    projectId: number;
+    isAdmin: boolean;
+}>();
+
+const isDropdownOpen = ref(false);
+const entrepreneurEmails = ref<string[]>([]);
+const entrepreneurs = ref<UserEntrepreneur[]>([]);
+const IS_MOCK_MODE = false;
+
+const toggleDropdown = () => {
+    isDropdownOpen.value = !isDropdownOpen.value;
+};
+
+const fetchMockEntrepreneurs = () => {
+    const mockData = [
+        {
+            userName: "Doe",
+            userSurname: "John",
+            primaryMail: "john.doe@example.com",
+        },
+        {
+            userName: "Smith",
+            userSurname: "Anna",
+            primaryMail: "anna.smith@example.com",
+        },
+        {
+            userName: "Mock",
+            userSurname: "User",
+            primaryMail: undefined,
+        },
+    ];
+
+    entrepreneurs.value = mockData.map((item) => new UserEntrepreneur(item));
+    entrepreneurEmails.value = entrepreneurs.value
+        .map((e) => e.primaryMail)
+        .filter((mail): mail is string => !!mail);
+
+    console.log("Mock entrepreneurs chargés :", entrepreneurs.value);
+};
+
+const fetchEntrepreneurs = (projectId: number, useMock = false) => {
+    if (useMock) {
+        fetchMockEntrepreneurs();
+    } else {
+        if (projectId == -1) {
+            console.error("No contact to show because no project was found.");
+            return;
+        }
+        getProjectEntrepreneurs(
+            projectId,
+            (response) => {
+                const rawData = response.data as Partial<UserEntrepreneur>[];
+                entrepreneurs.value = rawData.map(
+                    (item) => new UserEntrepreneur(item)
+                );
+                entrepreneurEmails.value = entrepreneurs.value
+                    .map((e) => e.primaryMail)
+                    .filter((mail): mail is string => !!mail);
+            },
+            (error) => {
+                console.error(
+                    "Erreur lors de la récupération des entrepreneurs :",
+                    error
+                );
+            }
+        );
+    }
+};
+
+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));
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+    if (
+        isDropdownOpen.value &&
+        dropdownRef.value &&
+        !dropdownRef.value.contains(event.target as Node)
+    ) {
+        isDropdownOpen.value = false;
+    }
+};
+
+onMounted(() => {
+    if (props.isAdmin) {
+        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: 10px 20px;
+    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>

front/MyINPulse-front/src/components/canvas/LeanCanvas.vue

@@ -0,0 +1,174 @@
+<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="props.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<{
+    projectId: number;
+    isAdmin: boolean;
+}>();
+
+const items = ref([
+    {
+        title: 1,
+        title_text: "1. Problème",
+        description: "3 problèmes essentiels à résoudre pour le client",
+        class: "Probleme",
+    },
+    {
+        title: 2,
+        title_text: "2. Segments",
+        description: "Les segments de clientèle visés",
+        class: "Segments",
+    },
+    {
+        title: 3,
+        title_text: "3. Valeur",
+        description: "La proposition de valeur",
+        class: "Valeur",
+    },
+    {
+        title: 4,
+        title_text: "4. Solution",
+        description: "Les solutions proposées",
+        class: "Solution",
+    },
+    {
+        title: 5,
+        title_text: "5. Avantage",
+        description: "Les avantages concurrentiels",
+        class: "Avantage",
+    },
+    {
+        title: 6,
+        title_text: "6. Canaux",
+        description: "Les canaux de distribution",
+        class: "Canaux",
+    },
+    {
+        title: 7,
+        title_text: "7. Indicateurs",
+        description: "Les indicateurs clés de performance",
+        class: "Indicateurs",
+    },
+    {
+        title: 8,
+        title_text: "8. Coûts",
+        description: "Les coûts associés",
+        class: "Couts",
+    },
+    {
+        title: 9,
+        title_text: "9. Revenus",
+        description: "Les sources de revenus",
+        class: "Revenus",
+    },
+]);
+</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;
+    max-height: none;
+    box-sizing: border-box;
+    overflow: 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 {
+    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>

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;
+}

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 };

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;

front/MyINPulse-front/src/router/router.ts

@@ -11,6 +11,47 @@ 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"),
+        },
+
+        {
+            path: "/finalize",
+            name: "finalize",
+            component: () => import("../views/FinalizeAccount.vue"),
+        },
+
+        {
+            path: "/pending-approval",
+            name: "PendingApproval",
+            component: () => import("@/views/PendingApproval.vue"),
+        },
     ],
 });
 

front/MyINPulse-front/src/services/Apis/Admin.ts

@@ -0,0 +1,340 @@
+import { type AxiosError, type AxiosResponse } from "axios";
+import Report from "@/ApiClasses/Repport";
+import ProjectDecision from "@/ApiClasses/ProjectDecision";
+//import UserAdmin from "@/ApiClasses/UserAdmin";
+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
+    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
+    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);
+            }
+        });
+}
+
+type ProjectCreatePayload = {
+    projectName: string;
+    logo?: string;
+};
+
+function addProjectManually(
+    payload: ProjectCreatePayload,
+    onSuccess?: (response: AxiosResponse) => void,
+    onError?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .post("/admin/projects", payload)
+        .then((response) => onSuccess?.(response))
+        .catch((error: AxiosError) => onError?.(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(
+    decision: ProjectDecision,
+    onSuccessHandler?: (response: AxiosResponse) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .post(`/admin/projects/pending/decision`, decision.toObject())
+        .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);
+            }
+        });
+}
+
+function createAdmin(
+    onSuccessHandler?: (response: AxiosResponse) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .post("/admin/create-account")
+        .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,
+    createAdmin,
+};

front/MyINPulse-front/src/services/Apis/Entrepreneurs.ts

@@ -0,0 +1,180 @@
+import { type AxiosError, type AxiosResponse } from "axios";
+import Project from "@/ApiClasses/Project";
+import SectionCell from "@/ApiClasses/SectionCell";
+import {
+    axiosInstance,
+    defaultApiErrorHandler,
+    defaultApiSuccessHandler,
+} from "@/services/api";
+
+// Entrepreneurs API
+function getEntrepreneurProjectId(
+    onSuccessHandler?: (response: AxiosResponse<number[]>) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .get("/entrepreneur/projects")
+        .then((response) => {
+            if (onSuccessHandler) {
+                onSuccessHandler(response);
+            } else {
+                defaultApiSuccessHandler(response);
+            }
+        })
+        .catch((error: AxiosError) => {
+            if (onErrorHandler) {
+                onErrorHandler(error);
+            } else {
+                defaultApiErrorHandler(error);
+            }
+        });
+}
+
+function requestProjectCreation(
+    projectDetails: Project,
+    onSuccessHandler?: (response: AxiosResponse) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .post("/entrepreneur/projects/request", projectDetails.toObject())
+        .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.toObject())
+        .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,
+    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);
+            }
+        });
+}
+
+// Checks if the entrepreneur has a pending project request
+function checkPendingProjectRequest(
+    onSuccessHandler?: (response: AxiosResponse<boolean>) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .get("/entrepreneur/projects/has-pending-request")
+        .then((response) => {
+            if (onSuccessHandler) {
+                onSuccessHandler(response);
+            } else {
+                defaultApiSuccessHandler(response);
+            }
+        })
+        .catch((error: AxiosError) => {
+            if (onErrorHandler) {
+                onErrorHandler(error);
+            } else {
+                defaultApiErrorHandler(error);
+            }
+        });
+}
+
+// Checks if the entrepreneur has an active project
+function checkIfProjectIsActive(
+    onSuccessHandler?: (response: AxiosResponse<boolean>) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .get("/entrepreneur/projects/project-is-active")
+        .then((response) => {
+            if (onSuccessHandler) {
+                onSuccessHandler(response);
+            } else {
+                defaultApiSuccessHandler(response);
+            }
+        })
+        .catch((error: AxiosError) => {
+            if (onErrorHandler) {
+                onErrorHandler(error);
+            } else {
+                defaultApiErrorHandler(error);
+            }
+        });
+}
+
+export {
+    getEntrepreneurProjectId,
+    requestProjectCreation,
+    addSectionCell,
+    modifySectionCell,
+    removeSectionCell,
+    checkPendingProjectRequest,
+    checkIfProjectIsActive,
+};

front/MyINPulse-front/src/services/Apis/Shared.ts

@@ -0,0 +1,157 @@
+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,
+};

front/MyINPulse-front/src/services/Apis/Unauth.ts

@@ -0,0 +1,103 @@
+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);
+//             }
+//         });
+// }
+
+function getAllEntrepreneurs(
+    onSuccessHandler?: (response: AxiosResponse) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .get("/unauth/getAllEntrepreneurs")
+        .then((response) => {
+            if (onSuccessHandler) {
+                onSuccessHandler(response);
+            } else {
+                defaultApiSuccessHandler(response);
+            }
+        })
+        .catch((error: AxiosError) => {
+            if (onErrorHandler) {
+                onErrorHandler(error);
+            } else {
+                defaultApiErrorHandler(error);
+            }
+        });
+}
+
+function checkPending(
+    onSuccessHandler?: (response: AxiosResponse<boolean>) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .get("/unauth/check-if-not-pending")
+        .then((response) => {
+            if (onSuccessHandler) {
+                onSuccessHandler(response);
+            } else {
+                defaultApiSuccessHandler(response);
+            }
+        })
+        .catch((error: AxiosError) => {
+            if (onErrorHandler) {
+                onErrorHandler(error);
+            } else {
+                defaultApiErrorHandler(error);
+            }
+        });
+}
+export {
+    finalizeAccount,
+    getAllEntrepreneurs,
+    checkPending,
+    // requestJoinProject, // Not yet implemented [cite: 4]
+};

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,
@@ -9,6 +10,19 @@ const axiosInstance = axios.create({
     },
 });
 
+axiosInstance.interceptors.request.use(
+    (config) => {
+        const token = store.user?.token; // Récupérez le token depuis le store
+        if (token) {
+            config.headers["Authorization"] = `Bearer ${token}`; // Ajoutez le token dans l'en-tête
+        }
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);
+
 axiosInstance.interceptors.response.use(
     (response) => response, // Directly return successful responses.
     async (error) => {
@@ -19,19 +33,17 @@ axiosInstance.interceptors.response.use(
             !originalRequest._retry &&
             store.authenticated
         ) {
-            originalRequest._retry = true; // Mark the request as retried to avoid infinite loops.
+            originalRequest._retry = true;
             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.
+                return axiosInstance(originalRequest);
             } 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");
-                window.location.href = "/login";
+                router.push("/login");
                 return Promise.reject(refreshError);
             }
         }
@@ -41,7 +53,9 @@ 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 +79,36 @@ 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,
+};

front/MyINPulse-front/src/services/tools.ts

@@ -0,0 +1,24 @@
+import { jwtDecode } from "jwt-decode";
+import { store } from "@/main";
+
+type TokenPayload = {
+    realm_access?: {
+        roles?: string[];
+    };
+};
+
+function isAdmin(): boolean {
+    if (store.authenticated && store.user.token) {
+        const decoded = jwtDecode<TokenPayload>(store.user.token);
+        const roles = decoded.realm_access?.roles || [];
+        if (roles.includes("MyINPulse-admin")) {
+            return true;
+        } else {
+            return false;
+        }
+    } else {
+        return false;
+    }
+}
+
+export { isAdmin };

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) {

front/MyINPulse-front/src/views/AdminMain.vue

@@ -0,0 +1,226 @@
+<template>
+    <Header />
+    <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"
+            />
+
+            <!-- <AllEntrep /> -->
+
+            <h3>Projet en attente</h3>
+            <PendingProjectComponent
+                v-for="(project, index) in pendingProjects"
+                :key="index"
+                :project-name="project.projectName"
+                :creation-date="project.creationDate"
+            />
+
+            <AddProjectForm />
+            <PendingRequestsManager />
+        </div>
+
+        <Agenda :project-r-d-v="rendezVous" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { getAdminProjects, getPendingProjects } from "@/services/Apis/Admin";
+import { getProjectEntrepreneurs } from "@/services/Apis/Shared";
+import { type AxiosError, type AxiosResponse } from "axios";
+
+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";
+import PendingRequestsManager from "@/components/PendingRequestsManager.vue";
+import { createAdmin } from "@/services/Apis/Admin";
+import Project from "@/ApiClasses/Project";
+import UserEntrepreneur from "@/ApiClasses/UserEntrepreneur";
+//import UserAdmin from "@/ApiClasses/UserAdmin";
+//import AllEntrep from "../components/AllEntrep.vue";
+const projects = ref<
+    {
+        name: string;
+        link: string;
+        members: string[];
+    }[]
+>([]);
+
+const fallbackProjects = [
+    {
+        name: "Projet Alpha",
+        link: "/canvas",
+        members: ["Alice", "Bob", "Charlie"],
+    },
+    {
+        name: "Projet Beta",
+        link: "./canvas",
+        members: ["David", "Eve", "Frank"],
+    },
+];
+
+const createFirstAdmin = () => {
+    createAdmin(
+        (response) => {
+            console.log("Admin créé avec succès :", response.data);
+        },
+        (error) => {
+            console.error(
+                "Erreur lors de la création de l'admin :",
+                error.message
+            );
+        }
+    );
+};
+
+onMounted(createFirstAdmin);
+
+const fetchProjects = () => {
+    getAdminProjects(
+        (response: AxiosResponse) => {
+            const projectList = response.data.map(
+                (p: Project) => new Project(p)
+            );
+
+            const projectPromises = projectList.map(
+                (project: Project) =>
+                    new Promise<void>((resolve) => {
+                        getProjectEntrepreneurs(
+                            project.idProject!,
+                            (memberResponse: AxiosResponse) => {
+                                const members = memberResponse.data.map(
+                                    (m: UserEntrepreneur) =>
+                                        new UserEntrepreneur(m).userName ||
+                                        "Unknown"
+                                );
+                                projects.value.push({
+                                    name:
+                                        project.projectName ||
+                                        "Unnamed Project",
+                                    link: `/project/${project.idProject}`,
+                                    members,
+                                });
+                                resolve();
+                            },
+                            () => {
+                                projects.value.push({
+                                    name:
+                                        project.projectName ||
+                                        "Unnamed Project",
+                                    link: `/project/${project.idProject}`,
+                                    members: [],
+                                });
+                                resolve();
+                            }
+                        );
+                    })
+            );
+
+            Promise.all(projectPromises).catch(() => {
+                projects.value = fallbackProjects;
+            });
+        },
+        (error: AxiosError) => {
+            console.error("Error fetching admin projects:", error);
+            projects.value = fallbackProjects;
+        }
+    );
+};
+
+const pendingProjects = ref<Project[]>([]);
+
+const mockPendingProjects = [
+    new Project({ projectName: "l'eau", creationDate: "26-02-2024" }),
+    new Project({ projectName: "l'air", creationDate: "09-03-2023" }),
+];
+
+onMounted(fetchProjects);
+onMounted(() => {
+    getPendingProjects(
+        (response) => {
+            pendingProjects.value = response.data.map(
+                (p: Project) =>
+                    new Project({
+                        projectName: p.projectName,
+                        creationDate: p.creationDate,
+                    })
+            );
+        },
+        (error) => {
+            console.error(
+                "Failed to fetch pending projects, using mock:",
+                error
+            );
+            pendingProjects.value = mockPendingProjects.map(
+                (p) =>
+                    new Project({
+                        projectName: p.projectName,
+                        creationDate: p.creationDate,
+                    })
+            );
+        }
+    );
+});
+
+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;
+}
+
+#main > * + * {
+    margin-top: 2rem;
+}
+</style>

front/MyINPulse-front/src/views/CanvasView.vue

@@ -0,0 +1,181 @@
+<template>
+    <div>
+        <header>
+            <HeaderCanvas :project-id="projectId" :is-admin="isAdmin_" />
+        </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 :project-id="projectId" :is-admin="isAdmin_" />
+        <div class="info-box">
+            <p v-if="admin">
+                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>
+            <p v-else>Chargement des informations du responsable...</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import HeaderCanvas from "../components/canvas/HeaderCanvas.vue";
+import LeanCanvas from "../components/canvas/LeanCanvas.vue";
+import { ref, onMounted } from "vue";
+import { isAdmin } from "@/services/tools.ts";
+import { getProjectAdmin } from "@/services/Apis/Shared.ts";
+import UserAdmin from "@/ApiClasses/UserAdmin.ts";
+import type { AxiosResponse, AxiosError } from "axios";
+import { getEntrepreneurProjectId } from "@/services/Apis/Entrepreneurs";
+
+const IS_MOCK_MODE = false;
+const isAdmin_ = isAdmin();
+const admin = ref<UserAdmin | null>(null);
+const projectId = ref<number>(-1);
+
+const mockAdminData = new UserAdmin({
+    idUser: 1,
+    userSurname: "ALAMI",
+    userName: "Adnane",
+    primaryMail: "mock.admin@example.com",
+    secondaryMail: "admin.backup@example.com",
+    phoneNumber: "0600000000",
+});
+
+function getProjectId(): Promise<number> {
+    return new Promise((resolve) => {
+        getEntrepreneurProjectId(
+            (response) => {
+                const projectIds = response.data;
+                if (!Array.isArray(projectIds) || projectIds.length === 0) {
+                    console.warn("Aucun projet trouvé pour cet entrepreneur.");
+                    resolve(-1);
+                    return;
+                }
+                resolve(projectIds[0]);
+            },
+            (error) => {
+                console.error("Erreur API :", error);
+                resolve(-1);
+            }
+        );
+    });
+}
+
+async function fetchProjectId() {
+    try {
+        projectId.value = await getProjectId();
+        console.log("ProjectId :", projectId.value);
+    } catch (error) {
+        console.error("Erreur lors de la récupération du projet :", error);
+    }
+}
+
+const fetchAdminData = (projectId: number, useMock = IS_MOCK_MODE) => {
+    if (useMock) {
+        console.log("Utilisation des données mockées pour l'administrateur");
+        admin.value = mockAdminData;
+        return;
+    }
+
+    if (projectId === -1) {
+        admin.value = new UserAdmin({
+            idUser: 0,
+            userSurname: "Erreur",
+            userName: "Chargement",
+            primaryMail: "N/A",
+            secondaryMail: "N/A",
+            phoneNumber: "N/A",
+        });
+        return;
+    }
+
+    getProjectAdmin(
+        projectId,
+        (response: AxiosResponse) => {
+            admin.value = new UserAdmin(response.data);
+        },
+        (error: AxiosError) => {
+            console.error(
+                "Erreur lors de la récupération des données de l'administrateur :",
+                error
+            );
+
+            admin.value = new UserAdmin({
+                idUser: 0,
+                userSurname: "Erreur",
+                userName: "Chargement",
+                primaryMail: "N/A",
+                secondaryMail: "N/A",
+                phoneNumber: "N/A",
+            });
+        }
+    );
+};
+
+onMounted(() => {
+    fetchProjectId();
+    fetchAdminData(projectId.value);
+});
+</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>

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>

front/MyINPulse-front/src/views/FinalizeAccount.vue

@@ -0,0 +1,81 @@
+<template>
+    <Header />
+    <div class="finalize-page">
+        <div class="loader-container">
+            <button class="return-button" @click="store.logout">Logout</button>
+            <div class="spinner"></div>
+            <p>Finalisation du compte en cours...</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+//import { useRouter } from "vue-router";
+import { finalizeAccount } from "@/services/Apis/Unauth";
+import Header from "@/components/HeaderComponent.vue";
+import { store } from "@/main.ts";
+//const router = useRouter();
+
+onMounted(() => {
+    finalizeAccount(
+        () => {
+            console.log("finalize sended");
+        },
+        (error) => {
+            console.error("Erreur lors de la finalisation :", error);
+        }
+    );
+});
+</script>
+
+<style scoped>
+.finalize-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+    background-color: #f9fbfd;
+}
+
+.loader-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    color: #333;
+    font-size: 1.1rem;
+    font-style: italic;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #cfd8dc;
+    border-top: 5px solid #3498db;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+.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;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

front/MyINPulse-front/src/views/JoinOrCreatProjectForEntrep.vue

@@ -0,0 +1,185 @@
+<template>
+    <Header />
+    <header class="header">
+        <img
+            src="@/components/icons/logo inpulse.png"
+            alt="INPulse Logo"
+            class="logo"
+        />
+        <button class="return-button" @click="store.logout">Logout</button>
+    </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, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import Project from "@/ApiClasses/Project";
+import Header from "../components/HeaderComponent.vue";
+import { store } from "@/main.ts";
+import {
+    requestProjectCreation,
+    checkIfProjectIsActive,
+    checkPendingProjectRequest,
+} from "@/services/Apis/Entrepreneurs";
+
+const router = useRouter();
+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;
+    }
+
+    const today = new Date();
+    const yyyy = today.getFullYear();
+    const mm = String(today.getMonth() + 1).padStart(2, "0");
+    const dd = String(today.getDate()).padStart(2, "0");
+    const formattedDate = `${yyyy}-${mm}-${dd}`;
+
+    const nouveauProjet = new Project({
+        projectName: nomProjet.value.trim(),
+        creationDate: formattedDate,
+        status: "PENDING",
+    });
+
+    requestProjectCreation(
+        nouveauProjet,
+        (response) => {
+            console.log("Projet créé :", response.data);
+            alert(`Projet "${nomProjet.value}" créé avec succès !`);
+        },
+        (error) => {
+            console.error("Erreur lors de la création du projet :", error);
+            alert("Une erreur est survenue lors de la création du projet.");
+        }
+    );
+};
+
+onMounted(() => {
+    checkIfProjectIsActive(
+        (response) => {
+            if (response.data === true) {
+                router.push("/canvas");
+            }
+        },
+        () => {
+            checkPendingProjectRequest(
+                (response) => {
+                    if (response.data === true) {
+                        router.push("/pending-approval");
+                    }
+                },
+                (error) => {
+                    console.warn("No active or pending project:", error);
+                }
+            );
+        }
+    );
+});
+</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;
+}
+
+.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;
+}
+</style>

front/MyINPulse-front/src/views/PendingApproval.vue

@@ -0,0 +1,41 @@
+<template>
+    <Header />
+    <div class="pending-container">
+        <h1>Projet en attente de validation</h1>
+        <p>
+            Votre demande de création de projet a bien été reçue.<br />
+            Un administrateur doit valider votre projet avant que vous puissiez
+            continuer.
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Header from "@/components/HeaderComponent.vue";
+</script>
+
+<style scoped>
+.pending-container {
+    max-width: 600px;
+    margin: 100px auto;
+    padding: 2rem;
+    text-align: center;
+    background-color: #fffdf8;
+    border: 1px solid #ececec;
+    border-radius: 12px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+    font-family: "Inter", sans-serif;
+}
+
+h1 {
+    color: #f57c00;
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+}
+
+p {
+    font-size: 1.1rem;
+    color: #333;
+    margin-bottom: 1.5rem;
+}
+</style>

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%;
 }