1 files changed, 10 insertions, 12 deletions
diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
index f5bce1396..3b06a7740 100644
--- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx
+++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
@@ -1,5 +1,5 @@
 import { AmountString, Amounts, CurrencySpecification, TalerCorebankApi, TalerError, assertUnreachable } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { useLang, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { format, getDate, getHours, getMonth, getYear, setDate, setHours, setMonth, setYear, sub } from "date-fns";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
@@ -11,7 +11,6 @@ import { RenderAmount } from "../PaytoWireTransferForm.js";
 import { WireTransfer } from "../WireTransfer.js";
 import { AccountList } from "./AccountList.js";
 
-
 /**
  * Query account information and show QR code if there is pending withdrawal
  */
@@ -40,15 +39,14 @@ export function AdminHome({ onCreateAccount, onAuthorizationRequired, onRemoveAc
   </Fragment>
 }
 
-function getDateForTimeframe(which: number, timeframe: TalerCorebankApi.MonitorTimeframeParam): string {
+function getDateForTimeframe(which: number, timeframe: TalerCorebankApi.MonitorTimeframeParam, locale: Locale): string {
   const time = Date.now()
-
   switch (timeframe) {
-    case TalerCorebankApi.MonitorTimeframeParam.hour: return `${format(setHours(time, which), "HH")}hs`;
-    case TalerCorebankApi.MonitorTimeframeParam.day: return format(setDate(time, which), "EEEE");
-    case TalerCorebankApi.MonitorTimeframeParam.month: return format(setMonth(time, which), "MMMM");
-    case TalerCorebankApi.MonitorTimeframeParam.year: return format(setYear(time, which), "yyyy");
-    case TalerCorebankApi.MonitorTimeframeParam.decade: return format(setYear(time, which), "yyyy");
+    case TalerCorebankApi.MonitorTimeframeParam.hour: return `${format(setHours(time, which), "HH", { locale })}hs`;
+    case TalerCorebankApi.MonitorTimeframeParam.day: return format(setDate(time, which), "EEEE", { locale });
+    case TalerCorebankApi.MonitorTimeframeParam.month: return format(setMonth(time, which), "MMMM", { locale });
+    case TalerCorebankApi.MonitorTimeframeParam.year: return format(setYear(time, which), "yyyy", { locale });
+    case TalerCorebankApi.MonitorTimeframeParam.decade: return format(setYear(time, which), "yyyy", { locale });
   }
   assertUnreachable(timeframe)
 }
@@ -81,7 +79,7 @@ export function getTimeframesForDate(time: Date, timeframe: TalerCorebankApi.Mon
 
 
 function Metrics(): VNode {
-  const { i18n } = useTranslationContext()
+  const { i18n, dateLocale } = useTranslationContext()
   const [metricType, setMetricType] = useState<TalerCorebankApi.MonitorTimeframeParam>(TalerCorebankApi.MonitorTimeframeParam.hour);
   const { config } = useBankCoreApiContext();
   const respInfo = useConversionInfo()
@@ -132,7 +130,7 @@ function Metrics(): VNode {
 
     <div class="w-full flex justify-between">
       <h1 class="text-base font-semibold leading-7 text-gray-900 mt-5">
-        <i18n.Translate>Trading volume on {getDateForTimeframe(params.current, metricType)} compared to {getDateForTimeframe(params.previous, metricType)}</i18n.Translate>
+        <i18n.Translate>Trading volume on {getDateForTimeframe(params.current, metricType, dateLocale)} compared to {getDateForTimeframe(params.previous, metricType, dateLocale)}</i18n.Translate>
       </h1>
     </div>
     <dl class="mt-5 grid grid-cols-1 md:grid-cols-2  divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:divide-x md:divide-y-0">
@@ -186,7 +184,7 @@ function Metrics(): VNode {
       <a href="#/download-stats"
         class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
       ><i18n.Translate>
-          download stats as csv
+          download stats as CSV
         </i18n.Translate></a>
     </div>
   </Fragment>