Configure thousands separator

client/public/locales/de/translation.json

@@ -223,7 +223,7 @@
   "institution_is_required": "Institution ist erforderlich.",
   "interest_rate": "Zinssatz",
   "interest_rate_apr": "Zinssatz: {{rate}} (p.a.)",
-  "interest_rate_message": "Zinssatz: {{rate}}%",
+  "interest_rate_message": "Zinssatz: {{rate}}",
   "invalid_date": "Ungültiges Datum.",
   "invalid_email_message": "Bitte geben Sie eine gültige E-Mail Adresse ein.",
   "invalid_goal_name": "Ungültiger Zielname.",

client/public/locales/en-us/translation.json

@@ -225,7 +225,7 @@
   "institution_is_required": "Institution is required.",
   "interest_rate": "Interest Rate",
   "interest_rate_apr": "Interest Rate: {{rate}} APR",
-  "interest_rate_message": "Interest Rate: {{rate}}%",
+  "interest_rate_message": "Interest Rate: {{rate}}",
   "invalid_date": "Invalid date.",
   "invalid_email_message": "Please enter a valid email address.",
   "invalid_goal_name": "Invalid goal name.",

client/src/App.tsx

@@ -33,7 +33,7 @@ import {
   textEggshellDimmed,
 } from "./shared/colors";
 import { UserSettingsProvider } from "./providers/UserSettingsProvider/UserSettingsProvider";
