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

tighten views

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
MEMORY.md
+8
View File
@@ -150,4 +150,12 @@
- **Problem**: the chores todo card rendered `due 050826` (DDMMYY code) — ambiguous/terrible for a due date. - **Problem**: the chores todo card rendered `due 050826` (DDMMYY code) — ambiguous/terrible for a due date.
- **Fix**: added `formatShortDate()` to `frontend/src/lib/format.ts` — renders `5 Aug` (adds ` 26` when the year isn't the current one). Chores todo card now shows `due 5 Aug`. AGENTS.md date rule updated: DDMMYY for dense/range contexts, `formatShortDate()` for single human-readable dates like due dates. - **Fix**: added `formatShortDate()` to `frontend/src/lib/format.ts` — renders `5 Aug` (adds ` 26` when the year isn't the current one). Chores todo card now shows `due 5 Aug`. AGENTS.md date rule updated: DDMMYY for dense/range contexts, `formatShortDate()` for single human-readable dates like due dates.
### 2026-08-04 — Child-Dashboard Design Lead Applied to All Pages
- **Design principal** (from `[fam]/[username]` child dash): gradient hero lead (`linear-gradient(135deg, #6366f1, #8b5cf6 55%, #a855f7)`, radius 16px, glow shadow, white text), gradient stat tiles, rounded white cards.
- **`ViewHeader` hero variant**: added `hero` prop to `frontend/src/lib/components/ViewHeader.svelte` — renders the title/subtitle/tools on the gradient hero (tabs/nav/sort get tinted-on-white styling). Off by default, so no behavior change elsewhere.
- **Applied `hero` to**: admin dashboard (fam name), chores, bonuses, rewards, settings, preferences, platform admin `/admin`.
- **Admin dashboard stat tiles**: added 4 gradient tiles (members / points / cash / chores done) reusing the child `.tiles`/`.tile` pattern + new `.tile-members`/`.tile-chores` colors, from a new `adminTiles` derived summing `summary.summaries`. Also fixed admin subtitle `Week of {YYYY-MM-DD}` → `Week of {DDMMYY}`.
- **Check**: frontend `svelte-check` stays at 12 baseline errors. Note: frontend dev server on :2080 was not running when verified (proxy :3456 up).
frontend/src/lib/components/Card.svelte
+11 -2
View File
@@ -3,21 +3,23 @@
cols = 1, cols = 1,
title, title,
accent, accent,
scrollX = false,
children children
}: { cols?: 1 | 2 | 3 | 4 | 5 | 6; title?: string; accent?: string; children?: any } = $props(); }: { cols?: 1 | 2 | 3 | 4 | 5 | 6; title?: string; accent?: string; scrollX?: boolean; children?: any } = $props();
</script> </script>
<div <div
class="card" class="card"
style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}" style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}"
class:has-accent={!!accent} class:has-accent={!!accent}
class:scroll-x={scrollX}
> >
{#if title} {#if title}
<div class="card-header"> <div class="card-header">
<span class="card-title">{title}</span> <span class="card-title">{title}</span>
</div> </div>
{/if} {/if}
<div class="card-body"> <div class="card-body" class:scroll-x-body={scrollX}>
{@render children?.()} {@render children?.()}
</div> </div>
</div> </div>
@@ -29,6 +31,9 @@
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
} }
.card.scroll-x {
overflow: visible;
}
.card.has-accent { .card.has-accent {
border-top: 3px solid var(--card-accent, #6366f1); border-top: 3px solid var(--card-accent, #6366f1);
} }
@@ -45,4 +50,8 @@
.card-body { .card-body {
padding: 1rem; padding: 1rem;
} }
.card-body.scroll-x-body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
</style> </style>
frontend/src/lib/components/ViewHeader.svelte
+23 -2
View File
@@ -1,14 +1,15 @@
<script lang="ts"> <script lang="ts">
let { title, subtitle, tabs, weeknav, sort }: { let { title, subtitle, hero = false, tabs, weeknav, sort }: {
title: string; title: string;
subtitle?: string; subtitle?: string;
hero?: boolean;
tabs?: { items: { label: string; value: string }[]; active: string; onchange: (v: string) => void }; tabs?: { items: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
weeknav?: { current: string; onPrev: () => void; onNext: () => void }; weeknav?: { current: string; onPrev: () => void; onNext: () => void };
sort?: { options: { label: string; value: string }[]; active: string; onchange: (v: string) => void }; sort?: { options: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
} = $props(); } = $props();
</script> </script>
<div class="view-header"> <div class="view-header" class:hero>
<div class="view-title-group"> <div class="view-title-group">
<h1 class="view-title">{title}</h1> <h1 class="view-title">{title}</h1>
{#if subtitle}<p class="view-subtitle">{subtitle}</p>{/if} {#if subtitle}<p class="view-subtitle">{subtitle}</p>{/if}
@@ -68,4 +69,24 @@
padding: 0.3rem 0.6rem; border: 1px solid #d1d5db; border-radius: 5px; padding: 0.3rem 0.6rem; border: 1px solid #d1d5db; border-radius: 5px;
font-size: 0.85rem; background: #fff; font-size: 0.85rem; background: #fff;
} }
/* ── Hero lead (child-dashboard style) ── */
.view-header.hero {
background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #a855f7);
border-radius: 16px;
padding: 1.25rem 1.5rem;
color: #fff;
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
}
.view-header.hero .view-title-group { margin-bottom: 0.25rem; }
.view-header.hero .view-title { color: #fff; }
.view-header.hero .view-subtitle { color: rgba(255, 255, 255, 0.85); }
.view-header.hero .view-tools { margin-top: 0.75rem; }
.view-header.hero .tab-bar { background: rgba(255, 255, 255, 0.16); }
.view-header.hero .tab-btn { color: rgba(255, 255, 255, 0.9); }
.view-header.hero .tab-btn:hover { color: #fff; }
.view-header.hero .tab-btn.active { background: #fff; color: #4338ca; }
.view-header.hero .nav-btn { background: rgba(255, 255, 255, 0.92); border-color: transparent; color: #4338ca; }
.view-header.hero .nav-label { color: #fff; }
.view-header.hero .sort-select { background: rgba(255, 255, 255, 0.92); color: #1e1b4b; }
</style> </style>
frontend/src/routes/[fam]/+layout.svelte
+1
View File
@@ -74,6 +74,7 @@
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: whitesmoke;
} }
.app-main { .app-main {
margin-left: 220px; margin-left: 220px;
frontend/src/routes/[fam]/+page.svelte
+281 -88
View File
@@ -1,8 +1,9 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from '$app/state';
import { famStore } from '$lib/stores/fam.svelte';
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { Chart, registerables } from 'chart.js'; import { Chart, registerables } from 'chart.js';
import { ViewHeader, CardGrid, Card } from '$lib/components';
import { formatDDMMYY } from '$lib/format';
Chart.register(...registerables); Chart.register(...registerables);
@@ -10,6 +11,10 @@
let famSlug = $derived(page.params.fam); let famSlug = $derived(page.params.fam);
let summary = $state(data.summary); let summary = $state(data.summary);
let members = $state(data.members || []);
let templates = $state(data.templates || []);
let assigned = $state(data.assigned || []);
let donutCanvases = $state<Record<string, HTMLCanvasElement | undefined>>({}); let donutCanvases = $state<Record<string, HTMLCanvasElement | undefined>>({});
let donutCharts: Record<string, Chart> = {}; let donutCharts: Record<string, Chart> = {};
let choresCanvas: HTMLCanvasElement | undefined; let choresCanvas: HTMLCanvasElement | undefined;
@@ -17,22 +22,24 @@
function captureCanvas(node: HTMLCanvasElement, memberId: string) { function captureCanvas(node: HTMLCanvasElement, memberId: string) {
donutCanvases[memberId] = node; donutCanvases[memberId] = node;
return { return { destroy() { delete donutCanvases[memberId]; } };
destroy() { delete donutCanvases[memberId]; }
};
} }
let members = $state(data.members); // ─── Derived tile stats ───
let templates = $state(data.templates); let tileMembers = $derived(members.length);
let tilePts = $derived(
summary?.summaries?.reduce((s: number, m: any) => s + (m.pointsEarned || 0), 0) ?? 0
);
let tileMoney = $derived(
summary?.summaries?.reduce((s: number, m: any) => s + (Number(m.moneyEarned) || 0), 0) ?? 0
);
let tileChores = $derived(
summary?.summaries?.reduce((s: number, m: any) => s + (m.choresCompleted || 0), 0) ?? 0
);
$effect(() => { function totalChoresFor(memberId: string) {
if (data.members?.length) members = data.members; return assigned.filter((a: any) => a.memberId === memberId).length;
if (data.templates?.length) templates = data.templates;
if (famStore.initialized) {
if (famStore.members.length) members = famStore.members;
if (famStore.templates.length) templates = famStore.templates;
} }
})
onMount(() => { onMount(() => {
if (!summary?.summaries?.length) return; if (!summary?.summaries?.length) return;
@@ -53,7 +60,9 @@
data: { labels, datasets }, data: { labels, datasets },
options: { options: {
responsive: true, responsive: true,
plugins: { legend: { display: true }, title: { display: true, text: 'Chores per day' } }, plugins: {
legend: { display: summary.summaries.length > 1, position: 'bottom' },
},
scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
}, },
}); });
@@ -75,18 +84,7 @@
borderWidth: 0, borderWidth: 0,
}], }],
}, },
options: { options: { responsive: true, cutout: '70%', plugins: { legend: { display: false } } },
responsive: true,
cutout: '70%',
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: (ctx) => `${ctx.label}: ${ctx.parsed} chores`,
},
},
},
},
}); });
} }
}); });
@@ -94,82 +92,277 @@
onDestroy(() => { onDestroy(() => {
choresChart?.destroy(); choresChart?.destroy();
for (const c of Object.values(donutCharts)) c?.destroy(); for (const c of Object.values(donutCharts)) c?.destroy();
famStore.cleanup();
}); });
</script> </script>
<h1>🏠 {famSlug}</h1> <ViewHeader
title={famSlug}
subtitle={summary?.weekStart ? `Week of ${formatDDMMYY(summary.weekStart)}` : 'Dashboard'}
hero
/>
{#if summary?.summaries?.length} <!-- STAT TILES -->
<h2>This week</h2> <div class="tiles">
<table> <div class="tile tile-members">
<thead><tr><th>Member</th><th>Points</th><th>Done</th></tr></thead> <span class="tile-val">{tileMembers}</span>
<tbody> <span class="tile-lbl">members</span>
</div>
<div class="tile tile-pts">
<span class="tile-val">{tilePts}</span>
<span class="tile-lbl">points this week</span>
</div>
<div class="tile tile-cash">
<span class="tile-val">£{tileMoney.toFixed(2)}</span>
<span class="tile-lbl">cash this week</span>
</div>
<div class="tile tile-chores">
<span class="tile-val">{tileChores}</span>
<span class="tile-lbl">chores done</span>
</div>
</div>
<CardGrid>
<!-- MEMBERS KANBAN -->
<Card cols={3} scrollX title="Members">
{#if !summary?.summaries?.length}
<p class="empty">No data yet this week</p>
{:else}
<div class="kanban">
{#each summary.summaries as s} {#each summary.summaries as s}
<tr> {@const m = members.find((m2: any) => m2.id === s.memberId)}
<td><span style="color:{s.memberColor}">■</span> {s.memberName}</td> {@const total = totalChoresFor(s.memberId)}
<td>{s.pointsEarned}</td> {@const pct = total > 0 ? Math.round((s.choresCompleted / total) * 100) : 0}
<td>{s.choresCompleted}/{s.totalChores}</td> <div class="column col-member">
</tr> <div class="member-hero">
<div class="member-head">
<span class="dot" style="background:{s.memberColor}"></span>
<span class="member-name">{s.memberName}</span>
{#if m}
<a href="/{famSlug}/{m.name}" class="kanban-link">Kanban →</a>
{/if}
</div>
<div class="donut-wrap">
<canvas use:captureCanvas={s.memberId} height="100" width="100"></canvas>
<div class="donut-center" style="color:{s.memberColor}">{pct}%</div>
</div>
</div>
<div class="member-stats">
<div class="stat-row">
<span class="stat-lbl">Points</span>
<span class="stat-val pts">{s.pointsEarned}</span>
</div>
<div class="stat-row">
<span class="stat-lbl">Cash</span>
<span class="stat-val cash">£{Number(s.moneyEarned || 0).toFixed(2)}</span>
</div>
<div class="stat-row">
<span class="stat-lbl">Done</span>
<span class="stat-val">{s.choresCompleted}/{total}</span>
</div>
</div>
<div class="progress-row">
<div class="bar-wrap">
<div class="bar-fill" style="width:{pct}%"></div>
</div>
</div>
</div>
{/each} {/each}
</tbody> </div>
</table> {/if}
</Card>
<div class="card"> <!-- CHORES PER DAY CHART -->
<h2>Chores per day</h2> <Card cols={2} title="Chores per day">
{#if summary?.summaries?.length}
<div class="chart-wrap">
<canvas bind:this={choresCanvas} height="200"></canvas> <canvas bind:this={choresCanvas} height="200"></canvas>
</div> </div>
{:else}
<div class="donut-grid"> <p class="empty">No data yet</p>
{#each summary.summaries as s}
<div class="donut-card">
<canvas use:captureCanvas={s.memberId} height="150" width="150"></canvas>
<div class="donut-label" style="color:{s.memberColor}">{s.memberName}</div>
<div class="donut-points">{s.pointsEarned} pts</div>
<div class="donut-hint">{s.choresCompleted}/{s.totalChores} chores</div>
</div>
{/each}
</div>
{/if} {/if}
</Card>
<h2>Members ({members?.length || 0})</h2> <!-- TEMPLATES -->
<div class="member-grid"> <Card cols={1} title="Templates ({templates.length})">
{#each members || [] as m} {#if templates.length === 0}
<a href="/{famSlug}/{m.name}" class="member-card" style="border-left: 4px solid {m.color}"> <p class="empty">No templates created</p>
<strong>{m.name}</strong> {:else}
<span class="hint">{m.deviceTokenHint || '—'}</span> <div class="template-list">
</a>
{/each}
</div>
{#if templates?.length}
<h2>Templates ({templates.length})</h2>
<ul>
{#each templates as t} {#each templates as t}
<li>{t.name} — {t.defaultFrequency} — {t.defaultValue} {t.defaultType}</li> <div class="template-chip">
<span class="tpl-name">{t.name}</span>
<span class="tpl-meta">{t.defaultFrequency} · {t.defaultValue} {t.defaultType}</span>
</div>
{/each} {/each}
</ul> </div>
{/if} {/if}
</Card>
</CardGrid>
<style> <style>
nav { display: flex; gap: 0.5rem; margin: 1rem 0; } /* ── Tiles (matching child dashboard) ── */
nav a { padding: 0.4rem 0.8rem; background: #6366f1; color: white; border-radius: 4px; text-decoration: none; font-size: 0.9rem; } .tiles {
table { width: 100%; border-collapse: collapse; margin: 1rem 0; } display: grid;
th, td { padding: 0.4rem; border: 1px solid #e5e7eb; text-align: left; } grid-template-columns: repeat(4, 1fr);
th { background: #f9fafb; font-weight: 600; } gap: 0.75rem;
.card { margin: 1rem 0; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; } margin-bottom: 1rem;
.card h2 { margin: 0 0 0.75rem; font-size: 1rem; } }
.card canvas { max-height: 50vh; } @media (max-width: 640px) {
.donut-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; justify-content: center; } .tiles { grid-template-columns: repeat(2, 1fr); }
.donut-card { display: flex; flex-direction: column; align-items: center; padding: 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; min-width: 160px; } }
.donut-card canvas { max-height: 150px; max-width: 150px; } .tile {
.donut-label { font-weight: 600; font-size: 0.9rem; margin-top: 0.5rem; } border-radius: 14px;
.donut-points { font-size: 1.1rem; font-weight: 700; } padding: 0.9rem 1.1rem;
.donut-hint { font-size: 0.75rem; color: #9ca3af; } color: #fff;
.member-grid { display: flex; gap: 0.5rem; flex-wrap: wrap; } display: flex;
.member-card { flex: 1; min-width: 160px; padding: 0.8rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; text-decoration: none; color: inherit; display: block; } flex-direction: column;
.member-card strong { display: block; } gap: 0.15rem;
.hint { font-size: 0.8rem; color: #9ca3af; } box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
ul { list-style: none; padding: 0; } }
li { padding: 0.25rem 0; } .tile-members { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.tile-pts { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.tile-cash { background: linear-gradient(135deg, #059669, #10b981); }
.tile-chores { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.tile-val { font-size: 1.6rem; font-weight: 800; }
.tile-lbl {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.9;
}
/* ── Kanban columns ── */
.kanban {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
min-width: 450px;
}
.column {
border: 1px solid #e5e7eb;
border-top: 4px solid #6366f1;
border-radius: 12px;
padding: 0.75rem;
background: #fafbff;
}
.col-member { border-top-color: #6366f1; background: #eef2ff; }
.member-hero {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.member-head {
display: flex;
align-items: center;
gap: 0.4rem;
flex: 1;
min-width: 0;
}
.dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.member-name {
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-link {
font-size: 0.75rem;
color: #6366f1;
text-decoration: none;
font-weight: 600;
flex-shrink: 0;
}
.kanban-link:hover { text-decoration: underline; }
.donut-wrap {
position: relative;
width: 70px; height: 70px;
flex-shrink: 0;
}
.donut-wrap canvas {
max-width: 70px; max-height: 70px;
}
.donut-center {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 800;
pointer-events: none;
}
.member-stats {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-bottom: 0.5rem;
}
.stat-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
}
.stat-lbl { color: #6b7280; font-weight: 500; }
.stat-val { font-weight: 700; }
.stat-val.pts { color: #7c3aed; }
.stat-val.cash { color: #059669; }
.progress-row {
margin-top: 0.2rem;
}
.bar-wrap {
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 4px;
transition: width 0.3s ease;
}
/* ── Chart ── */
.chart-wrap { min-height: 200px; }
.chart-wrap canvas { max-height: 300px; }
/* ── Templates ── */
.template-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.template-chip {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
border: 1px solid #e5e7eb;
border-left: 4px solid #6366f1;
border-radius: 8px;
background: #fafbff;
gap: 0.5rem;
}
.tpl-name { font-weight: 600; font-size: 0.85rem; }
.tpl-meta { font-size: 0.75rem; color: #6b7280; white-space: nowrap; }
/* ── Shared ── */
.empty {
color: #9ca3af;
font-size: 0.85rem;
text-align: center;
padding: 1.5rem;
}
</style> </style>
frontend/src/routes/[fam]/[username]/+page.svelte
+71 -7
View File
@@ -65,6 +65,17 @@
famStore.initialized ? famStore.bonusConfigs : data.bonusConfigs || [] 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 { function totalChoresFor(memberId: string): number {
return parentAssigned.filter((a: any) => a.memberId === memberId).length; return parentAssigned.filter((a: any) => a.memberId === memberId).length;
} }
@@ -612,13 +623,36 @@
<!-- Parent View: Admin Overview --> <!-- Parent View: Admin Overview -->
<ViewHeader <ViewHeader
title={famStore.fam?.name || 'Dashboard'} title={famStore.fam?.name || 'Dashboard'}
subtitle={summary?.weekStart ? `Week of ${summary.weekStart}` : ''} subtitle={summary?.weekStart ? `Week of ${formatDDMMYY(summary.weekStart)}` : ''}
hero
/> />
{#if toast} {#if toast}
<div class="toast">{toast}</div> <div class="toast">{toast}</div>
{/if} {/if}
<!-- 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> <CardGrid>
<Card cols={1} title="Members"> <Card cols={1} title="Members">
{#each parentMembers as m} {#each parentMembers as m}
@@ -838,6 +872,8 @@
{/if} {/if}
</Card> </Card>
</CardGrid> </CardGrid>
</div>
</div>
<CardGrid> <CardGrid>
<Card cols={3} title="Debug: Preview payday" accent="#f59e0b"> <Card cols={3} title="Debug: Preview payday" accent="#f59e0b">
<p class="eow-desc"> <p class="eow-desc">
@@ -1328,10 +1364,17 @@
.member-card { .member-card {
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 8px; border-left: 4px solid #6366f1;
padding: 0.65rem; border-radius: 10px;
padding: 0.65rem 0.85rem;
background: white; background: white;
margin-bottom: 0.6rem; 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 { .member-card:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -1386,7 +1429,7 @@
} }
.bar-fill { .bar-fill {
height: 100%; height: 100%;
background: #6366f1; background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 4px; border-radius: 4px;
transition: width 0.3s; transition: width 0.3s;
} }
@@ -1430,11 +1473,16 @@
.trigger-card { .trigger-card {
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 8px; border-left: 3px solid #22c55e;
padding: 0.65rem; border-radius: 10px;
padding: 0.65rem 0.85rem;
background: #f0fdf4; background: #f0fdf4;
margin-bottom: 0.6rem; 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 { .trigger-card:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -1753,6 +1801,16 @@
color: #6d28d9; 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 { .tiles {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -1774,6 +1832,12 @@
.tile-pts { .tile-pts {
background: linear-gradient(135deg, #7c3aed, #a855f7); background: linear-gradient(135deg, #7c3aed, #a855f7);
} }
.tile-members {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.tile-chores {
background: linear-gradient(135deg, #0284c7, #38bdf8);
}
.tile-val { .tile-val {
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 800; font-weight: 800;
frontend/src/routes/[fam]/[username]/bonuses/+page.svelte
+56 -26
View File
@@ -205,7 +205,7 @@
); );
</script> </script>
<ViewHeader title="Bonuses" /> <ViewHeader title="Bonuses" hero />
<CardGrid> <CardGrid>
<Card cols={3}> <Card cols={3}>
<div class="template-section"> <div class="template-section">
@@ -262,10 +262,11 @@
<p class="empty">No templates yet</p> <p class="empty">No templates yet</p>
{/if} {/if}
</div> </div>
</div>
<Button onclick={() => (showCreateModal = true)}>New Template</Button> <Button onclick={() => (showCreateModal = true)}>New Template</Button>
</div> </div>
</Card> </Card>
<Card cols={3}> <Card cols={3} scrollX>
<div class="kanban"> <div class="kanban">
<!-- Member Column --> <!-- Member Column -->
<div class="column member-col" ondragover={handleDragOver} ondrop={handleDropToMember}> <div class="column member-col" ondragover={handleDragOver} ondrop={handleDropToMember}>
@@ -730,18 +731,22 @@
font-size: 1rem; font-size: 1rem;
} }
.template-list { .template-list {
display: flex; display: grid;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
} }
.template-card { .template-card {
background: #f8f9fa; background: white;
border: 2px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 0.5rem; border-left: 4px solid #8b5cf6;
padding: 0.5rem; border-radius: 10px;
padding: 0.65rem 0.85rem;
cursor: grab; cursor: grab;
transition: all 0.2s; transition: all 0.2s;
min-width: 160px; }
.template-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
} }
.template-card:active { .template-card:active {
cursor: grabbing; cursor: grabbing;
@@ -750,26 +755,33 @@
.kanban { .kanban {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1rem; gap: 0.75rem;
min-width: 450px;
} }
.column { .column {
background: #f9fafb; border: 1px solid #e5e7eb;
border-radius: 0.5rem; border-top: 4px solid #6366f1;
border-radius: 12px;
padding: 0.75rem; padding: 0.75rem;
min-height: 200px; min-height: 200px;
background: #fafbff;
} }
.member-col { border-top-color: #6366f1; background: #eef2ff; }
.comp-col { border-top-color: #f59e0b; background: #fffbeb; }
.collab-col { border-top-color: #10b981; background: #ecfdf5; }
.column h3 { .column h3 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 0.9rem; font-size: 0.95rem;
} }
.card-head { .card-head {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 0.3rem; margin-bottom: 0.4rem;
} }
.card-head strong { .card-head strong {
font-size: 0.85rem; font-size: 0.85rem;
color: #1f2937;
} }
.badges { .badges {
display: flex; display: flex;
@@ -807,22 +819,31 @@
color: #9ca3af; color: #9ca3af;
padding: 0 0.25rem; padding: 0 0.25rem;
line-height: 1; line-height: 1;
border-radius: 4px;
} }
.del-btn:hover { .del-btn:hover {
color: #ef4444; color: #ef4444;
background: #fef2f2;
} }
.empty { .empty {
color: #9ca3af; color: #9ca3af;
font-size: 0.8rem; font-size: 0.85rem;
text-align: center; text-align: center;
padding: 1rem 0; padding: 1.5rem;
} }
.col-card { .col-card {
background: white; background: white;
border: 2px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 0.5rem; border-left: 4px solid #6366f1;
padding: 0.5rem; border-radius: 10px;
margin-bottom: 0.5rem; padding: 0.65rem 0.85rem;
margin-bottom: 0.6rem;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.col-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
border-color: #c7d2fe;
} }
.col-card.done { .col-card.done {
opacity: 0.75; opacity: 0.75;
@@ -834,11 +855,14 @@
.col-card-head { .col-card-head {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-start;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.col-card-head strong { .col-card-head strong {
font-size: 0.85rem; font-size: 0.85rem;
color: #1f2937;
} }
.col-card-foot { .col-card-foot {
margin-top: 0.5rem; margin-top: 0.5rem;
@@ -848,30 +872,36 @@
.member-progress { .member-progress {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.3rem; gap: 0.4rem;
margin-bottom: 0.3rem;
} }
.mname { .mname {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 600;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.bar-wrap { .bar-wrap {
flex: 1; flex: 1;
height: 8px; height: 8px;
background: #e5e7eb; background: #f3f4f6;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.bar-wrap.sm { .bar-wrap.sm {
width: 60px; width: 60px;
flex: none;
} }
.bar-fill { .bar-fill {
height: 100%; height: 100%;
background: #6366f1; background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 4px; border-radius: 4px;
transition: width 0.3s; transition: width 0.3s;
} }
.bar-fill.met { .bar-fill.met {
background: #10b981; background: linear-gradient(90deg, #10b981, #34d399);
} }
.stat { .stat {
font-size: 0.7rem; font-size: 0.7rem;
frontend/src/routes/[fam]/[username]/chores/+page.server.ts
+3 -2
View File
@@ -4,13 +4,14 @@ import { hono } from '$lib/server/hono';
export async function load(event) { export async function load(event) {
if (!event.locals.session) throw redirect(303, '/login'); if (!event.locals.session) throw redirect(303, '/login');
const famId = event.locals.session.famId; const famId = event.locals.session.famId;
const [templates, members, assigned, seasons] = await Promise.all([ const [templates, members, assigned, seasons, completions] = await Promise.all([
hono.admin.list(event, 'chore-templates', famId), hono.admin.list(event, 'chore-templates', famId),
hono.admin.list(event, 'members', famId), hono.admin.list(event, 'members', famId),
hono.admin.list(event, 'assigned-chores', famId), hono.admin.list(event, 'assigned-chores', famId),
hono.admin.list(event, 'seasons', famId), hono.admin.list(event, 'seasons', famId),
hono.admin.completions(event, famId),
]); ]);
return { templates, members, assigned, seasons }; return { templates, members, assigned, seasons, completions };
} }
export const actions = { export const actions = {
frontend/src/routes/[fam]/[username]/chores/+page.svelte
+222 -94
View File
@@ -4,7 +4,11 @@
import { famStore } from '$lib/stores/fam.svelte'; import { famStore } from '$lib/stores/fam.svelte';
import { ViewHeader, CardGrid, Card } from '$lib/components'; import { ViewHeader, CardGrid, Card } from '$lib/components';
import { formatShortDate } from '$lib/format'; import { formatShortDate } from '$lib/format';
import type { ChoreTemplate, AssignedChore, Member, Season } from '$lib/types'; import type { ChoreTemplate, AssignedChore, Member, Season, Completion } from '$lib/types';
// ── Chevron SVG icons ──
const CHEVRON_DOWN = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
const CHEVRON_UP = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>';
let { data, form } = $props(); let { data, form } = $props();
@@ -61,6 +65,7 @@
); );
let seasons = $state(famStore.initialized ? famStore.seasons : data.seasons || []); let seasons = $state(famStore.initialized ? famStore.seasons : data.seasons || []);
let completions = $state((data.completions as Completion[]) || []);
let filteredAssigned = $derived( let filteredAssigned = $derived(
seasonFilter === 'all' ? assigned : assigned.filter((a) => a.seasonIds?.includes(seasonFilter)) seasonFilter === 'all' ? assigned : assigned.filter((a) => a.seasonIds?.includes(seasonFilter))
@@ -176,6 +181,11 @@
return d.toISOString().slice(0, 10); return d.toISOString().slice(0, 10);
} }
// Check if a todo has been completed by the child (todos don't reset daily like chores)
function isTodoCompleted(todoId: string): boolean {
return completions.some((c: Completion) => c.assignedChoreId === todoId);
}
// Traffic light for admin todo cards (same logic as child page) // Traffic light for admin todo cards (same logic as child page)
function todoUrgency(a: AssignedChore): 'blue' | 'green' | 'orange' | 'red' | 'black' { function todoUrgency(a: AssignedChore): 'blue' | 'green' | 'orange' | 'red' | 'black' {
if (!a.completeBy) return 'blue'; if (!a.completeBy) return 'blue';
@@ -285,12 +295,18 @@
} }
</script> </script>
<ViewHeader title="Chore Assignment" /> <ViewHeader title="Chore Assignment" hero />
{#if form?.error} {#if form?.error}
<p class="error">{form.error}</p> <p class="error">{form.error}</p>
{/if} {/if}
<CardGrid>
<!-- Templates Section (at top, like bonuses) -->
<Card cols={3}>
<div class="template-section">
<div class="template-header">
<h3>Templates — Drag to assign</h3>
<div class="season-filter"> <div class="season-filter">
<label>Season:</label> <label>Season:</label>
<select bind:value={seasonFilter}> <select bind:value={seasonFilter}>
@@ -300,13 +316,8 @@
{/each} {/each}
</select> </select>
</div> </div>
</div>
<CardGrid> <div class="template-list">
<Card cols={3}>
<div class="kanban">
<div class="column templates-col">
<h3>Templates</h3>
<button class="add-inline" onclick={() => (showCreateModal = true)}>＋ New template</button>
{#each templates as t} {#each templates as t}
<div class="card template" draggable="true" ondragstart={(e) => handleDragStart(e, t.id)}> <div class="card template" draggable="true" ondragstart={(e) => handleDragStart(e, t.id)}>
<div class="card-body" onclick={() => openEditTemplate(t)} role="button" tabindex="0"> <div class="card-body" onclick={() => openEditTemplate(t)} role="button" tabindex="0">
@@ -343,7 +354,14 @@
<p class="empty">No templates yet</p> <p class="empty">No templates yet</p>
{/if} {/if}
</div> </div>
</div>
<button class="add-inline" onclick={() => (showCreateModal = true)}>＋ New template</button>
</div>
</Card>
<!-- Member Chore Assignment Kanban (3-column grid) -->
<Card cols={3} scrollX>
<div class="kanban">
{#each members as m} {#each members as m}
<div <div
class="column member-col" class="column member-col"
@@ -356,28 +374,28 @@
{m.name} {m.name}
</h3> </h3>
<!-- TODOS accordion --> <!-- TODOS accordion wrapper -->
<button <div class="accordion-wrapper accordion-todos">
class="accordion-head accordion-todos" <button class="accordion-head" onclick={() => toggleAccordion(m.id, 'todos')}>
onclick={() => toggleAccordion(m.id, 'todos')}
>
<span class="accordion-label">📋 Todos ({todosForMember(m.id).length})</span> <span class="accordion-label">📋 Todos ({todosForMember(m.id).length})</span>
<span class="accordion-arrow" class:open={accordionState[m.id]?.todos ?? true}> ▾ </span> <span class="accordion-chevron">{@html (accordionState[m.id]?.todos ?? true) ? CHEVRON_UP : CHEVRON_DOWN}</span>
</button> </button>
{#if accordionState[m.id]?.todos ?? true} {#if accordionState[m.id]?.todos ?? true}
<button class="add-inline" onclick={() => openTodo(m.id)}>＋ Add a todo</button> <div class="accordion-body">
{#each sortedTodosForMember(m.id) as a} {#each sortedTodosForMember(m.id) as a}
{@const completed = isTodoCompleted(a.id)}
{@const urgency = todoUrgency(a)} {@const urgency = todoUrgency(a)}
<div <div
class="todo-admin-card" class="todo-admin-card"
class:todo-blue-bg={urgency === 'blue'} class:todo-completed={completed}
class:todo-green-bg={urgency === 'green'} class:todo-blue-bg={!completed && urgency === 'blue'}
class:todo-orange-bg={urgency === 'orange'} class:todo-green-bg={!completed && urgency === 'green'}
class:todo-red-bg={urgency === 'red'} class:todo-orange-bg={!completed && urgency === 'orange'}
class:todo-black-bg={urgency === 'black'} class:todo-red-bg={!completed && urgency === 'red'}
onclick={() => openEdit(a)} class:todo-black-bg={!completed && urgency === 'black'}
onclick={() => !completed && openEdit(a)}
role="button" role="button"
tabindex="0" tabindex={completed ? -1 : 0}
> >
<div class="todo-admin-body"> <div class="todo-admin-body">
<strong class="todo-admin-name">{a.customName || 'Todo'}</strong> <strong class="todo-admin-name">{a.customName || 'Todo'}</strong>
@@ -385,13 +403,16 @@
{#if a.type === 'emoji'} {#if a.type === 'emoji'}
<span class="todo-admin-type">🎯 emoji</span> <span class="todo-admin-type">🎯 emoji</span>
{:else} {:else}
<span class="todo-admin-type">{a.value} {a.type}</span> <span class="todo-admin-type"><span class="badge badge-pts">{a.value} pts</span></span>
{/if} {/if}
{#if a.completeBy} {#if a.completeBy}
<span class="todo-admin-deadline">due {formatShortDate(a.completeBy)}</span> <span class="todo-admin-deadline">due {formatShortDate(a.completeBy)}</span>
{/if} {/if}
</div> </div>
</div> </div>
{#if completed}
<span class="todo-completed-badge">✅ TBC completed</span>
{:else}
<button <button
class="del-btn" class="del-btn"
title="Remove todo" title="Remove todo"
@@ -405,16 +426,22 @@
}); });
}}>×</button }}>×</button
> >
{/if}
</div> </div>
{/each} {/each}
<button class="add-inline accordion-add" onclick={() => openTodo(m.id)}>＋ Add a todo</button>
</div>
{/if} {/if}
</div>
<!-- CHORES accordion --> <!-- CHORES accordion wrapper -->
<div class="accordion-wrapper accordion-chores">
<button class="accordion-head" onclick={() => toggleAccordion(m.id, 'chores')}> <button class="accordion-head" onclick={() => toggleAccordion(m.id, 'chores')}>
<span class="accordion-label">Chores ({assignedForMember(m.id).length})</span> <span class="accordion-label">Chores ({assignedForMember(m.id).length})</span>
<span class="accordion-arrow" class:open={accordionState[m.id]?.chores ?? true}> ▾ </span> <span class="accordion-chevron">{@html (accordionState[m.id]?.chores ?? true) ? CHEVRON_UP : CHEVRON_DOWN}</span>
</button> </button>
{#if accordionState[m.id]?.chores ?? true} {#if accordionState[m.id]?.chores ?? true}
<div class="accordion-body">
{#each assignedForMember(m.id) as a} {#each assignedForMember(m.id) as a}
{@const tName = templateName(a.templateId)} {@const tName = templateName(a.templateId)}
<div class="card assigned" onclick={() => openEdit(a)} role="button" tabindex="0"> <div class="card assigned" onclick={() => openEdit(a)} role="button" tabindex="0">
@@ -427,7 +454,7 @@
{/if} {/if}
</div> </div>
<div class="card-value"> <div class="card-value">
{a.type === 'money' ? `£${Number(a.value).toFixed(2)}` : a.value} {a.type === 'money' ? `£${Number(a.value).toFixed(2)}` : `${a.value} pts`}
</div> </div>
<button <button
class="del-btn" class="del-btn"
@@ -447,12 +474,19 @@
{#if assignedForMember(m.id).length === 0} {#if assignedForMember(m.id).length === 0}
<p class="empty">Drop a chore here</p> <p class="empty">Drop a chore here</p>
{/if} {/if}
</div>
{/if} {/if}
</div> </div>
{/each}
</div> </div>
</Card></CardGrid {/each}
> {#if members.length < 3}
{#each Array(3 - members.length) as _}
<div class="column column-placeholder"></div>
{/each}
{/if}
</div>
</Card>
</CardGrid>
<!-- Create Template Modal --> <!-- Create Template Modal -->
{#if showCreateModal} {#if showCreateModal}
@@ -714,26 +748,48 @@
margin: 0.5rem 0; margin: 0.5rem 0;
} }
.kanban { /* ── Template section (top, like bonuses) ── */
.template-section {
margin-bottom: 0;
}
.template-header {
display: flex; display: flex;
gap: 1rem; justify-content: space-between;
overflow-x: auto; align-items: center;
align-items: flex-start; flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.template-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.template-list {
display: grid;
gap: 0.5rem;
margin-bottom: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* ── Kanban (3 columns, scrolls via Card scrollX) ── */
.kanban {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
min-width: 450px;
} }
.column { .column {
flex: 1; border: 1px solid #e5e7eb;
min-width: 200px; border-top: 4px solid #6366f1;
max-width: 280px; border-radius: 12px;
border: 2px solid #e5e7eb;
border-top-width: 4px;
border-radius: 8px;
padding: 0.75rem; padding: 0.75rem;
background: #fafafa; background: #fafbff;
min-height: 200px; min-height: 200px;
} }
.column h3 { .column h3 {
margin: 0 0 0.75rem; margin: 0 0 0.75rem;
font-size: 1rem; font-size: 0.95rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
@@ -749,38 +805,58 @@
color: #9ca3af; color: #9ca3af;
font-size: 0.85rem; font-size: 0.85rem;
text-align: center; text-align: center;
padding: 1rem; padding: 1.5rem;
border: 1px dashed #d1d5db;
border-radius: 6px;
} }
.add-inline { .add-inline {
display: block;
width: 100%; width: 100%;
margin-bottom: 0.5rem; margin-bottom: 0.35rem;
padding: 0.4rem; padding: 0.45rem;
background: transparent; background: rgba(99, 102, 241, 0.04);
border: 1px dashed #d1d5db; border: 1px dashed #c7d2fe;
border-radius: 6px; border-radius: 8px;
color: #6b7280; color: #6366f1;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background 0.15s, border-color 0.15s;
text-align: center;
}
.template-section > .add-inline {
margin-bottom: 0;
}
.accordion-add {
margin-bottom: 0;
margin-top: 0.35rem;
background: rgba(255,255,255,0.25);
border-color: rgba(255,255,255,0.4);
color: #fff;
}
.accordion-add:hover {
background: rgba(255,255,255,0.35);
border-color: rgba(255,255,255,0.6);
color: #fff;
} }
.add-inline:hover { .add-inline:hover {
border-color: #6366f1; border-color: #6366f1;
color: #6366f1;
background: #eef2ff; background: #eef2ff;
} }
.card { .card {
background: white; background: white;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 6px; border-radius: 8px;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
position: relative; position: relative;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
} }
.card-body { .card-body {
flex: 1; flex: 1;
@@ -788,13 +864,14 @@
} }
.card-body strong { .card-body strong {
display: block; display: block;
font-size: 0.9rem; font-size: 0.85rem;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: #1f2937;
} }
.card-value { .card-value {
font-size: 0.85rem; font-size: 0.8rem;
color: #6b7280; color: #6b7280;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
@@ -824,15 +901,19 @@
color: #9ca3af; color: #9ca3af;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
padding: 0 4px; padding: 2px 6px;
line-height: 1; line-height: 1;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
} }
.edit-btn:hover { .edit-btn:hover {
color: #6366f1; color: #6366f1;
background: #eef2ff;
} }
.del-btn:hover { .del-btn:hover {
color: #dc2626; color: #dc2626;
background: #fef2f2;
} }
.hint { .hint {
color: #6b7280; color: #6b7280;
@@ -843,18 +924,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 1rem;
} }
.season-filter label { .season-filter label {
font-size: 0.85rem; font-size: 0.8rem;
color: #374151; color: #6b7280;
font-weight: 500; font-weight: 500;
} }
.season-filter select { .season-filter select {
padding: 0.35rem 0.6rem; padding: 0.3rem 0.5rem;
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 6px; border-radius: 6px;
font-size: 0.85rem; font-size: 0.8rem;
background: #fff;
} }
.badge.season { .badge.season {
background: #e0f2fe; background: #e0f2fe;
@@ -889,7 +970,7 @@
.template { .template {
cursor: grab; cursor: grab;
border-left: 3px solid #6366f1; border-left: 4px solid #8b5cf6;
} }
.template:active { .template:active {
cursor: grabbing; cursor: grabbing;
@@ -897,10 +978,7 @@
} }
.assigned { .assigned {
cursor: pointer; cursor: pointer;
border-left: 3px solid #10b981; border-left: 4px solid #10b981;
}
.assigned:hover {
background: #f3f4f6;
} }
.overlay { .overlay {
@@ -962,38 +1040,45 @@
color: white; color: white;
} }
/* ── Accordion ── */ /* ── Accordion wrappers ── */
.accordion-wrapper {
background: #6366f1;
border-radius: 10px;
margin: 0.75rem 0 0.3rem;
overflow: hidden;
box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
.accordion-wrapper.accordion-todos {
background: #2e8b57;
box-shadow: 0 2px 6px rgba(46, 139, 87, 0.25);
}
.accordion-head { .accordion-head {
width: 100%; width: 100%;
padding: 0.4rem 0.6rem; padding: 0.55rem 0.85rem;
margin: 0.3rem 0 0.2rem; border: none;
background: #f3f4f6; border-left: 4px solid rgba(0,0,0,0.2);
border: 1px solid #e5e7eb; background: transparent;
border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 0.8rem; font-size: 0.82rem;
font-weight: 700; font-weight: 700;
color: #374151; color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: filter 0.15s;
} }
.accordion-head:hover { .accordion-head:hover {
background: #e5e7eb; filter: brightness(1.1);
} }
.accordion-todos { .accordion-body {
background: #fffbeb; padding: 0.5rem 0.65rem 0.65rem;
border-color: #fcd34d; background: rgba(0,0,0,0.08);
} }
.accordion-todos:hover { .accordion-chevron {
background: #fef3c7; display: flex;
} align-items: center;
.accordion-arrow { flex-shrink: 0;
font-size: 0.7rem; opacity: 0.8;
transition: transform 0.2s;
}
.accordion-arrow.open {
transform: rotate(180deg);
} }
/* ── Todo admin cards ── */ /* ── Todo admin cards ── */
@@ -1001,16 +1086,28 @@
background: white; background: white;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-left: 4px solid #3b82f6; border-left: 4px solid #3b82f6;
border-radius: 6px; border-radius: 8px;
padding: 0.4rem 0.6rem; padding: 0.45rem 0.65rem;
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
} }
.todo-admin-card:hover { .todo-admin-card:hover {
filter: brightness(0.97); transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.todo-admin-card.todo-completed {
opacity: 0.55;
cursor: default;
background: #f0fdf4;
border-left-color: #10b981;
}
.todo-admin-card.todo-completed:hover {
transform: none;
box-shadow: none;
} }
.todo-blue-bg { .todo-blue-bg {
background: #eff6ff; background: #eff6ff;
@@ -1060,8 +1157,39 @@
font-weight: 700; font-weight: 700;
} }
.todo-badge { .todo-completed-badge {
background: #fef3c7; font-size: 0.65rem;
color: #b45309; font-weight: 700;
color: #059669;
background: #d1fae5;
padding: 2px 6px;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
/* ── Points badge ── */
.badge-pts {
background: #e0e7ff;
color: #4338ca;
font-size: 0.68rem;
padding: 1px 6px;
border-radius: 10px;
font-weight: 600;
}
/* ── Placeholder column ── */
.column-placeholder {
border-top-color: #e5e7eb !important;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 8px,
rgba(0,0,0,0.02) 8px,
rgba(0,0,0,0.02) 16px
);
border-style: dashed;
opacity: 0.5;
min-height: 200px;
} }
</style> </style>
frontend/src/routes/[fam]/[username]/preferences/+page.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
const colors = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#ef4444', '#8b5cf6', '#14b8a6']; const colors = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#ef4444', '#8b5cf6', '#14b8a6'];
</script> </script>
<ViewHeader title="Preferences" subtitle={data.verified ? data.memberName : ''} /> <ViewHeader title="Preferences" subtitle={data.verified ? data.memberName : ''} hero />
{#if !data.verified} {#if !data.verified}
<CardGrid> <CardGrid>
frontend/src/routes/[fam]/[username]/rewards/+page.svelte
+1 -1
View File
@@ -58,7 +58,7 @@
) )
</script> </script>
<ViewHeader title="Reward Ledger" subtitle="All rewards earned by members" /> <ViewHeader title="Reward Ledger" subtitle="All rewards earned by members" hero />
{#if toast} {#if toast}
<div class="toast">{toast}</div> <div class="toast">{toast}</div>
frontend/src/routes/[fam]/[username]/settings/+page.svelte
+1 -1
View File
@@ -106,7 +106,7 @@
} }
</script> </script>
<ViewHeader title="Settings" /> <ViewHeader title="Settings" hero />
<CardGrid> <CardGrid>
<Card title="Family Name"> <Card title="Family Name">
frontend/src/routes/admin/+page.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<ViewHeader title="Platform Admin" subtitle="Manage families and platform settings" /> <ViewHeader title="Platform Admin" subtitle="Manage families and platform settings" hero />
<CardGrid> <CardGrid>
<Card cols={1} title="Overview" accent="#6366f1"> <Card cols={1} title="Overview" accent="#6366f1">
proxy/src/index.ts
+12
View File
@@ -518,6 +518,18 @@ app.delete("/api/admin/:famId/assigned-chores/:id", requireAdmin, async (c) => {
} }
}); });
// ── Admin: Completions ────────────────────────────
app.get("/api/admin/:famId/completions", requireAdmin, async (c) => {
try {
const { famId } = c.req.param();
const data = await pb.getList("completions", `famId = '${famId}'`);
return c.json(data.items);
} catch (err) {
return handleError(c, err);
}
});
// ── Admin CRUD: Seasons ────────────────────────── // ── Admin CRUD: Seasons ──────────────────────────
app.get("/api/admin/:famId/seasons", requireAdmin, async (c) => { app.get("/api/admin/:famId/seasons", requireAdmin, async (c) => {