JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance with charts and home layout, and make more mobile friendly

Browse Source
This commit is contained in:
JCEEE
2026-08-31 18:03:44 +01:00
parent 3bf78d777c
commit 11a09d65ff
10 changed files with 724 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/[fam]/[username]/+page.svelte
+75 -19
View File
@@ -383,12 +383,24 @@
);
let allTimeCash = $derived.by(() =>
completions
.filter((c) => c.memberId === memberId)
.reduce((sum, c) => {
const chore = assigned.find((a) => a.id === c.assignedChoreId);
return sum + (chore?.type === 'money' ? Number(chore.value) : 0);
}, 0) +
rewards
.filter((r) => r.memberId === memberId && r.rewardType === 'cash' && r.status === 'claimed')
.reduce((sum, r) => sum + Number(r.value), 0)
);
let allTimePoints = $derived.by(() =>
completions
.filter((c) => c.memberId === memberId)
.reduce((sum, c) => {
const chore = assigned.find((a) => a.id === c.assignedChoreId);
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
}, 0) +
rewards
.filter((r) => r.memberId === memberId && r.rewardType === 'points' && r.status === 'claimed')
.reduce((sum, r) => sum + Number(r.value), 0)
@@ -1374,16 +1386,25 @@
<div class="wallet">
<div class="wallet-top">
<span class="wallet-lbl">{@html walletIcon} Wallet</span>
{#if allTimeCash > 0 || allTimePoints > 0}
<span class="wallet-total">
<span class="wallet-cash">£{allTimeCash.toFixed(2)}</span>
<span class="wallet-dot">·</span>
<span class="wallet-pts">{allTimePoints} pts</span>
</span>
{/if}
</div>
<!-- Lifetime earnings (everything earned + claimed), one-shot totals -->
<div class="lifetime">
<div class="life-cell life-cash">
<span class="life-num">£{allTimeCash.toFixed(2)}</span>
<span class="life-lbl">earned all time</span>
</div>
<div class="life-cell life-pts">
<span class="life-num">{allTimePoints.toLocaleString()}</span>
<span class="life-lbl">points accrued</span>
</div>
</div>
<div class="wallet-sub">
<span class="wallet-sub-lbl">{@html clockIcon} To collect from parent</span>
</div>
{#if pendingRewards.length === 0}
<p class="wallet-empty">No rewards waiting</p>
<p class="wallet-empty">Nothing waiting — you're all caught up</p>
{:else}
<div class="wallet-rewards">
{#each pendingRewards as r}
@@ -2410,21 +2431,56 @@
vertical-align: -0.15em;
margin-right: 0.3em;
}
.wallet-total {
.lifetime {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 0.75rem 0 1rem;
}
.life-cell {
display: flex;
gap: 0.4rem;
align-items: center;
font-size: 0.9rem;
font-weight: 800;
flex-direction: column;
gap: 0.1rem;
padding: 0.85rem 1rem;
border-radius: 12px;
}
.wallet-cash {
color: #059669;
.life-cash {
background: linear-gradient(135deg, #059669, #10b981);
}
.wallet-pts {
color: #7c3aed;
.life-pts {
background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.wallet-dot {
color: #d1d5db;
.life-num {
font-size: 1.7rem;
font-weight: 900;
color: #fff;
line-height: 1;
letter-spacing: -0.01em;
}
.life-lbl {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.9);
margin-top: 0.15rem;
}
.wallet-sub {
border-top: 1px solid #eef0f2;
padding-top: 0.6rem;
margin-bottom: 0.6rem;
}
.wallet-sub-lbl {
font-size: 0.72rem;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.wallet-sub-lbl :global(svg) {
width: 1em;
height: 1em;
vertical-align: -0.15em;
margin-right: 0.3em;
}
.wallet-empty {
margin: 0;