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

Reviewed-on: #3
Reviewed-by: Theo <tlelez@enseirb-matmeca.fr>
Vu que vous ne voulez pas faire avancer le projet, je vais abuser de mes droits d'administrateur et le faire.

.gitea/workflows/front.yaml

@@ -0,0 +1,24 @@
+name: CI
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install everything
+        working-directory: ./front/MyINPulse-front
+        run: npm i
+      
+      - name: Run ESLint
+        working-directory: ./front/MyINPulse-front
+        run: npx eslint
+
+      - name: Run prettier
+        working-directory: ./front/MyINPulse-front
+        run: npx prettier src --check
+
+      - name: Build frontend
+        working-directory: ./front/MyINPulse-front
+        run: npm run build

Documentation/openapi/main.yaml

@@ -0,0 +1,741 @@
+openapi: 3.0.3
+info:
+  title: MyInpulse Backend Api
+  description: this document servers as a documentation for the backend api.  
+  version: 0.0.0
+
+tags:
+  - name: Entrepreneurs API
+    description: La partie de l'api dédiée aux entrepreneurs
+  - name: Admin API
+    description: La partie de l'api dédiée aux entrepreneurs
+  - name: Shared API
+    description: La partie de l'api dédiée aux entrepreneurs et admins
+
+
+components:
+  schemas:
+    user:
+      type: object
+      properties:
+        nom:
+          type: string
+        prenom:
+          type: string
+        email:
+          type: string
+          example: "example@exmaple.com"
+        secondaryEmail:
+          type: string
+          example: "example@exmaple.com"
+        tel:
+          type: string
+          example: "0612345678"
+    user-entrepreneur:
+      type: object
+      properties:
+        user:
+          $ref: "#/components/schemas/user"
+        entrepreneur:
+          type: object
+          properties:
+            ecole: 
+              type: string
+              example: "enseirb"
+            filiere:
+              type: string
+              example: "info"
+            status:
+              type: boolean
+              example: false
+    user-admin:
+      type: object
+      properties:
+        admin:
+          $ref: "#/components/schemas/user"
+
+  securitySchemes:
+      MyINPulse:
+        type: oauth2
+        flows:
+          implicit:
+            authorizationUrl: https://petstore3.swagger.io/oauth/authorize
+            scopes:
+              MyINPulse-admin: Administrateur
+              MyINPulse-entrepreneur: Utilisateur
+
+paths:
+
+#          _    ____  __  __ ___ _   _      _    ____ ___ 
+#         / \  |  _ \|  \/  |_ _| \ | |    / \  |  _ \_ _|
+#        / _ \ | | | | |\/| || ||  \| |   / _ \ | |_) | | 
+#       / ___ \| |_| | |  | || || |\  |  / ___ \|  __/| | 
+#      /_/   \_\____/|_|  |_|___|_| \_| /_/   \_\_|  |___|
+#
+
+  /admin/projects:
+    get:
+      summary: Retourne la liste of projets associés à l'admin
+      tags: 
+        - Admin API 
+      security:
+        - MyINPulse:
+            - MyINPulse-admin
+      description:
+        JSON array of who's elements are objects containing necessary information for the view 
+        (project name, entrepreneur names, etc..)
+        of the projects an admin is watching over.
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    name:
+                      type: string
+                    E_names:
+                      type: string
+                      description: entrepreneur names
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is missing or invalid
+  /admin/projects/pending/decision:
+    post:
+      summary: valider un projet en attente de validation
+      tags:
+        - Admin API
+      description:
+        if the request is accepted the status of the
+        project is changed to ongoing, entrepreneur
+        account is confirmed and the project is linked
+        to the admin accepting the request and the
+        entrepreneur requesting it. Else the pending
+        project and user info are deleted.
+      security:
+          - MyINPulse:
+              - MyINPulse-admin
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                pedingProjectId: 
+                  type: integer
+                decision:
+                  type: boolean
+                
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+            
+  /admin/projects/add:
+    post:
+      summary: Ajout manuel d'un projet
+      description:
+        Adds a project with the
+        inputed details
+      tags:
+        - Admin API
+      security:
+          - MyINPulse:
+              - MyINPulse-admin
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                name:
+                  type: string
+                founder:
+                  $ref: "#/components/schemas/user-entrepreneur"
+                
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+  
+  /admin/appointments/report/{appointmentId}:
+    put:
+      summary: enregistrer un rapport du rendez-vous
+      description:
+        Generate a PDF file formatted 
+        from input text and links it 
+        to the appointement.
+      tags:
+        - Admin API
+      security:
+        - MyINPulse:
+          - MyINPulse-admin
+      parameters:
+        - in: path
+          name: appointmentId
+          required: true
+          schema:
+            type: integer
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                title:
+                  type: string
+                body:
+                  type: string
+                conclusion:
+                  type: string
+        
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+                    missing or invalid
+    post:
+      summary: modifier un rapport déja éxistant du rendez-vous
+      description:
+        Modifies the report file to input 
+        text and links it to the appointement.
+      tags:
+        - Admin API
+      security:
+        - MyINPulse:
+          - MyINPulse-admin
+      parameters:
+        - in: path
+          name: appointmentId
+          required: true
+          schema:
+            type: integer
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                title:
+                  type: string
+                body:
+                  type: string
+                conclusion:
+                  type: string
+        
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+                    missing or invalid
+
+
+  /admin/projects/remove/{projectId}:
+    delete:
+      summary: supression d'un project
+      description:
+        Removes the project
+        with the inputed id projectId
+      tags:
+        - Admin API
+      security:
+          - MyINPulse:
+              - MyINPulse-admin
+      parameters:
+        - in: path
+          name: projectId
+          required: true
+          schema:
+            type: integer
+          
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+     
+
+  /admin/projects/pending:
+    get:
+      summary: Retourne la liste des projets en attente de validation
+      tags: 
+        - Admin API
+      security:
+        - MyINPulse:
+            - MyINPulse-admin
+      description:
+        JSON array of who's elements are objects containing
+        necessary information for the view (project name,
+        entrepreneur names, etc..) of all pending projects.
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    name:
+                      type: string
+                    founder:
+                      $ref: "#/components/schemas/user-entrepreneur"
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is missing or invalid
+
+#
+#       ____  _                        _      _    ____ ___ 
+#      / ___|| |__   __ _ _ __ ___  __| |    / \  |  _ \_ _|
+#      \___ \| '_ \ / _` | '__/ _ \/ _` |   / _ \ | |_) | | 
+#       ___) | | | | (_| | | |  __/ (_| |  / ___ \|  __/| | 
+#      |____/|_| |_|\__,_|_|  \___|\__,_| /_/   \_\_|  |___|
+#                   
+
+  /shared/appointments/upcoming:
+    get:
+      summary: Retourne la list des prochains rendez-vous de l'utilisateur
+      tags: 
+        - Shared API
+      security:
+        - MyINPulse:
+            - MyINPulse-admin
+            - MyINPulse-entrepreneur
+      description:
+        JSON array of upcoming appointment data (name, date, time etc..) for a user.
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    name:
+                      type: string
+                    date:
+                      type: string
+                    time:
+                      type: string
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is missing or invalid        
+
+  /shared/projects/lcsection/{projectId}/{title}/{date}:
+      get:
+        summary: Retourne la liste de sections de LC avec un titre donné
+        tags: 
+          - Shared API
+        security:
+        - MyINPulse:
+            - MyINPulse-admin
+            - MyINPulse-entrepreneur
+        description:
+          JSON array containing Lean Canvas 
+          section data with a title for the
+          current date (or given date if the
+          date parameter is passed)
+        parameters:
+          - in: path
+            required: true
+            name: projectId
+            schema:
+              type: integer
+          - in: path
+            required: true
+            description: this number can be 1, 2,...,8. It is associated with the title of the lcsection
+            name: title
+            schema:
+              type: integer
+              enum: [1, 2, 3, 4, 5, 6, 7, 8] 
+            
+          - in: path
+            required: true
+            name: date
+            description: the date corresponding to the wanted version of lc section. "Nan" for the latest version
+            example: "NaN"
+            schema:
+              type: string
+              
+        responses:
+          "200":
+            description: OK
+            content:
+              application/json:
+                schema:
+                  type: array
+                  items:
+                    type: object
+                    properties:
+                      section:
+                        type: string
+                      txt:
+                        type: string
+                      time:
+                        type: string
+          "400":
+            description: Bad request
+          "401":
+            description: Authorization information is missing or invalid
+  
+  /shared/projects/entrepreneurs/{projectId}:
+    get:
+      summary: Retourne la liste d'entrepreneurs associée à un projet donné
+      tags: 
+          - Shared API
+      security:
+        - MyINPulse:
+            - MyINPulse-admin
+            - MyINPulse-entrepreneur
+      description:
+        JSON array of entrepreneur
+        names associated with a project
+      parameters:
+          - in: path
+            name: projectId
+            schema:
+              type: integer
+            required: true
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/user-entrepreneur"
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is missing or invalid
+  
+  /shared/projects/admin/{projectId}:
+    get:
+      summary: Retourne les informations de l'admin qui accompagne le projet
+      tags: 
+          - Shared API
+      security:
+        - MyINPulse:
+            - MyINPulse-admin
+            - MyINPulse-entrepreneur
+      description: 
+        JSON object containing information (name, gmail, tel, etc..) 
+        the admin supervising the project with id projectID.
+      parameters:
+            - in: path
+              name: projectId
+              schema:
+                type: integer
+              required: true
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/user-admin"
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+  
+  /shared/projects/appointments/{projectId}:
+    get:
+      summary: Retourne les rendez-vous du projet 
+      tags: 
+          - Shared API
+      security:
+        - MyINPulse:
+            - MyINPulse-admin
+            - MyINPulse-entrepreneur
+      description: 
+        JSON array of upcoming and past appointment 
+        data for the project with id projectID.
+      parameters:
+        - in: path
+          name: projectId
+          schema:
+            type: integer
+          required: true
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    appointementId:
+                      type: integer
+                    name: 
+                      type: string
+                    date: 
+                      type: string
+                    time: 
+                      type: string
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+  /shared/projects/appointments/report/{apointementId}:
+    get:
+      summary: Retourne le rapport pdf du rendez-vous
+      tags: 
+          - Shared API
+      security:
+        - MyINPulse:
+            - MyINPulse-admin
+            - MyINPulse-entrepreneur
+      description:
+        PDF file containing the ap-
+        pointment report
+      parameters:
+        - in: path
+          name: apointementId
+          schema:
+            type: integer
+          required: true
+      responses:
+        "200":
+          description: OK
+          content:
+            application/pdf:
+              schema:
+                type: string
+                format: binary
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+  
+  /shared/appointments/request:
+    post:
+      summary: demander un rendez-vous
+      description:
+        will add an appointement request request by the applicant 
+        to have an appointment to be confirmed or denied by the
+        specified participants of the appointement.
+      tags:
+        - Shared API
+      security:
+        - MyINPulse:
+          - MyINPulse-entrepreneur
+          - MyINPulse-admin
+      requestBody:
+        description: \"participants\" property is an array containing userids of the participants in the appointement
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                title:
+                  type: string
+                start_time:
+                  type: string
+                end_time:
+                  type: string
+                place:
+                  type: string
+                applicantId:
+                  type: integer
+                participants:
+                  #/* */
+                  type: array
+                  items:
+                    type: integer
+                    
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+                    missing or invalid        
+  
+
+
+#      _____ _   _ _____ ____  _____ ____  ____  _____ _   _ _____ _   _ ____  
+#     | ____| \ | |_   _|  _ \| ____|  _ \|  _ \| ____| \ | | ____| | | |  _ \ 
+#     |  _| |  \| | | | | |_) |  _| | |_) | |_) |  _| |  \| |  _| | | | | |_) |
+#     | |___| |\  | | | |  _ <| |___|  __/|  _ <| |___| |\  | |___| |_| |  _ < 
+#     |_____|_|_\_| |_| |_| \_\_____|_|   |_| \_\_____|_| \_|_____|\___/|_| \_\
+#        / \  |  _ \_ _|                                                       
+#       / _ \ | |_) | |                                                        
+#      / ___ \|  __/| |                                                        
+#     /_/   \_\_|  |___|                                                       
+#
+
+                    
+  /entrepreneur/projects/request:
+    post:
+      summary: demander la création et validation d'un projet
+      tags:
+        - Entrepreneurs API
+      description: 
+        Adds project to pending projects 
+        to then be accepted or rejected by
+        an admin
+      security:
+        - MyINPulse:
+          - MyINPulse-entrepreneur
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                name:
+                  type: string
+                founder:
+                  $ref: "#/components/schemas/user-entrepreneur"
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+            
+           
+  /entrepreneur/lcsection/add/{projectId}:
+    post:
+      summary: ajouter une sections au LC
+      description: 
+        Adds input data to the user's LC 
+        with a specified title.
+      tags:
+       - Entrepreneurs API
+      security:
+        - MyINPulse:
+          - MyINPulse-entrepreneur
+      parameters:
+        - in: path
+          name: projectId
+          schema:
+            type: integer
+          required: true
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                title:
+                  type: string
+                txt:
+                  type: string
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+  /entrepreneur/lcsection/modify/{sectionId}:
+    put:
+      summary: modifier les données d'une section LC
+      description: 
+        Modifies input Lean Canvas section by changing it to 
+        the information in the request body and changes the
+        time stamp.
+      tags:
+       - Entrepreneurs API
+      security:
+        - MyINPulse:
+          - MyINPulse-entrepreneur
+      parameters:
+        - in: path
+          name: sectionId
+          schema:
+            type: integer
+          required: true
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                title:
+                  type: string
+                txt:
+                  type: string
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+            missing or invalid
+            
+  /entrepreneur/lcsection/remove/{sectionId}:
+    delete:
+      summary: supprimer une section LC.
+      description:
+        Deletes section from Lean Canvas
+      tags:
+        - Entrepreneurs API
+      security:
+        - MyINPulse:
+          - MyINPulse-entrepreneur
+      parameters:
+        - in: path
+          name: sectionId
+          schema:
+            type: integer
+          required: true
+      responses:
+        "200": 
+          description: OK
+        "400":
+          description: Bad request
+        "401":
+          description: Authorization information is
+                      missing or invalid
+  
+  
+  
+  

