Show tags on overview of transactions

app/Http/Controllers/TransactionController.php

@@ -23,6 +23,7 @@ public function index(): Response
             ->each(fn (Earning $earning) => $transactions->push($earning));
 
         Spending::query()
+            ->with('tag')
             ->where('space_id', $space->id)
             ->each(fn (Spending $spending) => $transactions->push($spending));
 

resources/assets/js/pages/Transaction/Index.vue

@@ -75,6 +75,10 @@ const getTransactionsBySpan = (span) => {
                     <div class="py-4 px-5 space-y-4 bg-white border border-gray-200 rounded-lg">
                         <div class="flex items-center justify-between" v-for="transaction in getTransactionsBySpan(span)">
                             <div class="flex-1 text-sm text-gray-500">{{ transaction.description }}</div>
+                            <div v-if="transaction.tag_id" class="flex-1 flex items-center">
+                                <svg class="h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
+                                <span class="text-sm text-gray-500">{{ transaction.tag.name }}</span>
+                            </div>
                             <div class="w-20 text-right text-sm" :class="'text-' + (transaction.type === 'earning' ? 'green' : 'red') + '-600'" v-html="(transaction.type === 'earning' ? '+' : '-') + props.currency + (transaction.amount / 100).toFixed(2)"></div>
                         </div>
                     </div>