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

Enhance Cospend with debt breakdown and predefined users

Browse Source 
- 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:
Alexander Bocken
2025-09-09 18:58:04 +02:00
parent b67bb0b263
commit fd4a25376b
13 changed files with 1019 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
src/lib/components/DebtBreakdown.svelte Normal file
View 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>