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

@@ -0,0 +1,31 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { CROP_COLORS, type CropType } from './cropZoningTypes'
+
+export default function ZoneLegend() {
+  const t = useTranslations('cropZoning')
+
+  const items: { crop: CropType; label: string }[] = [
+    { crop: 'wheat', label: t('crops.wheat') },
+    { crop: 'canola', label: t('crops.canola') },
+    { crop: 'saffron', label: t('crops.saffron') }
+  ]
+
+  return (
+    <div className='absolute bottom-4 start-4 z-[1000] rounded-xl border border-white/20 bg-white/70 px-4 py-3 shadow-lg backdrop-blur-md dark:bg-gray-900/70 dark:border-gray-700/50'>
+      <div className='text-xs font-medium text-gray-600 dark:text-gray-400 mbe-2'>{t('legend')}</div>
+      <div className='flex flex-col gap-1.5'>
+        {items.map(({ crop, label }) => (
+          <div key={crop} className='flex items-center gap-2'>
+            <div
+              className='h-4 w-4 rounded'
+              style={{ backgroundColor: CROP_COLORS[crop], opacity: 0.8 }}
+            />
+            <span className='text-sm text-gray-700 dark:text-gray-300'>{label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}