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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user