From 6896e42f6ad494faa183f60ff912448cd07234a1 Mon Sep 17 00:00:00 2001
From: Casey Timm <casey.m.timm@gmail.com>
Date: Mon, 21 Jul 2025 17:21:02 -0400
Subject: [PATCH] improved looks

---
 src/lib/db.js                          |  6 +-
 src/routes/account/[slug]/+page.svelte | 83 +++++++++++++++-----------
 2 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/src/lib/db.js b/src/lib/db.js
index 7235c50..6693f1c 100644
--- a/src/lib/db.js
+++ b/src/lib/db.js
@@ -240,9 +240,11 @@ export async function getBudgetTransactionsForAccount(accountID) {
     budget_transaction.budget_id as budget_id, 
     budget_transaction.transaction_id as transaction_id, 
     budget_transaction.amount as amount, 
-    budget_transaction.notes as notes 
-    from budget_transaction 
+    budget_transaction.notes as notes,
+    budget.name as budget_name
+    from budget_transaction
     join transaction on budget_transaction.transaction_id = transaction.id
+    join budget on budget_transaction.budget_id = budget.id
     where transaction.account_id = ${accountID}
     `;
 	return transactions;
diff --git a/src/routes/account/[slug]/+page.svelte b/src/routes/account/[slug]/+page.svelte
index 57e60e3..f531d40 100644
--- a/src/routes/account/[slug]/+page.svelte
+++ b/src/routes/account/[slug]/+page.svelte
@@ -18,10 +18,11 @@
 	let expanded = $state([]);
 	let loading = $state(false);
 
-	function editNotes(transaction) {
+	function editNotes(transaction, remaining) {
 		my_modal_3.showModal();
 		currentTransaction = transaction;
 		notes = transaction.notes;
+		currentTransaction.amount = remaining;
 	}
 	async function saveNotes() {
 		my_modal_3.close();
@@ -84,9 +85,8 @@
 		</button>
 	</div>
 </div>
-
 <h1>Transcations</h1>
-<ul class="list bg-base-100 rounded-box shadow-md">
+<div>
 	{#each trans as transaction}
 		{@const applicableBudgets = budgetTransactions.filter(
 			(bt) => bt.transaction_id === transaction.id
@@ -96,43 +96,58 @@
 			0
 		)}
 		{@const remaining = transaction.amount - budgetTotal}
-		<li
-			class="flex m-1 p-1 rounded-md outline-primary-25 {remaining != 0 &&
-			!transaction.out_of_budget
+		<div
+			class=" p-2 {remaining != 0 && !transaction.out_of_budget
 				? 'bg-warning-content'
 				: ''} {transaction.pending ? 'opacity-50' : ''}"
 		>
-			<div class="grow basis-2/3">
-				<div>{transaction.description}</div>
-				<div class="text-xs uppercase font-semibold opacity-60">
-					{transaction.date.toDateString()}
+			<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 class="grow text-right">
-				{#if transaction.out_of_budget}
-					<span class="badge badge-secondary">Out of Budgets</span>
-				{:else}
-					<div class="text-xs uppercase font-semibold text-left">
-						In Budget: {budgetTotal.toFixed(2)}
-					</div>
-					<div class="text-xs uppercase font-semibold text-left">
-						Remaining {remaining.toFixed(2)}
-					</div>
-				{/if}
-			</div>
-
-			<div class="text-lg uppercase font-semibold text-right basis-1/6">
-				{transaction.amount}
-			</div>
-			<div class="w-10"></div>
-			<div class="justify-self-end">
-				<button class="btn btn-square btn-ghost" onclick={() => editNotes(transaction)}>
-					{@render EditSymbol()}
-				</button>
-			</div>
-		</li>
+		</div>
 	{/each}
-</ul>
+</div>
 
 <dialog id="my_modal_3" class="modal">
 	<div class="modal-box">