add MVP monthly expenses graph

- 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>

package.json

@@ -27,6 +27,7 @@
 	"dependencies": {
 		"@auth/sveltekit": "^1.10.0",
 		"@sveltejs/adapter-node": "^5.0.0",
+		"chart.js": "^4.5.0",
 		"cheerio": "1.0.0-rc.12",
 		"mongoose": "^8.0.0",
 		"node-cron": "^4.2.1",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@sveltejs/adapter-node':
         specifier: ^5.0.0
         version: 5.3.1(@sveltejs/kit@2.37.0(@sveltejs/vite-plugin-svelte@6.1.3(svelte@5.38.6)(vite@7.1.3(@types/node@22.18.0)))(svelte@5.38.6)(vite@7.1.3(@types/node@22.18.0)))
+      chart.js:
+        specifier: ^4.5.0
+        version: 4.5.0
       cheerio:
         specifier: 1.0.0-rc.12
         version: 1.0.0-rc.12
@@ -376,6 +379,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
+  '@kurkle/color@0.3.4':
+    resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
+
   '@mongodb-js/saslprep@1.3.0':
     resolution: {integrity: sha512-zlayKCsIjYb7/IdfqxorK5+xUMyi4vOKcFy10wKJYc63NSdKI8mNME+uJqfatkPmOSMMUiojrL58IePKBm3gvQ==}
 
@@ -625,6 +631,10 @@ packages:
     resolution: {integrity: sha512-WIsKqkSC0ABoBJuT1LEX+2HEvNmNKKgnTAyd0fL8qzK4SH2i9NXg+t08YtdZp/V9IZ33cxe3iV4yM0qg8lMQng==}
     engines: {node: '>=16.20.1'}
 
+  chart.js@4.5.0:
+    resolution: {integrity: sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==}
+    engines: {pnpm: '>=8'}
+
   cheerio-select@2.1.0:
     resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
 
@@ -1251,6 +1261,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  '@kurkle/color@0.3.4': {}
+
   '@mongodb-js/saslprep@1.3.0':
     dependencies:
       sparse-bitfield: 3.0.3
@@ -1455,6 +1467,10 @@ snapshots:
 
   bson@6.10.4: {}
 
+  chart.js@4.5.0:
+    dependencies:
+      '@kurkle/color': 0.3.4
+
   cheerio-select@2.1.0:
     dependencies:
       boolbase: 1.0.0

src/lib/components/BarChart.svelte

@@ -0,0 +1,205 @@
+<script>
+  import { onMount } from 'svelte';
+  import { Chart, registerables } from 'chart.js';
+  
+  export let data = { labels: [], datasets: [] };
+  export let title = '';
+  export let height = '400px';
+  
+  let canvas;
+  let chart;
+  
+  // Register Chart.js components
+  Chart.register(...registerables);
+  
+  // Nord theme colors for categories
+  const nordColors = [
+    '#5E81AC', // Nord Blue
+    '#88C0D0', // Nord Light Blue  
+    '#81A1C1', // Nord Lighter Blue
+    '#A3BE8C', // Nord Green
+    '#EBCB8B', // Nord Yellow
+    '#D08770', // Nord Orange
+    '#BF616A', // Nord Red
+    '#B48EAD', // Nord Purple
+    '#8FBCBB', // Nord Cyan
+    '#ECEFF4', // Nord Light Gray
+  ];
+  
+  function getCategoryColor(category, index) {
+    const categoryColorMap = {
+      'groceries': '#A3BE8C',      // Green
+      'restaurant': '#D08770',     // Orange  
+      'transport': '#5E81AC',      // Blue
+      'entertainment': '#B48EAD',  // Purple
+      'shopping': '#EBCB8B',       // Yellow
+      'utilities': '#81A1C1',      // Light Blue
+      'healthcare': '#BF616A',     // Red
+      'education': '#88C0D0',      // Cyan
+      'travel': '#8FBCBB',         // Light Cyan
+      'other': '#4C566A'           // Dark Gray
+    };
+    
+    return categoryColorMap[category] || nordColors[index % nordColors.length];
+  }
+  
+  function createChart() {
+    if (!canvas || !data.datasets) return;
+    
+    // Destroy existing chart
+    if (chart) {
+      chart.destroy();
+    }
+    
+    const ctx = canvas.getContext('2d');
+    
+    // Process datasets with colors
+    const processedDatasets = data.datasets.map((dataset, index) => ({
+      ...dataset,
+      backgroundColor: getCategoryColor(dataset.label, index),
+      borderColor: getCategoryColor(dataset.label, index),
+      borderWidth: 1
+    }));
+    
+    chart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: data.labels,
+        datasets: processedDatasets
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            stacked: true,
+            grid: {
+              display: false
+            },
+            ticks: {
+              color: 'var(--nord3)',
+              font: {
+                family: 'Inter, system-ui, sans-serif'
+              }
+            }
+          },
+          y: {
+            stacked: true,
+            beginAtZero: true,
+            grid: {
+              color: 'var(--nord4)',
+              borderDash: [2, 2]
+            },
+            ticks: {
+              color: 'var(--nord3)',
+              font: {
+                family: 'Inter, system-ui, sans-serif'
+              },
+              callback: function(value) {
+                return 'CHF ' + value.toFixed(0);
+              }
+            }
+          }
+        },
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: {
+              padding: 20,
+              usePointStyle: true,
+              color: 'var(--nord1)',
+              font: {
+                family: 'Inter, system-ui, sans-serif',
+                size: 12
+              }
+            }
+          },
+          title: {
+            display: !!title,
+            text: title,
+            color: 'var(--nord0)',
+            font: {
+              family: 'Inter, system-ui, sans-serif',
+              size: 16,
+              weight: 'bold'
+            },
+            padding: 20
+          },
+          tooltip: {
+            backgroundColor: 'var(--nord1)',
+            titleColor: 'var(--nord6)',
+            bodyColor: 'var(--nord6)',
+            borderColor: 'var(--nord3)',
+            borderWidth: 1,
+            cornerRadius: 8,
+            titleFont: {
+              family: 'Inter, system-ui, sans-serif'
+            },
+            bodyFont: {
+              family: 'Inter, system-ui, sans-serif'
+            },
+            callbacks: {
+              label: function(context) {
+                return context.dataset.label + ': CHF ' + context.parsed.y.toFixed(2);
+              }
+            }
+          }
+        },
+        interaction: {
+          intersect: false,
+          mode: 'index'
+        }
+      }
+    });
+  }
+  
+  onMount(() => {
+    createChart();
+    
+    // Watch for theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleThemeChange = () => {
+      setTimeout(createChart, 100); // Small delay to let CSS variables update
+    };
+    
+    mediaQuery.addEventListener('change', handleThemeChange);
+    
+    return () => {
+      mediaQuery.removeEventListener('change', handleThemeChange);
+      if (chart) {
+        chart.destroy();
+      }
+    };
+  });
+  
+  // Recreate chart when data changes
+  $: if (canvas && data) {
+    createChart();
+  }
+</script>
+
+<div class="chart-container" style="height: {height}">
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+<style>
+  .chart-container {
+    background: var(--nord6);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    .chart-container {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+  }
+  
+  canvas {
+    max-width: 100%;
+    height: 100% !important;
+  }
+</style>

src/lib/components/FormSection.svelte

@@ -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>

src/lib/components/ImageUpload.svelte

@@ -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>

src/lib/components/SplitMethodSelector.svelte

@@ -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>

src/lib/components/UsersList.svelte

@@ -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>

src/routes/api/cospend/monthly-expenses/+server.ts

@@ -0,0 +1,145 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { Payment } from '../../../../models/Payment';
+import { dbConnect } from '../../../../utils/db';
+
+export const GET: RequestHandler = async ({ url, locals }) => {
+  const session = await locals.auth();
+  
+  if (!session || !session.user?.nickname) {
+    return json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  await dbConnect();
+  
+  try {
+
+    // Get query parameters for date range (default to last 12 months)
+    const monthsBack = parseInt(url.searchParams.get('months') || '12');
+    const endDate = new Date();
+    const startDate = new Date();
+    startDate.setMonth(startDate.getMonth() - monthsBack);
+
+    // First, let's get all payments and see what we have
+    console.log('Searching for payments for user:', session.user.nickname);
+    console.log('Date range:', startDate.toISOString(), 'to', endDate.toISOString());
+    
+    const totalPayments = await Payment.countDocuments();
+    const paymentsInRange = await Payment.countDocuments({
+      date: {
+        $gte: startDate,
+        $lte: endDate
+      }
+    });
+    const expensePayments = await Payment.countDocuments({
+      date: {
+        $gte: startDate,
+        $lte: endDate
+      },
+      category: { $ne: 'settlement' },
+      $or: [
+        { paidBy: session.user.nickname },
+        { createdBy: session.user.nickname }
+      ]
+    });
+    console.log('Total payments:', totalPayments, 'In date range:', paymentsInRange, 'User expenses:', expensePayments);
+    
+    // Aggregate payments by month and category
+    const pipeline = [
+      {
+        $match: {
+          date: {
+            $gte: startDate,
+            $lte: endDate
+          },
+          // Exclude settlements - only show actual expenses
+          category: { $ne: 'settlement' },
+          // Only include payments where current user is involved
+          $or: [
+            { paidBy: session.user.nickname },
+            { createdBy: session.user.nickname }
+          ]
+        }
+      },
+      {
+        $addFields: {
+          // Extract year-month from date
+          yearMonth: {
+            $dateToString: {
+              format: '%Y-%m',
+              date: '$date'
+            }
+          }
+        }
+      },
+      {
+        $group: {
+          _id: {
+            yearMonth: '$yearMonth',
+            category: '$category'
+          },
+          totalAmount: { $sum: '$amount' },
+          count: { $sum: 1 }
+        }
+      },
+      {
+        $sort: {
+          '_id.yearMonth': 1,
+          '_id.category': 1
+        }
+      }
+    ];
+
+    const results = await Payment.aggregate(pipeline);
+    console.log('Aggregation results:', results);
+
+    // Transform data into chart-friendly format
+    const monthsMap = new Map();
+    const categories = new Set();
+
+    // Initialize months
+    for (let i = 0; i < monthsBack; i++) {
+      const date = new Date();
+      date.setMonth(date.getMonth() - monthsBack + i + 1);
+      const yearMonth = date.toISOString().substring(0, 7);
+      monthsMap.set(yearMonth, {});
+    }
+
+    // Populate data
+    results.forEach((result: any) => {
+      const { yearMonth, category } = result._id;
+      const amount = result.totalAmount;
+      
+      categories.add(category);
+      
+      if (!monthsMap.has(yearMonth)) {
+        monthsMap.set(yearMonth, {});
+      }
+      
+      monthsMap.get(yearMonth)[category] = amount;
+    });
+
+    // Convert to arrays for Chart.js
+    const months = Array.from(monthsMap.keys()).sort();
+    const categoryList = Array.from(categories).sort();
+    
+    const datasets = categoryList.map((category: string) => ({
+      label: category,
+      data: months.map(month => monthsMap.get(month)[category] || 0)
+    }));
+
+    return json({
+      labels: months.map(month => {
+        const [year, monthNum] = month.split('-');
+        const date = new Date(parseInt(year), parseInt(monthNum) - 1);
+        return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+      }),
+      datasets,
+      categories: categoryList
+    });
+
+  } catch (error) {
+    console.error('Error fetching monthly expenses:', error);
+    return json({ error: 'Failed to fetch monthly expenses' }, { status: 500 });
+  }
+};

src/routes/cospend/+page.svelte

@@ -5,6 +5,7 @@
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
   import EnhancedBalance from '$lib/components/EnhancedBalance.svelte';
   import DebtBreakdown from '$lib/components/DebtBreakdown.svelte';
+  import BarChart from '$lib/components/BarChart.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   import { isSettlementPayment, getSettlementIcon, getSettlementClasses, getSettlementReceiver } from '$lib/utils/settlements';
   import AddButton from '$lib/components/AddButton.svelte';
@@ -18,6 +19,8 @@
   };
   let loading = false; // Start as false since we have server data
   let error = null;
+  let monthlyExpensesData = { labels: [], datasets: [] };
+  let expensesLoading = false;
 
   // Component references for refreshing
   let enhancedBalanceComponent;
@@ -27,7 +30,10 @@
   onMount(async () => {
     // Mark that JavaScript is loaded for progressive enhancement
     document.body.classList.add('js-loaded');
-    await fetchBalance();
+    await Promise.all([
+      fetchBalance(),
+      fetchMonthlyExpenses()
+    ]);
 
     // Listen for dashboard refresh events from the layout
     const handleDashboardRefresh = () => {
@@ -57,10 +63,31 @@
     }
   }
 
+  async function fetchMonthlyExpenses() {
+    try {
+      expensesLoading = true;
+      console.log('Fetching monthly expenses...');
+      const response = await fetch('/api/cospend/monthly-expenses');
+      if (!response.ok) {
+        throw new Error('Failed to fetch monthly expenses');
+      }
+      monthlyExpensesData = await response.json();
+      console.log('Monthly expenses data:', monthlyExpensesData);
+    } catch (err) {
+      console.error('Error fetching monthly expenses:', err);
+      // Don't show this error in the main error state
+    } finally {
+      expensesLoading = false;
+    }
+  }
+
   // Function to refresh all dashboard components after payment deletion
   async function refreshAllComponents() {
     // Refresh the main balance and recent activity
-    await fetchBalance();
+    await Promise.all([
+      fetchBalance(),
+      fetchMonthlyExpenses()
+    ]);
 
     // Refresh the enhanced balance component if it exists and has a refresh method
     if (enhancedBalanceComponent && enhancedBalanceComponent.refresh) {
@@ -138,6 +165,25 @@
 
   <DebtBreakdown bind:this={debtBreakdownComponent} />
 
+  <!-- Monthly Expenses Chart -->
+  <div class="chart-section">
+    {#if expensesLoading}
+      <div class="loading">Loading monthly expenses chart...</div>
+    {:else if monthlyExpensesData.datasets && monthlyExpensesData.datasets.length > 0}
+      <BarChart 
+        data={monthlyExpensesData} 
+        title="Monthly Expenses by Category"
+        height="400px"
+      />
+    {:else}
+      <div class="loading">
+        Debug: expensesLoading={expensesLoading}, 
+        datasets={monthlyExpensesData.datasets?.length || 0}, 
+        data={JSON.stringify(monthlyExpensesData)}
+      </div>
+    {/if}
+  </div>
+
   {#if loading}
     <div class="loading">Loading recent activity...</div>
   {:else if error}
@@ -660,4 +706,26 @@
       font-size: 1.3rem;
     }
   }
+
+  .chart-section {
+    margin-bottom: 2rem;
+  }
+
+  .chart-section .loading {
+    background: var(--nord6);
+    border-radius: 0.75rem;
+    padding: 2rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+    text-align: center;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .chart-section .loading {
+      background: var(--nord1);
+      border-color: var(--nord2);
+      color: var(--nord4);
+    }
+  }
 </style>

src/routes/cospend/payments/+page.svelte

@@ -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>

src/routes/cospend/payments/add/+page.svelte

@@ -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) {
+  function handleImageSelected(event) {
-    const file = event.target.files[0];
+    imageFile = event.detail;
-    if (file) {
-      if (file.size > 5 * 1024 * 1024) {
-        alert('File size must be less than 5MB');
-        return;
-      }
-      
-      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;
-      }
-
-      imageFile = file;
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        imagePreview = e.target.result;
-      };
-      reader.readAsDataURL(file);
-    }
   }
 
-  function removeImage() {
+  function handleImageError(event) {
+    error = event.detail;
+  }
+
+  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,189 +436,54 @@
       </div>
     {/if}
 
-    <div class="form-section">
+    <ImageUpload
-      <h2>Receipt Image</h2>
+      bind:imagePreview={imagePreview}
-      
+      bind:imageFile={imageFile}
-      {#if imagePreview}
+      bind:uploading={uploading}
-        <div class="image-preview">
+      on:imageSelected={handleImageSelected}
-          <img src={imagePreview} alt="Receipt preview" />
+      on:imageRemoved={handleImageRemoved}
-          <button type="button" class="remove-image" on:click={removeImage}>
+      on:error={handleImageError}
-            Remove Image
+    />
-          </button>
+
-        </div>
+    <UsersList 
-      {:else}
+      bind:users={users}
-        <div class="image-upload">
+      bind:newUser={newUser}
-          <label for="image" class="upload-label">
+      currentUser={data.session?.user?.nickname || data.currentUser}
-            <div class="upload-content">
+      predefinedMode={predefinedMode}
-              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      canRemoveUsers={!predefinedMode}
-                <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"/>
+    <!-- Server-side fallback: simple text inputs for users -->
-              </svg>
+    <div class="manual-users no-js-only">
-              <p>Upload Receipt Image</p>
+      <p>Enter users to split with (one per line):</p>
-              <small>JPEG, PNG, WebP (max 5MB)</small>
+      <textarea 
-            </div>
+        name="users_manual" 
-          </label>
+        placeholder="{data.currentUser}&#10;Enter additional users..."
-          <input 
+        rows="4"
-            type="file" 
+      >{data.currentUser}</textarea>
-            id="image" 
-            accept="image/jpeg,image/jpg,image/png,image/webp" 
-            on:change={handleImageChange}
-            hidden
-          />
-        </div>
-      {/if}
     </div>
 
-    <div class="form-section">
+    <!-- Hidden inputs for JavaScript-managed users -->
-      <h2>Split Between Users</h2>
+    {#if predefinedMode}
-      
+      {#each data.predefinedUsers as user, i}
-      {#if predefinedMode}
+        <input type="hidden" name="user_{i}" value={user} />
-        <div class="predefined-users">
+      {/each}
-          <p class="predefined-note">Splitting between predefined users:</p>
+    {:else}
-          <div class="users-list">
+      {#each users as user, i}
-            {#each users as user}
+        <input type="hidden" name="user_{i}" value={user} />
-              <div class="user-item with-profile">
+      {/each}
-                <ProfilePicture username={user} size={32} />
+    {/if}
-                <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;">
+    <SplitMethodSelector 
-          <input 
+      bind:splitMethod={formData.splitMethod}
-            type="text" 
+      bind:splitAmounts={splitAmounts}
-            bind:value={newUser} 
+      bind:personalAmounts={personalAmounts}
-            placeholder="Add user..."
+      {users}
-            on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
+      amount={formData.amount}
-          />
+      paidBy={formData.paidBy}
-          <button type="button" on:click={addUser}>Add User</button>
+      currentUser={data.session?.user?.nickname || data.currentUser}
-        </div>
+      {predefinedMode}
-
+    />
-        <!-- Server-side fallback: simple text inputs for users -->
-        <div class="manual-users no-js-only">
-          <p>Enter users to split with (one per line):</p>
-          <textarea 
-            name="users_manual" 
-            placeholder="{data.currentUser}&#10;Enter additional users..."
-            rows="4"
-          >{data.currentUser}</textarea>
-        </div>
-      {/if}
-
-      <!-- Hidden inputs for JavaScript-managed users -->
-      {#if predefinedMode}
-        {#each data.predefinedUsers as user, i}
-          <input type="hidden" name="user_{i}" value={user} />
-        {/each}
-      {:else}
-        {#each users as user, i}
-          <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"
-              />
-            </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 {

src/routes/cospend/payments/edit/[id]/+page.svelte

@@ -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">
+      <FormSection title="Payment Details">
-        <h2>Payment Details</h2>
-        
         <div class="form-group">
           <label for="title">Title *</label>
           <input 
@@ -212,43 +220,21 @@
             required
           />
         </div>
-      </div>
+      </FormSection>
 
-      <div class="form-section">
+      <ImageUpload
-        <h2>Receipt Image</h2>
+        bind:imagePreview={imagePreview}
-        
+        bind:imageFile={imageFile}
-        {#if payment.image}
+        bind:uploading={uploading}
-          <div class="current-image">
+        currentImage={payment.image}
-            <img src={payment.image} alt="Receipt" class="receipt-preview" />
+        on:imageSelected={handleImageSelected}
-            <div class="image-actions">
+        on:imageRemoved={handleImageRemoved}
-              <button type="button" class="btn-remove" on:click={handleImageRemove}>
+        on:currentImageRemoved={handleCurrentImageRemoved}
-                Remove Image
+        on:error={handleImageError}
-              </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"
-          />
-          {#if uploading}
-            <div class="upload-status">Uploading image...</div>
-          {/if}
-        </div>
-      </div>
 
       {#if payment.splits && payment.splits.length > 0}
-        <div class="form-section">
+        <FormSection title="Current Splits">
-          <h2>Current Splits</h2>
           <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 {

src/routes/cospend/recurring/edit/[id]/+page.svelte

@@ -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">
+      <UsersList 
-        <h2>Split Between Users</h2>
+        bind:users={users}
-        
+        bind:newUser={newUser}
-        <div class="users-list">
+        currentUser={data.session?.user?.nickname}
-          {#each users as user}
+        {predefinedMode}
-            <div class="user-item with-profile">
+        canRemoveUsers={!predefinedMode}
-              <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}
+      <SplitMethodSelector 
-          <div class="add-user">
+        bind:splitMethod={formData.splitMethod}
-            <input 
+        bind:splitAmounts={splitAmounts}
-              type="text" 
+        bind:personalAmounts={personalAmounts}
-              bind:value={newUser} 
+        {users}
-              placeholder="Add user..."
+        amount={formData.amount}
-              on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
+        paidBy={formData.paidBy}
-            />
+        currentUser={data.session?.user?.nickname}
-            <button type="button" on:click={addUser}>Add User</button>
+        {predefinedMode}
-          </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"
-                />
-              </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;
+    border-color: var(--blue);
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+    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;
+    background-color: var(--nord8);
-    border: 1px solid #2196f3;
+    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;
+    background-color: var(--nord6);
-    color: #d32f2f;
+    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;
+    background-color: var(--nord5);
-    color: #333;
+    color: var(--nord0);
-    border: 1px solid #ddd;
+    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) {

src/routes/cospend/settle/+page.server.ts

@@ -1,13 +1,133 @@
-import type { PageServerLoad } from './$types';
+import { fail, redirect } from '@sveltejs/kit';
-import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
 
-export const load: PageServerLoad = async ({ locals }) => {
+export const load: PageServerLoad = async ({ fetch, locals, request }) => {
-  const auth = await locals.auth();
+  const session = await locals.auth();
-  if (!auth || !auth.user) {
+  
+  if (!session) {
     throw redirect(302, '/login');
   }
 
-  return {
+  try {
-    session: auth
+    // 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 {
+      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')
+        }
+      });
+    }
+  }
 };

src/routes/cospend/settle/+page.svelte

@@ -1,71 +1,60 @@
 <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 loading = false; // Start as false since we have server data
-  let error = null;
+  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 () => {
+  onMount(() => {
-    await fetchDebtData();
+    // 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;
-  async function fetchDebtData() {
+      if (totalDebts === 1) {
-    try {
+        if (debtData.whoOwesMe.length === 1) {
-      loading = true;
+          selectedSettlement = {
-      const response = await fetch('/api/cospend/debts');
+            type: 'receive',
-      if (!response.ok) {
+            from: debtData.whoOwesMe[0].username,
-        throw new Error('Failed to fetch debt data');
+            to: data.currentUser,
-      }
+            amount: debtData.whoOwesMe[0].netAmount,
-      debtData = await response.json();
+            description: `Settlement: ${debtData.whoOwesMe[0].username} pays ${data.currentUser}`
-
+          };
-      // For predefined mode with 2 users, auto-select the debt if there's only one
+          if (!settlementAmount) {
-      if (predefinedMode && PREDEFINED_USERS.length === 2) {
-        const totalDebts = debtData.whoOwesMe.length + debtData.whoIOwe.length;
-        if (totalDebts === 1) {
-          if (debtData.whoOwesMe.length === 1) {
-            selectedSettlement = {
-              type: 'receive',
-              from: debtData.whoOwesMe[0].username,
-              to: data.session?.user?.nickname,
-              amount: debtData.whoOwesMe[0].netAmount,
-              description: `Settlement: ${debtData.whoOwesMe[0].username} pays ${data.session?.user?.nickname}`
-            };
             settlementAmount = debtData.whoOwesMe[0].netAmount.toString();
-          } else if (debtData.whoIOwe.length === 1) {
+          }
-            selectedSettlement = {
+        } else if (debtData.whoIOwe.length === 1) {
-              type: 'pay',
+          selectedSettlement = {
-              from: data.session?.user?.nickname,
+            type: 'pay',
-              to: debtData.whoIOwe[0].username,
+            from: data.currentUser,
-              amount: debtData.whoIOwe[0].netAmount,
+            to: debtData.whoIOwe[0].username,
-              description: `Settlement: ${data.session?.user?.nickname} pays ${debtData.whoIOwe[0].username}`
+            amount: debtData.whoIOwe[0].netAmount,
-            };
+            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;
-      submitting = true;
+    error = null;
-      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
+      // Redirect back to dashboard on success
-      goto('/cospend');
+      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;
+    color: var(--red);
-    background-color: #ffebee;
+    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;
+    border-color: var(--green);
-    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
+    box-shadow: 0 2px 8px rgba(163, 190, 140, 0.1);
   }
 
   .settlement-option.selected {
-    border-color: #28a745;
+    border-color: var(--green);
-    background-color: #f8fff9;
+    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;
+    background: var(--nord5);
-    border: 1px solid #ced4da;
+    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;
+    background-color: var(--nord5);
-    color: #333;
+    color: var(--nord0);
-    border: 1px solid #ddd;
+    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;