New and imporved!

src/lib/transactionList.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { EditSymbol } from '$lib/editSymbol.svelte';
+	import EditTransaction from '$lib/editTransaction.svelte';
+	let currentTransaction = $state({ budget_id: null, amount: 0, notes: '', out_of_budget: false });
+	let { transactions, budgetTransactions, budgets } = $props();
+	let editing = $state(false);
+
+	function editNotes(transaction, remaining) {
+		currentTransaction = transaction;
+		currentTransaction.amount = remaining;
+		editing = true;
+	}
+</script>
+
+<div>
+	{#each transactions as transaction}
+		{@const applicableBudgets = budgetTransactions.filter(
+			(bt) => bt.transaction_id === transaction.id
+		)}
+		{@const budgetTotal = applicableBudgets.reduce(
+			(accumulator, currentValue) => accumulator + Number(currentValue.amount),
+			0
+		)}
+		{@const remaining = transaction.amount - budgetTotal}
+		<div
+			class=" p-2 {remaining != 0 && !transaction.out_of_budget
+				? 'bg-warning-content'
+				: ''} {transaction.pending ? 'opacity-50' : ''}"
+		>
+			<div class="h-full flex flex-row justify-between items-center">
+				<div class="h-full flex flex-col md:flex-row justify-between md:items-center md:grow">
+					<div>
+						<div>{transaction.description}</div>
+						<div class="text-xs uppercase font-semibold opacity-60">
+							{transaction.date.toDateString()}
+						</div>
+						{#if !transaction.out_of_budget}
+							<div class="text-xs uppercase font-semibold text-left opacity-60">
+								In Budget: {budgetTotal.toFixed(2)}
+							</div>
+							<div class="text-xs uppercase font-semibold text-left opacity-60">
+								Remaining {remaining.toFixed(2)}
+							</div>
+						{:else}
+							<div class="text-xs uppercase font-semibold text-left opacity-60">Out of budget</div>
+						{/if}
+					</div>
+					{#if applicableBudgets.length > 0}
+						<div class="flex grow flex-col">
+							{#each applicableBudgets as budgetTransaction}
+								<div class="md:text-right">
+									{`${budgetTransaction.budget_name}: ${budgetTransaction.amount}`}
+								</div>
+							{/each}
+						</div>
+					{/if}
+
+					<div class="md:text-right text-2xl md:p-4 md:w-35">
+						<div class="">
+							{transaction.amount}
+						</div>
+					</div>
+				</div>
+
+				<div class="">
+					<button
+						class="btn btn-square btn-ghost"
+						onclick={() => editNotes(transaction, remaining)}
+					>
+						{@render EditSymbol()}
+					</button>
+				</div>
+			</div>
+		</div>
+	{/each}
+
+	{#if editing}
+		<EditTransaction transaction={currentTransaction} close={() => (editing = false)} budgets />
+	{/if}
+</div>