Integrate next-intl for internationalization support across the application. Updated configuration to include next-intl plugin and modified components to utilize translation hooks for dynamic text rendering. Enhanced user experience by localizing navigation labels and form messages in various views, including login and dashboard components.

src/views/dashboards/farm/FarmDashboardSettingsDrawer.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+// React Imports
+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Drawer from '@mui/material/Drawer'
 import Typography from '@mui/material/Typography'
@@ -33,6 +36,7 @@ type FarmDashboardSettingsDrawerProps = {
 }
 
 const FarmDashboardSettingsDrawer = (props: FarmDashboardSettingsDrawerProps) => {
+  const t = useTranslations('farmDashboard')
   const { open, onClose, disabledCardIds, onToggleCard, cardLabels, rowLabels, rowCards } = props
   const disabledSet = new Set(disabledCardIds)
 
@@ -55,9 +59,9 @@ const FarmDashboardSettingsDrawer = (props: FarmDashboardSettingsDrawerProps) =>
     >
       <Box className='flex flex-col is-full' sx={{ height: '100%' }}>
         <Box className='p-6'>
-          <Typography variant='h5'>Dashboard Settings</Typography>
+          <Typography variant='h5'>{t('settings.title')}</Typography>
           <Typography variant='body2' color='text.secondary' sx={{ mt: 0.5 }}>
-            Toggle cards to show or hide on the dashboard
+            {t('settings.toggleCards')}
           </Typography>
         </Box>
         <Divider />