Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Alexander:ac6845d38a859504634826af3546bbc19f211b3a
Branches Tags
Alexander:master Alexander:better-auth-flow Alexander:svelte5 Alexander:feature-cospend
...
compare: Alexander:db3de29e48df5cb679292ba0a26a3b7a9a88e676
Branches Tags
Alexander:master Alexander:better-auth-flow Alexander:svelte5 Alexander:feature-cospend

2 Commits
ac6845d38a ... db3de29e48

Author SHA1 Message Date
Alexander Bocken
db3de29e48 add MVP monthly expenses graph
Some checks failed
CI / update (push) Failing after 5s
Details
2025-09-12 20:07:37 +02:00
Alexander Bocken
e773a90f1d Refactor cospend components and add SSR support to settle page 
- Create reusable components: ImageUpload, FormSection, SplitMethodSelector, UsersList
- Replace duplicate code across add/edit pages with shared components
- Remove created-by info and edit/delete buttons from payments list
- Add server-side rendering support to settle page with form actions
- Fix settlement submission redirect issue
- Remove redundant back button from settle page

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-09-12 19:29:30 +02:00
15 changed files with 2043 additions and 1420 deletions
Expand all files Collapse all files

1
package.json
View File

@@ -27,6 +27,7 @@
"dependencies": {
"@auth/sveltekit": "^1.10.0",
"@sveltejs/adapter-node": "^5.0.0",
"chart.js": "^4.5.0",
"cheerio": "1.0.0-rc.12",
"mongoose": "^8.0.0",
"node-cron": "^4.2.1",

16
pnpm-lock.yaml generated
View File

@@ -14,6 +14,9 @@ importers:
'@sveltejs/adapter-node':
specifier: ^5.0.0
version: 5.3.1(@sveltejs/kit@2.37.0(@sveltejs/vite-plugin-svelte@6.1.3(svelte@5.38.6)(vite@7.1.3(@types/node@22.18.0)))(svelte@5.38.6)(vite@7.1.3(@types/node@22.18.0)))
chart.js:
specifier: ^4.5.0
version: 4.5.0
cheerio:
specifier: 1.0.0-rc.12
version: 1.0.0-rc.12
@@ -376,6 +379,9 @@ packages:
'@jridgewell/trace-mapping@0.3.30':
resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
'@kurkle/color@0.3.4':
resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
'@mongodb-js/saslprep@1.3.0':
resolution: {integrity: sha512-zlayKCsIjYb7/IdfqxorK5+xUMyi4vOKcFy10wKJYc63NSdKI8mNME+uJqfatkPmOSMMUiojrL58IePKBm3gvQ==}
@@ -625,6 +631,10 @@ packages:
resolution: {integrity: sha512-WIsKqkSC0ABoBJuT1LEX+2HEvNmNKKgnTAyd0fL8qzK4SH2i9NXg+t08YtdZp/V9IZ33cxe3iV4yM0qg8lMQng==}
engines: {node: '>=16.20.1'}
chart.js@4.5.0:
resolution: {integrity: sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==}
engines: {pnpm: '>=8'}
cheerio-select@2.1.0:
resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
@@ -1251,6 +1261,8 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.0
'@jridgewell/sourcemap-codec': 1.4.15
'@kurkle/color@0.3.4': {}
'@mongodb-js/saslprep@1.3.0':
dependencies:
sparse-bitfield: 3.0.3
@@ -1455,6 +1467,10 @@ snapshots:
bson@6.10.4: {}
chart.js@4.5.0:
dependencies:
'@kurkle/color': 0.3.4
cheerio-select@2.1.0:
dependencies:
boolbase: 1.0.0

205
src/lib/components/BarChart.svelte Normal file
View File

@@ -0,0 +1,205 @@
<script>
import { onMount } from 'svelte';
import { Chart, registerables } from 'chart.js';
export let data = { labels: [], datasets: [] };
export let title = '';
export let height = '400px';
let canvas;
let chart;
// Register Chart.js components
Chart.register(...registerables);
// Nord theme colors for categories
const nordColors = [
'#5E81AC', // Nord Blue
'#88C0D0', // Nord Light Blue
'#81A1C1', // Nord Lighter Blue
'#A3BE8C', // Nord Green
'#EBCB8B', // Nord Yellow
'#D08770', // Nord Orange
'#BF616A', // Nord Red
'#B48EAD', // Nord Purple
'#8FBCBB', // Nord Cyan
'#ECEFF4', // Nord Light Gray
];
function getCategoryColor(category, index) {
const categoryColorMap = {
'groceries': '#A3BE8C', // Green
'restaurant': '#D08770', // Orange
'transport': '#5E81AC', // Blue
'entertainment': '#B48EAD', // Purple
'shopping': '#EBCB8B', // Yellow
'utilities': '#81A1C1', // Light Blue
'healthcare': '#BF616A', // Red
'education': '#88C0D0', // Cyan
'travel': '#8FBCBB', // Light Cyan
'other': '#4C566A' // Dark Gray
};
return categoryColorMap[category] || nordColors[index % nordColors.length];
}
function createChart() {
if (!canvas || !data.datasets) return;
// Destroy existing chart
if (chart) {
chart.destroy();
}
const ctx = canvas.getContext('2d');
// Process datasets with colors
const processedDatasets = data.datasets.map((dataset, index) => ({
...dataset,
backgroundColor: getCategoryColor(dataset.label, index),
borderColor: getCategoryColor(dataset.label, index),
borderWidth: 1
}));
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.labels,
datasets: processedDatasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
grid: {
display: false
},
ticks: {
color: 'var(--nord3)',
font: {
family: 'Inter, system-ui, sans-serif'
}
}
},
y: {
stacked: true,
beginAtZero: true,
grid: {
color: 'var(--nord4)',
borderDash: [2, 2]
},
ticks: {
color: 'var(--nord3)',
font: {
family: 'Inter, system-ui, sans-serif'
},
callback: function(value) {
return 'CHF ' + value.toFixed(0);
}
}
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20,
usePointStyle: true,
color: 'var(--nord1)',
font: {
family: 'Inter, system-ui, sans-serif',
size: 12
}
}
},
title: {
display: !!title,
text: title,
color: 'var(--nord0)',
font: {
family: 'Inter, system-ui, sans-serif',
size: 16,
weight: 'bold'
},
padding: 20
},
tooltip: {
backgroundColor: 'var(--nord1)',
titleColor: 'var(--nord6)',
bodyColor: 'var(--nord6)',
borderColor: 'var(--nord3)',
borderWidth: 1,
cornerRadius: 8,
titleFont: {
family: 'Inter, system-ui, sans-serif'
},
bodyFont: {
family: 'Inter, system-ui, sans-serif'
},
callbacks: {
label: function(context) {
return context.dataset.label + ': CHF ' + context.parsed.y.toFixed(2);
}
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
}
onMount(() => {
createChart();
// Watch for theme changes
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleThemeChange = () => {
setTimeout(createChart, 100); // Small delay to let CSS variables update
};
mediaQuery.addEventListener('change', handleThemeChange);
return () => {
mediaQuery.removeEventListener('change', handleThemeChange);
if (chart) {
chart.destroy();
}
};
});
// Recreate chart when data changes
$: if (canvas && data) {
createChart();
}
</script>
<div class="chart-container" style="height: {height}">
<canvas bind:this={canvas}></canvas>
</div>
<style>
.chart-container {
background: var(--nord6);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
}
@media (prefers-color-scheme: dark) {
.chart-container {
background: var(--nord1);
border-color: var(--nord2);
}
}
canvas {
max-width: 100%;
height: 100% !important;
}
</style>

38
src/lib/components/FormSection.svelte Normal file
View File

@@ -0,0 +1,38 @@
<script>
export let title = '';
</script>
<div class="form-section">
{#if title}
<h2>{title}</h2>
{/if}
<slot />
</div>
<style>
.form-section {
background: var(--nord6);
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
}
.form-section h2 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--nord0);
font-size: 1.25rem;
}
@media (prefers-color-scheme: dark) {
.form-section {
background: var(--nord1);
border-color: var(--nord2);
}
.form-section h2 {
color: var(--font-default-dark);
}
}
</style>

247
src/lib/components/ImageUpload.svelte Normal file
View File

