feat(doctor map): replace Google Maps iframe with Leaflet (OSM)

The Google Maps iframe was blocked by CSP (frame-src falls back to
default-src 'self'). Switched the doctor-page location map to react-leaflet
with OpenStreetMap tiles — no iframe, and CSP already allows https image
tiles (img-src 'self' https:). Marker icons are bundled from the leaflet
package (no CDN). MapView is dynamically imported (ssr:false) since Leaflet
needs window.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

components/doctor/detailDoctor/cards/locations/Item.js

@@ -1,12 +1,16 @@
 "use client";
 
 import { useState } from "react";
+import dynamic from "next/dynamic";
 import { Button } from "@mui/material";
 import ArrowBottomGrayD from "@/components/icons/ArrowBottomGrayD";
 import ModalOpenLocation from "@/app/component/openLocation";
 import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
 import RoutingC from "@/components/icons/RoutingC";
 
+// Leaflet به window نیاز دارد → فقط کلاینت
+const MapView = dynamic(() => import("./MapView"), { ssr: false });
+
 function Item({ data }) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -64,13 +68,10 @@ function Item({ data }) {
         </div>
         {isOpen && data?.map?.latitude && data?.map?.longitude && (
           <div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
-            <iframe
-              src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
-              className="w-full rounded-lg mt-4 h-full"
-              referrerPolicy="no-referrer-when-downgrade"
-              allowFullScreen=""
-              loading="lazy"
-            ></iframe>
+            <MapView
+              latitude={data.map.latitude}
+              longitude={data.map.longitude}
+            />
 
             <ModalOpenLocation
               open={open}

components/doctor/detailDoctor/cards/locations/MapView.js

@@ -0,0 +1,40 @@
+"use client";
+
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import markerIcon from "leaflet/dist/images/marker-icon.png";
+import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
+import markerShadow from "leaflet/dist/images/marker-shadow.png";
+
+// آیکون پیش‌فرض Leaflet را از پکیج bundle می‌کنیم (بدون CDN؛ سازگار با CSP).
+const icon = L.icon({
+  iconUrl: markerIcon.src ?? markerIcon,
+  iconRetinaUrl: markerIcon2x.src ?? markerIcon2x,
+  shadowUrl: markerShadow.src ?? markerShadow,
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
+export default function MapView({ latitude, longitude }) {
+  const lat = parseFloat(latitude);
+  const lng = parseFloat(longitude);
+  if (Number.isNaN(lat) || Number.isNaN(lng)) return null;
+
+  return (
+    <MapContainer
+      center={[lat, lng]}
+      zoom={15}
+      scrollWheelZoom={false}
+      style={{ height: "100%", width: "100%", borderRadius: 8 }}
+    >
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://openstreetmap.org">OpenStreetMap</a>'
+      />
+      <Marker position={[lat, lng]} icon={icon} />
+    </MapContainer>
+  );
+}