Add payment categories with emoji icons and image upload support

- Add comprehensive category system: Groceries 🛒, Shopping 🛍️, Travel 🚆, Restaurant 🍽️, Utilities ⚡, Fun 🎉
- Create category utility functions with emoji and display name helpers
- Update Payment model and API validation to support categories
- Add category selectors to payment creation and edit forms
- Display category emojis prominently across all UI components:
  - Dashboard recent activities with category icons and names
  - Payment cards showing category in metadata
  - Payment modals and view pages with category information
- Add image upload/removal functionality to payment edit form
- Maintain responsive design and consistent styling across all components

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/lib/components/PaymentModal.svelte

@@ -3,6 +3,7 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import ProfilePicture from './ProfilePicture.svelte';
+  import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   
   export let paymentId;
   
@@ -104,7 +105,10 @@
         <div class="payment-details">
           <div class="payment-header">
             <div class="title-section">
-              <h1>{payment.title}</h1>
+              <div class="title-with-category">
+                <span class="category-emoji">{getCategoryEmoji(payment.category || 'groceries')}</span>
+                <h1>{payment.title}</h1>
+              </div>
               <div class="payment-amount">
                 {formatCurrency(payment.amount)}
               </div>
@@ -130,6 +134,10 @@
                 <span class="label">Created by:</span>
                 <span class="value">{payment.createdBy}</span>
               </div>
+              <div class="info-item">
+                <span class="label">Category:</span>
+                <span class="value">{getCategoryName(payment.category || 'groceries')}</span>
+              </div>
               <div class="info-item">
                 <span class="label">Split method:</span>
                 <span class="value">{getSplitDescription(payment)}</span>
@@ -255,8 +263,20 @@
     border-bottom: 1px solid #dee2e6;
   }
 
+  .title-with-category {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .title-with-category .category-emoji {
+    font-size: 1.8rem;
+    flex-shrink: 0;
+  }
+
   .title-section h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0;
     color: #333;
     font-size: 1.5rem;
   }

src/lib/models/Payment.ts

@@ -1,14 +0,0 @@
-import mongoose from 'mongoose';
-
-const paymentSchema = new mongoose.Schema({
-  paid_by: { type: String, required: true },
-  total_amount: { type: Number, required: true },
-  for_self: { type: Number, default: 0 },
-  for_other: { type: Number, default: 0 },
-  currency: { type: String, default: 'CHF' },
-  description: String,
-  date: { type: Date, default: Date.now },
-  receipt_image: String
-});
-
-export const Payment = mongoose.models.Payment || mongoose.model('Payment', paymentSchema);

src/lib/utils/categories.ts

@@ -0,0 +1,49 @@
+export const PAYMENT_CATEGORIES = {
+  groceries: {
+    name: 'Groceries',
+    emoji: '🛒'
+  },
+  shopping: {
+    name: 'Shopping', 
+    emoji: '🛍️'
+  },
+  travel: {
+    name: 'Travel',
+    emoji: '🚆'
+  },
+  restaurant: {
+    name: 'Restaurant',
+    emoji: '🍽️'
+  },
+  utilities: {
+    name: 'Utilities',
+    emoji: '⚡'
+  },
+  fun: {
+    name: 'Fun',
+    emoji: '🎉'
+  }
+} as const;
+
+export type PaymentCategory = keyof typeof PAYMENT_CATEGORIES;
+
+export function getCategoryInfo(category: PaymentCategory) {
+  return PAYMENT_CATEGORIES[category] || PAYMENT_CATEGORIES.groceries;
+}
+
+export function getCategoryEmoji(category: PaymentCategory) {
+  return getCategoryInfo(category).emoji;
+}
+
+export function getCategoryName(category: PaymentCategory) {
+  return getCategoryInfo(category).name;
+}
+
+export function getCategoryOptions() {
+  return Object.entries(PAYMENT_CATEGORIES).map(([key, value]) => ({
+    value: key as PaymentCategory,
+    label: `${value.emoji} ${value.name}`,
+    emoji: value.emoji,
+    name: value.name
+  }));
+}

src/models/Payment.ts