@@ -0,0 +1,247 @@
<script>
export let imagePreview = '';
export let imageFile = null;
export let uploading = false;
export let currentImage = null; // For edit mode
export let title = 'Receipt Image';
// Events
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function handleImageChange(event) {
const file = event.target.files[0];
if (file) {
if (file.size > 5 * 1024 * 1024) {
dispatch('error', 'File size must be less than 5MB');
return;
}
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
dispatch('error', 'Please select a valid image file (JPEG, PNG, WebP)');
return;
}
imageFile = file;
const reader = new FileReader();
reader.onload = (e) => {
imagePreview = e.target.result;
};
reader.readAsDataURL(file);
dispatch('imageSelected', file);
}
}
function removeImage() {
imageFile = null;
imagePreview = '';
currentImage = null;
dispatch('imageRemoved');
}
function removeCurrentImage() {
currentImage = null;
dispatch('currentImageRemoved');
}
</script>
<div class="form-section">
<h2>{title}</h2>
{#if currentImage}
<div class="current-image">
<img src={currentImage} alt="Receipt" class="receipt-preview" />
<div class="image-actions">
<button type="button" class="btn-remove" on:click={removeCurrentImage}>
Remove Image
</button>
</div>
</div>
{/if}
{#if imagePreview}
<div class="image-preview">
<img src={imagePreview} alt="Receipt preview" />
<button type="button" class="remove-image" on:click={removeImage}>
Remove Image
</button>
</div>
{:else}
<div class="image-upload">
<label for="image" class="upload-label">
<div class="upload-content">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/>
<line x1="16" y1="5" x2="22" y2="5"/>
<line x1="19" y1="2" x2="19" y2="8"/>
</svg>
<p>{currentImage ? 'Replace Image' : 'Upload Receipt Image'}</p>
<small>JPEG, PNG, WebP (max 5MB)</small>
</div>
</label>
<input
type="file"
id="image"
accept="image/jpeg,image/jpg,image/png,image/webp"
on:change={handleImageChange}
disabled={uploading}
hidden
/>
</div>
{/if}
{#if uploading}
<div class="upload-status">Uploading image...</div>
{/if}
</div>
<style>
.form-section {
background: var(--nord6);
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
}
.form-section h2 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--nord0);
font-size: 1.25rem;
}
@media (prefers-color-scheme: dark) {
.form-section {
background: var(--nord1);
border-color: var(--nord2);
}
.form-section h2 {
color: var(--font-default-dark);
}
}
.image-upload {
border: 2px dashed var(--nord4);
border-radius: 0.5rem;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background-color: var(--nord5);
}
.image-upload:hover {
border-color: var(--blue);
background-color: var(--nord4);
}
@media (prefers-color-scheme: dark) {
.image-upload {
background-color: var(--nord2);
border-color: var(--nord3);
}
.image-upload:hover {
background-color: var(--nord3);
}
}
.upload-label {
cursor: pointer;
display: block;
}
.upload-content svg {
color: var(--nord3);
margin-bottom: 1rem;
}
.upload-content p {
margin: 0 0 0.5rem 0;
font-weight: 500;
color: var(--nord0);
}
.upload-content small {
color: var(--nord3);
}
@media (prefers-color-scheme: dark) {
.upload-content svg {
color: var(--nord4);
}
.upload-content p {
color: var(--font-default-dark);
}
.upload-content small {
color: var(--nord4);
}
}
.image-preview {
text-align: center;
}
.image-preview img {
max-width: 100%;
max-height: 300px;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.remove-image, .btn-remove {
background-color: var(--red);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s;
}
.remove-image:hover, .btn-remove:hover {
background-color: var(--nord11);
transform: translateY(-1px);
}
.current-image {
margin-bottom: 1rem;
text-align: center;
}
.receipt-preview {
max-width: 200px;
max-height: 200px;
object-fit: cover;
border-radius: 0.5rem;
border: 1px solid var(--nord4);
margin-bottom: 0.75rem;
display: block;
margin-left: auto;
margin-right: auto;
}
@media (prefers-color-scheme: dark) {
.receipt-preview {
border-color: var(--nord2);
}
}
.image-actions {
display: flex;
justify-content: center;
}
.upload-status {
margin-top: 0.5rem;
color: var(--blue);
font-size: 0.9rem;
text-align: center;
}
</style>

456
src/lib/components/SplitMethodSelector.svelte Normal file
View File

@@ -0,0 +1,456 @@
<script>
import ProfilePicture from './ProfilePicture.svelte';
export let splitMethod = 'equal';
export let users = [];
export let amount = 0;
export let paidBy = '';
export let splitAmounts = {};
export let personalAmounts = {};
export let currentUser = '';
export let predefinedMode = false;
let personalTotalError = false;
// Reactive text for "Paid in Full" option
$: paidInFullText = (() => {
if (!paidBy) {
return 'Paid in Full';
}
// Special handling for 2-user predefined setup
if (predefinedMode && users.length === 2) {
const otherUser = users.find(user => user !== paidBy);
return otherUser ? `Paid in Full for ${otherUser}` : 'Paid in Full';
}
// General case
if (paidBy === currentUser) {
return 'Paid in Full by You';
} else {
return `Paid in Full by ${paidBy}`;
}
})();
function calculateEqualSplits() {
if (!amount || users.length === 0) return;
const amountNum = parseFloat(amount);
const splitAmount = amountNum / users.length;
users.forEach(user => {
if (user === paidBy) {
splitAmounts[user] = splitAmount - amountNum;
} else {
splitAmounts[user] = splitAmount;
}
});
splitAmounts = { ...splitAmounts };
}
function calculateFullPayment() {
if (!amount) return;
const amountNum = parseFloat(amount);
const otherUsers = users.filter(user => user !== paidBy);
const amountPerOtherUser = otherUsers.length > 0 ? amountNum / otherUsers.length : 0;
users.forEach(user => {
if (user === paidBy) {
splitAmounts[user] = -amountNum;
} else {
splitAmounts[user] = amountPerOtherUser;
}
});
splitAmounts = { ...splitAmounts };
}
function calculatePersonalEqualSplit() {
if (!amount || users.length === 0) return;
const totalAmount = parseFloat(amount);
const totalPersonal = users.reduce((sum, user) => {
return sum + (parseFloat(personalAmounts[user]) || 0);
}, 0);
const remainder = Math.max(0, totalAmount - totalPersonal);
const equalShare = remainder / users.length;
users.forEach(user => {
const personalAmount = parseFloat(personalAmounts[user]) || 0;
const totalOwed = personalAmount + equalShare;
if (user === paidBy) {
splitAmounts[user] = totalOwed - totalAmount;
} else {
splitAmounts[user] = totalOwed;
}
});
splitAmounts = { ...splitAmounts };
}
function handleSplitMethodChange() {
if (splitMethod === 'equal') {
calculateEqualSplits();
} else if (splitMethod === 'full') {
calculateFullPayment();
} else if (splitMethod === 'personal_equal') {
calculatePersonalEqualSplit();
} else if (splitMethod === 'proportional') {
users.forEach(user => {
if (!(user in splitAmounts)) {
splitAmounts[user] = 0;
}
});
splitAmounts = { ...splitAmounts };
}
}
// Validate and recalculate when personal amounts change
$: if (splitMethod === 'personal_equal' && personalAmounts && amount) {
const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
const totalAmount = parseFloat(amount);
personalTotalError = totalPersonal > totalAmount;
if (!personalTotalError) {
calculatePersonalEqualSplit();
}
}
$: if (amount && splitMethod && paidBy) {
handleSplitMethodChange();
}
</script>
<div class="form-section">
<h2>Split Method</h2>
<div class="form-group">
<label for="splitMethod">How should this payment be split?</label>
<select id="splitMethod" name="splitMethod" bind:value={splitMethod} required>
<option value="equal">{predefinedMode && users.length === 2 ? 'Split 50/50' : 'Equal Split'}</option>
<option value="personal_equal">Personal + Equal Split</option>
<option value="full">{paidInFullText}</option>
<option value="proportional">Custom Proportions</option>
</select>
</div>
{#if splitMethod === 'proportional'}
<div class="proportional-splits">
<h3>Custom Split Amounts</h3>
{#each users as user}
<div class="split-input">
<label>{user}</label>
<input
type="number"
step="0.01"
name="split_{user}"
bind:value={splitAmounts[user]}
placeholder="0.00"
/>
</div>
{/each}
</div>
{/if}
{#if splitMethod === 'personal_equal'}
<div class="personal-splits">
<h3>Personal Amounts</h3>
<p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
{#each users as user}
<div class="split-input">
<label>{user}</label>
<input
type="number"
step="0.01"
min="0"
name="personal_{user}"
bind:value={personalAmounts[user]}
placeholder="0.00"
/>
</div>
{/each}
{#if amount}
<div class="remainder-info" class:error={personalTotalError}>
<span>Total Personal: CHF {Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0).toFixed(2)}</span>
<span>Remainder to Split: CHF {Math.max(0, parseFloat(amount) - Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0)).toFixed(2)}</span>
{#if personalTotalError}
<div class="error-message">⚠️ Personal amounts exceed total payment amount!</div>
{/if}
</div>
{/if}
</div>
{/if}
{#if Object.keys(splitAmounts).length > 0}
<div class="split-preview">
<h3>Split Preview</h3>
{#each users as user}
<div class="split-item">
<div class="split-user">
<ProfilePicture username={user} size={24} />
<span class="username">{user}</span>
</div>
<span class="amount" class:positive={splitAmounts[user] < 0} class:negative={splitAmounts[user] > 0}>
{#if splitAmounts[user] > 0}
owes CHF {splitAmounts[user].toFixed(2)}
{:else if splitAmounts[user] < 0}
is owed CHF {Math.abs(splitAmounts[user]).toFixed(2)}
{:else}
owes CHF {splitAmounts[user].toFixed(2)}
{/if}
</span>
</div>
{/each}
</div>
{/if}
</div>
<style>
.form-section {
background: var(--nord6);
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
}
.form-section h2 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--nord0);
font-size: 1.25rem;
}
@media (prefers-color-scheme: dark) {
.form-section {
background: var(--nord1);
border-color: var(--nord2);
}
.form-section h2 {
color: var(--font-default-dark);
}
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--nord2);
}
@media (prefers-color-scheme: dark) {
label {
color: var(--nord5);
}
}
select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--nord4);
border-radius: 0.5rem;
font-size: 1rem;
box-sizing: border-box;
background-color: var(--nord6);
color: var(--nord0);
}
select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
}
@media (prefers-color-scheme: dark) {
select {
background-color: var(--nord2);
color: var(--font-default-dark);
border-color: var(--nord3);
}
}
.proportional-splits, .personal-splits {
margin-top: 1rem;
}
.proportional-splits {
border: 1px solid var(--nord4);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
background-color: var(--nord5);
}
@media (prefers-color-scheme: dark) {
.proportional-splits {
border-color: var(--nord3);
background-color: var(--nord2);
}
}
.proportional-splits h3, .personal-splits h3 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--nord0);
}
@media (prefers-color-scheme: dark) {
.proportional-splits h3, .personal-splits h3 {
color: var(--font-default-dark);
}
}
.personal-splits .description {
color: var(--nord2);
font-size: 0.9rem;
margin-bottom: 1rem;
font-style: italic;
}
@media (prefers-color-scheme: dark) {
.personal-splits .description {
color: var(--nord4);
}
}
.split-input {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.split-input label {
min-width: 100px;
margin-bottom: 0;
}
.split-input input {
max-width: 120px;
padding: 0.75rem;
border: 1px solid var(--nord4);
border-radius: 0.5rem;
font-size: 1rem;
background-color: var(--nord6);
color: var(--nord0);
box-sizing: border-box;
}
.split-input input:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
}
@media (prefers-color-scheme: dark) {
.split-input input {
background-color: var(--nord2);
color: var(--font-default-dark);
border-color: var(--nord3);
}
}
.remainder-info {
margin-top: 1rem;
padding: 1rem;
background-color: var(--nord5);
border-radius: 0.5rem;
border: 1px solid var(--nord4);
}
.remainder-info.error {
background-color: var(--nord6);
border-color: var(--red);
}
@media (prefers-color-scheme: dark) {
.remainder-info {
background-color: var(--nord2);
border-color: var(--nord3);
}
.remainder-info.error {
background-color: var(--accent-dark);
border-color: var(--red);
}
}
.remainder-info span {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.error-message {
color: var(--red);
font-weight: 600;
margin-top: 0.5rem;
font-size: 0.9rem;
}
.split-preview {
background-color: var(--nord5);
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid var(--nord4);
}
@media (prefers-color-scheme: dark) {
.split-preview {
background-color: var(--nord2);
border-color: var(--nord3);
}
}
.split-preview h3 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--nord0);
}
@media (prefers-color-scheme: dark) {
.split-preview h3 {
color: var(--font-default-dark);
}
}
.split-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.split-user {
display: flex;
align-items: center;
gap: 0.5rem;
}
.username {
color: var(--nord0);
}
@media (prefers-color-scheme: dark) {
.username {
color: var(--font-default-dark);
}
}
.amount.positive {
color: var(--green);
font-weight: 500;
}
.amount.negative {
color: var(--red);
font-weight: 500;
}
</style>

