6 files changed, 29 insertions, 29 deletions
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index 3cc3c2f..bb32daa 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -76,7 +76,7 @@ const ReplayPage = () => {
               value={index}
               onChange={(_, index) => setIndex(index)}
               valueLabelDisplay="auto"
-              valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime') : '')}
+              valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')}
               ValueLabelComponent={TimeLabel}
             />
           </Paper>
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 9bf1dd5..f6e71db 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import {
   Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden,
@@ -51,15 +51,6 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const routes = [
-  { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
-  { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
-  { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
-  { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
-  { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
-  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
-];
-
 const ReportLayout = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
@@ -69,6 +60,15 @@ const ReportLayout = ({ children, filter }) => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [reportTitle, setReportTitle] = useState();
 
+  const routes = useMemo(() => [
+    { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
+    { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
+    { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
+    { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
+    { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
+    { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
+  ], [t]);
+
   useEffect(() => {
     routes.forEach((route) => {
       switch (location.pathname) {
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index fe43342..3be2107 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -32,12 +32,12 @@ const Filter = ({ setItems }) => {
 };
 
 const RouteReportPage = () => {
+  const theme = useTheme();
   const t = useTranslation();
 
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
   const coordinateFormat = usePreference('coordinateFormat');
-  const theme = useTheme();
 
   const columns = [{
     headerName: t('positionFixTime'),
@@ -62,7 +62,7 @@ const RouteReportPage = () => {
     field: 'speed',
     type: 'number',
     width: theme.dimensions.columnWidthString,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
@@ -74,7 +74,7 @@ const RouteReportPage = () => {
     type: 'boolean',
     width: theme.dimensions.columnWidthBoolean,
     valueGetter: ({ row }) => row.attributes.ignition,
-    valueFormatter: ({ value }) => formatBoolean(value),
+    valueFormatter: ({ value }) => formatBoolean(value, t),
   }, {
     headerName: t('deviceTotalDistance'),
     field: 'totalDistance',
@@ -82,7 +82,7 @@ const RouteReportPage = () => {
     hide: true,
     width: theme.dimensions.columnWidthNumber,
     valueGetter: ({ row }) => row.attributes.totalDistance,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }];
 
   const [items, setItems] = useState([]);
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 318507e..aa668d5 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -50,7 +50,7 @@ const StopReportPage = () => {
     field: 'startOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
@@ -81,7 +81,7 @@ const StopReportPage = () => {
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
     hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+    valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
   }];
 
   return (
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 84546f6..d993d2e 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -65,31 +65,31 @@ const SummaryReportPage = () => {
     field: 'distance',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
@@ -102,7 +102,7 @@ const SummaryReportPage = () => {
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
     hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+    valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
   }];
 
   return (
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 22a236a..632da7c 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -51,7 +51,7 @@ const TripReportPage = () => {
     field: 'startOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportStartAddress'),
     field: 'startAddress',
@@ -69,7 +69,7 @@ const TripReportPage = () => {
     field: 'endOdometer',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportEndAddress'),
     field: 'endAddress',
@@ -81,19 +81,19 @@ const TripReportPage = () => {
     field: 'distance',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
@@ -106,7 +106,7 @@ const TripReportPage = () => {
     type: 'number',
     width: theme.dimensions.columnWidthNumber,
     hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+    valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
   }, {
     headerName: t('sharedDriver'),
     field: 'driverName',