@@ -9,6 +9,7 @@ export interface IPayment {
   paidBy: string; // username/nickname of the person who paid
   date: Date;
   image?: string; // path to uploaded image
+  category: 'groceries' | 'shopping' | 'travel' | 'restaurant' | 'utilities' | 'fun';
   splitMethod: 'equal' | 'full' | 'proportional';
   createdBy: string; // username/nickname of the person who created the payment
   createdAt?: Date;
@@ -51,6 +52,12 @@ const PaymentSchema = new mongoose.Schema(
       type: String,
       trim: true 
     },
+    category: {
+      type: String,
+      required: true,
+      enum: ['groceries', 'shopping', 'travel', 'restaurant', 'utilities', 'fun'],
+      default: 'groceries'
+    },
     splitMethod: {
       type: String,
       required: true,

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

@@ -38,7 +38,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   }
 
   const data = await request.json();
-  const { title, description, amount, paidBy, date, image, splitMethod, splits } = data;
+  const { title, description, amount, paidBy, date, image, category, splitMethod, splits } = data;
 
   if (!title || !amount || !paidBy || !splitMethod || !splits) {
     throw error(400, 'Missing required fields');
@@ -52,6 +52,10 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     throw error(400, 'Invalid split method');
   }
 
+  if (category && !['groceries', 'shopping', 'travel', 'restaurant', 'utilities', 'fun'].includes(category)) {
+    throw error(400, 'Invalid category');
+  }
+
   await dbConnect();
   
   try {
@@ -63,6 +67,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
       paidBy,
       date: date ? new Date(date) : new Date(),
       image,
+      category: category || 'groceries',
       splitMethod,
       createdBy: auth.user.nickname
     });

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

@@ -61,6 +61,7 @@ export const PUT: RequestHandler = async ({ params, request, locals }) => {
         paidBy: data.paidBy,
         date: data.date ? new Date(data.date) : payment.date,
         image: data.image,
+        category: data.category || payment.category,
         splitMethod: data.splitMethod
       },
       { new: true }

src/routes/cospend/+page.svelte

@@ -3,6 +3,7 @@
   import { page } from '$app/stores';
   import { pushState } from '$app/navigation';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+  import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
 
   export let data; // Used by the layout for session data
 
@@ -109,8 +110,12 @@
                 >
                   <div class="activity-header">
                     <div class="user-info">
-                      <strong class="payment-title">{split.paymentId?.title || 'Payment'}</strong>
+                      <div class="payment-title-row">
+                        <span class="category-emoji">{getCategoryEmoji(split.paymentId?.category || 'groceries')}</span>
+                        <strong class="payment-title">{split.paymentId?.title || 'Payment'}</strong>
+                      </div>
                       <span class="username">Paid by {split.paymentId?.paidBy || 'Unknown'}</span>
+                      <span class="category-name">{getCategoryName(split.paymentId?.category || 'groceries')}</span>
                     </div>
                     <div class="activity-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
                       {#if split.amount > 0}
@@ -368,6 +373,23 @@
     gap: 0.25rem;
   }
 
+  .payment-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .category-emoji {
+    font-size: 1.2rem;
+    flex-shrink: 0;
+  }
+
+  .category-name {
+    color: #888;
+    font-size: 0.8rem;
+    font-style: italic;
+  }
+
   .payment-title {
     color: #333;
     font-size: 1.1rem;

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

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+  import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
 
   export let data;
 
@@ -137,8 +138,12 @@
             <div class="payment-title-section">
               <ProfilePicture username={payment.paidBy} size={40} />
               <div class="payment-title">
-                <h3>{payment.title}</h3>
+                <div class="title-with-category">
+                  <span class="category-emoji">{getCategoryEmoji(payment.category || 'groceries')}</span>
+                  <h3>{payment.title}</h3>
+                </div>
                 <div class="payment-meta">
+                  <span class="category-name">{getCategoryName(payment.category || 'groceries')}</span>
                   <span class="date">{formatDate(payment.date)}</span>
                   <span class="amount">{formatCurrency(payment.amount)}</span>
                 </div>
@@ -346,8 +351,20 @@
     flex: 1;
   }
 
+  .title-with-category {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .title-with-category .category-emoji {
+    font-size: 1.3rem;
+    flex-shrink: 0;
+  }
+
   .payment-title h3 {
-    margin: 0 0 0.5rem 0;
+    margin: 0;
     color: #333;
     font-size: 1.25rem;
   }
@@ -357,6 +374,13 @@
     gap: 1rem;
     font-size: 0.9rem;
     color: #666;
+    flex-wrap: wrap;
+  }
+
+  .payment-meta .category-name {
+    color: #888;
+    font-style: italic;
+    font-size: 0.8rem;
   }
 
   .payment-meta .amount {

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

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
+  import { getCategoryOptions } from '$lib/utils/categories';
   
   export let data;
 
@@ -10,6 +11,7 @@
     amount: '',
     paidBy: data.session?.user?.nickname || '',
     date: new Date().toISOString().split('T')[0],
+    category: 'groceries',
     splitMethod: 'equal',
     splits: []
   };
@@ -22,6 +24,8 @@
   let loading = false;
   let error = null;
   
