Add crop zoning feature with localization support and new dependencies

- Introduced crop zoning functionality, including a new section in the navigation menu.
- Added Persian translations for crop zoning-related UI elements.
- Updated package.json and package-lock.json to include new dependencies: @mapbox/mapbox-gl-draw and various @turf packages for geospatial calculations.
- Enhanced global styles for crop zoning tooltips to improve user experience.

src/views/dashboards/farm/cropZoning/LayerControl.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import IconButton from '@mui/material/IconButton'
+import type { LayerType } from './cropZoningTypes'
+
+const LAYER_ICONS: Record<LayerType, string> = {
+  crops: 'tabler-plant-2',
+  waterNeed: 'tabler-droplet',
+  soilQuality: 'tabler-seedling',
+  cultivationRisk: 'tabler-alert-triangle'
+}
+
+type LayerControlProps = {
+  activeLayer: LayerType
+  onLayerChange: (layer: LayerType) => void
+}
+
+const LAYER_ORDER: LayerType[] = ['crops', 'waterNeed', 'soilQuality', 'cultivationRisk']
+
+export default function LayerControl({ activeLayer, onLayerChange }: LayerControlProps) {
+  const t = useTranslations('cropZoning')
+
+  return (
+    <div className='absolute top-4 end-4 z-[1000] flex flex-col gap-1 rounded-xl border border-white/20 bg-white/70 py-2 shadow-lg backdrop-blur-md dark:bg-gray-900/70 dark:border-gray-700/50'>
+      {LAYER_ORDER.map(layer => (
+        <IconButton
+          key={layer}
+          size='small'
+          onClick={() => onLayerChange(layer)}
+          title={t(`layers.${layer}`)}
+          sx={{
+            mx: 0.5,
+            bgcolor: activeLayer === layer ? 'action.selected' : 'transparent',
+            '&:hover': { bgcolor: activeLayer === layer ? 'action.selected' : 'action.hover' }
+          }}
+        >
+          <i className={`${LAYER_ICONS[layer]} text-lg`} />
+        </IconButton>
+      ))}
+    </div>
+  )
+}