build ok,

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