239
src/lib/components/UsersList.svelte Normal file
View File

@@ -0,0 +1,239 @@
<script>
import ProfilePicture from './ProfilePicture.svelte';
export let users = [];
export let currentUser = '';
export let predefinedMode = false;
export let canRemoveUsers = true;
export let newUser = '';
function addUser() {
if (predefinedMode) return;
if (newUser.trim() && !users.includes(newUser.trim())) {
users = [...users, newUser.trim()];
newUser = '';
}
}
function removeUser(userToRemove) {
if (predefinedMode) return;
if (!canRemoveUsers) return;
if (users.length > 1 && userToRemove !== currentUser) {
users = users.filter(u => u !== userToRemove);
}
}
</script>
<div class="form-section">
<h2>Split Between Users</h2>
{#if predefinedMode}
<div class="predefined-users">
<p class="predefined-note">Splitting between predefined users:</p>
<div class="users-list">
{#each users as user}
<div class="user-item with-profile">
<ProfilePicture username={user} size={32} />
<span class="username">{user}</span>
{#if user === currentUser}
<span class="you-badge">You</span>
{/if}
</div>
{/each}
</div>
</div>
{:else}
<div class="users-list">
{#each users as user}
<div class="user-item with-profile">
<ProfilePicture username={user} size={32} />
<span class="username">{user}</span>
{#if user === currentUser}
<span class="you-badge">You</span>
{/if}
{#if canRemoveUsers && user !== currentUser}
<button type="button" class="remove-user" on:click={() => removeUser(user)}>
Remove
</button>
{/if}
</div>
{/each}
</div>
<div class="add-user js-enhanced" style="display: none;">
<input
type="text"
bind:value={newUser}
placeholder="Add user..."
on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
/>
<button type="button" on:click={addUser}>Add User</button>
</div>
{/if}
</div>
<style>
.form-section {
background: var(--nord6);
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
}
.form-section h2 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--nord0);
font-size: 1.25rem;
}
@media (prefers-color-scheme: dark) {
.form-section {
background: var(--nord1);
border-color: var(--nord2);
}
.form-section h2 {
color: var(--font-default-dark);
}
}
.users-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.user-item {
display: flex;
align-items: center;
gap: 0.5rem;
background-color: var(--nord5);
padding: 0.5rem 0.75rem;
border-radius: 1rem;
border: 1px solid var(--nord4);
}
@media (prefers-color-scheme: dark) {
.user-item {
background-color: var(--nord2);
border-color: var(--nord3);
}
}
.user-item.with-profile {
gap: 0.75rem;
}
.user-item .username {
font-weight: 500;
color: var(--nord0);
}
@media (prefers-color-scheme: dark) {
.user-item .username {
color: var(--font-default-dark);
}
}
.you-badge {
background-color: var(--blue);
color: white;
padding: 0.125rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: 500;
}
.predefined-users {
background-color: var(--nord5);
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid var(--nord4);
}
@media (prefers-color-scheme: dark) {
.predefined-users {
background-color: var(--nord2);
border-color: var(--nord3);
}
}
.predefined-note {
margin: 0 0 1rem 0;
color: var(--nord2);
font-size: 0.9rem;
font-style: italic;
}
@media (prefers-color-scheme: dark) {
.predefined-note {
color: var(--nord4);
}
}
.remove-user {
background-color: var(--red);
color: white;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s;
}
.remove-user:hover {
background-color: var(--nord11);
transform: translateY(-1px);
}
.add-user {
display: flex;
gap: 0.5rem;
}
.add-user input {
flex: 1;
padding: 0.75rem;
border: 1px solid var(--nord4);
border-radius: 0.5rem;
font-size: 1rem;
background-color: var(--nord6);
color: var(--nord0);
box-sizing: border-box;
}
.add-user input:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
}
@media (prefers-color-scheme: dark) {
.add-user input {
background-color: var(--nord2);
color: var(--font-default-dark);
border-color: var(--nord3);
}
}
.add-user button {
background-color: var(--blue);
color: white;
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
}
.add-user button:hover {
background-color: var(--nord10);
transform: translateY(-1px);
}
</style>

145
src/routes/api/cospend/monthly-expenses/+server.ts Normal file
View File

@@ -0,0 +1,145 @@
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { Payment } from '../../../../models/Payment';
import { dbConnect } from '../../../../utils/db';
export const GET: RequestHandler = async ({ url, locals }) => {
const session = await locals.auth();
if (!session || !session.user?.nickname) {
return json({ error: 'Unauthorized' }, { status: 401 });
}
await dbConnect();
try {
// Get query parameters for date range (default to last 12 months)
const monthsBack = parseInt(url.searchParams.get('months') || '12');
const endDate = new Date();
const startDate = new Date();
startDate.setMonth(startDate.getMonth() - monthsBack);
// First, let's get all payments and see what we have
console.log('Searching for payments for user:', session.user.nickname);
console.log('Date range:', startDate.toISOString(), 'to', endDate.toISOString());
const totalPayments = await Payment.countDocuments();
const paymentsInRange = await Payment.countDocuments({
date: {
$gte: startDate,
$lte: endDate
}
});
const expensePayments = await Payment.countDocuments({
date: {
$gte: startDate,
$lte: endDate
},
category: { $ne: 'settlement' },
$or: [
{ paidBy: session.user.nickname },
{ createdBy: session.user.nickname }
]
});
console.log('Total payments:', totalPayments, 'In date range:', paymentsInRange, 'User expenses:', expensePayments);
// Aggregate payments by month and category
const pipeline = [
{
$match: {
date: {
$gte: startDate,
$lte: endDate
},
// Exclude settlements - only show actual expenses
category: { $ne: 'settlement' },
// Only include payments where current user is involved
$or: [
{ paidBy: session.user.nickname },
{ createdBy: session.user.nickname }
]
}
},
{
$addFields: {
// Extract year-month from date
yearMonth: {
$dateToString: {
format: '%Y-%m',
date: '$date'
}
}
}
},
{
$group: {
_id: {
yearMonth: '$yearMonth',
category: '$category'
},
totalAmount: { $sum: '$amount' },
count: { $sum: 1 }
}
},
{
$sort: {
'_id.yearMonth': 1,
'_id.category': 1
}
}
];
const results = await Payment.aggregate(pipeline);
console.log('Aggregation results:', results);
// Transform data into chart-friendly format
const monthsMap = new Map();
const categories = new Set();
// Initialize months
for (let i = 0; i < monthsBack; i++) {
const date = new Date();
date.setMonth(date.getMonth() - monthsBack + i + 1);
const yearMonth = date.toISOString().substring(0, 7);
monthsMap.set(yearMonth, {});
}
// Populate data
results.forEach((result: any) => {
const { yearMonth, category } = result._id;
const amount = result.totalAmount;
categories.add(category);
if (!monthsMap.has(yearMonth)) {
monthsMap.set(yearMonth, {});
}
monthsMap.get(yearMonth)[category] = amount;
});
// Convert to arrays for Chart.js
const months = Array.from(monthsMap.keys()).sort();
const categoryList = Array.from(categories).sort();
const datasets = categoryList.map((category: string) => ({
label: category,
data: months.map(month => monthsMap.get(month)[category] || 0)
}));
return json({
labels: months.map(month => {
const [year, monthNum] = month.split('-');
const date = new Date(parseInt(year), parseInt(monthNum) - 1);
return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
}),
datasets,
categories: categoryList
});
} catch (error) {
console.error('Error fetching monthly expenses:', error);
return json({ error: 'Failed to fetch monthly expenses' }, { status: 500 });
}
};

72
src/routes/cospend/+page.svelte
View File

@@ -5,6 +5,7 @@
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
import EnhancedBalance from '$lib/components/EnhancedBalance.svelte';
import DebtBreakdown from '$lib/components/DebtBreakdown.svelte';
import BarChart from '$lib/components/BarChart.svelte';
import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
import { isSettlementPayment, getSettlementIcon, getSettlementClasses, getSettlementReceiver } from '$lib/utils/settlements';
import AddButton from '$lib/components/AddButton.svelte';
@@ -18,6 +19,8 @@
};
let loading = false; // Start as false since we have server data
let error = null;
let monthlyExpensesData = { labels: [], datasets: [] };
let expensesLoading = false;
// Component references for refreshing
let enhancedBalanceComponent;
@@ -27,7 +30,10 @@
onMount(async () => {
// Mark that JavaScript is loaded for progressive enhancement
document.body.classList.add('js-loaded');
await fetchBalance();
await Promise.all([
fetchBalance(),
fetchMonthlyExpenses()
]);
// Listen for dashboard refresh events from the layout
const handleDashboardRefresh = () => {
@@ -57,10 +63,31 @@
}
}
async function fetchMonthlyExpenses() {
try {
expensesLoading = true;
console.log('Fetching monthly expenses...');
const response = await fetch('/api/cospend/monthly-expenses');
if (!response.ok) {
throw new Error('Failed to fetch monthly expenses');
}
monthlyExpensesData = await response.json();
console.log('Monthly expenses data:', monthlyExpensesData);
} catch (err) {
console.error('Error fetching monthly expenses:', err);
// Don't show this error in the main error state
} finally {
expensesLoading = false;
}
}
// Function to refresh all dashboard components after payment deletion
async function refreshAllComponents() {
// Refresh the main balance and recent activity
await fetchBalance();
await Promise.all([
fetchBalance(),
fetchMonthlyExpenses()
]);
// Refresh the enhanced balance component if it exists and has a refresh method
if (enhancedBalanceComponent && enhancedBalanceComponent.refresh) {
@@ -138,6 +165,25 @@
<DebtBreakdown bind:this={debtBreakdownComponent} />
<!-- Monthly Expenses Chart -->
<div class="chart-section">
{#if expensesLoading}
<div class="loading">Loading monthly expenses chart...</div>
{:else if monthlyExpensesData.datasets && monthlyExpensesData.datasets.length > 0}
<BarChart
data={monthlyExpensesData}
title="Monthly Expenses by Category"
height="400px"
/>
{:else}
<div class="loading">
Debug: expensesLoading={expensesLoading},
datasets={monthlyExpensesData.datasets?.length || 0},
data={JSON.stringify(monthlyExpensesData)}
</div>
{/if}
</div>
{#if loading}
<div class="loading">Loading recent activity...</div>
{:else if error}
@@ -660,4 +706,26 @@
font-size: 1.3rem;
}
}
.chart-section {
margin-bottom: 2rem;
}
.chart-section .loading {
background: var(--nord6);
border-radius: 0.75rem;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
text-align: center;
color: var(--nord2);
}
@media (prefers-color-scheme: dark) {
.chart-section .loading {
background: var(--nord1);
border-color: var(--nord2);
color: var(--nord4);
}
}
</style>

91
src/routes/cospend/payments/+page.svelte
View File

@@ -219,25 +219,6 @@
</div>
{/if}
<div class="payment-actions">
<span class="created-by">Created by {payment.createdBy}</span>
{#if payment.createdBy === data.session.user.nickname}
<div class="action-buttons">
<button
class="btn-edit"
on:click={() => goto(`/cospend/payments/edit/${payment._id}`)}
>
Edit
</button>
<button
class="btn-delete"
on:click={() => deletePayment(payment._id)}
>
Delete
</button>
</div>
{/if}
</div>
</a>
{/each}
</div>
@@ -678,73 +659,6 @@
}
}
.payment-actions {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--nord4);
padding-top: 1rem;
}
.created-by {
font-size: 0.9rem;
color: var(--nord3);
}
@media (prefers-color-scheme: dark) {
.payment-actions {
border-top-color: var(--nord2);
}
.created-by {
color: var(--nord4);
}
}
.action-buttons {
display: flex;
gap: 0.5rem;
}
.btn-edit, .btn-delete {
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
border: none;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
}
.btn-edit {
background-color: var(--nord5);
color: var(--nord0);
border: 1px solid var(--nord4);
}
.btn-edit:hover {
background-color: var(--nord4);
}
.btn-delete {
background-color: var(--red);
color: white;
}
.btn-delete:hover {
background-color: var(--nord11);
}
@media (prefers-color-scheme: dark) {
.btn-edit {
background-color: var(--nord2);
color: var(--font-default-dark);
border-color: var(--nord3);
}
.btn-edit:hover {
background-color: var(--nord3);
}
}
.pagination {
display: flex;
@@ -781,10 +695,5 @@
grid-template-columns: 1fr;
}
.payment-actions {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
</style>

713
src/routes/cospend/payments/add/+page.svelte
View File

@@ -6,6 +6,9 @@
import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
import { validateCronExpression, getFrequencyDescription, calculateNextExecutionDate } from '$lib/utils/recurring';
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
import SplitMethodSelector from '$lib/components/SplitMethodSelector.svelte';
import UsersList from '$lib/components/UsersList.svelte';
import ImageUpload from '$lib/components/ImageUpload.svelte';
export let data;
export let form;
@@ -33,12 +36,12 @@
let imageFile = null;
let imagePreview = '';
let uploading = false;
let newUser = '';
let splitAmounts = {};
let personalAmounts = {};
let loading = false;
let error = form?.error || null;
let personalTotalError = false;
let predefinedMode = data.predefinedUsers.length > 0;
let jsEnhanced = false;
let cronError = false;
@@ -109,54 +112,19 @@
}
});
function handleImageChange(event) {
const file = event.target.files[0];
if (file) {
if (file.size > 5 * 1024 * 1024) {
alert('File size must be less than 5MB');
return;
}
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
alert('Please select a valid image file (JPEG, PNG, WebP)');
return;
}
imageFile = file;
const reader = new FileReader();
reader.onload = (e) => {
imagePreview = e.target.result;
};
reader.readAsDataURL(file);
}
function handleImageSelected(event) {
imageFile = event.detail;
}
function removeImage() {
function handleImageError(event) {
error = event.detail;
}
function handleImageRemoved() {
imageFile = null;
imagePreview = '';
}
function addUser() {
if (predefinedMode) return; // No adding users in predefined mode
if (newUser.trim() && !users.includes(newUser.trim())) {
users = [...users, newUser.trim()];
addSplitForUser(newUser.trim());
newUser = '';
}
}
function removeUser(userToRemove) {
if (predefinedMode) return; // No removing users in predefined mode
if (users.length > 1 && userToRemove !== data.session.user.nickname) {
users = users.filter(u => u !== userToRemove);
delete splitAmounts[userToRemove];
splitAmounts = { ...splitAmounts };
}
}
function addSplitForUser(username) {
if (!splitAmounts[username]) {
splitAmounts[username] = 0;
@@ -164,89 +132,10 @@
}
}
function calculateEqualSplits() {
if (!formData.amount || users.length === 0) return;
const amountNum = parseFloat(formData.amount);
const splitAmount = amountNum / users.length;
users.forEach(user => {
if (user === formData.paidBy) {
splitAmounts[user] = splitAmount - amountNum; // They get negative (they're owed)
} else {
splitAmounts[user] = splitAmount; // They owe positive amount
}
});
splitAmounts = { ...splitAmounts };
}
function calculateFullPayment() {
if (!formData.amount) return;
const amountNum = parseFloat(formData.amount);
const otherUsers = users.filter(user => user !== formData.paidBy);
const amountPerOtherUser = otherUsers.length > 0 ? amountNum / otherUsers.length : 0;
users.forEach(user => {
if (user === formData.paidBy) {
splitAmounts[user] = -amountNum; // They paid it all, so they're owed the full amount
} else {
splitAmounts[user] = amountPerOtherUser; // Others owe their share of the full amount
}
});
splitAmounts = { ...splitAmounts };
}
function calculatePersonalEqualSplit() {
if (!formData.amount || users.length === 0) return;
const totalAmount = parseFloat(formData.amount);
// Calculate total personal amounts
const totalPersonal = users.reduce((sum, user) => {
return sum + (parseFloat(personalAmounts[user]) || 0);
}, 0);
// Remaining amount to be split equally
const remainder = Math.max(0, totalAmount - totalPersonal);
const equalShare = remainder / users.length;
users.forEach(user => {
const personalAmount = parseFloat(personalAmounts[user]) || 0;
const totalOwed = personalAmount + equalShare;
if (user === formData.paidBy) {
// Person who paid gets back what others owe minus what they personally used
splitAmounts[user] = totalOwed - totalAmount;
} else {
// Others owe their personal amount + equal share
splitAmounts[user] = totalOwed;
}
});
splitAmounts = { ...splitAmounts };
}
function handleSplitMethodChange() {
if (formData.splitMethod === 'equal') {
calculateEqualSplits();
} else if (formData.splitMethod === 'full') {
calculateFullPayment();
} else if (formData.splitMethod === 'personal_equal') {
calculatePersonalEqualSplit();
} else if (formData.splitMethod === 'proportional') {
// For proportional, user enters amounts manually - just ensure all users have entries
users.forEach(user => {
if (!(user in splitAmounts)) {
splitAmounts[user] = 0;
}
});
splitAmounts = { ...splitAmounts };
}
}
async function uploadImage() {
if (!imageFile) return null;
uploading = true;
const formData = new FormData();
formData.append('image', imageFile);
@@ -265,6 +154,8 @@
} catch (err) {
console.error('Image upload failed:', err);
return null;
} finally {
uploading = false;
}
}
@@ -274,16 +165,6 @@
return;
}
// Validate personal amounts for personal_equal split
if (formData.splitMethod === 'personal_equal') {
const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
const totalAmount = parseFloat(formData.amount);
if (totalPersonal > totalAmount) {
error = 'Personal amounts cannot exceed the total payment amount';
return;
}
}
if (users.length === 0) {
error = 'Please add at least one user to split with';
@@ -336,20 +217,6 @@
}
}
$: if (formData.amount && formData.splitMethod && formData.paidBy) {
handleSplitMethodChange();
}
// Validate and recalculate when personal amounts change
$: if (formData.splitMethod === 'personal_equal' && personalAmounts && formData.amount) {
const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
const totalAmount = parseFloat(formData.amount);
personalTotalError = totalPersonal > totalAmount;
if (!personalTotalError) {
calculatePersonalEqualSplit();
}
}
function validateCron() {
if (recurringData.frequency !== 'custom') {
@@ -569,189 +436,54 @@
</div>
{/if}
<div class="form-section">
<h2>Receipt Image</h2>
{#if imagePreview}
<div class="image-preview">
<img src={imagePreview} alt="Receipt preview" />
<button type="button" class="remove-image" on:click={removeImage}>
Remove Image
</button>
</div>
{:else}
<div class="image-upload">
<label for="image" class="upload-label">
<div class="upload-content">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/>
<line x1="16" y1="5" x2="22" y2="5"/>
<line x1="19" y1="2" x2="19" y2="8"/>
</svg>
<p>Upload Receipt Image</p>
<small>JPEG, PNG, WebP (max 5MB)</small>
</div>
</label>
<input
type="file"
id="image"
accept="image/jpeg,image/jpg,image/png,image/webp"
on:change={handleImageChange}
hidden
/>
</div>
{/if}
<ImageUpload
bind:imagePreview={imagePreview}
bind:imageFile={imageFile}
bind:uploading={uploading}
on:imageSelected={handleImageSelected}
on:imageRemoved={handleImageRemoved}
on:error={handleImageError}
/>
<UsersList
bind:users={users}
bind:newUser={newUser}
currentUser={data.session?.user?.nickname || data.currentUser}
predefinedMode={predefinedMode}
canRemoveUsers={!predefinedMode}
/>
<!-- Server-side fallback: simple text inputs for users -->
<div class="manual-users no-js-only">
<p>Enter users to split with (one per line):</p>
<textarea
name="users_manual"
placeholder="{data.currentUser}&#10;Enter additional users..."
rows="4"
>{data.currentUser}</textarea>
</div>
<div class="form-section">
<h2>Split Between Users</h2>
{#if predefinedMode}
<div class="predefined-users">
<p class="predefined-note">Splitting between predefined users:</p>
<div class="users-list">
{#each users as user}
<div class="user-item with-profile">
<ProfilePicture username={user} size={32} />
<span class="username">{user}</span>
{#if user === data.session?.user?.nickname}
<span class="you-badge">You</span>
{/if}
</div>
{/each}
</div>
</div>
{:else}
<div class="users-list">
{#each users as user}
<div class="user-item with-profile">
<ProfilePicture username={user} size={32} />
<span class="username">{user}</span>
{#if user !== data.session.user.nickname}
<button type="button" class="remove-user" on:click={() => removeUser(user)}>
Remove
</button>
{/if}
</div>
{/each}
</div>
<!-- Hidden inputs for JavaScript-managed users -->
{#if predefinedMode}
{#each data.predefinedUsers as user, i}
<input type="hidden" name="user_{i}" value={user} />
{/each}
{:else}
{#each users as user, i}
<input type="hidden" name="user_{i}" value={user} />
{/each}
{/if}
<div class="add-user js-enhanced" style="display: none;">
<input
type="text"
bind:value={newUser}
placeholder="Add user..."
on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
/>
<button type="button" on:click={addUser}>Add User</button>
</div>
<!-- Server-side fallback: simple text inputs for users -->
<div class="manual-users no-js-only">
<p>Enter users to split with (one per line):</p>
<textarea
name="users_manual"
placeholder="{data.currentUser}&#10;Enter additional users..."
rows="4"
>{data.currentUser}</textarea>
</div>
{/if}
<!-- Hidden inputs for JavaScript-managed users -->
{#if predefinedMode}
{#each data.predefinedUsers as user, i}
<input type="hidden" name="user_{i}" value={user} />
{/each}
{:else}
{#each users as user, i}
<input type="hidden" name="user_{i}" value={user} />
{/each}
{/if}
</div>
<div class="form-section">
<h2>Split Method</h2>
<div class="form-group">
<label for="splitMethod">How should this payment be split?</label>
<select id="splitMethod" name="splitMethod" bind:value={formData.splitMethod} required>
<option value="equal">{predefinedMode && users.length === 2 ? 'Split 50/50' : 'Equal Split'}</option>
<option value="personal_equal">Personal + Equal Split</option>
<option value="full">{paidInFullText}</option>
<option value="proportional">Custom Proportions</option>
</select>
</div>
{#if formData.splitMethod === 'proportional'}
<div class="proportional-splits">
<h3>Custom Split Amounts</h3>
{#each users as user}
<div class="split-input">
<label>{user}</label>
<input
type="number"
step="0.01"
name="split_{user}"
bind:value={splitAmounts[user]}
placeholder="0.00"
/>
</div>
{/each}
</div>
{/if}
{#if formData.splitMethod === 'personal_equal'}
<div class="personal-splits">
<h3>Personal Amounts</h3>
<p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
{#each users as user}
<div class="split-input">
<label>{user}</label>
<input
type="number"
step="0.01"
min="0"
name="personal_{user}"
bind:value={personalAmounts[user]}
placeholder="0.00"
/>
</div>
{/each}
{#if formData.amount}
<div class="remainder-info" class:error={personalTotalError}>
<span>Total Personal: CHF {Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0).toFixed(2)}</span>
<span>Remainder to Split: CHF {Math.max(0, parseFloat(formData.amount) - Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0)).toFixed(2)}</span>
{#if personalTotalError}
<div class="error-message">⚠️ Personal amounts exceed total payment amount!</div>
{/if}
</div>
{/if}
</div>
{/if}
{#if Object.keys(splitAmounts).length > 0}
<div class="split-preview">
<h3>Split Preview</h3>
{#each users as user}
<div class="split-item">
<div class="split-user">
<ProfilePicture username={user} size={24} />
<span class="username">{user}</span>
</div>
<span class="amount" class:positive={splitAmounts[user] < 0} class:negative={splitAmounts[user] > 0}>
{#if splitAmounts[user] > 0}
owes CHF {splitAmounts[user].toFixed(2)}
{:else if splitAmounts[user] < 0}
is owed CHF {Math.abs(splitAmounts[user]).toFixed(2)}
{:else}
owes CHF {splitAmounts[user].toFixed(2)}
{/if}
</span>
</div>
{/each}
</div>
{/if}
</div>
<SplitMethodSelector
bind:splitMethod={formData.splitMethod}
bind:splitAmounts={splitAmounts}
bind:personalAmounts={personalAmounts}
{users}
amount={formData.amount}
paidBy={formData.paidBy}
currentUser={data.session?.user?.nickname || data.currentUser}
{predefinedMode}
/>
{#if error}
<div class="error">{error}</div>
@@ -882,283 +614,9 @@
}
}
.image-upload {
border: 2px dashed var(--nord4);
border-radius: 0.5rem;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background-color: var(--nord5);
}
.image-upload:hover {
border-color: var(--blue);
background-color: var(--nord4);
}
@media (prefers-color-scheme: dark) {
.image-upload {
background-color: var(--nord2);
border-color: var(--nord3);
}
.image-upload:hover {
background-color: var(--nord3);
}
}
.upload-label {
cursor: pointer;
display: block;
}
.upload-content svg {
color: var(--nord3);
margin-bottom: 1rem;
}
.upload-content p {
margin: 0 0 0.5rem 0;
font-weight: 500;
color: var(--nord0);
}
.upload-content small {
color: var(--nord3);
}
@media (prefers-color-scheme: dark) {
.upload-content svg {
color: var(--nord4);
}
.upload-content p {
color: var(--font-default-dark);
}
.upload-content small {
color: var(--nord4);
}
}
.image-preview {
text-align: center;
}
.image-preview img {
max-width: 100%;
max-height: 300px;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.remove-image {
background-color: var(--red);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s;
}
.remove-image:hover {
background-color: var(--nord11);
transform: translateY(-1px);
}
.users-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.user-item {
display: flex;
align-items: center;
gap: 0.5rem;
background-color: var(--nord5);
padding: 0.5rem 0.75rem;
border-radius: 1rem;
border: 1px solid var(--nord4);
}
@media (prefers-color-scheme: dark) {
.user-item {
background-color: var(--nord2);
border-color: var(--nord3);
}
}
.user-item.with-profile {
gap: 0.75rem;
}
.user-item .username {
font-weight: 500;
color: var(--nord0);
}
.you-badge {
background-color: var(--blue);
color: white;
padding: 0.125rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: 500;
}
@media (prefers-color-scheme: dark) {
.user-item .username {
color: var(--font-default-dark);
}
}
.predefined-users {
background-color: var(--nord5);
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid var(--nord4);
}
.predefined-note {
margin: 0 0 1rem 0;
color: var(--nord2);
font-size: 0.9rem;
font-style: italic;
}
@media (prefers-color-scheme: dark) {
.predefined-users {
background-color: var(--nord2);
border-color: var(--nord3);
}
.predefined-note {
color: var(--nord4);
}
}
.remove-user {
background-color: var(--red);
color: white;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s;
}
.remove-user:hover {
background-color: var(--nord11);
transform: translateY(-1px);
}
.add-user {
display: flex;
gap: 0.5rem;
}
.add-user input {
flex: 1;
}
.add-user button {
background-color: var(--blue);
color: white;
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
}
.add-user button:hover {
background-color: var(--nord10);
transform: translateY(-1px);
}
.proportional-splits {
border: 1px solid var(--nord4);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
background-color: var(--nord5);
}
@media (prefers-color-scheme: dark) {
.proportional-splits {
border-color: var(--nord3);
background-color: var(--nord2);
}
}
.proportional-splits h3 {
margin-top: 0;
margin-bottom: 1rem;
}
.split-input {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.split-input label {
min-width: 100px;
margin-bottom: 0;
}
.split-input input {
max-width: 120px;
}
.split-preview {
background-color: var(--nord5);
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid var(--nord4);
}
@media (prefers-color-scheme: dark) {
.split-preview {
background-color: var(--nord2);
border-color: var(--nord3);
}
}
.split-preview h3 {
margin-top: 0;
margin-bottom: 1rem;
}
.split-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.split-user {
display: flex;
align-items: center;
gap: 0.5rem;
}
.amount.positive {
color: var(--green);
font-weight: 500;
}
.amount.negative {
color: var(--red);
font-weight: 500;
}
.error {
background-color: var(--nord6);
@@ -1232,59 +690,6 @@
}
}
.personal-splits {
margin-top: 1rem;
}
.personal-splits .description {
color: var(--nord2);
font-size: 0.9rem;
margin-bottom: 1rem;
font-style: italic;
}
@media (prefers-color-scheme: dark) {
.personal-splits .description {
color: var(--nord4);
}
}
.remainder-info {
margin-top: 1rem;
padding: 1rem;
background-color: var(--nord5);
border-radius: 0.5rem;
border: 1px solid var(--nord4);
}
.remainder-info.error {
background-color: var(--nord6);
border-color: var(--red);
}
@media (prefers-color-scheme: dark) {
.remainder-info {
background-color: var(--nord2);
border-color: var(--nord3);
}
.remainder-info.error {
background-color: var(--accent-dark);
}
}
.remainder-info span {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.error-message {
color: var(--red);
font-weight: 600;
margin-top: 0.5rem;
font-size: 0.9rem;
}
/* Progressive enhancement styles */
.no-js-only {

181
src/routes/cospend/payments/edit/[id]/+page.svelte
View File

@@ -2,6 +2,8 @@
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { getCategoryOptions } from '$lib/utils/categories';
import FormSection from '$lib/components/FormSection.svelte';
import ImageUpload from '$lib/components/ImageUpload.svelte';
export let data;
@@ -11,6 +13,7 @@
let uploading = false;
let error = null;
let imageFile = null;
let imagePreview = '';
$: categoryOptions = getCategoryOptions();
@@ -33,6 +36,24 @@
}
}
function handleImageSelected(event) {
imageFile = event.detail;
handleImageUpload();
}
function handleImageError(event) {
error = event.detail;
}
function handleImageRemoved() {
imageFile = null;
imagePreview = '';
}
function handleCurrentImageRemoved() {
payment.image = null;
}
async function handleImageUpload() {
if (!imageFile) return;
@@ -53,6 +74,7 @@
const result = await response.json();
payment.image = result.imageUrl;
imageFile = null;
imagePreview = '';
} catch (err) {
error = err.message;
} finally {
@@ -60,18 +82,6 @@
}
}
function handleImageRemove() {
payment.image = null;
}
function handleFileChange(event) {
const file = event.target.files[0];
if (file) {
imageFile = file;
handleImageUpload();
}
}
async function handleSubmit() {
if (!payment) return;
@@ -147,9 +157,7 @@
<div class="error">Error: {error}</div>
{:else if payment}
<form on:submit|preventDefault={handleSubmit} class="payment-form">
<div class="form-section">
<h2>Payment Details</h2>
<FormSection title="Payment Details">
<div class="form-group">
<label for="title">Title *</label>
<input
@@ -212,43 +220,21 @@
required
/>
</div>
</div>
</FormSection>
<div class="form-section">
<h2>Receipt Image</h2>
{#if payment.image}
<div class="current-image">
<img src={payment.image} alt="Receipt" class="receipt-preview" />
<div class="image-actions">
<button type="button" class="btn-remove" on:click={handleImageRemove}>
Remove Image
</button>
</div>
</div>
{/if}
<div class="form-group">
<label for="imageUpload" class="upload-label">
{payment.image ? 'Replace Image' : 'Upload Receipt Image'}
</label>
<input
type="file"
id="imageUpload"
accept="image/*"
on:change={handleFileChange}
disabled={uploading}
class="file-input"
/>
{#if uploading}
<div class="upload-status">Uploading image...</div>
{/if}
</div>
</div>
<ImageUpload
bind:imagePreview={imagePreview}
bind:imageFile={imageFile}
bind:uploading={uploading}
currentImage={payment.image}
on:imageSelected={handleImageSelected}
on:imageRemoved={handleImageRemoved}
on:currentImageRemoved={handleCurrentImageRemoved}
on:error={handleImageError}
/>
{#if payment.splits && payment.splits.length > 0}
<div class="form-section">
<h2>Current Splits</h2>
<FormSection title="Current Splits">
<div class="splits-display">
{#each payment.splits as split}
<div class="split-item">
@@ -266,7 +252,7 @@
{/each}
</div>
<p class="note">Note: To modify splits, please delete and recreate the payment.</p>
</div>
</FormSection>
{/if}
<div class="form-actions">
@@ -551,101 +537,6 @@
cursor: not-allowed;
}
.current-image {
margin-bottom: 1rem;
text-align: center;
}
.receipt-preview {
max-width: 200px;
max-height: 200px;
object-fit: cover;
border-radius: 0.5rem;
border: 1px solid var(--nord4);
margin-bottom: 0.75rem;
display: block;
margin-left: auto;
margin-right: auto;
}
@media (prefers-color-scheme: dark) {
.receipt-preview {
border-color: var(--nord2);
}
}
.image-actions {
display: flex;
justify-content: center;
}
.btn-remove {
background-color: var(--red);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
}
.btn-remove:hover {
background-color: var(--nord11);
transform: translateY(-1px);
}
.upload-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--nord2);
cursor: pointer;
}
@media (prefers-color-scheme: dark) {
.upload-label {
color: var(--nord5);
}
}
.file-input {
width: 100%;
padding: 0.75rem;
border: 2px dashed var(--nord4);
border-radius: 0.5rem;
background-color: var(--nord5);
cursor: pointer;
transition: all 0.2s;
}
.file-input:hover {
border-color: var(--blue);
background-color: var(--nord4);
}
@media (prefers-color-scheme: dark) {
.file-input {
background-color: var(--nord2);
border-color: var(--nord3);
}
.file-input:hover {
background-color: var(--nord3);
}
}
.file-input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.upload-status {
margin-top: 0.5rem;
color: var(--blue);
font-size: 0.9rem;
text-align: center;
}
@media (max-width: 600px) {
.edit-payment {

534
src/routes/cospend/recurring/edit/[id]/+page.svelte
View File

@@ -5,6 +5,8 @@
import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
import { validateCronExpression, getFrequencyDescription, calculateNextExecutionDate } from '$lib/utils/recurring';
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
import SplitMethodSelector from '$lib/components/SplitMethodSelector.svelte';
import UsersList from '$lib/components/UsersList.svelte';
export let data;
@@ -30,7 +32,6 @@
let loading = false;
let loadingPayment = true;
let error = null;
let personalTotalError = false;
let predefinedMode = isPredefinedUsersMode();
let cronError = false;
let nextExecutionPreview = '';
@@ -86,28 +87,6 @@
}
}
function addUser() {
if (predefinedMode) return;
if (newUser.trim() && !users.includes(newUser.trim())) {
users = [...users, newUser.trim()];
addSplitForUser(newUser.trim());
newUser = '';
}
}
function removeUser(userToRemove) {
if (predefinedMode) return;
if (users.length > 1) {
users = users.filter(u => u !== userToRemove);
delete splitAmounts[userToRemove];
delete personalAmounts[userToRemove];
splitAmounts = { ...splitAmounts };
personalAmounts = { ...personalAmounts };
}
}
function addSplitForUser(username) {
if (!splitAmounts[username]) {
splitAmounts[username] = 0;
@@ -115,74 +94,6 @@
}
}
function calculateEqualSplits() {
if (!formData.amount || users.length === 0) return;
const amountNum = parseFloat(formData.amount);
const splitAmount = amountNum / users.length;
users.forEach(user => {
if (user === formData.paidBy) {
splitAmounts[user] = splitAmount - amountNum;
} else {
splitAmounts[user] = splitAmount;
}
});
splitAmounts = { ...splitAmounts };
}
function calculateFullPayment() {
if (!formData.amount) return;
const amountNum = parseFloat(formData.amount);
const otherUsers = users.filter(user => user !== formData.paidBy);
const amountPerOtherUser = otherUsers.length > 0 ? amountNum / otherUsers.length : 0;
users.forEach(user => {
if (user === formData.paidBy) {
splitAmounts[user] = -amountNum; // They paid it all, so they're owed the full amount
} else {
splitAmounts[user] = amountPerOtherUser; // Others owe their share of the full amount
}
});
splitAmounts = { ...splitAmounts };
}
function calculatePersonalEqualSplit() {
if (!formData.amount || users.length === 0) return;
const totalAmount = parseFloat(formData.amount);
const totalPersonal = users.reduce((sum, user) => {
return sum + (parseFloat(personalAmounts[user]) || 0);
}, 0);
const remainder = Math.max(0, totalAmount - totalPersonal);
const equalShare = remainder / users.length;
users.forEach(user => {
const personalAmount = parseFloat(personalAmounts[user]) || 0;
const totalOwed = personalAmount + equalShare;
if (user === formData.paidBy) {
splitAmounts[user] = totalOwed - totalAmount;
} else {
splitAmounts[user] = totalOwed;
}
});
splitAmounts = { ...splitAmounts };
}
function handleSplitMethodChange() {
if (formData.splitMethod === 'equal') {
calculateEqualSplits();
} else if (formData.splitMethod === 'full') {
calculateFullPayment();
} else if (formData.splitMethod === 'personal_equal') {
calculatePersonalEqualSplit();
}
}
function validateCron() {
if (formData.frequency !== 'custom') {
cronError = false;
@@ -224,15 +135,6 @@
return;
}
if (formData.splitMethod === 'personal_equal') {
const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
const totalAmount = parseFloat(formData.amount);
if (totalPersonal > totalAmount) {
error = 'Personal amounts cannot exceed the total payment amount';
return;
}
}
if (users.length === 0) {
error = 'Please add at least one user to split with';
@@ -282,19 +184,6 @@
}
}
$: if (formData.amount && formData.splitMethod && formData.paidBy && !loadingPayment) {
handleSplitMethodChange();
}
$: if (formData.splitMethod === 'personal_equal' && personalAmounts && formData.amount && !loadingPayment) {
const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
const totalAmount = parseFloat(formData.amount);
personalTotalError = totalPersonal > totalAmount;
if (!personalTotalError) {
calculatePersonalEqualSplit();
}
}
$: if (formData.cronExpression) {
validateCron();
@@ -460,129 +349,24 @@
{/if}
</div>
<div class="form-section">
<h2>Split Between Users</h2>
<div class="users-list">
{#each users as user}
<div class="user-item with-profile">
<ProfilePicture username={user} size={32} />
<span class="username">{user}</span>
{#if user === data.session?.user?.nickname}
<span class="you-badge">You</span>
{/if}
{#if !predefinedMode && user !== data.session?.user?.nickname}
<button type="button" class="remove-user" on:click={() => removeUser(user)}>
Remove
</button>
{/if}
</div>
{/each}
</div>
<UsersList
bind:users={users}
bind:newUser={newUser}
currentUser={data.session?.user?.nickname}
{predefinedMode}
canRemoveUsers={!predefinedMode}
/>
{#if !predefinedMode}
<div class="add-user">
<input
type="text"
bind:value={newUser}
placeholder="Add user..."
on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
/>
<button type="button" on:click={addUser}>Add User</button>
</div>
{/if}
</div>
<div class="form-section">
<h2>Split Method</h2>
<div class="split-method">
<label>
<input type="radio" bind:group={formData.splitMethod} value="equal" />
Equal Split
</label>
<label>
<input type="radio" bind:group={formData.splitMethod} value="personal_equal" />
Personal + Equal Split
</label>
<label>
<input type="radio" bind:group={formData.splitMethod} value="full" />
Paid in Full by {formData.paidBy}
</label>
<label>
<input type="radio" bind:group={formData.splitMethod} value="proportional" />
Custom Proportions
</label>
</div>
{#if formData.splitMethod === 'proportional'}
<div class="proportional-splits">
<h3>Custom Split Amounts</h3>
{#each users as user}
<div class="split-input">
<label>{user}</label>
<input
type="number"
step="0.01"
bind:value={splitAmounts[user]}
placeholder="0.00"
/>
</div>
{/each}
</div>
{/if}
{#if formData.splitMethod === 'personal_equal'}
<div class="personal-splits">
<h3>Personal Amounts</h3>
<p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
{#each users as user}
<div class="split-input">
<label>{user}</label>
<input
type="number"
step="0.01"
min="0"
bind:value={personalAmounts[user]}
placeholder="0.00"
/>
</div>
{/each}
{#if formData.amount}
<div class="remainder-info" class:error={personalTotalError}>
<span>Total Personal: CHF {Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0).toFixed(2)}</span>
<span>Remainder to Split: CHF {Math.max(0, parseFloat(formData.amount) - Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0)).toFixed(2)}</span>
{#if personalTotalError}
<div class="error-message">⚠️ Personal amounts exceed total payment amount!</div>
{/if}
</div>
{/if}
</div>
{/if}
{#if Object.keys(splitAmounts).length > 0}
<div class="split-preview">
<h3>Split Preview</h3>
{#each users as user}
<div class="split-item">
<div class="split-user">
<ProfilePicture username={user} size={24} />
<span class="username">{user}</span>
</div>
<span class="amount" class:positive={splitAmounts[user] < 0} class:negative={splitAmounts[user] > 0}>
{#if splitAmounts[user] > 0}
owes CHF {splitAmounts[user].toFixed(2)}
{:else if splitAmounts[user] < 0}
is owed CHF {Math.abs(splitAmounts[user]).toFixed(2)}
{:else}
owes CHF {splitAmounts[user].toFixed(2)}
{/if}
</span>
</div>
{/each}
</div>
{/if}
</div>
<SplitMethodSelector
bind:splitMethod={formData.splitMethod}
bind:splitAmounts={splitAmounts}
bind:personalAmounts={personalAmounts}
{users}
amount={formData.amount}
paidBy={formData.paidBy}
currentUser={data.session?.user?.nickname}
{predefinedMode}
/>
{#if error}
<div class="error">{error}</div>
@@ -616,11 +400,11 @@
.header h1 {
margin: 0;
color: #333;
color: var(--nord0);
}
.back-link {
color: #1976d2;
color: var(--blue);
text-decoration: none;
}
@@ -637,16 +421,17 @@
}
.form-section {
background: white;
background: var(--nord6);
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
}
.form-section h2 {
margin-top: 0;
margin-bottom: 1rem;
color: #333;
color: var(--nord0);
font-size: 1.25rem;
}
@@ -664,39 +449,42 @@
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #555;
color: var(--nord3);
}
input, textarea, select {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border: 1px solid var(--nord4);
border-radius: 0.5rem;
font-size: 1rem;
box-sizing: border-box;
background: var(--nord5);
color: var(--nord0);
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #1976d2;
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
}
input.error {
border-color: #d32f2f;
border-color: var(--red);
}
.help-text {
margin-top: 0.5rem;
color: #666;
color: var(--nord3);
font-size: 0.9rem;
}
.help-text code {
background-color: #f5f5f5;
background-color: var(--nord5);
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-family: monospace;
color: var(--nord0);
}
.help-text ul {
@@ -709,14 +497,14 @@
}
.field-error {
color: #d32f2f;
color: var(--red);
font-size: 0.875rem;
margin-top: 0.25rem;
}
.execution-preview {
background-color: #e3f2fd;
border: 1px solid #2196f3;
background-color: var(--nord8);
border: 1px solid var(--blue);
border-radius: 0.5rem;
padding: 1rem;
margin-top: 1rem;
@@ -724,200 +512,34 @@
.execution-preview h3 {
margin: 0 0 0.5rem 0;
color: #1976d2;
color: var(--blue);
font-size: 1rem;
}
.next-execution {
font-size: 1.1rem;
font-weight: 600;
color: #1976d2;
color: var(--blue);
margin: 0.5rem 0;
}
.frequency-description {
color: #666;
color: var(--nord3);
font-size: 0.9rem;
margin: 0;
font-style: italic;
}
.users-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.user-item {
display: flex;
align-items: center;
gap: 0.5rem;
background-color: #f5f5f5;
padding: 0.5rem 0.75rem;
border-radius: 1rem;
}
.user-item.with-profile {
gap: 0.75rem;
}
.user-item .username {
font-weight: 500;
}
.you-badge {
background-color: #1976d2;
color: white;
padding: 0.125rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: 500;
}
.remove-user {
background-color: #d32f2f;
color: white;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
cursor: pointer;
}
.add-user {
display: flex;
gap: 0.5rem;
}
.add-user input {
flex: 1;
}
.add-user button {
background-color: #1976d2;
color: white;
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
}
.split-method {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.split-method label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.proportional-splits, .personal-splits {
border: 1px solid #ddd;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
}
.proportional-splits h3, .personal-splits h3 {
margin-top: 0;
margin-bottom: 1rem;
}
.personal-splits .description {
color: #666;
font-size: 0.9rem;
margin-bottom: 1rem;
font-style: italic;
}
.split-input {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.split-input label {
min-width: 100px;
margin-bottom: 0;
}
.split-input input {
max-width: 120px;
}
.remainder-info {
margin-top: 1rem;
padding: 1rem;
background-color: #f8f9fa;
border-radius: 0.5rem;
border: 1px solid #e9ecef;
}
.remainder-info.error {
background-color: #fff5f5;
border-color: #fed7d7;
}
.remainder-info span {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.error-message {
color: #d32f2f;
font-weight: 600;
margin-top: 0.5rem;
font-size: 0.9rem;
}
.split-preview {
background-color: #f8f9fa;
padding: 1rem;
border-radius: 0.5rem;
}
.split-preview h3 {
margin-top: 0;
margin-bottom: 1rem;
}
.split-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.split-user {
display: flex;
align-items: center;
gap: 0.5rem;
}
.amount.positive {
color: #2e7d32;
font-weight: 500;
}
.amount.negative {
color: #d32f2f;
font-weight: 500;
}
.error {
background-color: #ffebee;
color: #d32f2f;
background-color: var(--nord6);
color: var(--red);
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
border: 1px solid var(--red);
}
.form-actions {
@@ -935,13 +557,13 @@
}
.btn-primary {
background-color: #1976d2;
background-color: var(--blue);
color: white;
border: none;
}
.btn-primary:hover:not(:disabled) {
background-color: #1565c0;
background-color: var(--lightblue);
}
.btn-primary:disabled {
@@ -950,13 +572,71 @@
}
.btn-secondary {
background-color: #f5f5f5;
color: #333;
border: 1px solid #ddd;
background-color: var(--nord5);
color: var(--nord0);
border: 1px solid var(--nord4);
}
.btn-secondary:hover {
background-color: #e8e8e8;
background-color: var(--nord4);
}
@media (prefers-color-scheme: dark) {
.header h1 {
color: var(--font-default-dark);
}
.form-section {
background: var(--accent-dark);
border-color: var(--nord2);
}
.form-section h2 {
color: var(--font-default-dark);
}
label {
color: var(--nord4);
}
input, textarea, select {
background: var(--nord1);
color: var(--font-default-dark);
border-color: var(--nord2);
}
input:focus, textarea:focus, select:focus {
box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
}
.help-text {
color: var(--nord4);
}
.help-text code {
background-color: var(--nord1);
color: var(--font-default-dark);
}
.execution-preview {
background-color: var(--nord2);
border-color: var(--blue);
}
.error {
background-color: var(--accent-dark);
}
.btn-secondary {
background-color: var(--nord1);
color: var(--font-default-dark);
border-color: var(--nord2);
}
.btn-secondary:hover {
background-color: var(--nord2);
}
}
@media (max-width: 600px) {

136
src/routes/cospend/settle/+page.server.ts
View File

@@ -1,13 +1,133 @@
import type { PageServerLoad } from './$types';
import { redirect } from '@sveltejs/kit';
import { fail, redirect } from '@sveltejs/kit';
import type { PageServerLoad, Actions } from './$types';
export const load: PageServerLoad = async ({ locals }) => {
const auth = await locals.auth();
if (!auth || !auth.user) {
export const load: PageServerLoad = async ({ fetch, locals, request }) => {
const session = await locals.auth();
if (!session) {
throw redirect(302, '/login');
}
return {
session: auth
};
try {
// Fetch debt data server-side with authentication cookies
const response = await fetch('/api/cospend/debts', {
headers: {
'Cookie': request.headers.get('Cookie') || ''
}
});
if (!response.ok) {
throw new Error('Failed to fetch debt data');
}
const debtData = await response.json();
return {
debtData,
session,
currentUser: session.user?.nickname || ''
};
} catch (error) {
console.error('Error loading debt data:', error);
return {
debtData: {
whoOwesMe: [],
whoIOwe: [],
totalOwedToMe: 0,
totalIOwe: 0
},
error: error.message,
session,
currentUser: session.user?.nickname || ''
};
}
}
export const actions: Actions = {
settle: async ({ request, fetch, locals }) => {
const data = await request.formData();
const settlementType = data.get('settlementType');
const fromUser = data.get('fromUser');
const toUser = data.get('toUser');
const amount = parseFloat(data.get('amount'));
// Validation
if (!settlementType || !fromUser || !toUser || !amount) {
return fail(400, {
error: 'All fields are required',
values: {
settlementType,
fromUser,
toUser,
amount: data.get('amount')
}
});
}
if (isNaN(amount) || amount <= 0) {
return fail(400, {
error: 'Please enter a valid positive amount',
values: {
settlementType,
fromUser,
toUser,
amount: data.get('amount')
}
});
}
try {
// Create a settlement payment
const payload = {
title: 'Settlement Payment',
description: `Settlement: ${fromUser} pays ${toUser}`,
amount: amount,
paidBy: fromUser,
date: new Date().toISOString().split('T')[0],
category: 'settlement',
splitMethod: 'full',
splits: [
{
username: fromUser,
amount: -amount // Payer gets negative (receives money back)
},
{
username: toUser,
amount: amount // Receiver owes money
}
]
};
const response = await fetch('/api/cospend/payments', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cookie': request.headers.get('Cookie') || ''
},
body: JSON.stringify(payload)
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Failed to record settlement');
}
// Redirect back to dashboard on success
throw redirect(303, '/cospend');
} catch (error) {
if (error.status === 303) {
throw error; // Re-throw redirect
}
return fail(500, {
error: error.message,
values: {
settlementType,
fromUser,
toUser,
amount: data.get('amount')
}
});
}
}
};

389
src/routes/cospend/settle/+page.svelte
View File

@@ -1,71 +1,60 @@
<script>
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { enhance } from '$app/forms';
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
export let data;
export let form;
let debtData = {
// Use server-side data with progressive enhancement
let debtData = data.debtData || {
whoOwesMe: [],
whoIOwe: [],
totalOwedToMe: 0,
totalIOwe: 0
};
let loading = true;
let error = null;
let loading = false; // Start as false since we have server data
let error = data.error || form?.error || null;
let selectedSettlement = null;
let settlementAmount = '';
let settlementAmount = form?.values?.amount || '';
let submitting = false;
let predefinedMode = isPredefinedUsersMode();
onMount(async () => {
await fetchDebtData();
});
async function fetchDebtData() {
try {
loading = true;
const response = await fetch('/api/cospend/debts');
if (!response.ok) {
throw new Error('Failed to fetch debt data');
}
debtData = await response.json();
// For predefined mode with 2 users, auto-select the debt if there's only one
if (predefinedMode && PREDEFINED_USERS.length === 2) {
const totalDebts = debtData.whoOwesMe.length + debtData.whoIOwe.length;
if (totalDebts === 1) {
if (debtData.whoOwesMe.length === 1) {
selectedSettlement = {
type: 'receive',
from: debtData.whoOwesMe[0].username,
to: data.session?.user?.nickname,
amount: debtData.whoOwesMe[0].netAmount,
description: `Settlement: ${debtData.whoOwesMe[0].username} pays ${data.session?.user?.nickname}`
};
onMount(() => {
// For predefined mode with 2 users, auto-select the debt if there's only one
if (predefinedMode && PREDEFINED_USERS.length === 2) {
const totalDebts = debtData.whoOwesMe.length + debtData.whoIOwe.length;
if (totalDebts === 1) {
if (debtData.whoOwesMe.length === 1) {
selectedSettlement = {
type: 'receive',
from: debtData.whoOwesMe[0].username,
to: data.currentUser,
amount: debtData.whoOwesMe[0].netAmount,
description: `Settlement: ${debtData.whoOwesMe[0].username} pays ${data.currentUser}`
};
if (!settlementAmount) {
settlementAmount = debtData.whoOwesMe[0].netAmount.toString();
} else if (debtData.whoIOwe.length === 1) {
selectedSettlement = {
type: 'pay',
from: data.session?.user?.nickname,
to: debtData.whoIOwe[0].username,
amount: debtData.whoIOwe[0].netAmount,
description: `Settlement: ${data.session?.user?.nickname} pays ${debtData.whoIOwe[0].username}`
};
}
} else if (debtData.whoIOwe.length === 1) {
selectedSettlement = {
type: 'pay',
from: data.currentUser,
to: debtData.whoIOwe[0].username,
amount: debtData.whoIOwe[0].netAmount,
description: `Settlement: ${data.currentUser} pays ${debtData.whoIOwe[0].username}`
};
if (!settlementAmount) {
settlementAmount = debtData.whoIOwe[0].netAmount.toString();
}
}
}
} catch (err) {
error = err.message;
} finally {
loading = false;
}
}
});
function selectSettlement(type, user, amount) {
const currentUser = data.session?.user?.nickname;
const currentUser = data.currentUser;
if (type === 'receive') {
selectedSettlement = {
type: 'receive',
@@ -98,18 +87,18 @@
return;
}
try {
submitting = true;
error = null;
submitting = true;
error = null;
// Create a settlement payment
try {
// Create a settlement payment directly using the API
const payload = {
title: `Settlement Payment`,
title: 'Settlement Payment',
description: selectedSettlement.description,
amount: amount,
paidBy: selectedSettlement.from,
date: new Date().toISOString().split('T')[0],
category: 'settlement', // Using settlement category
category: 'settlement',
splitMethod: 'full',
splits: [
{
@@ -136,11 +125,10 @@
throw new Error(errorData.message || 'Failed to record settlement');
}
// Redirect back to dashboard
goto('/cospend');
// Redirect back to dashboard on success
window.location.href = '/cospend';
} catch (err) {
error = err.message;
} finally {
submitting = false;
}
}
@@ -236,7 +224,7 @@
<div class="user-from">
<ProfilePicture username={selectedSettlement.from} size={48} />
<span class="username">{selectedSettlement.from}</span>
{#if selectedSettlement.from === data.session?.user?.nickname}
{#if selectedSettlement.from === data.currentUser}
<span class="you-badge">You</span>
{/if}
</div>
@@ -244,7 +232,7 @@
<div class="user-to">
<ProfilePicture username={selectedSettlement.to} size={48} />
<span class="username">{selectedSettlement.to}</span>
{#if selectedSettlement.to === data.session?.user?.nickname}
{#if selectedSettlement.to === data.currentUser}
<span class="you-badge">You</span>
{/if}
</div>
@@ -288,12 +276,75 @@
</button>
</div>
</div>
{:else}
<!-- No-JS Fallback Form -->
<div class="settlement-details no-js-fallback">
<h2>Record Settlement</h2>
<form method="POST" action="?/settle" class="settlement-form">
<div class="form-group">
<label for="settlementType">Settlement Type</label>
<select id="settlementType" name="settlementType" required>
<option value="">Select settlement type</option>
{#each debtData.whoOwesMe as debt}
<option value="receive" data-from="{debt.username}" data-to="{data.currentUser}">
Receive {formatCurrency(debt.netAmount)} from {debt.username}
</option>
{/each}
{#each debtData.whoIOwe as debt}
<option value="pay" data-from="{data.currentUser}" data-to="{debt.username}">
Pay {formatCurrency(debt.netAmount)} to {debt.username}
</option>
{/each}
</select>
</div>
<div class="form-group">
<label for="fromUser">From User</label>
<select id="fromUser" name="fromUser" required>
<option value="">Select payer</option>
{#each [...debtData.whoOwesMe.map(d => d.username), data.currentUser].filter(Boolean) as user}
<option value="{user}">{user}{user === data.currentUser ? ' (You)' : ''}</option>
{/each}
</select>
</div>
<div class="form-group">
<label for="toUser">To User</label>
<select id="toUser" name="toUser" required>
<option value="">Select recipient</option>
{#each [...debtData.whoIOwe.map(d => d.username), data.currentUser].filter(Boolean) as user}
<option value="{user}">{user}{user === data.currentUser ? ' (You)' : ''}</option>
{/each}
</select>
</div>
<div class="form-group">
<label for="fallback-amount">Settlement Amount (CHF)</label>
<input
id="fallback-amount"
name="amount"
type="number"
step="0.01"
min="0.01"
value={form?.values?.amount || ''}
placeholder="0.00"
required
/>
</div>
<div class="settlement-actions">
<button type="submit" class="btn btn-settlement">
Record Settlement
</button>
<a href="/cospend" class="btn btn-secondary">
Cancel
</a>
</div>
</form>
</div>
{/if}
</div>
<div class="back-actions">
<a href="/cospend" class="btn btn-secondary">← Back to Dashboard</a>
</div>
{/if}
</main>
@@ -310,12 +361,12 @@
}
.header-section h1 {
color: #333;
color: var(--nord0);
margin-bottom: 0.5rem;
}
.header-section p {
color: #666;
color: var(--nord3);
font-size: 1.1rem;
}
@@ -326,8 +377,8 @@
}
.error {
color: #d32f2f;
background-color: #ffebee;
color: var(--red);
background-color: var(--nord6);
border-radius: 0.5rem;
margin-bottom: 1rem;
}
@@ -335,13 +386,14 @@
.no-debts {
text-align: center;
padding: 3rem 2rem;
background: white;
background: var(--nord6);
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
}
.no-debts h2 {
color: #28a745;
color: var(--green);
margin-bottom: 1rem;
}
@@ -359,10 +411,11 @@
}
.available-settlements {
background: white;
background: var(--nord6);
padding: 1.5rem;
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
}
.settlement-section {
@@ -370,7 +423,7 @@
}
.settlement-section h3 {
color: #333;
color: var(--nord0);
margin-bottom: 1rem;
font-size: 1.1rem;
}
@@ -380,21 +433,22 @@
justify-content: space-between;
align-items: center;
padding: 1rem;
border: 2px solid #e9ecef;
border: 2px solid var(--nord4);
border-radius: 0.75rem;
margin-bottom: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
background: var(--nord5);
}
.settlement-option:hover {
border-color: #28a745;
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
border-color: var(--green);
box-shadow: 0 2px 8px rgba(163, 190, 140, 0.1);
}
.settlement-option.selected {
border-color: #28a745;
background-color: #f8fff9;
border-color: var(--green);
background-color: var(--nord5);
}
.settlement-user {
@@ -412,24 +466,25 @@
.username {
font-weight: 600;
color: #333;
color: var(--nord0);
}
.debt-amount {
color: #666;
color: var(--nord3);
font-size: 0.9rem;
}
.settlement-action {
color: #28a745;
color: var(--green);
font-weight: 500;
}
.settlement-details {
background: white;
background: var(--nord6);
padding: 1.5rem;
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--nord4);
height: fit-content;
}
@@ -444,7 +499,7 @@
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background-color: #f8f9fa;
background-color: var(--nord5);
border-radius: 0.5rem;
}
@@ -457,12 +512,12 @@
.flow-arrow {
font-size: 1.5rem;
color: #28a745;
color: var(--green);
font-weight: bold;
}
.you-badge {
background-color: #1976d2;
background-color: var(--blue);
color: white;
padding: 0.125rem 0.5rem;
border-radius: 1rem;
@@ -478,20 +533,20 @@
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
color: var(--nord0);
}
.amount-input {
display: flex;
align-items: center;
background: #f8f9fa;
border: 1px solid #ced4da;
background: var(--nord5);
border: 1px solid var(--nord4);
border-radius: 0.375rem;
padding: 0.5rem;
}
.currency {
color: #666;
color: var(--nord3);
font-weight: 500;
margin-right: 0.5rem;
}
@@ -502,6 +557,7 @@
flex: 1;
padding: 0.25rem;
font-size: 1rem;
color: var(--nord0);
}
.amount-input input:focus {
@@ -509,17 +565,17 @@
}
.max-amount {
color: #666;
color: var(--nord3);
font-size: 0.85rem;
margin-top: 0.25rem;
display: block;
}
.settlement-description {
color: #333;
color: var(--nord0);
font-size: 0.9rem;
padding: 1rem;
background-color: #f8f9fa;
background-color: var(--nord5);
border-radius: 0.375rem;
}
@@ -529,6 +585,48 @@
justify-content: center;
}
.settlement-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-weight: 600;
color: var(--nord0);
}
.form-group select,
.form-group input {
padding: 0.75rem;
border: 1px solid var(--nord4);
border-radius: 0.375rem;
font-size: 1rem;
background-color: var(--nord5);
color: var(--nord0);
}
.form-group select:focus,
.form-group input:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
}
.no-js-fallback {
display: block;
}
:global(body:has(script)) .no-js-fallback {
display: none;
}
.btn {
padding: 0.75rem 1.5rem;
border: none;
@@ -542,31 +640,31 @@
}
.btn-primary {
background-color: #1976d2;
background-color: var(--blue);
color: white;
}
.btn-primary:hover {
background-color: #1565c0;
background-color: var(--lightblue);
}
.btn-secondary {
background-color: #f5f5f5;
color: #333;
border: 1px solid #ddd;
background-color: var(--nord5);
color: var(--nord0);
border: 1px solid var(--nord4);
}
.btn-secondary:hover {
background-color: #e8e8e8;
background-color: var(--nord4);
}
.btn-settlement {
background: linear-gradient(135deg, #28a745, #20c997);
background: linear-gradient(135deg, var(--green), var(--lightblue));
color: white;
}
.btn-settlement:hover:not(:disabled) {
background: linear-gradient(135deg, #20c997, #1e7e34);
background: linear-gradient(135deg, var(--lightblue), var(--green));
}
.btn-settlement:disabled {
@@ -583,6 +681,111 @@
margin-top: 1.5rem;
}
@media (prefers-color-scheme: dark) {
.header-section h1 {
color: var(--font-default-dark);
}
.header-section p {
color: var(--nord4);
}
.error {
background-color: var(--accent-dark);
}
.no-debts {
background: var(--accent-dark);
border-color: var(--nord2);
}
.available-settlements {
background: var(--accent-dark);
border-color: var(--nord2);
}
.settlement-section h3 {
color: var(--font-default-dark);
}
.settlement-option {
border-color: var(--nord2);
background: var(--nord1);
}
.settlement-option:hover {
box-shadow: 0 2px 8px rgba(163, 190, 140, 0.2);
}
.settlement-option.selected {
background-color: var(--nord1);
}
.username {
color: var(--font-default-dark);
}
.debt-amount {
color: var(--nord4);
}
.settlement-details {
background: var(--accent-dark);
border-color: var(--nord2);
}
.settlement-flow {
background-color: var(--nord1);
}
.settlement-amount-section label {
color: var(--font-default-dark);
}
.amount-input {
background: var(--nord1);
border-color: var(--nord2);
}
.currency {
color: var(--nord4);
}
.max-amount {
color: var(--nord4);
}
.settlement-description {
color: var(--font-default-dark);
background-color: var(--nord1);
}
.amount-input input {
color: var(--font-default-dark);
}
.btn-secondary {
background-color: var(--nord1);
color: var(--font-default-dark);
border-color: var(--nord2);
}
.btn-secondary:hover {
background-color: var(--nord2);
}
.form-group label {
color: var(--font-default-dark);
}
.form-group select,
.form-group input {
background-color: var(--nord1);
color: var(--font-default-dark);
border-color: var(--nord2);
}
}
@media (max-width: 600px) {
.settle-main {
padding: 1rem;