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/AnomalyDetectionCard.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+// React Imports
+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -23,13 +26,14 @@ interface AnomalyDetectionCardProps {
 }
 
 const AnomalyDetectionCard = ({ data }: AnomalyDetectionCardProps) => {
+  const t = useTranslations('farmDashboard')
   const anomalies = (data?.anomalies as AnomalyItem[] | undefined) ?? []
 
   return (
     <Card>
       <CardHeader
         avatar={<i className='tabler-alert-triangle text-xl' />}
-        title='Anomaly Detection'
+        title={t('cards.anomalyDetectionCard')}
         subheader='Out of range values'
         action={<OptionMenu options={['View All', 'Configure', 'Export']} />}
         sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}

src/views/dashboards/farm/EconomicOverview.tsx

@@ -2,6 +2,7 @@
 
 // Next Imports
 import dynamic from 'next/dynamic'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -35,6 +36,7 @@ interface EconomicOverviewProps {
 }
 
 const EconomicOverview = ({ data }: EconomicOverviewProps) => {
+  const t = useTranslations('farmDashboard')
   const economicData = (data?.economicData as EconomicItem[] | undefined) ?? []
   const chartSeries = (data?.chartSeries as Array<{ name: string; data: number[] }>) ?? []
   const chartCategories = (data?.chartCategories as string[]) ?? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -74,7 +76,7 @@ const EconomicOverview = ({ data }: EconomicOverviewProps) => {
   return (
     <Card>
       <CardHeader
-        title='Economic Overview'
+        title={t('cards.economicOverview')}
         subheader='Costs & ROI'
         action={<OptionMenu options={['Export PDF', 'Export Excel', 'Details']} />}
       />

src/views/dashboards/farm/FarmAlertsTimeline.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+// React Imports
+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -39,13 +42,14 @@ interface FarmAlertsTimelineProps {
 }
 
 const FarmAlertsTimeline = ({ data }: FarmAlertsTimelineProps) => {
+  const t = useTranslations('farmDashboard')
   const alerts = (data?.alerts as AlertItem[] | undefined) ?? []
 
   return (
     <Card>
       <CardHeader
         avatar={<i className='tabler-bell-ring text-xl' />}
-        title='AI Alerts'
+        title={t('cards.farmAlertsTimeline')}
         titleTypographyProps={{ variant: 'h5' }}
         subheader='Explainable recommendations'
         action={<OptionMenu options={['View All', 'Configure', 'Export']} />}

src/views/dashboards/farm/FarmAlertsTracker.tsx

@@ -2,6 +2,7 @@
 
 // Next Imports
 import dynamic from 'next/dynamic'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -36,6 +37,7 @@ interface FarmAlertsTrackerProps {
 }
 
 const FarmAlertsTracker = ({ data }: FarmAlertsTrackerProps) => {
+  const t = useTranslations('farmDashboard')
   const alertStats = (data?.alertStats as AlertStatType[] | undefined) ?? []
   const totalAlerts = (data?.totalAlerts as number | undefined) ?? 0
   const radialBarValue = (data?.radialBarValue as number | undefined) ?? 30
@@ -94,7 +96,7 @@ const FarmAlertsTracker = ({ data }: FarmAlertsTrackerProps) => {
   return (
     <Card>
       <CardHeader
-        title='Active Alerts'
+        title={t('cards.farmAlertsTracker')}
         subheader='Requires Attention'
         action={<OptionMenu options={['View All', 'Dismiss', 'Settings']} />}
       />

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

src/views/dashboards/farm/FarmDashboardSettingsDropdown.tsx

@@ -2,6 +2,7 @@
 
 // React Imports
 import { useRef, useState } from 'react'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import IconButton from '@mui/material/IconButton'
@@ -43,6 +44,7 @@ type FarmDashboardSettingsDropdownProps = {
 }
 
 const FarmDashboardSettingsDropdown = (props: FarmDashboardSettingsDropdownProps) => {
+  const t = useTranslations('farmDashboard')
   const { disabledCardIds, onToggleCard, enableDragReorder, onToggleDragReorder, cardLabels, rowLabels, rowCards, saving } = props
   const { settings } = useSettings()
   const [open, setOpen] = useState(false)
@@ -59,7 +61,7 @@ const FarmDashboardSettingsDropdown = (props: FarmDashboardSettingsDropdownProps
         <IconButton
           ref={anchorRef}
           onClick={handleToggle}
-          aria-label='Dashboard settings'
+          aria-label={t('settings.ariaLabel')}
           className='text-textPrimary'
         >
           <i className='tabler-settings' />
@@ -82,9 +84,9 @@ const FarmDashboardSettingsDropdown = (props: FarmDashboardSettingsDropdownProps
               <ClickAwayListener onClickAway={handleClose}>
                 <Box className='flex flex-col max-bs-[70vh]'>
                   <Box className='p-4'>
-                    <Typography variant='h6'>Dashboard Settings</Typography>
+                    <Typography variant='h6'>{t('settings.title')}</Typography>
                     <Typography variant='body2' color='text.secondary' sx={{ mt: 0.5 }}>
-                      Toggle cards to show or hide
+                      {t('settings.toggleCards')}
                     </Typography>
                   </Box>
                   <Box className='px-4 pb-2'>
@@ -97,7 +99,7 @@ const FarmDashboardSettingsDropdown = (props: FarmDashboardSettingsDropdownProps
                         />
                       }
                       label={
-                        <Typography variant='body2'>Enable drag & reorder rows</Typography>
+                        <Typography variant='body2'>{t('settings.enableDragReorder')}</Typography>
                       }
                       sx={{ m: 0 }}
                     />

src/views/dashboards/farm/FarmDashboardWrapper.tsx

@@ -2,7 +2,8 @@
 
 // React Imports
 import type { RefObject } from 'react'
-import { useEffect, useState, useCallback, useContext } from 'react'
+import { useEffect, useMemo, useState, useCallback, useContext } from 'react'
+import { useTranslations } from 'next-intl'
 
 // Context Imports
 import NavbarSlotContext from '@/contexts/navbarSlotContext'
@@ -38,9 +39,7 @@ import EconomicOverview from '@views/dashboards/farm/EconomicOverview'
 import {
   ROW_IDS,
   ROW_CARDS,
-  ROW_LABELS,
   CARD_GRID_SIZE,
-  CARD_LABELS,
   DEFAULT_FARM_DASHBOARD_CONFIG,
   type RowId,
   type CardId,
@@ -89,8 +88,55 @@ function mergeRowOrderAfterDrag(
 }
 
 const FarmDashboardWrapper = () => {
+  const t = useTranslations('farmDashboard')
   const { setSlotContent } = useContext(NavbarSlotContext)
   const [config, setConfig] = useState<FarmDashboardConfig>(DEFAULT_FARM_DASHBOARD_CONFIG)
+
+  const cardLabels = useMemo(
+    () =>
+      Object.fromEntries(
+        (
+          [
+            'farmOverviewKpis',
+            'farmWeatherCard',
+            'farmAlertsTracker',
+            'sensorValuesList',
+            'sensorRadarChart',
+            'sensorComparisonChart',
+            'anomalyDetectionCard',
+            'farmAlertsTimeline',
+            'waterNeedPrediction',
+            'harvestPredictionCard',
+            'yieldPredictionChart',
+            'soilMoistureHeatmap',
+            'ndviHealthCard',
+            'recommendationsList',
+            'economicOverview'
+          ] as CardId[]
+        ).map((id) => [id, t(`cards.${id}`)])
+      ) as Record<CardId, string>,
+    [t]
+  )
+
+  const rowLabels = useMemo(
+    () =>
+      Object.fromEntries(
+        (
+          [
+            'overviewKpis',
+            'weatherAlerts',
+            'sensorMonitoring',
+            'sensorCharts',
+            'alertsWater',
+            'predictions',
+            'soilHeatmap',
+            'ndviRecommendations',
+            'economic'
+          ] as RowId[]
+        ).map((id) => [id, t(`rows.${id}`)])
+      ) as Record<RowId, string>,
+    [t]
+  )
   const [cardsData, setCardsData] = useState<Partial<Record<CardId, Record<string, unknown>>>>({})
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
@@ -183,8 +229,8 @@ const FarmDashboardWrapper = () => {
         onToggleCard={handleToggleCard}
         enableDragReorder={config.enableDragReorder ?? true}
         onToggleDragReorder={handleToggleDragReorder}
-        cardLabels={CARD_LABELS}
-        rowLabels={ROW_LABELS}
+        cardLabels={cardLabels}
+        rowLabels={rowLabels}
         rowCards={ROW_CARDS}
         saving={saving}
       />
@@ -231,7 +277,7 @@ const FarmDashboardWrapper = () => {
                     mt: 1,
                     '&:active': { cursor: 'grabbing' }
                   }}
-                  aria-label={`Drag ${ROW_LABELS[rowId as RowId]}`}
+                  aria-label={t('settings.dragRow', { row: rowLabels[rowId as RowId] })}
                 >
                   <i className='tabler-arrows-move text-textSecondary' />
                 </IconButton>

src/views/dashboards/farm/FarmWeatherCard.tsx

@@ -2,6 +2,7 @@
 
 // Next Imports
 import dynamic from 'next/dynamic'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -24,6 +25,7 @@ interface FarmWeatherCardProps {
 }
 
 const FarmWeatherCard = ({ data }: FarmWeatherCardProps) => {
+  const t = useTranslations('farmDashboard')
   const temperature = data?.temperature ?? 24
   const condition = (data?.condition as string) ?? ''
   const humidity = data?.humidity ?? 45
@@ -86,7 +88,7 @@ const FarmWeatherCard = ({ data }: FarmWeatherCardProps) => {
   return (
     <Card className='pbe-6'>
       <CardHeader
-        title='Weather Today'
+        title={t('cards.farmWeatherCard')}
         subheader={condition ? `${condition}, ${temperature}${unit}` : `${temperature}${unit}`}
         className='pbe-3'
         action={<OptionMenu options={['Refresh', '7-day forecast', 'Details']} />}

src/views/dashboards/farm/HarvestPredictionCard.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+// React Imports
+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -16,6 +19,7 @@ interface HarvestPredictionCardProps {
 }
 
 const HarvestPredictionCard = ({ data }: HarvestPredictionCardProps) => {
+  const t = useTranslations('farmDashboard')
   const harvestDate = (data?.dateFormatted as string) ?? ''
   const daysUntil = (data?.daysUntil as number | undefined) ?? 0
   const daysLeftFormatted = daysUntil > 0 ? `${daysUntil} days` : ''
@@ -29,7 +33,7 @@ const HarvestPredictionCard = ({ data }: HarvestPredictionCardProps) => {
             <i className='tabler-calendar-event text-2xl' />
           </CustomAvatar>
         }
-        title='Harvest Prediction'
+        title={t('cards.harvestPredictionCard')}
         subheader='AI Estimated Date'
         action={<OptionMenu options={['Details', 'Adjust', 'Export']} />}
       />

src/views/dashboards/farm/NDVIHealthCard.tsx

@@ -2,6 +2,7 @@
 
 // Next Imports
 import dynamic from 'next/dynamic'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -26,6 +27,7 @@ interface NDVIHealthCardProps {
 }
 
 const NDVIHealthCard = ({ data }: NDVIHealthCardProps) => {
+  const t = useTranslations('farmDashboard')
   const ndviIndex = (data?.ndviIndex as number | undefined) ?? 0
   const healthData =
     (data?.healthData as Array<{ title: string; value: string; color: string; icon: string }>) ?? []
@@ -85,7 +87,7 @@ const NDVIHealthCard = ({ data }: NDVIHealthCardProps) => {
     <Card>
       <CardHeader
         avatar={<i className='tabler-chart-radar text-xl' />}
-        title='NDVI Health'
+        title={t('cards.ndviHealthCard')}
         subheader='Vegetation Index'
         sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}
       />

src/views/dashboards/farm/RecommendationsList.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+// React Imports
+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -25,13 +28,14 @@ interface RecommendationsListProps {
 }
 
 const RecommendationsList = ({ data }: RecommendationsListProps) => {
+  const t = useTranslations('farmDashboard')
   const recommendations = (data?.recommendations as RecommendationType[] | undefined) ?? []
   if (recommendations.length === 0) return null
 
   return (
     <Card>
       <CardHeader
-        title='AI Recommendations'
+        title={t('cards.recommendationsList')}
         subheader='Action Items'
         action={<OptionMenu options={['Export', 'Snooze', 'Mark Done']} />}
       />

src/views/dashboards/farm/SensorComparisonChart.tsx

@@ -2,6 +2,7 @@
 
 // Next Imports
 import dynamic from 'next/dynamic'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -21,6 +22,7 @@ interface SensorComparisonChartProps {
 }
 
 const SensorComparisonChart = ({ data }: SensorComparisonChartProps) => {
+  const t = useTranslations('farmDashboard')
   const series = (data?.series as Array<{ name: string; data: number[] }>) ?? []
   const categories = (data?.categories as string[]) ?? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   const currentValue = data?.currentValue ?? 48
@@ -75,7 +77,7 @@ const SensorComparisonChart = ({ data }: SensorComparisonChartProps) => {
   return (
     <Card>
       <CardHeader
-        title='Soil Moisture Trend'
+        title={t('cards.sensorComparisonChart')}
         subheader='Today vs Last Week'
       />
       <CardContent>

src/views/dashboards/farm/SensorRadarChart.tsx

@@ -2,6 +2,7 @@
 
 // Next Imports
 import dynamic from 'next/dynamic'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -23,6 +24,7 @@ interface SensorRadarChartProps {
 }
 
 const SensorRadarChart = ({ data }: SensorRadarChartProps) => {
+  const t = useTranslations('farmDashboard')
   const series = (data?.series as Array<{ name: string; data: number[] }>) ?? []
   const labels = (data?.labels as string[]) ?? []
   const theme = useTheme()
@@ -70,7 +72,7 @@ const SensorRadarChart = ({ data }: SensorRadarChartProps) => {
   return (
     <Card>
       <CardHeader
-        title='Sensor Comparison'
+        title={t('cards.sensorRadarChart')}
         subheader='Today vs Ideal Ranges'
         action={<OptionMenu options={['Today', 'This Week', 'This Month']} />}
       />

src/views/dashboards/farm/SensorValuesList.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+// React Imports
+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -25,13 +28,14 @@ interface SensorValuesListProps {
 }
 
 const SensorValuesList = ({ data }: SensorValuesListProps) => {
+  const t = useTranslations('farmDashboard')
   const sensors = (data?.sensors as SensorDataType[] | undefined) ?? []
   if (sensors.length === 0) return null
 
   return (
     <Card>
       <CardHeader
-        title='Environmental Sensors'
+        title={t('cards.sensorValuesList')}
         subheader='Real-time Data'
         action={<OptionMenu options={['Last Hour', 'Last 24h', 'Last 7 Days']} />}
       />

src/views/dashboards/farm/SoilMoistureHeatmap.tsx

@@ -2,6 +2,7 @@
 
 // Next Imports
 import dynamic from 'next/dynamic'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -30,6 +31,7 @@ interface SoilMoistureHeatmapProps {
 }
 
 const SoilMoistureHeatmap = ({ data }: SoilMoistureHeatmapProps) => {
+  const t = useTranslations('farmDashboard')
   const series = (data?.series as HeatmapSeries[]) ?? []
   const theme = useTheme()
   if (series.length === 0) return null
@@ -72,7 +74,7 @@ const SoilMoistureHeatmap = ({ data }: SoilMoistureHeatmapProps) => {
   return (
     <Card>
       <CardHeader
-        title='Soil Moisture Heatmap'
+        title={t('cards.soilMoistureHeatmap')}
         subheader='Field Zones by Time'
       />
       <CardContent>

src/views/dashboards/farm/WaterNeedPrediction.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+// React Imports
+import { useTranslations } from 'next-intl'
+
 // Next Imports
 import dynamic from 'next/dynamic'
 
@@ -24,6 +27,7 @@ interface WaterNeedPredictionProps {
 }
 
 const WaterNeedPrediction = ({ data }: WaterNeedPredictionProps) => {
+  const t = useTranslations('farmDashboard')
   const series = (data?.series as Array<{ name: string; data: number[] }>) ?? []
   const categories = (data?.categories as string[]) ?? ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7']
   const totalNext7Days = data?.totalNext7Days ?? 0
@@ -74,7 +78,7 @@ const WaterNeedPrediction = ({ data }: WaterNeedPredictionProps) => {
   return (
     <Card>
       <CardHeader
-        title='7-Day Water Need Prediction'
+        title={t('cards.waterNeedPrediction')}
         subheader='AI Forecast'
         action={<OptionMenu options={['Export', 'Adjust', 'Details']} />}
       />

src/views/dashboards/farm/YieldPredictionChart.tsx

@@ -2,6 +2,7 @@
 
 // Next Imports
 import dynamic from 'next/dynamic'
+import { useTranslations } from 'next-intl'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -34,6 +35,7 @@ interface YieldPredictionChartProps {
 }
 
 const YieldPredictionChart = ({ data }: YieldPredictionChartProps) => {
+  const t = useTranslations('farmDashboard')
   const series = (data?.series as Array<{ name: string; data: number[] }>) ?? []
   const categories =
     (data?.categories as string[]) ??
@@ -77,7 +79,7 @@ const YieldPredictionChart = ({ data }: YieldPredictionChartProps) => {
   return (
     <Card>
       <CardHeader
-        title='Yield Prediction'
+        title={t('cards.yieldPredictionChart')}
         subheader='This Year vs Last Year'
         action={<OptionMenu options={['Export', 'Compare', 'Details']} />}
       />