build ok,

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -9,6 +11,7 @@ import Typography from '@mui/material/Typography';
 import type { Icon } from '@phosphor-icons/react/dist/lib/types';
 import { TrendDown as TrendDownIcon } from '@phosphor-icons/react/dist/ssr/TrendDown';
 import { TrendUp as TrendUpIcon } from '@phosphor-icons/react/dist/ssr/TrendUp';
+import { useTranslation } from 'react-i18next';
 
 export interface SummaryProps {
   amount: number;
@@ -19,6 +22,7 @@ export interface SummaryProps {
 }
 
 export function Summary({ amount, diff, icon: Icon, title, trend }: SummaryProps): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <Card>
       <CardContent>
@@ -62,7 +66,7 @@ export function Summary({ amount, diff, icon: Icon, title, trend }: SummaryProps
             <Typography color={trend === 'up' ? 'success.main' : 'error.main'} component="span" variant="subtitle2">
               {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(diff / 100)}
             </Typography>{' '}
-            {trend === 'up' ? 'increase' : 'decrease'} vs last month
+            {trend === 'up' ? t('increase') : t('decrease')} {t('vs last month')}
           </Typography>
         </Stack>
       </Box>