front/MyINPulse-front/.gitignore

@@ -36,4 +36,4 @@ playwright-report/
 # Custom
 
 .installed
-package-lock.json
+./package-lock.json

front/MyINPulse-front/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "useTabs":false,
+  "semi":true,
+  "trailingComma":"es5",
+  "arrowParens":"always",
+  "tabWidth":4
+}

front/MyINPulse-front/eslint.config.js

@@ -0,0 +1,29 @@
+import eslint from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginVue from "eslint-plugin-vue";
+import globals from "globals";
+import typescriptEslint from "typescript-eslint";
+
+export default typescriptEslint.config(
+    { ignores: ["*.d.ts", "**/coverage", "**/dist"] },
+    {
+        extends: [
+            eslint.configs.recommended,
+            ...typescriptEslint.configs.recommended,
+            ...eslintPluginVue.configs["flat/recommended"],
+        ],
+        files: ["**/*.{ts,vue}"],
+        languageOptions: {
+            ecmaVersion: "latest",
+            sourceType: "module",
+            globals: globals.browser,
+            parserOptions: {
+                parser: typescriptEslint.parser,
+            },
+        },
+        rules: {
+            // your rules
+        },
+    },
+    eslintConfigPrettier
+);

front/MyINPulse-front/fake_data/db.json

