From e6c8df55832bd5e76ff9d57def9c13730c2f1419 Mon Sep 17 00:00:00 2001
From: joshikannan <joshikannan99@gmail.com>
Date: Fri, 17 Oct 2025 10:55:05 +0530
Subject: [PATCH] orderdetails , orders

---
 public/index.html                             |   3 +-
 .../nearle_components/CircularLoader.js       |  47 ++
 .../MainLayout/Header/HeaderContent/index.js  |   5 +-
 src/menu-items/other.js                       |   2 +-
 src/pages/nearle/api/api.js                   |  11 +-
 src/pages/nearle/clients/customers.js         |   4 +-
 src/pages/nearle/login.js                     | 157 +----
 src/pages/nearle/orders/createorder1.js       |   9 +-
 src/pages/nearle/orders/multipleOrders.js     | 343 ++--------
 src/pages/nearle/orders/orders.js             | 486 +++++---------
 src/pages/nearle/reports/mapWithRoute.js      | 143 +++-
 src/pages/nearle/reports/ordersDetails.js     | 610 ++++++------------
 src/routes/MainRoutes.js                      |  12 -
 13 files changed, 592 insertions(+), 1240 deletions(-)
 create mode 100644 src/components/nearle_components/CircularLoader.js

diff --git a/public/index.html b/public/index.html
index 6377c51..175f73a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,7 +27,8 @@
 
     <!-- this is to resolve issue in old safari browser in tablet -->
     <script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ2c_pOSOFYSjxGMwkFvCVWKjYOM9siow&libraries=places"></script>
