Making things nicer

src/routes/(protected)/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import TransactionList from '$lib/transactionList.svelte';
+	import Budgetlist from '$lib/budgetlist.svelte';
 	import { echarts } from '$lib/echarts';
 
 	let { data } = $props();
@@ -9,23 +10,31 @@
 	let budgets = $derived(data.budgets);
 	let budgetTransactions = $derived(data.budgetTransactions);
 	let last30days = $derived(data.last30DaysTransactionsSums.reverse());
+	let orphanedTransactions = $derived(data.orphanedTransactions);
 </script>
 
-<span class="font-sans text-xl"
+<span class="font-sans text-3xl p-4"
 	>Total Net Worth: <span class="{total > 0 ? 'bg-green-500' : 'bg-red-500'} pl-2 pr-2 rounded-lg"
 		>${total}</span
 	></span
 >
 
+{#each budgets as budget}
+	<a
+		href="/budget/{budget.id}"
+		class="block p-4 mb-2 bg-base-200 rounded-lg hover:bg-base-300 transition duration-200"
+		><div class="flex flex-row justify-between items-center text-2xl">
+			<div>{budget.name}</div>
+			<div>{budget.sum}</div>
+		</div></a
+	>
+{/each}
+
 <div class="text-xl divider">Unallocated Transactions</div>
 <TransactionList {budgets} {budgetTransactions} transactions={unallocatedTrans} />
 
 <div class="text-xl divider">Underallocated Transactions</div>
 <TransactionList {budgets} {budgetTransactions} transactions={underAllocatedTrans} />
 
-<style>
-	.container {
-		height: 500px;
-		width: 100%;
-	}
-</style>
+<div class="text-xl divider">Orphans</div>
+<Budgetlist transactions={orphanedTransactions} />