41 lines
1.4 KiB
Svelte
41 lines
1.4 KiB
Svelte
<script>
|
|
import TransactionList from '$lib/transactionList.svelte';
|
|
import Budgetlist from '$lib/budgetlist.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.reverse());
|
|
let orphanedTransactions = $derived(data.orphanedTransactions);
|
|
</script>
|
|
|
|
<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} />
|
|
|
|
<div class="text-xl divider">Orphans</div>
|
|
<Budgetlist transactions={orphanedTransactions} />
|