fix rendering of user balance

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>
   );