diff options
| -rw-r--r-- | src/app/groups/[groupId]/page.tsx | 103 | ||||
| -rw-r--r-- | src/components/expense-form.tsx | 10 |
2 files changed, 59 insertions, 54 deletions
diff --git a/src/app/groups/[groupId]/page.tsx b/src/app/groups/[groupId]/page.tsx index 9547fcc..b7dc93f 100644 --- a/src/app/groups/[groupId]/page.tsx +++ b/src/app/groups/[groupId]/page.tsx @@ -49,62 +49,67 @@ export default async function GroupPage({ </Button> </CardHeader> </div> + <CardContent className="p-0"> - <Table className=""> - <TableHeader> - <TableRow> - <TableHead>Title</TableHead> - <TableHead>Paid by</TableHead> - <TableHead>Paid for</TableHead> - <TableHead className="text-right">Amount</TableHead> - <TableHead className="w-0"></TableHead> - </TableRow> - </TableHeader> - <TableBody> - {expenses.map((expense) => ( - <TableRow key={expense.id}> - <TableCell>{expense.title}</TableCell> - <TableCell> - <Badge variant="secondary"> - { - group.participants.find( - (p) => p.id === expense.paidById, - )?.name - } - </Badge> - </TableCell> - <TableCell className="flex flex-wrap gap-1"> - {expense.paidFor.map((paidFor, index) => ( - <Badge variant="secondary" key={index}> + {expenses.length > 0 ? ( + <Table className=""> + <TableHeader> + <TableRow> + <TableHead>Title</TableHead> + <TableHead>Paid by</TableHead> + <TableHead>Paid for</TableHead> + <TableHead className="text-right">Amount</TableHead> + <TableHead className="w-0"></TableHead> + </TableRow> + </TableHeader> + <TableBody> + {expenses.map((expense) => ( + <TableRow key={expense.id}> + <TableCell>{expense.title}</TableCell> + <TableCell> + <Badge variant="secondary"> { group.participants.find( - (p) => p.id === paidFor.participantId, + (p) => p.id === expense.paidById, )?.name } </Badge> - ))} - </TableCell> - <TableCell className="text-right tabular-nums"> - $ {expense.amount.toFixed(2)} - </TableCell> - <TableCell> - <Button - size="icon" - variant="link" - className="-my-2" - asChild - > - <Link - href={`/groups/${groupId}/expenses/${expense.id}/edit`} + </TableCell> + <TableCell className="flex flex-wrap gap-1"> + {expense.paidFor.map((paidFor, index) => ( + <Badge variant="secondary" key={index}> + { + group.participants.find( + (p) => p.id === paidFor.participantId, + )?.name + } + </Badge> + ))} + </TableCell> + <TableCell className="text-right tabular-nums"> + $ {expense.amount.toFixed(2)} + </TableCell> + <TableCell> + <Button + size="icon" + variant="link" + className="-my-2" + asChild > - <ChevronRight className="w-4 h-4" /> - </Link> - </Button> - </TableCell> - </TableRow> - ))} - </TableBody> - </Table> + <Link + href={`/groups/${groupId}/expenses/${expense.id}/edit`} + > + <ChevronRight className="w-4 h-4" /> + </Link> + </Button> + </TableCell> + </TableRow> + ))} + </TableBody> + </Table> + ) : ( + <div className="p-6">Your group doesn’t have any expense yet.</div> + )} </CardContent> </Card> diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index f7826c6..12bdb2e 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -56,12 +56,12 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) { <CardHeader> <CardTitle>Expense information</CardTitle> </CardHeader> - <CardContent className="grid grid-cols-2 gap-6"> + <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6"> <FormField control={form.control} name="title" render={({ field }) => ( - <FormItem> + <FormItem className="order-1"> <FormLabel>Expense title</FormLabel> <FormControl> <Input placeholder="Monday evening restaurant" {...field} /> @@ -78,7 +78,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) { control={form.control} name="paidBy" render={({ field }) => ( - <FormItem> + <FormItem className="order-3 sm:order-2"> <FormLabel>Paid by</FormLabel> <Select onValueChange={field.onChange} @@ -107,7 +107,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) { control={form.control} name="amount" render={({ field }) => ( - <FormItem> + <FormItem className="order-2 sm:order-3"> <FormLabel>Amount</FormLabel> <FormControl> <Input @@ -128,7 +128,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) { control={form.control} name="paidFor" render={() => ( - <FormItem> + <FormItem className="order-4"> <div className="mb-4"> <FormLabel>Paid for</FormLabel> <FormDescription> |