Update formatCurrency to use currency code from UserSettings

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 <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-22 23:04:42 +01:00
parent 4655b342f2
commit c025c6f2ce
6 changed files with 38 additions and 20 deletions

View File

@@ -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<MonthLocationListProps > = ({
availableYears,
months,
userSettings,
}) => {
const router = useRouter();
@@ -97,7 +99,7 @@ export const MonthLocationList:React.FC<MonthLocationListProps > = ({
return(
<>
<MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0} onToggle={() => {}} expanded={true} >
<MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0} currency={userSettings?.currency} onToggle={() => {}} expanded={true} >
<AddLocationButton yearMonth={currentYearMonth} />
</MonthCard>
</>)
@@ -121,11 +123,11 @@ export const MonthLocationList:React.FC<MonthLocationListProps > = ({
return(<>
<AddMonthButton yearMonth={getNextYearMonth(monthsArray[0][1].locations[0].yearMonth)} />
{
monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) =>
<MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
monthsArray.map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) =>
<MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} currency={userSettings?.currency} expanded={ yearMonth.month === expandedMonth } onToggle={handleMonthToggle} >
{
yearMonth.month === expandedMonth ?
locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
yearMonth.month === expandedMonth ?
locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} currency={userSettings?.currency} />)
: null
}
<div className="flex gap-2 justify-center">