diff --git a/src/app/groups/[groupId]/expenses/active-user-balance.tsx b/src/app/groups/[groupId]/expenses/active-user-balance.tsx new file mode 100644 index 00000000..4382e64f --- /dev/null +++ b/src/app/groups/[groupId]/expenses/active-user-balance.tsx @@ -0,0 +1,43 @@ +'use client' +import { Money } from '@/components/money' +import { getBalances } from '@/lib/balances' +import { useActiveUser } from '@/lib/hooks' + +type Props = { + groupId: string + currency: string + expense: Parameters[0][number] +} + +export function ActiveUserBalance({ groupId, currency, expense }: Props) { + const activeUserId = useActiveUser(groupId) + if (activeUserId === null || activeUserId === '' || activeUserId === 'None') { + return null + } + + const balances = getBalances([expense]) + let fmtBalance = <>You are not involved + if (Object.hasOwn(balances, activeUserId)) { + const balance = balances[activeUserId] + let balanceDetail = <> + if (balance.paid > 0 && balance.paidFor > 0) { + balanceDetail = ( + <> + {' ('} + + {' - '} + + {')'} + + ) + } + fmtBalance = ( + <> + Your balance:{' '} + + {balanceDetail} + + ) + } + return
{fmtBalance}
+} diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx index 299f7358..1c61c471 100644 --- a/src/app/groups/[groupId]/expenses/expense-list.tsx +++ b/src/app/groups/[groupId]/expenses/expense-list.tsx @@ -1,4 +1,5 @@ 'use client' +import { ActiveUserBalance } from '@/app/groups/[groupId]/expenses/active-user-balance' import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon' import { Button } from '@/components/ui/button' import { SearchBar } from '@/components/ui/search-bar' @@ -151,6 +152,9 @@ export function ExpenseList({ ))} +
+ +
= 1 + ? 'text-green-600' + : '', + bold && 'font-bold', + )} + > + {formatCurrency(currency, amount)} + + ) +}