cmtimm/budget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ui tweaks

Browse Source
This commit is contained in:
Casey Timm
2025-07-20 22:25:31 -04:00
parent 9e6d1d028d
commit a417d2c52a
4 changed files with 63 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/routes/account/[slug]/+page.svelte
View File

@ -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
? 'opacity-50'
: ''}"
class="flex m-1 p-1 rounded-md outline-primary-25 {remaining != 0 &&
!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></div>
<div class="w-32">
<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>
<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>
<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>