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

added todos | payday time settings | refactor payment scheduling

Browse Source
This commit is contained in:
JCEEE
2026-08-04 08:34:14 +01:00
parent ccbbd302d4
commit 85ea97ae96
16 changed files with 2877 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/[fam]/[username]/settings/+page.svelte
+374 -82
View File
@@ -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>