From e60473e7ed3c256726097c5eea81cde7f89319e9 Mon Sep 17 00:00:00 2001
From: Emma Eilefsen Glenna <emma@eilefsen.net>
Date: Thu, 25 Jan 2024 21:44:03 +0100
Subject: [PATCH] fix rendering of user balance

---
 frontend/src/features/users/UserCard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/users/UserCard.tsx b/frontend/src/features/users/UserCard.tsx
index b89d104..0a18da8 100644
--- a/frontend/src/features/users/UserCard.tsx
+++ b/frontend/src/features/users/UserCard.tsx
@@ -3,6 +3,7 @@ import React, { MouseEventHandler } from "react";
 
 import { AllUsersQuery } from "../../types";
 import styles from "./UserCard.module.css";
+import {formatCurrency} from "../../utils/currency";
 
 type UserCardProps = {
   user: AllUsersQuery["allUsers"][0] | null;
@@ -13,6 +14,7 @@ type UserCardProps = {
 /** If user is null, then it's the special external user */
 export const UserCard = ({ user, onUser, active = false }: UserCardProps): JSX.Element => {
   const classes = clsx(styles.user, { [styles.active]: active });
+  const userBalanceString = formatCurrency(Number(user?.profile?.balance));
   return (
     <button className={classes} onClick={onUser} type="button" title={user?.firstName || "Ekstern"}>
       <div className={styles.avatarWrap}>
@@ -27,7 +29,7 @@ export const UserCard = ({ user, onUser, active = false }: UserCardProps): JSX.E
       </div>
       <div className={styles.meta}>
         {user?.firstName || "Ekstern"}
-        <span className={styles.balance}>{Number(user?.profile?.balance) || ""}</span>
+        <span className={styles.balance}>{userBalanceString}</span>
       </div>
     </button>
   );