overall commit

2026-05-10 08:03:41 +05:30
parent d73c714290
commit f38853bec1
17 changed files with 3061 additions and 829 deletions
--- a/src/pages/nearle/reports/RiderLocationMap.js
+++ b/src/pages/nearle/reports/RiderLocationMap.js
@@ -0,0 +1,76 @@
+import { Button } from '@mui/material';
+import { LoadScriptNext, GoogleMap, Marker, OverlayView } from '@react-google-maps/api';
+
+const containerStyle = {
+  width: '100%',
+  height: 'calc(100vh - 150px)'
+};
+
+export default function RiderLocationMap({ riderLocations }) {
+  console.log('riderLocations', riderLocations);
+
+  const center = {
+    lat: Number(riderLocations?.[0]?.latitude || 11.0056),
+    lng: Number(riderLocations?.[0]?.longitude || 76.9661)
+  };
+  const GreenIcon = {
+    url: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
+    scaledSize: new window.google.maps.Size(25, 41),
+    anchor: new window.google.maps.Point(12, 41)
+  };
+
+  const RedIcon = {
+    url: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
+    scaledSize: new window.google.maps.Size(25, 41),
+    anchor: new window.google.maps.Point(12, 41)
+  };
+
+  return (
+    <LoadScriptNext googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
+      <GoogleMap mapContainerStyle={containerStyle} zoom={12} center={center}>
+        {riderLocations &&
+          riderLocations?.map((r, index) => {
+            const lat = Number(r.latitude);
+            const lng = Number(r.longitude);
+            return (
+              <div key={index}>
+                {/* Marker */}
+                <Marker
+                  position={{ lat, lng }}
+                  icon={r.status == 'active' ? GreenIcon : RedIcon}
+                  label={{
+                    fontSize: '14px',
+                    fontWeight: 'bold'
+                  }}
+                />
+                <OverlayView position={{ lat, lng }} mapPaneName={OverlayView.OVERLAY_LAYER}>
+                  <div
+                    style={{
+                      background: 'none',
+                      color: 'green',
+                      padding: '2px 8px',
+                      borderRadius: '4px',
+                      fontSize: '12px',
+                      fontWeight: 600,
+                      whiteSpace: 'nowrap',
+                      transform: 'translate(-50%, -140%)',
+                      pointerEvents: 'none',
+                      ml: 20
+                    }}
+                  >
+                    <Button variant="contained" color="primary" size="small">
+                      {` ${r.username} `}
+                      {/* <br /> */}
+                      {/* {`${r.contactno || '##### ##### '}   `} */}
+                      <br />
+                      {`(${r.orderid || ''})   `}
+                    </Button>
+                  </div>
+                </OverlayView>
+              </div>
+            );
+          })}
+      </GoogleMap>
+    </LoadScriptNext>
+  );
+}