tighten views
This commit is contained in:
JCEEE
@@ -150,4 +150,12 @@
|
||||
- **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.
|
||||
|
||||
### 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).
|
||||
|
||||
|
||||
|
||||
@@ -3,21 +3,23 @@
|
||||
cols = 1,
|
||||
title,
|
||||
accent,
|
||||
scrollX = false,
|
||||
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>
|
||||
|
||||
<div
|
||||
class="card"
|
||||
style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}"
|
||||
class:has-accent={!!accent}
|
||||
class:scroll-x={scrollX}
|
||||
>
|
||||
{#if title}
|
||||
<div class="card-header">
|
||||
<span class="card-title">{title}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="card-body">
|
||||
<div class="card-body" class:scroll-x-body={scrollX}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,6 +31,9 @@
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card.scroll-x {
|
||||
overflow: visible;
|
||||
}
|
||||
.card.has-accent {
|
||||
border-top: 3px solid var(--card-accent, #6366f1);
|
||||
}
|
||||
@@ -45,4 +50,8 @@
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
.card-body.scroll-x-body {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<script lang="ts">
|
||||
let { title, subtitle, tabs, weeknav, sort }: {
|
||||
let { title, subtitle, hero = false, tabs, weeknav, sort }: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
hero?: boolean;
|
||||
tabs?: { items: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
|
||||
weeknav?: { current: string; onPrev: () => void; onNext: () => void };
|
||||
sort?: { options: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="view-header">
|
||||
<div class="view-header" class:hero>
|
||||
<div class="view-title-group">
|
||||
<h1 class="view-title">{title}</h1>
|
||||
{#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;
|
||||
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>
|
||||
|
||||
@@ -74,6 +74,7 @@
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: whitesmoke;
|
||||
}
|
||||
.app-main {
|
||||
margin-left: 220px;
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { famStore } from '$lib/stores/fam.svelte';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { Chart, registerables } from 'chart.js';
|
||||
import { ViewHeader, CardGrid, Card } from '$lib/components';
|
||||
import { formatDDMMYY } from '$lib/format';
|
||||
|
||||
Chart.register(...registerables);
|
||||
|
||||
@@ -10,6 +11,10 @@
|
||||
let famSlug = $derived(page.params.fam);
|
||||
|
||||
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 donutCharts: Record<string, Chart> = {};
|
||||
let choresCanvas: HTMLCanvasElement | undefined;
|
||||
@@ -17,22 +22,24 @@
|
||||
|
||||
function captureCanvas(node: HTMLCanvasElement, memberId: string) {
|
||||
donutCanvases[memberId] = node;
|
||||
return {
|
||||
destroy() { delete donutCanvases[memberId]; }
|
||||
};
|
||||
return { destroy() { delete donutCanvases[memberId]; } };
|
||||
}
|
||||
|
||||
let members = $state(data.members);
|
||||
let templates = $state(data.templates);
|
||||
// ─── Derived tile stats ───
|
||||
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(() => {
|
||||
if (data.members?.length) members = data.members;
|
||||
if (data.templates?.length) templates = data.templates;
|
||||
if (famStore.initialized) {
|
||||
if (famStore.members.length) members = famStore.members;
|
||||
if (famStore.templates.length) templates = famStore.templates;
|
||||
}
|
||||
})
|
||||
function totalChoresFor(memberId: string) {
|
||||
return assigned.filter((a: any) => a.memberId === memberId).length;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!summary?.summaries?.length) return;
|
||||
@@ -53,7 +60,9 @@
|
||||
data: { labels, datasets },
|
||||
options: {
|
||||
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 } } },
|
||||
},
|
||||
});
|
||||
@@ -75,18 +84,7 @@
|
||||
borderWidth: 0,
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
cutout: '70%',
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (ctx) => `${ctx.label}: ${ctx.parsed} chores`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
options: { responsive: true, cutout: '70%', plugins: { legend: { display: false } } },
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -94,82 +92,277 @@
|
||||
onDestroy(() => {
|
||||
choresChart?.destroy();
|
||||
for (const c of Object.values(donutCharts)) c?.destroy();
|
||||
famStore.cleanup();
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1>🏠 {famSlug}</h1>
|
||||
<ViewHeader
|
||||
title={famSlug}
|
||||
subtitle={summary?.weekStart ? `Week of ${formatDDMMYY(summary.weekStart)}` : 'Dashboard'}
|
||||
hero
|
||||
/>
|
||||
|
||||
{#if summary?.summaries?.length}
|
||||
<h2>This week</h2>
|
||||
<table>
|
||||
<thead><tr><th>Member</th><th>Points</th><th>Done</th></tr></thead>
|
||||
<tbody>
|
||||
{#each summary.summaries as s}
|
||||
<tr>
|
||||
<td><span style="color:{s.memberColor}">■</span> {s.memberName}</td>
|
||||
<td>{s.pointsEarned}</td>
|
||||
<td>{s.choresCompleted}/{s.totalChores}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="card">
|
||||
<h2>Chores per day</h2>
|
||||
<canvas bind:this={choresCanvas} height="200"></canvas>
|
||||
<!-- STAT TILES -->
|
||||
<div class="tiles">
|
||||
<div class="tile tile-members">
|
||||
<span class="tile-val">{tileMembers}</span>
|
||||
<span class="tile-lbl">members</span>
|
||||
</div>
|
||||
|
||||
<div class="donut-grid">
|
||||
{#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 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>
|
||||
{/if}
|
||||
|
||||
<h2>Members ({members?.length || 0})</h2>
|
||||
<div class="member-grid">
|
||||
{#each members || [] as m}
|
||||
<a href="/{famSlug}/{m.name}" class="member-card" style="border-left: 4px solid {m.color}">
|
||||
<strong>{m.name}</strong>
|
||||
<span class="hint">{m.deviceTokenHint || '—'}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if templates?.length}
|
||||
<h2>Templates ({templates.length})</h2>
|
||||
<ul>
|
||||
{#each templates as t}
|
||||
<li>{t.name} — {t.defaultFrequency} — {t.defaultValue} {t.defaultType}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<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}
|
||||
{@const m = members.find((m2: any) => m2.id === s.memberId)}
|
||||
{@const total = totalChoresFor(s.memberId)}
|
||||
{@const pct = total > 0 ? Math.round((s.choresCompleted / total) * 100) : 0}
|
||||
<div class="column col-member">
|
||||
<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}
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<!-- CHORES PER DAY CHART -->
|
||||
<Card cols={2} title="Chores per day">
|
||||
{#if summary?.summaries?.length}
|
||||
<div class="chart-wrap">
|
||||
<canvas bind:this={choresCanvas} height="200"></canvas>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="empty">No data yet</p>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<!-- TEMPLATES -->
|
||||
<Card cols={1} title="Templates ({templates.length})">
|
||||
{#if templates.length === 0}
|
||||
<p class="empty">No templates created</p>
|
||||
{:else}
|
||||
<div class="template-list">
|
||||
{#each templates as t}
|
||||
<div class="template-chip">
|
||||
<span class="tpl-name">{t.name}</span>
|
||||
<span class="tpl-meta">{t.defaultFrequency} · {t.defaultValue} {t.defaultType}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<style>
|
||||
nav { display: flex; gap: 0.5rem; margin: 1rem 0; }
|
||||
nav a { padding: 0.4rem 0.8rem; background: #6366f1; color: white; border-radius: 4px; text-decoration: none; font-size: 0.9rem; }
|
||||
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||||
th, td { padding: 0.4rem; border: 1px solid #e5e7eb; text-align: left; }
|
||||
th { background: #f9fafb; font-weight: 600; }
|
||||
.card { margin: 1rem 0; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; }
|
||||
.card h2 { margin: 0 0 0.75rem; font-size: 1rem; }
|
||||
.card canvas { max-height: 50vh; }
|
||||
.donut-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; justify-content: center; }
|
||||
.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; }
|
||||
.donut-label { font-weight: 600; font-size: 0.9rem; margin-top: 0.5rem; }
|
||||
.donut-points { font-size: 1.1rem; font-weight: 700; }
|
||||
.donut-hint { font-size: 0.75rem; color: #9ca3af; }
|
||||
.member-grid { display: flex; gap: 0.5rem; flex-wrap: wrap; }
|
||||
.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; }
|
||||
.member-card strong { display: block; }
|
||||
.hint { font-size: 0.8rem; color: #9ca3af; }
|
||||
ul { list-style: none; padding: 0; }
|
||||
li { padding: 0.25rem 0; }
|
||||
/* ── Tiles (matching child dashboard) ── */
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.tiles { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
.tile {
|
||||
border-radius: 14px;
|
||||
padding: 0.9rem 1.1rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -205,7 +205,7 @@
|
||||
);
|
||||
</script>
|
||||
|
||||
<ViewHeader title="Bonuses" />
|
||||
<ViewHeader title="Bonuses" hero />
|
||||
<CardGrid>
|
||||
<Card cols={3}>
|
||||
<div class="template-section">
|
||||
@@ -262,10 +262,11 @@
|
||||
<p class="empty">No templates yet</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<Button onclick={() => (showCreateModal = true)}>New Template</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card cols={3}>
|
||||
<Card cols={3} scrollX>
|
||||
<div class="kanban">
|
||||
<!-- Member Column -->
|
||||
<div class="column member-col" ondragover={handleDragOver} ondrop={handleDropToMember}>
|
||||
@@ -730,18 +731,22 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
.template-list {
|
||||
display: flex;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
}
|
||||
.template-card {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
border-radius: 10px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
cursor: grab;
|
||||
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 {
|
||||
cursor: grabbing;
|
||||
@@ -750,26 +755,33 @@
|
||||
.kanban {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
min-width: 450px;
|
||||
}
|
||||
.column {
|
||||
background: #f9fafb;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-top: 4px solid #6366f1;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem;
|
||||
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 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.3rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.card-head strong {
|
||||
font-size: 0.85rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
.badges {
|
||||
display: flex;
|
||||
@@ -807,22 +819,31 @@
|
||||
color: #9ca3af;
|
||||
padding: 0 0.25rem;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.del-btn:hover {
|
||||
color: #ef4444;
|
||||
background: #fef2f2;
|
||||
}
|
||||
.empty {
|
||||
color: #9ca3af;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.col-card {
|
||||
background: white;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-left: 4px solid #6366f1;
|
||||
border-radius: 10px;
|
||||
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 {
|
||||
opacity: 0.75;
|
||||
@@ -834,11 +855,14 @@
|
||||
.col-card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.col-card-head strong {
|
||||
font-size: 0.85rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
.col-card-foot {
|
||||
margin-top: 0.5rem;
|
||||
@@ -848,30 +872,36 @@
|
||||
.member-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.mname {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bar-wrap {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: #e5e7eb;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bar-wrap.sm {
|
||||
width: 60px;
|
||||
flex: none;
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
background: #6366f1;
|
||||
background: linear-gradient(90deg, #6366f1, #8b5cf6);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.bar-fill.met {
|
||||
background: #10b981;
|
||||
background: linear-gradient(90deg, #10b981, #34d399);
|
||||
}
|
||||
.stat {
|
||||
font-size: 0.7rem;
|
||||
|
||||
@@ -4,13 +4,14 @@ import { hono } from '$lib/server/hono';
|
||||
export async function load(event) {
|
||||
if (!event.locals.session) throw redirect(303, '/login');
|
||||
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, 'members', famId),
|
||||
hono.admin.list(event, 'assigned-chores', 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 = {
|
||||
|
||||
@@ -4,7 +4,11 @@
|
||||
import { famStore } from '$lib/stores/fam.svelte';
|
||||
import { ViewHeader, CardGrid, Card } from '$lib/components';
|
||||
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();
|
||||
|
||||
@@ -61,6 +65,7 @@
|
||||
);
|
||||
|
||||
let seasons = $state(famStore.initialized ? famStore.seasons : data.seasons || []);
|
||||
let completions = $state((data.completions as Completion[]) || []);
|
||||
|
||||
let filteredAssigned = $derived(
|
||||
seasonFilter === 'all' ? assigned : assigned.filter((a) => a.seasonIds?.includes(seasonFilter))
|
||||
@@ -176,6 +181,11 @@
|
||||
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)
|
||||
function todoUrgency(a: AssignedChore): 'blue' | 'green' | 'orange' | 'red' | 'black' {
|
||||
if (!a.completeBy) return 'blue';
|
||||
@@ -285,28 +295,29 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<ViewHeader title="Chore Assignment" />
|
||||
<ViewHeader title="Chore Assignment" hero />
|
||||
|
||||
{#if form?.error}
|
||||
<p class="error">{form.error}</p>
|
||||
{/if}
|
||||
|
||||
<div class="season-filter">
|
||||
<label>Season:</label>
|
||||
<select bind:value={seasonFilter}>
|
||||
<option value="all">All Chores</option>
|
||||
{#each seasons as s}
|
||||
<option value={s.id}>{s.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<CardGrid>
|
||||
<!-- Templates Section (at top, like bonuses) -->
|
||||
<Card cols={3}>
|
||||
<div class="kanban">
|
||||
<div class="column templates-col">
|
||||
<h3>Templates</h3>
|
||||
<button class="add-inline" onclick={() => (showCreateModal = true)}>＋ New template</button>
|
||||
<div class="template-section">
|
||||
<div class="template-header">
|
||||
<h3>Templates — Drag to assign</h3>
|
||||
<div class="season-filter">
|
||||
<label>Season:</label>
|
||||
<select bind:value={seasonFilter}>
|
||||
<option value="all">All Chores</option>
|
||||
{#each seasons as s}
|
||||
<option value={s.id}>{s.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="template-list">
|
||||
{#each templates as t}
|
||||
<div class="card template" draggable="true" ondragstart={(e) => handleDragStart(e, t.id)}>
|
||||
<div class="card-body" onclick={() => openEditTemplate(t)} role="button" tabindex="0">
|
||||
@@ -343,7 +354,14 @@
|
||||
<p class="empty">No templates yet</p>
|
||||
{/if}
|
||||
</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}
|
||||
<div
|
||||
class="column member-col"
|
||||
@@ -356,103 +374,119 @@
|
||||
{m.name}
|
||||
</h3>
|
||||
|
||||
<!-- TODOS accordion -->
|
||||
<button
|
||||
class="accordion-head accordion-todos"
|
||||
onclick={() => toggleAccordion(m.id, 'todos')}
|
||||
>
|
||||
<span class="accordion-label">📋 Todos ({todosForMember(m.id).length})</span>
|
||||
<span class="accordion-arrow" class:open={accordionState[m.id]?.todos ?? true}> ▾ </span>
|
||||
</button>
|
||||
{#if accordionState[m.id]?.todos ?? true}
|
||||
<button class="add-inline" onclick={() => openTodo(m.id)}>＋ Add a todo</button>
|
||||
{#each sortedTodosForMember(m.id) as a}
|
||||
{@const urgency = todoUrgency(a)}
|
||||
<div
|
||||
class="todo-admin-card"
|
||||
class:todo-blue-bg={urgency === 'blue'}
|
||||
class:todo-green-bg={urgency === 'green'}
|
||||
class:todo-orange-bg={urgency === 'orange'}
|
||||
class:todo-red-bg={urgency === 'red'}
|
||||
class:todo-black-bg={urgency === 'black'}
|
||||
onclick={() => openEdit(a)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="todo-admin-body">
|
||||
<strong class="todo-admin-name">{a.customName || 'Todo'}</strong>
|
||||
<div class="todo-admin-meta">
|
||||
{#if a.type === 'emoji'}
|
||||
<span class="todo-admin-type">🎯 emoji</span>
|
||||
{:else}
|
||||
<span class="todo-admin-type">{a.value} {a.type}</span>
|
||||
{/if}
|
||||
{#if a.completeBy}
|
||||
<span class="todo-admin-deadline">due {formatShortDate(a.completeBy)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="del-btn"
|
||||
title="Remove todo"
|
||||
onclick={async (e) => {
|
||||
e.stopPropagation();
|
||||
const s = page.data.session as any;
|
||||
if (!s) return;
|
||||
await fetch(`/api/admin/${s.famId}/assigned-chores/${a.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'x-session-famid': s.famId, 'x-session-userid': s.userId }
|
||||
});
|
||||
}}>×</button
|
||||
<!-- TODOS accordion wrapper -->
|
||||
<div class="accordion-wrapper accordion-todos">
|
||||
<button class="accordion-head" onclick={() => toggleAccordion(m.id, 'todos')}>
|
||||
<span class="accordion-label">📋 Todos ({todosForMember(m.id).length})</span>
|
||||
<span class="accordion-chevron">{@html (accordionState[m.id]?.todos ?? true) ? CHEVRON_UP : CHEVRON_DOWN}</span>
|
||||
</button>
|
||||
{#if accordionState[m.id]?.todos ?? true}
|
||||
<div class="accordion-body">
|
||||
{#each sortedTodosForMember(m.id) as a}
|
||||
{@const completed = isTodoCompleted(a.id)}
|
||||
{@const urgency = todoUrgency(a)}
|
||||
<div
|
||||
class="todo-admin-card"
|
||||
class:todo-completed={completed}
|
||||
class:todo-blue-bg={!completed && urgency === 'blue'}
|
||||
class:todo-green-bg={!completed && urgency === 'green'}
|
||||
class:todo-orange-bg={!completed && urgency === 'orange'}
|
||||
class:todo-red-bg={!completed && urgency === 'red'}
|
||||
class:todo-black-bg={!completed && urgency === 'black'}
|
||||
onclick={() => !completed && openEdit(a)}
|
||||
role="button"
|
||||
tabindex={completed ? -1 : 0}
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- CHORES accordion -->
|
||||
<button class="accordion-head" onclick={() => toggleAccordion(m.id, 'chores')}>
|
||||
<span class="accordion-label">Chores ({assignedForMember(m.id).length})</span>
|
||||
<span class="accordion-arrow" class:open={accordionState[m.id]?.chores ?? true}> ▾ </span>
|
||||
</button>
|
||||
{#if accordionState[m.id]?.chores ?? true}
|
||||
{#each assignedForMember(m.id) as a}
|
||||
{@const tName = templateName(a.templateId)}
|
||||
<div class="card assigned" onclick={() => openEdit(a)} role="button" tabindex="0">
|
||||
<div class="card-body">
|
||||
<strong>{a.customName || tName}</strong>
|
||||
<span class="badge">{a.frequency}</span>
|
||||
<span class="badge type">{a.type}</span>
|
||||
{#if seasonFilter !== 'all' && isGlobalChore(a)}
|
||||
<span class="badge season">Add to</span>
|
||||
<div class="todo-admin-body">
|
||||
<strong class="todo-admin-name">{a.customName || 'Todo'}</strong>
|
||||
<div class="todo-admin-meta">
|
||||
{#if a.type === 'emoji'}
|
||||
<span class="todo-admin-type">🎯 emoji</span>
|
||||
{:else}
|
||||
<span class="todo-admin-type"><span class="badge badge-pts">{a.value} pts</span></span>
|
||||
{/if}
|
||||
{#if a.completeBy}
|
||||
<span class="todo-admin-deadline">due {formatShortDate(a.completeBy)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if completed}
|
||||
<span class="todo-completed-badge">✅ TBC completed</span>
|
||||
{:else}
|
||||
<button
|
||||
class="del-btn"
|
||||
title="Remove todo"
|
||||
onclick={async (e) => {
|
||||
e.stopPropagation();
|
||||
const s = page.data.session as any;
|
||||
if (!s) return;
|
||||
await fetch(`/api/admin/${s.famId}/assigned-chores/${a.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'x-session-famid': s.famId, 'x-session-userid': s.userId }
|
||||
});
|
||||
}}>×</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="card-value">
|
||||
{a.type === 'money' ? `£${Number(a.value).toFixed(2)}` : a.value}
|
||||
</div>
|
||||
<button
|
||||
class="del-btn"
|
||||
title="Remove assignment"
|
||||
onclick={async (e) => {
|
||||
e.stopPropagation();
|
||||
const s = page.data.session as any;
|
||||
if (!s) return;
|
||||
await fetch(`/api/admin/${s.famId}/assigned-chores/${a.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'x-session-famid': s.famId, 'x-session-userid': s.userId }
|
||||
});
|
||||
}}>×</button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
{#if assignedForMember(m.id).length === 0}
|
||||
<p class="empty">Drop a chore here</p>
|
||||
{/if}
|
||||
{/each}
|
||||
<button class="add-inline accordion-add" onclick={() => openTodo(m.id)}>＋ Add a todo</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- CHORES accordion wrapper -->
|
||||
<div class="accordion-wrapper accordion-chores">
|
||||
<button class="accordion-head" onclick={() => toggleAccordion(m.id, 'chores')}>
|
||||
<span class="accordion-label">Chores ({assignedForMember(m.id).length})</span>
|
||||
<span class="accordion-chevron">{@html (accordionState[m.id]?.chores ?? true) ? CHEVRON_UP : CHEVRON_DOWN}</span>
|
||||
</button>
|
||||
{#if accordionState[m.id]?.chores ?? true}
|
||||
<div class="accordion-body">
|
||||
{#each assignedForMember(m.id) as a}
|
||||
{@const tName = templateName(a.templateId)}
|
||||
<div class="card assigned" onclick={() => openEdit(a)} role="button" tabindex="0">
|
||||
<div class="card-body">
|
||||
<strong>{a.customName || tName}</strong>
|
||||
<span class="badge">{a.frequency}</span>
|
||||
<span class="badge type">{a.type}</span>
|
||||
{#if seasonFilter !== 'all' && isGlobalChore(a)}
|
||||
<span class="badge season">Add to</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="card-value">
|
||||
{a.type === 'money' ? `£${Number(a.value).toFixed(2)}` : `${a.value} pts`}
|
||||
</div>
|
||||
<button
|
||||
class="del-btn"
|
||||
title="Remove assignment"
|
||||
onclick={async (e) => {
|
||||
e.stopPropagation();
|
||||
const s = page.data.session as any;
|
||||
if (!s) return;
|
||||
await fetch(`/api/admin/${s.famId}/assigned-chores/${a.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'x-session-famid': s.famId, 'x-session-userid': s.userId }
|
||||
});
|
||||
}}>×</button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
{#if assignedForMember(m.id).length === 0}
|
||||
<p class="empty">Drop a chore here</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if members.length < 3}
|
||||
{#each Array(3 - members.length) as _}
|
||||
<div class="column column-placeholder"></div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</Card></CardGrid
|
||||
>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<!-- Create Template Modal -->
|
||||
{#if showCreateModal}
|
||||
@@ -714,26 +748,48 @@
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.kanban {
|
||||
/* ── Template section (top, like bonuses) ── */
|
||||
.template-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.template-header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
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 {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 280px;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-top-width: 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-top: 4px solid #6366f1;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem;
|
||||
background: #fafafa;
|
||||
background: #fafbff;
|
||||
min-height: 200px;
|
||||
}
|
||||
.column h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-size: 0.95rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
@@ -749,38 +805,58 @@
|
||||
color: #9ca3af;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
border: 1px dashed #d1d5db;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.add-inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.4rem;
|
||||
background: transparent;
|
||||
border: 1px dashed #d1d5db;
|
||||
border-radius: 6px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.35rem;
|
||||
padding: 0.45rem;
|
||||
background: rgba(99, 102, 241, 0.04);
|
||||
border: 1px dashed #c7d2fe;
|
||||
border-radius: 8px;
|
||||
color: #6366f1;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
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 {
|
||||
border-color: #6366f1;
|
||||
color: #6366f1;
|
||||
background: #eef2ff;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
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 {
|
||||
flex: 1;
|
||||
@@ -788,13 +864,14 @@
|
||||
}
|
||||
.card-body strong {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #1f2937;
|
||||
}
|
||||
.card-value {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
@@ -824,15 +901,19 @@
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 0 4px;
|
||||
padding: 2px 6px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.edit-btn:hover {
|
||||
color: #6366f1;
|
||||
background: #eef2ff;
|
||||
}
|
||||
.del-btn:hover {
|
||||
color: #dc2626;
|
||||
background: #fef2f2;
|
||||
}
|
||||
.hint {
|
||||
color: #6b7280;
|
||||
@@ -843,18 +924,18 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.season-filter label {
|
||||
font-size: 0.85rem;
|
||||
color: #374151;
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
.season-filter select {
|
||||
padding: 0.35rem 0.6rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
background: #fff;
|
||||
}
|
||||
.badge.season {
|
||||
background: #e0f2fe;
|
||||
@@ -889,7 +970,7 @@
|
||||
|
||||
.template {
|
||||
cursor: grab;
|
||||
border-left: 3px solid #6366f1;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
}
|
||||
.template:active {
|
||||
cursor: grabbing;
|
||||
@@ -897,10 +978,7 @@
|
||||
}
|
||||
.assigned {
|
||||
cursor: pointer;
|
||||
border-left: 3px solid #10b981;
|
||||
}
|
||||
.assigned:hover {
|
||||
background: #f3f4f6;
|
||||
border-left: 4px solid #10b981;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
@@ -962,38 +1040,45 @@
|
||||
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 {
|
||||
width: 100%;
|
||||
padding: 0.4rem 0.6rem;
|
||||
margin: 0.3rem 0 0.2rem;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border: none;
|
||||
border-left: 4px solid rgba(0,0,0,0.2);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
color: #374151;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
.accordion-head:hover {
|
||||
background: #e5e7eb;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.accordion-todos {
|
||||
background: #fffbeb;
|
||||
border-color: #fcd34d;
|
||||
.accordion-body {
|
||||
padding: 0.5rem 0.65rem 0.65rem;
|
||||
background: rgba(0,0,0,0.08);
|
||||
}
|
||||
.accordion-todos:hover {
|
||||
background: #fef3c7;
|
||||
}
|
||||
.accordion-arrow {
|
||||
font-size: 0.7rem;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.accordion-arrow.open {
|
||||
transform: rotate(180deg);
|
||||
.accordion-chevron {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ── Todo admin cards ── */
|
||||
@@ -1001,16 +1086,28 @@
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-left: 4px solid #3b82f6;
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.45rem 0.65rem;
|
||||
margin-bottom: 0.35rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
|
||||
}
|
||||
.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 {
|
||||
background: #eff6ff;
|
||||
@@ -1060,8 +1157,39 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.todo-badge {
|
||||
background: #fef3c7;
|
||||
color: #b45309;
|
||||
.todo-completed-badge {
|
||||
font-size: 0.65rem;
|
||||
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>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
const colors = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#ef4444', '#8b5cf6', '#14b8a6'];
|
||||
</script>
|
||||
|
||||
<ViewHeader title="Preferences" subtitle={data.verified ? data.memberName : ''} />
|
||||
<ViewHeader title="Preferences" subtitle={data.verified ? data.memberName : ''} hero />
|
||||
|
||||
{#if !data.verified}
|
||||
<CardGrid>
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
)
|
||||
</script>
|
||||
|
||||
<ViewHeader title="Reward Ledger" subtitle="All rewards earned by members" />
|
||||
<ViewHeader title="Reward Ledger" subtitle="All rewards earned by members" hero />
|
||||
|
||||
{#if toast}
|
||||
<div class="toast">{toast}</div>
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<ViewHeader title="Settings" />
|
||||
<ViewHeader title="Settings" hero />
|
||||
|
||||
<CardGrid>
|
||||
<Card title="Family Name">
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<ViewHeader title="Platform Admin" subtitle="Manage families and platform settings" />
|
||||
<ViewHeader title="Platform Admin" subtitle="Manage families and platform settings" hero />
|
||||
|
||||
<CardGrid>
|
||||
<Card cols={1} title="Overview" accent="#6366f1">
|
||||
|
||||
@@ -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 ──────────────────────────
|
||||
|
||||
app.get("/api/admin/:famId/seasons", requireAdmin, async (c) => {
|
||||
|
||||
Reference in New Issue
Block a user