brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: recurring budget entries (lazy materialise) + preferred Satispay badge

Browse Source
This commit is contained in:
Davide Scaini
2026-06-03 10:47:58 +02:00
parent cf7ce027b1
commit 08f451ec71
2 changed files with 76 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/support/index.astro
+31 -11
View File
@@ -23,12 +23,17 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
style="background:#FF5E5B; color:#fff;">
☕ Support on Ko-fi
</a>
<a href="https://web.satispay.com/download/qrcode/S6Y-CON--BE9BD345-4499-4C1D-9AC3-D62FC5FF0AD4"
target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
style="background:#E3162C; color:#fff;">
Satispay @brutsalvadi
</a>
<div class="relative">
<a href="https://web.satispay.com/download/qrcode/S6Y-CON--BE9BD345-4499-4C1D-9AC3-D62FC5FF0AD4"
target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
style="background:#E3162C; color:#fff;">
Satispay @brutsalvadi
</a>
<span class="absolute -top-2 -right-2 px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-green-500 text-white leading-none">
preferred
</span>
</div>
</div>
<div class="mb-8">
<img src="/satispay-qr.jpg" alt="Satispay QR code — @brutsalvadi" class="w-36 h-36 rounded-xl" />
@@ -84,6 +89,10 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
</div>
<input id="entry-note" type="text" placeholder="Note (optional)"
class="w-full px-3 py-1.5 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-[--accent]" />
<label class="flex items-center gap-2 text-xs text-zinc-400 cursor-pointer select-none">
<input id="entry-recurring" type="checkbox" class="accent-[--accent] w-3.5 h-3.5" />
Repeat every month
</label>
<p id="budget-add-err" class="text-red-400 text-xs hidden"></p>
<div class="flex gap-2 pt-1">
<button type="submit" class="px-4 py-1.5 rounded-lg bg-[--accent] hover:opacity-90 text-white text-sm font-medium transition-opacity">Add</button>
@@ -410,9 +419,14 @@ function renderBudget() {
html += `<div class="divide-y divide-zinc-800/60 rounded-xl border border-zinc-800 overflow-hidden">`;
for (const e of items) {
const icon = e.type === 'donation' ? '💚' : '🔴';
const sign = e.type === 'donation' ? '+' : '−';
const color = e.type === 'donation' ? 'text-green-400' : 'text-red-400';
const icon = e.type === 'donation' ? '💚' : '🔴';
const sign = e.type === 'donation' ? '+' : '−';
const color = e.type === 'donation' ? 'text-green-400' : 'text-red-400';
const recurBadge = e.recurring
? `<span class="text-zinc-500 text-xs shrink-0" title="Repeats every month">↻</span>`
: e.recurring_from
? `<span class="text-zinc-600 text-xs shrink-0" title="Auto-added (recurring)">↻</span>`
: '';
const adminBtns = isAdmin
? `<button data-edit="${e.id}" class="edit-btn text-zinc-600 hover:text-zinc-300 text-xs px-1 transition-colors">✎</button>
<button data-del="${e.id}" class="del-btn text-zinc-700 hover:text-red-400 text-xs px-1 transition-colors">✕</button>`
@@ -422,6 +436,7 @@ function renderBudget() {
<span class="flex-1 text-zinc-300 min-w-0">
${e.label}${e.note ? `<span class="text-zinc-600 text-xs ml-2">${e.note}</span>` : ''}
</span>
${recurBadge}
<span class="font-medium shrink-0 ${color}">${sign}${fmtEur(e.amount_eur)}</span>
${adminBtns}
</div>`;
@@ -464,6 +479,9 @@ function renderBudget() {
class="px-2 py-1 rounded bg-zinc-800 border border-zinc-700 text-white text-xs focus:outline-none [color-scheme:dark]" />
<input name="note" value="${entry.note}" placeholder="Note"
class="flex-1 min-w-24 px-2 py-1 rounded bg-zinc-800 border border-zinc-700 text-white text-xs focus:outline-none" />
<label class="flex items-center gap-1 text-xs text-zinc-400 cursor-pointer">
<input type="checkbox" name="recurring" ${entry.recurring?'checked':''} class="accent-[--accent] w-3 h-3" />↻
</label>
<button type="submit" class="px-3 py-1 rounded bg-[--accent] text-white text-xs hover:opacity-90">Save</button>
<button type="button" class="cancel-edit px-2 py-1 rounded bg-zinc-800 text-zinc-400 text-xs hover:bg-zinc-700">✕</button>
</form>`;
@@ -471,7 +489,7 @@ function renderBudget() {
row.querySelector<HTMLFormElement>('.inline-edit-form')!.addEventListener('submit', async ev => {
ev.preventDefault();
const fd = new FormData(ev.target as HTMLFormElement);
const body = { type: fd.get('type'), label: fd.get('label'), amount_eur: parseFloat(fd.get('amount_eur') as string), month: fd.get('month'), note: fd.get('note') };
const body = { type: fd.get('type'), label: fd.get('label'), amount_eur: parseFloat(fd.get('amount_eur') as string), month: fd.get('month'), note: fd.get('note'), recurring: fd.get('recurring') === 'on' };
const r = await fetch(`/api/budget/entries/${id}`, { method: 'PATCH', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
if (r.ok) { const updated = await r.json(); const idx = budgetData!.entries.findIndex(e => e.id === id); if (idx !== -1) budgetData!.entries[idx] = updated; renderBudget(); }
});
@@ -533,11 +551,13 @@ addForm.addEventListener('submit', async e => {
const note = (document.getElementById('entry-note') as HTMLInputElement).value.trim();
if (!label) { addErr.textContent = 'Label is required.'; addErr.classList.remove('hidden'); return; }
if (isNaN(amount)) { addErr.textContent = 'Amount is required.'; addErr.classList.remove('hidden'); return; }
const r = await fetch('/api/budget/entries', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: addEntryType, label, amount_eur: amount, month, note }) });
const recurring = (document.getElementById('entry-recurring') as HTMLInputElement).checked;
const r = await fetch('/api/budget/entries', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: addEntryType, label, amount_eur: amount, month, note, recurring: recurring || undefined }) });
if (r.ok) {
budgetData!.entries.push(await r.json());
addForm.classList.add('hidden'); addForm.reset();
(document.getElementById('entry-month') as HTMLInputElement).value = defaultMonth;
(document.getElementById('entry-recurring') as HTMLInputElement).checked = false;
(addForm.querySelector('.entry-type-btn[data-type="donation"]') as HTMLButtonElement).click();
renderBudget();
} else {