🎉 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>
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { ParticipantView, SettlementView } from '../types'
+
+const props = defineProps<{
+  slug: string
+  participants: ParticipantView[]
+  netBalances: Record<number, number>
+  settlements: SettlementView[]
+  currency: string
+}>()
+
+const emit = defineEmits<{ settled: [] }>()
+
+const settlingKey = ref<string | null>(null)
+
+function nameOf(id: number) {
+  return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
+}
+
+function paypalLinkOf(id: number) {
+  return props.participants.find(p => p.id === id)?.paypalLink || null
+}
+
+function initialOf(participantName: string) {
+  return participantName.trim().charAt(0).toUpperCase() || '?'
+}
+
+function keyOf(settlement: SettlementView) {
+  return `${settlement.fromId}-${settlement.toId}-${settlement.amountCents}`
+}
+
+async function markSettled(settlement: SettlementView) {
+  const key = keyOf(settlement)
+  settlingKey.value = key
+  try {
+    await $fetch(`/api/pots/${props.slug}/payments`, {
+      method: 'POST',
+      body: { fromId: settlement.fromId, toId: settlement.toId, amountCents: settlement.amountCents },
+    })
+    emit('settled')
+  }
+  finally {
+    settlingKey.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <p v-if="participants.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
+      No one's in this Pot yet. Add people from the settings page.
+    </p>
+
+    <ul v-else class="space-y-2">
+      <li
+        v-for="participant in participants"
+        :key="participant.id"
+        class="flex items-center justify-between gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-sm dark:border-stone-800 dark:bg-stone-900"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-sm font-semibold text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
+            {{ initialOf(participant.name) }}
+          </div>
+          <span class="truncate font-medium text-stone-900 dark:text-stone-100">{{ participant.name }}</span>
+          <a
+            v-if="participant.paypalLink"
+            :href="participant.paypalLink"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="shrink-0 text-xs font-medium text-orange-600 hover:underline dark:text-orange-400"
+          >
+            PayPal
+          </a>
+        </div>
+        <span
+          class="shrink-0 text-sm font-semibold"
+          :class="{
+            'text-emerald-600 dark:text-emerald-400': (netBalances[participant.id] ?? 0) > 0,
+            'text-rose-600 dark:text-rose-400': (netBalances[participant.id] ?? 0) < 0,
+            'text-stone-400 dark:text-stone-500': (netBalances[participant.id] ?? 0) === 0,
+          }"
+        >
+          <template v-if="(netBalances[participant.id] ?? 0) === 0">
+            settled up
+          </template>
+          <template v-else>
+            {{ (netBalances[participant.id] ?? 0) > 0 ? '+' : '−' }}{{ formatCurrency(Math.abs(netBalances[participant.id] ?? 0), currency) }}
+          </template>
+        </span>
+      </li>
+    </ul>
+
+    <div v-if="participants.length > 0" class="space-y-2">
+      <h2 class="text-sm font-medium text-orange-600 dark:text-orange-400">
+        Suggested payments
+      </h2>
+
+      <p v-if="settlements.length === 0" class="text-sm text-stone-500 dark:text-stone-400">
+        Everyone is settled up.
+      </p>
+      <ul v-else class="space-y-2">
+        <li
+          v-for="settlement in settlements"
+          :key="keyOf(settlement)"
+          class="space-y-2 rounded-2xl border border-orange-100 bg-gradient-to-r from-orange-50 to-amber-50 p-3 dark:border-orange-900/60 dark:from-orange-950/40 dark:to-amber-950/30"
+        >
+          <div class="flex items-center gap-2">
+            <div class="flex min-w-0 flex-1 items-center gap-2">
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800">
+                {{ initialOf(nameOf(settlement.fromId)) }}
+              </div>
+              <span class="truncate text-sm font-medium text-stone-700 dark:text-stone-300">{{ nameOf(settlement.fromId) }}</span>
+
+              <svg class="h-4 w-4 shrink-0 text-orange-400 dark:text-orange-500" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L11.29 6.15a.75.75 0 1 1 1.02-1.1l4.5 4.25a.75.75 0 0 1 0 1.1l-4.5 4.25a.75.75 0 1 1-1.02-1.1l3.098-3.1H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
+              </svg>
+
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-xs font-semibold text-orange-700 shadow-sm ring-1 ring-orange-200 dark:bg-stone-900 dark:text-orange-300 dark:ring-orange-800">
+                {{ initialOf(nameOf(settlement.toId)) }}
+              </div>
+              <span class="truncate text-sm font-medium text-stone-700 dark:text-stone-300">{{ nameOf(settlement.toId) }}</span>
+            </div>
+
+            <span class="shrink-0 rounded-full bg-white px-2.5 py-1 text-sm font-bold text-orange-700 shadow-sm dark:bg-stone-900 dark:text-orange-300">
+              {{ formatCurrency(settlement.amountCents, currency) }}
+            </span>
+          </div>
+
+          <div class="flex items-center justify-end gap-2">
+            <a
+              v-if="paypalLinkOf(settlement.toId)"
+              :href="paypalLinkOf(settlement.toId)!"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="rounded-full border border-orange-300 px-3 py-1 text-xs font-medium text-orange-700 transition-colors hover:bg-white dark:border-orange-800 dark:text-orange-300 dark:hover:bg-stone-900"
+            >
+              Pay via PayPal
+            </a>
+            <button
+              type="button"
+              :disabled="settlingKey === keyOf(settlement)"
+              class="rounded-full bg-orange-500 px-3 py-1 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-orange-600 disabled:opacity-50"
+              @click="markSettled(settlement)"
+            >
+              {{ settlingKey === keyOf(settlement) ? 'Marking…' : 'Mark as paid' }}
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { ExpenseView, ParticipantView } from '../types'
+
+const props = defineProps<{
+  expenses: ExpenseView[]
+  participants: ParticipantView[]
+  currency: string
+}>()
+
+const emit = defineEmits<{ edit: [expense: ExpenseView], remove: [id: number] }>()
+
+const expandedId = ref<number | null>(null)
+
+function nameOf(id: number) {
+  return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
+}
+
+function namesOf(ids: number[]) {
+  return ids.map(nameOf).join(', ')
+}
+
+function toggle(id: number) {
+  expandedId.value = expandedId.value === id ? null : id
+}
+
+const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a.createdAt))
+</script>
+
+<template>
+  <div class="space-y-3">
+    <p v-if="expenses.length === 0" class="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-sm text-stone-500 dark:border-stone-700 dark:text-stone-400">
+      No expenses yet. Add the first one below.
+    </p>
+
+    <div
+      v-for="expense in sorted"
+      :key="expense.id"
+      class="rounded-2xl border p-4 shadow-sm"
+      :class="expense.type === 'payment'
+        ? 'border-emerald-100 bg-emerald-50/60 dark:border-emerald-900/60 dark:bg-emerald-950/20'
+        : 'border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-900'"
+    >
+      <button type="button" class="flex w-full items-start justify-between gap-2 text-left" @click="toggle(expense.id)">
+        <div v-if="expense.type === 'payment'" class="flex min-w-0 items-center gap-2">
+          <svg class="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+          </svg>
+          <p class="truncate font-medium text-emerald-800 dark:text-emerald-300">
+            {{ nameOf(expense.payerId) }} paid {{ nameOf(expense.participantIds[0]) }}
+          </p>
+        </div>
+        <div v-else class="min-w-0">
+          <p class="truncate font-medium text-stone-900 dark:text-stone-100">
+            {{ expense.description }}
+          </p>
+          <p class="text-sm text-stone-500 dark:text-stone-400">
+            paid by {{ nameOf(expense.payerId) }}
+          </p>
+        </div>
+        <div class="flex shrink-0 items-center gap-2">
+          <span
+            class="font-medium"
+            :class="expense.type === 'payment' ? 'text-emerald-700 dark:text-emerald-300' : 'text-stone-900 dark:text-stone-100'"
+          >
+            {{ formatCurrency(expense.amountCents, currency) }}
+          </span>
+          <svg
+            class="h-4 w-4 shrink-0 text-stone-400 transition-transform"
+            :class="{ 'rotate-180': expandedId === expense.id }"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.148l3.71-3.918a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
+          </svg>
+        </div>
+      </button>
+
+      <div
+        v-if="expandedId === expense.id"
+        class="mt-3 space-y-3 border-t pt-3"
+        :class="expense.type === 'payment' ? 'border-emerald-100 dark:border-emerald-900/60' : 'border-stone-100 dark:border-stone-800'"
+      >
+        <p v-if="expense.type === 'expense'" class="text-xs text-stone-400 dark:text-stone-500">
+          split among {{ namesOf(expense.participantIds) }}
+        </p>
+        <div class="flex gap-3">
+          <button
+            v-if="expense.type === 'expense'"
+            type="button"
+            class="text-sm font-medium text-orange-600 dark:text-orange-400"
+            @click="emit('edit', expense)"
+          >
+            Edit
+          </button>
+          <button
+            type="button"
+            class="text-sm font-medium text-rose-600 dark:text-rose-400"
+            @click="emit('remove', expense.id)"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps<{ title?: string, buttonLabel?: string }>()
+const emit = defineEmits<{ submit: [name: string] }>()
+
+const name = ref('')
+
+function onSubmit() {
+  if (!name.value.trim()) return
+  emit('submit', name.value.trim())
+}
+</script>
+
+<template>
+  <form class="space-y-3" @submit.prevent="onSubmit">
+    <div>
+      <label for="name" class="block text-sm font-medium text-stone-700 dark:text-stone-300">
+        {{ props.title ?? 'What\'s your name?' }}
+      </label>
+      <input
+        id="name"
+        v-model="name"
+        type="text"
+        autocomplete="name"
+        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-900 dark:text-stone-100 dark:placeholder:text-stone-500 dark:focus:ring-orange-900"
+        placeholder="Your name"
+      >
+    </div>
+    <button
+      type="submit"
+      class="w-full 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"
+    >
+      {{ props.buttonLabel ?? 'Continue' }}
+    </button>
+  </form>
+</template>