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