Change header.vue btn

src/views/main/Wallet.vue

@@ -1,10 +1,50 @@
 <template>
-  <div class="mt-28"> test
-    
-  </div>
-
+  <v-container class="mt-28 bg-gray-100 p-6 rounded-lg shadow-lg">
+    <v-data-table
+        :headers="headers"
+        :items="transactions"
+        class="elevation-1"
+        :items-per-page="5"
+    >
+      <template v-slot:[`item.amount`]="{ item }">
+        <span>{{ item.amount }} {{ item.g }}</span>
+        
+      </template>
+    </v-data-table>
+  </v-container>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
+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 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
+]);
 
 </script>
+
+<style scoped>
+/* Ajoutez des styles personnalisés si nécessaire */
+</style>