🎉 init

2026-07-01 15:43:18 +02:00
commit 2f492c55be
64 changed files with 11645 additions and 0 deletions
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { ExpenseView, ParticipantView } from '../types'
+
+const props = defineProps<{
+  participants: ParticipantView[]
+  currency: string
+  editing?: ExpenseView | null
+  defaultPayerId?: number
+}>()
+
+const emit = defineEmits<{
+  submit: [payload: { description: string, amountCents: number, payerId: number, participantIds: number[] }]
+  cancel: []
+}>()
+
+const description = ref(props.editing?.description ?? '')
+const amount = ref(props.editing ? fromCents(props.editing.amountCents).toString() : '')
+const payerId = ref<number>(props.editing?.payerId ?? props.defaultPayerId ?? props.participants[0]?.id)
+const selectedIds = ref<number[]>(props.editing?.participantIds ?? props.participants.map(p => p.id))
+const error = ref('')
+
+function toggleParticipant(id: number) {
+  if (selectedIds.value.includes(id)) {
+    selectedIds.value = selectedIds.value.filter(existing => existing !== id)
+  }
+  else {
+    selectedIds.value = [...selectedIds.value, id]
+  }
+}
+
+function onSubmit() {
+  error.value = ''
+  const amountCents = toCents(Number(amount.value))
+
+  if (!description.value.trim()) {
+    error.value = 'Description is required.'
+    return
+  }
+  if (!Number.isFinite(amountCents) || amountCents <= 0) {
+    error.value = 'Enter a valid amount.'
+    return
+  }
+  if (selectedIds.value.length === 0) {
+    error.value = 'Select at least one participant to split with.'
+    return
+  }
+
+  emit('submit', {
+    description: description.value.trim(),
+    amountCents,
+    payerId: payerId.value,
+    participantIds: selectedIds.value,
+  })
+}
+</script>
+
+<template>
+  <form class="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm dark:border-stone-800 dark:bg-stone-900" @submit.prevent="onSubmit">
+    <div>
+      <label for="description" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Description</label>
+      <input
+        id="description"
+        v-model="description"
+        type="text"
+        required
+        class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
+        placeholder="Dinner, taxi, groceries…"
+      >
+    </div>
+
+    <div>
+      <label for="amount" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
+        Amount ({{ currency }})
+      </label>
+      <input
+        id="amount"
+        v-model="amount"
+        type="number"
+        step="0.01"
+        min="0.01"
+        required
+        class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm placeholder:text-stone-400 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
+        placeholder="0.00"
+      >
+    </div>
+
+    <div>
+      <label for="payer" class="block text-sm font-medium text-stone-700 dark:text-stone-300">Paid by</label>
+      <select
+        id="payer"
+        v-model="payerId"
+        class="mt-1 block w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-base text-stone-900 shadow-sm focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-200 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:focus:ring-orange-900"
+      >
+        <option v-for="participant in participants" :key="participant.id" :value="participant.id">
+          {{ participant.name }}
+        </option>
+      </select>
+    </div>
+
+    <div>
+      <span class="block text-sm font-medium text-stone-700 dark:text-stone-300">Split equally among</span>
+      <div class="mt-2 flex flex-wrap gap-2">
+        <button
+          v-for="participant in participants"
+          :key="participant.id"
+          type="button"
+          class="rounded-full border px-3 py-1.5 text-sm font-medium transition-colors"
+          :class="selectedIds.includes(participant.id)
+            ? 'border-orange-400 bg-orange-100 text-orange-800 dark:border-orange-700 dark:bg-orange-900/40 dark:text-orange-200'
+            : 'border-stone-300 bg-white text-stone-600 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-400'"
+          @click="toggleParticipant(participant.id)"
+        >
+          {{ participant.name }}
+        </button>
+      </div>
+    </div>
+
+    <p v-if="error" class="text-sm text-rose-600 dark:text-rose-400">
+      {{ error }}
+    </p>
+
+    <div class="flex gap-3">
+      <button
+        type="button"
+        class="flex-1 rounded-xl border border-stone-300 px-4 py-2 font-medium text-stone-700 dark:border-stone-700 dark:text-stone-300"
+        @click="emit('cancel')"
+      >
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="flex-1 rounded-xl bg-orange-500 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-orange-600 active:bg-orange-600"
+      >
+        {{ editing ? 'Save changes' : 'Add expense' }}
+      </button>
+    </div>
+  </form>
+</template>