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

Improve design for expense list

Browse Source
This commit is contained in:
Sebastien Castiel
2024-01-10 08:21:12 -05:00
parent 9c728530c9
commit f20ebd5bdd
2 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/groups/[groupId]/expenses/expense-list.tsx
View File

@@ -48,20 +48,20 @@ export function ExpenseList({
<div <div
key={expense.id} key={expense.id}
className={cn( className={cn(
'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-accent gap-1', 'border-t flex justify-between px-4 sm:pr-2 sm:pl-6 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
expense.isReimbursement && 'italic', expense.isReimbursement && 'italic',
)} )}
onClick={() => { onClick={() => {
router.push(`/groups/${groupId}/expenses/${expense.id}/edit`) router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
}} }}
> >
<div> <div className="flex-1">
<div className={cn('mb-1', expense.isReimbursement && 'italic')}> <div className={cn('mb-1', expense.isReimbursement && 'italic')}>
{expense.title} {expense.title}
</div> </div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Paid by <strong>{getParticipant(expense.paidById)?.name}</strong> on{' '} Paid by <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
{formatDate(expense.expenseDate)} for{' '} for{' '}
{expense.paidFor.map((paidFor, index) => ( {expense.paidFor.map((paidFor, index) => (
<Fragment key={index}> <Fragment key={index}>
{index !== 0 && <>, </>} {index !== 0 && <>, </>}
@@ -75,7 +75,7 @@ export function ExpenseList({
))} ))}
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex flex-col justify-between items-end">
<div <div
className={cn( className={cn(
'tabular-nums whitespace-nowrap', 'tabular-nums whitespace-nowrap',
@@ -84,12 +84,20 @@ export function ExpenseList({
> >
{currency} {(expense.amount / 100).toFixed(2)} {currency} {(expense.amount / 100).toFixed(2)}
</div> </div>
<Button size="icon" variant="link" className="-my-2" asChild> <div className="text-xs text-muted-foreground">
<Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}> {formatDate(expense.expenseDate)}
<ChevronRight className="w-4 h-4" /> </div>
</Link>
</Button>
</div> </div>
<Button
size="icon"
variant="link"
className="self-center hidden sm:flex"
asChild
>
<Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
<ChevronRight className="w-4 h-4" />
</Link>
</Button>
</div> </div>
)) ))
) : ( ) : (

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

@@ -30,15 +30,15 @@ export default async function GroupExpensesPage({
return ( return (
<> <>
<Card className="mb-4"> <Card className="mb-4 rounded-none -mx-4 border-x-0 sm:border-x sm:rounded-lg sm:mx-0">
<div className="flex flex-1"> <div className="flex flex-1">
<CardHeader className="flex-1"> <CardHeader className="flex-1 p-4 sm:p-6">
<CardTitle>Expenses</CardTitle> <CardTitle>Expenses</CardTitle>
<CardDescription> <CardDescription>
Here are the expenses that you created for your group. Here are the expenses that you created for your group.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardHeader> <CardHeader className="p-4 sm:p-6">
<Button asChild size="icon"> <Button asChild size="icon">
<Link href={`/groups/${groupId}/expenses/create`}> <Link href={`/groups/${groupId}/expenses/create`}>
<Plus /> <Plus />