+    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ2c_pOSOFYSjxGMwkFvCVWKjYOM9siow&libraries=places"></script> -->
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhkGfnq27sN0wV5y_S-M2KojpFTk_by-Q&libraries=places"></script>
 
     <style>
       .datedialog > div > div > .MuiPaper-root {
diff --git a/src/components/nearle_components/CircularLoader.js b/src/components/nearle_components/CircularLoader.js
new file mode 100644
index 0000000..efa9da8
--- /dev/null
+++ b/src/components/nearle_components/CircularLoader.js
@@ -0,0 +1,47 @@
+import { styled } from '@mui/material/styles';
+import CircularProgress from '@mui/material/CircularProgress';
+import nelogo from '../../assets/images/logo-sm.png';
+
+// Styled Loader Wrapper
+const LoaderWrapper = styled('div')(() => ({
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  zIndex: 2001,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: 'rgba(255, 255, 255, 0.7)', // Light overlay effect
+  padding: '20px',
+  borderRadius: '10px' // Soft rounded border
+}));
+
+// Styled Logo Wrapper
+const LogoWrapper = styled('div')(() => ({
+  position: 'absolute',
+  width: '40px', // Adjust based on your logo size
+  height: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+}));
+
+// ==============================|| Custom Circular Loader with Logo ||============================== //
+const CircularLoader = () => (
+  <LoaderWrapper>
+    {/* Circular Loader */}
+    <CircularProgress
+      color="primary"
+      size={80} // Increase size
+      thickness={6} // Thicker border
+    />
+
+    {/* Logo Positioned at the Center */}
+    <LogoWrapper>
+      <img src={nelogo} alt="Logo" style={{ width: '100%', height: '100%' }} />
+    </LogoWrapper>
+  </LoaderWrapper>
+);
+
+export default CircularLoader;
diff --git a/src/layout/MainLayout/Header/HeaderContent/index.js b/src/layout/MainLayout/Header/HeaderContent/index.js
index c4ddfd7..bb01e91 100644
--- a/src/layout/MainLayout/Header/HeaderContent/index.js
+++ b/src/layout/MainLayout/Header/HeaderContent/index.js
@@ -10,7 +10,6 @@ import {
   Popper,
   ClickAwayListener,
   List,
-  ListItem,
   ListItemButton,
   ListItemText,
   Grid,
@@ -71,8 +70,8 @@ const HeaderContent = () => {
       {/* {!matchesXs && <Search />} */}
       <Stack width="100%" direction="row" justifyContent="space-between" spacing={2} alignItems="center">
         {/* {!matchesXs && megaMenu} */}
-        <Typography variant="h5" sx={{ ml: 2, color: '#fff' }}>
-          {localStorage.getItem('firstname') || ''}
+        <Typography variant="h5" sx={{ ml: 2, color: '#fff', whiteSpace: 'nowrap' }}>
+          {localStorage.getItem('fullname') || ''}
         </Typography>
         {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
         <Stack direction={'row'} spacing={2}>
diff --git a/src/menu-items/other.js b/src/menu-items/other.js
index a34d9a5..518a542 100644
--- a/src/menu-items/other.js
+++ b/src/menu-items/other.js
@@ -74,7 +74,7 @@ const other = {
       icon: AiOutlineBarChart,
       children: [
         {
-          id: 'ordersDetails',
+          id: 'OrdersDetails',
           title: <FormattedMessage id="OrdersDetails" />,
           type: 'item',
           url: 'reports/ordersdetails',
diff --git a/src/pages/nearle/api/api.js b/src/pages/nearle/api/api.js
index 87f3af8..76b59d1 100644
--- a/src/pages/nearle/api/api.js
+++ b/src/pages/nearle/api/api.js
@@ -136,16 +136,13 @@ export const fetchRidersSummary = async ({ queryKey }) => {
 // ==============================|| fetchorderdetails (orders detail)||============================== //
 export const fetchorderdetails = async ({ queryKey }) => {
   console.log('queryKey of fetchorderdetails', queryKey);
-  const [tabValue, appId, startdate, enddate] = queryKey;
-  let status = tabValue === 0 ? 'delivered' : tabValue === 1 ? 'pending' : 'cancelled';
+  const [startdate, enddate, currentStatus] = queryKey;
   const response = await axios.get(
-    // appId == -1
-    //   ? `${process.env.REACT_APP_URL}/orders/getorders/?fromdate=${startdate}&todate=${enddate}`
-    //   : `${process.env.REACT_APP_URL}/orders/getorders/?fromdate=${startdate}&todate=${enddate}&applocationid=${appId}`
-    `${process.env.REACT_APP_URL}/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}`
+    `${process.env.REACT_APP_URL}/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}&status=${
+      currentStatus == 'All' ? '' : currentStatus
+    }`
   );
   console.log('fetchorderdetails', response.data.details);
-
   return response.data.details;
 };
 // ==============================|| fetchCount (orders detail)||============================== //
diff --git a/src/pages/nearle/clients/customers.js b/src/pages/nearle/clients/customers.js
index 1b628a4..b363657 100644
--- a/src/pages/nearle/clients/customers.js
+++ b/src/pages/nearle/clients/customers.js
@@ -1905,10 +1905,10 @@ const Customers = () => {
                                                 {row.orderid}
                                               </Typography>
                                               <Typography noWrap sx={{ fontSize: '11px' }}>
-                                                {dayjs(row.deliverytime).utc().format('DD/MM/YYYY')}
+                                                {dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
                                               </Typography>
                                               <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
-                                                {dayjs(row.deliverytime).utc().format('hh:mm A')}
+                                                {dayjs(row.deliverydate).utc().format('hh:mm A')}
                                               </Typography>
                                             </TableCell>
                                             <TableCell align="left">
diff --git a/src/pages/nearle/login.js b/src/pages/nearle/login.js
index 095deba..6ec5534 100644
--- a/src/pages/nearle/login.js
+++ b/src/pages/nearle/login.js
@@ -41,26 +41,6 @@ const Login = () => {
   let navigate = useNavigate();
   // let dispatch = useDispatch();
   const [submitting, setSubmitting] = useState(false);
-  // let loginuserid = useSelector((state)=>state.logininfo);
-
-  // useEffect(() => {
-
-  //     if (alertmessage) {
-  //         dispatch(
-  //             openSnackbar({
-  //                 open: true,
-  //                 message: alertmessage,
-  //                 variant: 'alert',
-  //                 anchorOrigin: { vertical: 'top', horizontal: 'right' },
-  //                 alert: {
-  //                     // variant:'info',
-  //                     color: 'error',
-
-  //                 }
-  //             })
-  //         )
-  //     }
-  // }, [toast])
 
   useEffect(() => {
     if (
@@ -205,16 +185,7 @@ const Login = () => {
     }
   };
 
-  // const handleClose = () => {
-  //     setToast(false)
-  // }
   const opentoast = (message) => {
-    // setToast(true)
-
-    // setTimeout(() => {
-    //     // handleClose();
-    //     setToast(false)
-    // }, 2000);
     enqueueSnackbar(message, {
       variant: 'error',
       anchorOrigin: { vertical: 'top', horizontal: 'right' },
@@ -227,7 +198,7 @@ const Login = () => {
       {/* <AuthWrapper> */}
       <Box sx={{ minHeight: '100vh' }}>
         {loading && <Loader />}
-        {/* <AuthBackground /> */}
+
         <Grid
           container
           direction="column"
@@ -277,21 +248,12 @@ const Login = () => {
                       width: '100%'
                     }}
                   >
-                    {/* <CardHeader title={<Typography variant="h4">Login</Typography>} /> */}
-                    {/* <Divider sx={{ borderStyle: 'dashed' }} /> */}
-                    {/* <h1>eee</h1> */}
-                    {/* <CardHeader> */}
-
                     <Grid container spacing={3}>
                       <Grid item xs={12}>
                         <Stack direction="row" justifyContent="flex-start" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                           <CardHeader title={<Typography variant="h3">Login</Typography>} />
                         </Stack>
                       </Grid>
-
-                      {/* <Grid item xs={12}>
-                                                <AuthLogin isDemo={isLoggedIn} />
-                                            </Grid> */}
                     </Grid>
                     <CardContent>
                       <form
@@ -302,31 +264,6 @@ const Login = () => {
                       >
                         <Grid container spacing={2}>
                           <Grid item xs={12}>
-                            {/* <Stack spacing={1}> */}
-                            {/* <InputLabel htmlFor="email-login">Email Address</InputLabel>
-                                                        <OutlinedInput
-                                                            id="email-login"
-                                                            type="email"
-                                                            value={values.email}
-                                                            name="email"
-                                                            onBlur={handleBlur}
-                                                            onChange={handleChange}
-                                                            placeholder="Enter email address"
-                                                            fullWidth
-                                                            id="username1"
-                                                             label="E-mail Address"
-                                                             variant="outlined"
-                                                            autoComplete='email'
-                                                            required
-                                                            onChange={usernamecheck}
-                                                            error={checkusername}
-                                                        error={Boolean(touched.email && errors.email)}
-                                                        />
-                                                        {touched.email && errors.email && (
-                                                        <FormHelperText error id="standard-weight-helper-text-email-login">
-                                                            {errors.email}
-                                                        </FormHelperText>
-                                                    )} */}
                             <TextField
                               margin="normal"
                               fullWidth
@@ -349,85 +286,19 @@ const Login = () => {
                               label="Password"
                               variant="outlined"
                             />
-                            {/* </Stack> */}
                           </Grid>
                           <Grid item xs={12}>
-                            {/* <Stack spacing={0}> */}
-                            {/* <InputLabel htmlFor="password-login">Password</InputLabel> */}
-                            {/* <OutlinedInput
-                                                            fullWidth
-                                                            // error={Boolean(touched.password && errors.password)}
-                                                            // id="-password-login"
-                                                            // type={showPassword ? 'text' : 'password'}
-                                                            // value={values.password}
-                                                            // name="password"
-                                                            // onBlur={handleBlur}
-                                                            // onChange={handleChange}
-                                                            // endAdornment={
-                                                            //     <InputAdornment position="end">
-                                                            //         <IconButton
-                                                            //             aria-label="toggle password visibility"
-                                                            //             onClick={handleClickShowPassword}
-                                                            //             onMouseDown={handleMouseDownPassword}
-                                                            //             edge="end"
-                                                            //             color="secondary"
-                                                            //         >
-                                                            //             {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
-                                                            //         </IconButton>
-                                                            //     </InputAdornment>
-                                                            // }
-                                                            placeholder="Enter password"
-                                                            // margin="normal"
-                                                            // fullWidth
-                                                            required
-                                                            autoComplete="current-password"
-                                                            onChange={(e) => setPassword(e.target.value)}
-                                                            type='password' id="password1"
-                                                        /> */}
-                            {/* {touched.password && errors.password && (
-                                                        <FormHelperText error id="standard-weight-helper-text-password-login">
-                                                            {errors.password}
-                                                        </FormHelperText>
-                                                    )} */}
-
-                            {/* </Stack> */}
                             <Link href="#" variant="h6">
                               Forgot password?
                             </Link>
                           </Grid>
 
-                          {/* <Grid item xs={12} sx={{ mt: -1 }}>
-                                                <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-                                                    <FormControlLabel
-                                                        control={
-                                                            <Checkbox
-                                                                checked={checked}
-                                                                onChange={(event) => setChecked(event.target.checked)}
-                                                                name="checked"
-                                                                color="primary"
-                                                                size="small"
-                                                            />
-                                                        }
-                                                        label={<Typography variant="h6">Keep me sign in</Typography>}
-                                                    />
-                                                    <Link variant="h6" component={RouterLink} to={isDemo ? '/auth/forgot-password' : '/forgot-password'} color="text.primary">
-                                                        Forgot Password?
-                                                    </Link>
-                                                </Stack>
-                                                  </Grid> */}
-                          {/* {errors.submit && (
-                                                <Grid item xs={12}>
-                                                    <FormHelperText error>{errors.submit}</FormHelperText>
-                                                </Grid>
-                                                  )} */}
                           <Grid item xs={12}>
-                            {/* <AnimateButton> */}
                             <AnimateButton>
                               <Button
                                 disabled={submitting}
                                 onClick={() => {
                                   loginsend();
-                                  // navigate('/dashboard')
                                 }}
                                 fullWidth
                                 size="large"
@@ -438,40 +309,27 @@ const Login = () => {
                                 Login
                               </Button>
                             </AnimateButton>
-                            {/* </AnimateButton> */}
                           </Grid>
                         </Grid>
-                        {/* </Grid> */}
                       </form>
                     </CardContent>
-                    {/* </CardHeader> */}
                   </Card>
                 </Box>
               </Grid>
             </Grid>
           </Grid>
-          <Grid
-            item
-            xs={12}
-            // sx={{ m: 3, mt: 1 }}
-            sx={{ mb: 1 }}
-          >
-            {/* <AuthFooter /> */}
-
+          <Grid item xs={12} sx={{ mb: 1 }}>
             <Container maxWidth="xl">
               <Stack
                 direction={{ sx: 'column', md: 'row' }}
                 justifyContent={{ sx: 'center', md: 'space-between' }}
                 spacing={2}
-                // textAlign={{ sx: 'center', md: 'inherit' }}
-
                 alignItems={{ sx: 'center', md: 'inherit' }}
                 width="100%"
               >
                 <Stack direction="row" justifyContent="center" spacing={1}>
                   <Typography variant="subtitle2" color="secondary" component="span" sx={{ display: 'flex' }}>
                     &copy; All rights reserved
-                    {/* <Typography variant="subtitle2" href="#mantis-privacy" target="_blank" underline="hover" sx={{ml:1}}>Privacy Policy</Typography> */}
                   </Typography>
                 </Stack>
 
@@ -504,17 +362,6 @@ const Login = () => {
                   >
                     Privacy Policy
                   </Typography>
-                  {/* <Typography
-                                    variant="subtitle2"
-                                    color="secondary"
-                                    component={Link}
-                                    href="#"
-                                    // target="_blank"
-                                    underline="hover"
-                                    textAlign='center'
-                                >
-                                    CA Privacy Notice
-                                </Typography> */}
                 </Stack>
               </Stack>
             </Container>
diff --git a/src/pages/nearle/orders/createorder1.js b/src/pages/nearle/orders/createorder1.js
index fb4249d..36cf6f6 100644
--- a/src/pages/nearle/orders/createorder1.js
+++ b/src/pages/nearle/orders/createorder1.js
@@ -766,7 +766,7 @@ const Createorder1 = () => {
     enqueueSnackbar(message, {
       variant: variant,
       anchorOrigin: { vertical: 'top', horizontal: 'right' },
-      autoHideDuration: time ? time : 1500
+      autoHideDuration: time ? time : 2000
     });
     console.log(alertmessage);
   };
@@ -829,7 +829,6 @@ const Createorder1 = () => {
         pickuplocation: pickCust.suburb || '',
         pickuplocationid: pickCust.deliverylocationid || 0,
         pickuplong: pickCust.longitude.toString(),
-        pickupaddress: pickCust.address || '',
         processing: '',
         ready: '',
         remarks: '',
@@ -943,10 +942,10 @@ const Createorder1 = () => {
 
           navigate('/orders');
         } else {
-          opentoast(res.data.message, 'warning');
+          opentoast('Something went wrong, Cannot create order', 'warning');
         }
         setLoading(false);
-        console.log(res);
+        console.log(createRes);
       } catch (error) {
         console.log('createResErr', error);
       }
@@ -1318,7 +1317,7 @@ const Createorder1 = () => {
                   disablePortal
                   id="combo-box-demo"
                   options={tenantLocations || []}
-                  getOptionLabel={(option) => `${option.locationname} (${option.locationsuburb})` || ''}
+                  getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
                   sx={{ width: 300 }}
                   renderInput={(params) => <TextField {...params} label="Select Business Locations" />}
                   onChange={(event, value, reason) => {
diff --git a/src/pages/nearle/orders/multipleOrders.js b/src/pages/nearle/orders/multipleOrders.js
index 991b42e..8b3f17c 100644
--- a/src/pages/nearle/orders/multipleOrders.js
+++ b/src/pages/nearle/orders/multipleOrders.js
@@ -23,13 +23,9 @@ import {
   Grid,
   Typography,
   Stack,
-  Box,
   Button,
   TextField,
   Autocomplete,
-  CardActions,
-  Chip,
-  Avatar,
   Divider,
   Dialog,
   DialogTitle,
@@ -37,16 +33,7 @@ import {
   Checkbox,
   DialogActions,
   CircularProgress,
-  ButtonGroup,
-  FormLabel,
   IconButton,
-  Drawer,
-  InputLabel,
-  Select,
-  MenuItem,
-  Switch,
-  CardHeader,
-  Card,
   OutlinedInput,
   FormGroup,
   FormControlLabel,
@@ -58,75 +45,42 @@ import {
   Paper,
   TableHead
 } from '@mui/material';
-import { log } from 'util';
+import CircularLoader from 'components/nearle_components/CircularLoader';
 
 const MultipleOrders = () => {
   const navigate = useNavigate();
   const theme = useTheme();
-  const [locaName, setLocoName] = useState('Select Location');
-  const [locations, setLocations] = useState([]);
-  const [tenantlist, setTenantlist] = useState([]);
   const [loading, setLoading] = useState(false);
   const [btnLoading, setBtnLoading] = useState(false);
   const [appId, setAppId] = useState(0);
-  const [isAppLocation, setIsAppLocation] = useState(false);
-  const [isBusiness, setIsBusiness] = useState(false);
-  const [isClient, setisclient] = useState(false);
+
   const [tenantLocations, setTenantlocations] = useState([]);
   const userid = localStorage.getItem('userid');
   const tenId = localStorage.getItem('tenantid');
-  const [tenantid, setTenantid] = useState();
   const [tid, setTid] = useState(0);
-  const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
-  const [tenantlocation, setTenantlocation] = useState('');
   const [isLocation, setIsLocation] = useState(false);
   const [basePrice, setBasePrice] = useState(0);
   const [pricePerKm, setPricePerKm] = useState(0);
   const [minKm, setMinKm] = useState(0);
-  const [tenantinfo, setTenantinfo] = useState({});
   const [pickCust, setPickCust] = useState({});
   const [dropCust, setDropCust] = useState([]);
   const [isCustomerOpen, setIsCustomerOpen] = useState(false);
   const [searchCustList, setSearchCustList] = useState('');
   const [customerlist, setCustomerlist] = useState([]);
-  const [clientdetail, setClientdetail] = useState([]);
-  const [appLocaLat, setAppLocaLat] = useState();
-  const [appLocaLng, setAppLocaLng] = useState();
-  const [appLocaRadius, setAppLocaRadius] = useState();
   const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
   const [timeslotarr, setTimeslotarr] = useState([]);
-  const [showDistance, setShowDistance] = useState(false);
-  const [subCat, setSubCat] = useState([]);
-  const [subCatName, setSubCatName] = useState('Select ');
-  const [subCatId, setSubCatId] = useState(0);
-  const [weight, setWeight] = useState('');
-  const [selectedCatChip, setSelectedCatChip] = useState(null);
-  const [isSms, setIsSms] = useState(0);
   const [starttime, setStatrttime] = useState();
   const [endtime, setEndtime] = useState();
-  const [selectedtime, setSelectedtime] = useState('');
-  const [distance, setDistance] = useState(0);
   const [alertmessage, setAlertmessage] = useState('');
   const [otherinstructions, setOtherinstructions] = useState('');
-  const [totalCharge, setTotalCharge] = useState(0);
   const [admintoken, setAdmintoken] = useState();
-  const [tenant, setTenant] = useState(0);
   const [totaldist, settotaldist] = useState(0);
   const [totalAmt, settotalAmt] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
 
-  // =============================================== || chipStyle ( time slot) || ===============================================
-  const chipStyle = (chipLabel) => ({
-    cursor: 'pointer',
-    backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : 'default',
-    color: selectedCatChip === chipLabel ? '#fff' : '',
-    '&:hover': {
-      backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : theme.palette.primary.light,
-      color: '#fff'
-    }
-  });
-  const handleChipClick = (chipLabel) => {
-    setSelectedCatChip(chipLabel);
-  };
+  useEffect(() => {
+    console.log('dropCust', dropCust);
+  }, [dropCust]);
 
   // =============================================== || opentoast || ===============================================
   const opentoast = (message, variant, time) => {
@@ -141,13 +95,7 @@ const MultipleOrders = () => {
   const fetchAppLocations = async () => {
     try {
       const locationRes = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`);
-      // const updatedLocations = [
-      //   ...locationRes.data.details,
-      //   { partnername: 'All', applocationid: -1 }
-      // ];
-      // console.log('fetchAppLocations', updatedLocations);
       console.log('fetchAppLocations', locationRes.data.details);
-      setLocations(locationRes.data.details);
     } catch (err) {
       console.log('locationRes', err);
     }
@@ -156,32 +104,6 @@ const MultipleOrders = () => {
     fetchAppLocations();
   }, []);
 
-  // ===================================================== || fetchtenantinfolist || =====================================================
-
-  const fetchtenantinfolist = async (id) => {
-    setLoading(true);
-    await axios
-      .get(`${process.env.REACT_APP_URL}/tenants/gettenants/?applocationid=${id}&status=active`)
-
-      .then((res) => {
-        console.log(res);
-        if (res.data.status) {
-          let arr = [];
-          res.data.details.map((val) => {
-            arr.push({
-              ...val,
-              label: `${val.tenantname}`
-            });
-          });
-          setTenantlist(arr);
-        }
-        setLoading(false);
-      })
-      .catch((err) => {
-        console.log(err);
-        setLoading(false);
-      });
-  };
   // ============================================= || fetchTenantPricing  || =============================================
 
   const fetchTenantPricing = async (id) => {
@@ -207,12 +129,8 @@ const MultipleOrders = () => {
         setIsLocation(true);
         setTenantlocations(res.data.details);
         setPickCust(res.data.details[0]);
-        setTenanatLocoId(res.data.details[0].locationid);
-        setTenantlocation(res.data.details[0].locationaddress); //client address
-        setIsBusiness(true);
       } else {
         setTenantlocations(res.data.details);
-        setIsBusiness(false); // became true after select from tenanatLocations
       }
     } catch (err) {
       console.log('gettenantlocations', err);
@@ -234,7 +152,6 @@ const MultipleOrders = () => {
           if (res.data.status) {
             console.log('clientdetails', res.data.details);
 
-            setClientdetail(res.data.details);
             setCustomerlist(res.data.details);
             let arr = [];
             res.data.details.map((val) => {
@@ -276,11 +193,15 @@ const MultipleOrders = () => {
 
   // ========================================================= || handleCheckboxChange || =========================================================
   const handleCheckboxChange = async (event, customer) => {
+    setIsLoading(true);
+    console.log('event', event.target.checked);
     console.log('customer', customer);
     if (event.target.checked) {
       // If the checkbox is checked, calculate the distance and add the customer
       try {
         const obj = await calculateDistance(customer);
+        console.log('return of calculateDistance', obj);
+
         const { roundedDistance, totalcharge } = obj;
         // Create a new customer object with the distance property
         const updatedCustomer = {
@@ -297,32 +218,42 @@ const MultipleOrders = () => {
       } catch (error) {
         console.error('Failed to calculate distance:', error);
       }
+      setIsLoading(false);
     } else {
       // If the checkbox is unchecked, remove the customer from dropCust
       setDropCust((prevDropCust) => {
         return prevDropCust.filter((cust) => cust.customerid !== customer.customerid);
       });
+      setIsLoading(false);
     }
   };
 
   // ========================================================= || calculateDistance || =========================================================
   const calculateDistance = async (customer) => {
+    console.log('Distance calculation starts');
     const service = new google.maps.DistanceMatrixService();
-
     // Helper function to get the distance matrix
-    const getDistanceMatrix = (origins, destinations) => {
+    const getDistanceMatrix = async (origins, destinations) => {
+      console.log('origins', origins);
+      console.log('destinations', destinations);
       return new Promise((resolve, reject) => {
+        console.log('calculation starts');
         service.getDistanceMatrix(
           {
-            origins: [new google.maps.LatLng(origins.locationlatitude, origins.locationlong)],
+            origins: [new google.maps.LatLng(origins.latitude, origins.longitude)],
             destinations: [new google.maps.LatLng(destinations.latitude, destinations.longitude)],
             travelMode: 'DRIVING',
             unitSystem: google.maps.UnitSystem.METRIC // Distances in metric units (km)
           },
           (response, status) => {
+            console.log('cal response', response);
+            console.log('cal status', status);
             if (status === 'OK') {
+              console.log('calcualtion resolved');
               resolve(response);
             } else {
+              console.log('calcualtion rejected');
+
               reject(new Error(`Error calculating distance: ${status}`));
             }
           }
@@ -348,14 +279,12 @@ const MultipleOrders = () => {
         console.log('pricePerKm', pricePerKm);
         console.log('basePrice', basePrice);
         totalcharge = basePrice;
-        setTotalCharge(basePrice);
       } else {
         console.log('minKm', minKm);
         console.log('pricePerKm', pricePerKm);
         console.log('basePrice', basePrice);
         totalcharge = (roundedDistance - minKm) * pricePerKm + basePrice;
         console.log('totalcharge', totalcharge);
-        setTotalCharge(totalcharge);
       }
 
       // Return the rounded distance
@@ -375,9 +304,6 @@ const MultipleOrders = () => {
         console.log('fetchTiming', res);
         const { opentime, closetime, latitude, longitude, radius } = res.data.details[0];
         if (res.data.status) {
-          setAppLocaLat(latitude);
-          setAppLocaLng(longitude);
-          setAppLocaRadius(radius);
           setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`);
           setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`);
           console.log('starttime', `${dayjs().format('MM-DD-YYYY')} ${opentime}`);
@@ -405,23 +331,7 @@ const MultipleOrders = () => {
       fetchTiming();
     }
   }, [starttime, endtime, appId]);
-  // ==================================================== || getsubcategories || ====================================================
-  const getsubcategories = async () => {
-    await axios
-      .get(`${process.env.REACT_APP_URL}/utils/getsubcategories/?moduleid=6`)
-      .then((res) => {
-        console.log('subcateRes', res.data.details);
-        if (res.data.status) {
-          setSubCat(res.data.details);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-  useEffect(() => {
-    getsubcategories();
-  }, []);
+
   const fetchAppAdminTokens = async () => {
     setLoading(true);
     await axios
@@ -463,11 +373,7 @@ const MultipleOrders = () => {
       .then((res) => {
         console.log('fetchtenantinfo', res);
         if (res.data.status) {
-          setTenant(res.data.details);
-          setTenantid(res.data.details.tenantid);
           fetchAppAdminTokens();
-          setSubCatName(res.data.details.subcategoryname);
-          setSubCatId(res.data.details.subcategoryid);
         }
         setLoading(false);
       })
@@ -525,7 +431,7 @@ const MultipleOrders = () => {
       cancellled: '',
       //   categoryid: +tenant.categoryid,
       configid: 9,
-      customerid: 0,
+      customerid: customer.customerid,
       deliveryaddress: customer.address || '',
       deliverycharge: +customer.totalcharge || 0,
       deliverycity: customer.city || '',
@@ -533,10 +439,10 @@ const MultipleOrders = () => {
       deliverycustomer: customer.firstname || '',
       deliveryid: +customer.customerid,
       deliverylandmark: customer.landmark || '',
-      deliverylat: customer.latitude.toString(),
+      deliverylat: customer.latitude,
       deliverylocation: customer.suburb || '',
       deliverylocationid: customer.deliverylocationid || 0,
-      deliverylong: customer.longitude.toString(),
+      deliverylong: customer.longitude,
       // deliverytime: `${dayjs(startdate).format('YYYY-MM-DD HH:mm:ss')} `,
       deliverytime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
       deliverytype: 'B',
@@ -558,20 +464,18 @@ const MultipleOrders = () => {
       paymentstatus: 1,
       paymenttype: 42,
       pending: '',
-      pickupaddress: pickCust.locationaddress || '',
+      pickupaddress: pickCust.address || '',
       pickupcity: pickCust.locationcity || '',
-      pickupcontactno: pickCust.locationcontact || '',
+      pickupcontactno: pickCust.contactno || '',
       pickupcustomer: pickCust.locationname || '',
       pickuplandmark: pickCust.landmark || '',
-      pickuplat: pickCust.locationlatitude.toString(),
-      pickuplocation: pickCust.locationsuburb || '',
+      pickuplat: pickCust.latitude,
+      pickuplocation: pickCust.suburb || '',
       pickuplocationid: pickCust.locationid || 0,
-      pickuplong: pickCust.locationlong.toString(),
+      pickuplong: pickCust.longitude,
       processing: '',
       ready: '',
       remarks: '',
-      //   smsdelivery: isSms,
-      //   subcategoryid: +subCatId,
       taxamount: 0.0,
       tenantid: pickCust.tenantid,
       tenantuserid: 0
@@ -656,23 +560,19 @@ const MultipleOrders = () => {
                 // disabled={!isAppLocation || !isClient}
                 id="combo-box-demo"
                 options={tenantLocations || []}
-                getOptionLabel={(option) => `${option.locationname} (${option.locationsuburb})` || ''}
-                renderInput={(params) => <TextField {...params} label="Select Business Locations" focused color="primary" />}
+                getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
+                renderInput={(params) => <TextField {...params} label="Select Business Locations" color="primary" />}
                 sx={{ width: '350px' }}
                 onChange={(event, value, reason) => {
                   if (value) {
                     console.log('Business Locations', value);
-                    console.log('locationid', value.locationid);
-                    setTenanatLocoId(value.locationid);
                     setTid(value.tenantid);
-                    setTenantlocation(value.locationaddress);
                     setIsLocation(true);
-                    setIsBusiness(true);
+
                     setPickCust(value);
                   }
                   if (reason == 'clear') {
                     setIsLocation(false);
-                    setIsBusiness(false);
                   }
                 }}
               />
@@ -693,7 +593,7 @@ const MultipleOrders = () => {
                     let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
                     console.log('dateres11');
                     console.log(dateres11);
-                    setSelectedtime('');
+
                     if (dateres11 <= 0) {
                       console.log('startdate', e);
                       setStartdate(e);
@@ -744,7 +644,7 @@ const MultipleOrders = () => {
                 <TableBody>
                   <TableRow>
                     <TableCell>{pickCust.locationname}</TableCell>
-                    <TableCell>{pickCust.locationaddress}</TableCell>
+                    <TableCell>{pickCust.address}</TableCell>
                   </TableRow>
                 </TableBody>
               </Table>
@@ -830,175 +730,7 @@ const MultipleOrders = () => {
             </TableContainer>
           </MainCard>
         </Grid>
-        {/* ================================================= || Time || ================================================= */}
 
-        {/* <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
-          <MainCard sx={{ mt: 2, height: '390px' }}>
-            <Grid container spacing={4}>
-              <Grid item xs={12} md={6}>
-                <Typography variant="h5">Date</Typography>
-                <LocalizationProvider dateAdapter={AdapterDayjs} sx={{}}>
-                  <DatePicker
-                    format="DD-MM-YYYY"
-                    onChange={(e) => {
-                      let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
-                      console.log('dateres11');
-                      console.log(dateres11);
-                      setSelectedtime('');
-                      if (dateres11 <= 0) {
-                        console.log('startdate', e);
-                        setStartdate(e);
-                        let arr = [];
-                        timeslotarr.map((val) => {
-                          if (dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) {
-                            arr.push(val);
-                          }
-                        });
-                        if (arr[0]) {
-                          setOrderarr([
-                            {
-                              sno: 1,
-                              address: '',
-                              customerid: '',
-                              deliverytime: dayjs(arr[0]) || '',
-                              deliverylocationid: '',
-                              clientname: '',
-                              contactno: '',
-                              latitude: '',
-                              longitude: ''
-                            }
-                          ]);
-                        } else {
-                          setOrderarr([]);
-                        }
-                      } else {
-                        setAlertmessage('choose Upcoming Date');
-                        opentoast('choose Upcoming Date', 'warning');
-                        setStartdate(NaN);
-                      }
-                    }}
-                    value={dayjs(startdate)}
-                    sx={{ width: '100%', mt: 2 }}
-                    disablePast
-                  />
-                </LocalizationProvider>
-                <Typography variant="h5" sx={{ my: 2 }}>
-                  Time
-                </Typography>
-                <MainCard
-                  sx={{
-                    height: '210px',
-                    mt: 1,
-                    overflowY: 'scroll',
-                    '&::-webkit-scrollbar': {
-                      width: '3px', // Width of vertical scrollbar
-                      height: '10px' // Height of horizontal scrollbar
-                    },
-                    '&::-webkit-scrollbar-thumb': {
-                      backgroundColor: '#65387A' // Color of the scrollbar thumb
-                    }
-                  }}
-                >
-                  <Grid container spacing={2}>
-                    {timeslotarr.map((val, index) => {
-                      if (dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) {
-                        return (
-                          <Fragment key={index}>
-                            <Grid item>
-                              <Chip
-                                key={index}
-                                sx={{ cursor: 'pointer' }}
-                                color={dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm') ? 'primary' : 'default'}
-                                label={dayjs(val).format('hh:mm A')}
-                                onClick={() => {
-                                  setSelectedtime(val);
-                                }}
-                              />
-                            </Grid>
-                          </Fragment>
-                        );
-                      }
-                    })}
-                  </Grid>
-                </MainCard>
-              </Grid>
-              <Grid item xs={12} sm={6} sx={{}}>
-                {showDistance && (
-                  <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', mb: 3 }}>
-                    <Stack spacing={1.5}>
-                      <Chip label={`Distance: ${distance} km`} size="medium" variant="contained" color="primary" />
-                    </Stack>
-                    <Stack spacing={1.5}>
-                      <Chip label={`Charge: ₹${totalCharge.toFixed(2)}`} size="medium" variant="contained" color="primary" />
-                    </Stack>
-                  </Stack>
-                )}
-
-                <Stack direction={'column'} justifyContent={'space-between'} sx={{ mb: 2 }}>
-                  <Typography variant="h5">Category</Typography>
-                  <Autocomplete
-                    // disablePortal
-                    id="combo-box-demo"
-                    options={subCat}
-                    getOptionLabel={(option) => `${option.subcategoryname}` || ''}
-                    sx={{ my: 2, zIndex: '99' }}
-                    fullWidth
-                    renderInput={(params) => <TextField {...params} label={subCatName == '' ? tenant.subcategoryname : subCatName} />}
-                    onChange={(event, value, reason) => {
-                      if (value) {
-                        console.log(value);
-                        setSubCatName(value.subcategoryname);
-                        setSubCatId(value.subcategoryid);
-                      }
-                    }}
-                  />
-                </Stack>
-                <Typography variant="h5">Weight</Typography>
-                <Stack direction={'row'} justifyContent={'space-evenly'} sx={{ border: '1px solid #eee', my: 2, py: 2 }}>
-                  <Chip
-                    variant="contained"
-                    color="default"
-                    label="1-10kgs"
-                    sx={chipStyle('1-10kgs')}
-                    onClick={() => {
-                      handleChipClick('1-10kgs');
-                      setWeight('1-10kgs');
-                    }}
-                  />
-                  <Chip
-                    variant="contained"
-                    color="default"
-                    label="11-20kgs"
-                    sx={chipStyle('11-20kgs')}
-                    onClick={() => {
-                      handleChipClick('11-20kgs');
-                      setWeight('11-20kgs');
-                    }}
-                  />
-                  <Chip
-                    variant="contained"
-                    color="default"
-                    label="21-30kgs"
-                    sx={chipStyle('21-30kgs')}
-                    onClick={() => {
-                      handleChipClick('21-30kgs');
-                      setWeight('21-30kgs');
-                    }}
-                  />
-                </Stack>
-                <Stack direction={'row'} justifyContent={'space-between'} sx={{ mt: 4 }}>
-                  <Typography variant="h5">SMS Delivery</Typography>
-                  <Switch
-                    checked={isSms === 1}
-                    onChange={(e) => {
-                      setIsSms(e.target.checked ? 1 : 0);
-                    }}
-                  />
-                </Stack>
-              </Grid>
-            </Grid>
-          </MainCard>
-        </Grid> */}
         <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
           {/* ================================================= || Notes || ================================================= */}
           <MainCard sx={{ mt: 2 }} title={'Notes'}>
@@ -1052,6 +784,7 @@ const MultipleOrders = () => {
         fullWidth
         sx={{ minWidth: 'lg' }}
       >
+        {isLoading && <CircularLoader />}
         <DialogTitle sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
           <Stack>
             <Typography variant="h4"> {`Select Drop Customers (${dropCust.length || 0})`}</Typography>
diff --git a/src/pages/nearle/orders/orders.js b/src/pages/nearle/orders/orders.js
index 6213371..d2b666a 100644
--- a/src/pages/nearle/orders/orders.js
+++ b/src/pages/nearle/orders/orders.js
@@ -1,15 +1,12 @@
 import * as React from 'react';
 import { enqueueSnackbar } from 'notistack';
-import { DeleteFilled, NotificationOutlined } from '@ant-design/icons';
+import { DeleteFilled } from '@ant-design/icons';
 import { useState, useEffect, Fragment, useRef } from 'react';
 import { Empty } from 'antd';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import dayjs from 'dayjs';
 var utc = require('dayjs/plugin/utc');
 dayjs.extend(utc);
 import axios from 'axios';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
 import { useTheme } from '@mui/material/styles';
 import {
@@ -27,7 +24,6 @@ import {
   TableCell,
   TableBody,
   TableHead,
-  Collapse,
   Dialog,
   TableRow,
   DialogContent,
@@ -37,16 +33,13 @@ import {
   OutlinedInput,
   InputAdornment,
   Skeleton,
-  CircularProgress,
-  DialogActions
+  TextField,
+  Autocomplete
 } from '@mui/material';
-import MainCard from 'components/MainCard';
 import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
 import ClearIcon from '@mui/icons-material/Clear';
 import { addDays, addMonths, addWeeks, endOfMonth, endOfWeek, startOfMonth, startOfWeek } from 'date-fns';
 import { DateRangePicker } from 'mui-daterange-picker';
-import { useNavigate } from 'react-router';
-import PropTypes from 'prop-types';
 import TableContainer from '@mui/material/TableContainer';
 import TablePagination from '@mui/material/TablePagination';
 import TableSortLabel from '@mui/material/TableSortLabel';
@@ -55,31 +48,6 @@ import Loader from 'components/Loader';
 import { FilterList } from '@mui/icons-material';
 
 const Orders = () => {
-  function descendingComparator(a, b, orderBy) {
-    if (b[orderBy] < a[orderBy]) {
-      return -1;
-    }
-    if (b[orderBy] > a[orderBy]) {
-      return 1;
-    }
-    return 0;
-  }
-
-  function getComparator(order, orderBy) {
-    return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
-  }
-  function stableSort(array, comparator) {
-    const stabilizedThis = array.map((el, index) => [el, index]);
-    stabilizedThis.sort((a, b) => {
-      const order = comparator(a[0], b[0]);
-      if (order !== 0) {
-        return order;
-      }
-      return a[1] - b[1];
-    });
-    return stabilizedThis.map((el) => el[0]);
-  }
-
   const tid = localStorage.getItem('tenantid');
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
@@ -92,22 +60,16 @@ const Orders = () => {
   const [percentage3, setPercentage3] = useState('0');
   const [percentage4, setPercentage4] = useState('0');
   let [orderarr, setArr] = useState([]);
-  let [orderarrcovered, setArrcovered] = useState([]);
-  const [allorders, setAllorders] = useState('');
-  const [activeorders, setActiveorders] = useState('');
   const [coveredorders, setCoveredorders] = useState('');
   const [uncoveredorders, setUncoveredorders] = useState('');
   const [cancelled, setCancelled] = useState('');
-  const [closed, setClosed] = useState('');
   const [created, setCreated] = useState('');
   const [tabstatus, setTabstatus] = useState('Created');
   const [loading, setLoading] = useState(true);
   const theme = useTheme();
   let [rows, setRows] = useState([]);
   const [tabvalue, setTabvalue] = useState(0);
-  let navigate = useNavigate();
   const [open, setOpen] = useState(false);
-  const [dateselect, setDateselect] = useState('select');
   const [tabstatus1, setTabstatus1] = useState('Today');
   const [datestatus, setDatestatus] = useState('Today');
   const [searchword, setSearchword] = useState('');
@@ -175,52 +137,15 @@ const Orders = () => {
     if (tabstatus1 === 'Tomorrow') {
       setEnddate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
       setStartdate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
-      setDateselect('select');
     } else if (tabstatus1 === 'Today') {
       setEnddate(new Date().toISOString().substring(0, 10));
       setStartdate(new Date().toISOString().substring(0, 10));
-      setDateselect('select');
     } else if (tabstatus1 === 'Week') {
       setStartdate(new Date(startDate.getTime() - day * 7).toISOString().substring(0, 10));
       setEnddate(new Date().toISOString().substring(0, 10));
-      setDateselect('select');
     }
-    // else if (tabstatus1 === 'All') {
-    //   setEnddate('');
-    //   setStartdate('');
-
-    //   setDateselect('all');
-    // }
   }, [tabstatus1]);
 
-  const choosedate = (date) => {
-    setStartdate(date.$d.toISOString().substring(0, 10));
-    setEnddate(date.$d.toISOString().substring(0, 10));
-    setTabstatus1('');
-  };
-
-  useEffect(() => {
-    if (searchword) {
-      let arr = orderarr.filter((val) => {
-        return (
-          val.tenantname.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.orderid.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.pickupcustomer.toString().toLowerCase().includes(searchword.toLowerCase()) ||
-          val.pickupcontactno.toString().toLowerCase().includes(searchword.toLowerCase()) ||
-          val.pickupsuburb.toString().toLowerCase().includes(searchword.toLowerCase()) ||
-          val.deliverycustomer.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.deliverycontactno.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.deliverysuburb.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.ordernotes.toString().toLowerCase().includes(searchword.toLowerCase())
-        );
-      });
-      console.log(arr);
-      setRows([...arr]);
-    } else {
-      setRows([...orderarr]);
-    }
-  }, [searchword]);
-
   const fetchtablecovered = async () => {
     try {
       await axios
@@ -229,7 +154,7 @@ const Orders = () => {
             process.env.REACT_APP_URL
           }/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
             page + 1
-          }&pagesize=${rowsPerPage}`
+          }&pagesize=${rowsPerPage}&keyword=${searchword}`
         )
         .then((res) => {
           setArr(res.data.details);
@@ -244,7 +169,7 @@ const Orders = () => {
   };
   useEffect(() => {
     fetchtablecovered();
-  }, [tabstatus, startdate, enddate, page, rowsPerPage]);
+  }, [tabstatus, startdate, enddate, page, rowsPerPage, searchword]);
 
   const fetchpercentage = async () => {
     setLoading(true);
@@ -253,12 +178,10 @@ const Orders = () => {
         .get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}`)
         .then((res) => {
           console.log(res);
-          setAllorders(res.data.details.total.toString());
           setCoveredorders(res.data.details.delivered.toString());
           setCancelled(res.data.details.cancelled.toString());
           setUncoveredorders(res.data.details.pending.toString());
           setCreated(res.data.details.created.toString());
-          setClosed(res.data.details.delivered.toString());
           setPercentage1((Math.round((res.data.details.created / res.data.details.total) * 100) || 0).toString());
           setPercentage3((Math.round((res.data.details.delivered / res.data.details.total) * 100) || 0).toString());
           setPercentage4((Math.round((res.data.details.cancelled / res.data.details.total) * 100) || 0).toString());
@@ -331,11 +254,7 @@ const Orders = () => {
       disablePadding: false,
       label: 'Delivery'
     },
-    //   {
-    //     id: 'ordervalue',
-    //     disablePadding: false,
-    //     label: 'VALUE $',
-    //   },
+
     {
       id: 'itemcount',
       disablePadding: false,
@@ -389,15 +308,6 @@ const Orders = () => {
   }
 
   function EnhancedTable() {
-    const [order, setOrder] = React.useState('asc');
-    const [orderBy, setOrderBy] = React.useState('calories');
-    const [selected, setSelected] = React.useState([]);
-
-    const [expandopen, setExpandopen] = React.useState('');
-
-    const [dialogopen, setDialogopen] = useState(false);
-    const [stafflist, setStafflist] = useState([]);
-    const [loading1, setLoading1] = useState(false);
     const [open, setOpen] = useState(false);
     const [orderheaderid, setOrderheaderid] = useState('');
 
@@ -411,11 +321,6 @@ const Orders = () => {
         .then((res) => {
           console.log(res);
           if (res.data.status) {
-            // if (orderheaderid && tenantid) {
-            //   fetchorderdetails();
-            //   fetchorderaddons();
-            //   fetchorderattires();
-            // }
             enqueueSnackbar('Order Cancelled Successfully', {
               variant: 'success',
               anchorOrigin: { vertical: 'top', horizontal: 'right' },
@@ -431,21 +336,6 @@ const Orders = () => {
         });
     };
 
-    const handleRequestSort = (event, property) => {
-      const isAsc = orderBy === property && order === 'asc';
-      setOrder(isAsc ? 'desc' : 'asc');
-      setOrderBy(property);
-    };
-
-    const handleSelectAllClick = (event) => {
-      if (event.target.checked) {
-        const newSelected = rows.map((n) => n.name);
-        setSelected(newSelected);
-        return;
-      }
-      setSelected([]);
-    };
-
     const handleChangePage = (event, newPage) => {
       setPage(newPage);
     };
@@ -455,16 +345,6 @@ const Orders = () => {
       setPage(0);
     };
 
-    const isSelected = (name) => selected.indexOf(name) !== -1;
-
-    // Avoid a layout jump when reaching the last page with empty rows.
-    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
-    const visibleRows = React.useMemo(
-      () => stableSort(rows, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
-      [order, orderBy, page, rowsPerPage]
-    );
-
     const handleClose = () => {
       setOpen(false);
       setOrderheaderid('');
@@ -478,15 +358,7 @@ const Orders = () => {
       // const [deletepassword, setDeletepassword] = useState('');
 
       return (
-        <Dialog
-          open={open}
-          onClose={() => handleClose(false)}
-          // keepMounted
-          // TransitionComponent={PopupTransition}
-          maxWidth="xs"
-          // aria-labelledby="column-delete-title"
-          // aria-describedby="column-delete-description"
-        >
+        <Dialog open={open} onClose={() => handleClose(false)} maxWidth="xs">
           <DialogContent sx={{ mt: 2, my: 1 }}>
             <Stack alignItems="center" spacing={3.5}>
               <Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
@@ -580,7 +452,7 @@ const Orders = () => {
               </>
             )}
             <TableBody>
-              {rows.length == 0 && (
+              {rows?.length == 0 && (
                 <>
                   <TableCell colSpan={7}>
                     <Stack width={'100%'} direction={'row'} justifyContent={'center'}>
@@ -590,14 +462,13 @@ const Orders = () => {
                 </>
               )}
 
-              {rows.map((row, index) => {
+              {rows?.map((row, index) => {
                 return (
                   <>
                     <TableRow
                       key={index}
                       sx={{
-                        cursor: 'pointer',
-                        backgroundColor: expandopen === row.sno ? '#f5f5f5' : ''
+                        cursor: 'pointer'
                       }}
                     >
                       <TableCell padding="none">
@@ -633,26 +504,13 @@ const Orders = () => {
                             </Typography>
                             <Tooltip title={row.pickupaddress}>
                               <Typography variant="caption" color="textSecondary">
-                                {/* {row.pickupaddress.slice(0, 20)} */}
                                 {row.pickupsuburb || row.pickupaddress.slice(0, 20)}
                               </Typography>
                             </Tooltip>
                           </Stack>
                         </Stack>
-                        {/* <Stack direction='column'>
-
-                        </Stack> */}
                       </TableCell>
                       <TableCell align="left">
-                        {/* <Stack direction='column'>
-                          <Tooltip title={row.deliveryaddress}>
-                            <Typography variant="caption" color="textSecondary"
-                            >
-                              {row.customersuburb || row.deliveryaddress.slice(0, 20)}
-
-                            </Typography>
-                          </Tooltip>
-                        </Stack> */}
                         <Stack direction={'row'} spacing={1}>
                           <Avatar
                             alt=""
@@ -727,8 +585,8 @@ const Orders = () => {
         <TablePagination
           rowsPerPageOptions={[5, 10, 25, 50, 100]}
           component="div"
-          count={pageCount}
-          rowsPerPage={rowsPerPage}
+          count={pageCount || 0}
+          rowsPerPage={rowsPerPage || 0}
           page={page}
           onPageChange={handleChangePage}
           onRowsPerPageChange={handleChangeRowsPerPage}
@@ -740,16 +598,13 @@ const Orders = () => {
   return (
     <>
       {loading && <Loader />}
-      <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-        <Grid item xs={12} sx={{ mb: -2.25 }}>
-          <Stack direction={{ xs: 'column', md: 'row' }} justifyContent="space-between" alignItems="center" spacing={2}>
-            <Stack direction="column" alignItems="flex-start" spacing={1}>
-              <Typography variant="h3">Orders</Typography>
-            </Stack>
-          </Stack>
-        </Grid>
 
-        <Grid item xs={12} lg={3} sm={6}>
+      <Stack direction={{ xs: 'column', md: 'row' }} justifyContent="space-between" alignItems="center" spacing={2}>
+        <Typography variant="h3">Orders</Typography>
+      </Stack>
+
+      <Grid container spacing={3} sx={{ mt: 0.1 }}>
+        <Grid item xs={12} sm={6} md={3}>
           <HoverSocialCard
             primary="Created Orders"
             secondary={created === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : created}
@@ -757,7 +612,7 @@ const Orders = () => {
             color={theme.palette.primary.main}
           />
         </Grid>
-        <Grid item xs={12} lg={3} sm={6}>
+        <Grid item xs={12} sm={6} md={3}>
           <HoverSocialCard
             primary="Pending orders"
             secondary={uncoveredorders == '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : uncoveredorders}
@@ -766,7 +621,7 @@ const Orders = () => {
           />
         </Grid>
 
-        <Grid item xs={12} lg={3} sm={6}>
+        <Grid item xs={12} sm={6} md={3}>
           <HoverSocialCard
             primary="Delivered orders"
             secondary={coveredorders === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : coveredorders}
@@ -775,7 +630,7 @@ const Orders = () => {
           />
         </Grid>
 
-        <Grid item xs={12} lg={3} sm={6}>
+        <Grid item xs={12} sm={6} md={3}>
           <HoverSocialCard
             primary="Cancelled Orders"
             secondary={cancelled === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : cancelled}
@@ -783,80 +638,65 @@ const Orders = () => {
             color={theme.palette.secondary[600]}
           />
         </Grid>
+      </Grid>
 
-        <Grid item xs={12} sx={{ mb: -3 }}>
-          <Stack direction={'row'} justifyContent={'space-between'}>
-            {startdate && enddate && (
-              <Stack direction="row" spacing={2}>
-                <Chip label={`Orders-${datestatus ? datestatus : ''}`} color="primary" variant="light" size="small" />
-                <Chip
-                  label={
-                    <Typography noWrap color="secondary">
-                      {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
-                    </Typography>
-                  }
-                  variant="combined"
-                  color="warning"
-                  size="small"
-                />
-              </Stack>
-            )}
-            {(!startdate || !enddate) && (
-              <>
-                <Stack direction="row" spacing={2}>
-                  <Chip label="Orders-All" color="primary" variant="light" size="small" />
-                </Stack>
-              </>
-            )}
+      <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} sx={{ my: 2 }}>
+        {startdate && enddate && (
+          <Stack direction="row" spacing={2}>
+            <Chip label={`Orders-${datestatus ? datestatus : ''}`} color="primary" variant="light" size="small" />
 
-            <Tooltip title="Order Filter">
-              <IconButton
-                color="secondary"
-                variant="light"
-                sx={{ color: 'text.primary', bgcolor: 'grey.200', display: { xs: 'none', md: 'flex' } }}
-                aria-haspopup="true"
-                onClick={() => setOpen(true)}
-              >
-                <FilterList />
-              </IconButton>
-            </Tooltip>
+            <Chip
+              label={
+                <Typography noWrap color="secondary">
+                  {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
+                </Typography>
+              }
+              variant="combined"
+              color="warning"
+              size="small"
+            />
           </Stack>
-        </Grid>
+        )}
 
-        <Grid item xs={12}>
-          <Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', minHeight: 350 }}>
-            <Stack
-              alignItems="center"
-              justifyContent="space-between"
-              direction="row"
-              sx={{
-                p: 2,
-                width: '100%'
-              }}
-            >
-              <Tabs value={tabvalue} onChange={handleChangetab} variant="scrollable" scrollButtons="auto">
-                <Tab
-                  label="Created"
-                  icon={<Chip label={createdLenght} color="primary" variant="light" size="small" />}
-                  iconPosition="end"
-                />
-                <Tab
-                  label="Pending"
-                  icon={<Chip label={pendingLenght} color="primary" variant="light" size="small" />}
-                  iconPosition="end"
-                />
-                <Tab
-                  label="Delivered"
-                  icon={<Chip label={deliveredlenght} color="primary" variant="light" size="small" />}
-                  iconPosition="end"
-                />
-                <Tab
-                  label="Cancelled"
-                  icon={<Chip label={cancelledLenght} color="primary" variant="light" size="small" />}
-                  iconPosition="end"
-                />
-              </Tabs>
+        <Tooltip title="Order Filter">
+          <IconButton
+            color="secondary"
+            variant="light"
+            sx={{ color: 'text.primary', bgcolor: 'grey.200', display: { xs: 'none', md: 'flex' } }}
+            aria-haspopup="true"
+            onClick={() => setOpen(true)}
+          >
+            <FilterList />
+          </IconButton>
+        </Tooltip>
+      </Stack>
 
+      <Grid item xs={12}>
+        <Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', minHeight: 350 }}>
+          <Stack
+            alignItems="center"
+            justifyContent="space-between"
+            direction="row"
+            sx={{
+              p: 2,
+              width: '100%'
+            }}
+          >
+            <Tabs value={tabvalue} onChange={handleChangetab} variant="scrollable" scrollButtons="auto">
+              <Tab label="Created" icon={<Chip label={createdLenght} color="primary" variant="light" size="small" />} iconPosition="end" />
+              <Tab label="Pending" icon={<Chip label={pendingLenght} color="primary" variant="light" size="small" />} iconPosition="end" />
+              <Tab
+                label="Delivered"
+                icon={<Chip label={deliveredlenght} color="primary" variant="light" size="small" />}
+                iconPosition="end"
+              />
+              <Tab
+                label="Cancelled"
+                icon={<Chip label={cancelledLenght} color="primary" variant="light" size="small" />}
+                iconPosition="end"
+              />
+            </Tabs>
+            <Stack>
               <FormControl sx={{ width: 250, display: { xs: 'none', md: 'flex' } }}>
                 <OutlinedInput
                   inputRef={textFieldRef}
@@ -894,97 +734,95 @@ const Orders = () => {
                 />
               </FormControl>
             </Stack>
-
-            <Box sx={{ width: '100%', display: 'table', tableLayout: 'fixed' }}>
-              <EnhancedTable />
-            </Box>
-          </Box>
-        </Grid>
-
-        <Dialog open={open}>
-          <DialogTitle align="left">
-            <Typography variant="h4">Select Filter Options</Typography>
-          </DialogTitle>
-          <DialogContent sx={{ width: '100%' }} className="datedialog">
-            <DateRangePicker
-              open={open}
-              toggle={() => setOpen(!open)}
-              id="daterange1"
-              onChange={(range) => {
-                if (range.label === 'All') {
-                  setDateselect('all');
-                  setStartdate('');
-                  setEnddate('');
-
-                  setOpen(false);
-                } else {
-                  setDateselect('select');
-                  setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
-                  setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
-                  if (range.label) {
-                    setDatestatus(range.label);
-                  } else {
-                    setDatestatus('');
-                  }
-                }
-                console.log(range);
-              }}
-              definedRanges={[
-                {
-                  label: 'Today',
-                  startDate: new Date(),
-                  endDate: new Date()
-                },
-                {
-                  label: 'Yesterday',
-                  startDate: addDays(new Date(), -1),
-                  endDate: addDays(new Date(), -1)
-                },
-                {
-                  label: 'Tomorrow',
-                  startDate: addDays(new Date(), +1),
-                  endDate: addDays(new Date(), +1)
-                },
-                {
-                  label: 'This Week',
-                  startDate: startOfWeek(new Date()),
-                  endDate: endOfWeek(new Date())
-                },
-                {
-                  label: 'Last Week',
-                  startDate: startOfWeek(addWeeks(new Date(), -1)),
-                  endDate: endOfWeek(addWeeks(new Date(), -1))
-                },
-                {
-                  label: 'Last 7 Days',
-                  startDate: addWeeks(new Date(), -1),
-                  endDate: new Date()
-                },
-                {
-                  label: 'This Month',
-                  startDate: startOfMonth(new Date()),
-                  endDate: endOfMonth(new Date())
-                },
-                {
-                  label: 'Last Month',
-                  startDate: startOfMonth(addMonths(new Date(), -1)),
-                  endDate: endOfMonth(addMonths(new Date(), -1))
-                }
-                // {
-                //   label: 'All',
-                //   startDate: new Date(),
-                //   endDate: addDays(new Date(), -1),
-                // },
-              ]}
-            />
-          </DialogContent>
-          <Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
-            <Button variant="contained" size="small" onClick={okclicked}>
-              ok
-            </Button>
           </Stack>
-        </Dialog>
+
+          <Box sx={{ width: '100%', display: 'table', tableLayout: 'fixed' }}>
+            <EnhancedTable />
+          </Box>
+        </Box>
       </Grid>
+
+      <Dialog open={open}>
+        <DialogTitle align="left">
+          <Typography variant="h4">Select Filter Options</Typography>
+        </DialogTitle>
+        <DialogContent sx={{ width: '100%' }} className="datedialog">
+          <DateRangePicker
+            open={open}
+            toggle={() => setOpen(!open)}
+            id="daterange1"
+            onChange={(range) => {
+              if (range.label === 'All') {
+                setStartdate('');
+                setEnddate('');
+
+                setOpen(false);
+              } else {
+                setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
+                setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
+                if (range.label) {
+                  setDatestatus(range.label);
+                } else {
+                  setDatestatus('');
+                }
+              }
+              console.log(range);
+            }}
+            definedRanges={[
+              {
+                label: 'Today',
+                startDate: new Date(),
+                endDate: new Date()
+              },
+              {
+                label: 'Yesterday',
+                startDate: addDays(new Date(), -1),
+                endDate: addDays(new Date(), -1)
+              },
+              {
+                label: 'Tomorrow',
+                startDate: addDays(new Date(), +1),
+                endDate: addDays(new Date(), +1)
+              },
+              {
+                label: 'This Week',
+                startDate: startOfWeek(new Date()),
+                endDate: endOfWeek(new Date())
+              },
+              {
+                label: 'Last Week',
+                startDate: startOfWeek(addWeeks(new Date(), -1)),
+                endDate: endOfWeek(addWeeks(new Date(), -1))
+              },
+              {
+                label: 'Last 7 Days',
+                startDate: addWeeks(new Date(), -1),
+                endDate: new Date()
+              },
+              {
+                label: 'This Month',
+                startDate: startOfMonth(new Date()),
+                endDate: endOfMonth(new Date())
+              },
+              {
+                label: 'Last Month',
+                startDate: startOfMonth(addMonths(new Date(), -1)),
+                endDate: endOfMonth(addMonths(new Date(), -1))
+              }
+              // {
+              //   label: 'All',
+              //   startDate: new Date(),
+              //   endDate: addDays(new Date(), -1),
+              // },
+            ]}
+          />
+        </DialogContent>
+        <Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
+          <Button variant="contained" size="small" onClick={okclicked}>
+            ok
+          </Button>
+        </Stack>
+      </Dialog>
     </>
   );
 };
diff --git a/src/pages/nearle/reports/mapWithRoute.js b/src/pages/nearle/reports/mapWithRoute.js
index edef456..cd1cb46 100644
--- a/src/pages/nearle/reports/mapWithRoute.js
+++ b/src/pages/nearle/reports/mapWithRoute.js
@@ -1,14 +1,45 @@
 import React, { useEffect, useRef } from 'react';
-import { MapContainer, TileLayer, Marker, Popup, Polyline, Tooltip } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Polyline, Tooltip } from 'react-leaflet';
+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 { CloseCircleOutlined } from '@ant-design/icons';
+
 var utc = require('dayjs/plugin/utc');
 dayjs.extend(utc);
 
-const MapWithRoute = ({ coordinates, additionalProps }) => {
+// Define custom icon for start and end markers
+const startIcon = new L.Icon({
+  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+
+const endIcon = new L.Icon({
+  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+
+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);
   const mapRef = useRef(null);
 
+  const theme = useTheme;
+
   useEffect(() => {
     if (mapRef.current && coordinates.length > 0) {
       const bounds = calculateBounds(coordinates);
@@ -29,43 +60,105 @@ const MapWithRoute = ({ coordinates, additionalProps }) => {
     ];
   };
 
-  const limeOptions = { color: 'blue', weight: 10 };
+  const dottedOptions = { color: 'blue', weight: 8, dashArray: '4 4' };
   const length = coordinates.length;
   const midlenght = Math.round(coordinates.length / 2);
   const start = coordinates[0];
   const end = coordinates[length - 1];
   const center = coordinates[midlenght];
 
+  const showList = (primary, secondary) => {
+    return (
+      <Stack direction="row" spacing={1} alignItems="center">
+        <Typography variant="h5" color="text.primary" sx={{ fontSize: 13 }}>
+          {primary}:
+        </Typography>
+        <Chip label={secondary || 'N/A'} color="primary" variant="combined" size="small" sx={{ fontWeight: 1000, fontSize: 14 }} />
+      </Stack>
+    );
+  };
+
   return (
     coordinates &&
     coordinates.length > 0 && (
-      <div id="map" style={{ width: '80vw', height: '80vh', margin: '0 auto' }}>
-        <MapContainer center={center} zoom={15} scrollWheelZoom={false} style={{ height: '100%' }} ref={mapRef}>
+      <div
+        id="map"
+        style={{
+          width: '100%',
+          height: '90vh',
+          margin: '0 auto',
+          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'
+          }}
+          icon={<CloseCircleOutlined />}
+        />
+
+        {/* Overlay */}
+        <Stack
+          direction="row"
+          gap={2}
+          flexWrap="wrap"
+          alignItems="center"
+          justifyContent="flex-start"
+          sx={{
+            position: 'absolute',
+            bottom: 0,
+            zIndex: 1000,
+            left: 0,
+            right: 0,
+            px: { xs: 1, custom500: 2, custom700: 2 },
+            py: { xs: 1, custom500: 2, custom900: 4 },
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            maxWidth: '100%',
+            width: 'auto',
+            boxShadow: (theme) => theme.shadows[3]
+          }}
+        >
+          {showList('Tenant', order?.tenantname)}
+          {showList('Rider', order?.ridername)}
+          {showList('Pickup', order?.pickupcustomer)}
+          {showList('Drop', order?.deliverycustomer)}
+          {showList('Kms', order?.kms)}
+          {showList('Actual kms', order?.actualkms)}
+          {showList('Rider kms', order?.riderkms)}
+        </Stack>
+
+        {/* Map */}
+        <MapContainer center={center} zoom={15} scrollWheelZoom={false} style={{ height: '100%', width: '100%' }} ref={mapRef}>
           <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-          <Marker position={start}>
-            <Tooltip hover direction="bottom">
-              <span>{`Pickup Point: ${dayjs(additionalProps.riderStart).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderStart)
-                .utc()
-                .format('hh:mm A')})`}</span>
+          <Marker position={start} icon={startIcon}>
+            <Tooltip direction="bottom">
+              <span>
+                {`Pickup Point: ${dayjs(additionalProps.riderStart).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderStart)
+                  .utc()
+                  .format('hh:mm A')})`}
+              </span>
             </Tooltip>
-            {/* <Popup>{`Pickup Point ${dayjs(additionalProps.riderStart).utc().format('DD-MM-YYYY')}  (${dayjs(additionalProps.riderStart)
-              .utc()
-              .format('hh:mm A')})   `}</Popup> */}
           </Marker>
-          <Marker position={end}>
-            <Tooltip hover direction="bottom">
-              <span>{`Drop Point: ${dayjs(additionalProps.riderEnd).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderEnd)
-                .utc()
-                .format('hh:mm A')})`}</span>
+          <Marker position={end} icon={endIcon}>
+            <Tooltip direction="bottom">
+              <span>
+                {`Drop Point: ${dayjs(additionalProps.riderEnd).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderEnd)
+                  .utc()
+                  .format('hh:mm A')})`}
+              </span>
             </Tooltip>
-            {/* <Popup>{`Drop Point ${dayjs(additionalProps.riderEnd).utc().format('DD-MM-YYYY')}  (${dayjs(additionalProps.riderEnd)
-              .utc()
-              .format('hh:mm A')})   `}</Popup> */}
           </Marker>
-          {/* <Marker position={center}>
-            <Popup>Center Point</Popup>
-          </Marker> */}
-          <Polyline pathOptions={limeOptions} positions={coordinates} />
+          <Polyline pathOptions={dottedOptions} positions={coordinates} />
         </MapContainer>
       </div>
     )
diff --git a/src/pages/nearle/reports/ordersDetails.js b/src/pages/nearle/reports/ordersDetails.js
index 4dfd39a..e2f5597 100644
--- a/src/pages/nearle/reports/ordersDetails.js
+++ b/src/pages/nearle/reports/ordersDetails.js
@@ -1,11 +1,9 @@
-import PropTypes from 'prop-types';
-import { React, useState, useEffect, useRef, forwardRef } from 'react';
+import { React, useState, useEffect, useRef } from 'react';
 import TitleCard from 'pages/nearle/titleCard';
 import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
 import { Empty } from 'antd';
 import ClearIcon from '@mui/icons-material/Clear';
-import { TableVirtuoso } from 'react-virtuoso';
 import { useTheme } from '@mui/material/styles';
 import { SlLocationPin } from 'react-icons/sl';
 import MapWithRoute from './mapWithRoute';
@@ -13,16 +11,12 @@ import { enqueueSnackbar } from 'notistack';
 
 // material-ui
 import {
-  Box,
-  Checkbox,
   Divider,
   Table,
   TableBody,
   TableCell,
   TableContainer,
   TableHead,
-  TablePagination,
-  TableSortLabel,
   TableRow,
   Grid,
   Dialog,
@@ -34,24 +28,18 @@ import {
   IconButton,
   Tooltip,
   Chip,
-  Avatar,
-  Autocomplete,
-  Tab,
-  Tabs,
   Paper,
   FormControl,
   OutlinedInput,
   InputAdornment,
   Badge,
+  Autocomplete,
   TextField
 } from '@mui/material';
-import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { SearchOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 var utc = require('dayjs/plugin/utc');
 dayjs.extend(utc);
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateRangePicker } from 'mui-daterange-picker';
 import {
   addDays,
@@ -65,13 +53,12 @@ import {
   startOfWeek
   // startOfYear,
 } from 'date-fns';
-import { visuallyHidden } from '@mui/utils';
 import { FilterList } from '@mui/icons-material';
 
 // project imports
 import { fetchorderdetails, fetchCount, fetchAppLocations } from '../api/api';
 import MainCard from 'components/MainCard';
-import { CSVExport, TableRowSelection } from 'components/third-party/ReactTable';
+import { CSVExport } from 'components/third-party/ReactTable';
 import Loader from 'components/Loader';
 
 function descendingComparator(a, b, orderBy) {
@@ -110,11 +97,6 @@ const headCells = [
     disablePadding: false,
     label: '#'
   },
-  // {
-  //   id: 'map',
-  //   disablePadding: false,
-  //   label: '^'
-  // },
 
   {
     id: 'tenantname',
@@ -172,11 +154,7 @@ const headCells = [
     disablePadding: false,
     label: 'NOTES'
   },
-  // {
-  //   id: "rider",
-  //   disablePadding: false,
-  //   label: "rider",
-  // },
+
   {
     id: 'kms',
     disablePadding: false,
@@ -191,8 +169,8 @@ const headCells = [
 ];
 
 // ==============================|| MUI TABLE - ENHANCED ||============================== //
-const tabContent = ['Delivered', 'Pending', 'Cancelled'];
-export default function ordersDetails() {
+
+export default function OrdersDetails() {
   const textFieldRef = useRef(null);
   const [order, setOrder] = useState('asc');
   const [orderBy, setOrderBy] = useState('calories');
@@ -206,7 +184,6 @@ export default function ordersDetails() {
   const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
   const [open, setOpen] = useState(false);
   const [open1, setOpen1] = useState(false);
-
   const [dateselect, setDateselect] = useState('select');
   const [tabstatus1, setTabstatus1] = useState('Today');
   const [datestatus, setDatestatus] = useState('Today');
@@ -215,7 +192,6 @@ export default function ordersDetails() {
   const [appId, setAppId] = useState(-1);
   const [value, setValue] = useState(0);
   const [tabvalue, setTabvalue] = useState(0);
-  const [tabstatus, setTabstatus] = useState('Delivered');
   const [deliCount, setDeliCount] = useState(0);
   const [pendCount, setPendCount] = useState(0);
   const [cancelCount, setCancelCount] = useState(0);
@@ -225,6 +201,30 @@ export default function ordersDetails() {
   const [riderCoordinates, setRiderCoordinates] = useState([]);
   const [riderStart, setRiderStart] = useState();
   const [riderEnd, setRiderEnd] = useState();
+  const [mapOpen, setMapOpen] = useState(false);
+  const [mapTenant, setMapTenant] = useState({});
+
+  let [total, settotal] = useState(0);
+  let [coveredLenght, setCoveredLenght] = useState(0);
+  let [uncoveredLenght, setUncoveredLenght] = useState(0);
+  let [cancelLenght, setCancelLenght] = useState(0);
+  let [assignLenght, setAssignLenght] = useState(0);
+  let [pickedLenght, setPickedLenght] = useState(0);
+  let [activeLenght, setActiveLenght] = useState(0);
+  let [arrivesLenght, setArrivedLenght] = useState(0);
+  const [statusCount, setStatusCount] = useState();
+  const [currentStatus, setCurrentStatus] = useState('All');
+
+  const status = [
+    { id: 0, status: 'All', statusLow: 'All', count: total },
+    { id: 1, status: 'Pending', statusLow: 'pending', count: assignLenght },
+    { id: 2, status: 'Accepted', statusLow: 'accepted', count: uncoveredLenght },
+    { id: 3, status: 'Arrived', statusLow: 'arrived', count: arrivesLenght },
+    { id: 4, status: 'Picked', statusLow: 'picked', count: pickedLenght },
+    { id: 5, status: 'Active', statusLow: 'active', count: activeLenght },
+    { id: 6, status: 'Delivered', statusLow: 'delivered', count: coveredLenght },
+    { id: 7, status: 'Cancelled', statusLow: 'cancelled', count: cancelLenght }
+  ];
 
   const getdeliverylogs = async (id) => {
     console.log('deliveryid', id);
@@ -276,15 +276,6 @@ export default function ordersDetails() {
     };
   }, []);
 
-  const handleChangetab = (e, i) => {
-    setTabvalue(i);
-    if (i === 0) setTabstatus('Delivered');
-
-    if (i === 1) setTabstatus('Pending');
-    if (i === 2) setTabstatus('Cancelled');
-    console.log(i);
-  };
-
   // ==============================|| fetchorderdetails (orders)||============================== //
 
   const {
@@ -293,7 +284,7 @@ export default function ordersDetails() {
     data: rows,
     error: orderDetailsError
   } = useQuery({
-    queryKey: [tabvalue, appId, startdate, enddate],
+    queryKey: [startdate, enddate, currentStatus],
     queryFn: fetchorderdetails
   });
 
@@ -338,25 +329,10 @@ export default function ordersDetails() {
   }, [fetchCount, startdate, enddate]);
   // ==============================|| fetchAppLocations ||============================== //
 
-  const {
-    isLoading: isLoadingLocations,
-    isError: isErrorLocations, //true or false
-    data: locations,
-    error: locationsError
-  } = useQuery({
-    queryKey: [appId],
-    queryFn: fetchAppLocations
-  });
-  if (isLoadingOrderDetails || isLoadingLocations || isLoadingOrderCount) return <Loader />;
+  if (isLoadingOrderDetails || isLoadingOrderCount) return <Loader />;
   if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
   if (isErrorOrderCount) return 'An error has occurred:(isErrorOrderCount) ' + orderCountError.message;
-  if (isErrorLocations) return 'An error has occurred:(isErrorlocations) ' + locationsError.message;
 
-  const handleRequestSort = (event, property) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-  };
   const filteredOrders = rows.filter((row) =>
     row.orderstatus == ''
       ? row.orderstatus.toLowerCase().includes(searchword.toLowerCase())
@@ -413,47 +389,8 @@ export default function ordersDetails() {
     locationcontactno: order.locationcontactno
   }));
 
-  const handleSelectAllClick = (event) => {
-    if (event.target.checked) {
-      const newSelectedId = rows.map((n) => n.name);
-      setSelected(newSelectedId);
-      return;
-    }
-    setSelected([]);
-  };
-
-  const handleClick = (event, name) => {
-    const selectedIndex = selected.indexOf(name);
-    let newSelected = [];
-
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, name);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selected.slice(1));
-    } else if (selectedIndex === selected.length - 1) {
-      newSelected = newSelected.concat(selected.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
-    }
-    const selectedRowData = rows.filter((row) => newSelected.includes(row.name.toString()));
-    setSelectedValue(selectedRowData);
-    setSelected(newSelected);
-  };
-
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event?.target.value, 10));
-    setPage(0);
-  };
-
   const isSelected = (name) => selected.indexOf(name) !== -1;
 
-  // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
   function formatDate(dateString) {
     const date = dayjs(dateString);
     const formattedDate = date.format('DD/MM/YYYY ');
@@ -468,199 +405,127 @@ export default function ordersDetails() {
     <>
       <TitleCard title="Orders Details" />
       <Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}>
-        <Grid
-          container
-          sx={{ display: 'flex', flexDirection: { md: 'row', xs: 'column' }, alignItems: 'center', justifyContent: 'center', m: 2 }}
+        <Stack
+          display={'flex'}
+          flexDirection={{ xs: 'column', md: 'row' }}
+          alignItems={'center'}
+          justifyContent={'space-between'}
+          sx={{ p: 2 }}
+          spacing={1}
         >
-          <Grid item xs={4}>
-            <Stack direction="column" alignItems="flex-start" spacing={1}>
-              {startdate && enddate && (
-                <Stack direction="row" spacing={2}>
-                  <Badge
-                    badgeContent={`${filteredOrders.length}`}
-                    max={`${count}`}
-                    color="primary"
-                    sx={{
-                      bgcolor: '#f3e5f5',
-                      p: 0.2,
-                      borderRadius: '3px',
-                      color: '#7b1fa2'
-                    }}
-                  >{`Orders-${datestatus}`}</Badge>
-
-                  <Chip
-                    label={
-                      <Typography noWrap color="secondary">
-                        {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
-                      </Typography>
-                    }
-                    variant="combined"
-                    color="warning"
-                    size="small"
-                  />
-                </Stack>
-              )}
-              {(!startdate || !enddate) && (
-                <>
-                  <Stack direction="row" spacing={2}>
-                    <Chip label="Orders-All" color="primary" variant="light" size="small" />
-                    {/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
-                  </Stack>
-                </>
-              )}
-            </Stack>
-          </Grid>
-          <Grid item xs={8}>
-            <Stack
-              sx={{
-                display: 'flex',
-                // flexDirection: { md: 'row', xs: 'column' },
-                flexDirection: 'row',
-                justifyContent: 'end',
-                alignItems: 'center',
-                marginRight: '25px'
-              }}
-            >
-              <FormControl sx={{ width: 250 }}>
-                <OutlinedInput
-                  inputRef={textFieldRef}
-                  aria-describedby="header-search-text"
-                  inputProps={{
-                    'aria-label': 'weight'
-                  }}
-                  sx={{ background: 'white' }}
-                  size="large"
-                  id="header-search"
-                  placeholder="Search (ctrl+k)"
-                  value={searchword}
-                  onChange={(e) => {
-                    setSearchword(e.target.value);
-                  }}
-                  autoComplete="off"
-                  startAdornment={
-                    <InputAdornment position="start" sx={{ mr: -0.5 }}>
-                      <SearchOutlined />
-                    </InputAdornment>
-                  }
-                  endAdornment={
-                    <Tooltip title="clear">
-                      <IconButton
-                        sx={{ visibility: searchword ? 'visible' : 'hidden' }}
-                        onClick={() => {
-                          setSearchword('');
-                          // setPages(1);
-                          // fetchCustomersList(1);
-                        }}
-                      >
-                        <ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
-                      </IconButton>
-                    </Tooltip>
-                  }
-                />
-              </FormControl>
-
-              <Tooltip title="Order Filter">
-                <IconButton
-                  color="secondary"
-                  variant="light"
+          <Stack direction="column" alignItems="flex-start" spacing={1}>
+            {startdate && enddate && (
+              <Stack direction="row" spacing={2}>
+                <Badge
+                  badgeContent={`${filteredOrders.length}`}
+                  max={`${count}`}
+                  color="primary"
                   sx={{
-                    color: 'text.primary',
-                    bgcolor: 'grey.200',
-                    mx: 2
+                    bgcolor: '#f3e5f5',
+                    p: 0.2,
+                    borderRadius: '3px',
+                    color: '#7b1fa2'
                   }}
-                  aria-haspopup="true"
-                  onClick={() => setOpen(true)}
-                >
-                  <FilterList />
-                </IconButton>
-              </Tooltip>
+                >{`Orders-${datestatus}`}</Badge>
 
-              <CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
-            </Stack>
-          </Grid>
-        </Grid>
-        {/* <Box sx={{ bgcolor: "#eeeeee" }}>
-            <Stack
-              alignItems="center"
-              justifyContent="end"
-              direction="row"
-              sx={{
-                p: 2,
-                width: "100%",
+                <Chip
+                  label={
+                    <Typography noWrap color="secondary">
+                      {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
+                    </Typography>
+                  }
+                  variant="combined"
+                  color="warning"
+                  size="small"
+                />
+              </Stack>
+            )}
+            {(!startdate || !enddate) && (
+              <>
+                <Stack direction="row" spacing={2}>
+                  <Chip label="Orders-All" color="primary" variant="light" size="small" />
+                  {/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
+                </Stack>
+              </>
+            )}
+          </Stack>
+          <Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
+            <Autocomplete
+              sx={{ minWidth: 200 }}
+              disablePortal
+              id="combo-box-demo"
+              label={currentStatus}
+              options={status}
+              getOptionLabel={(option) => `${option.status}`}
+              onChange={(event, value, reason) => {
+                if (reason === 'clear') {
+                  setCurrentStatus('All');
+                  setStatusCount(status[0].count);
+                } else {
+                  console.log('status', value);
+                  setCurrentStatus(value.statusLow);
+                  setStatusCount(value.count);
+                }
               }}
-            >
-              <Tabs
-                value={tabvalue}
-                onChange={handleChangetab}
-                variant="scrollable"
-                scrollButtons="auto"
-              >
-                <Tab
-                  label="Delivered"
-                  icon={
-                    <Chip
-                      label={countData.deliveredCount}
-                      color="success"
-                      variant="light"
-                      size="small"
-                    />
-                  }
-                  iconPosition="end"
-                />
-                <Tab
-                  label="Pending"
-                  icon={
-                    <Chip
-                      label={countData.pendingCount}
-                      color="warning"
-                      variant="light"
-                      size="small"
-                    />
-                  }
-                  iconPosition="end"
-                />
+              renderInput={(params) => <TextField {...params} label={'Select Status'} />}
+            />
+            <FormControl sx={{ width: 250 }}>
+              <OutlinedInput
+                inputRef={textFieldRef}
+                aria-describedby="header-search-text"
+                inputProps={{
+                  'aria-label': 'weight'
+                }}
+                sx={{ background: 'white' }}
+                size="large"
+                id="header-search"
+                placeholder="Search (ctrl+k)"
+                value={searchword}
+                onChange={(e) => {
+                  setSearchword(e.target.value);
+                }}
+                autoComplete="off"
+                startAdornment={
+                  <InputAdornment position="start" sx={{ mr: -0.5 }}>
+                    <SearchOutlined />
+                  </InputAdornment>
+                }
+                endAdornment={
+                  <Tooltip title="clear">
+                    <IconButton
+                      sx={{ visibility: searchword ? 'visible' : 'hidden' }}
+                      onClick={() => {
+                        setSearchword('');
+                      }}
+                    >
+                      <ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
+                    </IconButton>
+                  </Tooltip>
+                }
+              />
+            </FormControl>
 
-                <Tab
-                  label="Cancelled"
-                  icon={
-                    <Chip
-                      label={countData.cancelledCount}
-                      color="error"
-                      variant="light"
-                      size="small"
-                    />
-                  }
-                  iconPosition="end"
-                />
-              </Tabs>
-
-              <FormControl
-                sx={{ width: 250, display: { xs: "none", md: "flex" } }}
+            <Tooltip title="Order Filter">
+              <IconButton
+                color="secondary"
+                variant="light"
+                sx={{
+                  color: 'text.primary',
+                  bgcolor: 'grey.200',
+                  mx: 2
+                }}
+                aria-haspopup="true"
+                onClick={() => setOpen(true)}
               >
-                <OutlinedInput
-                  sx={{ background: "white" }}
-                  size="large"
-                  id="header-search"
-                  startAdornment={
-                    <InputAdornment position="start" sx={{ mr: -0.5 }}>
-                      <SearchOutlined />
-                    </InputAdornment>
-                  }
-                  aria-describedby="header-search-text"
-                  inputProps={{
-                    "aria-label": "weight",
-                  }}
-                  placeholder="Search"
-                  value={searchword}
-                  onChange={(e) => {
-                    setSearchword(e.target.value);
-                  }}
-                  autoComplete="off"
-                />
-              </FormControl>
-            </Stack>
-          </Box> */}
+                <FilterList />
+              </IconButton>
+            </Tooltip>
+
+            <CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
+          </Stack>
+        </Stack>
       </Paper>
+
       <MainCard content={false}>
         <TableContainer
           sx={{
@@ -668,8 +533,9 @@ export default function ordersDetails() {
             maxHeight: '67vh',
             overflow: 'auto',
             '&::-webkit-scrollbar': {
-              width: '5px', // Width of vertical scrollbar
-              height: '2px' // Height of horizontal scrollbar
+              width: '12px', // Width of vertical scrollbar
+              height: '14px', // Height of horizontal scrollbar,
+              borderRadius: 10
             },
             '&::-webkit-scrollbar-thumb': {
               backgroundColor: '#65387A' // Color of the scrollbar thumb
@@ -686,17 +552,27 @@ export default function ordersDetails() {
               }}
             >
               <TableRow>
-                {headCells.map((column) => (
-                  <TableCell sx={{ position: 'sticky !important' }} key={column.id}>
-                    {column.label}
-                  </TableCell>
-                ))}
+                <TableCell sx={{ position: 'sticky !important' }}># </TableCell>
+                {/* <TableCell sx={{ position: 'sticky !important' }}>Map</TableCell> */}
+                <TableCell sx={{ whiteSpace: 'nowrap', position: 'sticky !important' }}>Tenant Name </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}>Pickup </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Drop </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Status </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Assignes </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Accepted </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Arrived </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Picked </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Delivered</TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Cancelled </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Notes </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Kms </TableCell>
+                <TableCell sx={{ position: 'sticky !important' }}> Charges </TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {filteredOrders.length == 0 && (
                 <>
-                  <TableCell colSpan={13}>
+                  <TableCell colSpan={15}>
                     <Stack width={'100%'} direction={'row'} justifyContent={'center'}>
                       <Empty />
                     </Stack>
@@ -708,36 +584,16 @@ export default function ordersDetails() {
                 .map((row, index) => {
                   if (typeof row === 'number') return null;
                   const isItemSelected = isSelected(row.name);
-                  const labelId = `enhanced-table-checkbox-${index}`;
-                  // console.log('rows.length', rows.length);
-                  console.log('filteredOrders', filteredOrders);
                   return (
                     filteredOrders.length !== 0 && (
-                      <TableRow
-                        hover
-                        // onClick={(event) =>
-                        //   handleClick(event, row.name)
-                        // }
-                        role="checkbox"
-                        aria-checked={isItemSelected}
-                        tabIndex={-1}
-                        key={row.name}
-                        selected={isItemSelected}
-                      >
-                        {/* <TableCell sx={{ pl: 3 }} padding="checkbox">
-                                    <Checkbox
-                                      color="primary"
-                                      checked={isItemSelected}
-                                      inputProps={{
-                                        "aria-labelledby": labelId,
-                                      }}
-                                    />
-                                  </TableCell> */}
+                      <TableRow hover role="checkbox" aria-checked={isItemSelected} tabIndex={-1} key={row.name} selected={isItemSelected}>
                         <TableCell sx={{ width: '10px' }}>{index + 1}</TableCell>
                         {/* <TableCell
                           sx={{ width: '10px', cursor: 'pointer' }}
                           onClick={() => {
                             console.log('row', row);
+                            setMapTenant(row);
+                            setMapOpen(true);
                             getdeliverylogs(row.deliveryid);
                           }}
                         >
@@ -791,51 +647,31 @@ export default function ordersDetails() {
                           </Stack>
                         </TableCell>
                         <TableCell align="left">
-                          {row.orderstatus == '' ? (
-                            <Stack direction="row">
-                              {row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" />}
-                              {row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
-                              {row.orderstatus === 'accepted' && (
-                                <Chip
-                                  label="Accepted"
-                                  size="small"
-                                  sx={{
-                                    bgcolor: `theme.palette.chip.accept`,
-                                    color: 'white'
-                                  }}
-                                />
-                              )}
-                              {row.orderstatus === 'arrived' && (
-                                <Chip
-                                  label="Arrived"
-                                  size="small"
-                                  sx={{
-                                    bgcolor: theme.palette.chip.arrive,
-                                    color: 'white'
-                                  }}
-                                />
-                              )}
-                              {row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" />}
-                              {row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" />}
+                          <Stack direction="row">
+                            {row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" sx={{ minWidth: 80 }} />}
+                            {row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" sx={{ minWidth: 80 }} />}
+                            {row.orderstatus === 'accepted' && (
+                              <Chip
+                                label="Accepted"
+                                size="small"
+                                sx={{ bgcolor: theme.palette.chip.accept, color: 'white', minWidth: 80 }}
+                              />
+                            )}
+                            {row.orderstatus === 'arrived' && (
+                              <Chip
+                                label="Arrived"
+                                size="small"
+                                sx={{ bgcolor: theme.palette.chip.arrive, color: 'white', minWidth: 80 }}
+                              />
+                            )}
+                            {row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" sx={{ minWidth: 80 }} />}
+                            {row.orderstatus === 'active' && <Chip label="Active" color="info" size="small" sx={{ minWidth: 80 }} />}
+                            {row.orderstatus === 'delivered' && (
+                              <Chip label="Delivered" color="success" size="small" sx={{ minWidth: 80 }} />
+                            )}
 
-                              {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
-                            </Stack>
-                          ) : (
-                            <Stack direction="row">
-                              {row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" />}
-                              {row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
-                              {row.orderstatus === 'accepted' && (
-                                <Chip label="Accepted" size="small" sx={{ bgcolor: '#01579b', color: 'white' }} />
-                              )}
-                              {row.orderstatus === 'arrived' && (
-                                <Chip label="Arrived" size="small" sx={{ bgcolor: '#009688', color: 'white' }} />
-                              )}
-                              {row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" />}
-                              {row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" />}
-
-                              {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
-                            </Stack>
-                          )}
+                            {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" sx={{ minWidth: 80 }} />}
+                          </Stack>
                         </TableCell>
                         <TableCell align="left">
                           <Typography variant="h5" sx={{ fontSize: '11px' }} display="block">
@@ -916,12 +752,10 @@ export default function ordersDetails() {
                             <Tooltip title="Actual KMS">
                               <Chip
                                 label={
-                                  row.orderstatus === 'cancelled' ||
-                                  row.orderstatus === 'cancelled' ||
-                                  row.actualkms == '' ||
-                                  row.actualkms == null
-                                    ? parseInt(0).toFixed(1)
-                                    : row.actualkms
+                                  row.deliverystatus === 'cancelled' || row.actualkms === '' || row.actualkms === 'null'
+                                    ? '0.0'
+                                    : // : parseFloat(row.actualkms).toFixed(2)
+                                      row.actualkms
                                 }
                                 size="small"
                                 color="success"
@@ -960,17 +794,9 @@ export default function ordersDetails() {
           </Table>
         </TableContainer>
         <Divider />
-        {/* table pagination */}
-        {/* <TablePagination
-          rowsPerPageOptions={[10, 25, 100]}
-          component="div"
-          count={rows.length}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-        /> */}
       </MainCard>
+      {/* ========================================= || bottom row || ========================================= */}
+
       <Stack
         direction={'row'}
         sx={{
@@ -991,9 +817,6 @@ export default function ordersDetails() {
           <Tooltip title="Total Charges">
             <Chip label={formatNumberToRupees(totalCharge)} size="medium" color="error" variant="filled" sx={{ ml: 5, mr: 1.5 }} />
           </Tooltip>
-          {/* <Typography variant="h5" sx={{ ml: 5, mr: 1.5 }}>
-                          {formatNumberToRupees(total)}
-                        </Typography> */}
         </div>
         <div
           style={{
@@ -1009,6 +832,8 @@ export default function ordersDetails() {
           </Tooltip>
         </div>
       </Stack>
+      {/* ========================================= || Date dialog || ========================================= */}
+
       <Dialog open={open}>
         <DialogTitle align="left">
           <Typography variant="h4">Select Filter Options</Typography>
@@ -1093,40 +918,25 @@ export default function ordersDetails() {
         </Stack>
       </Dialog>
       {/* ========================================= || MapWithRoute || ========================================= */}
-      {/* <Dialog
-        open={open1}
+      <Dialog
+        open={mapOpen}
         onClose={() => {
-          setOpen1(false);
+          setMapOpen(false);
         }}
         maxWidth={'lg'}
         fullWidth
       >
-        <DialogTitle
-          sx={{
-            // bgcolor: theme.palette.primary.main,
-            // color: 'white',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center'
-          }}
-        >
-          <Typography variant="h4">Rider Route</Typography>
-          <Button
-            variant="outlined"
-            onClick={() => {
-              setOpen1(false);
-            }}
-          >
-            Close
-          </Button>
-        </DialogTitle>
         {riderCoordinates && (
           <div>
-            <MapWithRoute coordinates={riderCoordinates} additionalProps={{ riderStart, riderEnd }} />
+            <MapWithRoute
+              coordinates={riderCoordinates}
+              additionalProps={{ riderStart, riderEnd }}
+              order={mapTenant}
+              setMapOpen={setMapOpen}
+            />
           </div>
         )}
-      </Dialog> */}
+      </Dialog>
     </>
   );
 }
diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js
index 8f00805..d5910d4 100644
--- a/src/routes/MainRoutes.js
+++ b/src/routes/MainRoutes.js
@@ -48,10 +48,6 @@ const MainRoutes = {
         // </AuthGuard>
       ),
       children: [
-        // {
-        //   path: 'sample-page',
-        //   element: <SamplePage />
-        // },
         {
           path: 'dashboard',
           element: <Dashboard />
@@ -60,10 +56,6 @@ const MainRoutes = {
           path: 'customers',
           element: <Customers />
         },
-        // {
-        //   path: 'clients1',
-        //   element: <Customers />
-        // },
         {
           path: 'orders',
           element: <Orders />
@@ -72,10 +64,6 @@ const MainRoutes = {
           path: 'accountsettings',
           element: <Accountsettings />
         },
-        // {
-        //   path: 'orders/create1',
-        //   element: <Createorder />
-        // },
         {
           path: 'orders/create',
           element: <Createorder1 />