enabled i18n for all components

app/ui/MonthCard.tsx

@@ -4,7 +4,7 @@ import { FC, useEffect, useRef } from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
 import { formatCurrency } from "../lib/formatStrings";
-
+import { useTranslations } from "next-intl";
 
 export interface MonthCardProps {
     yearMonth: YearMonth,
@@ -17,6 +17,7 @@ export interface MonthCardProps {
 export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded, onToggle }) => {
 
   const elRef = useRef<HTMLDivElement>(null);
+  const t = useTranslations("home-page.month-card");
 
   // Setting the `month` will activate the accordion belonging to that month
   // If the accordion is already active, it will collapse it
@@ -37,7 +38,7 @@ export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpen
         {
           monthlyExpense>0 ?
             <p className="text-xs font-medium">
-              Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
+              {t("payed-total-label")} <strong>{ formatCurrency(monthlyExpense) }</strong>
             </p> : null
         }
       </div>