tighten views

This commit is contained in:
JCEEE
2026-08-04 15:32:59 +01:00
parent c38ca43f0b
commit 97bd679954
14 changed files with 776 additions and 309 deletions
@@ -65,6 +65,17 @@
famStore.initialized ? famStore.bonusConfigs : data.bonusConfigs || []
);
// Admin overview stat tiles (summed across this week's member summaries).
let adminTiles = $derived.by(() => {
const sums = summary?.summaries || [];
return {
members: parentMembers.length,
pts: sums.reduce((t: number, s: any) => t + (Number(s.pointsEarned) || 0), 0),
money: sums.reduce((t: number, s: any) => t + (Number(s.moneyEarned) || 0), 0),
chores: sums.reduce((t: number, s: any) => t + (Number(s.choresCompleted) || 0), 0)
};
});
function totalChoresFor(memberId: string): number {
return parentAssigned.filter((a: any) => a.memberId === memberId).length;
}
@@ -612,14 +623,37 @@
<!-- Parent View: Admin Overview -->
<ViewHeader
title={famStore.fam?.name || 'Dashboard'}
subtitle={summary?.weekStart ? `Week of ${summary.weekStart}` : ''}
subtitle={summary?.weekStart ? `Week of ${formatDDMMYY(summary.weekStart)}` : ''}
hero
/>
{#if toast}
<div class="toast">{toast}</div>
{/if}
<CardGrid>
<!-- WEEK-TO-DATE TILES -->
<div class="tiles">
<div class="tile tile-members">
<span class="tile-val">{adminTiles.members}</span>
<span class="tile-lbl">members</span>
</div>
<div class="tile tile-pts">
<span class="tile-val">{adminTiles.pts}</span>
<span class="tile-lbl">points this week</span>
</div>
<div class="tile tile-cash">
<span class="tile-val">£{adminTiles.money.toFixed(2)}</span>
<span class="tile-lbl">cash this week</span>
</div>
<div class="tile tile-chores">
<span class="tile-val">{adminTiles.chores}</span>
<span class="tile-lbl">chores done</span>
</div>
</div>
<div class="kanban-scroll">
<div class="kanban-inner">
<CardGrid>
<Card cols={1} title="Members">
{#each parentMembers as m}
{@const total = totalChoresFor(m.id)}
@@ -838,6 +872,8 @@
{/if}
</Card>
</CardGrid>
</div>
</div>
<CardGrid>
<Card cols={3} title="Debug: Preview payday" accent="#f59e0b">
<p class="eow-desc">
@@ -1328,10 +1364,17 @@
.member-card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 0.65rem;
border-left: 4px solid #6366f1;
border-radius: 10px;
padding: 0.65rem 0.85rem;
background: white;
margin-bottom: 0.6rem;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.member-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
border-color: #c7d2fe;
}
.member-card:last-child {
margin-bottom: 0;
@@ -1386,7 +1429,7 @@
}
.bar-fill {
height: 100%;
background: #6366f1;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 4px;
transition: width 0.3s;
}
@@ -1430,11 +1473,16 @@
.trigger-card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 0.65rem;
border-left: 3px solid #22c55e;
border-radius: 10px;
padding: 0.65rem 0.85rem;
background: #f0fdf4;
margin-bottom: 0.6rem;
border-left: 3px solid #22c55e;
transition: transform 0.15s, box-shadow 0.15s;
}
.trigger-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.trigger-card:last-child {
margin-bottom: 0;
@@ -1753,6 +1801,16 @@
color: #6d28d9;
}
/* ── Kanban scroll for parent view cards ── */
.kanban-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.kanban-inner {
min-width: 450px;
}
.tiles {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -1774,6 +1832,12 @@
.tile-pts {
background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.tile-members {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.tile-chores {
background: linear-gradient(135deg, #0284c7, #38bdf8);
}
.tile-val {
font-size: 1.6rem;
font-weight: 800;