feat: add cmarker and center map in routes page

src/pages/Routes/Routes.tsx

@@ -10,12 +10,17 @@ import {
   type RootState,
 } from "../../stores/store";
 import { getRouteHistory } from "../../stores/slices/dataSlice";
+import CMarker from "../../components/CMarker";
 
 const Routes: React.FC = () => {
   const [fromDate, setFromDate] = useState("");
   const [fromTime, setFromTime] = useState("");
   const [toDate, setToDate] = useState("");
   const [toTime, setToTime] = useState("");
+  const [mapCenter, setMapCenter] = useState({
+    lat: 37.33,
+    lng: -122,
+  });
 
   const { selectedDevice } = useAppSelector((state: RootState) => state.device);
   const { routeHistory, isRouteHistoryLoading } = useAppSelector(
@@ -47,6 +52,18 @@ const Routes: React.FC = () => {
     }
   }, [dispatch, selectedDevice]);
 
+  useEffect(() => {
+    if (routeHistory.length > 0) {
+      const lat = Number(routeHistory[0]?.location.lat);
+      const lng = Number(routeHistory[0]?.location.lon);
+      if (!isNaN(lat) && !isNaN(lng)) {
+        setMapCenter({ lat, lng });
+      }
+    } else {
+      setMapCenter({ lat: 37.33, lng: -122 });
+    }
+  }, [routeHistory]);
+
   const handleSearch = () => {
     if (!selectedDevice) return;
 
@@ -64,10 +81,6 @@ const Routes: React.FC = () => {
     );
   };
 
-  useEffect(() => {
-    console.log("routeHistory", routeHistory);
-  }, [routeHistory]);
-
   return (
     <div className="routes wrapper">
       <SectionHeader to="/home" />
@@ -75,10 +88,17 @@ const Routes: React.FC = () => {
       <div className="routes__content">
         <div style={{ height: "67vh", width: "100%" }}>
           <GoogleMapReact
-            defaultCenter={{ lat: 40.7128, lng: -74.006 }}
+            center={mapCenter}
             defaultZoom={12}
             options={{ disableDefaultUI: true }}
-          ></GoogleMapReact>
+          >
+            {routeHistory.length > 0 && (
+              <CMarker
+                lat={Number(routeHistory[0]?.location.lat)}
+                lng={Number(routeHistory[0]?.location.lon)}
+              />
+            )}
+          </GoogleMapReact>
         </div>
 
         <div className="routes__filter">

src/stores/slices/accountSlice.ts

@@ -54,8 +54,6 @@ export const checkPassword = createAsyncThunk(
         password,
       });
 
-      console.log("response", response);
-
       if (response?.message === "valid") {
         const deleteAccountResponse = await sendRpcRequest<{
           message: string;