-import { DateProvider } from "./providers/DateProvider/DateProvider";
+import { LocaleProvider } from "./providers/LocaleProvider/LocaleProvider";
 
 // Your theme configuration is merged with default theme
 const theme = createTheme({
@@ -188,9 +188,9 @@ function App() {
                 element={
                   <AuthorizedRoute>
                     <UserSettingsProvider>
-                      <DateProvider>
+                      <LocaleProvider>
                         <Authorized />
-                      </DateProvider>
+                      </LocaleProvider>
                     </UserSettingsProvider>
                   </AuthorizedRoute>
                 }

client/src/app/Authorized/PageContent/Accounts/AccountsContent/AccountDetails/AccountDetails.tsx

@@ -19,7 +19,7 @@ import PrimaryText from "~/components/core/Text/PrimaryText/PrimaryText";
 import DimmedText from "~/components/core/Text/DimmedText/DimmedText";
 import Accordion from "~/components/core/Accordion/Accordion";
 import { useTranslation } from "react-i18next";
-import { useDate } from "~/providers/DateProvider/DateProvider";
+import { useLocale } from "~/providers/LocaleProvider/LocaleProvider";
 
 interface AccountDetailsProps {
   isOpen: boolean;
@@ -32,7 +32,7 @@ const AccountDetails = (props: AccountDetailsProps): React.ReactNode => {
   const [chartLookbackMonths, setChartLookbackMonths] = React.useState(6);
 
   const { t } = useTranslation();
-  const { dayjs } = useDate();
+  const { dayjs } = useLocale();
   const { request } = useAuth();
 
   const balancesQuery = useQuery({

client/src/app/Authorized/PageContent/Accounts/AccountsContent/AccountDetails/AddBalance/AddBalance.tsx

@@ -11,7 +11,7 @@ import { translateAxiosError } from "~/helpers/requests";
 import { IBalanceCreateRequest } from "~/models/balance";
 import PrimaryText from "~/components/core/Text/PrimaryText/PrimaryText";
 import { useTranslation } from "react-i18next";
-import { useDate } from "~/providers/DateProvider/DateProvider";
+import { useLocale } from "~/providers/LocaleProvider/LocaleProvider";
 import DateInput from "~/components/core/Input/DateInput/DateInput";
 import NumberInput from "~/components/core/Input/NumberInput/NumberInput";
 
@@ -22,7 +22,13 @@ interface AddBalanceProps {
 
 const AddBalance = (props: AddBalanceProps): React.ReactNode => {
   const { t } = useTranslation();
-  const { dayjs, longDateFormat } = useDate();
+  const {
+    dayjs,
+    dayjsLocale,
+    longDateFormat,
+    thousandsSeparator,
+    decimalSeparator,
+  } = useLocale();
   const { request } = useAuth();
 
   const dateField = useField<Date>({
@@ -59,15 +65,16 @@ const AddBalance = (props: AddBalanceProps): React.ReactNode => {
         {...dateField.getInputProps()}
         label={<PrimaryText size="sm">{t("date")}</PrimaryText>}
         valueFormat={longDateFormat}
-        locale={dayjs.locale()}
+        locale={dayjsLocale}
         elevation={0}
       />
       <NumberInput
         {...amountField.getInputProps()}
         label={<PrimaryText size="sm">{t("amount")}</PrimaryText>}
         prefix={getCurrencySymbol(props.currency)}
         decimalScale={2}
-        thousandSeparator=","
+        decimalSeparator={decimalSeparator}
+        thousandSeparator={thousandsSeparator}
         elevation={0}
       />
       <Button

client/src/app/Authorized/PageContent/Accounts/AccountsContent/AccountDetails/BalanceItems/BalanceItem/BalanceItemContent/BalanceItemContent.tsx

@@ -2,9 +2,9 @@ import { ActionIcon, Group } from "@mantine/core";
 import { PencilIcon } from "lucide-react";
 import PrimaryText from "~/components/core/Text/PrimaryText/PrimaryText";
 import StatusText from "~/components/core/Text/StatusText/StatusText";
-import { convertNumberToCurrency } from "~/helpers/currency";
+import { convertNumberToCurrency, SignDisplay } from "~/helpers/currency";
 import { IBalanceResponse } from "~/models/balance";
-import { useDate } from "~/providers/DateProvider/DateProvider";
+import { useLocale } from "~/providers/LocaleProvider/LocaleProvider";
 
 interface BalanceItemContentProps {
   balance: IBalanceResponse;
@@ -15,7 +15,7 @@ interface BalanceItemContentProps {
 const BalanceItemContent = (
   props: BalanceItemContentProps,
 ): React.ReactNode => {
-  const { dayjs, longDateFormat } = useDate();
+  const { dayjs, longDateFormat, intlLocale } = useLocale();
 
   return (
     <Group justify="space-between" align="center">
@@ -39,6 +39,8 @@ const BalanceItemContent = (
           props.balance.amount,
           true,
           props.userCurrency,
+          SignDisplay.Auto,
+          intlLocale,
         )}
       </StatusText>
     </Group>

client/src/app/Authorized/PageContent/Accounts/AccountsContent/AccountDetails/BalanceItems/BalanceItem/EditableBalanceItemContent/EditableBalanceItemContent.tsx

@@ -11,7 +11,7 @@ import { getCurrencySymbol } from "~/helpers/currency";
 import { translateAxiosError } from "~/helpers/requests";
 import { IBalanceResponse, IBalanceUpdateRequest } from "~/models/balance";
 import { useTranslation } from "react-i18next";
-import { useDate } from "~/providers/DateProvider/DateProvider";
+import { useLocale } from "~/providers/LocaleProvider/LocaleProvider";
 import DateInput from "~/components/core/Input/DateInput/DateInput";
 import NumberInput from "~/components/core/Input/NumberInput/NumberInput";
 
@@ -25,7 +25,13 @@ const EditableBalanceItemContent = (
   props: EditableBalanceItemContentProps,
 ): React.ReactNode => {
   const { t } = useTranslation();
-  const { dayjs, longDateFormat } = useDate();
+  const {
+    dayjs,
+    longDateFormat,
+    dayjsLocale,
+    thousandsSeparator,
+    decimalSeparator,
+  } = useLocale();
   const { request } = useAuth();
 
   const balanceAmountField = useField<string | number | undefined>({
@@ -137,15 +143,16 @@ const EditableBalanceItemContent = (
         <DateInput
           {...balanceDateField.getInputProps()}
           flex="1 1 auto"
-          locale={dayjs.locale()}
+          locale={dayjsLocale}
           valueFormat={longDateFormat}
           elevation={2}
         />
         <NumberInput
           {...balanceAmountField.getInputProps()}
           flex="1 1 auto"
           prefix={getCurrencySymbol(props.userCurrency)}
-          thousandSeparator=","
+          thousandSeparator={thousandsSeparator}
+          decimalSeparator={decimalSeparator}
           decimalScale={2}
           fixedDecimalScale
           onBlur={() => doUpdateBalance.mutate()}

client/src/app/Authorized/PageContent/Accounts/AccountsContent/InstitutionItem/AccountItem/AccountItemContent/AccountItemContent.tsx

@@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
 import DimmedText from "~/components/core/Text/DimmedText/DimmedText";
 import PrimaryText from "~/components/core/Text/PrimaryText/PrimaryText";
 import StatusText from "~/components/core/Text/StatusText/StatusText";
-import { convertNumberToCurrency } from "~/helpers/currency";
+import { convertNumberToCurrency, SignDisplay } from "~/helpers/currency";
 import { AccountSource, IAccountResponse } from "~/models/account";
-import { useDate } from "~/providers/DateProvider/DateProvider";
+import { useLocale } from "~/providers/LocaleProvider/LocaleProvider";
 
 interface IAccountItemContentProps {
   account: IAccountResponse;
@@ -16,7 +16,7 @@ interface IAccountItemContentProps {
 
 const AccountItemContent = (props: IAccountItemContentProps) => {
   const { t } = useTranslation();
-  const { dayjs, dateFormat } = useDate();
+  const { dayjs, dateFormat, intlLocale } = useLocale();
 
   const getAccountSourceBadgeColor = (): string => {
     switch (props.account.source) {
@@ -51,7 +51,10 @@ const AccountItemContent = (props: IAccountItemContentProps) => {
           </ActionIcon>
           <Badge>
             {t("interest_rate_message", {
-              rate: ((props.account.interestRate ?? 0) * 100).toFixed(2),
+              rate: new Intl.NumberFormat(intlLocale, {
+                style: "percent",
+                maximumFractionDigits: 2,
+              }).format(props.account.interestRate ?? 0),
             })}
           </Badge>
           {props.account.hideAccount && (
@@ -69,6 +72,8 @@ const AccountItemContent = (props: IAccountItemContentProps) => {
             props.account.currentBalance,
             true,
             props.userCurrency,
+            SignDisplay.Auto,
+            intlLocale,
           )}
         </StatusText>
       </Group>

client/src/app/Authorized/PageContent/Accounts/AccountsContent/InstitutionItem/AccountItem/EditableAccountItemContent/EditableAccountItemContent.tsx

@@ -14,7 +14,7 @@ import { AxiosError } from "axios";
 import { PencilIcon } from "lucide-react";
 import { useAuth } from "~/providers/AuthProvider/AuthProvider";
 import { getIsParentCategory, getParentCategory } from "~/helpers/category";
-import { convertNumberToCurrency } from "~/helpers/currency";
+import { convertNumberToCurrency, SignDisplay } from "~/helpers/currency";
 import { translateAxiosError } from "~/helpers/requests";
 import {
   accountCategories,
@@ -23,13 +23,13 @@ import {
 } from "~/models/account";
 import DeleteAccountPopover from "./DeleteAccountPopover/DeleteAccountPopover";
 import PrimaryText from "~/components/core/Text/PrimaryText/PrimaryText";
-import ElevatedNumberInput from "~/components/core/Input/Elevated/ElevatedNumberInput/ElevatedNumberInput";
 import StatusText from "~/components/core/Text/StatusText/StatusText";
 import DimmedText from "~/components/core/Text/DimmedText/DimmedText";
 import CategorySelect from "~/components/core/Select/CategorySelect/CategorySelect";
 import { useTranslation } from "react-i18next";
 import TextInput from "~/components/core/Input/TextInput/TextInput";
-import { useDate } from "~/providers/DateProvider/DateProvider";
+import { useLocale } from "~/providers/LocaleProvider/LocaleProvider";
+import NumberInput from "~/components/core/Input/NumberInput/NumberInput";
 
 interface EditableAccountItemContentProps {
   account: IAccountResponse;
@@ -72,7 +72,13 @@ const EditableAccountItemContent = (props: EditableAccountItemContentProps) => {
   });
 
   const { t } = useTranslation();
-  const { dayjs, dateFormat } = useDate();
+  const {
+    dayjs,
+    dateFormat,
+    intlLocale,
+    thousandsSeparator,
+    decimalSeparator,
+  } = useLocale();
   const { request } = useAuth();
 
   const queryClient = useQueryClient();
@@ -154,15 +160,18 @@ const EditableAccountItemContent = (props: EditableAccountItemContentProps) => {
                 <PencilIcon size={16} />
               </ActionIcon>
             </Flex>
-            <ElevatedNumberInput
+            <NumberInput
               {...interestRateField.getInputProps()}
               label={<PrimaryText size="xs">{t("interest_rate")}</PrimaryText>}
               decimalScale={2}
+              thousandSeparator={thousandsSeparator}
+              decimalSeparator={decimalSeparator}
               min={0}
               step={1}
               suffix="%"
               maw={90}
               onBlur={() => doUpdateAccount.mutate()}
+              elevation={2}
             />
             <Group gap="0.5rem">
               <Button
@@ -198,6 +207,8 @@ const EditableAccountItemContent = (props: EditableAccountItemContentProps) => {
               props.account.currentBalance,
               true,
               props.userCurrency,
+              SignDisplay.Auto,
+              intlLocale,
             )}
           </StatusText>
         </Group>

client/src/app/Authorized/PageContent/Accounts/AccountsContent/InstitutionItem/EditableInstitutionItemContent/EditableInstitutionItemContent.tsx

@@ -5,11 +5,12 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { PencilIcon } from "lucide-react";
 import { useAuth } from "~/providers/AuthProvider/AuthProvider";
-import { convertNumberToCurrency } from "~/helpers/currency";
+import { convertNumberToCurrency, SignDisplay } from "~/helpers/currency";
 import { translateAxiosError } from "~/helpers/requests";
 import { IInstitution, IInstitutionUpdateRequest } from "~/models/institution";
 import StatusText from "~/components/core/Text/StatusText/StatusText";
 import TextInput from "~/components/core/Input/TextInput/TextInput";
+import { useLocale } from "~/providers/LocaleProvider/LocaleProvider";
 
 interface IEditableInstitutionItemContentProps {
   institution: IInstitution;
@@ -19,13 +20,14 @@ interface IEditableInstitutionItemContentProps {
 }
 
 const EditableInstitutionItemContent = (
-  props: IEditableInstitutionItemContentProps
+  props: IEditableInstitutionItemContentProps,
 ) => {
   const institutionNameField = useField({
     initialValue: props.institution.name,
   });
 
   const { request } = useAuth();
+  const { intlLocale } = useLocale();
 
   const queryClient = useQueryClient();
   const doUpdateInstitution = useMutation({
@@ -76,7 +78,13 @@ const EditableInstitutionItemContent = (
         </ActionIcon>
       </Group>
       <StatusText amount={props.totalBalance} size="md">
-        {convertNumberToCurrency(props.totalBalance, true, props.userCurrency)}
+        {convertNumberToCurrency(
+          props.totalBalance,
+          true,
+          props.userCurrency,
+          SignDisplay.Auto,
+          intlLocale,
+        )}
       </StatusText>
     </Group>
   );

client/src/app/Authorized/PageContent/Accounts/AccountsContent/InstitutionItem/InstitutionItemContent/InstitutionItemContent.tsx

@@ -3,8 +3,9 @@ import { PencilIcon } from "lucide-react";
 import React from "react";
 import PrimaryText from "~/components/core/Text/PrimaryText/PrimaryText";
 import StatusText from "~/components/core/Text/StatusText/StatusText";
-import { convertNumberToCurrency } from "~/helpers/currency";
+import { convertNumberToCurrency, SignDisplay } from "~/helpers/currency";
 import { IInstitution } from "~/models/institution";
+import { useLocale } from "~/providers/LocaleProvider/LocaleProvider";
 
 interface IInstitutionItemContentProps {
   institution: IInstitution;
@@ -14,8 +15,9 @@ interface IInstitutionItemContentProps {
 }
 
 const InstitutionItemContent = (
-  props: IInstitutionItemContentProps
+  props: IInstitutionItemContentProps,
 ): React.ReactNode => {
+  const { intlLocale } = useLocale();
   return (
     <Group justify="space-between" align="center">
       <Group gap="0.5rem">
@@ -32,7 +34,13 @@ const InstitutionItemContent = (
         </ActionIcon>
       </Group>
       <StatusText amount={props.totalBalance} size="md">
-        {convertNumberToCurrency(props.totalBalance, true, props.userCurrency)}
+        {convertNumberToCurrency(
+          props.totalBalance,
+          true,
+          props.userCurrency,
+          SignDisplay.Auto,
+          intlLocale,
+        )}
       </StatusText>
     </Group>
   );