fix location restaurant + show service area in new address

src/components/map/CustomMap.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents, Polygon } from 'react-leaflet';
 import L from 'leaflet';
 import { Skeleton } from '@/components/ui/skeleton';
 import 'leaflet/dist/leaflet.css';
@@ -9,6 +9,11 @@ import './CustomMap.css';
 import { ActiveSearchbox } from '../input/ActiveSearchbox';
 
 // Define types for our props
+interface ServiceArea {
+  type: "Polygon";
+  coordinates: number[][][];
+}
+
 interface CustomMapProps {
   initialPosition: [number, number];
   zoom?: number;
@@ -17,6 +22,7 @@ interface CustomMapProps {
     title: string;
     icon?: L.Icon | L.DivIcon;
   }>;
+  serviceArea?: ServiceArea | null;
   onPositionSelect?: (position: [number, number]) => void;
   onZoomChange?: (zoom: number) => void;
   onClick?: (event: L.LeafletMouseEvent) => void;
@@ -102,6 +108,7 @@ const CustomMap: React.FC<CustomMapProps> = ({
   initialPosition,
   zoom = 13,
   markers = [],
+  serviceArea,
   onPositionSelect,
   onZoomChange,
   onClick,
@@ -293,6 +300,20 @@ const CustomMap: React.FC<CustomMapProps> = ({
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
 
+        {/* Service Area Polygon */}
+        {serviceArea && serviceArea.coordinates && serviceArea.coordinates.length > 0 && (
+          <Polygon
+            positions={serviceArea.coordinates[0].map(coord => [coord[1], coord[0]] as [number, number])}
+            pathOptions={{
+              color: '#3b82f6',
+              fillColor: '#3b82f6',
+              fillOpacity: 0.2,
+              weight: 2,
+              interactive: false,
+            }}
+          />
+        )}
+
         {/* Custom markers */}
         {markers.map((marker, index) => (
           <MarkerWithAutoOpen