I am working on implementing the wallet.

src/views/main/Header.vue

@@ -82,14 +82,9 @@
               </v-list-item>
               <v-list-item class="nav-button">
                 <v-list-item-title>
-                  <v-btn to="/wallet" class="w-100 " variant="plain"> Mon wallet</v-btn>
+                  <v-btn to="/wallet" class="w-100 " variant="plain"> Portefeuille</v-btn>
                 </v-list-item-title>
-              </v-list-item>
-              <v-list-item class="nav-button">
-                <v-list-item-title>
-                  <v-btn to="/wallet" class="w-100 " variant="plain"> Mon wallet</v-btn>
-                </v-list-item-title>
-              </v-list-item>
+              </v-list-item>            
               <v-list-item class="nav-button">
                 <v-list-item-title>
                   <v-btn @click="logout" to="/wallet" class="w-100 " variant="plain"> Déconnexion</v-btn>

src/views/main/Wallet.vue

@@ -1,50 +1,57 @@
 <template>
-  <v-container class="mt-28 bg-gray-100 p-6 rounded-lg shadow-lg">
-    <v-data-table
+  <v-container class="mt-10 bg-gray-100 py-10 rounded-lg shadow-lg border border-fuchsia-500 mb-15">
+    <div class="flex justify-center text-6xl mb-4 font-sans font-weight-bold">Portefeuille</div>
+    <div class="flex justify-between mb-4">
+      <div class="text-left">
+        <span class="font-bold">Montant Total : </span>
+      </div>
+      <div class="text-center">
+        <span class="font-bold">Nombre total de transactions : </span>
+      </div>
+    </div>
+    <v-data-table 
         :headers="headers"
         :items="transactions"
-        class="elevation-1"
+        class="elevation-1 text-black"
         :items-per-page="5"
-    >
-      <template v-slot:[`item.amount`]="{ item }">
-        <span>{{ item.amount }} {{ item.g }}</span>
-        
-      </template>
-    </v-data-table>
+        show-group-by
+    >   
+    </v-data-table>    
   </v-container>
+  
+  
+  
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
+<script async setup>
+import { onBeforeMount, ref } from 'vue';
+import {useClient} from "@/plugins/api.js";
+import MyUserModel from "@/models/myUserModel.js";
+const client = useClient();
 
-const headers = ref([
-  { text: 'Date', value: 'date' },
-  { text: 'Amount', value: 'amount' },
-  { text: 'Currency', value: 'currency' },
-  { text: 'Tip Message', value: 'tipMessage' },
-  { text: 'Paid', value: 'paid' },
-]);
+const total = ref(false);
+const drawer = ref(false);
+const currentUserName = ref("INVITÉ");
+let currentUser = null;
 
-const transactions = ref([
-  {
-    date: '2024-06-01',
-    amount: '100',
-    currency: 'USD',
-    tipMessage: 'Thank you!',
-    paid: true,
-  },
-  {
-    date: '2024-06-15',
-    amount: '50',
-    currency: 'EUR',
-    tipMessage: 'Great service!',
-    paid: false,
-  },
-  // Ajoutez d'autres transactions ici
-]);
+onBeforeMount(async () => {
+  try {
+    const myUser = await client.get("/api/GetMyUser");
+    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
+    currentUser = currentUserModel;
+    currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName
+    
+  } catch(error) {
+    console.log("User not logged")
+  }
+})
+
+function logout(){
+  localStorage.removeItem('jwt');
+  window.location.reload();
+}
 
 </script>
 
 <style scoped>
-/* Ajoutez des styles personnalisés si nécessaire */
 </style>