mirrors/spliit
1
0
Fork 0
mirror of https://github.com/spliit-app/spliit.git synced 2026-02-26 01:16:12 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Empty state

Browse Source
This commit is contained in:
Sebastien Castiel
2023-12-06 12:50:46 -05:00
parent c72311d01a
commit 0bc3e0eedd
2 changed files with 59 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/app/groups/[groupId]/page.tsx
View File

@@ -49,62 +49,67 @@ export default async function GroupPage({
</Button> </Button>
</CardHeader> </CardHeader>
</div> </div>
<CardContent className="p-0"> <CardContent className="p-0">
<Table className=""> {expenses.length > 0 ? (
<TableHeader> <Table className="">
<TableRow> <TableHeader>
<TableHead>Title</TableHead> <TableRow>
<TableHead>Paid by</TableHead> <TableHead>Title</TableHead>
<TableHead>Paid for</TableHead> <TableHead>Paid by</TableHead>
<TableHead className="text-right">Amount</TableHead> <TableHead>Paid for</TableHead>
<TableHead className="w-0"></TableHead> <TableHead className="text-right">Amount</TableHead>
</TableRow> <TableHead className="w-0"></TableHead>
</TableHeader> </TableRow>
<TableBody> </TableHeader>
{expenses.map((expense) => ( <TableBody>
<TableRow key={expense.id}> {expenses.map((expense) => (
<TableCell>{expense.title}</TableCell> <TableRow key={expense.id}>
<TableCell> <TableCell>{expense.title}</TableCell>
<Badge variant="secondary"> <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}>
{ {
group.participants.find( group.participants.find(
(p) => p.id === paidFor.participantId, (p) => p.id === expense.paidById,
)?.name )?.name
} }
</Badge> </Badge>
))} </TableCell>
</TableCell> <TableCell className="flex flex-wrap gap-1">
<TableCell className="text-right tabular-nums"> {expense.paidFor.map((paidFor, index) => (
$ {expense.amount.toFixed(2)} <Badge variant="secondary" key={index}>
</TableCell> {
<TableCell> group.participants.find(
<Button (p) => p.id === paidFor.participantId,
size="icon" )?.name
variant="link" }
className="-my-2" </Badge>
asChild ))}
> </TableCell>
<Link <TableCell className="text-right tabular-nums">
href={`/groups/${groupId}/expenses/${expense.id}/edit`} $&nbsp;{expense.amount.toFixed(2)}
</TableCell>
<TableCell>
<Button
size="icon"
variant="link"
className="-my-2"
asChild
> >
<ChevronRight className="w-4 h-4" /> <Link
</Link> href={`/groups/${groupId}/expenses/${expense.id}/edit`}
</Button> >
</TableCell> <ChevronRight className="w-4 h-4" />
</TableRow> </Link>
))} </Button>
</TableBody> </TableCell>
</Table> </TableRow>
))}
</TableBody>
</Table>
) : (
<div className="p-6">Your group doesn’t have any expense yet.</div>
)}
</CardContent> </CardContent>
</Card> </Card>

10
src/components/expense-form.tsx
View File

@@ -56,12 +56,12 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
<CardHeader> <CardHeader>
<CardTitle>Expense information</CardTitle> <CardTitle>Expense information</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="grid grid-cols-2 gap-6"> <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
<FormField <FormField
control={form.control} control={form.control}
name="title" name="title"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="order-1">
<FormLabel>Expense title</FormLabel> <FormLabel>Expense title</FormLabel>
<FormControl> <FormControl>
<Input placeholder="Monday evening restaurant" {...field} /> <Input placeholder="Monday evening restaurant" {...field} />
@@ -78,7 +78,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
control={form.control} control={form.control}
name="paidBy" name="paidBy"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="order-3 sm:order-2">
<FormLabel>Paid by</FormLabel> <FormLabel>Paid by</FormLabel>
<Select <Select
onValueChange={field.onChange} onValueChange={field.onChange}
@@ -107,7 +107,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
control={form.control} control={form.control}
name="amount" name="amount"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="order-2 sm:order-3">
<FormLabel>Amount</FormLabel> <FormLabel>Amount</FormLabel>
<FormControl> <FormControl>
<Input <Input
@@ -128,7 +128,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
control={form.control} control={form.control}
name="paidFor" name="paidFor"
render={() => ( render={() => (
<FormItem> <FormItem className="order-4">
<div className="mb-4"> <div className="mb-4">
<FormLabel>Paid for</FormLabel> <FormLabel>Paid for</FormLabel>
<FormDescription> <FormDescription>