Enhance Cospend with debt breakdown and predefined users
- Add EnhancedBalance component with integrated single-user debt display - Create DebtBreakdown component for multi-user debt overview - Add predefined users configuration (alexander, anna) - Implement personal + equal split payment method - Add profile pictures throughout payment interfaces - Integrate debt information with profile pictures in balance view - Auto-hide debt breakdown when single user (shows in balance instead) - Support both manual and predefined user management modes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
246
src/lib/components/DebtBreakdown.svelte
Normal file
246
src/lib/components/DebtBreakdown.svelte
Normal file
@@ -0,0 +1,246 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import ProfilePicture from './ProfilePicture.svelte';
|
||||
|
||||
let debtData = {
|
||||
whoOwesMe: [],
|
||||
whoIOwe: [],
|
||||
totalOwedToMe: 0,
|
||||
totalIOwe: 0
|
||||
};
|
||||
let loading = true;
|
||||
let error = null;
|
||||
|
||||
$: shouldHide = getShouldHide();
|
||||
|
||||
function getShouldHide() {
|
||||
const totalUsers = debtData.whoOwesMe.length + debtData.whoIOwe.length;
|
||||
return totalUsers <= 1; // Hide if 0 or 1 user (1 user is handled by enhanced balance)
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await fetchDebtBreakdown();
|
||||
});
|
||||
|
||||
async function fetchDebtBreakdown() {
|
||||
try {
|
||||
loading = true;
|
||||
const response = await fetch('/api/cospend/debts');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch debt breakdown');
|
||||
}
|
||||
debtData = await response.json();
|
||||
} catch (err) {
|
||||
error = err.message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatCurrency(amount) {
|
||||
return new Intl.NumberFormat('de-CH', {
|
||||
style: 'currency',
|
||||
currency: 'CHF'
|
||||
}).format(amount);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !shouldHide}
|
||||
<div class="debt-breakdown">
|
||||
<h2>Debt Overview</h2>
|
||||
|
||||
{#if loading}
|
||||
<div class="loading">Loading debt breakdown...</div>
|
||||
{:else if error}
|
||||
<div class="error">Error: {error}</div>
|
||||
{:else}
|
||||
<div class="debt-sections">
|
||||
{#if debtData.whoOwesMe.length > 0}
|
||||
<div class="debt-section owed-to-me">
|
||||
<h3>Who owes you</h3>
|
||||
<div class="total-amount positive">
|
||||
Total: {formatCurrency(debtData.totalOwedToMe)}
|
||||
</div>
|
||||
|
||||
<div class="debt-list">
|
||||
{#each debtData.whoOwesMe as debt}
|
||||
<div class="debt-item">
|
||||
<div class="debt-user">
|
||||
<ProfilePicture username={debt.username} size={40} />
|
||||
<div class="user-details">
|
||||
<span class="username">{debt.username}</span>
|
||||
<span class="amount positive">{formatCurrency(debt.netAmount)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transaction-count">
|
||||
{debt.transactions.length} transaction{debt.transactions.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if debtData.whoIOwe.length > 0}
|
||||
<div class="debt-section owe-to-others">
|
||||
<h3>You owe</h3>
|
||||
<div class="total-amount negative">
|
||||
Total: {formatCurrency(debtData.totalIOwe)}
|
||||
</div>
|
||||
|
||||
<div class="debt-list">
|
||||
{#each debtData.whoIOwe as debt}
|
||||
<div class="debt-item">
|
||||
<div class="debt-user">
|
||||
<ProfilePicture username={debt.username} size={40} />
|
||||
<div class="user-details">
|
||||
<span class="username">{debt.username}</span>
|
||||
<span class="amount negative">{formatCurrency(debt.netAmount)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transaction-count">
|
||||
{debt.transactions.length} transaction{debt.transactions.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.debt-breakdown {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.debt-breakdown h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d32f2f;
|
||||
background-color: #ffebee;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.no-debts {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.debt-sections {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.debt-sections {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.debt-section {
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.debt-section.owed-to-me {
|
||||
background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
|
||||
border: 1px solid #c8e6c9;
|
||||
}
|
||||
|
||||
.debt-section.owe-to-others {
|
||||
background: linear-gradient(135deg, #ffeaea, #fff5f5);
|
||||
border: 1px solid #ffcdd2;
|
||||
}
|
||||
|
||||
.debt-section h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.total-amount.positive {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.total-amount.negative {
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.debt-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.debt-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.debt-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.amount.positive {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.amount.negative {
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.transaction-count {
|
||||
color: #666;
|
||||
font-size: 0.85rem;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
334
src/lib/components/EnhancedBalance.svelte
Normal file
334
src/lib/components/EnhancedBalance.svelte
Normal file
@@ -0,0 +1,334 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import ProfilePicture from './ProfilePicture.svelte';
|
||||
|
||||
let balance = {
|
||||
netBalance: 0,
|
||||
recentSplits: []
|
||||
};
|
||||
let debtData = {
|
||||
whoOwesMe: [],
|
||||
whoIOwe: [],
|
||||
totalOwedToMe: 0,
|
||||
totalIOwe: 0
|
||||
};
|
||||
let loading = true;
|
||||
let error = null;
|
||||
let singleDebtUser = null;
|
||||
let shouldShowIntegratedView = false;
|
||||
|
||||
function getSingleDebtUser() {
|
||||
const totalUsers = debtData.whoOwesMe.length + debtData.whoIOwe.length;
|
||||
|
||||
if (totalUsers === 1) {
|
||||
if (debtData.whoOwesMe.length === 1) {
|
||||
return {
|
||||
type: 'owesMe',
|
||||
user: debtData.whoOwesMe[0],
|
||||
amount: debtData.whoOwesMe[0].netAmount
|
||||
};
|
||||
} else if (debtData.whoIOwe.length === 1) {
|
||||
return {
|
||||
type: 'iOwe',
|
||||
user: debtData.whoIOwe[0],
|
||||
amount: debtData.whoIOwe[0].netAmount
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
$: {
|
||||
// Recalculate when debtData changes
|
||||
singleDebtUser = getSingleDebtUser();
|
||||
shouldShowIntegratedView = singleDebtUser !== null;
|
||||
|
||||
// Temporary debug logging
|
||||
if (!loading) {
|
||||
console.log('🔍 Debug Info:');
|
||||
console.log('- debtData:', debtData);
|
||||
console.log('- whoOwesMe length:', debtData.whoOwesMe.length);
|
||||
console.log('- whoIOwe length:', debtData.whoIOwe.length);
|
||||
console.log('- singleDebtUser:', singleDebtUser);
|
||||
console.log('- shouldShowIntegratedView:', shouldShowIntegratedView);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMount(async () => {
|
||||
await Promise.all([fetchBalance(), fetchDebtBreakdown()]);
|
||||
});
|
||||
|
||||
async function fetchBalance() {
|
||||
try {
|
||||
const response = await fetch('/api/cospend/balance');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch balance');
|
||||
}
|
||||
balance = await response.json();
|
||||
} catch (err) {
|
||||
error = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDebtBreakdown() {
|
||||
try {
|
||||
const response = await fetch('/api/cospend/debts');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch debt breakdown');
|
||||
}
|
||||
debtData = await response.json();
|
||||
} catch (err) {
|
||||
error = err.message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatCurrency(amount) {
|
||||
return new Intl.NumberFormat('de-CH', {
|
||||
style: 'currency',
|
||||
currency: 'CHF'
|
||||
}).format(Math.abs(amount));
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="balance-cards">
|
||||
<div class="balance-card net-balance"
|
||||
class:positive={balance.netBalance <= 0}
|
||||
class:negative={balance.netBalance > 0}
|
||||
class:enhanced={shouldShowIntegratedView}>
|
||||
|
||||
{#if loading}
|
||||
<div class="loading-content">
|
||||
<h3>Your Balance</h3>
|
||||
<div class="loading">Loading...</div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<h3>Your Balance</h3>
|
||||
<div class="error">Error: {error}</div>
|
||||
{:else if shouldShowIntegratedView}
|
||||
<!-- Enhanced view with single user debt -->
|
||||
<h3>Your Balance</h3>
|
||||
<div class="enhanced-balance">
|
||||
<div class="main-amount">
|
||||
{#if balance.netBalance < 0}
|
||||
<span class="positive">+{formatCurrency(balance.netBalance)}</span>
|
||||
<small>You are owed</small>
|
||||
{:else if balance.netBalance > 0}
|
||||
<span class="negative">-{formatCurrency(balance.netBalance)}</span>
|
||||
<small>You owe</small>
|
||||
{:else}
|
||||
<span class="even">CHF 0.00</span>
|
||||
<small>You're all even</small>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="debt-details">
|
||||
<div class="debt-user">
|
||||
{#if singleDebtUser && singleDebtUser.user}
|
||||
<!-- Debug: ProfilePicture with username: {singleDebtUser.user.username} -->
|
||||
<ProfilePicture username={singleDebtUser.user.username} size={40} />
|
||||
<div class="user-info">
|
||||
<span class="username">{singleDebtUser.user.username}</span>
|
||||
<span class="debt-description">
|
||||
{#if singleDebtUser.type === 'owesMe'}
|
||||
owes you {formatCurrency(singleDebtUser.amount)}
|
||||
{:else}
|
||||
you owe {formatCurrency(singleDebtUser.amount)}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div>Debug: No singleDebtUser data</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="transaction-count">
|
||||
{#if singleDebtUser && singleDebtUser.user && singleDebtUser.user.transactions}
|
||||
{singleDebtUser.user.transactions.length} transaction{singleDebtUser.user.transactions.length !== 1 ? 's' : ''}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Standard balance view -->
|
||||
<h3>Your Balance</h3>
|
||||
<div class="amount">
|
||||
{#if balance.netBalance < 0}
|
||||
<span class="positive">+{formatCurrency(balance.netBalance)}</span>
|
||||
<small>You are owed</small>
|
||||
{:else if balance.netBalance > 0}
|
||||
<span class="negative">-{formatCurrency(balance.netBalance)}</span>
|
||||
<small>You owe</small>
|
||||
{:else}
|
||||
<span class="even">CHF 0.00</span>
|
||||
<small>You're all even</small>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.balance-cards {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.balance-card.enhanced {
|
||||
min-width: 400px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.balance-card.net-balance {
|
||||
background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
|
||||
}
|
||||
|
||||
.balance-card.net-balance.positive {
|
||||
background: linear-gradient(135deg, #e8f5e8, #d4edda);
|
||||
}
|
||||
|
||||
.balance-card.net-balance.negative {
|
||||
background: linear-gradient(135deg, #ffeaea, #f8d7da);
|
||||
}
|
||||
|
||||
.balance-card h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: #555;
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d32f2f;
|
||||
background-color: #ffebee;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.amount small {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.enhanced-balance {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.main-amount {
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.main-amount small {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.debt-details {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.debt-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.debt-description {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.transaction-count {
|
||||
color: #666;
|
||||
font-size: 0.85rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.even {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.balance-card {
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.balance-card.enhanced {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.debt-details {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.transaction-count {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -79,6 +79,8 @@
|
||||
return `Split equally among ${payment.splits.length} people`;
|
||||
} else if (payment.splitMethod === 'full') {
|
||||
return `Paid in full by ${payment.paidBy}`;
|
||||
} else if (payment.splitMethod === 'personal_equal') {
|
||||
return `Personal amounts + equal split among ${payment.splits.length} people`;
|
||||
} else {
|
||||
return `Custom split among ${payment.splits.length} people`;
|
||||
}
|
||||
|
||||
16
src/lib/config/users.ts
Normal file
16
src/lib/config/users.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
// Predefined users configuration for Cospend
|
||||
// When this array has exactly 2 users, the system will always split between them
|
||||
// For more users, manual selection is allowed
|
||||
|
||||
export const PREDEFINED_USERS = [
|
||||
'alexander',
|
||||
'anna'
|
||||
];
|
||||
|
||||
export function isPredefinedUsersMode(): boolean {
|
||||
return PREDEFINED_USERS.length === 2;
|
||||
}
|
||||
|
||||
export function getAvailableUsers(): string[] {
|
||||
return [...PREDEFINED_USERS];
|
||||
}
|
||||
Reference in New Issue
Block a user