From be0964d9e1d110ff647d3d6433835786b88f9435 Mon Sep 17 00:00:00 2001
From: Lauri Vuorela <lauri.vuorela@gmail.com>
Date: Mon, 5 Feb 2024 02:16:30 +0100
Subject: [PATCH] format currency with thousand separators (#81)

---
 src/app/groups/[groupId]/balances-list.tsx               | 4 ++--
 .../[groupId]/expenses/create-from-receipt-button.tsx    | 6 ++----
 src/app/groups/[groupId]/expenses/expense-list.tsx       | 4 ++--
 src/app/groups/[groupId]/reimbursement-list.tsx          | 5 ++---
 src/lib/utils.ts                                         | 9 +++++++++
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/app/groups/[groupId]/balances-list.tsx b/src/app/groups/[groupId]/balances-list.tsx
index 5e7b81b..b795914 100644
--- a/src/app/groups/[groupId]/balances-list.tsx
+++ b/src/app/groups/[groupId]/balances-list.tsx
@@ -1,5 +1,5 @@
 import { Balances } from '@/lib/balances'
-import { cn } from '@/lib/utils'
+import { cn, formatCurrency } from '@/lib/utils'
 import { Participant } from '@prisma/client'
 
 type Props = {
@@ -28,7 +28,7 @@ export function BalancesList({ balances, participants, currency }: Props) {
             </div>
             <div className={cn('w-1/2 relative', isLeft || 'text-right')}>
               <div className="absolute inset-0 p-2 z-20">
-                {currency} {(balance / 100).toFixed(2)}
+                {formatCurrency(currency, balance)}
               </div>
               {balance !== 0 && (
                 <div
diff --git a/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx b/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
index b6df672..c157cc9 100644
--- a/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
+++ b/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
@@ -26,7 +26,7 @@ import {
 import { ToastAction } from '@/components/ui/toast'
 import { useToast } from '@/components/ui/use-toast'
 import { useMediaQuery } from '@/lib/hooks'
-import { formatExpenseDate } from '@/lib/utils'
+import { formatCurrency, formatExpenseDate } from '@/lib/utils'
 import { Category } from '@prisma/client'
 import { ChevronRight, FileQuestion, Loader2, Receipt } from 'lucide-react'
 import { getImageData, usePresignedUpload } from 'next-s3-upload'
@@ -185,9 +185,7 @@ export function CreateFromReceiptButton({
               <div>
                 {receiptInfo ? (
                   receiptInfo.amount ? (
-                    <>
-                      {groupCurrency} {receiptInfo.amount.toFixed(2)}
-                    </>
+                    <>{formatCurrency(groupCurrency, receiptInfo.amount)}</>
                   ) : (
                     <Unknown />
                   )
diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
index a97c2bd..cc908af 100644
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -3,7 +3,7 @@ import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
 import { Button } from '@/components/ui/button'
 import { SearchBar } from '@/components/ui/search-bar'
 import { getGroupExpenses } from '@/lib/api'
-import { cn, formatExpenseDate } from '@/lib/utils'
+import { cn, formatCurrency, formatExpenseDate } from '@/lib/utils'
 import { Expense, Participant } from '@prisma/client'
 import dayjs, { type Dayjs } from 'dayjs'
 import { ChevronRight } from 'lucide-react'
@@ -156,7 +156,7 @@ export function ExpenseList({
                       expense.isReimbursement ? 'italic' : 'font-bold',
                     )}
                   >
-                    {currency} {(expense.amount / 100).toFixed(2)}
+                    {formatCurrency(currency, expense.amount)}
                   </div>
                   <div className="text-xs text-muted-foreground">
                     {formatExpenseDate(expense.expenseDate)}
diff --git a/src/app/groups/[groupId]/reimbursement-list.tsx b/src/app/groups/[groupId]/reimbursement-list.tsx
index 54ee9d7..8031aa5 100644
--- a/src/app/groups/[groupId]/reimbursement-list.tsx
+++ b/src/app/groups/[groupId]/reimbursement-list.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { Reimbursement } from '@/lib/balances'
+import { formatCurrency } from '@/lib/utils'
 import { Participant } from '@prisma/client'
 import Link from 'next/link'
 
@@ -42,9 +43,7 @@ export function ReimbursementList({
               </Link>
             </Button>
           </div>
-          <div>
-            {currency} {(reimbursement.amount / 100).toFixed(2)}
-          </div>
+          <div>{formatCurrency(currency, reimbursement.amount)}</div>
         </div>
       ))}
     </div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 39477d1..2ce486c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -20,3 +20,12 @@ export function formatExpenseDate(date: Date) {
 export function formatCategoryForAIPrompt(category: Category) {
   return `"${category.grouping}/${category.name}" (ID: ${category.id})`
 }
+
+export function formatCurrency(currency: string, amount: number) {
+  const format = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })
+  const formattedAmount = format.format(amount / 100)
+  return `${currency} ${formattedAmount}`
+}