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

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

Browse Source
This commit is contained in:
JCEEE
2026-08-31 18:03:44 +01:00
parent 3bf78d777c
commit 11a09d65ff
10 changed files with 724 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Sidebar.svelte
+21
View File
@@ -147,4 +147,25 @@
.nav-label {
overflow: hidden;
}
@media (max-width: 1023px) {
.sidebar {
width: 56px;
}
.sidebar-header {
justify-content: center;
padding: 1rem 0;
}
.app-name {
display: none;
}
.nav-item {
justify-content: center;
padding: 0.6rem 0;
margin: 0;
}
.nav-label {
display: none;
}
}
</style>
frontend/src/lib/components/TopNav.svelte
+5
View File
@@ -49,6 +49,11 @@
transition: left 0.2s;
gap: 0.75rem;
}
@media (max-width: 1023px) {
.topnav {
left: 56px;
}
}
.topnav-left { display: flex; align-items: center; gap: 0.5rem; }
.topnav-announcement { flex: 1; text-align: center; }
.announcement-text { font-size: 0.85rem; color: #6b7280; }
frontend/src/lib/components/ViewHeader.svelte
+138 -35
View File
@@ -1,20 +1,40 @@
<script lang="ts">
let { title, subtitle, hero = false, tabs, weeknav, sort }: {
import type { Snippet } from 'svelte';
let {
title,
subtitle,
hero = false,
tabs,
weeknav,
sort,
children
}: {
title: 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 };
sort?: { options: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
sort?: {
options: { label: string; value: string }[];
active: string;
onchange: (v: string) => void;
};
children?: Snippet;
} = $props();
</script>
<div class="view-header" class:hero>
<div class="view-header flex justify-between" class:hero>
<div class="view-title-group">
<h1 class="view-title">{title}</h1>
<h1 class="view-title text-3xl">{title}</h1>
{#if subtitle}<p class="view-subtitle">{subtitle}</p>{/if}
</div>
{@render children?.()}
<div class="view-tools">
{#if tabs}
<div class="tab-bar">
@@ -22,8 +42,8 @@
<button
class="tab-btn"
class:active={tab.value === tabs.active}
onclick={() => tabs.onchange(tab.value)}
>{tab.label}</button>
onclick={() => tabs.onchange(tab.value)}>{tab.label}</button
>
{/each}
</div>
{/if}
@@ -37,7 +57,11 @@
{/if}
{#if sort}
<select class="sort-select" value={sort.active} onchange={(e) => sort.onchange(e.currentTarget.value)}>
<select
class="sort-select"
value={sort.active}
onchange={(e) => sort.onchange(e.currentTarget.value)}
>
{#each sort.options as opt}
<option value={opt.value}>{opt.label}</option>
{/each}
@@ -47,27 +71,80 @@
</div>
<style>
.view-header { margin-bottom: 1.5rem; }
.view-title-group { margin-bottom: 0.5rem; }
.view-title { font-size: 1.4rem; font-weight: 700; color: #111827; margin: 0; }
.view-subtitle { font-size: 0.9rem; color: #6b7280; margin: 0.25rem 0 0 0; }
.view-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tab-bar { display: flex; gap: 2px; background: #f3f4f6; border-radius: 6px; padding: 2px; }
.view-header {
margin-bottom: 1.5rem;
}
.view-title-group {
margin-bottom: 0.5rem;
}
.view-title {
font-weight: 700;
color: #111827;
margin: 0;
}
.view-subtitle {
font-size: 0.9rem;
color: #6b7280;
margin: 0.25rem 0 0 0;
}
.view-tools {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.tab-bar {
display: flex;
gap: 2px;
background: #f3f4f6;
border-radius: 6px;
padding: 2px;
}
.tab-btn {
padding: 0.35rem 0.85rem; border: none; background: transparent; border-radius: 5px;
font-size: 0.85rem; color: #6b7280; cursor: pointer;
padding: 0.35rem 0.85rem;
border: none;
background: transparent;
border-radius: 5px;
font-size: 0.85rem;
color: #6b7280;
cursor: pointer;
}
.tab-btn.active {
background: #fff;
color: #4338ca;
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.week-nav {
display: flex;
align-items: center;
gap: 0.5rem;
}
.tab-btn.active { background: #fff; color: #4338ca; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.week-nav { display: flex; align-items: center; gap: 0.5rem; }
.nav-btn {
padding: 0.2rem 0.5rem; border: 1px solid #d1d5db; background: #fff; border-radius: 4px;
cursor: pointer; font-size: 1rem; line-height: 1;
padding: 0.2rem 0.5rem;
border: 1px solid #d1d5db;
background: #fff;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
line-height: 1;
}
.nav-btn:hover {
background: #f3f4f6;
}
.nav-label {
font-size: 0.85rem;
color: #374151;
font-weight: 500;
min-width: 140px;
text-align: center;
}
.nav-btn:hover { background: #f3f4f6; }
.nav-label { font-size: 0.85rem; color: #374151; font-weight: 500; min-width: 140px; text-align: center; }
.sort-select {
padding: 0.3rem 0.6rem; border: 1px solid #d1d5db; border-radius: 5px;
font-size: 0.85rem; background: #fff;
padding: 0.3rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 0.85rem;
background: #fff;
}
/* ── Hero lead (child-dashboard style) ── */
@@ -78,15 +155,41 @@
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; }
.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>
frontend/src/lib/server/services/index.ts
+4
View File
@@ -7,6 +7,7 @@ import * as chatSvc from './chat';
import * as settingsSvc from './settings';
import * as crudSvc from './crud';
import * as debugSvc from './debug';
import * as statsSvc from './stats';
export * from './chat';
export { famMeta } from './fam';
@@ -93,6 +94,9 @@ export function createServices(
},
debug: {
generateData: (famId: string, days?: number) => debugSvc.generateData(pb, famId, days)
},
stats: {
family: (famId: string) => statsSvc.familyStats(pb, famId)
}
};
}
frontend/src/lib/server/services/stats.ts
+120
View File
@@ -0,0 +1,120 @@
import { addDaysStr, weekdayInTz, resolveTz } from '@shared/timezone';
import { famMeta } from './fam';
// Week start (payday-anchored) for an arbitrary YYYY-MM-DD date — a
// parametric form of `weekStart()` so we can bucket historical weeks, not
// just the current one.
function weekStartFor(dateStr: string, payday: number, tz: string): string {
const wd = weekdayInTz(new Date(dateStr + 'T12:00:00Z'), tz);
const back = (((wd - payday) % 7) + 7) % 7;
return addDaysStr(dateStr, -back);
}
export type WeeklyPoint = {
weekStart: string;
points: number;
cash: number;
chores: number;
};
export type MemberSeries = {
memberId: string;
memberName: string;
memberColor: string;
weeks: WeeklyPoint[];
};
export type FamilyStats = {
allTimePts: number;
allTimeCash: number;
allTimeChores: number;
series: MemberSeries[];
};
// Server-side lifetime + weekly aggregates. Scans full-history `completions`
// and `rewards` once here (filtered and summed on the server) so the client
// receives fixed-size pre-computed numbers instead of every historical row —
// this is what keeps the all-time totals + retrospective graph scalable.
export async function familyStats(pb: any, famId: string): Promise<FamilyStats> {
const { payday, tz } = await famMeta(pb, famId);
const [members, assigned, completions, rewards] = await Promise.all([
pb.collection('users').getFullList({ filter: `famId = '${famId}' && role = 'child'` }),
pb.collection('assigned_chores').getFullList({ filter: `famId = '${famId}'` }),
pb.collection('completions').getFullList({ filter: `famId = '${famId}'` }),
pb.collection('rewards').getFullList({ filter: `famId = '${famId}'` })
]);
const assignedMap = new Map<string, any>(assigned.map((a: any) => [a.id, a]));
const memberPts: Record<string, number> = {};
const memberCash: Record<string, number> = {};
const memberChores: Record<string, number> = {};
for (const m of members) {
memberPts[m.id] = 0;
memberCash[m.id] = 0;
memberChores[m.id] = 0;
}
// Per-member weekly buckets (points/cash/chores), keyed by `memberId:weekStart`.
const weekMap = new Map<string, WeeklyPoint>();
function addWeek(memberId: string, weekStart: string, pts: number, cash: number, chores: number) {
const key = `${memberId}:${weekStart}`;
const w = weekMap.get(key);
if (w) {
w.points += pts;
w.cash += cash;
w.chores += chores;
} else {
weekMap.set(key, { weekStart, points: pts, cash, chores });
}
}
// Chore completions contribute their chore value (points/money) to the
// member's lifetime totals and their weekly bucket. Every completion counts
// as a chore done (regardless of type).
for (const c of completions) {
const chore = assignedMap.get(c.assignedChoreId);
const pts = chore?.type === 'points' ? Number(chore.value) || 0 : 0;
const cash = chore?.type === 'money' ? Number(chore.value) || 0 : 0;
const date = (c.date || '').slice(0, 10);
memberPts[c.memberId] = (memberPts[c.memberId] || 0) + pts;
memberCash[c.memberId] = (memberCash[c.memberId] || 0) + cash;
memberChores[c.memberId] = (memberChores[c.memberId] || 0) + 1;
if (date) addWeek(c.memberId, weekStartFor(date, payday, tz), pts, cash, 1);
}
// Claimed rewards (bonuses/triggers/pocket money) count toward lifetime
// earnings once issued. Unclaimed/requested stay "to chase" client-side.
for (const r of rewards) {
if (r.status !== 'claimed') continue;
const date = ((r.claimedAt as string) || (r.date as string) || '').slice(0, 10);
if (r.rewardType === 'points') {
const v = Number(r.value) || 0;
memberPts[r.memberId] = (memberPts[r.memberId] || 0) + v;
if (date) addWeek(r.memberId, weekStartFor(date, payday, tz), v, 0, 0);
} else if (r.rewardType === 'cash') {
const v = Number(r.value) || 0;
memberCash[r.memberId] = (memberCash[r.memberId] || 0) + v;
if (date) addWeek(r.memberId, weekStartFor(date, payday, tz), 0, v, 0);
}
}
const series: MemberSeries[] = members.map((m: any) => ({
memberId: m.id,
memberName: m.name,
memberColor: m.color || '#6366f1',
weeks: [...weekMap.entries()]
.filter(([key]) => key.startsWith(m.id + ':'))
.map(([, w]) => w)
.sort((a, b) => a.weekStart.localeCompare(b.weekStart))
}));
return {
allTimePts: Object.values(memberPts).reduce((s, n) => s + n, 0),
allTimeCash: Object.values(memberCash).reduce((s, n) => s + n, 0),
allTimeChores: Object.values(memberChores).reduce((s, n) => s + n, 0),
series
};
}