From 673b134cfc3a8ed13f7e1042d2d0ef9dc07e65d2 Mon Sep 17 00:00:00 2001
From: JCEEE <0xjceee@proton.me>
Date: Sun, 2 Aug 2026 17:55:28 +0100
Subject: [PATCH] update member views

---
 frontend/src/lib/components/Card.svelte       |   27 +-
 frontend/src/lib/components/CardGrid.svelte   |   11 +-
 .../src/routes/[fam]/[username]/+page.svelte  | 1061 ++++++++---------
 3 files changed, 540 insertions(+), 559 deletions(-)

diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte
index c396fc1..3899029 100644
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -1,8 +1,17 @@
 <script lang="ts">
-	let { cols = 1, title, accent, children }: { cols?: 1 | 2 | 3; title?: string; accent?: string; children?: any } = $props();
+	let {
+		cols = 1,
+		title,
+		accent,
+		children
+	}: { cols?: 1 | 2 | 3 | 4 | 5 | 6; title?: string; accent?: string; children?: any } = $props();
 </script>
 
-<div class="card" style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}" class:has-accent={!!accent}>
+<div
+	class="card"
+	style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}"
+	class:has-accent={!!accent}
+>
 	{#if title}
 		<div class="card-header">
 			<span class="card-title">{title}</span>
@@ -20,12 +29,20 @@
 		border-radius: 10px;
 		overflow: hidden;
 	}
