From c025c6f2ce032611ad6baaf0907a5a57b22c52ba Mon Sep 17 00:00:00 2001 From: Knee Cola Date: Sat, 22 Nov 2025 23:04:42 +0100 Subject: [PATCH] Update formatCurrency to use currency code from UserSettings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changes: - Updated formatCurrency function: - Added currencyCode parameter with EUR default - Implemented Intl.NumberFormat for proper currency formatting - Added fallback for invalid currency codes - Updated component hierarchy to pass currency: - HomePage: Fetch userSettings and pass to MonthLocationList - MonthLocationList: Accept and pass currency to child components - LocationCard: Accept currency prop and use in formatCurrency - MonthCard: Accept currency prop and use in formatCurrency - ViewLocationCard: Pass currency from userSettings to formatCurrency - Removed hardcoded $ symbols, now using proper currency formatting All currency amounts now display with the user's selected currency code from their settings, using locale-appropriate formatting (hr-HR). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/lib/formatStrings.ts | 22 +++++++++++++++++----- app/ui/HomePage.tsx | 6 ++++-- app/ui/LocationCard.tsx | 7 ++++--- app/ui/MonthCard.tsx | 7 ++++--- app/ui/MonthLocationList.tsx | 14 ++++++++------ app/ui/ViewLocationCard.tsx | 2 +- 6 files changed, 38 insertions(+), 20 deletions(-) diff --git a/app/lib/formatStrings.ts b/app/lib/formatStrings.ts index 3006c17..7400062 100644 --- a/app/lib/formatStrings.ts +++ b/app/lib/formatStrings.ts @@ -1,9 +1,21 @@ -export const formatCurrency = (amount:number) => { - // format number wirh 2 decimal places and a thousand separator +export const formatCurrency = (amount: number, currencyCode: string = "EUR") => { + // format number with 2 decimal places and a thousand separator // amount is in cents - const formattedAmount = (amount/100).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); - return(formattedAmount); - } + const amountInUnits = amount / 100; + + // Use Intl.NumberFormat for proper currency formatting + try { + return new Intl.NumberFormat('hr-HR', { + style: 'currency', + currency: currencyCode, + minimumFractionDigits: 2, + maximumFractionDigits: 2, + }).format(amountInUnits); + } catch (e) { + // Fallback if invalid currency code + console.error(`Invalid currency code: ${currencyCode}`, e); + } +} /** * Formats an IBAN for display with proper spacing diff --git a/app/ui/HomePage.tsx b/app/ui/HomePage.tsx index df76dc6..d1f152d 100644 --- a/app/ui/HomePage.tsx +++ b/app/ui/HomePage.tsx @@ -1,5 +1,6 @@ import { fetchAllLocations } from '@/app/lib/actions/locationActions'; import { fetchAvailableYears } from '@/app/lib/actions/monthActions'; +import { getUserSettings } from '@/app/lib/actions/userSettingsActions'; import { BillingLocation, YearMonth } from '@/app/lib/db-types'; import { FC } from 'react'; import { MonthLocationList } from '@/app/ui/MonthLocationList'; @@ -33,8 +34,9 @@ export const HomePage:FC = async ({ searchParams }) => { } const currentYear = Number(searchParams?.year) || new Date().getFullYear(); - + const locations = await fetchAllLocations(currentYear); + const userSettings = await getUserSettings(); // group locations by month const months = locations.reduce((acc, location) => { @@ -69,7 +71,7 @@ export const HomePage:FC = async ({ searchParams }) => { } }); return ( - + ); } diff --git a/app/ui/LocationCard.tsx b/app/ui/LocationCard.tsx index 1e807f6..998ee10 100644 --- a/app/ui/LocationCard.tsx +++ b/app/ui/LocationCard.tsx @@ -11,10 +11,11 @@ import { useLocale, useTranslations } from "next-intl"; import { toast } from "react-toastify"; export interface LocationCardProps { - location: BillingLocation + location: BillingLocation; + currency?: string | null; } -export const LocationCard:FC = ({location}) => { +export const LocationCard:FC = ({location, currency}) => { const { _id, name, yearMonth, bills, seenByTenant } = location; console.log("seenByTenant:", seenByTenant); @@ -59,7 +60,7 @@ export const LocationCard:FC = ({location}) => { monthlyExpense > 0 ?
- { t("payed-total-label") } ${formatCurrency(monthlyExpense)} + { t("payed-total-label") } {formatCurrency(monthlyExpense, currency ?? "EUR")}
: null } diff --git a/app/ui/MonthCard.tsx b/app/ui/MonthCard.tsx index 25e2583..4e8120e 100644 --- a/app/ui/MonthCard.tsx +++ b/app/ui/MonthCard.tsx @@ -10,11 +10,12 @@ export interface MonthCardProps { yearMonth: YearMonth, children?: React.ReactNode, monthlyExpense:number, + currency?: string | null, expanded?:boolean, onToggle: (yearMonth:YearMonth) => void } -export const MonthCard:FC = ({ yearMonth, children, monthlyExpense, expanded, onToggle }) => { +export const MonthCard:FC = ({ yearMonth, children, monthlyExpense, currency, expanded, onToggle }) => { const elRef = useRef(null); const t = useTranslations("home-page.month-card"); @@ -32,13 +33,13 @@ export const MonthCard:FC = ({ yearMonth, children, monthlyExpen return(
- +
{`${formatYearMonth(yearMonth)}`} { monthlyExpense>0 ?

- {t("payed-total-label")} { formatCurrency(monthlyExpense) } + {t("payed-total-label")} { formatCurrency(monthlyExpense, currency ?? "EUR") }

: null }
diff --git a/app/ui/MonthLocationList.tsx b/app/ui/MonthLocationList.tsx index 7938415..7433fb7 100644 --- a/app/ui/MonthLocationList.tsx +++ b/app/ui/MonthLocationList.tsx @@ -7,7 +7,7 @@ import { MonthCard } from "./MonthCard"; import Pagination from "./Pagination"; import { LocationCard } from "./LocationCard"; import { PrintButton } from "./PrintButton"; -import { BillingLocation, YearMonth } from "../lib/db-types"; +import { BillingLocation, UserSettings, YearMonth } from "../lib/db-types"; import { useRouter, useSearchParams } from "next/navigation"; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; @@ -30,11 +30,13 @@ export interface MonthLocationListProps { monthlyExpense: number; }; }; + userSettings?: UserSettings | null; } export const MonthLocationList:React.FC = ({ availableYears, months, + userSettings, }) => { const router = useRouter(); @@ -97,7 +99,7 @@ export const MonthLocationList:React.FC = ({ return( <> - {}} expanded={true} > + {}} expanded={true} > ) @@ -121,11 +123,11 @@ export const MonthLocationList:React.FC = ({ return(<> { - monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => - + monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => + { - yearMonth.month === expandedMonth ? - locations.map((location, ix) => ) + yearMonth.month === expandedMonth ? + locations.map((location, ix) => ) : null }
diff --git a/app/ui/ViewLocationCard.tsx b/app/ui/ViewLocationCard.tsx index 0280ccb..97a7a60 100644 --- a/app/ui/ViewLocationCard.tsx +++ b/app/ui/ViewLocationCard.tsx @@ -52,7 +52,7 @@ export const ViewLocationCard:FC = ({location, userSettin { monthlyExpense > 0 ?

- { t("payed-total-label") } ${formatCurrency(monthlyExpense)} + { t("payed-total-label") } {formatCurrency(monthlyExpense, userSettings?.currency)}

: null }