fix: emptyed the app.vue and did some code reorganisation

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

@@ -3,7 +3,7 @@
         <h3>Rendez-vous</h3>
         <table>
         <tbody>
-            <tr v-for=" (p, index) in projectRDV" :key="p" >
+            <tr v-for=" (p, index) in projectRDV" :key="index" >
                 <td>{{ p.projectName }} </td> <td>{{ p.date }}</td> <td>{{ p.lieu }}</td>
             </tr>
         </tbody>
@@ -11,7 +11,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
     import { defineProps } from "vue";
 
     interface rendezVous{
@@ -23,10 +23,53 @@
     const props = defineProps<{
         projectRDV: rendezVous[]
     }>();
-
 </script>
 
-<style>
+<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/Project-comp.vue

@@ -110,6 +110,16 @@ const goToLink = () => {
   }
 
 
-
+  button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+  button:hover {
+    background-color: #0056b3;
+  }
 
 </style>