added pocketmoney default droplet
This commit is contained in:
JCEEE
@@ -55,6 +55,35 @@ export async function createChild(opts: {
|
||||
}
|
||||
|
||||
if (!user) throw new Error('Failed to create child');
|
||||
|
||||
// Auto-create the child's pocket-money droplet. The amount (rewardValue)
|
||||
// starts empty — the parent sets it on the Bonuses page. This keeps pocket
|
||||
// money a first-class, always-present feature without a separate field.
|
||||
const pm = await pb
|
||||
.collection('bonus_configs')
|
||||
.getFirstListItem(`famId='${opts.famId}' && memberId='${user.id}' && isPocketMoney=true`)
|
||||
.catch(() => null);
|
||||
if (!pm) {
|
||||
await pb
|
||||
.collection('bonus_configs')
|
||||
.create({
|
||||
famId: opts.famId,
|
||||
name: 'Pocket Money',
|
||||
target: 'individual',
|
||||
type: 'threshold',
|
||||
thresholdType: 'percent',
|
||||
occurrence: 'recurring',
|
||||
rewardType: 'cash',
|
||||
rewardValue: '',
|
||||
criteriaValue: 50,
|
||||
memberId: user.id,
|
||||
period: 'weekly',
|
||||
status: 'active',
|
||||
isPocketMoney: true
|
||||
})
|
||||
.catch(() => null);
|
||||
}
|
||||
|
||||
return user;
|
||||
}
|
||||
|
||||
|
||||
@@ -327,7 +327,76 @@ export async function migrate(): Promise<void> {
|
||||
// Runs even when the schema already exists (unlike ensureSchema's early
|
||||
// return) so new platform collections/fields/seed land on existing installs.
|
||||
await ensureFamFields();
|
||||
await ensureBonusFields();
|
||||
await ensureAccessCodes();
|
||||
await ensurePlatform();
|
||||
console.log("[migrate] Done");
|
||||
}
|
||||
|
||||
// Add the pocket-money fields to bonus collections on existing installs, and
|
||||
// backfill a default pocket-money droplet (£10 / 50% chores) for any child that
|
||||
// doesn't yet have one. Idempotent.
|
||||
async function ensureBonusFields(): Promise<void> {
|
||||
for (const name of ["bonus_templates", "bonus_configs"]) {
|
||||
const col = await getCollection(name);
|
||||
if (!col) continue;
|
||||
const has = (n: string) => col.fields.some((f: any) => f.name === n);
|
||||
let changed = false;
|
||||
const fields = [...col.fields];
|
||||
if (!has("thresholdType")) {
|
||||
fields.push({
|
||||
name: "thresholdType", type: "select", required: false,
|
||||
values: ["points", "percent"], maxSelect: 1,
|
||||
});
|
||||
changed = true;
|
||||
}
|
||||
if (!has("isPocketMoney")) {
|
||||
fields.push({ name: "isPocketMoney", type: "bool", required: false });
|
||||
changed = true;
|
||||
}
|
||||
// rewardValue must be optional so an unset pocket-money droplet can exist.
|
||||
const rv = fields.find((f: any) => f.name === "rewardValue");
|
||||
if (rv && rv.required) {
|
||||
rv.required = false;
|
||||
changed = true;
|
||||
}
|
||||
if (changed) await updateCollection(col.id, { ...col, fields });
|
||||
}
|
||||
await backfillPocketMoney();
|
||||
}
|
||||
|
||||
async function backfillPocketMoney(): Promise<void> {
|
||||
const t = await auth();
|
||||
const childrenRes = await fetch(
|
||||
`${PB_ENDPOINT}/api/collections/users/records?filter=role='child'&perPage=500`,
|
||||
{ headers: { Authorization: `Bearer ${t}` } }
|
||||
);
|
||||
const children: any[] = (await childrenRes.json())?.items || [];
|
||||
for (const c of children) {
|
||||
const existingRes = await fetch(
|
||||
`${PB_ENDPOINT}/api/collections/bonus_configs/records?filter=famId='${c.famId}' && memberId='${c.id}' && isPocketMoney=true`,
|
||||
{ headers: { Authorization: `Bearer ${t}` } }
|
||||
);
|
||||
if ((await existingRes.json())?.items?.length) continue;
|
||||
await fetch(`${PB_ENDPOINT}/api/collections/bonus_configs/records`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", Authorization: `Bearer ${t}` },
|
||||
body: JSON.stringify({
|
||||
famId: c.famId,
|
||||
name: "Pocket Money",
|
||||
target: "individual",
|
||||
type: "threshold",
|
||||
thresholdType: "percent",
|
||||
occurrence: "recurring",
|
||||
rewardType: "cash",
|
||||
rewardValue: 10,
|
||||
criteriaValue: 50,
|
||||
memberId: c.id,
|
||||
period: "weekly",
|
||||
status: "active",
|
||||
isPocketMoney: true,
|
||||
}),
|
||||
}).catch(() => {});
|
||||
}
|
||||
console.log("[migrate] Pocket-money droplets ensured.");
|
||||
}
|
||||
@@ -44,7 +44,17 @@ export async function evaluateFam(pb: any, famId: string) {
|
||||
} catch {}
|
||||
const { payday: paydayEval, tz: tzEval } = await famMeta(pb, famId);
|
||||
|
||||
// Chores "due" this week per member (daily = 7, otherwise 1). Used by the
|
||||
// `percent` threshold type to compute % of chores completed.
|
||||
const dueByMember: Record<string, number> = {};
|
||||
for (const a of allAssigned) {
|
||||
if (a.memberId) dueByMember[a.memberId] = (dueByMember[a.memberId] || 0) + (a.frequency === 'daily' ? 7 : 1);
|
||||
}
|
||||
const totalDue = Object.values(dueByMember).reduce((s, n) => s + n, 0) || 1;
|
||||
|
||||
for (const cfg of configs) {
|
||||
// Pocket money pauses until the parent sets an amount.
|
||||
if (cfg.isPocketMoney && !cfg.rewardValue) continue;
|
||||
const pStart2 = cfg.period ? periodStart(cfg.period, paydayEval, tzEval) : '';
|
||||
const pEnd = cfg.period ? periodEnd(cfg.period, pStart2) : '';
|
||||
const periodCompletions = cfg.period
|
||||
@@ -82,10 +92,15 @@ export async function evaluateFam(pb: any, famId: string) {
|
||||
const memberCompletions = periodCompletions.filter((c: any) => c.memberId === m.id);
|
||||
let current = 0;
|
||||
if (cfg.type === 'threshold') {
|
||||
current = memberCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
if (cfg.thresholdType === 'percent') {
|
||||
const due = dueByMember[m.id] || 0;
|
||||
current = due > 0 ? Math.round((memberCompletions.length / due) * 100) : 0;
|
||||
} else {
|
||||
current = memberCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
}
|
||||
} else if (cfg.type === 'count') {
|
||||
current = memberCompletions.length;
|
||||
}
|
||||
@@ -114,10 +129,14 @@ export async function evaluateFam(pb: any, famId: string) {
|
||||
const teamCompletions = periodCompletions.filter((c: any) => allMemberIds.includes(c.memberId));
|
||||
let total = 0;
|
||||
if (cfg.type === 'threshold') {
|
||||
total = teamCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
if (cfg.thresholdType === 'percent') {
|
||||
total = Math.round((teamCompletions.length / totalDue) * 100);
|
||||
} else {
|
||||
total = teamCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
}
|
||||
} else if (cfg.type === 'count') {
|
||||
total = teamCompletions.length;
|
||||
}
|
||||
@@ -145,10 +164,15 @@ export async function evaluateFam(pb: any, famId: string) {
|
||||
const memberCompletions = periodCompletions.filter((c: any) => c.memberId === m.id);
|
||||
let current = 0;
|
||||
if (cfg.type === 'threshold') {
|
||||
current = memberCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
if (cfg.thresholdType === 'percent') {
|
||||
const due = dueByMember[m.id] || 0;
|
||||
current = due > 0 ? Math.round((memberCompletions.length / due) * 100) : 0;
|
||||
} else {
|
||||
current = memberCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
}
|
||||
} else if (cfg.type === 'count') {
|
||||
current = memberCompletions.length;
|
||||
}
|
||||
@@ -203,6 +227,11 @@ export async function progress(pb: any, famId: string) {
|
||||
|
||||
const assignedList = assigned;
|
||||
const completionsList = completions;
|
||||
const dueByMember: Record<string, number> = {};
|
||||
for (const a of assignedList) {
|
||||
if (a.memberId) dueByMember[a.memberId] = (dueByMember[a.memberId] || 0) + (a.frequency === 'daily' ? 7 : 1);
|
||||
}
|
||||
const totalDue = Object.values(dueByMember).reduce((s, n) => s + n, 0) || 1;
|
||||
let allRewards: any[] = [];
|
||||
try {
|
||||
allRewards = await pb.collection('rewards').getFullList({ filter: `famId = '${famId}'` });
|
||||
@@ -226,10 +255,14 @@ export async function progress(pb: any, famId: string) {
|
||||
);
|
||||
let teamCurrent = 0;
|
||||
if (cfg.type === 'threshold') {
|
||||
teamCurrent = teamCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = assignedList.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
if (cfg.thresholdType === 'percent') {
|
||||
teamCurrent = Math.round((teamCompletions.length / totalDue) * 100);
|
||||
} else {
|
||||
teamCurrent = teamCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = assignedList.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
}
|
||||
} else if (cfg.type === 'count') {
|
||||
teamCurrent = teamCompletions.length;
|
||||
}
|
||||
@@ -257,10 +290,15 @@ export async function progress(pb: any, famId: string) {
|
||||
|
||||
let current = 0;
|
||||
if (cfg.type === 'threshold') {
|
||||
current = memberCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = assignedList.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
if (cfg.thresholdType === 'percent') {
|
||||
const due = dueByMember[m.id] || 0;
|
||||
current = due > 0 ? Math.round((memberCompletions.length / due) * 100) : 0;
|
||||
} else {
|
||||
current = memberCompletions.reduce((sum: number, c: any) => {
|
||||
const chore = assignedList.find((a: any) => a.id === c.assignedChoreId);
|
||||
return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
|
||||
}, 0);
|
||||
}
|
||||
} else if (cfg.type === 'count') {
|
||||
current = memberCompletions.length;
|
||||
} else if (cfg.type === 'manual') {
|
||||
|
||||
@@ -2,6 +2,7 @@ export type Frequency = 'daily' | 'weekly';
|
||||
export type RewardType = 'points' | 'money' | 'emoji';
|
||||
export type BonusTarget = 'individual' | 'competitive' | 'collaborative';
|
||||
export type BonusType = 'threshold' | 'count' | 'manual';
|
||||
export type BonusThresholdType = 'points' | 'percent';
|
||||
export type BonusOccurrence = 'recurring' | 'once';
|
||||
export type BonusRewardType = 'points' | 'cash' | 'prize';
|
||||
export type BonusPeriod = 'weekly' | 'monthly' | 'daily';
|
||||
@@ -15,11 +16,13 @@ export interface BonusTemplate {
|
||||
description?: string;
|
||||
target: BonusTarget;
|
||||
type: BonusType;
|
||||
thresholdType?: BonusThresholdType;
|
||||
occurrence: BonusOccurrence;
|
||||
rewardType: BonusRewardType;
|
||||
rewardValue: string;
|
||||
criteriaValue?: number;
|
||||
period?: BonusPeriod;
|
||||
isPocketMoney?: boolean;
|
||||
created: string;
|
||||
updated: string;
|
||||
}
|
||||
@@ -117,12 +120,14 @@ export interface BonusConfig {
|
||||
target: BonusTarget;
|
||||
memberId?: string;
|
||||
type: BonusType;
|
||||
thresholdType?: BonusThresholdType;
|
||||
occurrence: BonusOccurrence;
|
||||
rewardType: BonusRewardType;
|
||||
rewardValue: string;
|
||||
criteriaValue?: number;
|
||||
period?: BonusPeriod;
|
||||
status: BonusStatus;
|
||||
isPocketMoney?: boolean;
|
||||
created: string;
|
||||
updated: string;
|
||||
}
|
||||
|
||||
@@ -633,16 +633,33 @@
|
||||
{@const done = todays.length}
|
||||
{@const pct = total > 0 ? Math.round((done / total) * 100) : 0}
|
||||
{@const s = memberInSummary(m.id)}
|
||||
{@const pm = parentBonusConfigs.find(
|
||||
(c: any) => c.isPocketMoney && c.memberId === m.id
|
||||
)}
|
||||
<div class="member-card">
|
||||
<div class="card-header">
|
||||
<span class="dot" style="background:{m.color}"></span>
|
||||
<span class="member-name">{m.name}</span>
|
||||
<a href="/{famSlug}/{handleOf(m.username)}" class="link">Kanban</a>
|
||||
<Button
|
||||
href="/{famSlug}/{username}/bonuses?s=pocketmoney"
|
||||
variant="secondary"
|
||||
size="sm">Pocket money</Button
|
||||
>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span>Points: {s?.pointsEarned ?? 0}</span>
|
||||
<span>Money: £{(s?.moneyEarned ?? 0).toFixed(2)}</span>
|
||||
</div>
|
||||
<div class="pocket-row">
|
||||
{#if pm && pm.rewardValue}
|
||||
<span
|
||||
>Pocket money: £{Number(pm.rewardValue).toFixed(2)} · {pm.criteriaValue || 0}% of
|
||||
chores</span
|
||||
>
|
||||
{:else}
|
||||
<span class="unset">Pocket money: amount not set</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="progress-row">
|
||||
<span class="label">Today:</span>
|
||||
<div class="bar-wrap">
|
||||
@@ -1362,6 +1379,15 @@ const res = await fetch('/api/members', {
|
||||
color: #6366f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.pocket-row {
|
||||
font-size: 0.78rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.pocket-row .unset {
|
||||
color: #b45309;
|
||||
font-weight: 600;
|
||||
}
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
|
||||
@@ -25,6 +25,7 @@ export const actions = {
|
||||
description: fd.get('description') || '',
|
||||
target: fd.get('target'),
|
||||
type: fd.get('type'),
|
||||
thresholdType: fd.get('thresholdType') || 'points',
|
||||
occurrence: fd.get('occurrence'),
|
||||
rewardType: fd.get('rewardType'),
|
||||
rewardValue: fd.get('rewardValue')
|
||||
@@ -55,6 +56,8 @@ export const actions = {
|
||||
if (target) data.target = target;
|
||||
const type = fd.get('type');
|
||||
if (type) data.type = type;
|
||||
const thresholdType = fd.get('thresholdType');
|
||||
if (thresholdType) data.thresholdType = thresholdType;
|
||||
const occurrence = fd.get('occurrence');
|
||||
if (occurrence) data.occurrence = occurrence;
|
||||
const rewardType = fd.get('rewardType');
|
||||
@@ -101,6 +104,7 @@ export const actions = {
|
||||
name: fd.get('name'),
|
||||
target: fd.get('target'),
|
||||
type: fd.get('type'),
|
||||
thresholdType: fd.get('thresholdType') || 'points',
|
||||
occurrence: fd.get('occurrence'),
|
||||
rewardType: fd.get('rewardType'),
|
||||
rewardValue: fd.get('rewardValue'),
|
||||
@@ -136,6 +140,8 @@ export const actions = {
|
||||
if (target) data.target = target;
|
||||
const type = fd.get('type');
|
||||
if (type) data.type = type;
|
||||
const thresholdType = fd.get('thresholdType');
|
||||
if (thresholdType) data.thresholdType = thresholdType;
|
||||
const occurrence = fd.get('occurrence');
|
||||
if (occurrence) data.occurrence = occurrence;
|
||||
const rewardType = fd.get('rewardType');
|
||||
@@ -185,6 +191,7 @@ export const actions = {
|
||||
description: fd.get('description') || '',
|
||||
target: fd.get('target'),
|
||||
type: fd.get('type'),
|
||||
thresholdType: fd.get('thresholdType') || 'points',
|
||||
occurrence: fd.get('occurrence'),
|
||||
rewardType: fd.get('rewardType'),
|
||||
rewardValue: fd.get('rewardValue'),
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
target: 'individual' as string,
|
||||
memberId: '' as string,
|
||||
type: 'threshold' as string,
|
||||
thresholdType: 'points' as string,
|
||||
occurrence: 'recurring' as string,
|
||||
rewardType: 'points' as string,
|
||||
rewardValue: '100',
|
||||
@@ -41,6 +42,7 @@
|
||||
target: 'individual' as string,
|
||||
memberId: '' as string,
|
||||
type: 'threshold' as string,
|
||||
thresholdType: 'points' as string,
|
||||
occurrence: 'recurring' as string,
|
||||
rewardType: 'points' as string,
|
||||
rewardValue: '100',
|
||||
@@ -69,6 +71,8 @@
|
||||
|
||||
let showPeriod = $derived(editVals.occurrence !== 'once');
|
||||
let showCriteria = $derived(editVals.type !== 'manual');
|
||||
let createIsPercent = $derived(createVals.type === 'threshold' && createVals.thresholdType === 'percent');
|
||||
let editIsPercent = $derived(editVals.type === 'threshold' && editVals.thresholdType === 'percent');
|
||||
|
||||
let templateConfigs = $derived(templates as BonusTemplate[]);
|
||||
let allBonusConfigs = $derived(
|
||||
@@ -88,6 +92,15 @@
|
||||
|
||||
const username = $derived(page.params.username);
|
||||
|
||||
// Pocket money: seeded for every child, but the amount (rewardValue) starts
|
||||
// empty until the parent sets it on this page. The admin dashboard links
|
||||
// here with ?s=pocketmoney to surface this mandatory teaching notice.
|
||||
let pocketNotice = $derived(page.url.searchParams.get('s') === 'pocketmoney');
|
||||
let pocketConfigs = $derived(
|
||||
(configs as BonusConfig[]).filter((c: BonusConfig) => c.isPocketMoney)
|
||||
);
|
||||
let hasUnsetPocket = $derived(pocketConfigs.some((c: BonusConfig) => !c.rewardValue));
|
||||
|
||||
function memberName(id: string): string {
|
||||
const m = members.find((m) => m.id === id);
|
||||
return m?.name || 'Unknown';
|
||||
@@ -131,6 +144,7 @@
|
||||
target: targetType,
|
||||
memberId: '',
|
||||
type: tpl.type,
|
||||
thresholdType: tpl.thresholdType || 'points',
|
||||
occurrence: tpl.occurrence,
|
||||
rewardType: tpl.rewardType,
|
||||
rewardValue: tpl.rewardValue,
|
||||
@@ -186,6 +200,7 @@
|
||||
target: cfg.target,
|
||||
memberId: cfg.memberId || '',
|
||||
type: cfg.type,
|
||||
thresholdType: cfg.thresholdType || 'points',
|
||||
occurrence: cfg.occurrence,
|
||||
rewardType: cfg.rewardType,
|
||||
rewardValue: cfg.rewardValue,
|
||||
@@ -205,6 +220,26 @@
|
||||
</script>
|
||||
|
||||
<ViewHeader title="Bonuses" hero />
|
||||
|
||||
{#if pocketNotice}
|
||||
<CardGrid>
|
||||
<Card cols={3} accent={hasUnsetPocket ? '#f59e0b' : '#10b981'}>
|
||||
<div class="pocket-notice">
|
||||
<strong>Pocket Money</strong>
|
||||
{#if hasUnsetPocket}
|
||||
<p>
|
||||
Every child has a <em>Pocket Money</em> droplet. Set how it's awarded — pick the
|
||||
amount (£) and the % of weekly chores they must complete to earn it — then save. Until
|
||||
you set the amount, pocket money is paused for that child.
|
||||
</p>
|
||||
{:else}
|
||||
<p>All Pocket Money droplets are set. Children will earn pocket money as they complete chores.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
{/if}
|
||||
|
||||
<CardGrid>
|
||||
<Card cols={3}>
|
||||
<div class="template-section">
|
||||
@@ -214,10 +249,6 @@
|
||||
<div class="template-card" draggable="true" ondragstart={(e) => handleDragStart(e, cfg)}>
|
||||
<div class="card-head">
|
||||
<strong>{cfg.name}</strong>
|
||||
<form method="POST" action="?/deleteTemplate" use:enhance>
|
||||
<input type="hidden" name="id" value={cfg.id} />
|
||||
<button type="submit" class="del-btn" title="Delete">×</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="badges">
|
||||
<span class="badge {badgeClass(cfg)}">{cfg.target}</span>
|
||||
@@ -226,6 +257,9 @@
|
||||
{#if cfg.period}
|
||||
<span class="badge period">{cfg.period}</span>
|
||||
{/if}
|
||||
{#if cfg.isPocketMoney}
|
||||
<span class="badge pocket">Pocket Money</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="reward-preview">
|
||||
{formatReward(cfg.rewardType, cfg.rewardValue)}
|
||||
@@ -243,6 +277,7 @@
|
||||
target: cfg.target,
|
||||
memberId: '',
|
||||
type: cfg.type,
|
||||
thresholdType: cfg.thresholdType || 'points',
|
||||
occurrence: cfg.occurrence,
|
||||
rewardType: cfg.rewardType,
|
||||
rewardValue: cfg.rewardValue,
|
||||
@@ -277,6 +312,9 @@
|
||||
<span class="badge {badgeClass(cfg)}">{cfg.target}</span>
|
||||
<span class="badge">{cfg.type}</span>
|
||||
<span class="badge">{cfg.occurrence}</span>
|
||||
{#if cfg.isPocketMoney}
|
||||
<span class="badge pocket">Pocket Money</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#each members as m}
|
||||
@@ -292,7 +330,12 @@
|
||||
{@const criteria = p?.criteriaValue ?? cfg.criteriaValue ?? 0}
|
||||
{@const current = p?.current ?? 0}
|
||||
{@const achieved = p?.achieved ?? false}
|
||||
{@const pct = criteria > 0 ? Math.min(100, (current / criteria) * 100) : 0}
|
||||
{@const isPct = cfg.thresholdType === 'percent'}
|
||||
{@const pct = isPct
|
||||
? Math.min(100, current)
|
||||
: criteria > 0
|
||||
? Math.min(100, (current / criteria) * 100)
|
||||
: 0}
|
||||
<div class="member-progress">
|
||||
<span class="mname" style="color:{m.color}">{m.name}</span>
|
||||
{#if criteria > 0}
|
||||
@@ -345,7 +388,9 @@
|
||||
class="bar-fill"
|
||||
style="width:{Math.min(
|
||||
100,
|
||||
(p.current / Math.max(1, p.criteriaValue)) * 100
|
||||
cfg.thresholdType === 'percent'
|
||||
? p.current
|
||||
: (p.current / Math.max(1, p.criteriaValue)) * 100
|
||||
)}%"
|
||||
class:met={p.achieved}
|
||||
></div>
|
||||
@@ -391,14 +436,16 @@
|
||||
<span class="mname" style="color:{team.memberColor}">{team.memberName}</span>
|
||||
{#if team.criteriaValue > 0}
|
||||
<div class="bar-wrap">
|
||||
<div
|
||||
class="bar-fill"
|
||||
style="width:{Math.min(
|
||||
<div
|
||||
class="bar-fill"
|
||||
style="width:{Math.min(
|
||||
100,
|
||||
(team.current / Math.max(1, team.criteriaValue)) * 100
|
||||
cfg.thresholdType === 'percent'
|
||||
? team.current
|
||||
: (team.current / Math.max(1, team.criteriaValue)) * 100
|
||||
)}%"
|
||||
class:met={team.achieved}
|
||||
></div>
|
||||
class:met={team.achieved}
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
<span class="stat">
|
||||
@@ -449,20 +496,43 @@
|
||||
<option value="manual">Manual</option>
|
||||
</select>
|
||||
</label>
|
||||
{#if showCriteriaForCreate}
|
||||
{#if createVals.type === 'threshold'}
|
||||
<label
|
||||
>Target Value
|
||||
<input
|
||||
type="number"
|
||||
name="criteriaValue"
|
||||
bind:value={createVals.criteriaValue}
|
||||
required
|
||||
/>
|
||||
<span class="hint"
|
||||
>{createVals.type === 'threshold' ? 'Points to reach' : 'Number of chores'}</span
|
||||
>
|
||||
>Threshold by
|
||||
<select name="thresholdType" bind:value={createVals.thresholdType}>
|
||||
<option value="points">Points</option>
|
||||
<option value="percent">% of chores done</option>
|
||||
</select>
|
||||
</label>
|
||||
{/if}
|
||||
{#if showCriteriaForCreate}
|
||||
{#if createIsPercent}
|
||||
<label
|
||||
>Chores completed (%)
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
name="criteriaValue"
|
||||
bind:value={createVals.criteriaValue}
|
||||
/>
|
||||
<span class="hint">{createVals.criteriaValue}% of chores this week</span>
|
||||
</label>
|
||||
{:else}
|
||||
<label
|
||||
>Target Value
|
||||
<input
|
||||
type="number"
|
||||
name="criteriaValue"
|
||||
bind:value={createVals.criteriaValue}
|
||||
required
|
||||
/>
|
||||
<span class="hint"
|
||||
>{createVals.type === 'threshold' ? 'Points to reach' : 'Number of chores'}</span
|
||||
>
|
||||
</label>
|
||||
{/if}
|
||||
{/if}
|
||||
<label
|
||||
>Occurrence
|
||||
<select name="occurrence" bind:value={createVals.occurrence}>
|
||||
@@ -572,24 +642,47 @@
|
||||
<option value="manual">Manual</option>
|
||||
</select>
|
||||
</label>
|
||||
{#if showCriteria}
|
||||
{#if editVals.type === 'threshold'}
|
||||
<label
|
||||
>Target Value
|
||||
<input
|
||||
type="number"
|
||||
name="criteriaValue"
|
||||
bind:value={editVals.criteriaValue}
|
||||
required
|
||||
/>
|
||||
<span class="hint"
|
||||
>{editVals.type === 'threshold'
|
||||
? 'Points to reach'
|
||||
: editVals.type === 'count'
|
||||
? 'Number of chores'
|
||||
: 'N/A'}</span
|
||||
>
|
||||
>Threshold by
|
||||
<select name="thresholdType" bind:value={editVals.thresholdType}>
|
||||
<option value="points">Points</option>
|
||||
<option value="percent">% of chores done</option>
|
||||
</select>
|
||||
</label>
|
||||
{/if}
|
||||
{#if showCriteria}
|
||||
{#if editIsPercent}
|
||||
<label
|
||||
>Chores completed (%)
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
name="criteriaValue"
|
||||
bind:value={editVals.criteriaValue}
|
||||
/>
|
||||
<span class="hint">{editVals.criteriaValue}% of chores this week</span>
|
||||
</label>
|
||||
{:else}
|
||||
<label
|
||||
>Target Value
|
||||
<input
|
||||
type="number"
|
||||
name="criteriaValue"
|
||||
bind:value={editVals.criteriaValue}
|
||||
required
|
||||
/>
|
||||
<span class="hint"
|
||||
>{editVals.type === 'threshold'
|
||||
? 'Points to reach'
|
||||
: editVals.type === 'count'
|
||||
? 'Number of chores'
|
||||
: 'N/A'}</span
|
||||
>
|
||||
</label>
|
||||
{/if}
|
||||
{/if}
|
||||
<label
|
||||
>Occurrence
|
||||
<select name="occurrence" bind:value={editVals.occurrence}>
|
||||
@@ -731,7 +824,18 @@
|
||||
.template-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
margin-bottom: 0.75rem;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.template-list {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.template-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.template-card {
|
||||
background: white;
|
||||
@@ -804,6 +908,23 @@
|
||||
.badge.manual {
|
||||
background: #f3e8ff;
|
||||
}
|
||||
.badge.pocket {
|
||||
background: #fde68a;
|
||||
color: #92400e;
|
||||
font-weight: 600;
|
||||
}
|
||||
.pocket-notice strong {
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: 0.95rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
.pocket-notice p {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.reward-preview {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
|
||||
@@ -334,21 +334,6 @@
|
||||
<button onclick={() => openEditTemplate(t)} class="edit-btn" title="Edit template"
|
||||
>✎</button
|
||||
>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/deleteTemplate"
|
||||
use:enhance={() => {
|
||||
return async ({ result, formData }) => {
|
||||
if (result.type === 'success') {
|
||||
const id = formData.get('id');
|
||||
templates = templates.filter((t) => t.id !== id) as ChoreTemplate[];
|
||||
}
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={t.id} />
|
||||
<button type="submit" class="del-btn" title="Delete template">×</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
@@ -542,7 +527,7 @@
|
||||
<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
|
||||
<h3>Edit Template: {editingTemplate.name}</h3>
|
||||
<p class="hint">Changes will also update all existing assigned chores using this template.</p>
|
||||
<form method="POST" action="?/updateTemplate" use:enhance={enhanceUpdateTemplate}>
|
||||
<form id="updateTplForm" method="POST" action="?/updateTemplate" use:enhance={enhanceUpdateTemplate}>
|
||||
<input name="id" type="hidden" value={editingTemplate.id} />
|
||||
<label>
|
||||
Name
|
||||
@@ -566,11 +551,35 @@
|
||||
Default Value
|
||||
<input name="defaultValue" type="number" step="any" bind:value={editTplValue} required />
|
||||
</label>
|
||||
<div class="modal-actions">
|
||||
<button type="button" onclick={closeEditTemplate}>Cancel</button>
|
||||
<button type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="modal-actions">
|
||||
<button type="button" onclick={closeEditTemplate}>Cancel</button>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/deleteTemplate"
|
||||
use:enhance={() => {
|
||||
return async ({ result, formData }) => {
|
||||
if (result.type === 'success') {
|
||||
const id = formData.get('id');
|
||||
templates = templates.filter((t) => t.id !== id) as ChoreTemplate[];
|
||||
closeEditTemplate();
|
||||
}
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={editingTemplate.id} />
|
||||
<button
|
||||
type="submit"
|
||||
class="delete-btn"
|
||||
onclick={(e) => {
|
||||
if (!confirm('Delete this template? This cannot be undone.')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}>Delete</button
|
||||
>
|
||||
</form>
|
||||
<button type="submit" form="updateTplForm">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -780,7 +789,17 @@
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.template-list {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.template-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Kanban (3 columns, scrolls via Card scrollX) ── */
|
||||
@@ -1057,6 +1076,10 @@
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
}
|
||||
.modal-actions button.delete-btn {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ── Accordion wrappers ── */
|
||||
.accordion-wrapper {
|
||||
|
||||
@@ -54,6 +54,24 @@ export const actions = {
|
||||
role: 'parent'
|
||||
});
|
||||
await pbAdmin.create('settings', { famId: fam.id });
|
||||
// Seed the family-level POCKET MONEY bonus template (the teaching
|
||||
// droplet). Per-child instances are created when each child joins.
|
||||
await pbAdmin
|
||||
.create('bonus_templates', {
|
||||
famId: fam.id,
|
||||
name: 'POCKET MONEY',
|
||||
description: 'Weekly pocket money for children',
|
||||
target: 'individual',
|
||||
type: 'threshold',
|
||||
thresholdType: 'percent',
|
||||
occurrence: 'recurring',
|
||||
rewardType: 'cash',
|
||||
rewardValue: '',
|
||||
criteriaValue: 50,
|
||||
period: 'weekly',
|
||||
isPocketMoney: true
|
||||
})
|
||||
.catch(() => null);
|
||||
} catch (e) {
|
||||
throw new SignupError(
|
||||
`Could not create account — ${e instanceof Error ? e.message : 'please try again'}`
|
||||
|
||||
Reference in New Issue
Block a user