-	.card.has-accent { border-top: 3px solid var(--card-accent, #6366f1); }
+	.card.has-accent {
+		border-top: 3px solid var(--card-accent, #6366f1);
+	}
 	.card-header {
 		padding: 0.75rem 1rem;
 		border-bottom: 1px solid #f3f4f6;
 		background: #fafafa;
 	}
-	.card-title { font-weight: 600; font-size: 0.9rem; color: #374151; }
-	.card-body { padding: 1rem; }
+	.card-title {
+		font-weight: 600;
+		font-size: 0.9rem;
+		color: #374151;
+	}
+	.card-body {
+		padding: 1rem;
+	}
 </style>
diff --git a/frontend/src/lib/components/CardGrid.svelte b/frontend/src/lib/components/CardGrid.svelte
index 429de91..7160619 100644
--- a/frontend/src/lib/components/CardGrid.svelte
+++ b/frontend/src/lib/components/CardGrid.svelte
@@ -1,21 +1,14 @@
 <script lang="ts">
-	let { children }: { children?: any } = $props();
+	let { cols = 3, children }: { cols?: number; children?: any } = $props();
 </script>
 
-<div class="card-grid">
+<div class="card-grid" style="grid-template-columns:repeat({cols}, 1fr)">
 	{@render children?.()}
 </div>
 
 <style>
 	.card-grid {
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
 		gap: 1rem;
 	}
-	@media (max-width: 900px) {
-		.card-grid { grid-template-columns: repeat(2, 1fr); }
-	}
-	@media (max-width: 600px) {
-		.card-grid { grid-template-columns: 1fr; }
-	}
 </style>
diff --git a/frontend/src/routes/[fam]/[username]/+page.svelte b/frontend/src/routes/[fam]/[username]/+page.svelte
index 4602408..dfc0e18 100644
--- a/frontend/src/routes/[fam]/[username]/+page.svelte
+++ b/frontend/src/routes/[fam]/[username]/+page.svelte
@@ -173,24 +173,41 @@
 	let loading = $state(true);
 	let error = $state('');
 
-	let requestedRewards = $state<string[]>([]);
 	let claimError = $state('');
 	let todayChild = $state(new Date().toISOString().slice(0, 10));
 	let togglingIds = $state<string>('');
 
-	function weekStartStr(): string {
-		const d = new Date();
+	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);
 	}
 
+	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);
+	}
+
 	function monthStartStr(): string {
 		const d = new Date();
 		return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`;
 	}
 
+	const todayIso = new Date().toISOString().slice(0, 10);
+	const currentWeek = mondayOf(new Date());
+	let weekStart = $state(currentWeek);
+	let weekEnd = $derived(addDays(weekStart, 6));
+
+	const isCurrentWeek = $derived(weekStart === currentWeek);
+	const daysLeft = $derived(
+		Math.round(
+			(new Date(weekEnd + 'T00:00:00').getTime() - new Date(todayIso + 'T00:00:00').getTime()) /
+				86400000
+		)
+	);
+
 	let memberChores = $derived.by(() => {
 		if (role === 'parent' || !memberId) return [];
 		const activeSeasonIds = new Set(famStore.seasons.filter((s) => s.active).map((s) => s.id));
@@ -211,12 +228,6 @@
 	let completedToday = $derived(
 		completions.filter((c) => c.memberId === memberId && c.date?.slice(0, 10) === todayChild)
 	);
-	let claimableRewardsChild = $derived(
-		rewards.filter((r) => r.memberId === memberId && r.status === 'unclaimed')
-	);
-	let requestedRewardsChild = $derived(
-		rewards.filter((r) => r.memberId === memberId && r.status === 'requested')
-	);
 
 	let weeklyTotal = $derived.by(() => {
 		const dailyChores = memberChores.filter((a) => a.frequency === 'daily');
@@ -224,14 +235,22 @@
 		return dailyChores.length * 7 + weeklyChores.length;
 	});
 
-	let weeklyDone = $derived.by(() => {
-		const ws = weekStartStr();
-		return completions.filter(
-			(c) => c.memberId === memberId && (c.date?.slice(0, 10) || c.date) >= ws
-		).length;
-	});
+	let weekCompletions = $derived(
+		completions.filter(
+			(c) =>
+				c.memberId === memberId &&
+				(c.date?.slice(0, 10) || c.date) >= weekStart &&
+				(c.date?.slice(0, 10) || c.date) <= weekEnd
+		)
+	);
+	let weeklyDone = $derived(weekCompletions.length);
+	let weeklyPct = $derived(weeklyTotal > 0 ? Math.round((weeklyDone / weeklyTotal) * 100) : 0);
 
-	let totalCash = $derived.by(() => {
+	let weekRewards = $derived(
+		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 (
@@ -243,14 +262,7 @@
 		);
 	});
 
-	let pendingCash = $derived.by(() => {
-		const myRewards = rewards.filter((r) => r.memberId === memberId);
-		return myRewards
-			.filter((r) => r.rewardType === 'cash' && r.status !== 'claimed')
-			.reduce((sum, r) => sum + Number(r.value), 0);
-	});
-
-	let totalPoints = $derived.by(() => {
+	let allTimePoints = $derived.by(() => {
 		const myCompletions = completions.filter((c) => c.memberId === memberId);
 		const myRewards = rewards.filter((r) => r.memberId === memberId);
 		return (
@@ -264,64 +276,66 @@
 		);
 	});
 
-	let bonusNotices = $derived.by(() => {
-		const myRewards = rewards.filter((r) => r.memberId === memberId);
-		return myRewards.filter((r) => r.status === 'claimed' && r.claimedAt?.slice(0, 10) === r.date);
+	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(() =>
+		weekRewards
+			.filter((r) => r.rewardType === 'points' && r.status !== 'claimed')
+			.reduce((sum, r) => sum + Number(r.value), 0)
+	);
+	const pendingRewards = $derived(
+		weekRewards.filter((r) => r.status === 'unclaimed' || r.status === 'requested')
+	);
+
+	let weekBonusTallies = $derived.by(() => {
+		const map = new Map<string, number>();
+		for (const r of weekRewards) {
+			if (r.memberId !== memberId) continue;
+			const name = bonusConfigs.find((b: BonusConfig) => b.id === r.bonusConfigId)?.name || r.label;
+			map.set(name, (map.get(name) || 0) + 1);
+		}
+		return [...map.entries()].map(([name, count]) => ({ name, count }));
 	});
 
-	let bonusProgresses = $derived.by(() => {
-		const ws = weekStartStr();
-		const myCompletions = completions.filter((c) => c.memberId === memberId);
-		const activeConfigs = bonusConfigs.filter(
-			(b: BonusConfig) =>
-				b.status === 'active' &&
-				b.target === 'individual' &&
-				(!b.memberId || b.memberId === memberId)
-		);
-		return activeConfigs.map((cfg) => {
-			const pStart = cfg.period === 'weekly' ? ws : cfg.period === 'monthly' ? monthStartStr() : '';
-			const pEnd = pStart
-				? (() => {
-						if (cfg.period === 'weekly') {
-							const d = new Date(pStart);
-							d.setDate(d.getDate() + 6);
-							return d.toISOString().slice(0, 10);
-						}
-						if (cfg.period === 'monthly') {
-							const [y, m] = pStart.split('-').map(Number);
-							const lastDay = new Date(y, m, 0).getDate();
-							return `${pStart.slice(0, 7)}-${String(lastDay).padStart(2, '0')}`;
-						}
-						return '';
-					})()
-				: '';
-
-			const periodCompletions = pStart
-				? myCompletions.filter(
-						(c) =>
-							(c.date?.slice(0, 10) || c.date) >= pStart && (c.date?.slice(0, 10) || c.date) <= pEnd
-					)
-				: myCompletions;
-
-			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;
-			}
-
-			return {
-				config: cfg,
-				current,
-				criteria: cfg.criteriaValue || 0,
-				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');
+		const mon = String(d.getMonth() + 1).padStart(2, '0');
+		return `${day}/${mon}/${String(d.getFullYear()).slice(2)}`;
+	}
+	const MONTHS = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	];
+	function headDate(): Date {
+		return new Date((isCurrentWeek ? todayIso : weekEnd) + 'T00:00:00');
+	}
+	function headDay(): number {
+		return headDate().getDate();
+	}
+	function headMonth(): string {
+		const d = headDate();
+		return `${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+	}
+	function navigate(amount: number) {
+		weekStart = addDays(weekStart, amount * 7);
+	}
+	function jumpToNow() {
+		weekStart = currentWeek;
+	}
 
 	onMount(async () => {
 		if (role === 'parent') return;
@@ -451,12 +465,6 @@
 	function choreName(chore: AssignedChore): string {
 		return chore.customName || templateFor(chore)?.name || 'Chore';
 	}
-
-	function rewardLabelChild(r: Reward): string {
-		if (r.rewardType === 'cash') return `£${Number(r.value).toFixed(2)}`;
-		if (r.rewardType === 'points') return `${r.value} pts`;
-		return r.label;
-	}
 </script>
 
 {#if role === 'parent'}
@@ -675,33 +683,87 @@
 	</CardGrid>
 {:else}
 	<!-- Child View: Member Kanban -->
-	<ViewHeader title={memberName || username} />
-
-	<CardGrid>
-		<Card cols={3}>
-			<h1>
+	<div class="wk-head">
+		<div class="wk-head-main">
+			<span
+				class="color-dot"
+				style="background:{memberColor}"
+				role="button"
+				tabindex="0"
+				onclick={(e) => {
+					e.stopPropagation();
+					showColorPicker = !showColorPicker;
+				}}
+				onkeydown={(e) => e.key === 'Enter' && (showColorPicker = !showColorPicker)}
+			></span>
+			{#if editingName}
+				<input
+					type="text"
+					bind:value={nameInput}
+					class="name-edit"
+					onkeydown={async (e: KeyboardEvent) => {
+						if (e.key === 'Enter') {
+							editingName = false;
+							if (nameInput && nameInput !== memberName) {
+								const old = memberName;
+								memberName = nameInput;
+								try {
+									const res = await fetch('/api/members/me', {
+										method: 'PATCH',
+										headers: {
+											'Content-Type': 'application/json',
+											'x-device-token': deviceToken,
+											'x-device-famid': famId
+										},
+										body: JSON.stringify({ name: nameInput })
+									});
+									if (!res.ok) memberName = old;
+								} catch {
+									memberName = old;
+								}
+							}
+						} else if (e.key === 'Escape') {
+							editingName = false;
+							nameInput = memberName;
+						}
+					}}
+					onblur={() => {
+						editingName = false;
+						nameInput = memberName;
+					}}
+					autofocus
+				/>
+			{:else}
 				<span
-					class="color-dot"
-					style="background:{memberColor}"
+					class="name-display"
 					role="button"
 					tabindex="0"
-					onclick={(e) => {
-						e.stopPropagation();
-						showColorPicker = !showColorPicker;
+					onclick={() => {
+						nameInput = memberName;
+						editingName = true;
 					}}
-					onkeydown={(e) => e.key === 'Enter' && (showColorPicker = !showColorPicker)}
-				></span>
-				{#if editingName}
-					<input
-						type="text"
-						bind:value={nameInput}
-						class="name-edit"
-						onkeydown={async (e: KeyboardEvent) => {
-							if (e.key === 'Enter') {
-								editingName = false;
-								if (nameInput && nameInput !== memberName) {
-									const old = memberName;
-									memberName = nameInput;
+					onkeydown={(e) => e.key === 'Enter' && ((nameInput = memberName), (editingName = true))}
+				>
+					{memberName || username}
+				</span>
+			{/if}
+		</div>
+
+		{#if showColorPicker}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="color-picker-overlay" onclick={() => (showColorPicker = false)}>
+				<div class="color-picker-popup" onclick={(e) => e.stopPropagation()}>
+					<p>Pick a color:</p>
+					<div class="color-swatches">
+						{#each ['#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#3b82f6', '#6366f1', '#a855f7', '#ec4899', '#78716c'] as color}
+							<button
+								class="swatch"
+								style="background:{color}"
+								aria-label={color}
+								onclick={async () => {
+									const old = memberColor;
+									memberColor = color;
+									showColorPicker = false;
 									try {
 										const res = await fetch('/api/members/me', {
 											method: 'PATCH',
@@ -710,166 +772,145 @@
 												'x-device-token': deviceToken,
 												'x-device-famid': famId
 											},
-											body: JSON.stringify({ name: nameInput })
+											body: JSON.stringify({ color })
 										});
-										if (!res.ok) memberName = old;
+										if (!res.ok) memberColor = old;
 									} catch {
-										memberName = old;
+										memberColor = old;
 									}
-								}
-							} else if (e.key === 'Escape') {
-								editingName = false;
-								nameInput = memberName;
-							}
-						}}
-						onblur={() => {
-							editingName = false;
-							nameInput = memberName;
-						}}
-						autofocus
-					/>
-				{:else}
-					<span
-						class="name-display"
-						role="button"
-						tabindex="0"
-						onclick={() => {
-							nameInput = memberName;
-							editingName = true;
-						}}
-						onkeydown={(e) => e.key === 'Enter' && ((nameInput = memberName), (editingName = true))}
-					>
-						{memberName || username}
-					</span>
-				{/if}
-			</h1>
-
-			{#if showColorPicker}
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class="color-picker-overlay" onclick={() => (showColorPicker = false)}>
-					<div class="color-picker-popup" onclick={(e) => e.stopPropagation()}>
-						<p>Pick a color:</p>
-						<div class="color-swatches">
-							{#each ['#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#3b82f6', '#6366f1', '#a855f7', '#ec4899', '#78716c'] as color}
-								<button
-									class="swatch"
-									style="background:{color}"
-									aria-label={color}
-									onclick={async () => {
-										const old = memberColor;
-										memberColor = color;
-										showColorPicker = false;
-										try {
-											const res = await fetch('/api/members/me', {
-												method: 'PATCH',
-												headers: {
-													'Content-Type': 'application/json',
-													'x-device-token': deviceToken,
-													'x-device-famid': famId
-												},
-												body: JSON.stringify({ color })
-											});
-											if (!res.ok) memberColor = old;
-										} catch {
-											memberColor = old;
-										}
-									}}
-								></button>
-							{/each}
-						</div>
+								}}
+							></button>
+						{/each}
 					</div>
 				</div>
-			{/if}
+			</div>
+		{/if}
 
-			{#if loading}
-				<p>Loading...</p>
-			{:else if error}
-				<p class="error">{error}</p>
-			{:else}
-				<!-- Badge Cards -->
-				<div class="badges-row">
-					<div class="badge-card notice">
-						<span class="badge-label">Bonus Notices</span>
-						<span class="badge-value">{bonusNotices.length}</span>
-						{#if bonusNotices.length > 0}
-							<span class="badge-sub"
-								>+{bonusNotices.reduce((s, r) => s + Number(r.value), 0)} pts</span
-							>
-						{/if}
-					</div>
-					<div class="badge-card cash">
-						<span class="badge-label">Total Cash</span>
-						<span class="badge-value">£{totalCash.toFixed(2)}</span>
-					</div>
-					<div class="badge-card pending">
-						<span class="badge-label">Pending Cash</span>
-						<span class="badge-value">£{pendingCash.toFixed(2)}</span>
-					</div>
-					<div class="badge-card points">
-						<span class="badge-label">Total Points</span>
-						<span class="badge-value">{totalPoints}</span>
-					</div>
-				</div>
+		<div class="wk-date">
+			<div class="wk-date-left">
+				<span class="wk-day">{headDay()}</span>
+				<span class="wk-month">{headMonth()}</span>
+			</div>
+			<div class="wk-days-left">
+				<span class="wk-days-num">{daysLeft}</span>
+				<span class="wk-days-label">days left</span>
+			</div>
+		</div>
 
-				<!-- Weekly Progress -->
+		<div class="wk-nav">
+			<button class="wk-nav-btn" onclick={() => navigate(-1)}>❮ last week</button>
+			<button class="wk-nav-btn" class:active={isCurrentWeek} onclick={jumpToNow}>
+				current week
+			</button>
+			<button class="wk-nav-btn" onclick={() => navigate(1)}>
+				{shortDate(weekStart)} ➢
+			</button>
+		</div>
+	</div>
+
+	{#if loading}
+		<p class="empty">Loading...</p>
+	{:else if error}
+		<p class="error">{error}</p>
+	{:else}
+		<!-- Row 1: progress, bonuses, all-time -->
+		<CardGrid cols={6}>
+			<Card cols={2} title="This week progress">
 				{#if weeklyTotal > 0}
-					{@const wpct = Math.round((weeklyDone / weeklyTotal) * 100)}
-					<div class="week-card">
-						<div class="week-head">
-							<span class="week-label">This Week</span>
-							<span class="week-stat">{weeklyDone}/{weeklyTotal} done</span>
-						</div>
-						<div class="bar-wrap lg">
-							<div class="bar-fill" style="width:{wpct}%"></div>
-						</div>
+					{@const wpct = Math.max(0, Math.min(100, weeklyPct))}
+					<div class="big-stat">{weeklyDone}<span class="big-sub">/{weeklyTotal} done</span></div>
+					<div class="bar-wrap lg">
+						<div class="bar-fill" style="width:{wpct}%"></div>
 					</div>
+					<div class="row-spacer"></div>
+				{:else}
+					<p class="empty">No chores assigned</p>
 				{/if}
+			</Card>
 
-				<!-- Bonus Progress -->
-				{#if bonusProgresses.length > 0}
-					<div class="bonus-grid">
-						{#each bonusProgresses as bp}
-							{@const pct = bp.criteria > 0 ? Math.min(100, (bp.current / bp.criteria) * 100) : 0}
-							{@const hasReward = bp.periodStart
-								? rewards.some(
-										(r) =>
-											r.memberId === memberId &&
-											r.bonusConfigId === bp.config.id &&
-											r.date >= bp.periodStart &&
-											r.date <= bp.periodEnd
-									)
-								: rewards.some((r) => r.memberId === memberId && r.bonusConfigId === bp.config.id)}
-							{@const typeClass =
-								bp.config.type === 'threshold'
-									? 'type-threshold'
-									: bp.config.type === 'count'
-										? 'type-count'
-										: 'type-manual'}
-							<div class="bonus-badge {typeClass}" class:achieved={hasReward}>
-								<div class="bonus-head">
-									<span class="bonus-name">{bp.config.name}</span>
-									<span class="bonus-type">{bp.config.type}</span>
-								</div>
-								<div class="bonus-body">
-									{#if bp.criteria > 0}
-										<div class="bar-wrap">
-											<div class="bar-fill" style="width:{pct}%"></div>
-										</div>
-										<span class="bonus-stat"
-											>{bp.current}/{bp.criteria}
-											{bp.config.type === 'threshold' ? 'pts' : 'chores'}</span
-										>
-									{/if}
-								</div>
-								{#if hasReward}
-									<span class="bonus-done">Reward earned 🎉</span>
-								{/if}
+			<Card cols={2} title="This weeks bonuses">
+				{#if weekBonusTallies.length === 0}
+					<p class="empty">No bonuses yet</p>
+				{:else}
+					<div class="bonus-tallies">
+						{#each weekBonusTallies as t}
+							<div class="bonus-tally">
+								<span class="bt-name">{t.name}</span>
+								<span class="bt-count">{t.count}</span>
 							</div>
 						{/each}
 					</div>
 				{/if}
+			</Card>
 
-				<!-- Kanban -->
+			<Card cols={2} title="All time">
+				<div class="alltime">
+					<div class="alltime-row">
+						<span class="alltime-label">Cash</span>
+						<span class="alltime-value cash">£{allTimeCash.toFixed(2)}</span>
+					</div>
+					<div class="alltime-row">
+						<span class="alltime-label">Points</span>
+						<span class="alltime-value points">{allTimePoints}</span>
+					</div>
+				</div>
+			</Card>
+
+			<Card cols={2} title="End of week cash" accent="#10b981">
+				<div class="big-stat cash">£{pendingCash.toFixed(2)}</div>
+				<p class="stat-sub">pending this week</p>
+			</Card>
+
+			<Card cols={2} title="End of week points" accent="#8b5cf6">
+				<div class="big-stat points">{pendingPoints}</div>
+				<p class="stat-sub">pending this week</p>
+			</Card>
+
+			<Card cols={2} title="Claims" accent="#f59e0b">
+				{#if pendingRewards.length === 0}
+					<p class="empty">Nothing to claim</p>
+				{:else}
+					{#each pendingRewards as r}
+						{@const isRequested = r.status === 'requested'}
+						<div class="claim-list-row" class:requested={isRequested}>
+							<span class="cl-status">
+								{#if isRequested}🕓 requested{:else}▪️ claimable{/if}
+							</span>
+							<span class="cl-label">{r.label}</span>
+							<span class="cl-value">
+								{#if r.rewardType === 'cash'}
+									£{Number(r.value).toFixed(2)}
+								{:else if r.rewardType === 'prize'}
+									🎁 {r.value}
+								{:else}
+									{r.value} pts
+								{/if}
+							</span>
+							{#if isRequested}
+								<span class="cl-wait">waiting</span>
+							{:else}
+								<button
+									class="cl-cta"
+									onclick={async () => {
+										try {
+											await memberApi.claimReward(deviceToken, famId, r.id);
+										} catch (e) {
+											claimError = e instanceof Error ? e.message : 'Claim failed';
+										}
+									}}
+								>
+									Request
+								</button>
+							{/if}
+						</div>
+					{/each}
+				{/if}
+			</Card>
+		</CardGrid>
+
+		<!-- Kanban -->
+		<CardGrid cols={6}>
+			<Card cols={6}>
 				<div class="kanban">
 					<div class="column">
 						<h2>Daily Pending ({dailyPending.length})</h2>
@@ -918,75 +959,10 @@
 							{/each}
 						{/if}
 					</div>
-
-					<div class="column claim-col">
-						<h2>Claimable ({claimableRewardsChild.length})</h2>
-						{#if claimableRewardsChild.length === 0}
-							<p class="empty">Nothing to claim</p>
-						{:else}
-							{#if claimableRewardsChild.length > 1}
-								<button
-									class="request-all-btn"
-									onclick={async () => {
-										try {
-											await memberApi.requestAllRewards(deviceToken, famId);
-										} catch (e) {
-											claimError = e instanceof Error ? e.message : 'Request all failed';
-										}
-									}}
-								>
-									Request All
-								</button>
-							{/if}
-							{#each claimableRewardsChild as r}
-								<div class="claim-card">
-									<div class="claim-body">
-										<span class="claim-label">{r.label}</span>
-										<span class="claim-value">{rewardLabelChild(r)}</span>
-									</div>
-									<div class="claim-actions">
-										<span class="badge">{r.rewardType}</span>
-										<button
-											class="request-btn"
-											onclick={async () => {
-												try {
-													await memberApi.claimReward(deviceToken, famId, r.id);
-												} catch (e) {
-													claimError = e instanceof Error ? e.message : 'Claim failed';
-												}
-											}}
-										>
-											Request
-										</button>
-									</div>
-								</div>
-							{/each}
-						{/if}
-					</div>
-
-					<div class="column request-col">
-						<h2>Requested ({requestedRewardsChild.length})</h2>
-						{#if requestedRewardsChild.length === 0}
-							<p class="empty">No pending requests</p>
-						{:else}
-							{#each requestedRewardsChild as r}
-								<div class="claim-card requested">
-									<div class="claim-body">
-										<span class="claim-label">{r.label}</span>
-										<span class="claim-value">{rewardLabelChild(r)}</span>
-									</div>
-									<div class="claim-actions">
-										<span class="badge">{r.rewardType}</span>
-										<span class="requested-badge">Requested</span>
-									</div>
-								</div>
-							{/each}
-						{/if}
-					</div>
 				</div>
-			{/if}
-		</Card>
-	</CardGrid>
+			</Card>
+		</CardGrid>
+	{/if}
 {/if}
 
 <style>
@@ -1231,149 +1207,14 @@
 		text-align: center;
 	}
 
-	.badges-row {
-		display: flex;
-		gap: 0.75rem;
-		margin-bottom: 1rem;
-		flex-wrap: wrap;
-	}
-	.badge-card {
-		flex: 1;
-		min-width: 120px;
-		padding: 0.75rem;
-		border-radius: 8px;
-		background: #f9fafb;
-		border: 1px solid #e5e7eb;
-	}
-	.badge-label {
-		font-size: 0.75rem;
-		color: #6b7280;
-		display: block;
-	}
-	.badge-value {
-		font-size: 1.4rem;
-		font-weight: 700;
-		display: block;
-	}
-	.badge-sub {
-		font-size: 0.75rem;
-		color: #059669;
-	}
-	.badge-card.notice {
-		border-left: 3px solid #f59e0b;
-	}
-	.badge-card.cash {
-		border-left: 3px solid #10b981;
-	}
-	.badge-card.pending {
-		border-left: 3px solid #3b82f6;
-	}
-	.badge-card.points {
-		border-left: 3px solid #8b5cf6;
-	}
-
-	.week-card {
-		background: #f0fdf4;
-		border: 1px solid #bbf7d0;
-		border-radius: 10px;
-		padding: 0.85rem 1rem;
-		margin-bottom: 1rem;
-	}
-	.week-head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 0.5rem;
-	}
-	.week-label {
-		font-weight: 700;
-		font-size: 0.95rem;
-		color: #166534;
-	}
-	.week-stat {
-		font-size: 0.8rem;
-		color: #16a34a;
-		font-weight: 600;
-	}
 	.bar-wrap.lg {
 		height: 14px;
 	}
 
-	.bonus-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-		gap: 0.6rem;
-		margin-bottom: 1rem;
-	}
-	.bonus-badge {
-		border-radius: 10px;
-		padding: 0.7rem;
-		background: white;
-		border: 1px solid #e5e7eb;
-		border-left: 4px solid #9ca3af;
-	}
-	.bonus-badge.type-threshold {
-		border-left-color: #8b5cf6;
-	}
-	.bonus-badge.type-count {
-		border-left-color: #3b82f6;
-	}
-	.bonus-badge.type-manual {
-		border-left-color: #f59e0b;
-	}
-	.bonus-badge.achieved {
-		background: #f0fdf4;
-		border-color: #bbf7d0;
-		border-left-color: #22c55e;
-	}
-	.bonus-head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 0.3rem;
-	}
-	.bonus-name {
-		font-size: 0.8rem;
-		font-weight: 600;
-	}
-	.bonus-type {
-		font-size: 0.6rem;
-		padding: 1px 6px;
-		border-radius: 6px;
-		background: #f3f4f6;
-		color: #6b7280;
-		text-transform: capitalize;
-	}
-	.bonus-body {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-	.bonus-body .bar-wrap {
-		flex: 1;
-		height: 8px;
-	}
-	.bonus-stat {
-		font-size: 0.7rem;
-		color: #6b7280;
-		white-space: nowrap;
-		font-weight: 600;
-		min-width: 70px;
-		text-align: right;
-	}
-	.bonus-done {
-		font-size: 0.7rem;
-		color: #16a34a;
-		font-weight: 600;
-		margin-top: 0.2rem;
-		display: block;
-	}
-
 	.kanban {
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+		grid-template-columns: 1fr 1fr 1fr;
 		gap: 0.75rem;
-		margin-top: 0.5rem;
 	}
 	.column {
 		border: 1px solid #e5e7eb;
@@ -1428,89 +1269,6 @@
 		white-space: nowrap;
 	}
 
-	.claim-col {
-		border-left: 3px solid #10b981;
-	}
-	.claim-card {
-		display: flex;
-		align-items: center;
-		gap: 0.4rem;
-		padding: 0.5rem;
-		margin-bottom: 0.4rem;
-		border: 1px solid #e5e7eb;
-		border-radius: 6px;
-		background: white;
-	}
-	.claim-body {
-		flex: 1;
-	}
-	.claim-label {
-		font-size: 0.8rem;
-		display: block;
-	}
-	.claim-value {
-		font-size: 0.9rem;
-		font-weight: 700;
-		color: #059669;
-	}
-	.claim-actions {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-end;
-		gap: 0.25rem;
-	}
-	.badge {
-		font-size: 0.65rem;
-		padding: 1px 6px;
-		border-radius: 8px;
-		background: #d1fae5;
-		color: #059669;
-		white-space: nowrap;
-	}
-	.request-btn {
-		font-size: 0.7rem;
-		padding: 2px 8px;
-		background: #6366f1;
-		color: white;
-		border: none;
-		border-radius: 4px;
-		cursor: pointer;
-	}
-	.request-btn:disabled {
-		background: #9ca3af;
-		cursor: default;
-	}
-	.request-all-btn {
-		display: block;
-		width: 100%;
-		padding: 0.5rem;
-		margin-bottom: 0.5rem;
-		background: #2563eb;
-		color: white;
-		border: none;
-		border-radius: 6px;
-		font-size: 0.85rem;
-		font-weight: 600;
-		cursor: pointer;
-	}
-	.request-all-btn:hover {
-		background: #1d4ed8;
-	}
-	.request-col {
-		border-color: #93c5fd;
-		background: #eff6ff;
-	}
-	.claim-card.requested {
-		opacity: 0.7;
-	}
-	.requested-badge {
-		font-size: 0.7rem;
-		padding: 2px 8px;
-		border-radius: 10px;
-		background: #dbeafe;
-		color: #1e40af;
-		font-weight: 600;
-	}
 	.section-label {
 		font-size: 0.75rem;
 		font-weight: 600;
@@ -1529,11 +1287,6 @@
 		opacity: 0.6;
 	}
 
-	h1 {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
 	.color-dot {
 		display: inline-block;
 		width: 18px;
@@ -1591,4 +1344,222 @@
 		border-color: #6366f1;
 		transform: scale(1.1);
 	}
+
+	.wk-head {
+		display: flex;
+		align-items: center;
+		gap: 1.5rem;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin-bottom: 1.25rem;
+	}
+	.wk-head-main {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.wk-date {
+		display: flex;
+		align-items: center;
+		gap: 1.25rem;
+	}
+	.wk-date-left {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+	}
+	.wk-day {
+		font-size: 3.5rem;
+		font-weight: 800;
+		line-height: 1;
+		color: #111827;
+	}
+	.wk-month {
+		font-size: 1rem;
+		color: #6b7280;
+		font-weight: 600;
+	}
+	.wk-days-left {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-left: 1.25rem;
+		border-left: 2px solid #e5e7eb;
+	}
+	.wk-days-num {
+		font-size: 2.5rem;
+		font-weight: 800;
+		line-height: 1;
+		color: #6366f1;
+	}
+	.wk-days-label {
+		font-size: 0.75rem;
+		color: #6b7280;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+	.wk-nav {
+		display: flex;
+		gap: 0.4rem;
+		align-items: center;
+	}
+	.wk-nav-btn {
+		font-size: 0.8rem;
+		padding: 0.4rem 0.7rem;
+		border: 1px solid #d1d5db;
+		border-radius: 6px;
+		background: white;
+		cursor: pointer;
+		font-weight: 600;
+		color: #374151;
+	}
+	.wk-nav-btn:hover {
+		background: #f3f4f6;
+	}
+	.wk-nav-btn.active {
+		background: #6366f1;
+		color: white;
+		border-color: #6366f1;
+	}
+
+	.big-stat {
+		font-size: 2.2rem;
+		font-weight: 800;
+		line-height: 1.1;
+		margin-bottom: 0.25rem;
+	}
+	.big-stat.cash {
+		color: #059669;
+	}
+	.big-stat.points {
+		color: #7c3aed;
+	}
+	.big-sub {
+		font-size: 1rem;
+		font-weight: 600;
+		color: #6b7280;
+	}
+	.row-spacer {
+		height: 1.25rem;
+	}
+	.stat-sub {
+		font-size: 0.8rem;
+		color: #6b7280;
+		margin: 0;
+	}
+
+	.bonus-tallies {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.bonus-tally {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.4rem 0.6rem;
+		border: 1px solid #e5e7eb;
+		border-left: 4px solid #f59e0b;
+		border-radius: 8px;
+		background: white;
+	}
+	.bt-name {
+		font-size: 0.85rem;
+		font-weight: 600;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.bt-count {
+		font-size: 0.9rem;
+		font-weight: 700;
+		color: #7c3aed;
+	}
+
+	.alltime {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.alltime-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1px solid #f3f4f6;
+		padding-bottom: 0.4rem;
+	}
+	.alltime-row:last-child {
+		border-bottom: none;
+	}
+	.alltime-label {
+		font-size: 0.85rem;
+		color: #6b7280;
+	}
+	.alltime-value {
+		font-size: 1.1rem;
+		font-weight: 700;
+	}
+	.alltime-value.cash {
+		color: #059669;
+	}
+	.alltime-value.points {
+		color: #7c3aed;
+	}
+
+	.claim-list-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0;
+		border-bottom: 1px solid #f3f4f6;
+	}
+	.claim-list-row:last-child {
+		border-bottom: none;
+	}
+	.cl-status {
+		font-size: 0.7rem;
+		font-weight: 600;
+		min-width: 5.5rem;
+	}
+	.cl-label {
+		flex: 1;
+		font-size: 0.85rem;
+		font-weight: 600;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.cl-value {
+		font-size: 0.85rem;
+		font-weight: 700;
+		color: #059669;
+		white-space: nowrap;
+	}
+	.cl-wait {
+		font-size: 0.7rem;
+		padding: 2px 8px;
+		border-radius: 10px;
+		background: #dbeafe;
+		color: #1e40af;
+		font-weight: 600;
+	}
+	.cl-cta {
+		font-size: 0.72rem;
+		padding: 3px 10px;
+		background: #6366f1;
+		color: white;
+		border: none;
+		border-radius: 5px;
+		cursor: pointer;
+		font-weight: 600;
+	}
+	.cl-cta:hover {
+		background: #4f46e5;
+	}
+	.claim-list-row.requested {
+		opacity: 0.7;
+	}
 </style>