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;
   }