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.transaction_id as transaction_id,
budget_transaction.amount as amount,
budget_transaction.notes as notes
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;

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

@ -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">