initialised commit on the ui converted in mui to astryx and changed the design to doormile

src/pages/nearle/reports/mapWithRoute.js

@@ -3,11 +3,13 @@ import { MapContainer, TileLayer, Marker, Polyline, Tooltip } from 'react-leafle
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import dayjs from 'dayjs';
-import { Chip, Grid, IconButton, Stack, ToggleButton, Typography } from '@mui/material';
-import DisabledByDefaultOutlinedIcon from '@mui/icons-material/DisabledByDefaultOutlined';
-import { useTheme } from '@emotion/react';
+import { Badge } from '@astryxdesign/core/Badge';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Text } from '@astryxdesign/core/Text';
+import { IconButton } from '@astryxdesign/core/IconButton';
 import { CloseCircleOutlined } from '@ant-design/icons';
 
+import logger from 'utils/logger';
 var utc = require('dayjs/plugin/utc');
 dayjs.extend(utc);
 
@@ -31,15 +33,13 @@ const endIcon = new L.Icon({
 });
 
 const MapWithRoute = ({ coordinates, additionalProps, order, setMapOpen }) => {
-  console.log('setMapOpen:', typeof setMapOpen);
-  console.log('coordinates', coordinates);
-  console.log(additionalProps.riderStart);
-  console.log(additionalProps.riderEnd);
-  console.log('order', order);
+  logger.info('setMapOpen:', typeof setMapOpen);
+  logger.info('coordinates', coordinates);
+  logger.info(additionalProps.riderStart);
+  logger.info(additionalProps.riderEnd);
+  logger.info('order', order);
   const mapRef = useRef(null);
 
-  const theme = useTheme;
-
   useEffect(() => {
     if (mapRef.current && coordinates.length > 0) {
       const bounds = calculateBounds(coordinates);
@@ -69,12 +69,12 @@ const MapWithRoute = ({ coordinates, additionalProps, order, setMapOpen }) => {
 
   const showList = (primary, secondary) => {
     return (
-      <Stack direction="row" spacing={1} alignItems="center">
-        <Typography variant="h5" color="text.primary" sx={{ fontSize: 13 }}>
+      <HStack gap={1} vAlign="center">
+        <Text type="strong" style={{ fontSize: 13 }}>
           {primary}:
-        </Typography>
-        <Chip label={secondary || 'N/A'} color="primary" variant="combined" size="small" sx={{ fontWeight: 1000, fontSize: 14 }} />
-      </Stack>
+        </Text>
+        <Badge label={secondary || 'N/A'} variant="info" />
+      </HStack>
     );
   };
 
@@ -90,42 +90,31 @@ const MapWithRoute = ({ coordinates, additionalProps, order, setMapOpen }) => {
           position: 'relative'
         }}
       >
-        <Chip
-          label="close"
-          color="primary"
-          variant="combined"
-          onClick={() => setMapOpen(false)}
-          size="large"
-          sx={{
-            position: 'absolute',
-            top: 8,
-            right: 8,
-            zIndex: 1000,
-            '&:hover': {},
-            cursor: 'pointer'
-          }}
+        <IconButton
+          label="Close"
           icon={<CloseCircleOutlined />}
+          variant="primary"
+          onClick={() => setMapOpen(false)}
+          style={{ position: 'absolute', top: 8, right: 8, zIndex: 1000 }}
         />
 
         {/* Overlay */}
-        <Stack
-          direction="row"
+        <HStack
           gap={2}
-          flexWrap="wrap"
-          alignItems="center"
-          justifyContent="flex-start"
-          sx={{
+          wrap="wrap"
+          vAlign="center"
+          justify="start"
+          style={{
             position: 'absolute',
             bottom: 0,
             zIndex: 1000,
             left: 0,
             right: 0,
-            px: { xs: 1, custom500: 2, custom700: 2 },
-            py: { xs: 1, custom500: 2, custom900: 4 },
+            padding: '8px 16px',
             backgroundColor: 'rgba(255, 255, 255, 0.95)',
             maxWidth: '100%',
             width: 'auto',
-            boxShadow: (theme) => theme.shadows[3]
+            boxShadow: 'var(--shadow-md)'
           }}
         >
           {showList('Tenant', order?.tenantname)}
@@ -135,7 +124,7 @@ const MapWithRoute = ({ coordinates, additionalProps, order, setMapOpen }) => {
           {showList('Kms', order?.kms)}
           {showList('Actual kms', order?.actualkms)}
           {showList('Rider kms', order?.riderkms)}
-        </Stack>
+        </HStack>
 
         {/* Map */}
         <MapContainer center={center} zoom={15} scrollWheelZoom={false} style={{ height: '100%', width: '100%' }} ref={mapRef}>