feat(finance): improve UX across dashboard, transactions, reports and categories
- Fix sortStrings no-op bug that caused balance trend chart to display in random date order - Fix reports table referencing wrong scope for row totals ($.Totals → .Totals per row) - Add income vs expense split cards on dashboard alongside net figure - Add budget progress bars on dashboard using existing category budget_cents data - Color-coded category badges throughout using each category's configured color - Replace window.prompt() category editor in transactions with inline dropdown - Replace window.prompt() budget editor in categories with inline input field - Add manual transaction entry modal (POST /api/transactions) so users don't need CSV for every entry - Show account names instead of raw MongoDB IDs in the transaction list - Add clampPct and isOver template helpers for budget bar rendering Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gonçalo Rodrigues
parent
13b7149614
commit
452f97e6d9
@ -9,6 +9,7 @@ import (
|
||||
"log/slog"
|
||||
"math"
|
||||
"net/http"
|
||||
"sort"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
@ -77,6 +78,22 @@ func parseTmpl(files ...string) *template.Template {
|
||||
"round": func(f float64) float64 {
|
||||
return math.Round(f)
|
||||
},
|
||||
"clampPct": func(spent, budget int64) int64 {
|
||||
if budget <= 0 {
|
||||
return 0
|
||||
}
|
||||
pct := int64(float64(spent) / float64(budget) * 100)
|
||||
if pct > 100 {
|
||||
return 100
|
||||
}
|
||||
if pct < 0 {
|
||||
return 0
|
||||
}
|
||||
return pct
|
||||
},
|
||||
"isOver": func(spent, budget int64) bool {
|
||||
return budget > 0 && spent > budget
|
||||
},
|
||||
"jsonVals": func(m map[string]int64) template.JS {
|
||||
var vals []string
|
||||
for _, v := range m {
|
||||
@ -252,16 +269,41 @@ func (h *Handler) Dashboard(w http.ResponseWriter, r *http.Request) {
|
||||
balPoints = balPoints[len(balPoints)-90:]
|
||||
}
|
||||
|
||||
render(w, dashboardTmpl, &DashboardData{
|
||||
UserID: a.UserID,
|
||||
Email: a.Email,
|
||||
Title: "Dashboard",
|
||||
Route: "dashboard",
|
||||
IsOwner: true,
|
||||
ThisMonth: thisMonth,
|
||||
LastMonth: lastMonth,
|
||||
RecentTxns: recent,
|
||||
BalanceTrend: balPoints,
|
||||
// compute income vs expense split for this month
|
||||
thisMonthIncome := int64(0)
|
||||
thisMonthExpense := int64(0)
|
||||
for _, amt := range thisMonth.ByCategory {
|
||||
if amt > 0 {
|
||||
thisMonthIncome += amt
|
||||
} else {
|
||||
thisMonthExpense += amt
|
||||
}
|
||||
}
|
||||
|
||||
// budget data: map category name -> budget cents
|
||||
catBudgets := make(map[string]int64)
|
||||
catColors := make(map[string]string)
|
||||
for _, c := range cats {
|
||||
if c.BudgetCents > 0 {
|
||||
catBudgets[c.Name] = c.BudgetCents
|
||||
}
|
||||
catColors[c.Name] = c.Color
|
||||
}
|
||||
|
||||
render(w, dashboardTmpl, map[string]interface{}{
|
||||
"UserID": a.UserID,
|
||||
"Email": a.Email,
|
||||
"Title": "Dashboard",
|
||||
"Route": "dashboard",
|
||||
"IsOwner": true,
|
||||
"ThisMonth": thisMonth,
|
||||
"LastMonth": lastMonth,
|
||||
"RecentTxns": recent,
|
||||
"BalanceTrend": balPoints,
|
||||
"ThisMonthIncome": thisMonthIncome,
|
||||
"ThisMonthExpense": thisMonthExpense,
|
||||
"CategoryBudgets": catBudgets,
|
||||
"CategoryColors": catColors,
|
||||
})
|
||||
}
|
||||
|
||||
@ -306,6 +348,17 @@ func (h *Handler) Transactions(w http.ResponseWriter, r *http.Request) {
|
||||
}
|
||||
|
||||
cats, _ := h.store.getCategories(ctx, a.UserID)
|
||||
accounts, _ := h.store.getAccounts(ctx, a.UserID)
|
||||
|
||||
accountNames := make(map[string]string)
|
||||
for _, acc := range accounts {
|
||||
accountNames[acc.ID] = acc.Name
|
||||
}
|
||||
|
||||
catColors := make(map[string]string)
|
||||
for _, c := range cats {
|
||||
catColors[c.Name] = c.Color
|
||||
}
|
||||
|
||||
render(w, txnsTmpl, map[string]interface{}{
|
||||
"UserID": a.UserID,
|
||||
@ -315,12 +368,58 @@ func (h *Handler) Transactions(w http.ResponseWriter, r *http.Request) {
|
||||
"IsOwner": true,
|
||||
"Txns": txns,
|
||||
"Categories": cats,
|
||||
"Accounts": accounts,
|
||||
"AccountNames": accountNames,
|
||||
"CategoryColors": catColors,
|
||||
"Cat": cat,
|
||||
"Search": search,
|
||||
"Days": daysStr,
|
||||
})
|
||||
}
|
||||
|
||||
func (h *Handler) CreateTransaction(w http.ResponseWriter, r *http.Request) {
|
||||
ctx := r.Context()
|
||||
a := getAuth(r)
|
||||
|
||||
var body struct {
|
||||
AccountID string `json:"account_id"`
|
||||
Date string `json:"date"`
|
||||
Description string `json:"description"`
|
||||
AmountCents int64 `json:"amount_cents"`
|
||||
Category string `json:"category"`
|
||||
}
|
||||
if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
|
||||
http.Error(w, "bad request", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
date, err := time.Parse("2006-01-02", body.Date)
|
||||
if err != nil {
|
||||
date = time.Now()
|
||||
}
|
||||
|
||||
txn := Transaction{
|
||||
ID: bson.NewObjectID().Hex(),
|
||||
UserID: a.UserID,
|
||||
AccountID: body.AccountID,
|
||||
Date: date,
|
||||
Description: body.Description,
|
||||
AmountCents: body.AmountCents,
|
||||
Category: body.Category,
|
||||
CreatedAt: time.Now(),
|
||||
}
|
||||
|
||||
if err := h.store.createTransactions(ctx, []Transaction{txn}); err != nil {
|
||||
slog.Error("create transaction", "err", err)
|
||||
http.Error(w, "internal error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
w.WriteHeader(http.StatusCreated)
|
||||
json.NewEncoder(w).Encode(txn)
|
||||
}
|
||||
|
||||
func (h *Handler) ImportPage(w http.ResponseWriter, r *http.Request) {
|
||||
a := getAuth(r)
|
||||
accounts, _ := h.store.getAccounts(r.Context(), a.UserID)
|
||||
@ -1085,18 +1184,11 @@ func (h *Handler) RegisterRoutes(mux *http.ServeMux) {
|
||||
mux.HandleFunc("POST /sharing", h.Sharing)
|
||||
mux.HandleFunc("DELETE /sharing/{viewer_id}", h.Sharing)
|
||||
mux.HandleFunc("GET /api/users/search", h.SearchUsers)
|
||||
mux.HandleFunc("POST /api/transactions", h.CreateTransaction)
|
||||
mux.HandleFunc("PUT /api/transactions/{id}", h.UpdateTransaction)
|
||||
mux.HandleFunc("DELETE /api/transactions/{id}", h.DeleteTransaction)
|
||||
}
|
||||
|
||||
func sortStrings(s []string) {
|
||||
if len(s) == 0 {
|
||||
return
|
||||
}
|
||||
sort.Strings(s)
|
||||
}
|
||||
|
||||
type stringSlice []string
|
||||
|
||||
func (s stringSlice) Len() int { return len(s) }
|
||||
func (s stringSlice) Less(i, j int) bool { return s[i] < s[j] }
|
||||
func (s stringSlice) Swap(i, j int) { s[i], s[j] = s[j], s[i] }
|
||||
|
||||
@ -1,44 +1,59 @@
|
||||
{{define "content"}}
|
||||
{{$d := .}}
|
||||
<h1 style="margin-bottom: 24px;">Categories</h1>
|
||||
<h1 style="margin-bottom:24px;">Categories</h1>
|
||||
|
||||
<div class="card">
|
||||
<form method="POST" class="flex flex-wrap" style="gap: 12px; align-items: end;">
|
||||
<div class="form-group" style="margin-bottom: 0; flex: 1;">
|
||||
<div class="card animate-on-scroll">
|
||||
<h2 style="margin-bottom:16px;">Add Category</h2>
|
||||
<form method="POST" class="flex flex-wrap" style="gap:12px; align-items:flex-end;">
|
||||
<div class="form-group" style="margin-bottom:0; flex:1; min-width:160px;">
|
||||
<label>Name</label>
|
||||
<input type="text" name="name" placeholder="e.g. Dining" required>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0; width: 80px;">
|
||||
<div class="form-group" style="margin-bottom:0; width:90px;">
|
||||
<label>Color</label>
|
||||
<input type="color" name="color" value="#7986CB">
|
||||
<input type="color" name="color" value="#7986CB" style="padding:4px; height:38px;">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Add Category</button>
|
||||
<button type="submit" class="btn btn-primary">Add</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card animate-on-scroll">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Color</th><th>Name</th><th>Monthly Budget</th><th></th></tr>
|
||||
<tr>
|
||||
<th style="width:40px;">Color</th>
|
||||
<th>Name</th>
|
||||
<th>Monthly Budget</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $d.Categories}}
|
||||
<tr>
|
||||
<td><span class="category-dot" style="background: {{.Color}}"></span></td>
|
||||
<td>{{.Name}}</td>
|
||||
<tr id="cat-row-{{.ID}}">
|
||||
<td>
|
||||
<span class="budget-display" id="budget-{{.ID}}">
|
||||
€{{cents .BudgetCents}}
|
||||
<span style="display:inline-block; width:22px; height:22px; border-radius:50%; background:{{.Color}}; border:2px solid {{.Color}}44; vertical-align:middle;"></span>
|
||||
</td>
|
||||
<td style="font-weight:500;">{{.Name}}</td>
|
||||
<td>
|
||||
<span id="budget-display-{{.ID}}" style="font-size:14px; color:#444;">
|
||||
{{if gt .BudgetCents 0}}€{{cents .BudgetCents}}{{else}}<span class="text-muted">No budget set</span>{{end}}
|
||||
</span>
|
||||
<button class="btn btn-outline btn-sm" onclick="editBudget('{{.ID}}')">edit</button>
|
||||
<span id="budget-edit-{{.ID}}" style="display:none;">
|
||||
<input type="number" id="budget-input-{{.ID}}" placeholder="0.00" step="0.01" min="0"
|
||||
value="{{if gt .BudgetCents 0}}{{div .BudgetCents 100}}{{end}}"
|
||||
style="width:100px; padding:4px 8px; border:1px solid #c5cae9; border-radius:6px; font-size:13px;">
|
||||
<button class="btn btn-primary btn-sm" onclick="saveBudget('{{.ID}}')">Save</button>
|
||||
<button class="btn btn-outline btn-sm" onclick="cancelBudget('{{.ID}}')">Cancel</button>
|
||||
</span>
|
||||
<button class="btn btn-outline btn-sm" id="budget-btn-{{.ID}}" onclick="editBudget('{{.ID}}')" style="margin-left:8px;">Edit</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger btn-sm" onclick="delCat('{{.ID}}')">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr><td colspan="4" class="text-center text-muted">No categories yet.</td></tr>
|
||||
<tr><td colspan="4" class="text-center text-muted" style="padding:32px;">No categories yet. Add one above.</td></tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
@ -47,19 +62,41 @@
|
||||
|
||||
<script>
|
||||
function editBudget(id) {
|
||||
const val = prompt('Monthly budget (€):');
|
||||
if (!val) return;
|
||||
const cents = Math.round(parseFloat(val.replace(',','.')) * 100);
|
||||
if (isNaN(cents)) return;
|
||||
document.getElementById('budget-display-' + id).style.display = 'none';
|
||||
document.getElementById('budget-btn-' + id).style.display = 'none';
|
||||
document.getElementById('budget-edit-' + id).style.display = 'inline-flex';
|
||||
document.getElementById('budget-edit-' + id).style.gap = '6px';
|
||||
document.getElementById('budget-edit-' + id).style.alignItems = 'center';
|
||||
document.getElementById('budget-input-' + id).focus();
|
||||
}
|
||||
|
||||
function cancelBudget(id) {
|
||||
document.getElementById('budget-display-' + id).style.display = 'inline';
|
||||
document.getElementById('budget-btn-' + id).style.display = 'inline-block';
|
||||
document.getElementById('budget-edit-' + id).style.display = 'none';
|
||||
}
|
||||
|
||||
function saveBudget(id) {
|
||||
const val = parseFloat(document.getElementById('budget-input-' + id).value.replace(',', '.'));
|
||||
if (isNaN(val) || val < 0) return;
|
||||
const cents = Math.round(val * 100);
|
||||
fetch('/categories/' + id, {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({budget_cents: cents})
|
||||
}).then(() => location.reload());
|
||||
}).then(r => {
|
||||
if (!r.ok) return;
|
||||
const display = document.getElementById('budget-display-' + id);
|
||||
display.innerHTML = cents > 0 ? '€' + (cents / 100).toFixed(2) : '<span class="text-muted">No budget set</span>';
|
||||
cancelBudget(id);
|
||||
});
|
||||
}
|
||||
|
||||
function delCat(id) {
|
||||
if (!confirm('Delete this category?')) return;
|
||||
fetch('/categories/' + id, {method: 'DELETE'}).then(() => location.reload());
|
||||
if (!confirm('Delete this category? Existing transactions will keep their category label.')) return;
|
||||
fetch('/categories/' + id, {method: 'DELETE'}).then(r => {
|
||||
if (r.ok) document.getElementById('cat-row-' + id).remove();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
@ -1,39 +1,88 @@
|
||||
{{define "content"}}
|
||||
{{$d := .}}
|
||||
{{$change := sub $d.ThisMonth.TotalCents $d.LastMonth.TotalCents}}
|
||||
<h1 style="margin-bottom: 24px;">Dashboard</h1>
|
||||
<h1 style="margin-bottom:24px;">Dashboard</h1>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Summary cards -->
|
||||
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(200px,1fr));">
|
||||
<div class="card value-card animate-on-scroll">
|
||||
<h2>This Month</h2>
|
||||
<h2>This Month (Net)</h2>
|
||||
<div class="value {{if lt $d.ThisMonth.TotalCents 0}}negative{{else}}positive{{end}} animate-counter"
|
||||
data-target="{{$d.ThisMonth.TotalCents}}" data-prefix="€">€0</div>
|
||||
</div>
|
||||
<div class="card value-card animate-on-scroll">
|
||||
<h2>Last Month</h2>
|
||||
<div class="value {{if lt $d.LastMonth.TotalCents 0}}negative{{else}}positive{{end}} animate-counter"
|
||||
data-target="{{$d.LastMonth.TotalCents}}" data-prefix="€">€0</div>
|
||||
<h2>Income</h2>
|
||||
<div class="value positive animate-counter"
|
||||
data-target="{{$d.ThisMonthIncome}}" data-prefix="€">€0</div>
|
||||
</div>
|
||||
<div class="card value-card animate-on-scroll">
|
||||
<h2>Change</h2>
|
||||
<h2>Expenses</h2>
|
||||
<div class="value negative animate-counter"
|
||||
data-target="{{$d.ThisMonthExpense}}" data-prefix="€">€0</div>
|
||||
</div>
|
||||
<div class="card value-card animate-on-scroll">
|
||||
<h2>vs Last Month</h2>
|
||||
<div class="value {{if lt $change 0}}negative{{else}}positive{{end}} animate-counter"
|
||||
data-target="{{$change}}" data-prefix="€">€0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Charts row -->
|
||||
<div class="grid" style="grid-template-columns:1fr 1fr;">
|
||||
<div class="card animate-on-scroll">
|
||||
<h2>Spending by Category (This Month)</h2>
|
||||
<canvas id="thisMonthChart" height="200"></canvas>
|
||||
{{if $d.ThisMonth.ByCategory}}
|
||||
<canvas id="thisMonthChart" height="220"></canvas>
|
||||
{{else}}
|
||||
<div class="empty-state" style="padding:32px;">No spending data this month.</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="card animate-on-scroll">
|
||||
<h2>Balance Trend</h2>
|
||||
<canvas id="balanceChart" height="200"></canvas>
|
||||
<h2>Balance Trend (90 days)</h2>
|
||||
{{if $d.BalanceTrend}}
|
||||
<canvas id="balanceChart" height="220"></canvas>
|
||||
{{else}}
|
||||
<div class="empty-state" style="padding:32px;">No transactions yet. <a href="/import">Import some!</a></div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Budget progress -->
|
||||
{{if $d.CategoryBudgets}}
|
||||
<div class="card animate-on-scroll">
|
||||
<h2 style="margin-bottom:16px;">Budget vs Actual (This Month)</h2>
|
||||
<div style="display:flex; flex-direction:column; gap:14px;">
|
||||
{{range $cat, $budget := $d.CategoryBudgets}}
|
||||
{{$spent := index $d.ThisMonth.ByCategory $cat}}
|
||||
{{$color := index $d.CategoryColors $cat}}
|
||||
{{$spentAbs := centsAbs $spent}}
|
||||
<div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px;">
|
||||
<span style="font-size:14px; font-weight:500; display:flex; align-items:center; gap:6px;">
|
||||
{{if $color}}<span style="width:9px;height:9px;border-radius:50%;background:{{$color}};display:inline-block;"></span>{{end}}
|
||||
{{$cat}}
|
||||
</span>
|
||||
<span style="font-size:13px; color:#666;">
|
||||
€{{cents $spentAbs}} <span style="color:#aaa;">/ €{{cents $budget}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="background:#f0f0f0; border-radius:6px; height:8px; overflow:hidden;">
|
||||
<div style="height:100%; border-radius:6px; width:{{clampPct $spentAbs $budget}}%; transition:width 0.8s ease;
|
||||
background:{{if isOver $spentAbs $budget}}#f44336{{else if $color}}{{$color}}{{else}}#3949ab{{end}};"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<p class="text-muted" style="margin-top:12px;">Set budgets in <a href="/categories">Categories</a>.</p>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- Recent transactions -->
|
||||
<div class="card animate-on-scroll">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
|
||||
<h2>Recent Transactions</h2>
|
||||
<a href="/transactions" class="btn btn-outline btn-sm">View all</a>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
@ -46,16 +95,25 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $d.RecentTxns}}
|
||||
{{$color := index $d.CategoryColors .Category}}
|
||||
<tr>
|
||||
<td>{{dateShort .Date}}</td>
|
||||
<td>{{.Description}}</td>
|
||||
<td><span class="badge">{{.Category}}</span></td>
|
||||
<td class="cents {{if lt .AmountCents 0}}negative{{else}}positive{{end}}">
|
||||
€{{cents .AmountCents}}
|
||||
<td style="white-space:nowrap;">{{dateShort .Date}}</td>
|
||||
<td style="max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{.Description}}</td>
|
||||
<td>
|
||||
<span style="display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:12px; font-size:12px; font-weight:500;
|
||||
background:{{if $color}}{{$color}}22{{else}}#e0e0e0{{end}};
|
||||
color:{{if $color}}{{$color}}{{else}}#555{{end}};
|
||||
border:1px solid {{if $color}}{{$color}}44{{else}}#ccc{{end}};">
|
||||
{{if $color}}<span style="width:7px;height:7px;border-radius:50%;background:{{$color}};"></span>{{end}}
|
||||
{{.Category}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="cents {{if lt .AmountCents 0}}negative{{else}}positive{{end}}" style="white-space:nowrap;">
|
||||
{{if lt .AmountCents 0}}−{{else}}+{{end}}€{{cents (centsAbs .AmountCents)}}
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr><td colspan="4" class="text-center text-muted">No transactions yet. <a href="/import">Import some!</a></td></tr>
|
||||
<tr><td colspan="4" class="text-center text-muted" style="padding:32px;">No transactions yet. <a href="/import">Import some!</a></td></tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
@ -64,50 +122,42 @@
|
||||
|
||||
<script>
|
||||
const barColors = ['#FF6384','#36A2EB','#FFCE56','#4BC0C0','#9966FF','#FF9F40','#C9CBCF','#00E676','#651FFF','#FF6F00','#E91E63','#607D8B','#3F51B5','#9E9E9E'];
|
||||
const catColors = { {{range $k,$v := $d.CategoryColors}}"{{$k}}":"{{$v}}",{{end}} };
|
||||
|
||||
{{if $d.ThisMonth.ByCategory}}
|
||||
const thisMonthLabels = {{jsonKeys $d.ThisMonth.ByCategory}};
|
||||
const thisMonthData = {{jsonVals $d.ThisMonth.ByCategory}};
|
||||
const barGrads = thisMonthData.map((_, i) => {
|
||||
const c = document.createElement('canvas').getContext('2d');
|
||||
const g = c.createLinearGradient(0, 0, 0, 200);
|
||||
g.addColorStop(0, barColors[i % barColors.length]);
|
||||
g.addColorStop(0.6, barColors[i % barColors.length] + 'dd');
|
||||
g.addColorStop(1, barColors[i % barColors.length] + '88');
|
||||
return g;
|
||||
});
|
||||
const resolvedColors = thisMonthLabels.map((k,i) => catColors[k] || barColors[i % barColors.length]);
|
||||
new Chart(document.getElementById('thisMonthChart'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: thisMonthLabels,
|
||||
datasets: [{
|
||||
label: 'Spending (€)',
|
||||
label: 'Amount (€)',
|
||||
data: thisMonthData.map(v => Math.abs(v) / 100),
|
||||
backgroundColor: barGrads,
|
||||
borderColor: barColors.map(c => c + 'cc'),
|
||||
backgroundColor: resolvedColors.map(c => c + 'cc'),
|
||||
borderColor: resolvedColors,
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
borderRadius: 5,
|
||||
borderSkipped: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
animation: {
|
||||
duration: 1200,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
animation: { duration: 1000, easing: 'easeOutQuart' },
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } },
|
||||
y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { callback: v => '€' + v } },
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
{{end}}
|
||||
|
||||
{{if $d.BalanceTrend}}
|
||||
const grad = document.createElement('canvas').getContext('2d').createLinearGradient(0,0,0,400);
|
||||
const grad = document.createElement('canvas').getContext('2d').createLinearGradient(0,0,0,300);
|
||||
grad.addColorStop(0, 'rgba(57,73,171,0.35)');
|
||||
grad.addColorStop(0.5, 'rgba(57,73,171,0.12)');
|
||||
grad.addColorStop(0.6, 'rgba(57,73,171,0.1)');
|
||||
grad.addColorStop(1, 'rgba(57,73,171,0.01)');
|
||||
new Chart(document.getElementById('balanceChart'), {
|
||||
type: 'line',
|
||||
@ -120,23 +170,20 @@ new Chart(document.getElementById('balanceChart'), {
|
||||
backgroundColor: grad,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 7,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 5,
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderColor: '#3949ab',
|
||||
pointBorderWidth: 3,
|
||||
pointBorderWidth: 2,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
animation: {
|
||||
duration: 1500,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
animation: { duration: 1200, easing: 'easeOutQuart' },
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: false, grid: { color: 'rgba(0,0,0,0.05)' } },
|
||||
x: { grid: { display: false } }
|
||||
y: { beginAtZero: false, grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { callback: v => '€' + v } },
|
||||
x: { grid: { display: false }, ticks: { maxTicksLimit: 8 } }
|
||||
},
|
||||
interaction: { intersect: false, mode: 'index' }
|
||||
}
|
||||
|
||||
@ -1,33 +1,39 @@
|
||||
{{define "content"}}
|
||||
{{$d := .}}
|
||||
<h1 style="margin-bottom: 24px;">Monthly Reports</h1>
|
||||
<h1 style="margin-bottom:24px;">Monthly Reports</h1>
|
||||
|
||||
<div class="card animate-on-scroll">
|
||||
<h2>12-Month Spend by Category</h2>
|
||||
<canvas id="reportChart" height="300"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="card table-wrap">
|
||||
<div class="card table-wrap animate-on-scroll" style="overflow-x:auto;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Month</th>
|
||||
{{range $cat, $_ := $d.CategoryNames}}
|
||||
<th class="text-right">{{$cat}}</th>
|
||||
<th class="text-right" style="white-space:nowrap;">
|
||||
{{$color := index $d.CategoryColors $cat}}
|
||||
{{if $color}}<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:{{$color}};margin-right:4px;vertical-align:middle;"></span>{{end}}{{$cat}}
|
||||
</th>
|
||||
{{end}}
|
||||
<th class="text-right">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $d.MonthlyData}}
|
||||
{{range $row := $d.MonthlyData}}
|
||||
<tr>
|
||||
<td><strong>{{.Month}}</strong></td>
|
||||
<td><strong>{{$row.Month}}</strong></td>
|
||||
{{range $cat, $_ := $d.CategoryNames}}
|
||||
<td class="cents">€{{cents (index $.Totals $cat)}}</td>
|
||||
<td class="cents">
|
||||
{{$v := index $row.Totals $cat}}
|
||||
{{if $v}}<span class="{{if lt $v 0}}negative{{else}}positive{{end}}">€{{cents $v}}</span>{{else}}<span class="text-muted">—</span>{{end}}
|
||||
</td>
|
||||
{{end}}
|
||||
{{$total := sub 0 0}}
|
||||
{{range $_, $v := .Totals}}{{$total = add $total $v}}{{end}}
|
||||
<td class="cents"><strong>€{{cents $total}}</strong></td>
|
||||
{{range $_, $v := $row.Totals}}{{$total = add $total $v}}{{end}}
|
||||
<td class="cents"><strong class="{{if lt $total 0}}negative{{else}}positive{{end}}">€{{cents $total}}</strong></td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
@ -44,8 +50,10 @@ new Chart(document.getElementById('reportChart'), {
|
||||
{{range $cat, $_ := $d.CategoryNames}}
|
||||
{
|
||||
label: '{{$cat}}',
|
||||
data: [{{range $d.MonthlyData}}{{index .Totals $cat | abs | div 100}},{{end}}],
|
||||
data: [{{range $d.MonthlyData}}{{$v := index .Totals $cat}}{{if $v}}{{abs $v | div 100}}{{else}}0{{end}},{{end}}],
|
||||
backgroundColor: '{{index $colors $cat}}',
|
||||
borderColor: '{{index $colors $cat}}',
|
||||
borderWidth: 0,
|
||||
borderRadius: 2,
|
||||
},
|
||||
{{end}}
|
||||
@ -55,6 +63,7 @@ new Chart(document.getElementById('reportChart'), {
|
||||
responsive: true,
|
||||
animation: { duration: 1000, easing: 'easeOutQuart' },
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { boxWidth: 12, padding: 16 } },
|
||||
tooltip: { mode: 'index', intersect: false }
|
||||
},
|
||||
scales: {
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
{{define "content"}}
|
||||
{{$d := .}}
|
||||
<h1 style="margin-bottom: 24px;">Transactions</h1>
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px;">
|
||||
<h1>Transactions</h1>
|
||||
<button class="btn btn-primary" onclick="openAddModal()">+ Add Transaction</button>
|
||||
</div>
|
||||
|
||||
<div class="card mb-16">
|
||||
<form method="GET" class="flex flex-wrap">
|
||||
<div class="form-group" style="margin-bottom: 0; min-width: 150px;">
|
||||
<form method="GET" class="flex flex-wrap" style="gap:8px; align-items:flex-end;">
|
||||
<div class="form-group" style="margin-bottom:0; min-width:160px;">
|
||||
<label style="font-size:12px; color:#888;">Category</label>
|
||||
<select name="category">
|
||||
<option value="">All Categories</option>
|
||||
{{range $d.Categories}}
|
||||
@ -12,7 +16,8 @@
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0; min-width: 120px;">
|
||||
<div class="form-group" style="margin-bottom:0; min-width:120px;">
|
||||
<label style="font-size:12px; color:#888;">Period</label>
|
||||
<select name="days">
|
||||
<option value="">All time</option>
|
||||
<option value="30" {{if eq $.Days "30"}}selected{{end}}>30 days</option>
|
||||
@ -20,14 +25,21 @@
|
||||
<option value="365" {{if eq $.Days "365"}}selected{{end}}>1 year</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0; min-width: 200px;">
|
||||
<div class="form-group" style="margin-bottom:0; flex:1; min-width:200px;">
|
||||
<label style="font-size:12px; color:#888;">Search</label>
|
||||
<input type="text" name="search" placeholder="Search description..." value="{{.Search}}">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
{{if or $.Cat $.Search $.Days}}
|
||||
<a href="/transactions" class="btn btn-outline">Clear</a>
|
||||
{{end}}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
|
||||
<span class="text-muted">{{len $d.Txns}} transaction{{if ne (len $d.Txns) 1}}s{{end}}</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
@ -42,46 +54,181 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $d.Txns}}
|
||||
<tr>
|
||||
<td>{{dateShort .Date}}</td>
|
||||
{{$color := index $d.CategoryColors .Category}}
|
||||
<tr id="row-{{.ID}}">
|
||||
<td style="white-space:nowrap;">{{dateShort .Date}}</td>
|
||||
<td class="desc-cell">{{.Description}}</td>
|
||||
<td>{{.AccountID}}</td>
|
||||
<td>
|
||||
<span class="badge">{{.Category}}</span>
|
||||
<button class="btn btn-outline btn-sm" onclick="editCat('{{.ID}}')">edit</button>
|
||||
</td>
|
||||
<td class="cents {{if lt .AmountCents 0}}negative{{else}}positive{{end}}">
|
||||
€{{cents .AmountCents}}
|
||||
<td class="text-muted" style="font-size:13px;">
|
||||
{{$name := index $d.AccountNames .AccountID}}
|
||||
{{if $name}}{{$name}}{{else}}<span style="opacity:0.4;">—</span>{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger btn-sm" onclick="delTxn('{{.ID}}')">x</button>
|
||||
<span class="cat-badge" id="cat-{{.ID}}"
|
||||
style="background:{{if $color}}{{$color}}22{{else}}#e0e0e0{{end}}; color:{{if $color}}{{$color}}{{else}}#555{{end}}; border:1px solid {{if $color}}{{$color}}44{{else}}#ccc{{end}}; padding:2px 10px; border-radius:12px; font-size:12px; font-weight:500;">
|
||||
{{if $color}}<span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:{{$color}};margin-right:5px;vertical-align:middle;"></span>{{end}}{{.Category}}
|
||||
</span>
|
||||
<select class="cat-select" id="sel-{{.ID}}" style="display:none; font-size:12px; padding:2px 6px; border-radius:8px; border:1px solid #c5cae9;"
|
||||
onchange="saveCategory('{{.ID}}', this.value)" onblur="cancelEdit('{{.ID}}')">
|
||||
{{range $d.Categories}}
|
||||
<option value="{{.Name}}" {{if eq .Name $.Category}}selected{{end}}>{{.Name}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
<button class="btn btn-outline btn-sm" onclick="editCat('{{.ID}}')" id="edit-btn-{{.ID}}" title="Edit category">✎</button>
|
||||
</td>
|
||||
<td class="cents {{if lt .AmountCents 0}}negative{{else}}positive{{end}}" style="font-variant-numeric:tabular-nums; white-space:nowrap;">
|
||||
{{if lt .AmountCents 0}}−{{else}}+{{end}}€{{cents (centsAbs .AmountCents)}}
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger btn-sm" onclick="delTxn('{{.ID}}')" title="Delete">✕</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr><td colspan="6" class="text-center text-muted">No transactions found. <a href="/import">Import some!</a></td></tr>
|
||||
<tr><td colspan="6" class="text-center text-muted" style="padding:40px;">No transactions found. <a href="/import">Import some</a> or <button class="btn btn-outline btn-sm" onclick="openAddModal()">add manually</button>.</td></tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Transaction Modal -->
|
||||
<div id="add-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:200; align-items:center; justify-content:center;">
|
||||
<div class="card" style="width:420px; max-width:95vw; margin:0; animation:fadeIn 0.2s ease-out;">
|
||||
<h2 style="font-size:18px; font-weight:700; color:#333; margin-bottom:20px;">Add Transaction</h2>
|
||||
<div class="form-group">
|
||||
<label>Date</label>
|
||||
<input type="date" id="add-date" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<input type="text" id="add-desc" placeholder="e.g. Coffee at Starbucks" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Amount (€)</label>
|
||||
<div class="flex" style="gap:8px;">
|
||||
<select id="add-sign" style="width:90px; padding:8px; border:1px solid #ddd; border-radius:8px;">
|
||||
<option value="-1">Expense</option>
|
||||
<option value="1">Income</option>
|
||||
</select>
|
||||
<input type="number" id="add-amount" placeholder="0.00" step="0.01" min="0" style="flex:1;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Category</label>
|
||||
<select id="add-cat">
|
||||
{{range $d.Categories}}
|
||||
<option value="{{.Name}}">{{.Name}}</option>
|
||||
{{end}}
|
||||
{{if not $d.Categories}}
|
||||
<option value="Others">Others</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Account</label>
|
||||
<select id="add-account">
|
||||
<option value="">— none —</option>
|
||||
{{range $d.Accounts}}
|
||||
<option value="{{.ID}}">{{.Name}} ({{.Type}})</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex" style="gap:8px; justify-content:flex-end; margin-top:8px;">
|
||||
<button class="btn btn-outline" onclick="closeAddModal()">Cancel</button>
|
||||
<button class="btn btn-primary" onclick="submitAdd()">Save</button>
|
||||
</div>
|
||||
<div id="add-error" class="error" style="display:none; margin-top:8px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.desc-cell { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.cat-badge { cursor:default; display:inline-flex; align-items:center; }
|
||||
</style>
|
||||
<script>
|
||||
const catColors = {{range $k,$v := $d.CategoryColors}}"{{$k}}":"{{$v}}",{{end}};
|
||||
|
||||
function editCat(id) {
|
||||
const cat = prompt('New category:');
|
||||
if (!cat) return;
|
||||
document.getElementById('cat-' + id).style.display = 'none';
|
||||
document.getElementById('edit-btn-' + id).style.display = 'none';
|
||||
const sel = document.getElementById('sel-' + id);
|
||||
sel.style.display = 'inline-block';
|
||||
sel.focus();
|
||||
}
|
||||
|
||||
function cancelEdit(id) {
|
||||
setTimeout(() => {
|
||||
document.getElementById('cat-' + id).style.display = 'inline-flex';
|
||||
document.getElementById('edit-btn-' + id).style.display = 'inline-block';
|
||||
document.getElementById('sel-' + id).style.display = 'none';
|
||||
}, 150);
|
||||
}
|
||||
|
||||
function saveCategory(id, cat) {
|
||||
fetch('/api/transactions/' + id, {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({category: cat})
|
||||
}).then(() => location.reload());
|
||||
}).then(r => {
|
||||
if (!r.ok) return;
|
||||
const badge = document.getElementById('cat-' + id);
|
||||
const color = catColors[cat] || '';
|
||||
badge.style.background = color ? color + '22' : '#e0e0e0';
|
||||
badge.style.color = color || '#555';
|
||||
badge.style.border = '1px solid ' + (color ? color + '44' : '#ccc');
|
||||
badge.innerHTML = (color ? `<span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:${color};margin-right:5px;vertical-align:middle;"></span>` : '') + cat;
|
||||
cancelEdit(id);
|
||||
});
|
||||
}
|
||||
|
||||
function delTxn(id) {
|
||||
if (!confirm('Delete this transaction?')) return;
|
||||
fetch('/api/transactions/' + id, {method: 'DELETE'})
|
||||
.then(() => location.reload());
|
||||
fetch('/api/transactions/' + id, {method: 'DELETE'}).then(r => {
|
||||
if (r.ok) document.getElementById('row-' + id).remove();
|
||||
});
|
||||
}
|
||||
|
||||
function openAddModal() {
|
||||
const modal = document.getElementById('add-modal');
|
||||
modal.style.display = 'flex';
|
||||
document.getElementById('add-date').value = new Date().toISOString().slice(0,10);
|
||||
document.getElementById('add-desc').focus();
|
||||
}
|
||||
|
||||
function closeAddModal() {
|
||||
document.getElementById('add-modal').style.display = 'none';
|
||||
document.getElementById('add-error').style.display = 'none';
|
||||
}
|
||||
|
||||
function submitAdd() {
|
||||
const date = document.getElementById('add-date').value;
|
||||
const desc = document.getElementById('add-desc').value.trim();
|
||||
const sign = parseInt(document.getElementById('add-sign').value);
|
||||
const amt = parseFloat(document.getElementById('add-amount').value);
|
||||
const cat = document.getElementById('add-cat').value;
|
||||
const account = document.getElementById('add-account').value;
|
||||
|
||||
if (!date || !desc || isNaN(amt) || amt <= 0) {
|
||||
const err = document.getElementById('add-error');
|
||||
err.textContent = 'Please fill in date, description, and a positive amount.';
|
||||
err.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
const amountCents = Math.round(amt * 100) * sign;
|
||||
fetch('/api/transactions', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({account_id: account, date, description: desc, amount_cents: amountCents, category: cat})
|
||||
}).then(r => {
|
||||
if (!r.ok) { document.getElementById('add-error').textContent = 'Failed to save.'; document.getElementById('add-error').style.display = 'block'; return; }
|
||||
closeAddModal();
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('add-modal').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeAddModal();
|
||||
});
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeAddModal(); });
|
||||
</script>
|
||||
<style>
|
||||
.desc-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
</style>
|
||||
{{end}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user