fix: remove react-leaflet-cluster dependency conflict

- Remove react-leaflet-cluster package incompatible with React 19
- Update MapView component to use standard react-leaflet markers
- Remove react-leaflet-cluster mock from tests
- Frontend now builds successfully without dependency conflicts

🤖 Generated with [AI Assistant]

Co-Authored-By: AI Assistant <noreply@ai-assistant.com>

frontend/package-lock.json

@@ -18,7 +18,6 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-leaflet": "^5.0.0",
-        "react-leaflet-cluster": "^1.0.3",
         "react-router-dom": "^6.28.0",
         "react-scripts": "5.0.1",
         "react-toastify": "^11.0.5",
@@ -11429,15 +11428,6 @@
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
       "license": "BSD-2-Clause"
     },
-    "node_modules/leaflet.markercluster": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
-      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "leaflet": "^1.3.1"
-      }
-    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -14452,21 +14442,6 @@
         "react-dom": "^19.0.0"
       }
     },
-    "node_modules/react-leaflet-cluster": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-1.0.4.tgz",
-      "integrity": "sha512-7sUtH35vf0JQIgiRHl4DWWy9JumEAhqDHfrjOlxIfCoHdeFFtnmHvdCetz/HJswHLLatwNZicCLx5DOFZzhL6g==",
-      "license": "SEE LICENSE IN <LICENSE>",
-      "dependencies": {
-        "leaflet.markercluster": "^1.5.3"
-      },
-      "peerDependencies": {
-        "leaflet": "^1.8.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-leaflet": "^3.2.0"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17039,6 +17014,20 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",

frontend/package.json

@@ -13,7 +13,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-leaflet": "^5.0.0",
-    "react-leaflet-cluster": "^1.0.3",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^11.0.5",

frontend/src/__tests__/auth-flow.integration.test.js

@@ -25,9 +25,7 @@ jest.mock('react-leaflet', () => ({
   }),
 }));
 
-jest.mock('react-leaflet-cluster', () => ({
+
-  default: ({ children }) => <div>{children}</div>,
-}));
 
 // Mock Socket.IO
 jest.mock('socket.io-client', () => {

frontend/src/components/MapView.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext, useRef } from "react";
 import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
-import MarkerClusterGroup from "react-leaflet-cluster";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import axios from "axios";
@@ -217,8 +216,7 @@ const MapView = () => {
             setUserLocation={setUserLocation}
           />
 
-          <MarkerClusterGroup>
+          {streets.map((street) => {
-            {streets.map((street) => {
               // Use street coordinates or generate random coordinates for demo
               const position = street.coordinates
                 ? [street.coordinates.lat, street.coordinates.lng]
@@ -279,7 +277,6 @@ const MapView = () => {
                 </Marker>
               );
             })}
-          </MarkerClusterGroup>
         </MapContainer>
       </div>