build ok,

002_source/cms/src/components/dashboard/overview/app-chat.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Badge from '@mui/material/Badge';
@@ -16,6 +18,7 @@ import Typography from '@mui/material/Typography';
 import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';
 import { ChatCircleText as ChatCircleTextIcon } from '@phosphor-icons/react/dist/ssr/ChatCircleText';
 import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
+import { useTranslation } from 'react-i18next';
 
 import { dayjs } from '@/lib/dayjs';
 
@@ -31,6 +34,7 @@ export interface AppChatProps {
 }
 
 export function AppChat({ messages }: AppChatProps): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <Card>
       <CardHeader
@@ -44,7 +48,7 @@ export function AppChat({ messages }: AppChatProps): React.JSX.Element {
             <ChatCircleTextIcon fontSize="var(--Icon-fontSize)" />
           </Avatar>
         }
-        title="App chat"
+        title={t('app_chat')}
       />
       <List
         disablePadding
@@ -77,12 +81,12 @@ export function AppChat({ messages }: AppChatProps): React.JSX.Element {
                 disableTypography
                 primary={
                   <Typography noWrap variant="subtitle2">
-                    {message.author.name}
+                    {t('message_author_name', { name: message.author.name })}
                   </Typography>
                 }
                 secondary={
                   <Typography color="text.secondary" noWrap variant="body2">
-                    {message.content}
+                    {t('message_content', { content: message.content })}
                   </Typography>
                 }
               />
@@ -96,7 +100,7 @@ export function AppChat({ messages }: AppChatProps): React.JSX.Element {
       <Divider />
       <CardActions>
         <Button color="secondary" endIcon={<ArrowRightIcon />} size="small">
-          Go to chat
+          {t('go_to_chat')}
         </Button>
       </CardActions>
     </Card>

002_source/cms/src/components/dashboard/overview/app-limits.tsx

@@ -15,6 +15,7 @@ import Typography from '@mui/material/Typography';
 import { Cpu as CpuIcon } from '@phosphor-icons/react/dist/ssr/Cpu';
 import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
 import { Lightning as LightningIcon } from '@phosphor-icons/react/dist/ssr/Lightning';
+import { Trans, useTranslation } from 'react-i18next';
 import { RadialBar, RadialBarChart } from 'recharts';
 
 import { NoSsr } from '@/components/core/no-ssr';
@@ -24,6 +25,7 @@ export interface AppLimitsProps {
 }
 
 export function AppLimits({ usage }: AppLimitsProps): React.JSX.Element {
+  const { t } = useTranslation();
   const chartSize = 240;
 
   const data = [
@@ -31,6 +33,10 @@ export function AppLimits({ usage }: AppLimitsProps): React.JSX.Element {
     { name: 'Usage', value: usage },
   ] satisfies { name: string; value: number }[];
 
+  const [usagePct, setUsagePct] = React.useState(
+    new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(usage / 100)
+  );
+
   return (
     <Card>
       <CardHeader
@@ -44,7 +50,7 @@ export function AppLimits({ usage }: AppLimitsProps): React.JSX.Element {
             <CpuIcon fontSize="var(--Icon-fontSize)" />
           </Avatar>
         }
-        title="App limits"
+        title={t('app_limits')}
       />
       <CardContent>
         <Box sx={{ display: 'flex', justifyContent: 'center' }}>
@@ -91,27 +97,25 @@ export function AppLimits({ usage }: AppLimitsProps): React.JSX.Element {
                 }}
               >
                 <Box sx={{ textAlign: 'center', mt: '-40px' }}>
-                  <Typography variant="h5">
-                    {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(usage / 100)}
-                  </Typography>
+                  <Typography variant="h5">{usagePct}</Typography>
                 </Box>
               </Box>
             </Box>
           </NoSsr>
         </Box>
         <Stack spacing={2} sx={{ mt: '-80px', textAlign: 'center' }}>
-          <Typography variant="h6">You&apos;ve almost reached your limit</Typography>
+          <Typography variant="h6">{t('You have almost reached your limit')}</Typography>
           <Typography color="text.secondary" variant="body2">
-            You have used{' '}
-            {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(usage / 100)} of your
-            available spots. Upgrade plan to create more projects.
+            {t('You have used')} {usagePct} {t('of your available spots')}
+            <br />
+            {t('Upgrade plan to create more projects')}
           </Typography>
         </Stack>
       </CardContent>
       <Divider />
       <CardActions sx={{ justifyContent: 'flex-end' }}>
         <Button color="secondary" startIcon={<LightningIcon />} variant="contained">
-          Upgrade plan
+          {t('Upgrade plan')}
         </Button>
       </CardActions>
     </Card>