added todos | payday time settings | refactor payment scheduling

frontend/src/lib/client/api.ts

@@ -39,4 +39,7 @@ export const memberApi = {
     async requestAllRewards(token: string, famId: string) {
         return memberFetch<{ count: number }>('POST', '/api/members/rewards/request-all', token, famId);
     },
+    async payday(token: string, famId: string) {
+        return memberFetch('POST', `/api/fam/${famId}/payday`, token, famId);
+    },
 };

frontend/src/lib/server/hono.ts

@@ -24,8 +24,17 @@ async function request(
 		headers: headers || { 'Content-Type': 'application/json' },
 		body: body ? JSON.stringify(body) : undefined
 	});
-	const data = await res.json();
-	if (!res.ok) throw new Error(data.error || `${method} ${path} failed`);
+	const text = await res.text();
+	let data: any = {};
+	try {
+		data = text ? JSON.parse(text) : {};
+	} catch {
+		data = { raw: text };
+	}
+	if (!res.ok) {
+		const msg = data?.error || data?.message || `${method} ${path} failed (HTTP ${res.status})`;
+		throw new Error(msg);
+	}
 	return data;
 }
 
@@ -62,8 +71,19 @@ export const hono = {
 		async renameFam(event: RequestEvent, famId: string, name: string) {
 			return request('PATCH', `/api/admin/${famId}/fam`, { name }, sessionHeaders(event));
 		},
-		async updatePayday(event: RequestEvent, famId: string, payday: number) {
-			return request('PATCH', `/api/admin/${famId}/fam`, { payday }, sessionHeaders(event));
+		async updatePayday(
+			event: RequestEvent,
+			famId: string,
+			payday: number,
+			paydayTime?: string,
+			timezone?: string
+		) {
+			return request(
+				'PATCH',
+				`/api/admin/${famId}/fam`,
+				{ payday, ...(paydayTime !== undefined ? { paydayTime } : {}), ...(timezone !== undefined ? { timezone } : {}) },
+				sessionHeaders(event)
+			);
 		},
 		async fam(event: RequestEvent, famId: string) {
 			return request('GET', `/api/admin/${famId}/fam`, undefined, sessionHeaders(event));
@@ -216,6 +236,20 @@ export const hono = {
 		},
 		async request(event: RequestEvent, method: string, path: string, body?: unknown) {
 			return request(method, path, body, sessionHeaders(event));
+		},
+		async settings(event: RequestEvent, famId: string) {
+			return request('GET', `/api/admin/${famId}/settings`, undefined, sessionHeaders(event));
+		},
+		async updateSettings(event: RequestEvent, famId: string, data: Record<string, unknown>) {
+			return request('PATCH', `/api/admin/${famId}/settings`, data, sessionHeaders(event));
+		},
+		async eowPreview(event: RequestEvent, famId: string) {
+			return request(
+				'GET',
+				`/api/admin/${famId}/debug/eow-preview`,
+				undefined,
+				sessionHeaders(event)
+			);
 		}
 	}
 };

frontend/src/lib/types.ts

@@ -1,5 +1,5 @@
 export type Frequency = 'daily' | 'weekly';
-export type RewardType = 'points' | 'money';
+export type RewardType = 'points' | 'money' | 'emoji';
 export type BonusTarget = 'individual' | 'competitive' | 'collaborative';
 export type BonusType = 'threshold' | 'count' | 'manual';
 export type BonusOccurrence = 'recurring' | 'once';
@@ -43,6 +43,10 @@ export interface Fam {
 	inviteCode: string;
 	stripeCustomerId?: string;
 	featureFlags: Record<string, boolean>;
+	payday?: number;
+	paydayTime?: string;
+	timezone?: string;
+	lastIssued?: string;
 	created: string;
 	updated: string;
 }
@@ -70,16 +74,19 @@ export interface ChoreTemplate {
 	updated: string;
 }
 
-export interface AssignedChore {
+	export interface AssignedChore {
 	id: string;
 	famId: string;
 	memberId: string;
-	templateId: string;
+	templateId?: string;
 	frequency: Frequency;
 	type: RewardType;
 	value: number;
 	customName?: string;
 	seasonIds?: string[];
+	isTodo?: boolean;
+	startDate?: string;
+	completeBy?: string;
 	created: string;
 	updated: string;
 }
@@ -160,6 +167,7 @@ export interface Settings {
 	id: string;
 	famId: string;
 	webhookUrl?: string;
+	simulateEow?: boolean;
 }
 
 export interface Session {

frontend/src/routes/[fam]/+layout.server.ts

@@ -2,26 +2,48 @@ import { SERVER_IP, PROXY_PORT } from '../../../../config.ts';
 
 const HONO_URL = `http://${SERVER_IP}:${PROXY_PORT}`;
 
+async function paydayCheck(famId: string, headers: Record<string, string>) {
+	try {
+		const res = await fetch(`${HONO_URL}/api/fam/${famId}/payday`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				...headers
+			}
+		});
+		// Best-effort: never block render on the payday heartbeat.
+		await res.json().catch(() => null);
+	} catch {}
+}
+
 export async function load(event) {
 	const session = event.locals.session || null;
 	const isParent = session !== null;
+	const deviceToken = event.cookies.get('device_token') || '';
 
 	let famId = '';
 
 	if (isParent) {
 		famId = session.famId;
-	} else {
-		const deviceToken = event.cookies.get('device_token') || '';
-		if (deviceToken) {
-			try {
-				const res = await fetch(`${HONO_URL}/api/members/seasons`, {
-					headers: { 'x-device-token': deviceToken },
-				});
-				if (res.ok) {
-					const body = await res.json();
-					famId = body.famId || '';
-				}
-			} catch {}
+		await paydayCheck(famId, {
+			'x-session-famid': session.famId,
+			'x-session-userid': session.userId
+		});
+	} else if (deviceToken) {
+		try {
+			const res = await fetch(`${HONO_URL}/api/members/seasons`, {
+				headers: { 'x-device-token': deviceToken }
+			});
+			if (res.ok) {
+				const body = await res.json();
+				famId = body.famId || '';
+			}
+		} catch {}
+		if (famId) {
+			await paydayCheck(famId, {
+				'x-device-token': deviceToken,
+				'x-device-famid': famId
+			});
 		}
 	}
 

frontend/src/routes/[fam]/[username]/+page.server.ts

@@ -16,7 +16,17 @@ export async function load(event) {
 		if (session.memberName && session.memberName !== username) {
 			throw redirect(303, `/${famSlug}/${session.memberName}`);
 		}
-		const [members, templates, assigned, summary, fam, rewards, bonusConfigs, completions] = await Promise.all([
+		const [
+			members,
+			templates,
+			assigned,
+			summary,
+			fam,
+			rewards,
+			bonusConfigs,
+			completions,
+			settings
+		] = await Promise.all([
 			hono.admin.list(event, 'members', famId),
 			hono.admin.list(event, 'chore-templates', famId),
 			hono.admin.list(event, 'assigned-chores', famId),
@@ -25,28 +35,68 @@ export async function load(event) {
 			hono.admin.rewards(event, famId),
 			hono.admin.bonusConfigs(event, famId),
 			hono.admin.completions(event, famId),
+			hono.admin.settings(event, famId).catch(() => ({}))
 		]);
-		return { role: 'parent', members, templates, assigned, summary, fam, famSlug, rewards, bonusConfigs, completions };
+		return {
+			role: 'parent',
+			members,
+			templates,
+			assigned,
+			summary,
+			fam,
+			famSlug,
+			rewards,
+			bonusConfigs,
+			completions,
+			settings
+		};
 	}
 
 	// Child (device token) → kanban
-	const deviceToken = event.cookies.get('device_token') || event.url.searchParams.get('token') || '';
+	const deviceToken =
+		event.cookies.get('device_token') || event.url.searchParams.get('token') || '';
 	const famSlug = event.params.fam;
 	const username = event.params.username;
 
 	if (!deviceToken) {
-		return { role: 'child', token: '', memberId: '', verified: false, famId: '', templates: [], assigned: [], completions: [], rewards: [], bonusConfigs: [], tallies: {} };
+		return {
+			role: 'child',
+			token: '',
+			memberId: '',
+			verified: false,
+			famId: '',
+			templates: [],
+			assigned: [],
+			completions: [],
+			rewards: [],
+			bonusConfigs: [],
+			tallies: {}
+		};
 	}
 
 	try {
 		const res = await fetch(`${HONO_URL}/api/members/verify-token`, {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ deviceToken, famSlug }),
+			body: JSON.stringify({ deviceToken, famSlug })
 		});
 		const data = await res.json();
 		if (!res.ok || data.name !== username) {
-			return { role: 'child', token: deviceToken, memberId: '', verified: false, famId: '', memberName: '', memberColor: '', templates: [], assigned: [], completions: [], rewards: [], bonusConfigs: [], tallies: {} };
+			return {
+				role: 'child',
+				token: deviceToken,
+				memberId: '',
+				verified: false,
+				famId: '',
+				memberName: '',
+				memberColor: '',
+				templates: [],
+				assigned: [],
+				completions: [],
+				rewards: [],
+				bonusConfigs: [],
+				tallies: {}
+			};
 		}
 
 		let chores: any = {};
@@ -68,13 +118,55 @@ export async function load(event) {
 			rewards: chores.rewards || [],
 			bonusConfigs: chores.bonusConfigs || [],
 			tallies: chores.tallies || {},
+			payday: chores.payday,
+			paydayTime: chores.paydayTime || '18:00',
+			timezone: chores.timezone || 'auto'
 		};
 	} catch {
-		return { role: 'child', token: deviceToken, memberId: '', verified: false, famId: '', templates: [], assigned: [], completions: [], rewards: [], bonusConfigs: [], tallies: {} };
+		return {
+			role: 'child',
+			token: deviceToken,
+			memberId: '',
+			verified: false,
+			famId: '',
+			templates: [],
+			assigned: [],
+			completions: [],
+			rewards: [],
+			bonusConfigs: [],
+			tallies: {},
+			payday: 1,
+			paydayTime: '18:00',
+			timezone: 'auto'
+		};
 	}
 }
 
 export const actions = {
+	setEow: async (event) => {
+		if (!event.locals.session) throw redirect(303, '/login');
+		const famId = event.locals.session.famId;
+		const fd = await event.request.formData();
+		const on = fd.get('on') === 'true';
+		try {
+			const result = await hono.admin.updateSettings(event, famId, { simulateEow: on });
+			return { simulateEow: result.simulateEow };
+		} catch (e) {
+			return { error: e instanceof Error ? e.message : 'Failed to update settings' };
+		}
+	},
+
+	previewEow: async (event) => {
+		if (!event.locals.session) throw redirect(303, '/login');
+		const famId = event.locals.session.famId;
+		try {
+			const preview = await hono.admin.eowPreview(event, famId);
+			return { preview };
+		} catch (e) {
+			return { error: e instanceof Error ? e.message : 'Failed to preview payday' };
+		}
+	},
+
 	claim: async (event) => {
 		if (!event.locals.session) throw redirect(303, '/login');
 		const famId = event.locals.session.famId;
@@ -127,10 +219,15 @@ export const actions = {
 		const memberId = fd.get('memberId') as string;
 		if (!configId) return { error: 'Config ID required' };
 		try {
-			const result = await hono.admin.triggerBonusConfig(event, famId, configId, memberId || undefined);
+			const result = await hono.admin.triggerBonusConfig(
+				event,
+				famId,
+				configId,
+				memberId || undefined
+			);
 			return { records: result.records || [] };
 		} catch (e) {
 			return { error: e instanceof Error ? e.message : 'Failed to trigger' };
 		}
-	},
+	}
 };

frontend/src/routes/[fam]/[username]/+page.svelte

@@ -6,6 +6,16 @@
 	import { memberApi } from '$lib/client/api';
 	import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
 	import type { AssignedChore, Completion, ChoreTemplate, BonusConfig, Reward } from '$lib/types';
+	import {
+		weekStart as tzWeekStart,
+		addDaysStr,
+		todayInTz,
+		weekdayInTz,
+		wallClockToUtc,
+		resolveTz,
+		periodStart,
+		periodEnd
+	} from '../../../../../timezone.ts';
 
 	interface Notification {
 		id: string;
@@ -22,9 +32,16 @@
 	let famSlug = $derived(page.params.fam);
 	let username = $derived(page.params.username);
 
+	// ─── Family timezone (resolved) ───
+	const rawFamTz = $derived(data.timezone || data.fam?.timezone || 'auto');
+	const famTz = $derived(resolveTz(rawFamTz));
+
 	// ─── Parent View (admin overview) ───
 	let summary = $state(data.summary);
-	let today = $state(new Date().toISOString().slice(0, 10));
+	let today = $derived(todayInTz(famTz));
+
+	let simulateEow = $state(!!data.settings?.simulateEow);
+	let eowPreview = $state<any>(null);
 
 	const responseTags = [
 		'👏 well done',
@@ -70,7 +87,10 @@
 	}
 
 	function claimableRewards() {
-		return parentRewards.filter((r: any) => r.status === 'unclaimed' || r.status === 'requested');
+		return parentRewards.filter(
+			(r: any) =>
+				r.rewardType !== 'points' && (r.status === 'unclaimed' || r.status === 'requested')
+		);
 	}
 
 	function memberClaimable(memberId: string) {
@@ -78,17 +98,14 @@
 	}
 
 	function memberRequested(memberId: string) {
-		return parentRewards.filter((r: any) => r.memberId === memberId && r.status === 'requested');
+		return parentRewards.filter(
+			(r: any) => r.rewardType !== 'points' && r.memberId === memberId && r.status === 'requested'
+		);
 	}
-
 	function memberOutstanding(memberId: string) {
-		return parentRewards.filter((r: any) => r.memberId === memberId && r.status === 'unclaimed');
-	}
-
-	function memberRequestedTotal(memberId: string) {
-		return memberRequested(memberId)
-			.filter((r: any) => r.rewardType === 'cash')
-			.reduce((sum: number, r: any) => sum + Number(r.value), 0);
+		return parentRewards.filter(
+			(r: any) => r.rewardType !== 'points' && r.memberId === memberId && r.status === 'unclaimed'
+		);
 	}
 
 	let _confetti: any;
@@ -174,20 +191,41 @@
 	let error = $state('');
 
 	let claimError = $state('');
-	let todayChild = $state(new Date().toISOString().slice(0, 10));
+	let todayChild = $derived(todayInTz(famTz));
 	let togglingIds = $state<string>('');
 
-	function mondayOf(d: Date): string {
-		const day = d.getDay();
-		const diff = d.getDate() - day + (day === 0 ? -6 : 1);
-		d.setDate(diff);
-		return d.toISOString().slice(0, 10);
+	// ─── Payday countdown (child view) ───
+	let nowMs = $state(Date.now());
+	let eowFired = $state(false);
+	$effect(() => {
+		const id = setInterval(() => (nowMs = Date.now()), 1000);
+		return () => clearInterval(id);
+	});
+	const paydayDay = $derived(data.payday != null ? Number(data.payday) : 1);
+	const paydayTime = $derived(data.paydayTime || '18:00');
+	const isPaydayToday = $derived(weekdayInTz(new Date(), famTz) === paydayDay);
+	const paydayTarget = $derived.by(() =>
+		new Date(wallClockToUtc(todayInTz(famTz), paydayTime, famTz)).getTime()
+	);
+	const secondsLeft = $derived(Math.max(0, Math.floor((paydayTarget - nowMs) / 1000)));
+	const countdownHours = $derived(Math.floor(secondsLeft / 3600));
+	const countdownMinutes = $derived(Math.floor((secondsLeft % 3600) / 60));
+	const countdownSecs = $derived(secondsLeft % 60);
+	const showCountdown = $derived(isPaydayToday && secondsLeft > 0);
+	$effect(() => {
+		if (role !== 'child' || !isPaydayToday) return;
+		if (secondsLeft > 0 || eowFired) return;
+		if (!deviceToken || !famId) return;
+		eowFired = true;
+		memberApi.payday(deviceToken, famId).catch(() => {});
+	});
+
+	function paydayWeekStart(): string {
+		return tzWeekStart(paydayDay, famTz);
 	}
 
 	function addDays(dateStr: string, days: number): string {
-		const d = new Date(dateStr + 'T00:00:00');
-		d.setDate(d.getDate() + days);
-		return d.toISOString().slice(0, 10);
+		return addDaysStr(dateStr, days);
 	}
 
 	function monthStartStr(): string {
@@ -195,8 +233,8 @@
 		return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`;
 	}
 
-	const todayIso = new Date().toISOString().slice(0, 10);
-	const currentWeek = mondayOf(new Date());
+	const todayIso = todayInTz(famTz);
+	const currentWeek = paydayWeekStart();
 	let weekStart = $state(currentWeek);
 	let weekEnd = $derived(addDays(weekStart, 6));
 
@@ -205,7 +243,7 @@
 		Math.max(
 			0,
 			Math.round(
-				(new Date(weekEnd + 'T00:00:00').getTime() - new Date(todayIso + 'T00:00:00').getTime()) /
+				(new Date(addDays(weekStart, 7) + 'T00:00:00').getTime() - new Date(todayIso + 'T00:00:00').getTime()) /
 					86400000
 			)
 		)
@@ -216,18 +254,46 @@
 		const activeSeasonIds = new Set(famStore.seasons.filter((s) => s.active).map((s) => s.id));
 		return assigned.filter((a) => {
 			if (a.memberId !== memberId) return false;
+			if (a.isTodo) return false;
 			if (!a.seasonIds || a.seasonIds.length === 0) return true;
 			if (activeSeasonIds.size === 0) return true;
 			return a.seasonIds.some((sid) => activeSeasonIds.has(sid));
 		});
 	});
 
+	// Todos — one-off items with deadlines (sorted: soonest first)
+	let memberTodos = $derived.by(() =>
+		assigned
+			.filter((a) => a.memberId === memberId && a.isTodo)
+			.sort((a, b) => {
+				const da = a.completeBy || '9999-99-99';
+				const db = b.completeBy || '9999-99-99';
+				if (da !== db) return da.localeCompare(db);
+				return (a.startDate || '').localeCompare(b.startDate || '');
+			})
+	);
+
 	let dailyPending = $derived(
 		memberChores.filter((a) => a.frequency === 'daily' && !isCompleted(a.id, todayChild))
 	);
 	let weeklyPending = $derived(
 		memberChores.filter((a) => a.frequency === 'weekly' && !isCompleted(a.id, todayChild))
 	);
+
+	// Traffic light: days until todo deadline (only non-emoji todos)
+	function todoUrgency(todo: AssignedChore): 'blue' | 'green' | 'orange' | 'red' | 'black' {
+		if (!todo.completeBy) return 'blue';
+		const days = Math.round(
+			(new Date(todo.completeBy + 'T00:00:00').getTime() -
+				new Date(todayChild + 'T00:00:00').getTime()) /
+				86400000
+		);
+		if (days <= 0) return 'black';
+		if (days === 1) return 'red';
+		if (days === 2) return 'orange';
+		if (days === 3) return 'green';
+		return 'blue';
+	}
 	let completedToday = $derived(
 		completions.filter((c) => c.memberId === memberId && c.date?.slice(0, 10) === todayChild)
 	);
@@ -235,7 +301,8 @@
 	let weeklyTotal = $derived.by(() => {
 		const dailyChores = memberChores.filter((a) => a.frequency === 'daily');
 		const weeklyChores = memberChores.filter((a) => a.frequency === 'weekly');
-		return dailyChores.length * 7 + weeklyChores.length;
+		const activeTodos = memberTodos.filter((t) => t.type !== 'emoji').length;
+		return dailyChores.length * 7 + weeklyChores.length + activeTodos;
 	});
 
 	let weekCompletions = $derived(
@@ -253,46 +320,56 @@
 		rewards.filter((r) => r.memberId === memberId && (r.date?.slice(0, 10) || r.date) >= weekStart)
 	);
 
-	let allTimeCash = $derived.by(() => {
-		const myCompletions = completions.filter((c) => c.memberId === memberId);
-		const myRewards = rewards.filter((r) => r.memberId === memberId);
-		return (
-			myCompletions.reduce((sum, c) => {
-				const chore = assigned.find((a) => a.id === c.assignedChoreId);
-				return sum + (chore?.type === 'money' ? Number(chore.value) : 0);
-			}, 0) +
-			myRewards.filter((r) => r.rewardType === 'cash').reduce((sum, r) => sum + Number(r.value), 0)
-		);
-	});
+	let allTimeCash = $derived.by(() =>
+		rewards
+			.filter((r) => r.memberId === memberId && r.rewardType === 'cash' && r.status === 'claimed')
+			.reduce((sum, r) => sum + Number(r.value), 0)
+	);
 
-	let allTimePoints = $derived.by(() => {
-		const myCompletions = completions.filter((c) => c.memberId === memberId);
-		const myRewards = rewards.filter((r) => r.memberId === memberId);
-		return (
-			myCompletions.reduce((sum, c) => {
-				const chore = assigned.find((a) => a.id === c.assignedChoreId);
-				return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
-			}, 0) +
-			myRewards
-				.filter((r) => r.rewardType === 'points')
-				.reduce((sum, r) => sum + Number(r.value), 0)
-		);
-	});
+	let allTimePoints = $derived.by(() =>
+		rewards
+			.filter((r) => r.memberId === memberId && r.rewardType === 'points' && r.status === 'claimed')
+			.reduce((sum, r) => sum + Number(r.value), 0)
+	);
+
+	// Week-to-date totals from chore completions (not rewards — rewards are created at EOW)
+	let weekChoreCash = $derived.by(() =>
+		weekCompletions.reduce((sum, c) => {
+			const chore = assigned.find((a) => a.id === c.assignedChoreId);
+			return sum + (chore?.type === 'money' ? Number(chore.value) : 0);
+		}, 0)
+	);
+	let weekChorePoints = $derived.by(() =>
+		weekCompletions.reduce((sum, c) => {
+			const chore = assigned.find((a) => a.id === c.assignedChoreId);
+			return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
+		}, 0)
+	);
 
 	let pendingCash = $derived.by(() =>
 		weekRewards
 			.filter((r) => r.rewardType === 'cash' && r.status !== 'claimed')
 			.reduce((sum, r) => sum + Number(r.value), 0)
 	);
-	let pendingPoints = $derived.by(() =>
+	// Money owed to this member across all time (incl. carry-over from past weeks).
+	let owedCash = $derived.by(() =>
+		rewards
+			.filter((r) => r.memberId === memberId && r.rewardType === 'cash' && r.status !== 'claimed')
+			.reduce((sum, r) => sum + Number(r.value), 0)
+	);
+	let weekPointsEarned = $derived.by(() =>
 		weekRewards
-			.filter((r) => r.rewardType === 'points' && r.status !== 'claimed')
+			.filter((r) => r.rewardType === 'points')
 			.reduce((sum, r) => sum + Number(r.value), 0)
 	);
 	const pendingRewards = $derived(
-		weekRewards.filter((r) => r.status === 'unclaimed' || r.status === 'requested')
+		rewards.filter(
+			(r) =>
+				r.memberId === memberId &&
+				r.rewardType !== 'points' &&
+				(r.status === 'unclaimed' || r.status === 'requested')
+		)
 	);
-
 	let weekBonusTallies = $derived.by(() => {
 		const map = new Map<string, number>();
 		for (const r of weekRewards) {
@@ -303,6 +380,55 @@
 		return [...map.entries()].map(([name, count]) => ({ name, count }));
 	});
 
+	// ─── Threshold Goals (bonus configs the member is chasing) ───
+	let thresholdGoals = $derived.by(() => {
+		return bonusConfigs
+			.filter((cfg) => {
+				if (cfg.status !== 'active') return false;
+				if (cfg.type === 'manual') return false;
+				if (cfg.target !== 'individual') return false;
+				return !cfg.memberId || cfg.memberId === memberId;
+			})
+			.map((cfg) => {
+				const per = cfg.period || 'weekly';
+				const pStart = periodStart(per, paydayDay, famTz);
+				const pEnd = periodEnd(per, pStart);
+
+				const periodCompletions = completions.filter(
+					(c) =>
+						c.memberId === memberId &&
+						(c.date?.slice(0, 10) || c.date) >= pStart &&
+						(c.date?.slice(0, 10) || c.date) <= pEnd
+				);
+
+				let current = 0;
+				if (cfg.type === 'threshold') {
+					current = periodCompletions.reduce((sum, c) => {
+						const chore = assigned.find((a) => a.id === c.assignedChoreId);
+						return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
+					}, 0);
+				} else if (cfg.type === 'count') {
+					current = periodCompletions.length;
+				}
+
+				const existingReward = rewards.find(
+					(r) => r.bonusConfigId === cfg.id && r.memberId === memberId
+				);
+				const criteria = Number(cfg.criteriaValue) || 0;
+				const achieved = existingReward ? true : criteria > 0 && current >= criteria;
+
+				return {
+					config: cfg,
+					current,
+					criteriaValue: criteria,
+					achieved,
+					rewardStatus: existingReward?.status || null,
+					periodStart: pStart,
+					periodEnd: pEnd
+				};
+			});
+	});
+
 	function shortDate(dateStr: string): string {
 		const d = new Date(dateStr + 'T00:00:00');
 		const day = String(d.getDate()).padStart(2, '0');
@@ -598,12 +724,38 @@
 				{#each parentMembers as m}
 					{@const requested = memberRequested(m.id)}
 					{@const outstanding = memberOutstanding(m.id)}
-					{@const total = memberRequestedTotal(m.id)}
-					{#if requested.length > 0 || outstanding.length > 0}
+					{@const claimable = memberClaimable(m.id)}
+					{@const cashClaimable = claimable.filter((r: any) => r.rewardType === 'cash')}
+					{@const cashRequested = requested.filter((r: any) => r.rewardType === 'cash')}
+					{@const requestedTotal = cashRequested.reduce(
+						(sum: number, r: any) => sum + Number(r.value),
+						0
+					)}
+					{@const total = cashClaimable.reduce((sum: number, r: any) => sum + Number(r.value), 0)}
+					{@const hasClaims = requested.length > 0 || outstanding.length > 0}
+					{#if hasClaims}
 						<div class="member-claims">
 							<h4><span class="dot" style="background:{m.color}"></span> {m.name}</h4>
 							{#if total > 0}
-								<p class="member-total">£{total.toFixed(2)} requested</p>
+								<p class="member-total">£{total.toFixed(2)} owed</p>
+							{/if}
+
+							<!-- Issue All: only when payday has run (rewards are requested) -->
+							{#if cashRequested.length > 0}
+								<form
+									class="issue-all-form"
+									method="POST"
+									action="?/issueAll"
+									use:enhance={() => {
+										return async (args: any) => handleResult(args);
+									}}
+								>
+									<input type="hidden" name="memberId" value={m.id} />
+									<input type="hidden" name="message" value={selectedMessage[m.id] || ''} />
+									<Button type="submit" size="sm" variant="secondary"
+										>Issue All ({cashRequested.length}) · £{requestedTotal.toFixed(2)}</Button
+									>
+								</form>
 							{/if}
 
 							{#if requested.length > 0}
@@ -627,21 +779,6 @@
 										</div>
 									</form>
 								{/each}
-								{#if requested.length > 1}
-									<form
-										method="POST"
-										action="?/issueAll"
-										use:enhance={() => {
-											return async (args: any) => handleResult(args);
-										}}
-									>
-										<input type="hidden" name="memberId" value={m.id} />
-										<input type="hidden" name="message" value={selectedMessage[m.id] || ''} />
-										<Button type="submit" size="sm" variant="secondary"
-											>Issue All ({requested.length})</Button
-										>
-									</form>
-								{/if}
 							{/if}
 
 							{#if outstanding.length > 0}
@@ -684,6 +821,82 @@
 			{/if}
 		</Card>
 	</CardGrid>
+	<CardGrid>
+		<Card cols={3} title="Debug: Simulate Payday" accent="#f59e0b">
+			<p class="eow-desc">
+				Read-only preview of what the payday rollover will produce. Nothing here is written.
+			</p>
+			<form
+				method="POST"
+				action="?/setEow"
+				use:enhance={() => {
+					return async ({ result }) => {
+						const d = (result as any).data || {};
+						if (d.error) toast = d.error;
+						else simulateEow = !!d.simulateEow;
+					};
+				}}
+			>
+				<input type="hidden" name="on" value={simulateEow ? 'false' : 'true'} />
+				<button type="submit" class="eow-switch" class:on={simulateEow}>
+					{simulateEow ? 'Simulation ON' : 'Simulation OFF'}
+				</button>
+			</form>
+			<p class="eow-note">
+				This toggles the family debug flag only. It does not alter any live data.
+			</p>
+
+			<form
+				method="POST"
+				action="?/previewEow"
+				use:enhance={() => {
+					return async ({ result }) => {
+						const d = (result as any).data || {};
+						if (d.error) toast = d.error;
+						else eowPreview = d.preview;
+					};
+				}}
+			>
+				<Button type="submit" size="sm" variant="secondary">Preview rollover</Button>
+			</form>
+
+			{#if eowPreview}
+				<div class="eow-out">
+					<p class="eow-range">Week {eowPreview.weekStart} → {eowPreview.weekEnd}</p>
+					<p class="eow-reset">
+						On rollover these {eowPreview.completionsThisWeek} completions reset; week starts anew at
+						{eowPreview.nextWeekStart}.
+					</p>
+
+					<div class="eow-summaries">
+						{#each eowPreview.summaries as s}
+							<div class="eow-row">
+								<span class="eow-name">{s.memberName}</span>
+								<span class="eow-pts">{s.pointsEarned} pts</span>
+								<span class="eow-money">£{Number(s.moneyEarned || 0).toFixed(2)}</span>
+								<span class="eow-chores">{s.choresCompleted} chores</span>
+							</div>
+						{/each}
+					</div>
+
+					{#if eowPreview.predictedRewards.length}
+						<p class="eow-sec">Rewards that would be auto-created</p>
+						<div class="eow-rewards">
+							{#each eowPreview.predictedRewards as r}
+								<span class="eow-reward"
+									>{r.memberName} · {r.config} · {r.type === 'cash'
+										? '£' + Number(r.value).toFixed(2)
+										: r.value + ' pts'}</span
+								>
+							{/each}
+						</div>
+					{:else}
+						<p class="eow-none">No new rewards would be auto-created this week.</p>
+					{/if}
+				</div>
+			{/if}
+		</Card>
+	</CardGrid>
 {:else}
 	<!-- Child View -->
 	{#if loading}
@@ -691,6 +904,27 @@
 	{:else if error}
 		<p class="error">{error}</p>
 	{:else}
+		{#if owedCash > 0}
+			<div class="payday-banner">
+				🎉 You've earned <b>£{owedCash.toFixed(2)}</b> — go get it from your parent!
+			</div>
+		{/if}
+		{#if showCountdown}
+			<div class="payday-countdown">
+				<div class="pd-icon">💰</div>
+				<div class="pd-body">
+					<p class="pd-title">Payday is today!</p>
+					<p class="pd-num">
+						{#if countdownHours > 0}
+							{countdownHours}h {countdownMinutes}m left
+						{:else}
+							{countdownMinutes}m {countdownSecs}s left
+						{/if}
+					</p>
+					<p class="pd-sub">Your earnings get settled at {paydayTime}</p>
+				</div>
+			</div>
+		{/if}
 		<!-- HERO -->
 		<header class="hero">
 			<div class="hero-top">
@@ -822,7 +1056,7 @@
 				{:else}
 					<span class="hero-null">no bonuses earned yet</span>
 				{/if}
-				<div class="hero-days"><b>{daysLeft}</b> days left</div>
+				<div class="hero-days"><b>{daysLeft}</b> days until payday</div>
 			</div>
 
 			<nav class="hero-nav">
@@ -836,18 +1070,55 @@
 			</nav>
 		</header>
 
-		<!-- PENDING TILES -->
+		<!-- WEEK-TO-DATE TILES -->
 		<div class="tiles">
 			<div class="tile tile-cash">
-				<span class="tile-val">£{pendingCash.toFixed(2)}</span>
-				<span class="tile-lbl">pending cash</span>
+				<span class="tile-val">£{weekChoreCash.toFixed(2)}</span>
+				<span class="tile-lbl">cash this week</span>
 			</div>
 			<div class="tile tile-pts">
-				<span class="tile-val">{pendingPoints}</span>
-				<span class="tile-lbl">pending points</span>
+				<span class="tile-val">{weekChorePoints}</span>
+				<span class="tile-lbl">points this week</span>
 			</div>
 		</div>
 
+		<!-- GOALS (threshold bonus configs) -->
+		{#if thresholdGoals.length > 0}
+			<div class="goals">
+				{#each thresholdGoals as goal}
+					{@const pct =
+						goal.criteriaValue > 0
+							? Math.min(100, Math.round((goal.current / goal.criteriaValue) * 100))
+							: 0}
+					<div class="goal-card" class:goal-achieved={goal.achieved}>
+						<div class="goal-head">
+							<span class="goal-name">{goal.config.name}</span>
+							<span class="goal-reward">
+								{#if goal.config.rewardType === 'cash'}
+									£{Number(goal.config.rewardValue).toFixed(2)}
+								{:else if goal.config.rewardType === 'prize'}
+									🎁
+								{:else}
+									{goal.config.rewardValue} pts
+								{/if}
+							</span>
+						</div>
+						<div class="goal-bar-wrap">
+							<div class="goal-bar-fill" style="width:{pct}%"></div>
+						</div>
+						<div class="goal-foot">
+							<span class="goal-progress">{goal.current} / {goal.criteriaValue}</span>
+							{#if goal.achieved}
+								<span class="goal-badge">✅ earned</span>
+							{:else}
+								<span class="goal-pct">{pct}%</span>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
 		<!-- KANBAN -->
 		<div class="kanban">
 			<div class="column col-daily">
@@ -865,8 +1136,11 @@
 				{/if}
 			</div>
 			<div class="column col-weekly">
-				<h2>📅 Weekly ({weeklyPending.length})</h2>
-				{#if weeklyPending.length === 0}
+				<h2>
+					📅 Weekly ({weeklyPending.length +
+						memberTodos.filter((t) => !isCompleted(t.id, todayChild)).length})
+				</h2>
+				{#if weeklyPending.length === 0 && memberTodos.filter((t) => !isCompleted(t.id, todayChild)).length === 0}
 					<p class="empty">All done!</p>
 				{:else}
 					{#each weeklyPending as chore}
@@ -876,6 +1150,38 @@
 							<span class="chore-value">{chore.value} {chore.type}</span>
 						</button>
 					{/each}
+					{#each memberTodos.filter((t) => !isCompleted(t.id, todayChild)) as todo}
+						{@const urgency = todoUrgency(todo)}
+						{#if todo.type === 'emoji'}
+							<div
+								class="chore todo-chore todo-display"
+								class:todo-blue={urgency === 'blue'}
+								class:todo-green={urgency === 'green'}
+								class:todo-orange={urgency === 'orange'}
+								class:todo-red={urgency === 'red'}
+								class:todo-black={urgency === 'black'}
+							>
+								<span class="checkbox">📋</span>
+								<span class="chore-name">{todo.customName || 'Todo'}</span>
+								<span class="chore-value">🎯</span>
+							</div>
+						{:else}
+							<button
+								class="chore todo-chore"
+								class:todo-blue={urgency === 'blue'}
+								class:todo-green={urgency === 'green'}
+								class:todo-orange={urgency === 'orange'}
+								class:todo-red={urgency === 'red'}
+								class:todo-black={urgency === 'black'}
+								onclick={() => toggle(todo)}
+								disabled={!!togglingIds}
+							>
+								<span class="checkbox">📋</span>
+								<span class="chore-name">{todo.customName || 'Todo'}</span>
+								<span class="chore-value">{todo.value} {todo.type}</span>
+							</button>
+						{/if}
+					{/each}
 				{/if}
 			</div>
 			<div class="column col-done">
@@ -926,7 +1232,9 @@
 									{r.value} pts
 								{/if}
 							</span>
-							{#if isReq}
+							{#if r.rewardType === 'points'}
+								<span class="wr-pending">✓ credited</span>
+							{:else if isReq}
 								<span class="wr-pending">⏳ waiting</span>
 							{:else}
 								<button
@@ -1439,6 +1747,82 @@
 		opacity: 0.9;
 	}
 
+	/* ── Goals (threshold bonus progress) ── */
+	.goals {
+		display: flex;
+		flex-direction: column;
+		gap: 0.6rem;
+		margin-bottom: 1rem;
+	}
+	.goal-card {
+		background: #fff;
+		border: 1px solid #e5e7eb;
+		border-left: 4px solid #6366f1;
+		border-radius: 10px;
+		padding: 0.75rem 1rem;
+		transition: border-color 0.2s;
+	}
+	.goal-achieved {
+		border-left-color: #10b981;
+		background: #f0fdf4;
+	}
+	.goal-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.4rem;
+	}
+	.goal-name {
+		font-size: 0.9rem;
+		font-weight: 700;
+		color: #1f2937;
+	}
+	.goal-reward {
+		font-size: 0.85rem;
+		font-weight: 800;
+		color: #6366f1;
+		white-space: nowrap;
+	}
+	.goal-achieved .goal-reward {
+		color: #059669;
+	}
+	.goal-bar-wrap {
+		height: 8px;
+		background: #f3f4f6;
+		border-radius: 4px;
+		overflow: hidden;
+		margin-bottom: 0.35rem;
+	}
+	.goal-bar-fill {
+		height: 100%;
+		background: linear-gradient(90deg, #6366f1, #8b5cf6);
+		border-radius: 4px;
+		transition: width 0.3s ease;
+	}
+	.goal-achieved .goal-bar-fill {
+		background: linear-gradient(90deg, #10b981, #34d399);
+	}
+	.goal-foot {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	.goal-progress {
+		font-size: 0.75rem;
+		color: #6b7280;
+		font-weight: 600;
+	}
+	.goal-badge {
+		font-size: 0.75rem;
+		font-weight: 700;
+		color: #059669;
+	}
+	.goal-pct {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: #6366f1;
+	}
+
 	/* ── Kanban ── */
 	.kanban {
 		display: grid;
@@ -1489,6 +1873,37 @@
 		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
 		border-color: #c7d2fe;
 	}
+
+	/* ── Todo traffic light borders ── */
+	.chore.todo-chore {
+		border-left: 4px solid #3b82f6;
+	}
+	.chore.todo-blue {
+		border-left-color: #3b82f6;
+	}
+	.chore.todo-green {
+		border-left-color: #22c55e;
+	}
+	.chore.todo-orange {
+		border-left-color: #f97316;
+	}
+	.chore.todo-red {
+		border-left-color: #ef4444;
+	}
+	.chore.todo-black {
+		border-left-color: #1f2937;
+	}
+	.todo-display {
+		cursor: default;
+		opacity: 0.85;
+	}
+	.todo-display:hover {
+		transform: none;
+		box-shadow: none;
+		border-top-color: #e5e7eb;
+		border-right-color: #e5e7eb;
+		border-bottom-color: #e5e7eb;
+	}
 	.chore:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
@@ -1602,4 +2017,148 @@
 	.wr-cta:hover {
 		filter: brightness(1.1);
 	}
+
+	.eow-desc {
+		margin: 0 0 0.6rem;
+	}
+
+	.payday-banner {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		margin-bottom: 1rem;
+		padding: 0.85rem 1.1rem;
+		border-radius: 12px;
+		background: linear-gradient(135deg, #f59e0b, #fbbf24);
+		color: #451a03;
+		font-weight: 600;
+		font-size: 1.05rem;
+		box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
+	}
+	.payday-banner b {
+		font-weight: 800;
+	}
+
+	.payday-countdown {
+		display: flex;
+		align-items: center;
+		gap: 0.9rem;
+		margin-bottom: 1rem;
+		padding: 1rem 1.2rem;
+		border-radius: 12px;
+		background: linear-gradient(135deg, #4f46e5, #7c3aed);
+		color: #fff;
+		box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
+	}
+	.pd-icon {
+		font-size: 1.8rem;
+	}
+	.pd-body {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+	}
+	.pd-title {
+		margin: 0;
+		font-weight: 700;
+		font-size: 0.95rem;
+		opacity: 0.9;
+	}
+	.pd-num {
+		margin: 0;
+		font-size: 1.7rem;
+		font-weight: 800;
+		letter-spacing: 0.5px;
+		font-variant-numeric: tabular-nums;
+	}
+	.pd-sub {
+		margin: 0;
+		font-size: 0.8rem;
+		opacity: 0.85;
+	}
+	.eow-switch {
+		font-size: 0.85rem;
+		font-weight: 700;
+		padding: 0.45rem 1rem;
+		border: 1px solid #f59e0b;
+		border-radius: 8px;
+		background: #fffbeb;
+		color: #92400e;
+		cursor: pointer;
+	}
+	.eow-switch.on {
+		background: #f59e0b;
+		color: #fff;
+	}
+	.eow-note {
+		font-size: 0.75rem;
+		color: #9ca3af;
+		margin: 0.4rem 0 0.6rem;
+	}
+	.eow-out {
+		margin-top: 0.75rem;
+		border-top: 1px dashed #e5e7eb;
+		padding-top: 0.6rem;
+	}
+	.eow-range,
+	.eow-reset {
+		margin: 0.2rem 0;
+		font-size: 0.85rem;
+	}
+	.eow-reset {
+		color: #6b7280;
+		font-size: 0.8rem;
+	}
+	.eow-summaries {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+		margin: 0.6rem 0;
+	}
+	.eow-row {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		padding: 0.35rem 0.5rem;
+		border: 1px solid #eeeff2;
+		border-radius: 8px;
+		background: #fafbfc;
+		font-size: 0.85rem;
+	}
+	.eow-name {
+		flex: 1;
+		font-weight: 600;
+	}
+	.eow-pts {
+		color: #7c3aed;
+		font-weight: 700;
+	}
+	.eow-money {
+		color: #059669;
+		font-weight: 700;
+	}
+	.eow-chores {
+		color: #6b7280;
+	}
+	.eow-sec {
+		font-size: 0.85rem;
+		font-weight: 700;
+		margin: 0.6rem 0 0.3rem;
+	}
+	.eow-rewards {
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+	.eow-reward {
+		font-size: 0.8rem;
+		padding: 0.3rem 0.55rem;
+		background: #eef2ff;
+		color: #4338ca;
+		border-radius: 6px;
+	}
+	.eow-none {
+		font-size: 0.8rem;
+		color: #9ca3af;
+	}
 </style>

frontend/src/routes/[fam]/[username]/bonuses/+page.server.ts

@@ -258,18 +258,6 @@ export const actions = {
 		}
 	},
 
-	claimReward: async (event) => {
-		if (!event.locals.session) throw redirect(303, '/login');
-		const famId = event.locals.session.famId;
-		const fd = await event.request.formData();
-		const rewardId = fd.get('id') as string;
-		try {
-			await hono.admin.claimReward(event, famId, rewardId);
-		} catch (e) {
-			return { error: e instanceof Error ? e.message : 'Failed to claim reward' };
-		}
-	},
-
 	evaluate: async (event) => {
 		if (!event.locals.session) throw redirect(303, '/login');
 		const famId = event.locals.session.famId;

frontend/src/routes/[fam]/[username]/bonuses/+page.svelte

@@ -197,38 +197,12 @@
 		showEditModal = true;
 	}
 
-	async function claimReward(rewardId: string) {
-		const fd = new FormData();
-		fd.append('id', rewardId);
-		try {
-			await fetch('?/claimReward', { method: 'POST', body: fd });
-		} catch {}
-	}
-
 	const showPeriodForCreate = $derived(createVals.occurrence !== 'once');
 	const showCriteriaForCreate = $derived(createVals.type !== 'manual');
 
-	let outstandingConfigs = $derived(allBonusConfigs.filter((c: BonusConfig) => isOutstanding(c)));
 	let doneConfigs = $derived(
 		configs.filter((c: BonusConfig) => c.status === 'completed') as BonusConfig[]
 	);
-
-	function isCompleted(cfg: BonusConfig): boolean {
-		const prog = progressByConfigId.get(cfg.id);
-		if (cfg.occurrence === 'once') {
-			const rewards = allRewards.filter((r) => r.bonusConfigId === cfg.id);
-			return rewards.length > 0;
-		}
-		if (!prog) return false;
-		return prog.progress.every((p) => p.achieved);
-	}
-
-	// todo - redundant?
-	function isOutstanding(cfg: BonusConfig): boolean {
-		if (!isCompleted(cfg)) return false;
-		const rewards = allRewards.filter((r) => r.bonusConfigId === cfg.id);
-		return rewards.some((r) => r.status === 'unclaimed');
-	}
 </script>
 
 <ViewHeader title="Bonuses" />
@@ -297,12 +271,7 @@
 			<div class="column member-col" ondragover={handleDragOver} ondrop={handleDropToMember}>
 				<h3>Member</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'individual' && !doneConfigs.includes(c)) as cfg}
-					<div
-						class="col-card"
-						class:done={outstandingConfigs.includes(cfg)}
-						class:outstanding={outstandingConfigs.includes(cfg)}
-						class:disabled={disabledIds.has(cfg.id)}
-					>
+					<div class="col-card" class:disabled={disabledIds.has(cfg.id)}>
 						<div class="col-card-head">
 							<strong>{cfg.name}</strong>
 							<div class="badges">
@@ -333,18 +302,16 @@
 											</div>
 										{/if}
 										<span class="stat {p?.state ?? 'pending'}">
-											{p ? (outstandingConfigs.includes(cfg) ? 'Outstanding' : p.state) : 'Pending'}
+											{p ? p.state : 'Pending'}
 										</span>
 									</div>
 								{/if}
 							{/if}
 						{/each}
 						<div class="col-card-foot">
-							{#if !outstandingConfigs.includes(cfg)}
-								<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
-									Edit
-								</Button>
-							{/if}
+							<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
+								Edit
+							</Button>
 						</div>
 					</div>
 				{/each}
@@ -358,12 +325,7 @@
 				<h3>Competition</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'competitive' && !doneConfigs.includes(c)) as cfg}
 					{@const prog = progressByConfigId.get(cfg.id)}
-					<div
-						class="col-card"
-						class:done={outstandingConfigs.includes(cfg)}
-						class:outstanding={outstandingConfigs.includes(cfg)}
-						class:disabled={disabledIds.has(cfg.id)}
-					>
+					<div class="col-card" class:disabled={disabledIds.has(cfg.id)}>
 						<div class="col-card-head">
 							<strong>{cfg.name}</strong>
 							<div class="badges">
@@ -391,18 +353,16 @@
 											</div>
 										{/if}
 										<span class="stat {p.state}">
-											{outstandingConfigs.includes(cfg) ? 'Outstanding' : p.state}
+											{p.state}
 										</span>
 									</div>
 								{/each}
 							</div>
 						{/if}
 						<div class="col-card-foot">
-							{#if !outstandingConfigs.includes(cfg)}
-								<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
-									Edit
-								</Button>
-							{/if}
+							<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
+								Edit
+							</Button>
 						</div>
 					</div>
 				{/each}
@@ -416,12 +376,7 @@
 				<h3>Collaboration</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'collaborative') as cfg}
 					{@const prog = progressByConfigId.get(cfg.id)}
-					<div
-						class="col-card"
-						class:done={outstandingConfigs.includes(cfg)}
-						class:outstanding={outstandingConfigs.includes(cfg)}
-						class:disabled={disabledIds.has(cfg.id)}
-					>
+					<div class="col-card" class:disabled={disabledIds.has(cfg.id)}>
 						<div class="col-card-head">
 							<strong>{cfg.name}</strong>
 							<div class="badges">
@@ -452,17 +407,15 @@
 										{cfg.type === 'threshold' ? 'pts' : 'chores'}</span
 									>
 									<span class="stat {team.state}">
-										{outstandingConfigs.includes(cfg) ? 'Outstanding' : team.state}
+										{team.state}
 									</span>
 								</div>
 							{/if}
 						{/if}
 						<div class="col-card-foot">
-							{#if !outstandingConfigs.includes(cfg)}
-								<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
-									Edit
-								</Button>
-							{/if}
+							<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
+								Edit
+							</Button>
 						</div>
 					</div>
 				{/each}
@@ -472,33 +425,6 @@
 			</div>
 		</div>
 
-		{#if outstandingConfigs.length > 0}
-			<div class="outstanding-section">
-				<h3>Outstanding — Issue to complete</h3>
-				<div class="outstanding-grid">
-					{#each outstandingConfigs as cfg}
-						{@const rewards = allRewards.filter(
-							(r) => r.bonusConfigId === cfg.id && r.status === 'unclaimed'
-						)}
-						<div class="outstanding-card">
-							<div class="card-head">
-								<strong>{cfg.name}</strong>
-							</div>
-							<div class="reward-preview">
-								{formatReward(cfg.rewardType, cfg.rewardValue)}
-							</div>
-							{#each rewards as r}
-								<div class="claim-row">
-									<span>{memberName(r.memberId)}</span>
-									<button onclick={() => claimReward(r.id)} class="claim-btn">Claim</button>
-								</div>
-							{/each}
-						</div>
-					{/each}
-				</div>
-			</div>
-		{/if}
-
 		{#if doneConfigs.length > 0}
 			<div class="completed-section">
 				<h3>Completed</h3>
@@ -919,10 +845,6 @@
 	.col-card.done {
 		opacity: 0.75;
 	}
-	.col-card.outstanding {
-		border-color: #f59e0b;
-		background: #fffbeb;
-	}
 	.col-card.disabled {
 		opacity: 0.5;
 		filter: grayscale(0.5);
@@ -1003,15 +925,6 @@
 		width: 20px;
 		font-weight: 600;
 	}
-	.claim-btn {
-		background: #6366f1;
-		color: white;
-		border: none;
-		padding: 0.2rem 0.5rem;
-		border-radius: 0.25rem;
-		cursor: pointer;
-		font-size: 0.75rem;
-	}
 	.overlay {
 		position: fixed;
 		top: 0;
@@ -1109,33 +1022,6 @@
 		font-size: 0.85rem;
 		cursor: pointer;
 	}
-	.outstanding-section {
-		margin-top: 2rem;
-		border-top: 2px solid #f59e0b;
-		padding-top: 1rem;
-	}
-	.outstanding-section h3 {
-		font-size: 1rem;
-		margin: 0 0 0.75rem;
-	}
-	.outstanding-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-		gap: 0.5rem;
-	}
-	.outstanding-card {
-		background: #fffbeb;
-		border: 2px solid #f59e0b;
-		border-radius: 0.5rem;
-		padding: 0.5rem;
-	}
-	.claim-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0.2rem 0;
-		font-size: 0.8rem;
-	}
 	.completed-section {
 		margin-top: 2rem;
 		border-top: 2px solid #10b981;

frontend/src/routes/[fam]/[username]/chores/+page.server.ts

@@ -86,18 +86,33 @@ export const actions = {
 		const famId = event.locals.session.famId;
 		const fd = await event.request.formData();
 		const id = fd.get('id') as string;
+		const isTodo = fd.get('isTodo') === '1';
 		const data: Record<string, unknown> = {};
-		const frequency = fd.get('frequency');
-		const type = fd.get('type');
-		const value = fd.get('value');
-		const customName = fd.get('customName');
-		const seasonIdsRaw = fd.get('seasonIds') as string;
-		if (frequency) data.frequency = frequency;
-		if (type) data.type = type;
-		if (value) data.value = parseFloat(value as string) || 0;
-		data.customName = (customName as string) || undefined;
-		if (seasonIdsRaw || seasonIdsRaw === '') {
-			data.seasonIds = seasonIdsRaw ? seasonIdsRaw.split(',').filter(Boolean) : [];
+
+		if (isTodo) {
+			const type = fd.get('type') as string;
+			const customName = fd.get('customName') as string;
+			const completeBy = fd.get('completeBy') as string;
+			const startDate = fd.get('startDate') as string;
+			if (type) data.type = type;
+			if (type === 'emoji') data.value = 0;
+			else if (fd.get('value')) data.value = parseFloat(fd.get('value') as string) || 0;
+			data.customName = customName || undefined;
+			if (completeBy) data.completeBy = completeBy;
+			if (startDate) data.startDate = startDate;
+		} else {
+			const frequency = fd.get('frequency');
+			const type = fd.get('type');
+			const value = fd.get('value');
+			const customName = fd.get('customName');
+			const seasonIdsRaw = fd.get('seasonIds') as string;
+			if (frequency) data.frequency = frequency;
+			if (type) data.type = type;
+			if (value) data.value = parseFloat(value as string) || 0;
+			data.customName = (customName as string) || undefined;
+			if (seasonIdsRaw || seasonIdsRaw === '') {
+				data.seasonIds = seasonIdsRaw ? seasonIdsRaw.split(',').filter(Boolean) : [];
+			}
 		}
 		try {
 			const record = await hono.admin.update(event, 'assigned-chores', famId, id, data);
@@ -107,4 +122,59 @@ export const actions = {
 		}
 	},
 
+	createTodo: async (event) => {
+		if (!event.locals.session) throw redirect(303, '/login');
+		const famId = event.locals.session.famId;
+		const fd = await event.request.formData();
+		const memberId = fd.get('memberId') as string;
+		const name = fd.get('name') as string;
+		const type = fd.get('type') as string;
+		const value = type === 'emoji' ? 0 : (parseFloat(fd.get('value') as string) || 0);
+		const todoStart = fd.get('todoStart') as string;
+		const todoCompleteBy = fd.get('todoCompleteBy') as string;
+		const customDate = fd.get('customDate') as string;
+
+		if (!memberId || !name || !type) {
+			return fail(400, { error: 'Member, name, and type are required' });
+		}
+
+		// Compute startDate
+		const today = new Date().toISOString().slice(0, 10);
+		let startDate = today;
+		if (todoStart === 'next-week') {
+			const d = new Date();
+			d.setDate(d.getDate() + (7 - d.getDay() + 1)); // next Monday
+			startDate = d.toISOString().slice(0, 10);
+		}
+
+		// Compute completeBy
+		let completeBy = '';
+		if (todoCompleteBy === 'custom' && customDate) {
+			completeBy = customDate;
+		} else {
+			// Next week Saturday
+			const d = new Date();
+			d.setDate(d.getDate() + (7 - d.getDay() + 6));
+			completeBy = d.toISOString().slice(0, 10);
+		}
+
+		const data: Record<string, unknown> = {
+			memberId,
+			frequency: 'weekly',
+			type,
+			value,
+			customName: name,
+			isTodo: true,
+			startDate,
+			completeBy,
+		};
+
+		try {
+			const record = await hono.admin.create(event, 'assigned-chores', famId, data);
+			return { record };
+		} catch (e) {
+			return fail(400, { error: e instanceof Error ? e.message : 'Failed to create todo' });
+		}
+	},
+
 };

frontend/src/routes/[fam]/[username]/settings/+page.server.ts

@@ -53,7 +53,13 @@ export const actions = {
 		const fd = await event.request.formData();
 		const payday = parseInt(fd.get('payday') as string, 10);
 		if (isNaN(payday) || payday < 0 || payday > 6) return { error: 'Payday must be 0-6' };
-		return await hono.admin.updatePayday(event, famId, payday);
+		const paydayTime = fd.get('paydayTime') as string;
+		if (paydayTime && !/^\d{2}:\d{2}$/.test(paydayTime)) return { error: 'Payday time must be HH:MM' };
+		const timezone = fd.get('timezone') as string;
+		if (timezone && timezone !== 'auto' && !/^[A-Za-z_+-]+\/[A-Za-z_+-]+$/.test(timezone)) {
+			return { error: 'Timezone must be an IANA name or auto' };
+		}
+		return await hono.admin.updatePayday(event, famId, payday, paydayTime, timezone || undefined);
 	},
 
 	createSeason: async (event: RequestEvent) => {

frontend/src/routes/[fam]/[username]/settings/+page.svelte

@@ -1,47 +1,108 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { enhance } from '$app/forms';
-import { famStore } from '$lib/stores/fam.svelte';
-import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
-import { onDestroy } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
+	import { pb, initPbFromCookie } from '$lib/pocketbase';
+	import { famStore } from '$lib/stores/fam.svelte';
+	import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
+	import { COMMON_TIMEZONES } from '../../../../../../timezone.ts';
 	import QRCode from 'qrcode';
 
 	let { data } = $props();
 
-	let fam = $state(data.fam)
-	let famSlug = $state(page.params.fam)
+	// fam is sensitive (inviteCode, stripeCustomerId, featureFlags) — never in the
+	// public famStore stream. This admin-only page subscribes to `fams` with the
+	// authenticated PB instance (pb_token cookie), page-local only.
+	let fam = $state(data.fam);
+	let famSlug = $state(page.params.fam);
 
-	let childInviteUrl = $derived(`${page.url.origin}/join/${fam?.inviteCode}`)
-	let addName = $state('')
-	let rename = $state('')
-	let selectedMember = $state('')
-	let payday = $state(fam?.payday != null ? Number(fam.payday) : 1)
-	let showQR = $state(false)
-	let qrDataUrl = $state('')
-	let copied = $state(false)
-	let parentInviteEmail = $state('')
+	let childInviteUrl = $derived(`${page.url.origin}/join/${fam?.inviteCode}`);
+	let addName = $state('');
+	let rename = $state('');
+	let selectedMember = $state('');
+	let payday = $state(fam?.payday != null ? Number(fam.payday) : 1);
+	let paydayTime = $state(fam?.paydayTime || '18:00');
+	let paydayTimes = $state([
+		'06:00',
+		'07:00',
+		'08:00',
+		'09:00',
+		'10:00',
+		'11:00',
+		'12:00',
+		'13:00',
+		'14:00',
+		'15:00',
+		'16:00',
+		'17:00',
+		'18:00',
+		'19:00',
+		'20:00',
+		'21:00',
+		'22:00'
+	]);
+	let timezone = $state(fam?.timezone || 'auto');
+	let timezoneOptions = $state(COMMON_TIMEZONES);
+	let detectedTz = $state('');
+	$effect(() => {
+		if (typeof Intl !== 'undefined') {
+			try {
+				detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
+			} catch {
+				detectedTz = '';
+			}
+		}
+	});
+	let showQR = $state(false);
+	let qrDataUrl = $state('');
+	let copied = $state(false);
+	let parentInviteEmail = $state('');
 
 	let selectedInviteUrl = $derived(
-		selectedMember
-			? `${page.url.origin}/join/${fam?.inviteCode}/${selectedMember}`
-			: childInviteUrl
-	)
+		selectedMember ? `${page.url.origin}/join/${fam?.inviteCode}/${selectedMember}` : childInviteUrl
+	);
 
-	let members = $state(famStore.initialized ? famStore.members : (data.members || []))
-	let deletingSeason = $state<any>(null)
+	let members = $state(famStore.initialized ? famStore.members : data.members || []);
+	let deletingSeason = $state<any>(null);
+
+	function syncFamFromRecord(record: any) {
+		fam = record;
+		payday = Number(record.payday ?? 1);
+		paydayTime = record.paydayTime || '18:00';
+		timezone = record.timezone || 'auto';
+	}
+
+	onMount(async () => {
+		initPbFromCookie();
+		if (!fam?.id) return;
+		try {
+			await pb.collection('fams').subscribe(fam.id, ({ action, record }) => {
+				if (action === 'update') syncFamFromRecord(record);
+			});
+		} catch (e) {
+			console.error('fams subscribe failed:', e);
+		}
+	});
+
+	onDestroy(() => {
+		if (fam?.id)
+			pb.collection('fams')
+				.unsubscribe(fam.id)
+				.catch(() => {});
+	});
 
 	function copy(url: string) {
-		navigator.clipboard.writeText(url)
-		copied = true
-		setTimeout(() => copied = false, 2000)
+		navigator.clipboard.writeText(url);
+		copied = true;
+		setTimeout(() => (copied = false), 2000);
 	}
 
 	async function generateQR(url: string) {
-		qrDataUrl = await QRCode.toDataURL(url, { width: 200, margin: 1 })
+		qrDataUrl = await QRCode.toDataURL(url, { width: 200, margin: 1 });
 	}
 
 	function handleParentInvite() {
-		alert('Parent invite coming soon — email would be sent to ' + parentInviteEmail)
+		alert('Parent invite coming soon — email would be sent to ' + parentInviteEmail);
 	}
 </script>
 
@@ -70,7 +131,12 @@ import { onDestroy } from 'svelte';
 					<a href="/{famSlug}/{m.name}" class="link">Kanban</a>
 					<form method="POST" action="?/deleteMember" use:enhance class="inline">
 						<input type="hidden" name="id" value={m.id} />
-						<Button type="submit" variant="danger" size="sm" onclick={() => confirm('Remove {m.name}?')}>Remove</Button>
+						<Button
+							type="submit"
+							variant="danger"
+							size="sm"
+							onclick={() => confirm('Remove {m.name}?')}>Remove</Button
+						>
 					</form>
 				</li>
 			{/each}
@@ -78,19 +144,53 @@ import { onDestroy } from 'svelte';
 	</Card>
 
 	<Card title="Payday" cols={1}>
-		<form method="POST" action="?/updatePayday" use:enhance>
-			<select name="payday" bind:value={payday}>
-				<option value={0}>Sunday</option>
-				<option value={1}>Monday</option>
-				<option value={2}>Tuesday</option>
-				<option value={3}>Wednesday</option>
-				<option value={4}>Thursday</option>
-				<option value={5}>Friday</option>
-				<option value={6}>Saturday</option>
-			</select>
+		<form
+			method="POST"
+			action="?/updatePayday"
+			use:enhance={() => {
+				return async ({ result }) => {
+					if (result.type === 'error') {
+						alert(result.error || 'Failed to update payday');
+					}
+					// One-way: no invalidation — local state is already correct,
+					// and the PB subscription handles cross-device sync.
+				};
+			}}
+			class="payday-form"
+		>
+			<div class="payday-row">
+				<label>Day</label>
+				<select name="payday" bind:value={payday}>
+					<option value={0}>Sunday</option>
+					<option value={1}>Monday</option>
+					<option value={2}>Tuesday</option>
+					<option value={3}>Wednesday</option>
+					<option value={4}>Thursday</option>
+					<option value={5}>Friday</option>
+					<option value={6}>Saturday</option>
+				</select>
+				<label>Time</label>
+				<select name="paydayTime" bind:value={paydayTime}>
+					{#each paydayTimes as t}
+						<option value={t}>{t}</option>
+					{/each}
+				</select>
+			</div>
+			<div class="payday-row">
+				<label>Timezone</label>
+				<select name="timezone" bind:value={timezone}>
+					<option value="auto">{detectedTz ? `Auto (${detectedTz})` : 'Auto'}</option>
+					{#each timezoneOptions as tz}
+						<option value={tz}>{tz}</option>
+					{/each}
+				</select>
+			</div>
 			<Button type="submit" size="sm">Set payday</Button>
 		</form>
-		<p class="hint">The week starts on this day for tracking weekly chores and bonus cycles.</p>
+		<p class="hint">
+			Payday: the week starts on this day and weekly earnings are settled at this time. Auto timezone
+			follows each device.
+		</p>
 	</Card>
 
 	<Card title="Invite Children" cols={1}>
@@ -114,7 +214,17 @@ import { onDestroy } from 'svelte';
 				{copied ? 'Copied!' : 'Copy link'}
 			</Button>
 
-			<Button onclick={async () => { showQR = !showQR; if (!showQR) { qrDataUrl = ''; } else { await generateQR(selectedInviteUrl); } }} size="sm">
+			<Button
+				onclick={async () => {
+					showQR = !showQR;
+					if (!showQR) {
+						qrDataUrl = '';
+					} else {
+						await generateQR(selectedInviteUrl);
+					}
+				}}
+				size="sm"
+			>
 				{showQR ? 'Hide QR' : 'Show QR'}
 			</Button>
 
@@ -131,11 +241,7 @@ import { onDestroy } from 'svelte';
 	<Card title="Invite Parent" cols={1}>
 		<p class="hint">Send an email invitation for another parent to join as an admin.</p>
 		<div class="invite-row">
-			<input
-				type="email"
-				bind:value={parentInviteEmail}
-				placeholder="parent@example.com"
-			/>
+			<input type="email" bind:value={parentInviteEmail} placeholder="parent@example.com" />
 			<Button onclick={handleParentInvite} size="sm">Send invite</Button>
 		</div>
 		<p class="hint">They will set up their own password on first login.</p>
@@ -155,7 +261,7 @@ import { onDestroy } from 'svelte';
 				<li>
 					<span class="dot" style="background:{s.color}"></span>
 					{s.name}
-					<Button variant="danger" size="sm" onclick={() => deletingSeason = s}>Remove</Button>
+					<Button variant="danger" size="sm" onclick={() => (deletingSeason = s)}>Remove</Button>
 				</li>
 			{/each}
 		</ul>
@@ -163,18 +269,26 @@ import { onDestroy } from 'svelte';
 
 	<!-- Delete Season Modal -->
 	{#if deletingSeason}
-		<div class="overlay" onclick={() => deletingSeason = null} role="presentation">
+		<div class="overlay" onclick={() => (deletingSeason = null)} role="presentation">
 			<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
 				<h3>Delete "{deletingSeason.name}"?</h3>
-				<p class="warning">All chores assigned to this season will also be removed. This cannot be undone.</p>
-			<form method="POST" action="?/deleteSeason" use:enhance={() => { return async ({ result }) => {
-				if (result.type === 'success') {
-					deletingSeason = null;
-				}
-			}}}>
+				<p class="warning">
+					All chores assigned to this season will also be removed. This cannot be undone.
+				</p>
+				<form
+					method="POST"
+					action="?/deleteSeason"
+					use:enhance={() => {
+						return async ({ result }) => {
+							if (result.type === 'success') {
+								deletingSeason = null;
+							}
+						};
+					}}
+				>
 					<input type="hidden" name="id" value={deletingSeason.id} />
 					<div class="modal-actions">
-						<button type="button" onclick={() => deletingSeason = null}>Cancel</button>
+						<button type="button" onclick={() => (deletingSeason = null)}>Cancel</button>
 						<button type="submit" class="danger">Delete Season</button>
 					</div>
 				</form>
@@ -193,10 +307,28 @@ import { onDestroy } from 'svelte';
 		<Card title="Debug Tools" cols={1} accent="#f59e0b">
 			<p class="hint">Debug mode is enabled. These tools are for development and testing only.</p>
 			<div class="actions">
-				<form method="POST" action="?/completeWeek" use:enhance={() => { return async ({ result, update }) => { if (result.type === 'success') alert('Week completed!'); await update(); }; }}>
+				<form
+					method="POST"
+					action="?/completeWeek"
+					use:enhance={() => {
+						return async ({ result, update }) => {
+							if (result.type === 'success') alert('Week completed!');
+							await update();
+						};
+					}}
+				>
 					<Button type="submit" size="sm" variant="secondary">Complete Week</Button>
 				</form>
-				<form method="POST" action="?/generateData" use:enhance={() => { return async ({ result, update }) => { if (result.type === 'success') alert('Test data generated!'); await update(); }; }}>
+				<form
+					method="POST"
+					action="?/generateData"
+					use:enhance={() => {
+						return async ({ result, update }) => {
+							if (result.type === 'success') alert('Test data generated!');
+							await update();
+						};
+					}}
+				>
 					<input type="hidden" name="days" value="7" />
 					<Button type="submit" size="sm" variant="secondary">Generate Test Data (7 days)</Button>
 				</form>
@@ -206,32 +338,192 @@ import { onDestroy } from 'svelte';
 </CardGrid>
 
 <style>
-	.section { margin: 0.5rem 0; }
-	.code { font-family: monospace; font-size: 1.2rem; padding: 0.5rem; background: #f3f4f6; border-radius: 4px; display: inline-block; }
-	.invite-url { font-family: monospace; font-size: 0.9rem; word-break: break-all; background: #f9fafb; padding: 0.4rem; border-radius: 4px; }
-	.invite-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
-	.invite-row select { padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; flex: 1; }
-	.invite-row input { padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; flex: 1; }
-	.hint { font-size: 0.85rem; color: #9ca3af; }
-	.actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
-	.qr { margin-top: 0.5rem; border: 1px solid #e5e7eb; border-radius: 4px; }
-	ul { list-style: none; padding: 0; }
-	li { padding: 0.3rem 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
-	.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
-	.link { font-size: 0.85rem; color: #6366f1; }
-	form { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
-	input, select, button { padding: 0.4rem 0.7rem; border: 1px solid #ccc; border-radius: 4px; }
-	button { background: #6366f1; color: white; border: none; cursor: pointer; }
-	button:disabled { opacity: 0.5; cursor: not-allowed; }
-	.danger { background: #dc2626; font-size: 0.8rem; padding: 0.2rem 0.5rem; }
-	.inline { display: inline; margin: 0; }
-	.color-input { width: 40px; height: 34px; padding: 0; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
-	.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
-	.modal { background: white; border-radius: 12px; padding: 1.5rem; min-width: 320px; max-width: 440px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
-	.modal h3 { margin: 0 0 0.75rem; }
-	.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
-	.modal-actions button { padding: 0.5rem 1rem; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
-	.modal-actions button[type="button"] { background: #e5e7eb; color: #374151; }
-	.modal-actions button[type="submit"] { background: #dc2626; color: white; }
-	.warning { color: #dc2626; font-size: 0.9rem; background: #fef2f2; padding: 0.6rem; border-radius: 6px; margin-bottom: 0.5rem; }
+	.section {
+		margin: 0.5rem 0;
+	}
+	.code {
+		font-family: monospace;
+		font-size: 1.2rem;
+		padding: 0.5rem;
+		background: #f3f4f6;
+		border-radius: 4px;
+		display: inline-block;
+	}
+	.invite-url {
+		font-family: monospace;
+		font-size: 0.9rem;
+		word-break: break-all;
+		background: #f9fafb;
+		padding: 0.4rem;
+		border-radius: 4px;
+	}
+	.invite-row {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		margin: 0.5rem 0;
+	}
+	.invite-row select {
+		padding: 0.4rem;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		flex: 1;
+	}
+	.invite-row input {
+		padding: 0.4rem;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		flex: 1;
+	}
+	.hint {
+		font-size: 0.85rem;
+		color: #9ca3af;
+	}
+	.payday-form {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.payday-form button[type='submit'] {
+		align-self: flex-start;
+	}
+	.payday-row {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.payday-row select {
+		flex: 1;
+		min-width: 0;
+		max-width: 100%;
+	}
+	.payday-row label {
+		font-size: 0.8rem;
+		color: #6b7280;
+		flex-shrink: 0;
+	}
+	.payday-row + .payday-row {
+		margin-top: 0.5rem;
+	}
+	.actions {
+		display: flex;
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+		flex-wrap: wrap;
+	}
+	.qr {
+		margin-top: 0.5rem;
+		border: 1px solid #e5e7eb;
+		border-radius: 4px;
+	}
+	ul {
+		list-style: none;
+		padding: 0;
+	}
+	li {
+		padding: 0.3rem 0;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+	.dot {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+	.link {
+		font-size: 0.85rem;
+		color: #6366f1;
+	}
+	form {
+		display: flex;
+		gap: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+	input,
+	select,
+	button {
+		padding: 0.4rem 0.7rem;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+	}
+	button {
+		background: #6366f1;
+		color: white;
+		border: none;
+		cursor: pointer;
+	}
+	button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	.danger {
+		background: #dc2626;
+		font-size: 0.8rem;
+		padding: 0.2rem 0.5rem;
+	}
+	.inline {
+		display: inline;
+		margin: 0;
+	}
+	.color-input {
+		width: 40px;
+		height: 34px;
+		padding: 0;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.overlay {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.4);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 100;
+	}
+	.modal {
+		background: white;
+		border-radius: 12px;
+		padding: 1.5rem;
+		min-width: 320px;
+		max-width: 440px;
+		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+	}
+	.modal h3 {
+		margin: 0 0 0.75rem;
+	}
+	.modal-actions {
+		display: flex;
+		gap: 0.5rem;
+		justify-content: flex-end;
+		margin-top: 1rem;
+	}
+	.modal-actions button {
+		padding: 0.5rem 1rem;
+		border: none;
+		border-radius: 6px;
+		cursor: pointer;
+		font-size: 0.9rem;
+	}
+	.modal-actions button[type='button'] {
+		background: #e5e7eb;
+		color: #374151;
+	}
+	.modal-actions button[type='submit'] {
+		background: #dc2626;
+		color: white;
+	}
+	.warning {
+		color: #dc2626;
+		font-size: 0.9rem;
+		background: #fef2f2;
+		padding: 0.6rem;
+		border-radius: 6px;
+		margin-bottom: 0.5rem;
+	}
 </style>