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

Refactor cospend components and add SSR support to settle page

Browse Source 
- 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>
This commit is contained in:
Alexander Bocken
2025-09-12 19:29:30 +02:00
parent ac6845d38a
commit e773a90f1d
10 changed files with 1606 additions and 1418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

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>

663
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;
function handleImageSelected(event) {
imageFile = event.detail;
}
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;
function handleImageError(event) {
error = event.detail;
}
imageFile = file;
const reader = new FileReader();
reader.onload = (e) => {
imagePreview = e.target.result;
};
reader.readAsDataURL(file);
}
}
function removeImage() {
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,82 +436,22 @@
</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
<ImageUpload
bind:imagePreview={imagePreview}
bind:imageFile={imageFile}
bind:uploading={uploading}
on:imageSelected={handleImageSelected}
on:imageRemoved={handleImageRemoved}
on:error={handleImageError}
/>
</div>
{/if}
</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>
<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())}
<UsersList
bind:users={users}
bind:newUser={newUser}
currentUser={data.session?.user?.nickname || data.currentUser}
predefinedMode={predefinedMode}
canRemoveUsers={!predefinedMode}
/>
<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">
@@ -655,7 +462,6 @@
rows="4"
>{data.currentUser}</textarea>
</div>
{/if}
<!-- Hidden inputs for JavaScript-managed users -->
{#if predefinedMode}
@@ -667,91 +473,17 @@
<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"
<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}
/>
</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>
{#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 {

179
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"
<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 uploading}
<div class="upload-status">Uploading image...</div>
{/if}
</div>
</div>
{#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 {

530
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>
{#if !predefinedMode}
<div class="add-user">
<input
type="text"
bind:value={newUser}
placeholder="Add user..."
on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
<UsersList
bind:users={users}
bind:newUser={newUser}
currentUser={data.session?.user?.nickname}
{predefinedMode}
canRemoveUsers={!predefinedMode}
/>
<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"
<SplitMethodSelector
bind:splitMethod={formData.splitMethod}
bind:splitAmounts={splitAmounts}
bind:personalAmounts={personalAmounts}
{users}
amount={formData.amount}
paidBy={formData.paidBy}
currentUser={data.session?.user?.nickname}
{predefinedMode}
/>
</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>
{#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) {

132
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');
}
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 {
session: auth
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')
}
});
}
}
};

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

@@ -1,37 +1,27 @@
<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();
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;
@@ -40,32 +30,31 @@
selectedSettlement = {
type: 'receive',
from: debtData.whoOwesMe[0].username,
to: data.session?.user?.nickname,
to: data.currentUser,
amount: debtData.whoOwesMe[0].netAmount,
description: `Settlement: ${debtData.whoOwesMe[0].username} pays ${data.session?.user?.nickname}`
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,
from: data.currentUser,
to: debtData.whoIOwe[0].username,
amount: debtData.whoIOwe[0].netAmount,
description: `Settlement: ${data.session?.user?.nickname} pays ${debtData.whoIOwe[0].username}`
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;
// 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;