${esc(loan.title)}
diff --git a/public/styles/budget.css b/public/styles/budget.css
index bcf9582..f5ee47c 100644
--- a/public/styles/budget.css
+++ b/public/styles/budget.css
@@ -86,7 +86,7 @@
.budget-tab {
min-height: 34px;
padding: 0 var(--space-3);
- border: 0;
+ border: 1px solid transparent;
border-radius: var(--radius-xs);
background: transparent;
color: var(--color-text-secondary);
@@ -95,11 +95,34 @@
font-weight: var(--font-weight-medium);
}
+.budget-tab[data-tab="budget"] {
+ color: var(--module-budget);
+}
+
+.budget-tab[data-tab="loans"] {
+ color: var(--color-info);
+}
+
+.budget-tab[data-tab="budget"]:not(.budget-tab--active) {
+ background: color-mix(in srgb, var(--module-budget) 10%, transparent);
+}
+
+.budget-tab[data-tab="loans"]:not(.budget-tab--active) {
+ background: color-mix(in srgb, var(--color-info) 10%, transparent);
+}
+
.budget-tab--active {
- background: var(--module-accent);
color: var(--color-text-on-accent);
}
+.budget-tab[data-tab="budget"].budget-tab--active {
+ background: var(--module-budget);
+}
+
+.budget-tab[data-tab="loans"].budget-tab--active {
+ background: var(--color-info);
+}
+
.budget-tab-panel {
flex: 1;
min-height: 0;
@@ -269,8 +292,30 @@
margin-top: 2px;
}
-.budget-loans__add {
- flex-shrink: 0;
+.budget-loans__filters {
+ display: flex;
+ gap: var(--space-1);
+ padding: 2px;
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-sm);
+ background: var(--color-surface-2);
+}
+
+.budget-loans__filter {
+ min-height: 30px;
+ padding: 0 var(--space-2);
+ border: 0;
+ border-radius: var(--radius-xs);
+ background: transparent;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ font-size: var(--text-xs);
+ font-weight: var(--font-weight-medium);
+}
+
+.budget-loans__filter--active {
+ background: var(--color-info);
+ color: var(--color-text-on-accent);
}
.budget-loans__stats {
@@ -328,6 +373,13 @@
padding: var(--space-3);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
+ cursor: pointer;
+ transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
+}
+
+.budget-loan-card:hover {
+ border-color: var(--color-info);
+ background: var(--color-surface-2);
}
.budget-loan-card__main {
@@ -402,6 +454,107 @@
gap: var(--space-2);
}
+.budget-loan-transactions {
+ margin-top: var(--space-4);
+ border-top: 1px solid var(--color-border);
+ padding-top: var(--space-3);
+}
+
+.budget-loan-transactions__title,
+.loan-report__section-title {
+ font-size: var(--text-sm);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin-bottom: var(--space-2);
+}
+
+.budget-loan-transactions__list,
+.loan-report__transactions {
+ display: grid;
+ gap: var(--space-2);
+}
+
+.budget-loan-transaction {
+ display: flex;
+ justify-content: space-between;
+ gap: var(--space-3);
+ padding: var(--space-3);
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+ background: var(--color-surface-2);
+}
+
+.budget-loan-transaction span {
+ display: block;
+ margin-top: 2px;
+ color: var(--color-text-secondary);
+ font-size: var(--text-xs);
+}
+
+.budget-loan-transaction > div:last-child {
+ text-align: right;
+}
+
+.loan-report__hero {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: var(--space-3);
+ padding: var(--space-4);
+ border-radius: var(--radius-md);
+ background: var(--color-surface-2);
+}
+
+.loan-report__borrower {
+ color: var(--color-text-secondary);
+ font-size: var(--text-sm);
+}
+
+.loan-report__title {
+ font-size: var(--text-xl);
+ font-weight: var(--font-weight-bold);
+ margin-top: 2px;
+}
+
+.loan-report__status {
+ padding: var(--space-1) var(--space-2);
+ border-radius: var(--radius-full);
+ font-size: var(--text-xs);
+ font-weight: var(--font-weight-semibold);
+}
+
+.loan-report__status--active {
+ background: var(--color-info);
+ color: var(--color-text-on-accent);
+}
+
+.loan-report__status--paid {
+ background: var(--color-success);
+ color: var(--color-text-on-accent);
+}
+
+.loan-report__grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: var(--space-2);
+ margin: var(--space-3) 0;
+}
+
+.loan-report__grid > div {
+ padding: var(--space-3);
+ border: 1px solid var(--color-border-subtle);
+ border-radius: var(--radius-sm);
+}
+
+.loan-report__grid span {
+ display: block;
+ color: var(--color-text-secondary);
+ font-size: var(--text-xs);
+ margin-bottom: 2px;
+}
+
.budget-page .form-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -641,10 +794,15 @@
}
.amount-type-btn--loan.amount-type-btn--active {
- background-color: var(--module-accent);
+ background-color: var(--module-budget);
color: var(--color-text-on-accent);
}
+.modal-panel .js-entry-field[hidden],
+.modal-panel #bm-loan-fields[hidden] {
+ display: none !important;
+}
+
.budget-field-header {
display: flex;
align-items: center;
diff --git a/server/routes/budget.js b/server/routes/budget.js
index f914e09..ab403b2 100644
--- a/server/routes/budget.js
+++ b/server/routes/budget.js
@@ -889,6 +889,17 @@ router.put('/:id', (req, res) => {
if (linkedPayment && amount !== undefined && Number(amount) <= 0) {
return res.status(400).json({ error: 'Loan repayment entries must remain income.', code: 400 });
}
+ if (linkedPayment && amount !== undefined) {
+ const loan = db.get().prepare('SELECT total_amount FROM budget_loans WHERE id = ?').get(linkedPayment.loan_id);
+ const otherPaid = db.get().prepare(`
+ SELECT COALESCE(SUM(amount), 0) AS total
+ FROM budget_loan_payments
+ WHERE loan_id = ? AND id != ?
+ `).get(linkedPayment.loan_id, linkedPayment.id).total;
+ if (Number(amount) - (Number(loan?.total_amount || 0) - Number(otherPaid || 0)) > 0.005) {
+ return res.status(400).json({ error: 'Amount cannot be greater than the remaining loan amount.', code: 400 });
+ }
+ }
const nextCategory = category ?? entry.category;
const subcategory = requestedSubcategory !== undefined || category !== undefined
? validateSubcategory(nextCategory, requestedSubcategory ?? entry.subcategory)