diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/groups/[groupId]/page.tsx | 4 | ||||
| -rw-r--r-- | src/components/expense-form.tsx | 23 | ||||
| -rw-r--r-- | src/components/group-form.tsx | 26 | ||||
| -rw-r--r-- | src/lib/api.ts | 2 | ||||
| -rw-r--r-- | src/lib/schemas.ts | 4 |
5 files changed, 46 insertions, 13 deletions
diff --git a/src/app/groups/[groupId]/page.tsx b/src/app/groups/[groupId]/page.tsx index b7dc93f..83fc3ef 100644 --- a/src/app/groups/[groupId]/page.tsx +++ b/src/app/groups/[groupId]/page.tsx @@ -86,8 +86,8 @@ export default async function GroupPage({ </Badge> ))} </TableCell> - <TableCell className="text-right tabular-nums"> - $ {expense.amount.toFixed(2)} + <TableCell className="text-right tabular-nums whitespace-nowrap"> + {group.currency} {expense.amount.toFixed(2)} </TableCell> <TableCell> <Button diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index 3202788..6420bc6 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -118,16 +118,19 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) { render={({ field }) => ( <FormItem className="order-2 sm:order-3"> <FormLabel>Amount</FormLabel> - <FormControl> - <Input - className="text-base" - type="number" - min={0.01} - step={0.01} - placeholder="0.00" - {...field} - /> - </FormControl> + <div className="flex items-baseline gap-2"> + <span>{group.currency}</span> + <FormControl> + <Input + className="text-base max-w-[120px]" + type="number" + min={0.01} + step={0.01} + placeholder="0.00" + {...field} + /> + </FormControl> + </div> <FormDescription>Enter the expense amount.</FormDescription> <FormMessage /> </FormItem> diff --git a/src/components/group-form.tsx b/src/components/group-form.tsx index 2e21aea..1057f27 100644 --- a/src/components/group-form.tsx +++ b/src/components/group-form.tsx @@ -36,10 +36,12 @@ export function GroupForm({ group, onSubmit }: Props) { defaultValues: group ? { name: group.name, + currency: group.currency, participants: group.participants, } : { name: '', + currency: '', participants: [{ name: 'John' }, { name: 'Jane' }, { name: 'Jack' }], }, }) @@ -60,7 +62,7 @@ export function GroupForm({ group, onSubmit }: Props) { <CardHeader> <CardTitle>Group information</CardTitle> </CardHeader> - <CardContent> + <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <FormField control={form.control} name="name" @@ -81,6 +83,28 @@ export function GroupForm({ group, onSubmit }: Props) { </FormItem> )} /> + + <FormField + control={form.control} + name="currency" + render={({ field }) => ( + <FormItem> + <FormLabel>Currency symbol</FormLabel> + <FormControl> + <Input + className="text-base" + placeholder="$, €, £…" + max={5} + {...field} + /> + </FormControl> + <FormDescription> + We’ll used it to display amounts. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> </CardContent> </Card> <Card> diff --git a/src/lib/api.ts b/src/lib/api.ts index ed3acb1..4fd4c39 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -9,6 +9,7 @@ export async function createGroup(groupFormValues: GroupFormValues) { data: { id: uuidv4(), name: groupFormValues.name, + currency: groupFormValues.currency, participants: { createMany: { data: groupFormValues.participants.map(({ name }) => ({ @@ -120,6 +121,7 @@ export async function updateGroup( where: { id: groupId }, data: { name: groupFormValues.name, + currency: groupFormValues.currency, participants: { deleteMany: existingGroup.participants.filter( (p) => !groupFormValues.participants.some((p2) => p2.id === p.id), diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index 0219491..6f0c15c 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -6,6 +6,10 @@ export const groupFormSchema = z .string() .min(2, 'Enter at least two characters.') .max(50, 'Enter at most 50 characters.'), + currency: z + .string() + .min(1, 'Enter at least one character.') + .max(5, 'Enter at most five characters.'), participants: z .array( z.object({ |