New and imporved!

src/routes/+page.svelte

@@ -0,0 +1,61 @@
+<script>
+	import TransactionList from '$lib/transactionList.svelte';
+	import { echarts } from '$lib/echarts';
+
+	let { data } = $props();
+	let total = $derived(data.total);
+	let unallocatedTrans = $derived(data.unallocatedTrans);
+	let underAllocatedTrans = $derived(data.underAllocatedTrans);
+	let budgets = $derived(data.budgets);
+	let budgetTransactions = $derived(data.budgetTransactions);
+	let last30days = $derived(data.last30DaysTransactionsSums);
+
+	let chartData = $derived(
+		last30days
+			.reduce((acc, curr) => [...acc, acc[acc.length - 1] + Number(curr.sum)], [Number(total)])
+			.reverse()
+	);
+	let chartDates = $derived(
+		[
+			'now',
+			...last30days.map((day) => `${day.date.getMonth() + 1}/${day.date.getDate()}`)
+		].reverse()
+	);
+
+	const option = $derived({
+		xAxis: {
+			type: 'category',
+			data: chartDates
+		},
+		yAxis: {
+			type: 'value'
+		},
+		series: [
+			{
+				data: chartData,
+				type: 'line'
+			}
+		]
+	});
+</script>
+
+<span class="font-sans text-xl"
+	>Total Net Worth: <span class="{total > 0 ? 'bg-green-500' : 'bg-red-500'} pl-2 pr-2 rounded-lg"
+		>${total}</span
+	></span
+>
+
+<div class="container" use:echarts={option} />
+
+<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>