+  $: categoryOptions = getCategoryOptions();
+
   onMount(() => {
     if (data.session?.user?.nickname) {
       addSplitForUser(data.session.user.nickname);
@@ -238,6 +242,15 @@
         ></textarea>
       </div>
 
+      <div class="form-group">
+        <label for="category">Category *</label>
+        <select id="category" bind:value={formData.category} required>
+          {#each categoryOptions as option}
+            <option value={option.value}>{option.label}</option>
+          {/each}
+        </select>
+      </div>
+
       <div class="form-row">
         <div class="form-group">
           <label for="amount">Amount (CHF) *</label>

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

@@ -1,13 +1,18 @@
 <script>
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
+  import { getCategoryOptions } from '$lib/utils/categories';
   
   export let data;
 
   let payment = null;
   let loading = true;
   let saving = false;
+  let uploading = false;
   let error = null;
+  let imageFile = null;
+  
+  $: categoryOptions = getCategoryOptions();
 
   onMount(async () => {
     await loadPayment();
@@ -28,6 +33,45 @@
     }
   }
 
+  async function handleImageUpload() {
+    if (!imageFile) return;
+
+    uploading = true;
+    try {
+      const formData = new FormData();
+      formData.append('image', imageFile);
+
+      const response = await fetch('/api/cospend/upload', {
+        method: 'POST',
+        body: formData
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to upload image');
+      }
+
+      const result = await response.json();
+      payment.image = result.imageUrl;
+      imageFile = null;
+    } catch (err) {
+      error = err.message;
+    } finally {
+      uploading = false;
+    }
+  }
+
+  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;
 
@@ -98,6 +142,15 @@
           ></textarea>
         </div>
 
+        <div class="form-group">
+          <label for="category">Category</label>
+          <select id="category" bind:value={payment.category} required>
+            {#each categoryOptions as option}
+              <option value={option.value}>{option.label}</option>
+            {/each}
+          </select>
+        </div>
+
         <div class="form-row">
           <div class="form-group">
             <label for="amount">Amount (CHF) *</label>
@@ -134,6 +187,38 @@
         </div>
       </div>
 
+      <div class="form-section">
+        <h2>Receipt Image</h2>
+        
+        {#if payment.image}
+          <div class="current-image">
+            <img src={payment.image} alt="Receipt" class="receipt-preview" />
+            <div class="image-actions">
+              <button type="button" class="btn-remove" on:click={handleImageRemove}>
+                Remove Image
+              </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">
           <h2>Current Splits</h2>
@@ -242,7 +327,7 @@
     color: #555;
   }
 
-  input, textarea {
+  input, textarea, select {
     width: 100%;
     padding: 0.75rem;
     border: 1px solid #ddd;
@@ -251,12 +336,17 @@
     box-sizing: border-box;
   }
 
-  input:focus, textarea:focus {
+  input:focus, textarea:focus, select:focus {
     outline: none;
     border-color: #1976d2;
     box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
   }
 
+  select {
+    background-color: white;
+    cursor: pointer;
+  }
+
   .splits-display {
     display: flex;
     flex-direction: column;
@@ -329,6 +419,78 @@
     background-color: #e8e8e8;
   }
 
+  .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 #ddd;
+    margin-bottom: 0.75rem;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .image-actions {
+    display: flex;
+    justify-content: center;
+  }
+
+  .btn-remove {
+    background-color: #d32f2f;
+    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: #c62828;
+  }
+
+  .upload-label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #555;
+    cursor: pointer;
+  }
+
+  .file-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px dashed #ddd;
+    border-radius: 0.5rem;
+    background-color: #fafafa;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .file-input:hover {
+    border-color: #1976d2;
+    background-color: #f5f5f5;
+  }
+
+  .file-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .upload-status {
+    margin-top: 0.5rem;
+    color: #1976d2;
+    font-size: 0.9rem;
+    text-align: center;
+  }
+
   @media (max-width: 600px) {
     .edit-payment {
       padding: 1rem;

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

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+  import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   
   export let data;
 
@@ -77,7 +78,10 @@
     <div class="payment-card">
       <div class="payment-header">
         <div class="title-section">
-          <h1>{payment.title}</h1>
+          <div class="title-with-category">
+            <span class="category-emoji">{getCategoryEmoji(payment.category || 'groceries')}</span>
+            <h1>{payment.title}</h1>
+          </div>
           <div class="payment-amount">
             {formatCurrency(payment.amount)}
           </div>
@@ -103,6 +107,10 @@
             <span class="label">Created by:</span>
             <span class="value">{payment.createdBy}</span>
           </div>
+          <div class="info-item">
+            <span class="label">Category:</span>
+            <span class="value">{getCategoryName(payment.category || 'groceries')}</span>
+          </div>
           <div class="info-item">
             <span class="label">Split method:</span>
             <span class="value">{getSplitDescription(payment)}</span>
@@ -226,8 +234,20 @@
     border-bottom: 1px solid #dee2e6;
   }
 
+  .title-with-category {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .title-with-category .category-emoji {
+    font-size: 2rem;
+    flex-shrink: 0;
+  }
+
   .title-section h1 {
-    margin: 0 0 0.5rem 0;
+    margin: 0;
     color: #333;
     font-size: 1.75rem;
   }