Fix balances display

src/app/groups/[groupId]/balances-list.tsx

@@ -40,21 +40,23 @@ export function BalancesList({ balances, participants, currency }: Props) {
             <div className="absolute inset-0 p-2 z-20">
               {currency} {(balances[participant.id]?.total ?? 0).toFixed(2)}
             </div>
-            <div
+            {balances[participant.id]?.total !== 0 && (
-              className={cn(
+              <div
-                'absolute top-1 h-7 z-10',
+                className={cn(
-                balances[participant.id]?.total > 0
+                  'absolute top-1 h-7 z-10',
-                  ? 'bg-green-200 left-0 rounded-r-lg border border-green-300'
+                  balances[participant.id]?.total > 0
-                  : 'bg-red-200 right-0 rounded-l-lg border  border-red-300',
+                    ? 'bg-green-200 left-0 rounded-r-lg border border-green-300'
-              )}
+                    : 'bg-red-200 right-0 rounded-l-lg border  border-red-300',
-              style={{
+                )}
-                width:
+                style={{
-                  (Math.abs(balances[participant.id]?.total ?? 0) /
+                  width:
-                    maxBalance) *
+                    (Math.abs(balances[participant.id]?.total ?? 0) /
-                    100 +
+                      maxBalance) *
-                  '%',
+                      100 +
-              }}
+                    '%',
-            ></div>
+                }}
+              ></div>
+            )}
           </div>
         </div>
       ))}

src/lib/balances.ts

@@ -50,9 +50,9 @@ function divide(total: number, count: number, isLast: boolean): number {
 export function getSuggestedReimbursements(
   balances: Balances,
 ): Reimbursement[] {
-  const balancesArray = Object.entries(balances).map(
+  const balancesArray = Object.entries(balances)
-    ([participantId, { total }]) => ({ participantId, total }),
+    .map(([participantId, { total }]) => ({ participantId, total }))
-  )
+    .filter((b) => b.total !== 0)
   balancesArray.sort((b1, b2) => b2.total - b1.total)
   const reimbursements: Reimbursement[] = []
   while (balancesArray.length > 1) {