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>

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
@@ -16,6 +18,7 @@ import Typography from '@mui/material/Typography';
 import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';
 import { ContactlessPayment as ContactlessPaymentIcon } from '@phosphor-icons/react/dist/ssr/ContactlessPayment';
 import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
+import { useTranslation } from 'react-i18next';
 
 export interface Subscription {
   id: string;
@@ -31,6 +34,7 @@ export interface SubscriptionsProps {
 }
 
 export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <Card>
       <CardHeader
@@ -39,7 +43,7 @@ export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.
             <ContactlessPaymentIcon fontSize="var(--Icon-fontSize)" />
           </Avatar>
         }
-        title="Our subscriptions"
+        title={t('Our subscriptions')}
       />
       <CardContent sx={{ pb: '8px' }}>
         <List disablePadding>
@@ -51,7 +55,7 @@ export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.
       <Divider />
       <CardActions>
         <Button color="secondary" endIcon={<ArrowRightIcon />} size="small">
-          See all subscriptions
+          {t('See all subscriptions')}
         </Button>
       </CardActions>
     </Card>
@@ -59,11 +63,12 @@ export function Subscriptions({ subscriptions }: SubscriptionsProps): React.JSX.
 }
 
 function SubscriptionItem({ subscription }: { subscription: Subscription }): React.JSX.Element {
+  const { t } = useTranslation();
   const { label, color } = (
     {
-      paid: { label: 'Paid', color: 'success' },
-      canceled: { label: 'Canceled', color: 'error' },
-      expiring: { label: 'Expiring', color: 'warning' },
+      paid: { label: t('Paid'), color: 'success' },
+      canceled: { label: t('Canceled'), color: 'error' },
+      expiring: { label: t('Expiring'), color: 'warning' },
     } as const
   )[subscription.status];
 
@@ -90,7 +95,7 @@ function SubscriptionItem({ subscription }: { subscription: Subscription }): Rea
           <Typography sx={{ whiteSpace: 'nowrap' }} variant="body2">
             {subscription.costs}{' '}
             <Typography color="text.secondary" component="span" variant="inherit">
-              /{subscription.billingCycle}
+              /{t(subscription.billingCycle)}
             </Typography>
           </Typography>
         }