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>

src/routes/api/cospend/payments/+server.ts

@@ -48,7 +48,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     throw error(400, 'Amount must be positive');
   }
 
-  if (!['equal', 'full', 'proportional'].includes(splitMethod)) {
+  if (!['equal', 'full', 'proportional', 'personal_equal'].includes(splitMethod)) {
     throw error(400, 'Invalid split method');
   }
 
@@ -56,6 +56,17 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     throw error(400, 'Invalid category');
   }
 
+  // Validate personal + equal split method
+  if (splitMethod === 'personal_equal' && splits) {
+    const totalPersonal = splits.reduce((sum: number, split: any) => {
+      return sum + (parseFloat(split.personalAmount) || 0);
+    }, 0);
+    
+    if (totalPersonal > amount) {
+      throw error(400, 'Personal amounts cannot exceed total payment amount');
+    }
+  }
+
   await dbConnect();
   
   try {
@@ -77,7 +88,8 @@ export const POST: RequestHandler = async ({ request, locals }) => {
         paymentId: payment._id,
         username: split.username,
         amount: split.amount,
-        proportion: split.proportion
+        proportion: split.proportion,
+        personalAmount: split.personalAmount
       });
     });
 

src/routes/api/cospend/payments/[id]/+server.ts

@@ -75,7 +75,8 @@ export const PUT: RequestHandler = async ({ params, request, locals }) => {
           paymentId: id,
           username: split.username,
           amount: split.amount,
-          proportion: split.proportion
+          proportion: split.proportion,
+          personalAmount: split.personalAmount
         });
       });