@@ -0,0 +1,63 @@
+{
+  "entrepreneurs": [
+    { "id": 1, "name": "Alice", "email": "alice@example.com" },
+    { "id": 2, "name": "Bob", "email": "bob@example.com" },
+    { "id": 3, "name": "Charlie", "email": "charlie@example.com" }
+  ],
+  "data": [
+    {
+      "projectId": 1,
+      "title": 1,
+      "title_text": "1. Problème",
+      "description": "3 problèmes essentiels à résoudre pour le client"
+    },
+    {
+      "projectId": 1,
+      "title": 2,
+      "title_text": "2. Segments",
+      "description": "Les segments de clientèle visés"
+    },
+    {
+      "projectId": 1,
+      "title": 3,
+      "title_text": "3. Valeur",
+      "description": "La proposition de valeur"
+    },
+    {
+      "projectId": 1,
+      "title": 4,
+      "title_text": "4. Solution",
+      "description": "Les solutions proposées"
+    },
+    {
+      "projectId": 1,
+      "title": 5,
+      "title_text": "5. Avantage",
+      "description": "Les avantages concurrentiels"
+    },
+    {
+      "projectId": 1,
+      "title": 6,
+      "title_text": "6. Canaux",
+      "description": "Les canaux de distribution"
+    },
+    {
+      "projectId": 1,
+      "title": 7,
+      "title_text": "7. Indicateurs",
+      "description": "Les indicateurs clés de performance"
+    },
+    {
+      "projectId": 1,
+      "title": 8,
+      "title_text": "8. Coûts",
+      "description": "Les coûts associés"
+    },
+    {
+      "projectId": 1,
+      "title": 9,
+      "title_text": "9. Revenus",
+      "description": "Les sources de revenus"
+    }
+  ]
+}

front/MyINPulse-front/fake_data/open.sh

@@ -0,0 +1,2 @@
+#!/usr/bin/bash
+json-server --watch db.json --port 5000

front/MyINPulse-front/package.json

@@ -26,8 +26,15 @@
     "@types/node": "^22.10.7",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.20.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.14.0",
+    "jiti": "^2.4.2",
     "npm-run-all2": "^7.0.2",
+    "prettier": "3.5.0",
     "typescript": "~5.7.3",
+    "typescript-eslint": "^8.23.0",
     "vite": "^6.0.11",
     "vite-plugin-vue-devtools": "^7.7.0",
     "vue-tsc": "^2.2.0"

front/MyINPulse-front/src/App.vue

@@ -1,75 +1,15 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-import Header from './components/Header.vue';
-import ProjectComp from './components/Project-comp.vue';
-import CanvasView from './components/canvas/Lean-canvas.vue';
 import ErrorWrapper from "@/views/errorWrapper.vue";
 </script>
 
 <template>
-  <Header />
-  <error-wrapper></error-wrapper>
-  <div id="main">
-      <ProjectComp 
-        v-for="(project, index) in projects" 
-        :key="index"
-        :projectName="project.name"
-        :listName="project.members"
-      />
-    </div>
-  <div id="canvas">
-      <button @click="$router.push('/canvas')">Voir Canvas</button>
-  </div>
-  <RouterView />
+
+<Header />
+    <RouterLink to="/">Home</RouterLink> |
+    <RouterLink to="/canvas">Canvas</RouterLink>
+    <RouterView />
 </template>
 
-<style scoped>
 
-#canvas { /* My shit */
-  margin-top: 20px;
-}
-button {
-  padding: 10px 15px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  cursor: pointer;
-  border-radius: 5px;
-}
-button:hover {
-  background-color: #0056b3;
-}
 
-</style>
-
-<script lang="ts">
-//import Header from "@/components/Header.vue";
-//import ProjectComp from "@/components/Project-comp.vue";
-
-export default {
-  name: 'App',
-  components: {
-    Header,
-    ProjectComp,
-    CanvasView, // My shit
-  },
-  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>

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

@@ -0,0 +1,75 @@
+<template>
+    <div id="agenda">
+        <h3>Rendez-vous</h3>
+        <table>
+        <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,
+    }
+
+    const props = defineProps<{
+        projectRDV: rendezVous[]
+    }>();
+</script>
+
+<style scoped>
+ #agenda {   
+    padding: 20px;
+  }
+
+  /* Table Styling */
+ table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: Arial, sans-serif;
+    text-align: left;
+    margin-top: 20px;
+    border: 1px solid #ccc;
+  }
+  
+  /* Header Row (if exists) */
+  th {
+    background-color: #f4f4f4;
+    padding: 12px;
+    font-weight: bold;
+    border: 1px solid #ccc;
+  }
+  
+  /* 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/HeaderComponent.vue

@@ -1,26 +1,26 @@
 <template>
     <header>
-      <img src="./icons/logo inpulse.png" alt="INPulse" />
+        <img src="./icons/logo inpulse.png" alt="INPulse" />
     </header>
-  </template>
+</template>
 
-  <script lang="ts">
-  export default {
-    name: 'Header',
-  };
-  </script>
+<script lang="ts">
+export default {
+    name: "HeaderComponent",
+};
+</script>
 
-  <style scoped>
-  header img {
+<style scoped>
+header img {
     width: 100px;
-  }
+}
 
-  header{
+header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
     background-color: #fff;
     border-bottom: 2px solid #ddd;
-  }
-  </style>
+}
+</style>

front/MyINPulse-front/src/components/Project-comp.vue

@@ -1,60 +0,0 @@
-<template>
-    <div class="project">
-        <div class="project-header">
-            <h2>{{ projectName }}</h2>
-            <div class="project-buttons">
-                    <button class="info-btn"><a href="./project-example.html">more infos</a></button>
-                    <button class="contact-btn">Contact</button>
-            </div>
-        </div>
-        <div class="project-body">   
-            <ul>
-                <li v-for="(name, index) in listName" :key="index">{{ name }}</li>
-            </ul>    
-        </div>
-    </div>
-</template>
-
-
-<script lang="ts">
-export default {
-    name: 'Project',
-    props: {
-        projectName: String,
-        listName: Array as() => String[], //something isn't working
-    }
-}
-</script>
-
-<style scoped>
-.project {
-    background: linear-gradient(to right, #f4f4f4, #ffffff);
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    padding: 20px;
-    margin: 20px 0;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    font-family: Arial, sans-serif;
-  }
-  
-  /* Header Styling */
-  .project-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .project-header h2 {
-    font-size: 20px;
-    color: #333;
-    margin: 0;
-  }
-  
-  /* Button Container */
-  .project-buttons {
-    display: flex;
-    gap: 10px;
-  }
-
-
-</style>

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

