build ok,

002_source/cms/src/components/dashboard/overview/helper-widget.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
@@ -6,6 +8,7 @@ import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import type { Icon } from '@phosphor-icons/react/dist/lib/types';
+import { useTranslation } from 'react-i18next';
 
 export interface HelperWidgetProps {
   action: React.ReactNode;
@@ -16,6 +19,7 @@ export interface HelperWidgetProps {
 }
 
 export function HelperWidget({ action, description, icon: Icon, label, title }: HelperWidgetProps): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <Card>
       <CardContent>
@@ -34,13 +38,13 @@ export function HelperWidget({ action, description, icon: Icon, label, title }:
               }}
             >
               <Icon fontSize="var(--icon-fontSize-md)" />
-              <Typography variant="subtitle2">{label}</Typography>
+              <Typography variant="subtitle2">{t(label)}</Typography>
             </Stack>
           </div>
           <Stack spacing={1}>
-            <Typography variant="h6">{title}</Typography>
+            <Typography variant="h6">{t(title)}</Typography>
             <Typography color="text.secondary" variant="body2">
-              {description}
+              {t(description)}
             </Typography>
           </Stack>
         </Stack>