Ui tweaks

src/lib/db.js

@@ -271,7 +271,8 @@ export async function getTransactions(accountId) {
       transaction.notes as notes,
       transaction.payee as payee,
       transaction.date as date,
-      transaction.statement_description as statement_description
+      transaction.statement_description as statement_description,
+      transaction.out_of_budget as out_of_budget
     from transaction
     where account_id = ${accountId}
     order by date desc
@@ -289,6 +290,15 @@ export async function setTransactionNote(transactionId, note) {
 	return result;
 }
 
+export async function setTransactionOutOfBudget(transactionId, oob) {
+	const result = await db`
+    update transaction
+    set out_of_budget = ${oob}
+    where id = ${transactionId}
+  `;
+	return result;
+}
+
 export async function getRules(data) {
 	try {
 		const rules = await db`

src/routes/+layout.svelte

@@ -41,7 +41,7 @@
 				</label>
 			</div>
 			<div class="flex-1">
-				<a class="btn btn-ghost text-xl">Timm Budget</a>
+				<a class="btn btn-ghost text-xl" href="/">Timm Budget</a>
 			</div>
 		</div>
 		{@render children()}

src/routes/account/[slug]/+page.svelte

@@ -11,7 +11,7 @@
 	let budgets = $derived(data.budgets);
 	let budgetTransactions = $derived(data.budgetTransactions);
 	let notes = $state('');
-	let currentTransaction = $state({ budget_id: null, amount: 0, notes: '' });
+	let currentTransaction = $state({ budget_id: null, amount: 0, notes: '', out_of_budget: false });
 	let account = $derived(data.account);
 	let hide = $derived(account?.hide || false);
 	let inTotal = $derived(account?.in_total || false);
@@ -31,7 +31,10 @@
 			headers: {
 				'Content-Type': 'application/json'
 			},
-			body: JSON.stringify({ notes: $state.snapshot(notes) })
+			body: JSON.stringify({
+				notes: $state.snapshot(notes),
+				out_of_budget: currentTransaction.out_of_budget
+			})
 		});
 		loading = false;
 		let result = await res;
@@ -40,6 +43,7 @@
 			currentTransaction.notes = notes;
 			// Optionally, you can also update the UI or show a success message
 			addToast('Notes saved successfully', 'success');
+			invalidateAll();
 		} else {
 			// Handle error case
 			console.error('Failed to save notes');
@@ -93,30 +97,39 @@
 		)}
 		{@const remaining = transaction.amount - budgetTotal}
 		<li
-			class="list-row {remaining != 0 ? 'bg-warning-content' : ''} {transaction.pending
+			class="flex m-1 p-1 rounded-md outline-primary-25 {remaining != 0 &&
-				? 'opacity-50'
+			!transaction.out_of_budget
-				: ''}"
+				? 'bg-warning-content'
+				: ''} {transaction.pending ? 'opacity-50' : ''}"
 		>
-			<div>
+			<div class="grow basis-2/3">
 				<div>{transaction.description}</div>
 				<div class="text-xs uppercase font-semibold opacity-60">
 					{transaction.date.toDateString()}
 				</div>
 			</div>
-
+			<div class="grow text-right">
-			<div></div>
+				{#if transaction.out_of_budget}
-			<div class="w-32">
+					<span class="badge badge-secondary">Out of Budgets</span>
-				<div class="text-xs uppercase font-semibold text-left">
+				{:else}
-					In Budget: {budgetTotal.toFixed(2)}
+					<div class="text-xs uppercase font-semibold text-left">
-				</div>
+						In Budget: {budgetTotal.toFixed(2)}
-				<div class="text-xs uppercase font-semibold text-left">
+					</div>
-					Remaining {remaining.toFixed(2)}
+					<div class="text-xs uppercase font-semibold text-left">
-				</div>
+						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>
-			<div class="text-lg uppercase font-semibold text-right w-32">{transaction.amount}</div>
-			<button class="btn btn-square btn-ghost" onclick={() => editNotes(transaction)}>
-				{@render EditSymbol()}
-			</button>
 		</li>
 	{/each}
 </ul>
@@ -132,6 +145,11 @@
 			<p class="label">{currentTransaction?.date?.toDateString()}</p>
 			<legend class="fieldset-legend">Notes</legend>
 			<textarea bind:value={notes} class="textarea w-100"></textarea>
+			<legend class="fieldset-legend">Login options</legend>
+			<label class="label">
+				<input type="checkbox" bind:checked={currentTransaction.out_of_budget} class="toggle" />
+				Out of Budgets
+			</label>
 
 			<button class="btn btn-neutral" onclick={() => saveNotes()}>Save</button>
 

src/routes/transcation/[slug]/+server.js

@@ -1,13 +1,18 @@
-import {setTransactionNote} from '$lib/db';
+import { setTransactionNote, setTransactionOutOfBudget } from '$lib/db';
 
 export async function POST(request) {
-    let body =  await request.request.json();
+	let body = await request.request.json();
-    let res = await setTransactionNote(request.params.slug, body.notes);
 
-    return new Response(JSON.stringify({success: true}), {
+	let res;
-        headers: {
+
-            'Content-Type': 'application/json'
+	if (body.notes !== undefined) await setTransactionNote(request.params.slug, body.notes);
-        }
+
-    });
+	if (body.out_of_budget !== undefined)
+		res = await setTransactionOutOfBudget(request.params.slug, body.out_of_budget);
+
+	return new Response(JSON.stringify({ success: true }), {
+		headers: {
+			'Content-Type': 'application/json'
+		}
+	});
 }
-