@@ -0,0 +1,130 @@
+<template>
+    <div @click="goToLink" class="project">
+        <div class="project-header">
+            <h2 >{{ projectName }}</h2>
+            <div class="project-buttons">
+                <button class="contact-btn">Contact</button>
+            </div>
+        </div>
+        <div class="project-body">   
+            <ul>
+                <li v-for="(name, index) in listName" :key="index">{{ name }}</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import { useRouter } from 'vue-router'
+
+
+const props = defineProps<{
+    projectName: string;
+    listName: string[];
+    projectLink: string;
+}>();
+
+const router = useRouter();
+
+const goToLink = () => {
+  if (props.projectLink) {
+    router.push(props.projectLink);
+  }
+ 
+};
+</script>
+
+
+<style scoped>
+.project {
+    background: linear-gradient(to right, #f4f4f4, #ffffff);
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    font-family: Arial, sans-serif;
+  }
+  
+  /* Header Styling */
+  .project-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .project-header h2 {
+    font-size: 20px;
+    color: #333;
+    margin: 0;
+  }
+  
+  /* Button Container */
+  .project-buttons {
+    display: flex;
+    gap: 10px;
+  }
+
+
+  .info-btn {
+    background-color: #4CAF50;
+    color: #fff;
+  }
+  
+  .info-btn:hover {
+    background-color: #45a049;
+    transform: scale(1.05);
+  }
+  
+  .contact-btn {
+    background-color: #007BFF;
+    color: #fff;
+  }
+  
+  .contact-btn:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+  }
+  
+
+
+
+  .project-body {
+    margin-top: 15px;
+  }
+  
+  .project-body p {
+    font-size: 16px;
+    color: #555;
+    margin-bottom: 10px;
+  }
+  
+  .project-body ul {
+    list-style-type: disc;
+    margin: 0;
+    padding-left: 20px;
+  }
+  
+  .project-body ul li {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.6;
+  }
+
+
+  button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+  button:hover {
+    background-color: #0056b3;
+  }
+
+</style>

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>9. Avantage déloyal</h3>
-        <p>Ce qui ne peut pas être facilement copié ou acheté</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>5. Canaux</h3>
-        <p>Chemins d'accès aux clients</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -0,0 +1,326 @@
+<template>
+  <div :class="['cell', { expanded }]" @click="handleClick">
+    <h3>{{ title_text }}</h3>
+
+    <div class="section-bloc" v-for="(desc, index) in currentDescriptions" :key="index">
+      <!-- Mode affichage -->
+      <template v-if="!isEditing[index]">
+        <div class="description">
+          <p>{{ desc }}</p>
+        </div>
+        <div class="button-container">
+          <button v-if="expanded" @click.stop="startEditing(index)" class="edit-button">Éditer</button>
+        </div>
+      </template>
+
+      <!-- Mode édition -->
+      <template v-else>
+        <textarea v-model="editedDescriptions[index]" class="edit-input"></textarea>
+        <div class="button-container">
+          <button @click.stop="saveEdit(index)" class="save-button">Enregistrer</button>
+          <button @click.stop="cancelEdit(index)" class="cancel-button">Annuler</button>
+        </div>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps } from "vue";
+import axios from "axios";
+
+const IS_MOCK_MODE = true; 
+
+const props = defineProps<{
+  projectId: number;
+  title: number;
+  title_text: string;
+  description: string;
+}>();
+
+const expanded = ref(false);
+const currentDescriptions = ref<string[]>([]);
+const editedDescriptions = ref<string[]>([]);
+const isEditing = ref<boolean[]>([]);
+
+
+/*
+const fetchData = async () => {
+  try {
+    const response = await axios.get("http://localhost:5000/data"); // Met à jour l'URL
+    if (response.data.length > 0) {
+      currentDescription.value = response.data[0].canva_data;
+      editedDescription.value = response.data[0].canva_data;
+    } else {
+      console.warn("Aucune donnée reçue.");
+    }
+  } catch (error) {
+    console.error("Erreur lors de la récupération des données :", error);
+  }
+};
+*/
+
+// Fonction de simulation de l'API
+const mockFetch = async (projectId: number, title: number, date: string) => {
+  console.log(`Mock fetch pour projectId: ${projectId}, title: ${title}, date: ${date}`);
+
+  return new Promise<{ txt: string }[]>((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { txt: "Ceci est une description 1 pour tester the damn front, Why are u still reading dumbass this is just some nonsense sentence XD" },
+        { txt: "Ceci est une description 1 pour tester the damn front, Bruh are u still here?" },
+        { txt: "Ceci est une description 1 pour tester the damn front, .-. BRUH" }
+      ]);
+    }, 500); // Simule un délai réseau de 500ms
+  });
+};
+
+// Fonction fetchData avec possibilité d'utiliser le mock
+const fetchData = async (projectId: number, title: number, date: string, useMock = false) => {
+  try {
+    const responseData = useMock
+      ? await mockFetch(projectId, title, date)
+      : (await axios.get<{ txt: string }[]>(
+          `http://localhost:5000/shared/projects/lcsection/${projectId}/${title}/${date}`
+        )).data;
+
+    if (responseData.length > 0) {
+      currentDescriptions.value = responseData.map((item) => item.txt);
+      editedDescriptions.value = [...currentDescriptions.value];
+      isEditing.value = Array(responseData.length).fill(false);
+    } else {
+      console.warn("Aucune donnée reçue.");
+    }
+  } catch (error) {
+    console.error("Erreur lors de la récupération des données :", error);
+  }
+};
+
+// Utilisation du mock dans handleClick pour tester sans serveur
+const handleClick = async () => {
+  if (!expanded.value) {
+    await fetchData(props.projectId, props.title, "NaN", IS_MOCK_MODE); // true pour activer le mock
+  } else if (!isEditing.value.includes(true)) {
+    // Réinitialiser les descriptions si aucune édition n'est en cours
+    currentDescriptions.value = [props.description];
+    editedDescriptions.value = [props.description];
+  }
+
+  if (!isEditing.value.includes(true)) {
+    expanded.value = !expanded.value;
+  }
+};
+
+
+const startEditing = (index: number) => {
+  isEditing.value[index] = true;
+};
+
+/*
+const saveEdit = async (index: number) => {
+  try {
+    const id = index + 1; // À adapter selon l'ID réel des données
+    await axios.put(`http://localhost:5000/data/${id}`, {
+      canva_data: editedDescriptions.value[index]
+    });
+
+    // Mettre à jour l'affichage local après la mise à jour réussie
+    currentDescriptions.value[index] = editedDescriptions.value[index];
+    isEditing.value[index] = false;
+  } catch (error) {
+    console.error("Erreur lors de la mise à jour des données :", error);
+  }
+};
+*/
+
+// Fonction de mock pour l'enregistrement
+const mockSaveEdit = async (index: number) => {
+  try {
+    const id = index + 1; // À adapter selon l'ID réel des données
+    console.log(`Mock save pour l'ID ${id} avec la description : ${editedDescriptions.value[index]}`);
+
+    // Simuler un délai d'enregistrement comme une requête réseau
+    await new Promise((resolve) => setTimeout(resolve, 500)); // Simulation de délai réseau
+
+    // Mettre à jour l'affichage local après la mise à jour réussie
+    currentDescriptions.value[index] = editedDescriptions.value[index];
+    isEditing.value[index] = false;
+  } catch (error) {
+    console.error("Erreur lors de la mise à jour des données mockées :", error);
+  }
+};
+
+// Utilisation de `mockSaveEdit` au lieu de `saveEdit` dans `handleClick` ou tout autre endroit
+const saveEdit = async (index: number) => {
+  if (IS_MOCK_MODE) {
+    await mockSaveEdit(index);
+  } else {
+    try {
+      const id = index + 1;
+      await axios.put(`http://localhost:5000/data/${id}`, {
+        canva_data: editedDescriptions.value[index]
+      });
+
+      // Mettre à jour l'affichage local après la mise à jour réussie
+      currentDescriptions.value[index] = editedDescriptions.value[index];
+      isEditing.value[index] = false;
+    } catch (error) {
+      console.error("Erreur lors de la mise à jour des données :", error);
+    }
+  }
+};
+
+const cancelEdit = (index: number) => {
+  editedDescriptions.value[index] = currentDescriptions.value[index];
+  isEditing.value[index] = false;
+};
+</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;
+}
+
+.cell:not(.expanded):hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
+}
+
+.cell h3 {
+  font-size: 20px;
+  font-weight: 500;
+  /*margin-bottom: 10px;*/
+}
+
+.cell p {
+  font-size: 14px;
+  color: #666;
+}
+
+.expanded {
+  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 {
+  display: flex;
+  align-items: center;  /* Centre verticalement */
+  justify-content: center; /* Centre horizontalement */
+  text-align: center; /* Centre le texte à l'intérieur */
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  margin-top: 10px;
+  margin-left: 2%;
+}
+
+.description + .p {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.edit-input {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-top: 10px;
+  box-sizing: border-box;
+  margin-left: 2%;
+}
+
+
+.button-container {
+  display: block;
+  margin-top: 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.section-bloc ,.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;
+}
+
+.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;
+}
+
+</style>

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>7. Structure des coûts</h3>
-        <p>Coûts d'acquisition, distribution, hébergement, employés...</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -1,37 +0,0 @@
-<template>
-    <header>
-      <img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
-      <div class="header-buttons">
-        <div class="contact-menu">
-          <button class="contact-button" @click="toggleDropdown">Contact</button>
-          <div class="contact-dropdown" v-show="isDropdownOpen">
-            <button>Contact All</button>
-            <button>Contact Person 1</button>
-            <button>Contact Person 2</button>
-            <button>Contact Person 3</button>
-          </div>
-          <div class="return"><a href="/">return to list project</a></div>
-        </div>
-      </div>
-    </header>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-        isDropdownOpen: false
-      };
-    },
-    methods: {
-      toggleDropdown() {
-        this.isDropdownOpen = !this.isDropdownOpen;
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -0,0 +1,120 @@
+<template>
+  <header>
+    <img src="../icons/logo inpulse.png" alt="INPulse Logo">
+    <div class="header-buttons">
+      <div class="menu">
+        <button class="contact-button" @click="toggleDropdown">Contact</button>
+        <div class="contact-dropdown" v-bind:class="{ 'dropdown-visible': isDropdownOpen }">
+          <button @click="contactAll">Contact All</button>
+          <button v-for="(email, index) in entrepreneurEmails" :key="index">
+            {{ email }}
+          </button>
+        </div>
+        <button class="return-button">
+            <RouterLink to="/">Return to list project</RouterLink>
+        </button>
+      </div>
+    </div>
+  </header>
+</template>
+
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import axios from "axios";
+
+const isDropdownOpen = ref(false);
+const entrepreneurEmails = ref([]);
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value;
+  console.log("Dropdown toggled:", isDropdownOpen.value); // for debug purposes
+};
+
+const fetchEntrepreneurs = async () => {
+  try {
+    const response = await axios.get("http://localhost:5000/entrepreneurs");
+    entrepreneurEmails.value = response.data.map((e: { email: string }) => e.email);
+  } catch (error) {
+    console.error("Erreur lors de la récupération des entrepreneurs:", error);
+  }
+};
+
+const contactAll = () => {
+  alert("Contacter tous les entrepreneurs : " + entrepreneurEmails.value.join(", "));
+};
+
+onMounted(fetchEntrepreneurs);
+</script>
+
+
+<style scoped>
+@import "@/components/canvas/style-project.css";
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 10px;
+}
+
+.header-buttons {
+  display: flex;
+  align-items: flex-start;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.contact-button, .return-button {
+  background-color: #000;
+  color: white;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: center;
+}
+
+.return-button a {
+  color: white;
+  text-decoration: none;
+}
+
+.contact-dropdown {
+  display: none;
+  position: absolute;
+  background-color: white;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  margin-top: 5px;
+  z-index: 1000;
+}
+
+.contact-dropdown button {
+  display: block;
+  width: 100%;
+  padding: 5px;
+  text-align: left;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.contact-dropdown button:hover {
+  background-color: #f0f0f0;
+}
+
+.dropdown-visible {
+  display: block;
+}
+
+header img {
+  width: 100px;
+  height: auto;
+}
+</style>

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>8. Indicateurs clés</h3>
-        <p>Activités clés que vous souhaitez évaluer</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -1,42 +0,0 @@
-<template>
-    <div class="canvas">
-      <div class="row">
-        <Probleme />
-        <Segments />
-      </div>
-      <div class="row">
-        <Solution />
-        <Valeur />
-        <Canaux />
-      </div>
-      <div class="row">
-        <Couts />
-        <Revenus />
-      </div>
-      <div class="row">
-        <Indicateurs />
-        <Avantage />
-      </div>
-    </div>
-  </template>
-  
-  <script>
-  import Probleme from "./Probleme.vue";
-  import Segments from "./Segments.vue";
-  import Solution from "./Solution.vue";
-  import Valeur from "./Valeur.vue";
-  import Canaux from "./Canaux.vue";
-  import Revenus from "./Revenus.vue";
-  import Couts from "./Couts.vue";
-  import Indicateurs from "./Indicateurs.vue";
-  import Avantage from "./Avantage.vue";
-  
-  export default {
-    components: { Probleme, Segments, Solution, Valeur, Canaux, Revenus, Couts, Indicateurs, Avantage }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="canvas">
+    <CanvasItem
+      v-for="(item, index) in items"
+      :key="index"
+      :title="item.title"
+      :title_text="item.title_text"
+      :description="item.description"
+      :projectId="item.projectId"
+      :class="item.class"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import CanvasItem from "@/components/canvas/CanvasItem.vue";
+
+const items = ref([
+  { projectId: 1, title: 1, title_text: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
+  { projectId: 1, title: 2, title_text: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
+  { projectId: 1, title: 3, title_text: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
+  { projectId: 1, title: 4, title_text: "4. Solution", description: "Les solutions proposées", class: "Solution" },
+  { projectId: 1, title: 5, title_text: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" },
+  { projectId: 1, title: 6, title_text: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
+  { projectId: 1, title: 7, title_text: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
+  { projectId: 1, title: 8, title_text: "8. Coûts", description: "Les coûts associés", class: "Couts" },
+  { projectId: 1, title: 9, title_text: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
+]);
+
+</script>
+
+<style scoped>
+@import "@/components/canvas/style-project.css";
+
+.canvas {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  gap: 10px;
+  padding: 10px;
+  max-width: 1200px;
+  margin: 20px auto;
+  background-color: #fff; 
+  position: relative;
+  height: 80vh;
+  overflow: auto;
+}
+
+.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; }
+</style>

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-      <h3>1. Problème</h3>
-      <p>3 problèmes essentiels à résoudre pour le client</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>6. Sources de revenus</h3>
-        <p>Modèle de revenus, durée, revenus espérés, marge espérée</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>2. Segments de clients</h3>
-        <p>Clients cibles</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>4. Solution</h3>
-        <p>3 fonctionnalités essentielles pour le client</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

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

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>3. Proposition de valeur unique</h3>
-        <p>Message simple, clair et persuasif expliquant en quoi votre produit est différent et mérite d'être acheté</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/style-project.css

@@ -4,15 +4,6 @@ body {
     padding: 10px;
   }
   
-  .canvas {
-    display: flex;
-    flex-direction: column;
-    max-width: 1200px;
-    margin: 20px auto;
-    border: 2px dashed #d33;
-    background: #fff;
-  }
-  
   .row {
     display: flex;
   }
@@ -58,14 +49,8 @@ body {
 
   h1 img {
     height: 80px;
-  }
-
-  .canvas {
-    max-width: 1200px;
-    margin: 20px auto;
-    padding: 20px;
-    border: 2px dashed #d33;
-    background-color: #fff;
+    margin: 40px;
+    text-align: center;
   }
 
   .row {
@@ -73,14 +58,6 @@ body {
     margin-bottom: 10px;
   }
 
-  .cell {
-    flex: 1;
-    border: 1px solid #ddd;
-    padding: 20px;
-    text-align: center;
-    background-color: #f1f1f1;
-  }
-
   #ade {
     max-width: 1200px;
     margin: 20px auto;
@@ -117,11 +94,6 @@ body {
     position: relative;
   }
 
-  .expanded {
-    transform: scale(1.2); /* L'élément reste agrandi */
-    transition: transform 0.3s ease; /* Animation fluide */
-  }
-
   .contact-button, .return {
     padding: 10px 15px;
     border: none;

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

@@ -1,17 +1,43 @@
 <script setup lang="ts">
-const props = defineProps(['data']);
+import { color } from "@/services/popupDisplayer.ts";
+import type { PropType } from "vue";
+
+defineProps({
+    errorMessage: {
+        type: Object as PropType<string>,
+        required: true,
+    },
+    errorColor: {
+        type: Object as PropType<color>,
+        default: color.Red,
+    },
+});
 </script>
 
 <template>
-  <div :class='["red", "yellow", "blue", "green"][data.type]' class="error-modal">
-    <p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][data.type]}}</p>
-    <p>{{data.errorMessage}}</p>
-    <div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][data.type]'></div>
-  </div>
+    <div
+        :class="['red', 'yellow', 'blue', 'green'][errorColor]"
+        class="error-modal"
+    >
+        <p>
+            {{
+                ["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]
+            }}
+        </p>
+        <p>{{ errorMessage }}</p>
+        <div
+            class="loading"
+            :class="
+                ['red-loader', 'yellow-loader', 'blue-loader', 'green-loader'][
+                    errorColor
+                ]
+            "
+        ></div>
+    </div>
 </template>
 
 <style scoped>
-  .error-modal{
+.error-modal {
     margin-bottom: 1em;
     padding: 1em;
     border-radius: 1em;
@@ -19,41 +45,45 @@ const props = defineProps(['data']);
     overflow: hidden;
     position: relative;
     animation: disappear 5s linear forwards;
-  }
+}
 
-  .red{
+.red {
     background-color: #ee6055;
     color: white;
-  }
-  .red-loader {
+}
+
+.red-loader {
     background-color: #fa8383;
-  }
+}
 
-  .yellow{
-    background-color: #FF9D23;
-     color: white;
-   }
-  .yellow-loader{
+.yellow {
+    background-color: #ff9d23;
+    color: white;
+}
+
+.yellow-loader {
     background-color: #ffbf81;
-  }
+}
 
-  .blue {
+.blue {
     background-color: #809bce;
     color: white;
-  }
-  .blue-loader{
-    background-color: #95b8d1;
-  }
+}
 
-  .green {
+.blue-loader {
+    background-color: #95b8d1;
+}
+
+.green {
     background-color: green;
     color: white;
-  }
-  .green-loader {
-    background-color: darkgreen;
-  }
+}
 
-  .loading {
+.green-loader {
+    background-color: darkgreen;
+}
+
+.loading {
     box-sizing: border-box;
     position: absolute;
     padding: 0;
@@ -62,33 +92,33 @@ const props = defineProps(['data']);
     height: 1em;
     width: 0;
     animation: loading 4s linear forwards;
-  }
+}
 
-  /* Animation for the loading bar */
-  @keyframes loading {
+/* Animation for the loading bar */
+@keyframes loading {
     0% {
-      width: 100%;
+        width: 100%;
     }
     100% {
-      width: 0;
+        width: 0;
     }
-  }
+}
 
-  @keyframes disappear {
+@keyframes disappear {
     0% {
-      height: 100px;
-      padding: 1em;
-      margin: 1em;
+        height: 100px;
+        padding: 1em;
+        margin: 1em;
     }
     80% {
-      height: 100px;
-      padding: 1em;
-      margin: 1em;
+        height: 100px;
+        padding: 1em;
+        margin: 1em;
     }
     100% {
-      height: 0;
-      margin: 0;
-      padding: 0;
+        height: 0;
+        margin: 0;
+        padding: 0;
     }
-  }
+}
 </style>

front/MyINPulse-front/src/main.ts

@@ -1,30 +1,30 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router/router.ts'
-import {createPinia} from "pinia";
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import AuthStorePlugin from './plugins/authStore';
-import keycloakService from './services/keycloak';
-import {useAuthStore} from "@/stores/authStore.ts";
-let store: any;
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router/router.ts";
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import keycloakService from "./services/keycloak";
+import { type AuthStore, useAuthStore } from "@/stores/authStore.ts";
+
+let store: AuthStore;
 
 keycloakService.CallInit(() => {
     try {
-        const app = createApp(App)
+        const app = createApp(App);
 
         // Setup pinia store, allowing user to keep logged in status after refresh
         const pinia = createPinia();
         pinia.use(piniaPluginPersistedstate);
         app.use(pinia);
-        app.use(AuthStorePlugin, { pinia });
         store = useAuthStore();
-        app.use(router)
+        keycloakService.CallInitStore(store);
+        app.use(router);
 
-        app.mount('#app');
+        app.mount("#app");
     } catch (e) {
-        console.error("Error while initiating Keycloak.")
-        console.error(e)
-        createApp(App).mount('#app');
+        console.error("Error while initiating Keycloak.");
+        console.error(e);
+        createApp(App).mount("#app");
     }
 
 })
@@ -74,4 +74,4 @@ app.use(VueKeyCloak,{
 
 
 
-export {store};
+export { store };

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

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,10 +9,16 @@ const router = createRouter({
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/test.vue'),
+      component: () => import('../views/testComponent.vue'),
     },
 
-      // route pour les canvas (made by adnane), in fact the two vue apps are separated for now
+    {
+      path: '/',
+      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',
@@ -21,4 +27,4 @@ const router = createRouter({
   ],
 })
 
-export default router
+export default router;

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

@@ -1,31 +1,36 @@
-import axios from "axios";
-import {store} from "@/main.ts";
-import {addNewMessage, color} from "@/services/popupDisplayer.ts";
+import axios, { type AxiosError, type AxiosResponse } from "axios";
+import { store } from "@/main.ts";
+import { addNewMessage, color } from "@/services/popupDisplayer.ts";
 
 const axiosInstance = axios.create({
     baseURL: import.meta.env.VITE_BACKEND_URL,
     headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
     },
 });
 
 axiosInstance.interceptors.response.use(
-    response => response, // Directly return successful responses.
-    async error => {
+    (response) => response, // Directly return successful responses.
+    async (error) => {
         const originalRequest = error.config;
-        if (error.response.status === 401 && !originalRequest._retry && store.authenticated) {
+        if (
+            error.response.status === 401 &&
+            !originalRequest._retry &&
+            store.authenticated
+        ) {
             originalRequest._retry = true; // Mark the request as retried to avoid infinite loops.
             try {
                 await store.refreshUserToken();
                 // Update the authorization header with the new access token.
-                axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${store.user.token}`;
+                axiosInstance.defaults.headers.common["Authorization"] =
+                    `Bearer ${store.user.token}`;
                 return axiosInstance(originalRequest); // Retry the original request with the new access token.
             } catch (refreshError) {
                 // Handle refresh token errors by clearing stored tokens and redirecting to the login page.
-                console.error('Token refresh failed:', refreshError);
-                localStorage.removeItem('accessToken');
-                localStorage.removeItem('refreshToken');
-                window.location.href = '/login';
+                console.error("Token refresh failed:", refreshError);
+                localStorage.removeItem("accessToken");
+                localStorage.removeItem("refreshToken");
+                window.location.href = "/login";
                 return Promise.reject(refreshError);
             }
         }
@@ -34,23 +39,29 @@ axiosInstance.interceptors.response.use(
 );
 
 // TODO: spawn a error modal
-function defaultApiErrorHandler(err: string){
-    addNewMessage(err, color.Red);
+function defaultApiErrorHandler(err: AxiosError) {
+    addNewMessage(err.message, color.Red);
 }
 
-function defaultApiSuccessHandler(response: any){
-    addNewMessage(response.data, color.green)
-}
-function callApi(endpoint: string, onSuccessHandler?: any, onErrorHandler?: any): void {
-    axiosInstance.get(endpoint).then(
-        onSuccessHandler == null ? defaultApiSuccessHandler : onSuccessHandler
-    ).catch(
-        (err) => {
-            onErrorHandler == null ? defaultApiErrorHandler(err): onErrorHandler(err);
-            throw err;
-        }
-    )
+function defaultApiSuccessHandler(response: AxiosResponse) {
+    addNewMessage(response.data, color.Green);
 }
 
+function callApi(
+    endpoint: string,
+    onSuccessHandler?: (response: AxiosResponse) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .get(endpoint)
+        .then(
+            onSuccessHandler == null
+                ? defaultApiSuccessHandler
+                : onSuccessHandler
+        )
+        .catch(
+            onErrorHandler == null ? defaultApiErrorHandler : onErrorHandler
+        );
+}
 
-export {callApi}
+export { callApi };

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

@@ -1,33 +1,31 @@
-import Keycloak from 'keycloak-js';
+import Keycloak from "keycloak-js";
+import type { AuthStore } from "@/stores/authStore.ts";
 
 const options = {
     url: import.meta.env.VITE_KEYCLOAK_URL,
     clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
-    realm: import.meta.env.VITE_KEYCLOAK_REALM
-}
-
+    realm: import.meta.env.VITE_KEYCLOAK_REALM,
+};
 
 const keycloak = new Keycloak(options);
 let authenticated: boolean | undefined;
 let store = null;
 
-async function login(){
+async function login() {
     try {
-        await keycloak.login() // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
+        await keycloak.login(); // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
         return keycloak;
     } catch (error) {
-        console.log(error)
+        console.log(error);
     }
 }
 
-async function signup(){
+async function signup() {
     try {
-        await keycloak.login(
-            {action: "register"}
-        ) // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
+        await keycloak.login({ action: "register" }); // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
         return keycloak;
     } catch (error) {
-        console.log(error)
+        console.log(error);
     }
 }
 
@@ -42,31 +40,33 @@ async function init(onInitCallback: () => void) {
             onLoad: "check-sso",
             silentCheckSsoRedirectUri: `${location.origin}/silent-check-sso.htm`,
             responseMode: "query",
-        })
-        onInitCallback()
+        });
+        onInitCallback();
     } catch (error) {
-        console.error("Keycloak init failed")
-        console.error(error)
+        console.error("Keycloak init failed");
+        console.error(error);
     }
-};
+}
 
 /**
  * Initializes store with Keycloak user data
  *
  */
-async function initStore(storeInstance: any) {
+async function initStore(storeInstance: AuthStore) {
     try {
-        store = storeInstance
-        console.log(keycloak)
-        await store.initOauth(keycloak)
+        store = storeInstance;
+        console.log(keycloak);
+        await store.initOauth(keycloak);
 
         // Show alert if user is not authenticated
-        if (!authenticated) { console.warn("not authenticated") }
+        if (!authenticated) {
+            console.warn("not authenticated");
+        }
     } catch (error) {
-        console.error("Keycloak init failed")
-        console.error(error)
+        console.error("Keycloak init failed");
+        console.error(error);
     }
-};
+}
 
 /**
  * Logout user
@@ -83,7 +83,7 @@ async function refreshToken() {
         await keycloak.updateToken(480);
         return keycloak;
     } catch (error) {
-        console.error('Failed to refresh token');
+        console.error("Failed to refresh token");
         console.error(error);
     }
 }

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

@@ -1,19 +1,43 @@
-import {ref} from "vue";
-enum color {Red, Yellow, Blue, green}
+import { ref, type Ref } from "vue";
 
-function addNewMessage(errorMessage: string, type?: color, timeout?: number){
-    if (timeout == null){
+enum color {
+    Red,
+    Yellow,
+    Blue,
+    Green,
+}
+
+type ErrorMessageContent = {
+    message: string;
+    color: color;
+    id: number;
+    timeout: number;
+};
+
+let id: number = 0;
+const getId = () => {
+    id = id + 1;
+    return id;
+};
+
+function addNewMessage(errorMessage: string, type?: color, timeout?: number) {
+    if (timeout == null) {
         timeout = 5000;
     }
-    if (type == null){
+    if (type == null) {
         type = color.Red;
     }
 
-    const data = {errorMessage: errorMessage, timeout: timeout, type: type, uid: Math.random()*100000};
-    errorList.value.push(data)
-    setTimeout(() => errorList.value.slice(0, 1), timeout)
+    const data: ErrorMessageContent = {
+        message: errorMessage,
+        timeout: timeout,
+        color: type,
+        id: getId(),
+    };
+    errorList.value.push(data);
+    setTimeout(() => errorList.value.slice(0, 1), timeout);
 }
 
-const errorList: any= ref([])
+const errorList: Ref<ErrorMessageContent[]> = ref([]);
 
-export {addNewMessage, errorList, color}
+export { addNewMessage, errorList, color, type ErrorMessageContent };

front/MyINPulse-front/src/stores/authStore.ts

@@ -1,54 +1,61 @@
 import { defineStore } from "pinia";
-import keycloakService from '@/services/keycloak';
+import keycloakService from "@/services/keycloak";
 import type Keycloak from "keycloak-js";
-export const useAuthStore = defineStore("storeAuth", {
+
+const useAuthStore = defineStore("storeAuth", {
     state: () => {
         return {
-            testv: true,
             authenticated: false,
             user: {
                 token: "",
                 refreshToken: "",
                 username: "",
             },
-        }
+        };
     },
     persist: true,
     getters: {},
     actions: {
         // Initialize Keycloak OAuth
         async initOauth(keycloak: Keycloak, clearData = true) {
-            if(clearData) { await this.clearUserData(); }
+            if (clearData) {
+                await this.clearUserData();
+            }
 
             this.authenticated = !!keycloak.authenticated; // the !! removes undefined
-            if (this.authenticated && keycloak.token && keycloak.idTokenParsed && keycloak.refreshToken){
+            if (
+                this.authenticated &&
+                keycloak.token &&
+                keycloak.idTokenParsed &&
+                keycloak.refreshToken
+            ) {
                 this.user.username = keycloak.idTokenParsed.given_name;
                 this.user.token = keycloak.token;
                 this.user.refreshToken = keycloak.refreshToken;
             }
         },
-        async login(){
+        async login() {
             try {
                 const keycloak = await keycloakService.callLogin();
-                if (keycloak)
-                    await this.initOauth(keycloak);
+                if (keycloak) await this.initOauth(keycloak);
             } catch (error) {
-                console.log(error)
+                console.log(error);
             }
         },
         async signup() {
             try {
                 const keycloak = await keycloakService.callSignup();
-                if (keycloak)
-                    await this.initOauth(keycloak);
+                if (keycloak) await this.initOauth(keycloak);
             } catch (error) {
-                console.log(error)
+                console.log(error);
             }
         },
         // Logout user
         async logout() {
             try {
-                await keycloakService.CallLogout(import.meta.env.VITE_APP_URL + "/test");
+                await keycloakService.CallLogout(
+                    import.meta.env.VITE_APP_URL + "/test"
+                );
                 await this.clearUserData();
             } catch (error) {
                 console.error(error);
@@ -58,23 +65,23 @@ export const useAuthStore = defineStore("storeAuth", {
         async refreshUserToken() {
             try {
                 const keycloak = await keycloakService.CallTokenRefresh();
-                if (keycloak)
-                    await this.initOauth(keycloak, false);
+                if (keycloak) await this.initOauth(keycloak, false);
             } catch (error) {
                 console.error(error);
             }
         },
-        test() {
-            this.testv = !this.testv;
-        },
         // Clear user's store data
         clearUserData() {
             this.authenticated = false;
             this.user = {
                 token: "",
-                    refreshToken: "",
-                    username: "",
+                refreshToken: "",
+                username: "",
             };
-        }
-    }
+        },
+    },
 });
+
+type AuthStore = ReturnType<typeof useAuthStore>;
+
+export { useAuthStore, type AuthStore };

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

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

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

@@ -0,0 +1,68 @@
+<template>
+    <Header />
+    <error-wrapper></error-wrapper>
+    <div id="container"> 
+      <div id="main">
+          <ProjectComp 
+            v-for="(project, index) in projects" 
+            :key="index"
+            :projectName="project.name"
+            :listName="project.members"
+            :projectLink="project.link"
+          />
+      </div>
+  
+      <Agenda :projectRDV="rendezVous" />
+    </div>
+    
+</template>
+
+<script setup lang="ts">
+import Header from '../components/HeaderComponent.vue';
+import Agenda from "../components/Agenda.vue"
+import ProjectComp from '../components/ProjectComponent.vue';
+
+import { ref } from "vue";
+
+const projects = ref([
+  {
+    name: "Projet Alpha",
+    link: "/canvas", // to test
+    members: ["Alice", "Bob", "Charlie"],
+  },
+  {
+    name: "Projet Beta",
+    link: "./canvas", // to test
+    members: ["David", "Eve", "Frank"],
+  },
+]);
+
+const rendezVous = ref([
+  { projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
+  { projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },
+]);
+
+</script>
+
+<style scoped>
+
+#container {
+    margin: 0;
+    display: grid;
+    grid-template-columns: 3fr 1fr; /* Main body takes 3/4, agenda 1/4 */
+    height: 100vh; /* Full viewport height */
+}
+
+button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+button:hover {
+  background-color: #0056b3;
+}
+
+</style>

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

@@ -1,12 +1,18 @@
-<!-- src/views/CanvasView.vue -->
 <template>
+    <div>
+      <header>
+        <HeaderCanvas />
+      </header>
+    </div>
     <div>
       <h1>Page Canvas</h1>
       <LeanCanvas />
     </div>
-  </template>
+</template>
   
-  <script setup lang="ts">
-  import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
-  </script>
+<script setup lang="ts">
+// @ts-ignore
+import HeaderCanvas from "../components/canvas/HeaderCanvas.vue";
+import LeanCanvas from '../components/canvas/LeanCanvas.vue';
+</script>
   

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

@@ -1,20 +1,25 @@
 <script setup lang="ts">
-
-import {errorList} from "@/services/popupDisplayer.ts";
+import { errorList } from "@/services/popupDisplayer.ts";
 import ErrorModal from "@/components/errorModal.vue";
 </script>
 
 <template>
-<div class="error-wrapper">
-  <error-modal v-for="elm in errorList" :data=elm></error-modal>
-</div>
+    <div class="error-wrapper">
+        <error-modal
+            v-for="elm in errorList"
+            :key="elm.id"
+            :error-message="elm.message"
+            :error-color="elm.color"
+        />
+    </div>
 </template>
 
 <style scoped>
+
 .error-wrapper{
   position: absolute;
   left: 70%;
-  //background-color: blue;
+  /*background-color: blue;*/
   height: 100%;
   width: 30%;
 

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

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import {store} from "../main.ts";
-import {callApi} from "@/services/api.ts";
-import ErrorModal from "@/components/errorModal.vue";
-import {errorList} from "@/services/popupDisplayer.ts";
-import TempModal from "@/components/temp-modal.vue";
-import ErrorWrapper from "@/App.vue";
-function addResToTable(id: any){
-  return (req: any) => {
-    console.log(req)
-  }
-}
-
-
-</script>
-
-<template>
-  <h1>Test page</h1>
-  <table class="test"  style="width:100%">
-    <tbody>
-    <tr>
-      <td>Is Currently Authenticated ? </td>
-      <td>{{store.authenticated}}</td>
-      <td><button @click="store.login">Login</button></td>
-      <td><button @click="store.logout">Logout</button></td>
-      <td><button @click="store.signup">Signup</button></td>
-    </tr>
-    <tr>
-      <td>current token</td>
-      <td>{{store.user.token}}</td>
-      <td><button @click="store.refreshUserToken">Refresh</button></td>
-    </tr>
-    <tr>
-      <td>Current refresh token</td>
-      <td>{{store.user.refreshToken}}</td>
-    </tr>
-    <tr>
-      <td>Entrepreneur API call</td>
-      <td><button @click="callApi('random')">call</button></td>
-      <td>res</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>Admin API call</td>
-      <td><button @click="callApi('random2')">call</button></td>
-      <td>res</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>Unauth API call</td>
-      <td><button @click="callApi('random3')">call</button></td>
-      <td>res</td>
-      <td id="3"></td>
-    </tr>
-    </tbody>
-  </table>
-  <temp-modal></temp-modal>
-</template>
-
-<style scoped>
-table {
-    width: 100px;
-  table-layout: fixed
-  }
-  tr {
-    width: 100%;
-    height: 100%;
-  }
-  td {
-    border: solid 1px black;
-    width: 20%;
-    height: 100%;
-    overflow: hidden;
-  }
-</style>

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

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { store } from "../main.ts";
+import { callApi } from "@/services/api.ts";
+</script>
+
+<template>
+    <h1>Test page</h1>
+    <table class="test" style="width: 100%">
+        <tbody>
+            <tr>
+                <td>Is Currently Authenticated ?</td>
+                <td>{{ store.authenticated }}</td>
+                <td>
+                    <button @click="store.login">Login</button>
+                </td>
+                <td>
+                    <button @click="store.logout">Logout</button>
+                </td>
+                <td>
+                    <button @click="store.signup">Signup</button>
+                </td>
+            </tr>
+            <tr>
+                <td>current token</td>
+                <td>{{ store.user.token }}</td>
+                <td>
+                    <button @click="store.refreshUserToken">Refresh</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Current refresh token</td>
+                <td>{{ store.user.refreshToken }}</td>
+            </tr>
+            <tr>
+                <td>Entrepreneur API call</td>
+                <td>
+                    <button @click="callApi('random')">call</button>
+                </td>
+                <td>res</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td>Admin API call</td>
+                <td>
+                    <button @click="callApi('random2')">call</button>
+                </td>
+                <td>res</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td>Unauth API call</td>
+                <td>
+                    <button @click="callApi('random3')">call</button>
+                </td>
+                <td>res</td>
+                <td id="3"></td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style scoped>
+table {
+    width: 100px;
+    table-layout: fixed;
+}
+
+tr {
+    width: 100%;
+    height: 100%;
+}
+
+td {
+    border: solid 1px black;
+    width: 20%;
+    height: 100%;
+    overflow: hidden;
+}
+</style>