Add complete settlement system with visual distinction

- Add settlement category with handshake emoji (🤝)
- Create settlement page for recording debt payments with user → user flow
- Implement settlement detection and visual styling across all views
- Add conditional "Settle Debts" button (hidden when balance is 0)
- Style settlement payments distinctly in recent activity with large profile pictures
- Add settlement flow styling in payments overview with green theme
- Update backend validation and Mongoose schema for settlement category
- Fix settlement receiver detection with proper user flow logic

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-09-09 19:25:05 +02:00
parent fd4a25376b
commit 098ccb8568
10 changed files with 1014 additions and 63 deletions

View File

@@ -22,6 +22,10 @@ export const PAYMENT_CATEGORIES = {
fun: {
name: 'Fun',
emoji: '🎉'
},
settlement: {
name: 'Settlement',
emoji: '🤝'
}
} as const;

View File

@@ -0,0 +1,63 @@
// Utility functions for identifying and handling settlement payments
/**
* Identifies if a payment is a settlement payment based on category
*/
export function isSettlementPayment(payment: any): boolean {
if (!payment) return false;
// Check if category is settlement
return payment.category === 'settlement';
}
/**
* Gets the settlement icon for settlement payments
*/
export function getSettlementIcon(): string {
return '🤝'; // Handshake emoji for settlements
}
/**
* Gets appropriate styling classes for settlement payments
*/
export function getSettlementClasses(payment: any): string[] {
if (!isSettlementPayment(payment)) {
return [];
}
return ['settlement-payment'];
}
/**
* Gets settlement-specific display text
*/
export function getSettlementDisplayText(payment: any): string {
if (!isSettlementPayment(payment)) {
return '';
}
return 'Settlement';
}
/**
* Gets the other user in a settlement (the one who didn't pay)
*/
export function getSettlementReceiver(payment: any): string {
if (!isSettlementPayment(payment) || !payment.splits) {
return '';
}
// Find the user who has a positive amount (the receiver)
const receiver = payment.splits.find(split => split.amount > 0);
if (receiver && receiver.username) {
return receiver.username;
}
// Fallback: find the user who is not the payer
const otherUser = payment.splits.find(split => split.username !== payment.paidBy);
if (otherUser && otherUser.username) {
return otherUser.username;
}
return '';
}