build ok,

002_source/cms/src/components/dashboard/overview/app-usage.tsx

@@ -9,6 +9,7 @@ import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
 import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { NoSsr } from '@/components/core/no-ssr';
@@ -23,11 +24,12 @@ export interface AppUsageProps {
 }
 
 export function AppUsage({ data }: AppUsageProps): React.JSX.Element {
+  const { t } = useTranslation();
   const chartHeight = 300;
 
   return (
     <Card>
-      <CardHeader title="App usage" />
+      <CardHeader title={t('App usage')} />
       <CardContent>
         <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3}>
           <Stack spacing={3} sx={{ flex: '0 0 auto', justifyContent: 'space-between', width: '240px' }}>
@@ -36,11 +38,11 @@ export function AppUsage({ data }: AppUsageProps): React.JSX.Element {
                 +28%
               </Typography>
               <Typography color="text.secondary">
-                increase in app usage with{' '}
+                {t('increase_in_app_usage_with')}{' '}
                 <Typography color="text.primary" component="span">
                   6,521
                 </Typography>{' '}
-                new products purchased
+                {t('new_products_purchased')}
               </Typography>
             </Stack>
             <div>
@@ -48,7 +50,7 @@ export function AppUsage({ data }: AppUsageProps): React.JSX.Element {
                 <Typography color="primary.main" component="span" variant="subtitle2">
                   This year
                 </Typography>{' '}
-                is forecasted to increase in your traffic by the end of the current month
+                {t('is_forecasted_to_increase_in_your_traffic_by_the_end_of_the_current_month')}
               </Typography>
             </div>
           </Stack>
@@ -108,6 +110,7 @@ interface TooltipContentProps {
 }
 
 function TooltipContent({ active, payload }: TooltipContentProps): React.JSX.Element | null {
+  const { t } = useTranslation();
   if (!active) {
     return null;
   }

002_source/cms/src/components/dashboard/overview/events.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -16,6 +18,7 @@ import Typography from '@mui/material/Typography';
 import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';
 import { CalendarBlank as CalendarBlankIcon } from '@phosphor-icons/react/dist/ssr/CalendarBlank';
 import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
+import { useTranslation } from 'react-i18next';
 
 import { dayjs } from '@/lib/dayjs';
 
@@ -27,6 +30,7 @@ export interface Event {
 }
 
 export function Events({ events }: EventsProps): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <Card>
       <CardHeader
@@ -40,8 +44,8 @@ export function Events({ events }: EventsProps): React.JSX.Element {
             <CalendarBlankIcon fontSize="var(--Icon-fontSize)" />
           </Avatar>
         }
-        subheader="Based on the linked bank accounts"
-        title="Upcoming events"
+        subheader={t('Based on the linked bank accounts')}
+        title={t('Upcoming events')}
       />
       <CardContent sx={{ py: '8px' }}>
         <List disablePadding>
@@ -53,7 +57,7 @@ export function Events({ events }: EventsProps): React.JSX.Element {
       <Divider />
       <CardActions>
         <Button color="secondary" endIcon={<ArrowRightIcon />} size="small">
-          See all events
+          {t('See all events')}
         </Button>
       </CardActions>
     </Card>
@@ -65,6 +69,7 @@ export interface EventItemProps {
 }
 
 function EventItem({ event }: EventItemProps): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <ListItem disableGutters key={event.id}>
       <ListItemAvatar>
@@ -85,12 +90,12 @@ function EventItem({ event }: EventItemProps): React.JSX.Element {
         disableTypography
         primary={
           <Typography noWrap variant="subtitle2">
-            {event.title}
+            {t(event.title)}
           </Typography>
         }
         secondary={
           <Typography color="text.secondary" noWrap variant="body2">
-            {event.description}
+            {t(event.description)}
           </Typography>
         }
       />