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>
2025-09-08 22:29:52 +02:00
parent b08bbbdab9
commit b67bb0b263
11 changed files with 333 additions and 24 deletions
--- a/src/lib/components/PaymentModal.svelte
+++ b/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;
  }
--- a/src/lib/models/Payment.ts
+++ b/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);
--- a/src/lib/utils/categories.ts
+++ b/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
+  }));
+}
--- a/src/models/Payment.ts
+++ b/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,
--- a/src/routes/api/cospend/payments/+server.ts
+++ b/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
    });
--- a/src/routes/api/cospend/payments/[id]/+server.ts
+++ b/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 }
--- a/src/routes/cospend/+page.svelte
+++ b/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;
--- a/src/routes/cospend/payments/+page.svelte
+++ b/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 {
--- a/src/routes/cospend/payments/add/+page.svelte
+++ b/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: []
  };
@@ -21,6 +23,8 @@
  let splitAmounts = {};
  let loading = false;
  let error = null;
+  
+  $: categoryOptions = getCategoryOptions();

  onMount(() => {
    if (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>
--- a/src/routes/cospend/payments/edit/[id]/+page.svelte
+++ b/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;
--- a/src/routes/cospend/payments/view/[id]/+page.svelte
+++ b/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;
  }