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

improved looks

Browse Source
This commit is contained in:
Casey Timm
2025-07-21 17:21:02 -04:00
parent a417d2c52a
commit 6896e42f6a
2 changed files with 53 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/db.js
View File

@ -240,9 +240,11 @@ export async function getBudgetTransactionsForAccount(accountID) {
budget_transaction.budget_id as budget_id, budget_transaction.budget_id as budget_id,
budget_transaction.transaction_id as transaction_id, budget_transaction.transaction_id as transaction_id,
budget_transaction.amount as amount, budget_transaction.amount as amount,
budget_transaction.notes as notes budget_transaction.notes as notes,
budget.name as budget_name
from budget_transaction from budget_transaction
join transaction on budget_transaction.transaction_id = transaction.id join transaction on budget_transaction.transaction_id = transaction.id
join budget on budget_transaction.budget_id = budget.id
where transaction.account_id = ${accountID} where transaction.account_id = ${accountID}
`; `;
return transactions; return transactions;

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

@ -18,10 +18,11 @@
let expanded = $state([]); let expanded = $state([]);
let loading = $state(false); let loading = $state(false);
function editNotes(transaction) { function editNotes(transaction, remaining) {
my_modal_3.showModal(); my_modal_3.showModal();
currentTransaction = transaction; currentTransaction = transaction;
notes = transaction.notes; notes = transaction.notes;
currentTransaction.amount = remaining;
} }
async function saveNotes() { async function saveNotes() {
my_modal_3.close(); my_modal_3.close();
@ -84,9 +85,8 @@
</button> </button>
</div> </div>
</div> </div>
<h1>Transcations</h1> <h1>Transcations</h1>
<ul class="list bg-base-100 rounded-box shadow-md"> <div>
{#each trans as transaction} {#each trans as transaction}
{@const applicableBudgets = budgetTransactions.filter( {@const applicableBudgets = budgetTransactions.filter(
(bt) => bt.transaction_id === transaction.id (bt) => bt.transaction_id === transaction.id
@ -96,43 +96,58 @@
0 0
)} )}
{@const remaining = transaction.amount - budgetTotal} {@const remaining = transaction.amount - budgetTotal}
<li <div
class="flex m-1 p-1 rounded-md outline-primary-25 {remaining != 0 && class=" p-2 {remaining != 0 && !transaction.out_of_budget
!transaction.out_of_budget
? 'bg-warning-content' ? 'bg-warning-content'
: ''} {transaction.pending ? 'opacity-50' : ''}" : ''} {transaction.pending ? 'opacity-50' : ''}"
> >
<div class="grow basis-2/3"> <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>{transaction.description}</div>
<div class="text-xs uppercase font-semibold opacity-60"> <div class="text-xs uppercase font-semibold opacity-60">
{transaction.date.toDateString()} {transaction.date.toDateString()}
</div> </div>
</div> {#if !transaction.out_of_budget}
<div class="grow text-right"> <div class="text-xs uppercase font-semibold text-left opacity-60">
{#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)} In Budget: {budgetTotal.toFixed(2)}
</div> </div>
<div class="text-xs uppercase font-semibold text-left"> <div class="text-xs uppercase font-semibold text-left opacity-60">
Remaining {remaining.toFixed(2)} Remaining {remaining.toFixed(2)}
</div> </div>
{:else}
<div class="text-xs uppercase font-semibold text-left opacity-60">Out of budget</div>
{/if} {/if}
</div> </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="text-lg uppercase font-semibold text-right basis-1/6"> <div class="md:text-right text-2xl md:p-4 md:w-35">
<div class="">
{transaction.amount} {transaction.amount}
</div> </div>
<div class="w-10"></div> </div>
<div class="justify-self-end"> </div>
<button class="btn btn-square btn-ghost" onclick={() => editNotes(transaction)}>
<div class="">
<button
class="btn btn-square btn-ghost"
onclick={() => editNotes(transaction, remaining)}
>
{@render EditSymbol()} {@render EditSymbol()}
</button> </button>
</div> </div>
</li> </div>
</div>
{/each} {/each}
</ul> </div>
<dialog id="my_modal_3" class="modal"> <dialog id="my_modal_3" class="modal">
<div class="modal-box"> <div class="modal-box">