list des upcoming appointments prettier

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

@@ -1,7 +1,7 @@
 <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 />
@@ -23,24 +23,39 @@ 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.");
+        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("username :", store.user.username);
-  console.log("token  :", store.user.token);
+    //console.log("token  :", store.user.token);
     callApi(
         "/admin/appointments/upcoming",
         (response) => {
             appointments.value = response.data.map(
-        (item: any) => new Appointment(item)
+                (item: AppointmentResponse) => new Appointment(item)
             );
         },
         (error) => {
-      console.error("Erreur lors de la récupération des rendez-vous :", error);
+            console.error(
+                "Erreur lors de la récupération des rendez-vous :",
+                error
+            );
         }
     );
 }