anbraten/splitt-the-bill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 add env to useDb and apply prettier
tinyedge/deploy Deployed by TinyEdge
Details

Browse Source
This commit is contained in:
anbraten
2026-08-07 13:28:26 +02:00
parent 67727f96ab
commit cbe1b42f6e
54 changed files with 5492 additions and 2406 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ExpenseList.vue
+68 -25
View File
@@ -1,34 +1,42 @@
<script setup lang="ts">
import type { ExpenseView, ParticipantView } from '../types'
import type { ExpenseView, ParticipantView } from '../types';
const props = defineProps<{
expenses: ExpenseView[]
participants: ParticipantView[]
currency: string
}>()
expenses: ExpenseView[];
participants: ParticipantView[];
currency: string;
}>();
const emit = defineEmits<{ edit: [expense: ExpenseView], remove: [id: number] }>()
const emit = defineEmits<{
edit: [expense: ExpenseView];
remove: [id: number];
}>();
const expandedId = ref<number | null>(null)
const expandedId = ref<number | null>(null);
function nameOf(id: number) {
return props.participants.find(p => p.id === id)?.name ?? 'Unknown'
return props.participants.find((p) => p.id === id)?.name ?? 'Unknown';
}
function namesOf(ids: number[]) {
return ids.map(nameOf).join(', ')
return ids.map(nameOf).join(', ');
}
function toggle(id: number) {
expandedId.value = expandedId.value === id ? null : id
expandedId.value = expandedId.value === id ? null : id;
}
const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a.createdAt))
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">
<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>
@@ -36,17 +44,37 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
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'"
: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" />
<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
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">
@@ -60,7 +88,11 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
<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'"
:class="
expense.type === 'payment'
? 'text-emerald-700 dark:text-emerald-300'
: 'text-stone-900 dark:text-stone-100'
"
>
{{ formatCurrency(expense.amountCents, currency) }}
</span>
@@ -70,7 +102,11 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
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" />
<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>
@@ -78,9 +114,16 @@ const sorted = computed(() => [...props.expenses].sort((a, b) => b.createdAt - a
<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'"
: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">
<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">