diff --git a/src/App.js b/src/App.js
index 68d567f..4060eb1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,8 @@ import Notistack from 'components/third-party/Notistack';
 import { useNavigate } from 'react-router';
 import { useEffect } from 'react';
 import InternetStatus from 'components/nearle_components/updateNetworkStatus';
+import { useDispatch, useSelector } from 'react-redux';
+
 // auth-provider
 // import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
 
@@ -21,6 +23,9 @@ const App = () => {
       navigate('/login');
     }
   }, []);
+  const { openItem } = useSelector((state) => state.menu);
+  console.log('openItem', openItem);
+
   return (
     <>
       <ThemeCustomization>
diff --git a/src/components/nearle_components/DateFilterDialog.js b/src/components/nearle_components/DateFilterDialog.js
index c1fd795..1f8a105 100644
--- a/src/components/nearle_components/DateFilterDialog.js
+++ b/src/components/nearle_components/DateFilterDialog.js
@@ -19,18 +19,16 @@ export default function DateFilterDialog({ open, onClose, onApply }) {
 
   const handleSelect = (range) => {
     if (!range?.startDate || !range?.endDate) return;
-
     onApply({
       startDate: dayjs(range.startDate).format('YYYY-MM-DD'),
       endDate: dayjs(range.endDate).format('YYYY-MM-DD'),
       label: range.label || ''
     });
-
     onClose();
   };
 
   return (
-    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+    <Dialog open={open} onClose={() => onclose()} fullWidth maxWidth="sm">
       <DialogTitle disableTypography>
         <Stack display="flex" flexDirection="row" justifyContent="space-between" alignItems="center" sx={{ width: '100%' }}>
           <Typography variant="h4">Select Date Range</Typography>
diff --git a/src/components/nearle_components/OpenToast.js b/src/components/nearle_components/OpenToast.js
new file mode 100644
index 0000000..1ed0e41
--- /dev/null
+++ b/src/components/nearle_components/OpenToast.js
@@ -0,0 +1,9 @@
+import { enqueueSnackbar } from 'notistack';
+
+export const OpenToast = (message, variant = 'default', time = 2000) => {
+  enqueueSnackbar(message, {
+    variant,
+    anchorOrigin: { vertical: 'top', horizontal: 'right' },
+    autoHideDuration: time
+  });
+};
diff --git a/src/components/nearle_components/SearchBar.js b/src/components/nearle_components/SearchBar.js
index a62702e..c06a6f9 100644
--- a/src/components/nearle_components/SearchBar.js
+++ b/src/components/nearle_components/SearchBar.js
@@ -41,7 +41,7 @@ const SearchBar = ({ value, onChange, sx, placeholder = 'Search (Ctrl + K)' }) =
         autoComplete="off"
         size="large"
         startAdornment={
-          <InputAdornment position="start" sx={{ mr: -0.5, color: theme.palette.primary.main }}>
+          <InputAdornment position="start" sx={{ mr: -0.5, color: theme.palette.secondary.main }}>
             <SearchOutlined />
           </InputAdornment>
         }
diff --git a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js
index f1d4ac0..4abb22b 100644
--- a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js
+++ b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, useMemo, useRef } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 // material-ui
@@ -45,8 +45,7 @@ const PopperStyled = styled(Popper)(({ theme }) => ({
     left: -5,
     width: 10,
     height: 10,
-    // backgroundColor: theme.palette.background.paper,
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.background.paper,
     transform: 'translateY(-50%) rotate(45deg)',
     zIndex: 120,
     borderLeft: `1px solid ${theme.palette.grey.A800}`,
@@ -117,7 +116,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
       }
     } else {
       if (level === selectedLevel) {
-        // setOpen(false);
+        setOpen(false);
         if (!miniMenuOpened && !drawerOpen && !selected) {
           setSelected(null);
         }
@@ -147,7 +146,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
   };
 
   useEffect(() => {
-    // setOpen(false);
+    setOpen(false);
     if (!miniMenuOpened) {
       setSelected(null);
     }
@@ -211,23 +210,10 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
   const isSelected = selected === menu.id;
   const borderIcon = level === 1 ? <BorderOutlined style={{ fontSize: '1rem' }} /> : false;
   const Icon = menu.icon;
-  const menuIcon = menu.icon ? (
-    <Icon
-      style={{
-        fontSize: drawerOpen ? '1rem' : '1.25rem'
-        //  color: 'white'
-      }}
-    />
-  ) : (
-    borderIcon
-  );
-  // const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
-  // const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
+  const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : borderIcon;
+  const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
   const popperId = miniMenuOpened ? `collapse-pop-${menu.id}` : undefined;
   const FlexBox = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' };
-  const textColor = 'white';
-  const iconSelectedColor = 'white';
-  // const isSelected = true;
 
   return (
     <>
@@ -237,19 +223,13 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             disableRipple
             selected={selected === menu.id}
             {...(!drawerOpen && { onMouseEnter: handleClick, onMouseLeave: handleClose })}
-            onClick={() => {
-              handleClick();
-              if (open == true) {
-                setOpen(false);
-              }
-            }}
+            onClick={handleClick}
             sx={{
               pl: drawerOpen ? `${level * 28}px` : 1.5,
               py: !drawerOpen && level === 1 ? 1.25 : 1,
               ...(drawerOpen && {
                 '&:hover': {
-                  // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter',
-                  bgcolor: '#7b1fa2'
+                  bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.light'
                 },
                 '&.Mui-selected': {
                   bgcolor: 'transparent',
@@ -258,14 +238,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                 }
               }),
               ...(!drawerOpen && {
-                bgcolor: theme.palette.primary.main,
                 '&:hover': {
-                  bgcolor: theme.palette.primary.light
+                  bgcolor: 'primary.light'
                 },
                 '&.Mui-selected': {
                   '&:hover': {
-                    bgcolor: theme.palette.primary.light
-                  }
+                    bgcolor: 'white'
+                  },
+                  bgcolor: 'white'
                 }
               })
             }}
@@ -275,27 +255,22 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                 onClick={handlerIconLink}
                 sx={{
                   minWidth: 28,
-                  // color: selected === menu.id ? 'primary.main' : textColor,
-                  // color: selected === menu.id ? textColor : textColor,
-                  // bgcolor:'white',
-                  color: 'white',
+                  color: selected === menu.id ? 'primary.main' : 'white',
                   ...(!drawerOpen && {
                     borderRadius: 1.5,
                     width: 36,
                     height: 36,
                     alignItems: 'center',
                     justifyContent: 'center',
-                    color: 'white',
                     '&:hover': {
-                      bgcolor: theme.palette.primary.light
+                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter'
                     }
                   }),
                   ...(!drawerOpen &&
                     selected === menu.id && {
-                      bgcolor: theme.palette.primary.lighter,
-                      color: theme.palette.primary.main,
+                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
                       '&:hover': {
-                        bgcolor: theme.palette.primary.lighter
+                        // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
                       }
                     })
                 }}
@@ -306,12 +281,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             {(drawerOpen || (!drawerOpen && level !== 1)) && (
               <ListItemText
                 primary={
-                  <Typography
-                    variant="h6"
-                    // color={selected === menu.id ? 'primary' : textColor}
-                    // color={'white'}
-                    color={selected === menu.id ? textColor : textColor}
-                  >
+                  <Typography variant="h6" color={selected === menu.id ? 'white' : 'white'}>
                     {menu.title}
                   </Typography>
                 }
@@ -326,22 +296,9 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             )}
             {(drawerOpen || (!drawerOpen && level !== 1)) &&
               (miniMenuOpened || open ? (
-                <UpOutlined
-                  style={{
-                    fontSize: '0.625rem',
-                    marginLeft: 1,
-                    //  color: theme.palette.primary.main
-                    color: 'white'
-                  }}
-                />
+                <UpOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: theme.palette.primary.main }} />
               ) : (
-                <DownOutlined
-                  style={{
-                    fontSize: '0.625rem',
-                    marginLeft: 1,
-                    color: 'white'
-                  }}
-                />
+                <DownOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: 'white' }} />
               ))}
 
             {!drawerOpen && (
@@ -371,8 +328,8 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                         mt: 1.5,
                         boxShadow: theme.customShadows.z1,
                         backgroundImage: 'none',
-                        // border: `1px solid ${theme.palette.divider}`,
-                        background: theme.palette.primary.main
+                        border: `1px solid ${theme.palette.primary.main}`,
+                        bgcolor: 'primary.main'
                       }}
                     >
                       <ClickAwayListener onClickAway={handleClose}>
@@ -416,14 +373,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
           >
             <Box onClick={handlerIconLink} sx={FlexBox}>
               {menuIcon && (
-                <ListItemIcon
-                  sx={{
-                    my: 'auto',
-                    minWidth: !menu.icon ? 18 : 36
-                    //  color: theme.palette.secondary.dark
-                    // color:'white'
-                  }}
-                >
+                <ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36, color: theme.palette.secondary.dark }}>
                   {menuIcon}
                 </ListItemIcon>
               )}
@@ -436,12 +386,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               )}
               <ListItemText
                 primary={
-                  <Typography
-                    variant="body1"
-                    // color="inherit"
-                    // color="white"
-                    sx={{ my: 'auto' }}
-                  >
+                  <Typography variant="body1" color="inherit" sx={{ my: 'auto' }}>
                     {menu.title}
                   </Typography>
                 }
diff --git a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js
index 3c1a74a..d74c854 100644
--- a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js
+++ b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -9,10 +9,8 @@ import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, u
 
 // project import
 import Dot from 'components/@extended/Dot';
-
 import { MenuOrientation, ThemeMode } from 'config';
 import useConfig from 'hooks/useConfig';
-// import { dispatch, useSelector } from 'store';
 import { activeItem, openDrawer } from 'store/reducers/menu';
 
 // ==============================|| NAVIGATION - LIST ITEM ||============================== //
@@ -20,9 +18,9 @@ import { activeItem, openDrawer } from 'store/reducers/menu';
 const NavItem = ({ item, level }) => {
   const theme = useTheme();
   const dispatch = useDispatch();
+
   const { menuOrientation } = useConfig();
   const { drawerOpen, openItem } = useSelector((state) => state.menu);
-  const [ishover, setIshover] = useState('');
 
   const downLG = useMediaQuery(theme.breakpoints.down('lg'));
 
@@ -37,13 +35,9 @@ const NavItem = ({ item, level }) => {
   }
 
   const Icon = item.icon;
+  const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : false;
 
   const isSelected = openItem.findIndex((id) => id === item.id) > -1;
-  const itemIcon = item.icon ? (
-    <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem', color: isSelected ? '#662582' : '#fff' }} />
-  ) : (
-    false
-  );
 
   // const { pathname } = useLocation();
   const pathname = document.location.pathname;
@@ -68,7 +62,7 @@ const NavItem = ({ item, level }) => {
     // eslint-disable-next-line
   }, [pathname]);
 
-  const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : '#fff';
+  const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
   const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? 'text.primary' : 'primary.main';
 
   return (
@@ -78,20 +72,14 @@ const NavItem = ({ item, level }) => {
           {...listItemProps}
           disabled={item.disabled}
           selected={isSelected}
-          onMouseEnter={(e) => {
-            console.log(e);
-          }}
-          onMouseLeave={() => {
-            setIshover('');
-          }}
           sx={{
             zIndex: 1201,
             pl: drawerOpen ? `${level * 28}px` : 1.5,
             py: !drawerOpen && level === 1 ? 1.25 : 1,
             ...(drawerOpen && {
+              // bgcolor: 'primary.light',
               '&:hover': {
-                // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter'
-                bgcolor: '#7b1fa2'
+                bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.light'
               },
               '&.Mui-selected': {
                 bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter',
@@ -104,9 +92,8 @@ const NavItem = ({ item, level }) => {
               }
             }),
             ...(!drawerOpen && {
-              bgcolor: theme.palette.primary.main,
               '&:hover': {
-                bgcolor: theme.palette.primary.light
+                bgcolor: 'primary.light'
               },
               '&.Mui-selected': {
                 '&:hover': {
@@ -124,28 +111,23 @@ const NavItem = ({ item, level }) => {
             <ListItemIcon
               sx={{
                 minWidth: 28,
-                '&:hover': {
-                  color: isSelected ? '#fff' : iconSelectedColor
-                },
-                color: isSelected ? iconSelectedColor : textColor,
-
+                color: isSelected ? iconSelectedColor : 'white',
                 ...(!drawerOpen && {
+                  // borderRadius: 1.5,
                   width: 36,
                   height: 36,
                   alignItems: 'center',
-                  justifyContent: 'center',
-                  '&:hover': {
-                    // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter'
-                    // bgcolor: theme.palette.primary.light
-                  }
+                  justifyContent: 'center'
+                  // '&:hover': {
+                  //   bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'primary.lighter'
+                  // }
                 }),
                 ...(!drawerOpen &&
                   isSelected && {
-                    bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
+                    // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
                     '&:hover': {
-                      bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
-                    },
-                    borderRadius: 2
+                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
+                    }
                   })
               }}
             >
@@ -157,13 +139,9 @@ const NavItem = ({ item, level }) => {
               primary={
                 <Typography
                   variant="h6"
-                  // sx={{ color: isSelected ? iconSelectedColor : textColor }}
                   sx={{
-                    color: isSelected && !drawerOpen ? theme.palette.primary.main : !isSelected ? 'white' : theme.palette.primary.main,
-                    bgcolor: isSelected && theme.palette.primary.lighter,
-                    padding: isSelected && !drawerOpen ? 0.8 : 'none',
-                    borderRadius: isSelected && !drawerOpen ? 2 : 'none',
-                    ml: isSelected && !drawerOpen ? 0.5 : 'none'
+                    ml: 1,
+                    color: isSelected ? theme.palette.primary.main : 'white'
                   }}
                 >
                   {item.title}
diff --git a/src/layout/MainLayout/Footer.js b/src/layout/MainLayout/Footer.js
index bc2295c..722cd7e 100644
--- a/src/layout/MainLayout/Footer.js
+++ b/src/layout/MainLayout/Footer.js
@@ -7,13 +7,13 @@ const Footer = () => (
   <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: '24px 16px 0px', mt: 'auto' }}>
     <Typography variant="caption">&copy; All rights reserved</Typography>
     <Stack spacing={1.5} direction="row" justifyContent="space-between" alignItems="center">
-      <Link component={RouterLink} to="#" target="_blank" variant="caption" color="textPrimary">
+      <Link component={RouterLink} to="https://nearle.in/aboutus" target="_blank" variant="caption" color="textPrimary">
         About us
       </Link>
-      <Link component={RouterLink} to="#" target="_blank" variant="caption" color="textPrimary">
+      <Link component={RouterLink} to="https://nearle.in/privacy" target="_blank" variant="caption" color="textPrimary">
         Privacy
       </Link>
-      <Link component={RouterLink} to="#" target="_blank" variant="caption" color="textPrimary">
+      <Link component={RouterLink} to="https://nearle.in/terms" target="_blank" variant="caption" color="textPrimary">
         Terms
       </Link>
     </Stack>
diff --git a/src/layout/MainLayout/Header/HeaderContent/Profile/ProfileTab.js b/src/layout/MainLayout/Header/HeaderContent/Profile/ProfileTab.js
index afd12ff..82af071 100644
--- a/src/layout/MainLayout/Header/HeaderContent/Profile/ProfileTab.js
+++ b/src/layout/MainLayout/Header/HeaderContent/Profile/ProfileTab.js
@@ -5,55 +5,31 @@ import { useState } from 'react';
 import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 
 // assets
-import { EditOutlined, ProfileOutlined, LogoutOutlined, UserOutlined, WalletOutlined, CommentOutlined } from '@ant-design/icons';
+import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router';
 
 // ==============================|| HEADER PROFILE - PROFILE TAB ||============================== //
 
 const ProfileTab = ({ handleLogout }) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(null);
   const navigate = useNavigate();
   const handleListItemClick = (event, index) => {
     setSelectedIndex(index);
-    if (index == 1) {
+    if (index == 0) {
       navigate('/accountsettings');
     }
   };
 
   return (
     <List component="nav" sx={{ p: 0, '& .MuiListItemIcon-root': { minWidth: 32 } }}>
-      {/* <ListItemButton selected={selectedIndex === 0} onClick={(event) => handleListItemClick(event, 0)}>
-        <ListItemIcon>
-          <EditOutlined />
-        </ListItemIcon>
-        <ListItemText primary="Edit Profile" />
-      </ListItemButton> */}
-      <ListItemButton selected={selectedIndex === 0} onClick={(event) => handleListItemClick(event, 1)}>
+      <ListItemButton selected={selectedIndex === 0} onClick={(event) => handleListItemClick(event, 0)}>
         <ListItemIcon>
           <UserOutlined />
         </ListItemIcon>
         <ListItemText primary="View Profile" />
       </ListItemButton>
 
-      {/* <ListItemButton selected={selectedIndex === 1} onClick={(event) => handleListItemClick(event, 2)}>
-        <ListItemIcon>
-          <CommentOutlined />
-        </ListItemIcon>
-        <ListItemText primary="Support Ticket" />
-      </ListItemButton> */}
-      {/* <ListItemButton selected={selectedIndex === 4} onClick={(event) => handleListItemClick(event, 4)}>
-        <ListItemIcon>
-          <WalletOutlined />
-        </ListItemIcon>
-        <ListItemText primary="Billing" />
-      </ListItemButton> */}
-      <ListItemButton
-        selected={selectedIndex === 1}
-        onClick={handleLogout}
-        // onClick={()=>{
-        //   navigate('/login')
-        // }}
-      >
+      <ListItemButton selected={selectedIndex === 1} onClick={handleLogout}>
         <ListItemIcon>
           <LogoutOutlined />
         </ListItemIcon>
diff --git a/src/layout/MainLayout/Header/HeaderContent/index.js b/src/layout/MainLayout/Header/HeaderContent/index.js
index 64e72e8..194606a 100644
--- a/src/layout/MainLayout/Header/HeaderContent/index.js
+++ b/src/layout/MainLayout/Header/HeaderContent/index.js
@@ -214,7 +214,7 @@ const HeaderContent = () => {
                       <ListItemButton
                         selected={location.pathname === 'nearle/customers/create'}
                         onClick={() => {
-                          navigate('nearle/customers/create');
+                          navigate('nearle/customers');
                           handleClickAway();
                         }}
                       >
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index d89712b..8363efa 100644
--- a/src/layout/MainLayout/index.js
+++ b/src/layout/MainLayout/index.js
@@ -58,7 +58,7 @@ const MainLayout = () => {
         >
           {/* <Breadcrumbs navigation={navigation} title titleBottom card={false} divider={false} /> */}
           <Outlet />
-          <Footer />
+          {/* <Footer /> */}
         </Container>
       </Box>
     </Box>
diff --git a/src/menu-items/nearle.js b/src/menu-items/nearle.js
index f24712b..d25086c 100644
--- a/src/menu-items/nearle.js
+++ b/src/menu-items/nearle.js
@@ -77,21 +77,21 @@ const nearle = {
       icon: AiOutlineBarChart,
       children: [
         {
-          id: 'OrderSummary',
+          id: 'orderSummary',
           title: <FormattedMessage id="OrderSummary" />,
           type: 'item',
           url: '/nearle/reports/ordersummary',
           icon: TbListDetails
         },
         {
-          id: 'OrdersDetails',
+          id: 'ordersDetails',
           title: <FormattedMessage id="OrdersDetails" />,
           type: 'item',
           url: '/nearle/reports/ordersdetails',
           icon: AiOutlineDashboard
         },
         {
-          id: 'RiderSummary',
+          id: 'riderSummary',
           title: <FormattedMessage id="RiderSummary" />,
           type: 'item',
           url: '/nearle/reports/ridersummary',
diff --git a/src/pages/nearle/accountsettings.js b/src/pages/nearle/accountsettings.js
index e900451..3e00053 100644
--- a/src/pages/nearle/accountsettings.js
+++ b/src/pages/nearle/accountsettings.js
@@ -1,298 +1,151 @@
-import {
-    Box, Tab, Tabs,
-    Chip,
-    Divider,
-    Grid,
-    Link,
-    List,
-    ListItem,
-    ListItemIcon,
-    ListItemSecondaryAction,
-    Stack,
-    Typography,
-    useMediaQuery,
-    Avatar,
-
-} from '@mui/material';
+import { Grid, List, ListItem, Stack, Typography, useMediaQuery } from '@mui/material';
 import { enqueueSnackbar } from 'notistack';
-import LinearWithLabel from 'components/@extended/progress/LinearWithLabel';
-// import { PatternFormat } from 'react-number-format';
+
 import axios from 'axios';
 // project import
 import MainCard from 'components/MainCard';
-import { AimOutlined, EnvironmentOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
-import { useEffect ,useState} from 'react';
+import { useEffect, useState } from 'react';
 import Loader from 'components/Loader';
+import Footer from 'layout/MainLayout/Footer';
+import TitleCard from './titleCard';
 
 const Accountsettings = () => {
-    const matchDownMD = useMediaQuery((theme) => theme.breakpoints.down('md'));
-    const [info, setInfo] = useState({});
-    const [loading,setLoading]=useState(false)
+  const matchDownMD = useMediaQuery((theme) => theme.breakpoints.down('md'));
+  const [info, setInfo] = useState({});
+  const [loading, setLoading] = useState(false);
 
-    useEffect(() => {
-        if (localStorage.getItem('tenantid')) {
-            fetchaccount(localStorage.getItem('tenantid'));
+  useEffect(() => {
+    if (localStorage.getItem('tenantid')) {
+      fetchaccount(localStorage.getItem('tenantid'));
+    }
+  }, []);
 
+  const fetchaccount = async (tid) => {
+    setLoading(true);
+    await axios
+      .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
+      .then((res) => {
+        console.log(res);
+        if (res.data.status) {
+          setInfo(res.data.details);
         }
-    }, []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        enqueueSnackbar(err.message, {
+          variant: 'error',
+          anchorOrigin: { vertical: 'top', horizontal: 'right' },
+          autoHideDuration: 2000
+        });
+        setLoading(false);
+      });
+  };
 
-    const fetchaccount = async (tid) => {
-        setLoading(true)
-        await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
-            .then((res) => {
-                console.log(res)
-                if (res.data.status) {
-                    setInfo(res.data.details);
-                }
-                setLoading(false)
-            }).catch((err) => {
-                console.log(err)
-                enqueueSnackbar(err.message, {
-                    variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
-                    autoHideDuration: 2000
-                })
-                setLoading(false)
-            })
+  return (
+    <>
+      {loading && <Loader />}
+      <TitleCard title={'Profile'} />
 
-
-    }
-
-    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">Account Settings</Typography>
-              </Stack>
-              </Stack>
-              </Grid>
-              <Grid item xs={12}>
-        <MainCard border={false} boxShadow  sx={{height:'100%'}}>
-            <Box sx={{ borderBottom: 1, borderColor: 'divider', width: '100%',height:'100%' }}>
-                <Tabs value={0}
-                    // onChange={handleChange}
-                    variant="scrollable" scrollButtons="auto" aria-label="account profile tab">
-                    <Tab label="Account"
-                    //   component={Link} to="/apps/profiles/account/basic" icon={<UserOutlined />} iconPosition="start"
-                    />
-                </Tabs>
-
-
-
-
-                <Grid container spacing={3}
-                    sx={{ mt: 1,height:'100%'}}
-                >
-                    {/* <Grid item xs={12} sm={5} md={4} xl={3}>
-                        <Grid container spacing={3} sx={{height:'100%'}}>
-                            <Grid item xs={12} sx={{height:'100%'}}>
-                                <MainCard sx={{height:'100%'}}>
-                                    <Grid container spacing={3}  sx={{height:'100%'}}>
-                                        <Grid item xs={12}  sx={{height:'100%'}}>
-                                            <Stack direction="row" justifyContent="flex-end">
-                                            </Stack>
-                                            <Stack spacing={2.5} alignItems="center">
-                                                <Avatar alt="Avatar 1" 
-                                                sx={{width:80,height:80}}
-                                                />
-                                                <Stack spacing={0.5} alignItems="center">
-                                                    <Typography variant="h5">{info.companyname || ''}</Typography>
-                                                    <Typography color="secondary">{info.registrationno || ''}</Typography>
-                                                </Stack>
-                                            </Stack>
-                                        </Grid>
-                                      
-                                        <Grid item xs={12}>
-                                            <Divider />
-                                        </Grid> 
-                                        <Grid item xs={12}  sx={{height:'100%'}}>
-                                            <List component="nav" aria-label="main mailbox folders" sx={{ py: 0, '& .MuiListItem-root': { p: 0, py: 1 } }}>
-                                                <ListItem>
-                                                    <ListItemIcon>
-                                                        <MailOutlined />
-                                                    </ListItemIcon>
-                                                    <ListItemSecondaryAction>
-                                                        <Typography align="right">{info.primaryemail || ''}</Typography>
-                                                    </ListItemSecondaryAction>
-                                                </ListItem>
-                                                <ListItem>
-                                                    <ListItemIcon>
-                                                        <PhoneOutlined />
-                                                    </ListItemIcon>
-                                                    <ListItemSecondaryAction>
-                                                        <Typography align="right">
-                                                            {info.primarycontact || ''}
-                                                            </Typography>
-                                                    </ListItemSecondaryAction>
-                                                </ListItem>
-                                                <ListItem>
-                                                    <ListItemIcon>
-                                                        <AimOutlined />
-                                                    </ListItemIcon>
-                                                    <ListItemSecondaryAction>
-                                                        <Typography align="right">
-                                                            {info.city}
-                                                            </Typography>
-                                                    </ListItemSecondaryAction>
-                                                </ListItem>
-                                                <ListItem>
-                                                    <ListItemIcon>
-                                                        <EnvironmentOutlined />
-                                                    </ListItemIcon>
-                                                    <ListItemSecondaryAction>
-                                                     
-                                                        {info.state}
-                                                    </ListItemSecondaryAction>
-                                                </ListItem>
-                                            </List>
-                                        </Grid>
-                                    </Grid>
-                                </MainCard>
-                            </Grid>
-                          
-                        </Grid>
-                    </Grid> */}
-                    <Grid item 
-                    // xs={12} sm={7} md={8} xl={9}
-                    xs={12} 
-                    // sm={7} md={8} xl={9}
-                    
-                    >
-                        <Grid container spacing={3} >
-                          
-                            <Grid item xs={12} >
-                                <MainCard 
-                            //     title={ <Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
-                            //     <Avatar
-                            //       alt=""
-                            //       size="sm"
-                            //       sx={{
-                            //         width: '25px',
-                            //         height: '25px'
-                            //       }}
-                            //     >
-        
-                            //     </Avatar>
-                            //     <Stack direction="column">
-                            //       <Typography variant="caption">{info.companyname}</Typography>
-                            //     </Stack>
-                            //   </Stack>}
-                                 >
-                                    <List sx={{ py: 0 }}>
-                                        <ListItem divider={!matchDownMD}>
-                                            <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">Name</Typography>
-                                                        <Typography>{info.tenantname || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                                <Grid item xs={12} md={6}>
-                                                    
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">Company Name</Typography>
-                                                        <Typography>{info.companyname || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                            </Grid>
-                                        </ListItem>
-                                        <ListItem divider={!matchDownMD}>
-                                            <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
-                                                <Stack spacing={0.5}>
-                                                        <Typography color="secondary">Registration No</Typography>
-                                                        <Typography>{info.registrationno || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                                <Grid item xs={12} md={6}>
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">Info</Typography>
-                                                        <Typography>{info.info || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                            </Grid>
-                                        </ListItem>
-                                        <ListItem divider={!matchDownMD}>
-                                            <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">Phone</Typography>
-                                                        <Typography>
-                                                            {info.primarycontact || ''}
-                                                        </Typography>
-                                                    </Stack>
-                                                </Grid>
-                                                <Grid item xs={12} md={6}>
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">State</Typography>
-                                                        <Typography>{info.state || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                            </Grid>
-                                        </ListItem>
-                                     
-                                        <ListItem divider={!matchDownMD}>
-                                            <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">Email</Typography>
-                                                        <Typography>{info.primaryemail || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                                <Grid item xs={12} md={6}>
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">City</Typography>
-                                                        <Typography>{info.city || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                            </Grid>
-                                        </ListItem>
-                                        <ListItem divider={!matchDownMD}>
-                                            <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">Suburb</Typography>
-                                                        <Typography>{info.suburb || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                                <Grid item xs={12} md={6}>
-                                                    <Stack spacing={0.5}>
-                                                        <Typography color="secondary">Zip Code</Typography>
-                                                        <Typography>{info.postcode || ''}</Typography>
-                                                    </Stack>
-                                                </Grid>
-                                            </Grid>
-                                        </ListItem>
-                                        <ListItem>
-                                            <Stack spacing={0.5}>
-                                                <Typography color="secondary">Address</Typography>
-                                                <Typography>{info.address || ''}</Typography>
-                                            </Stack>
-                                        </ListItem>
-                                    </List>
-                                </MainCard>
-                            </Grid>
-                            {/* <Grid item xs={12}>
-                                <MainCard title="Info">
-                                    <Typography color="secondary">
-                                      {info.info || ''}
-                                    </Typography>
-                                </MainCard>
-                            </Grid> */}
-                            
-                        </Grid>
-                    </Grid>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <MainCard>
+            <List sx={{ py: 0 }}>
+              <ListItem divider={!matchDownMD}>
+                <Grid container spacing={3}>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">Name</Typography>
+                      <Typography>{info.tenantname || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">Company Name</Typography>
+                      <Typography>{info.companyname || ''}</Typography>
+                    </Stack>
+                  </Grid>
                 </Grid>
-            </Box>
-        </MainCard>
-        </Grid>
-        </Grid>
-    </>
-}
+              </ListItem>
+              <ListItem divider={!matchDownMD}>
+                <Grid container spacing={3}>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">Registration No</Typography>
+                      <Typography>{info.registrationno || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">Info</Typography>
+                      <Typography>{info.info || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem divider={!matchDownMD}>
+                <Grid container spacing={3}>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">Phone</Typography>
+                      <Typography>{info.primarycontact || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">State</Typography>
+                      <Typography>{info.state || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                </Grid>
+              </ListItem>
 
-export default Accountsettings;
\ No newline at end of file
+              <ListItem divider={!matchDownMD}>
+                <Grid container spacing={3}>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">Email</Typography>
+                      <Typography>{info.primaryemail || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">City</Typography>
+                      <Typography>{info.city || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem divider={!matchDownMD}>
+                <Grid container spacing={3}>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">Suburb</Typography>
+                      <Typography>{info.suburb || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={12} sm={6}>
+                    <Stack spacing={0.5}>
+                      <Typography color="secondary">Zip Code</Typography>
+                      <Typography>{info.postcode || ''}</Typography>
+                    </Stack>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem>
+                <Stack spacing={0.5}>
+                  <Typography color="secondary">Address</Typography>
+                  <Typography>{info.address || ''}</Typography>
+                </Stack>
+              </ListItem>
+            </List>
+          </MainCard>
+        </Grid>
+      </Grid>
+
+      <Footer />
+    </>
+  );
+};
+
+export default Accountsettings;
diff --git a/src/pages/nearle/api/api.js b/src/pages/nearle/api/api.js
index b37bf74..b708d78 100644
--- a/src/pages/nearle/api/api.js
+++ b/src/pages/nearle/api/api.js
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { OpenToast } from 'components/nearle_components/OpenToast';
 const tenid = localStorage.getItem('tenantid');
 
 export const fetchOrders = async ({ pageParam = 1, queryKey }) => {
@@ -103,6 +104,28 @@ export const fetchCustomersList = async ({ queryKey }) => {
   console.log('fetchCustomersList', response.data.details);
   return response.data.details;
 };
+// ==============================|| gettenantcustomers (customers)||============================== //
+
+export const gettenantcustomers = async ({ pageParam = 1, queryKey }) => {
+  const [, rowsPerPage, customerSearch] = queryKey;
+
+  try {
+    const response = await axios.get(
+      `${process.env.REACT_APP_URL}/customers/gettenantcustomers/?tenantid=${tenid}&pageno=${pageParam}&pagesize=${rowsPerPage}&keyword=${customerSearch}`
+    );
+
+    const details = response.data.details ?? [];
+
+    return {
+      details,
+      nextPage: details.length === rowsPerPage ? pageParam + 1 : undefined
+    };
+  } catch (err) {
+    OpenToast(err.message, 'error', 1000);
+    return { details: [], nextPage: undefined };
+  }
+};
+
 // ==============================|| fetchCustomersListBySearch (customers)||============================== //
 export const fetchCustomersListBySearch = async ({ queryKey }) => {
   const [search] = queryKey;
diff --git a/src/pages/nearle/clients/createCustomer.js b/src/pages/nearle/clients/createCustomer.js
index c908616..0529363 100644
--- a/src/pages/nearle/clients/createCustomer.js
+++ b/src/pages/nearle/clients/createCustomer.js
@@ -31,6 +31,7 @@ import Geocode from 'react-geocode';
 import { enqueueSnackbar } from 'notistack';
 import { useNavigate } from 'react-router';
 import CloseIcon from '@mui/icons-material/Close';
+import TitleCard from '../titleCard';
 
 const CreateCustomer = () => {
   const appId = localStorage.getItem('applocationid');
@@ -356,11 +357,15 @@ const CreateCustomer = () => {
   return (
     <>
       {loading && <Loader />}
-      <Grid item xs={12} sx={{ mb: 2 }}>
-        <Stack direction="row" justifyContent="space-between" alignItems="center">
-          <Typography variant="h3">Create Customer</Typography>
-        </Stack>
-      </Grid>
+      <TitleCard
+        title={'Create Customer'}
+        secondary={
+          <Button variant="contained" color="secondary" onClick={() => navigate('/nearle/customers')}>
+            Back
+          </Button>
+        }
+      />
+
       <MainCard>
         <Grid container spacing={3}>
           <Grid item xs={12}>
diff --git a/src/pages/nearle/clients/customers.js b/src/pages/nearle/clients/customers.js
index 9ab7dee..3b1fc7b 100644
--- a/src/pages/nearle/clients/customers.js
+++ b/src/pages/nearle/clients/customers.js
@@ -1,1381 +1,206 @@
-import React from 'react';
-import { Avatar, Tooltip } from '@mui/material';
-import { useEffect, useRef, useState, Fragment, useMemo } from 'react';
-import { useTheme } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
-import Loader from 'components/Loader';
-import { FilterList } from '@mui/icons-material';
-import { FaRegEdit } from 'react-icons/fa';
-import { RiEdit2Fill } from 'react-icons/ri';
-import { enqueueSnackbar } from 'notistack';
-
+import React, { useRef, useEffect, useState } from 'react';
+import TitleCard from '../titleCard';
 import {
-  Box,
   Button,
-  IconButton,
-  Dialog,
-  Grid,
-  Menu,
-  MenuItem,
-  Stack,
-  TextField,
-  Typography,
   Chip,
-  OutlinedInput,
+  CircularProgress,
+  FormControl,
+  IconButton,
   InputAdornment,
-  List,
-  Divider,
-  ListItemButton,
-  ListItemAvatar,
-  ListItemText,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
+  OutlinedInput,
+  Stack,
   Table,
+  TableBody,
+  TableCell,
   TableContainer,
   TableHead,
-  TableCell,
-  TableBody,
   TableRow,
-  Autocomplete
+  Typography
 } from '@mui/material';
-import Geocode from 'react-geocode';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-import parse from 'autosuggest-highlight/parse';
-import { debounce } from '@mui/material/utils';
-import ClearIcon from '@mui/icons-material/Clear';
-import { ThemeMode } from 'config';
-import { MoreOutlined, SearchOutlined, DeleteFilled } from '@ant-design/icons';
 import MainCard from 'components/MainCard';
-import axios from 'axios';
-import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
-import dayjs from 'dayjs';
-var utc = require('dayjs/plugin/utc');
-dayjs.extend(utc);
-import { DateRangePicker } from 'mui-daterange-picker';
-
-import {
-  addDays,
-  addMonths,
-  addWeeks,
-  // addYears,
-  endOfMonth,
-  endOfWeek,
-  // endOfYear,
-  startOfMonth,
-  startOfWeek
-  // startOfYear,
-} from 'date-fns';
-
-// ==============================|| google address ||============================== //
-const GOOGLE_MAPS_API_KEY = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
-
-function loadScript(src, position, id) {
-  if (!position) {
-    return;
-  }
-
-  const script = document.createElement('script');
-  script.setAttribute('async', '');
-  script.setAttribute('id', id);
-  script.src = src;
-  position.appendChild(script);
-}
-
-const autocompleteService = { current: null };
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { gettenantcustomers } from '../api/api';
+import { useTheme } from '@mui/material/styles';
+import { useNavigate } from 'react-router';
+import { FormOutlined, SearchOutlined } from '@ant-design/icons';
+import SearchBar from 'components/nearle_components/SearchBar';
+import { Empty } from 'antd';
 
 const Customers = () => {
+  const navigate = useNavigate();
   const theme = useTheme();
-  const [search, setSearch] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [users, setUsers] = useState([]);
-  const [userName, setUserName] = useState('');
-  const [pageno, setPageno] = useState(1);
-  const [contactno, setContactno] = useState('');
-  const [open, setOpen] = React.useState(false);
-  const [open3, setOpen3] = React.useState(false);
-  const [open4, setOpen4] = React.useState(false);
-  const [selectedCustomer, setSelectedCustomer] = useState({});
-  const [orderlist, setOrderlist] = useState([]);
-  const [allorders, setAllorders] = useState('');
-  const [coveredorders, setCoveredorders] = useState('');
-  const [uncoveredorders, setUncoveredorders] = useState('');
-  const [cancelled, setCancelled] = useState('');
+  const loadMoreRef = useRef();
+  const containerRef = useRef();
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [customerSearch, setCustomerSearch] = useState('');
+  const [debounceCustomerSearch, setDebounceCustomerSearch] = useState('');
 
-  const [percentage1, setPercentage1] = useState('0');
-  const [percentage2, setPercentage2] = useState('0');
-  const [percentage3, setPercentage3] = useState('0');
-  const [percentage4, setPercentage4] = useState('0');
-
-  const [tempusers, setTempusers] = useState([]);
-
-  const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
-  const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
-
-  const [datestatus, setDatestatus] = useState('Today');
-  const [tenid, setTenid] = useState('');
-  const [loading1, setLoading1] = useState(false);
-  const [currentcustomerid, setCurrentcustomerid] = useState('');
-
-  const [address, setAddress] = useState('');
-  const [latlong, setLatlong] = useState({});
-
-  // ==============================|| for google address ||============================== //
-  const [value, setValue] = useState(null);
-  const [inputValue, setInputValue] = useState('');
-  const [options, setOptions] = useState([]);
-  const loaded = useRef(false);
-
-  if (typeof window !== 'undefined' && !loaded.current) {
-    if (!document.querySelector('#google-maps')) {
-      loadScript(
-        `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`,
-        document.querySelector('head'),
-        'google-maps'
-      );
-    }
-
-    loaded.current = true;
-  }
-
-  const fetch = useMemo(
-    () =>
-      debounce((request, callback) => {
-        autocompleteService.current.getPlacePredictions(request, callback);
-      }, 400),
-    []
-  );
   useEffect(() => {
-    let active = true;
+    const handler = setTimeout(() => {
+      setDebounceCustomerSearch(customerSearch);
+    }, 400);
 
-    if (!autocompleteService.current && window.google) {
-      autocompleteService.current = new window.google.maps.places.AutocompleteService();
-    }
-    if (!autocompleteService.current) {
-      return undefined;
-    }
+    return () => clearTimeout(handler);
+  }, [customerSearch]);
 
-    if (inputValue === '') {
-      setOptions(value ? [value] : []);
-      return undefined;
-    }
-    fetch({ input: inputValue }, (results) => {
-      if (active) {
-        let newOptions = [];
-
-        if (value) {
-          newOptions = [value];
+  const {
+    data: customerdata,
+    isLoading: isLoadingCustomer,
+    isError: isErrorCustomer,
+    error: errorCustomer,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = useInfiniteQuery({
+    queryKey: ['customers', rowsPerPage, debounceCustomerSearch],
+    queryFn: gettenantcustomers,
+    getNextPageParam: (lastPage) => lastPage.nextPage
+  });
+  const rows = customerdata ? customerdata.pages.flatMap((p) => p.details) : [];
+  useEffect(() => {
+    customerdata && console.log(customerdata);
+  }, [customerdata]);
+  useEffect(() => {
+    if (!hasNextPage) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          fetchNextPage();
         }
-
-        if (results) {
-          newOptions = [...newOptions, ...results];
-        }
-
-        setOptions(newOptions);
+      },
+      {
+        root: document.querySelector('.MuiTableContainer-root'), // 👈 or explicitly TableContainer
+        rootMargin: '0px',
+        threshold: 1.0
       }
-    });
-
-    return () => {
-      active = false;
-    };
-  }, [value, inputValue, fetch]);
-
-  Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
-  useEffect(() => {
-    try {
-      console.log('selected address =>', address);
-      Geocode.fromAddress(address).then(
-        (response) => {
-          console.log('lat long response =>', response.results[0]);
-          if (response.status == 'OK') {
-            const { lat, lng } = response.results[0].geometry.location;
-            setLatlong({
-              lat,
-              lng
-            });
-            setSelectedCustomer({
-              ...selectedCustomer,
-              latitude: lat,
-              longitude: lng
-            });
-          }
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
-    } catch (err) {
-      console.log(err);
-    }
-  }, [address]);
-
-  useEffect(() => {
-    selectedCustomer &&
-      setLatlong({
-        lat: selectedCustomer.latitude,
-        lng: selectedCustomer.longitude
-      });
-  }, [selectedCustomer]);
-
-  const openToast = (message, variant, duration) => {
-    enqueueSnackbar(message, {
-      variant: variant,
-      anchorOrigin: { vertical: 'top', horizontal: 'right' },
-      autoHideDuration: duration
-    });
-  };
-
-  useEffect(() => {
-    console.log('selectedCustomer', selectedCustomer);
-  }, [selectedCustomer]);
-
-  // ==============================|| for dialog ||============================== //
-
-  const handleClickOpen4 = () => {
-    setOpen4(true);
-  };
-
-  const handleClose4 = () => {
-    setOpen4(false);
-  };
-  /* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
-  const textFieldRef = useRef(null);
-
-  useEffect(() => {
-    const handleKeyPress = (event) => {
-      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-
-        textFieldRef.current.focus();
-      }
-      if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
-        // Remove focus from the TextField
-        textFieldRef.current.blur();
-      }
-    };
-    document.addEventListener('keydown', handleKeyPress);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyPress);
-    };
-  }, []);
-
-  const handleClose = () => {
-    setOpen3(false);
-  };
-
-  useEffect(() => {
-    console.log('username', userName);
-  }, [userName]);
-
-  const [anchorEl, setAnchorEl] = useState();
-
-  const handleClickSort = (event) => {
-    setAnchorEl(event?.currentTarget);
-  };
-
-  const handleCloseSort = () => {
-    setAnchorEl(null);
-  };
-
-  useEffect(() => {
-    if (localStorage.getItem('tenantid')) {
-      fetchtable(localStorage.getItem('tenantid'));
-    }
-  }, []);
-
-  useEffect(() => {
-    if (tenid && !search) {
-    }
-  }, [pageno]);
-
-  useEffect(() => {
-    if (tenid) {
-      fetchData(tenid);
-    }
-  }, [startdate, enddate]);
-
-  const fetchpercentage = async (tid) => {
-    setLoading(true);
-    try {
-      await axios
-        .get(`${process.env.REACT_APP_URL}/orders/getordersummary/?customerid=${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());
-          setPercentage1((Math.round((res.data.details.total / 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());
-
-          setPercentage2((Math.round((res.data.details.pending / res.data.details.total) * 100) || 0).toString());
-
-          setLoading(false);
-        })
-        .catch((err) => {
-          console.log(err);
-          setLoading(false);
-        });
-    } catch (err) {
-      console.log(err);
-      setLoading(false);
-    }
-  };
-
-  const removeclient = async () => {
-    setLoading(true);
-    try {
-      await axios
-        .delete(`${process.env.REACT_APP_URL}/customers/delete/?customerid=${currentcustomerid}`)
-
-        .then((res) => {
-          if (res.data.status) {
-            enqueueSnackbar('Deleted Successfully', {
-              variant: 'success',
-              anchorOrigin: { vertical: 'top', horizontal: 'right' },
-              autoHideDuration: 2000
-            });
-            setCurrentcustomerid('');
-          } else {
-            enqueueSnackbar(res.data.message, {
-              variant: 'error',
-              anchorOrigin: { vertical: 'top', horizontal: 'right' },
-              autoHideDuration: 2000
-            });
-          }
-          setLoading(false);
-        })
-        .catch((err) => {
-          console.log(err);
-          enqueueSnackbar(err.message, {
-            variant: 'error',
-            anchorOrigin: { vertical: 'top', horizontal: 'right' },
-            autoHideDuration: 2000
-          });
-          setLoading(false);
-        });
-    } catch (err) {
-      console.log(err);
-      setLoading(false);
-    }
-  };
-
-  const fetchtable = async (tid) => {
-    setLoading1(true);
-    try {
-      await axios
-        .get(`${process.env.REACT_APP_URL}/customers/gettenantcustomers/?tenantid=${tid}&pageno=1&pagesize=20`)
-        .then((res) => {
-          if (res.data.message === 'Success') {
-            let arr = [];
-            res.data.details.map((val, i) => {
-              arr = [...arr, { ...val, sno: i + 1 }];
-            });
-            setSelectedCustomer(arr[0]);
-            setUsers([...arr]);
-            setTempusers([...arr]);
-            setTenid(arr[0].customerid);
-            setUserName(arr[0].firstname || '');
-            setContactno(arr[0].contactno || '');
-            fetchpercentage(arr[0].customerid);
-            fetchData(arr[0].customerid);
-            console.log(res.data.Details);
-            console.log(arr);
-            setLoading1(false);
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-          setLoading1(false);
-          enqueueSnackbar(err.message, {
-            variant: 'error',
-            anchorOrigin: { vertical: 'top', horizontal: 'right' },
-            autoHideDuration: 2000
-          });
-        });
-    } catch (err) {
-      console.log(err);
-      setLoading1(false);
-    }
-  };
-
-  const fetchData1 = async () => {
-    setLoading(true);
-    try {
-      await axios
-        .get(`${process.env.REACT_APP_URL}/customers/getbytid?tenantid=${tenid}&pageno=${pageno}&pagesize=20`)
-        .then((response) => {
-          if (response.data.status) {
-            setUsers(response.data.details);
-            setUserName(response.data.details[0].firstname || '');
-            setContactno(response.data.details[0].contactno || '');
-            fetchData(response.data.details[0].customerid);
-          }
-          setLoading(false);
-        })
-        .catch((err) => {
-          console.log(err);
-          setLoading(false);
-        });
-    } catch (error) {
-      console.error('Error fetching data:', error);
-      setLoading(false);
-    }
-  };
-
-  const fetchData = async (tid) => {
-    try {
-      await axios
-        .get(
-          `${process.env.REACT_APP_URL}/orders/customer/getorders/?customerid=${tid}&status=delivered&fromdate=${startdate}&todate=${enddate}`
-        )
-        .then((res) => {
-          if (res.data.message === 'Success') {
-            let arr = [];
-            res.data.details.map((val, i) => {
-              arr = [...arr, { ...val, sno: i + 1 }];
-            });
-            setOrderlist([...arr]);
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-
-  function AlertCustomerDelete({
-    // title,
-    open,
-    handleClose
-  }) {
-    return (
-      <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' }}>
-              <DeleteFilled />
-            </Avatar>
-
-            <Stack spacing={2}>
-              <Typography variant="h4" align="center">
-                Are you sure you want to Remove this Customer?
-              </Typography>
-            </Stack>
-
-            <Stack direction="row" spacing={2} sx={{ width: 1 }}>
-              <Button
-                fullWidth
-                color="error"
-                variant="contained"
-                onClick={() => {
-                  removeclient();
-                  handleClose(true);
-                }}
-                autoFocus
-              >
-                Yes, Remove
-              </Button>
-              <Button
-                fullWidth
-                onClick={() => {
-                  handleClose(false);
-                  setCurrentcustomerid('');
-                }}
-                color="secondary"
-                variant="outlined"
-              >
-                No
-              </Button>
-            </Stack>
-          </Stack>
-        </DialogContent>
-      </Dialog>
     );
-  }
+    if (loadMoreRef.current) observer.observe(loadMoreRef.current);
+    return () => {
+      if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
+    };
+  }, [hasNextPage, fetchNextPage]);
 
-  // ==============================|| updateCustomer (post)||============================== //
-  const updateCustomer = async () => {
-    if (!selectedCustomer.firstname) {
-      openToast('Enter Door NO', 'warning', 1500);
-    } else if (!selectedCustomer.contactno) {
-      openToast('Enter Contact Number ', 'warning', 1500);
-    } else if (!selectedCustomer.address) {
-      openToast('Enter Valid Address', 'warning', 1500);
-    } else if (!selectedCustomer.doorno) {
-      openToast('Enter Door Number ', 'warning', 1500);
-    } else if (!selectedCustomer.suburb) {
-      openToast('Enter Suburb', 'warning', 1500);
-    } else if (!selectedCustomer.city) {
-      openToast('Enter City ', 'warning', 1500);
-    } else if (!selectedCustomer.state) {
-      openToast('Enter State', 'warning', 1500);
-    } else if (!selectedCustomer.postcode) {
-      openToast('Enter PostCode', 'warning', 1500);
-    } else if (!selectedCustomer.landmark) {
-      openToast('Enter Landmark', 'warning', 1500);
-    } else if (!selectedCustomer.latitude) {
-      openToast('Enter Latitude', 'warning', 1500);
-    } else if (!selectedCustomer.longitude) {
-      openToast('Enter Longitude', 'warning', 1500);
-    } else {
-      try {
-        const postUpdateResponse = await axios.put(`${process.env.REACT_APP_URL}/customers/update`, {
-          customerid: selectedCustomer.customerid,
-          configid: 1,
-          firstname: selectedCustomer.firstname,
-          applocationid: selectedCustomer.applocationid,
-          profileimage: '',
-          dialcode: '+91',
-          contactno: selectedCustomer.contactno,
-          devicetype: '',
-          deviceid: '',
-          customertoken: '123',
-          address: selectedCustomer.address,
-          suburb: selectedCustomer.suburb,
-          city: selectedCustomer.city,
-          state: selectedCustomer.state,
-          postcode: selectedCustomer.postcode,
-          landmark: selectedCustomer.landmark,
-          doorno: selectedCustomer.doorno,
-          latitude: selectedCustomer.latitude.toString(),
-          longitude: selectedCustomer.longitude.toString()
-        });
-
-        console.log('postUpdateResponse', postUpdateResponse);
-        if (postUpdateResponse.data.status) {
-          openToast(postUpdateResponse.data.message, 'success', 1500);
-          handleClose4();
-          fetchtable(localStorage.getItem('tenantid'));
-        }
-      } catch (error) {
-        console.log('postUpdate error', error);
+  const handleScroll = (event) => {
+    const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+    if (scrollTop + clientHeight >= scrollHeight - 50) {
+      if (hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
       }
     }
   };
 
   return (
     <>
-      {loading && <Loader />}
-      <AlertCustomerDelete open={open3} handleClose={handleClose} />
-
-      <Grid container rowSpacing={2} columnSpacing={2.75}>
-        <Grid item xs={12}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Typography variant="h3">Customers</Typography>
-          </Stack>
-        </Grid>
-        <Grid item xs={12}>
-          <Box
-            sx={{
-              display: 'flex',
-              width: '100%',
-
-              height: '100%'
-            }}
-          >
-            <MainCard
-              sx={{
-                borderRadius: '4px 0 0 4px',
-                borderRight: 'none',
-                width: 320,
-                height: '100%'
-              }}
-              content={false}
-            >
-              <Box sx={{ p: 3, pb: 1 }}>
-                <Stack spacing={2}>
-                  <OutlinedInput
-                    inputRef={textFieldRef}
-                    fullWidth
-                    id="input-search-header"
-                    placeholder="Search (ctrl+k)"
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                    sx={{
-                      '& .MuiOutlinedInput-input': {
-                        p: '10.5px 0px 12px'
-                      }
-                    }}
-                    startAdornment={
-                      <InputAdornment position="start">
-                        <SearchOutlined style={{ fontSize: 'small' }} />
-                      </InputAdornment>
-                    }
-                    endAdornment={
-                      <Tooltip title="clear">
-                        <IconButton
-                          sx={{ visibility: search ? 'visible' : 'hidden' }}
-                          onClick={() => {
-                            setSearch('');
-                          }}
-                        >
-                          <ClearIcon />
-                        </IconButton>
-                      </Tooltip>
-                    }
-                  />
-                </Stack>
-              </Box>
-
-              <Box
-                sx={{
-                  height: '600px',
-                  overflowY: 'scroll',
-                  scrollbarWidth: 'thin', // Hide scrollbar in Firefox
-                  '&::-webkit-scrollbar': {
-                    width: '3px' // Customize the width of the scrollbar
-                  },
-                  '&::-webkit-scrollbar-thumb': {
-                    backgroundColor: '#65387A', // Customize the scrollbar thumb color
-                    borderRadius: '6px' // Round the scrollbar thumb
-                  },
-                  p: 3,
-                  pt: 0
-                }}
-              >
-                {loading1 ? (
-                  <>
-                    {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((val1) => {
-                      return (
-                        <>
-                          <Stack direction={'row'}>
-                            <Skeleton variant="circular" width={40} height={40} />
-                            <Stack direction={'column'} sx={{ width: '80%' }}>
-                              <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
-                              <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
-                            </Stack>
-                          </Stack>
-                        </>
-                      );
-                    })}
-                  </>
-                ) : (
-                  <List component="nav">
-                    {users.map((user, index) => (
-                      <Fragment key={index}>
-                        <ListItemButton
-                          sx={{ pl: 1 }}
-                          onClick={() => {
-                            setTenid(user.customerid);
-                            setUserName(user.firstname);
-                            setContactno(user.contactno);
-                            fetchData(user.customerid);
-                            fetchpercentage(user.customerid);
-                            setSelectedCustomer(user);
-                          }}
-                        >
-                          <ListItemAvatar>
-                            <Avatar
-                              // user={user}
-                              style={{ background: '#65387A' }}
-                            />
-                          </ListItemAvatar>
-                          <ListItemText
-                            primary={
-                              <Stack component="span" direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
-                                <Typography
-                                  variant="h6"
-                                  color="inherit"
-                                  sx={{
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap'
-                                  }}
-                                >
-                                  {user.firstname}
-                                </Typography>
-                              </Stack>
-                            }
-                            secondary={
-                              <Stack component="span" direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
-                                <Typography
-                                  variant="caption"
-                                  color="textSecondary"
-                                  sx={{
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap'
-                                  }}
-                                >
-                                  {user.contactno}
-                                </Typography>
-                              </Stack>
-                            }
-                          />
-                        </ListItemButton>
-                        <Divider />
-                      </Fragment>
-                    ))}
-                  </List>
-                )}
-              </Box>
-
-              <Box sx={{ width: '100%', p: 2 }}>
-                <Stack direction={'row'} justifyContent={'flex-end'}>
-                  <Typography variant="h6">{users.length} Customers</Typography>
-                </Stack>
-              </Box>
-            </MainCard>
-
-            <Grid
-              container
-              sx={{
-                width: 'calc(100% - 320px)',
-                height: '100%'
-              }}
-            >
-              <Grid
-                item
-                xs={12}
-                sx={{
-                  transition: theme.transitions.create('width', {
-                    easing: theme.transitions.easing.easeOut,
-                    duration: theme.transitions.duration.shorter + 200
-                  })
-                }}
-              >
-                <MainCard
-                  content={false}
-                  sx={{
-                    height: '100%',
-                    bgcolor: theme.palette.mode === ThemeMode.DARK ? 'dark.main' : 'grey.50',
-                    transition: theme.transitions.create('width', {
-                      easing: theme.transitions.easing.easeOut,
-                      duration: theme.transitions.duration.shorter + 200
-                    })
-                  }}
-                >
-                  <Grid container spacing={3} sx={{ height: '100%' }}>
-                    <Grid
-                      item
-                      xs={12}
-                      sx={{
-                        bgcolor: theme.palette.background.paper,
-                        pr: 2,
-                        pb: 2,
-                        borderBottom: `1px solid ${theme.palette.divider}`
-                        // height:'100%'
-                      }}
-                    >
-                      <Grid container justifyContent="space-between">
-                        <Grid item sx={{ ml: 2, mt: 2 }}>
-                          <Stack direction="row" alignItems="center" spacing={2}>
-                            <Avatar style={{ background: '#65387A' }} />
-
-                            {userName ? (
-                              <Stack direction={'column'}>
-                                <Typography variant="subtitle1">{userName}</Typography>
-                                <Typography variant="subtitle1" color={'secondary'}>
-                                  {contactno}
-                                </Typography>
-                              </Stack>
-                            ) : (
-                              <Stack direction={'column'}>
-                                <Skeleton variant="text" sx={{ fontSize: '1rem', width: '75px' }} />
-                                <Skeleton variant="text" sx={{ fontSize: '1rem', width: '75px' }} />
-                              </Stack>
-                            )}
-                          </Stack>
-                        </Grid>
-                        <Grid item sx={{ ml: 2, mt: 2 }}>
-                          <Stack direction="row" alignItems="center" spacing={2} sx={{ height: '100%' }}>
-                            <IconButton onClick={handleClickSort} size="large" color="primary">
-                              <MoreOutlined />
-                            </IconButton>
-                            <Menu
-                              id="simple-menu"
-                              anchorEl={anchorEl}
-                              keepMounted
-                              open={Boolean(anchorEl)}
-                              onClose={handleCloseSort}
-                              anchorOrigin={{
-                                vertical: 'bottom',
-                                horizontal: 'right'
-                              }}
-                              transformOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right'
-                              }}
-                              sx={{
-                                p: 0,
-                                '& .MuiMenu-list': {
-                                  p: 0
-                                }
-                              }}
-                            >
-                              <MenuItem onClick={handleCloseSort}>
-                                <Button
-                                  variant="text"
-                                  onClick={() => {
-                                    setOpen3(true);
-                                    setCurrentcustomerid(tenid);
-                                  }}
-                                >
-                                  {
-                                    <DeleteFilled
-                                      style={{
-                                        fontSize: '12px',
-                                        marginRight: '15px'
-                                      }}
-                                    />
-                                  }{' '}
-                                  Delete
-                                </Button>
-                              </MenuItem>
-                              <MenuItem onClick={handleCloseSort}>
-                                <Button
-                                  variant="text"
-                                  onClick={() => {
-                                    handleClickOpen4();
-                                  }}
-                                >
-                                  {
-                                    <RiEdit2Fill
-                                      style={{
-                                        fontSize: '12px',
-                                        marginRight: '15px'
-                                      }}
-                                    />
-                                  }{' '}
-                                  Edit
-                                </Button>
-                              </MenuItem>
-                            </Menu>
-                          </Stack>
-                        </Grid>
-                      </Grid>
-                    </Grid>
-                    {/* ======================================== || Edit Dialog || ======================================== */}
-                    <Dialog
-                      open={open4}
-                      onClose={handleClose4}
-                      aria-labelledby="alert-dialog-title"
-                      aria-describedby="alert-dialog-description"
-                      maxWidth="lg"
-                      fullWidth
-                    >
-                      <DialogTitle id="alert-dialog-title" sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
-                        <Stack direction={'row'} alignItems={'center'} spacing={1}>
-                          <FaRegEdit style={{ fontSize: 25 }} /> <Typography variant="h3">Edit Customer</Typography>
-                        </Stack>
-                      </DialogTitle>
-                      <DialogContent>
-                        <Grid container spacing={2} sx={{ mt: 2 }}>
-                          <Grid item xs={6}>
-                            <Typography sx={{ mb: 1 }}>Customer Name</Typography>
-                            <TextField
-                              variant="outlined"
-                              fullWidth
-                              defaultValue={selectedCustomer.firstname}
-                              onChange={(e) => {
-                                setSelectedCustomer({
-                                  ...selectedCustomer,
-                                  firstname: e.target.value
-                                });
-                              }}
-                            />
-                          </Grid>
-
-                          <Grid item xs={6}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>Contact Number</Typography>
-                            <Stack direction={'row'}>
-                              <TextField readonly variant="outlined" value={'+91'} sx={{ width: 60 }} />
-                              <TextField
-                                variant="outlined"
-                                fullWidth
-                                defaultValue={selectedCustomer.contactno}
-                                onChange={(e) => {
-                                  setSelectedCustomer({
-                                    ...selectedCustomer,
-                                    contactno: e.target.value
-                                  });
-                                }}
-                                inputProps={{
-                                  maxLength: 10
-                                }}
-                              />
-                            </Stack>
-                          </Grid>
-
-                          <Grid item xs={12}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>Address</Typography>
-                            <Autocomplete
-                              id="google-map-demo"
-                              sx={{}}
-                              fullWidth
-                              getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}
-                              filterOptions={(x) => x}
-                              options={options}
-                              autoComplete
-                              includeInputInList
-                              filterSelectedOptions
-                              value={selectedCustomer.address}
-                              noOptionsText="No locations"
-                              onChange={(event, newValue) => {
-                                setOptions(newValue ? [newValue, ...options] : options);
-                                setValue(newValue);
-                                console.log('newValue', newValue.description);
-                                setAddress(newValue.description);
-                                setSelectedCustomer({
-                                  ...selectedCustomer,
-                                  address: newValue.description
-                                });
-                              }}
-                              onInputChange={(event, newInputValue) => {
-                                setInputValue(newInputValue);
-                              }}
-                              renderInput={(params) => <TextField {...params} fullWidth />}
-                              renderOption={(props, option) => {
-                                const matches = option.structured_formatting.main_text_matched_substrings || [];
-
-                                const parts = parse(
-                                  option.structured_formatting.main_text,
-                                  matches.map((match) => [match.offset, match.offset + match.length])
-                                );
-
-                                return (
-                                  <li {...props}>
-                                    <Grid container alignItems="center">
-                                      <Grid item sx={{ display: 'flex', width: 44 }}>
-                                        <LocationOnIcon sx={{ color: 'text.secondary' }} />
-                                      </Grid>
-                                      <Grid
-                                        item
-                                        sx={{
-                                          width: 'calc(100% - 44px)',
-                                          wordWrap: 'break-word'
-                                        }}
-                                      >
-                                        {parts.map((part, index) => (
-                                          <Box
-                                            key={index}
-                                            component="span"
-                                            sx={{
-                                              fontWeight: part.highlight ? 'bold' : 'regular'
-                                            }}
-                                          >
-                                            {part.text}
-                                          </Box>
-                                        ))}
-                                        <Typography variant="body2" color="text.secondary">
-                                          {option.structured_formatting.secondary_text}
-                                        </Typography>
-                                      </Grid>
-                                    </Grid>
-                                  </li>
-                                );
-                              }}
-                            />
-                          </Grid>
-
-                          <Grid item xs={6}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>Door No</Typography>
-                            <TextField
-                              variant="outlined"
-                              fullWidth
-                              defaultValue={selectedCustomer.doorno}
-                              onChange={(e) => {
-                                setSelectedCustomer({
-                                  ...selectedCustomer,
-                                  doorno: e.target.value
-                                });
-                              }}
-                            />
-                          </Grid>
-
-                          <Grid item xs={6}>
-                            <Typography sx={{ mb: 1 }}>Suburb</Typography>
-                            <TextField
-                              variant="outlined"
-                              fullWidth
-                              defaultValue={selectedCustomer.suburb}
-                              onChange={(e) => {
-                                setSelectedCustomer({
-                                  ...selectedCustomer,
-                                  suburb: e.target.value
-                                });
-                              }}
-                            />
-                          </Grid>
-
-                          <Grid item xs={6}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>City</Typography>
-                            <TextField
-                              variant="outlined"
-                              fullWidth
-                              defaultValue={selectedCustomer.city}
-                              onChange={(e) => {
-                                setSelectedCustomer({
-                                  ...selectedCustomer,
-                                  city: e.target.value
-                                });
-                              }}
-                            />
-                          </Grid>
-
-                          <Grid item xs={6}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>State</Typography>
-                            <TextField
-                              variant="outlined"
-                              fullWidth
-                              defaultValue={selectedCustomer.state}
-                              onChange={(e) => {
-                                setSelectedCustomer({
-                                  ...selectedCustomer,
-                                  state: e.target.value
-                                });
-                              }}
-                            />
-                          </Grid>
-
-                          <Grid item xs={6}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>Postcode</Typography>
-                            <TextField
-                              variant="outlined"
-                              fullWidth
-                              defaultValue={selectedCustomer.postcode}
-                              onChange={(e) => {
-                                setSelectedCustomer({
-                                  ...selectedCustomer,
-                                  postcode: e.target.value
-                                });
-                              }}
-                            />
-                          </Grid>
-
-                          <Grid item xs={6}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>Landmark</Typography>
-                            <TextField
-                              variant="outlined"
-                              fullWidth
-                              defaultValue={selectedCustomer.landmark}
-                              onChange={(e) => {
-                                setSelectedCustomer({
-                                  ...selectedCustomer,
-                                  landmark: e.target.value
-                                });
-                              }}
-                            />
-                          </Grid>
-
-                          <Grid item xs={6} sx={{ cursor: 'not-allowed' }}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>Latitude</Typography>
-                            <TextField variant="outlined" fullWidth value={latlong.lat} sx={{ cursor: 'not-allowed' }} />
-                          </Grid>
-
-                          <Grid item xs={6} sx={{ cursor: 'not-allowed' }}>
-                            {' '}
-                            <Typography sx={{ mb: 1 }}>Longitude</Typography>
-                            <TextField readonly variant="outlined" fullWidth value={latlong.lng} />
-                          </Grid>
-                        </Grid>
-                      </DialogContent>
-                      <DialogActions sx={{ mr: 2, mb: 2 }}>
-                        <Button onClick={handleClose4} variant="contained" color="error" sx={{ mr: 2 }}>
-                          Close
-                        </Button>
-                        <Button
-                          onClick={() => {
-                            updateCustomer();
-                          }}
-                          variant="contained"
-                          autoFocus
-                        >
-                          Update
-                        </Button>
-                      </DialogActions>
-                    </Dialog>
-                    {/* ======================================== || Cards || ======================================== */}
-                    <Grid
-                      item
-                      xs={12}
-                      sx={{
-                        height: '100%'
-                      }}
-                    >
-                      <Box sx={{ pl: 1, pr: 3, height: '100%' }}>
-                        <Grid
-                          container
-                          spacing={2}
-                          //  ref={wrapper}
-                          sx={{ height: '100%' }}
-                        >
-                          <Grid item xs={12} lg={3} sm={6}>
-                            <HoverSocialCard
-                              primary="All Orders"
-                              secondary={allorders === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : allorders}
-                              // percentage={percentage1.toString()}
-                              color={theme.palette.primary.main}
-                            />
-                          </Grid>
-                          <Grid item xs={12} lg={3} sm={6}>
-                            <HoverSocialCard
-                              primary="Pending orders"
-                              secondary={uncoveredorders == '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : uncoveredorders}
-                              // percentage={percentage2.toString()}
-                              color={theme.palette.warning.main}
-                            />
-                          </Grid>
-                          <Grid item xs={12} lg={3} sm={6}>
-                            <HoverSocialCard
-                              primary="Delivered orders"
-                              secondary={coveredorders === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : coveredorders}
-                              //  percentage={percentage3.toString()}
-                              color={theme.palette.success.main}
-                            />
-                          </Grid>
-
-                          <Grid item xs={12} lg={3} sm={6}>
-                            <HoverSocialCard
-                              primary="Cancelled Orders"
-                              secondary={cancelled === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : cancelled}
-                              // percentage={percentage4.toString()}
-                              color={theme.palette.secondary[600]}
-                            />
-                          </Grid>
-                          <Grid
-                            item
-                            xs={12}
-                            sx={{
-                              height: '100%'
-                            }}
-                          >
-                            <MainCard
-                              title={`Orders- ${datestatus}`}
-                              content={false}
-                              secondary={
-                                <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>
-                              }
-                            >
-                              <Box
-                                sx={{
-                                  height: '430px',
-                                  overflowY: 'scroll',
-                                  scrollbarWidth: 'thin', // Hide scrollbar in Firefox
-                                  '&::-webkit-scrollbar': {
-                                    width: '3px' // Customize the width of the scrollbar
-                                  },
-                                  '&::-webkit-scrollbar-thumb': {
-                                    backgroundColor: '#65387A', // Customize the scrollbar thumb color
-                                    borderRadius: '6px' // Round the scrollbar thumb
-                                  },
-                                  p: 3,
-                                  pt: 0
-                                }}
-                              >
-                                <TableContainer>
-                                  <Table>
-                                    <TableHead>
-                                      <TableRow>
-                                        <TableCell sx={{ pl: 3 }}>#</TableCell>
-                                        <TableCell>CUSTOMER</TableCell>
-                                        <TableCell>ORDER ID</TableCell>
-                                        <TableCell>PICKUP</TableCell>
-                                        <TableCell>DELIVERY</TableCell>
-                                        <TableCell>STATUS</TableCell>
-                                      </TableRow>
-                                    </TableHead>
-                                    <TableBody>
-                                      {orderlist.map((row, index) => (
-                                        <>
-                                          <TableRow hover key={index}>
-                                            <TableCell sx={{ pl: 3 }}>{row.sno}</TableCell>
-                                            <TableCell align="left" sx={{ paddingLeft: '12px !important' }}>
-                                              <Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
-                                                <Avatar
-                                                  alt=""
-                                                  size="sm"
-                                                  sx={{
-                                                    width: '25px',
-                                                    height: '25px'
-                                                  }}
-                                                ></Avatar>
-                                                <Stack direction="column">
-                                                  <Typography variant="caption">{row.customername}</Typography>
-                                                  <Typography variant="caption" color="textSecondary">
-                                                    {row.contactno}
-                                                  </Typography>
-                                                </Stack>
-                                              </Stack>
-                                            </TableCell>
-                                            <TableCell align="left">
-                                              <Typography variant="body2" noWrap>
-                                                {row.orderid}
-                                              </Typography>
-                                              <Typography noWrap sx={{ fontSize: '11px' }}>
-                                                {dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
-                                              </Typography>
-                                              <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
-                                                {dayjs(row.deliverydate).utc().format('hh:mm A')}
-                                              </Typography>
-                                            </TableCell>
-                                            <TableCell align="left">
-                                              <Stack direction="column">
-                                                <Tooltip title={row.pickupaddress}>
-                                                  <Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
-                                                    {row.locationsuburb || row.pickupaddress.slice(0, 20)}
-                                                  </Typography>
-                                                </Tooltip>
-                                              </Stack>
-                                            </TableCell>
-                                            <TableCell align="left">
-                                              <Stack direction="column">
-                                                <Tooltip title={row.deliveryaddress}>
-                                                  <Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
-                                                    {row.customersuburb || row.deliveryaddress.slice(0, 20)}
-                                                  </Typography>
-                                                </Tooltip>
-                                              </Stack>
-                                            </TableCell>
-                                            <TableCell align="right" sx={{ pr: 3 }}>
-                                              <Stack direction="row">
-                                                {row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
-                                                {row.orderstatus === 'modified' && <Chip label="Confirmed" color="success" size="small" />}
-                                                {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
-                                                {row.orderstatus === 'delivered' && <Chip label="Completed" color="primary" size="small" />}
-                                                {row.orderstatus === 'processing' && (
-                                                  <Chip label="Processing" color="primary" size="small" />
-                                                )}
-                                                {row.orderstatus === 'ready' && <Chip label="Accepted" color="info" size="small" />}
-                                                {row.orderstatus === 'confirmed' && <Chip label="Confirmed" color="success" size="small" />}
-
-                                                {row.orderstatus === 'active' && <Chip label="Picked" color="info" size="small" />}
-                                                {row.orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}
-                                                {row.orderstatus === 'created' && <Chip label="Created" color="secondary" size="small" />}
-                                              </Stack>
-                                            </TableCell>
-                                          </TableRow>
-                                        </>
-                                      ))}
-                                    </TableBody>
-                                  </Table>
-                                </TableContainer>
-                              </Box>
-                            </MainCard>
-                          </Grid>
-                        </Grid>
-                      </Box>
-                    </Grid>
-                  </Grid>
-                </MainCard>
-              </Grid>
-            </Grid>
-          </Box>
-        </Grid>
-      </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(`[${dayjs(range.startDate).format('DD-MM-YYYY')} to ${dayjs(range.endDate).format('DD-MM-YYYY')}]`);
-                }
-              }
-              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={() => {
-              setOpen(false);
-            }}
-          >
-            ok
+      <TitleCard
+        title={'Customers'}
+        secondary={
+          <Button variant="contained" onClick={() => navigate('/nearle/customers/create')}>
+            Create Customers
           </Button>
-        </Stack>
-      </Dialog>
+        }
+      />
+      <MainCard
+        content={false}
+        sx={{ width: '100%', overflow: 'hidden' }}
+        title={
+          <SearchBar
+            value={customerSearch}
+            placeholder="Search Location"
+            onChange={(e) => setCustomerSearch(e.target.value)}
+            sx={{
+              width: '100%',
+              maxWidth: 300,
+              minWidth: 200,
+              bgcolor: 'white'
+            }}
+          />
+        }
+      >
+        <TableContainer
+          onScroll={handleScroll}
+          ref={containerRef}
+          sx={{
+            width: '100%',
+            borderBottom: 1,
+            borderColor: 'divider',
+            maxHeight: 'calc(100vh - 200px)',
+            overflow: 'auto',
+            '&::-webkit-scrollbar': {
+              width: '12px', // scroll bar widthP
+              cursor: 'pointer'
+            },
+            '&::-webkit-scrollbar-thumb': {
+              backgroundColor: theme.palette.primary.main, // thumb color
+              borderRadius: '8px',
+              cursor: 'pointer'
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+              backgroundColor: theme.palette.primary.dark, // hover color
+              cursor: 'pointer'
+            },
+            '&::-webkit-scrollbar-track': {
+              backgroundColor: theme.palette.primary.lighter,
+              cursor: 'pointer'
+            }
+          }}
+        >
+          <Table stickyHeader>
+            <TableHead sx={{}}>
+              <TableRow sx={{ backgroundColor: theme.palette.primary.main }}>
+                <TableCell sx={{ position: 'sticky!important', bgcolor: 'secondary.light' }}>#</TableCell>
+                <TableCell sx={{ position: 'sticky!important', bgcolor: 'secondary.light' }}>Name</TableCell>
+                <TableCell sx={{ position: 'sticky!important', bgcolor: 'secondary.light' }}>suburb</TableCell>
+                <TableCell sx={{ position: 'sticky!important', bgcolor: 'secondary.light' }}>Address</TableCell>
+                <TableCell sx={{ position: 'sticky!important', bgcolor: 'secondary.light' }}>Lat/Lng</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows?.length == 0 && (
+                <TableRow>
+                  <TableCell colSpan={5}>
+                    <Empty description={'Customer Not Found'} />
+                  </TableCell>
+                </TableRow>
+              )}
+              {rows?.map((customer, index) => (
+                <TableRow key={index}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>
+                    <Stack>
+                      <Typography variant="subtitle1">{customer.firstname}</Typography>
+                      <Typography variant="subtitle2">{customer.contactno}</Typography>
+                      <Typography variant="subtitle2">{`ID : ${customer.customerid}`}</Typography>
+                    </Stack>
+                  </TableCell>
+                  <TableCell>
+                    <Stack>
+                      <Typography variant="subtitle1">{customer.suburb}</Typography>
+                      <Typography variant="subtitle2">{customer.city}</Typography>
+                    </Stack>
+                  </TableCell>
+                  <TableCell>{customer.address}</TableCell>
+                  <TableCell>
+                    <Stack display={'flex'} flexDirection={'column'} gap={2}>
+                      <Chip size="small" label={customer.latitude} />
+                      <Chip size="small" label={customer.longitude} />
+                    </Stack>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {rows?.length != 0 && (
+                <TableRow>
+                  <TableCell colSpan={15} rowSpan={3}>
+                    <div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
+                      {isFetchingNextPage ? <CircularProgress /> : hasNextPage ? <CircularProgress /> : 'No More Orders'}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </MainCard>
     </>
   );
 };
diff --git a/src/pages/nearle/locations/ResponsiveLocationDrawer.js b/src/pages/nearle/locations/ResponsiveLocationDrawer.js
index 41a29b4..c514268 100644
--- a/src/pages/nearle/locations/ResponsiveLocationDrawer.js
+++ b/src/pages/nearle/locations/ResponsiveLocationDrawer.js
@@ -150,7 +150,7 @@ const ResponsiveLocationDrawer = () => {
       currentStatus,
       startdate,
       enddate,
-      debouncedSearchLocation,
+      debouncedSearchword,
       rowsPerPage
     ],
     queryFn: fetchOrders1,
@@ -302,17 +302,17 @@ const ResponsiveLocationDrawer = () => {
               sx={{
                 width: 'auto',
                 height: 60,
-                bgcolor: theme.palette.primary.lighter,
+                bgcolor: 'white',
 
                 '& .MuiOutlinedInput-notchedOutline': {
                   border: 'none',
-                  borderBottom: '1px solid ',
+                  borderBottom: '1px solid',
                   borderColor: theme.palette.secondary.light
                 }
               }}
             />
           </Box>
-          <List sx={{ mt: -1 }}>
+          <List sx={{ border: 'none', mt: -1 }}>
             {locations?.map((row, index) => (
               <React.Fragment key={index}>
                 <ListItem
@@ -354,12 +354,14 @@ const ResponsiveLocationDrawer = () => {
             width: open && isDesktop ? `calc(100% - ${drawerWidth}px)` : '100%',
             transition: 'left 0.3s ease, width 0.3s ease',
             zIndex: 1100, // BELOW drawer, ABOVE content
-            backgroundColor: theme.palette.primary.lighter
+            backgroundColor: 'white',
+            borderBottom: '1px solid',
+            borderColor: theme.palette.secondary.light
           }}
         >
           <Toolbar>
             <Stack
-              sx={{ width: '100%' }}
+              sx={{ width: '100%', borderBottom: '1px soild red' }}
               display={'flex'}
               flexDirection={'row'}
               alignItems={'center'}
@@ -375,7 +377,7 @@ const ResponsiveLocationDrawer = () => {
                   {selectedLocation?.locationname}
                 </Typography>
               </Stack>
-              <Stack flexGrow={1} sx={{ mx: { xs: 0, custom600: 3 } }}>
+              <Stack>
                 <SearchBar
                   value={searchword}
                   placeholder={'Search Order Details'}
@@ -383,12 +385,12 @@ const ResponsiveLocationDrawer = () => {
                   sx={{
                     width: 'auto',
                     height: 40,
-                    bgcolor: theme.palette.primary.lighter,
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      border: 'none',
-                      borderBottom: '1px solid ',
-                      borderColor: theme.palette.secondary.light
-                    }
+                    bgcolor: 'white',
+                    maxWidth: 800,
+                    borderRadius: 1
+                    // '& .MuiOutlinedInput-notchedOutline': {
+                    //   border: 'none'
+                    // }
                   }}
                 />
               </Stack>
diff --git a/src/pages/nearle/login.js b/src/pages/nearle/login.js
index 3964f36..32f64c9 100644
--- a/src/pages/nearle/login.js
+++ b/src/pages/nearle/login.js
@@ -6,17 +6,15 @@ import {
   Grid,
   Card,
   CardContent,
-  // CardHeader,
   Stack,
-  //  Divider,
-  // InputLabel,
-  // OutlinedInput,
   TextField,
   Button,
   Typography,
   CardHeader,
   Container,
-  Link
+  Link,
+  InputAdornment,
+  IconButton
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import AnimateButton from 'components/@extended/AnimateButton';
@@ -25,181 +23,80 @@ import logo from 'assets/images/logo-nearle1.png';
 
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
-// import { openSnackbar } from 'store/reducers/snackbar';
-// import { useDispatch } from 'react-redux';
 import Loader from 'components/Loader';
-import { enqueueSnackbar } from 'notistack';
+import { OpenToast } from 'components/nearle_components/OpenToast';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 
 const Login = () => {
   const theme = useTheme();
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [alertmessage, setAlertmessage] = useState('');
-  const [checkusername, setCheckusername] = useState(false);
-  // const [toast, setToast] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   let navigate = useNavigate();
-  // let dispatch = useDispatch();
   const [submitting, setSubmitting] = useState(false);
+  const LoginSchema = Yup.object().shape({
+    username: Yup.string().email('Enter a valid email address').required('Email is required'),
+    password: Yup.string().required('Password is required')
+  });
 
   useEffect(() => {
-    if (
-      localStorage.getItem('authname')
-      //  || localStorage.getItem("appuserid")
-    ) {
+    if (localStorage.getItem('authname')) {
       navigate('/nearle/orders');
     }
-
-    // console.log(alertmessage)
   }, []);
 
-  const usernamecheck = async (e) => {
-    e.preventDefault();
-    setUsername(e.target.value);
-    if (e.target.value) {
-      try {
-        // await axios.post(`${process.env.REACT_APP_URL}/auth/login`, {
-        //     "authname": e.target.value
-        // })
-        await axios
-          // .post(`${process.env.REACT_APP_URL}/users/login`, {
-          .post(`${process.env.REACT_APP_URL}/users/tenant/login`, {
-            authname: e.target.value,
-            configid: 1,
-            password: 'admin'
-          })
-          .then((res) => {
-            console.log(res.data);
-            if (res.data.details.authname === e.target.value) {
-              setUsername(e.target.value);
-              setCheckusername(false);
-            } else {
-              setCheckusername(true);
-            }
-            // if (res.data.authname === e.target.value) {
-
-            //     setUsername(e.target.value);
-            //     setCheckusername(false);
-            // }
-          })
-          .catch((err) => {
-            // if (err.response.data.message === 'No user found') {
-
-            setCheckusername(true);
-            // }
-          });
-      } catch (err) {
-        console.log(err);
-      }
-    }
-  };
-
-  const loginsend = async () => {
-    // e.preventDefault();
+  const loginsend = async (values) => {
+    console.log('values', values);
     setLoading(true);
+    setSubmitting(true);
 
-    if (password && username) {
-      if (password == 'admin') {
-        setSubmitting(true);
-        try {
-          await axios
-            // .post(`${process.env.REACT_APP_URL}/users/login`, {
-            .post(`${process.env.REACT_APP_URL}/users/tenant/login`, {
-              authname: username,
-              configid: 1,
-              password: password
-            })
-            .then((res) => {
-              console.log(res.data);
-              if (res.data.details.authname === username) {
-                // setAlertmessage('login Successfull');
-                setLoading(false);
-                // dispatch(
-                //     openSnackbar({
-                //         open: true,
-                //         message: 'login Successfull',
-                //         variant: 'alert',
-                //         anchorOrigin: { vertical: 'top', horizontal: 'right' },
-                //         alert: {
-                //             color: 'success'
-                //         }
-                //     })
-                // )
-                enqueueSnackbar('login Successfull', {
-                  variant: 'success',
-                  anchorOrigin: { vertical: 'top', horizontal: 'right' },
-                  autoHideDuration: 1000
-                });
-                setUsername('');
-                setPassword('');
-                localStorage.setItem('tenantname', res.data.details.tenantname);
-                localStorage.setItem('firstname', res.data.details.tenantname);
-                localStorage.setItem('authname', res.data.details.authname);
-                localStorage.setItem('appuserid', res.data.details.userid);
-                localStorage.setItem('roleid', res.data.details.roleid);
-                localStorage.setItem('tenantid', res.data.details.tenantid);
-                localStorage.setItem('applocationid', res.data.details.applocationid);
-                localStorage.setItem('fullname', res.data.details.fullname);
-                localStorage.setItem('configid', res.data.details.configid);
-                localStorage.setItem('locationid', res.data.details.locationid);
-                localStorage.setItem('moduleid', res.data.details.moduleid);
-                localStorage.setItem('userid', res.data.details.userid);
+    try {
+      const res = await axios.post(`${process.env.REACT_APP_URL}/users/tenant/weblogin`, {
+        authname: values.username,
+        configid: 1,
+        roleid: 1,
+        password: values.password
+      });
+      console.log(res.data);
+      if (res.data.code == 200 && res.data.status == true) {
+        OpenToast('Login Successful', 'success', 1000);
+        // save to localStorage
+        const d = res.data.details;
+        localStorage.setItem('tenantname', d.tenantname);
+        localStorage.setItem('firstname', d.tenantname);
+        localStorage.setItem('authname', d.authname);
+        localStorage.setItem('appuserid', d.userid);
+        localStorage.setItem('roleid', d.roleid);
+        localStorage.setItem('tenantid', d.tenantid);
+        localStorage.setItem('applocationid', d.applocationid);
+        localStorage.setItem('fullname', d.fullname);
+        localStorage.setItem('configid', d.configid);
+        localStorage.setItem('locationid', d.locationid);
+        localStorage.setItem('moduleid', d.moduleid);
+        localStorage.setItem('userid', d.userid);
 
-                navigate('/nearle/orders');
-                setSubmitting(false);
-              } else {
-                opentoast('Login Error');
-                setLoading(false);
-                setSubmitting(false);
-              }
-            })
-            .catch((err) => {
-              console.log(err);
-
-              // setAlertmessage('Invalid Data');
-              // if(err.message == 'Network Error'){
-              opentoast(err.message);
-              // }else{
-              //     opentoast('Invalid Data');
-
-              // }
-              setLoading(false);
-              setSubmitting(false);
-              console.log(err.message);
-            });
-        } catch (err) {
-          console.log(err);
-          setLoading(false);
-          setSubmitting(false);
-        }
-      } else {
-        opentoast('Password is Incorrect');
+        setSubmitting(false);
         setLoading(false);
+
+        navigate('/nearle/orders');
+      } else {
+        OpenToast(res.data.message, 'warning', 2000);
+        setLoading(false);
+        setSubmitting(false);
       }
-    } else {
-      // let el2 = document.getElementById('toastid');
-      // el2.classList.add('d-block');
-      // el2.classList.remove('d-none');
-      setAlertmessage('Fill All required fields');
-      opentoast('Fill All required fields');
+    } catch (err) {
+      console.log(err);
+      setSubmitting(false);
       setLoading(false);
     }
   };
 
-  const opentoast = (message) => {
-    enqueueSnackbar(message, {
-      variant: 'error',
-      anchorOrigin: { vertical: 'top', horizontal: 'right' },
-      autoHideDuration: 2000
-    });
-  };
-
   return (
     <>
       {/* <AuthWrapper> */}
       <Box sx={{ minHeight: '100vh' }}>
         {loading && <Loader />}
-
         <Grid
           container
           direction="column"
@@ -208,117 +105,119 @@ const Login = () => {
             minHeight: '100vh'
           }}
         >
-          <Grid
-            item
-            xs={12}
-            // sx={{ ml: 3, mt: 3 }}
-            sx={{ ml: 3, mt: 1 }}
-          >
+          <Grid item xs={12} sx={{ ml: 3, mt: 1 }}>
             <img src={logo} alt="legendary" width="200px" />
           </Grid>
-          <Grid item xs={12}>
-            <Grid
-              item
-              xs={12}
-              container
-              justifyContent="center"
-              alignItems="center"
-              // sx={{ minHeight: { xs: 'calc(100vh - 210px)', sm: 'calc(100vh - 134px)', md: 'calc(100vh - 112px)' } }}
-              sx={{ minHeight: { xs: 'calc(100vh - 210px)', sm: 'calc(100vh - 134px)', md: 'calc(100vh - 140px)' } }}
+          <Grid
+            container
+            justifyContent="center"
+            alignItems="center"
+            sx={{
+              minHeight: {
+                xs: 'calc(100vh - 180px)',
+                sm: 'calc(100vh - 120px)',
+                md: 'calc(100vh - 130px)'
+              },
+              px: 2
+            }}
+          >
+            <Box
+              sx={{
+                width: '100%',
+                maxWidth: { xs: 380, sm: 420, md: 450 }
+              }}
             >
-              <Grid item>
-                {/* <AuthCard>{children}</AuthCard> */}
-                <Box
-                  sx={{
-                    maxWidth: { xs: 400, lg: 475 },
-                    margin: { xs: 2.5, md: 3 },
-                    '& > *': {
-                      flexGrow: 1,
-                      flexBasis: '50%'
-                    }
-                  }}
-                >
-                  <Card
-                    sx={{
-                      position: 'relative',
-                      border: '1px solid',
-                      borderRadius: 1,
-                      borderColor: theme.palette.divider,
-                      boxShadow: 'inherit',
-                      p: 2,
-                      width: '100%'
-                    }}
+              <Card
+                sx={{
+                  border: '1px solid',
+                  borderColor: theme.palette.divider,
+                  borderRadius: 1.5,
+                  boxShadow: 'inherit',
+                  p: 2.5
+                }}
+              >
+                <CardHeader
+                  title={
+                    <Typography variant="h3" color={'primary'}>
+                      Login
+                    </Typography>
+                  }
+                  sx={{ textAlign: 'center', pb: 3 }}
+                />
+                <CardContent sx={{ pt: 1 }}>
+                  <Formik
+                    initialValues={{ username: '', password: '' }}
+                    validationSchema={LoginSchema}
+                    onSubmit={(values) => loginsend(values)}
                   >
-                    <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>
-                    <CardContent>
-                      <form
-                        noValidate
-                        onSubmit={(e) => {
-                          e.preventDefault();
-                        }}
-                      >
-                        <Grid container spacing={2}>
+                    {({ values, errors, touched, handleChange, handleSubmit, handleBlur }) => (
+                      <form noValidate onSubmit={handleSubmit}>
+                        <Grid container gap={3}>
+                          {/* USERNAME */}
                           <Grid item xs={12}>
                             <TextField
-                              margin="normal"
                               fullWidth
-                              id="username1"
+                              id="username"
+                              name="username"
                               label="E-mail Address"
                               variant="outlined"
                               autoComplete="email"
-                              required
-                              onChange={usernamecheck}
-                              error={checkusername}
+                              value={values.username}
+                              onChange={handleChange}
+                              onBlur={handleBlur}
+                              error={touched.username && Boolean(errors.username)}
+                              helperText={touched.username && errors.username}
                             />
-                            <TextField
-                              margin="normal"
-                              fullWidth
-                              required
-                              autoComplete="current-password"
-                              onChange={(e) => setPassword(e.target.value)}
-                              type="password"
-                              id="password1"
-                              label="Password"
-                              variant="outlined"
-                            />
-                          </Grid>
-                          <Grid item xs={12}>
-                            <Link href="#" variant="h6">
-                              Forgot password?
-                            </Link>
                           </Grid>
 
+                          {/* PASSWORD */}
+                          <Grid item xs={12}>
+                            <TextField
+                              fullWidth
+                              id="password"
+                              name="password"
+                              label="Password"
+                              type={showPassword ? 'text' : 'password'}
+                              variant="outlined"
+                              autoComplete="current-password"
+                              value={values.password}
+                              onChange={handleChange}
+                              onBlur={handleBlur}
+                              error={touched.password && Boolean(errors.password)}
+                              helperText={touched.password && errors.password}
+                              InputProps={{
+                                endAdornment: (
+                                  <InputAdornment position="end">
+                                    <IconButton
+                                      aria-label="toggle password visibility"
+                                      onClick={() => setShowPassword((prev) => !prev)}
+                                      edge="end"
+                                    >
+                                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                                    </IconButton>
+                                  </InputAdornment>
+                                )
+                              }}
+                            />
+                          </Grid>
+
+                          {/* SUBMIT BUTTON */}
                           <Grid item xs={12}>
                             <AnimateButton>
-                              <Button
-                                disabled={submitting}
-                                onClick={() => {
-                                  loginsend();
-                                }}
-                                fullWidth
-                                size="large"
-                                type="submit"
-                                variant="contained"
-                                color="primary"
-                              >
+                              <Button disabled={submitting} fullWidth size="large" type="submit" variant="contained" color="primary">
                                 Login
                               </Button>
                             </AnimateButton>
                           </Grid>
                         </Grid>
                       </form>
-                    </CardContent>
-                  </Card>
-                </Box>
-              </Grid>
-            </Grid>
+                    )}
+                  </Formik>
+                </CardContent>
+              </Card>
+            </Box>
           </Grid>
+
           <Grid item xs={12} sx={{ mb: 1 }}>
             <Container maxWidth="xl">
               <Stack
@@ -345,8 +244,8 @@ const Login = () => {
                     variant="subtitle2"
                     color="secondary"
                     component={Link}
-                    href="#"
-                    // target="_blank"
+                    href="https://nearle.in/terms"
+                    target="_blank"
                     underline="hover"
                     textAlign="center"
                   >
@@ -356,8 +255,8 @@ const Login = () => {
                     variant="subtitle2"
                     color="secondary"
                     component={Link}
-                    href="#"
-                    // target="_blank"
+                    href="https://nearle.in/privacy"
+                    target="_blank"
                     underline="hover"
                     textAlign="center"
                   >
diff --git a/src/pages/nearle/reports/orderSummary.js b/src/pages/nearle/reports/orderSummary.js
index 96aaf84..527ce7c 100644
--- a/src/pages/nearle/reports/orderSummary.js
+++ b/src/pages/nearle/reports/orderSummary.js
@@ -108,6 +108,7 @@ export default function OrdersReport() {
   const [ridersdata, setRidersdata] = useState(null);
   const [selectedLocation, setSelectedLocation] = useState(null);
   const [locationId, setLocationId] = useState(0);
+  const [searchLocation, setSearchLocation] = useState('');
 
   useEffect(() => {
     console.log('openRow', openRow);
@@ -142,7 +143,7 @@ export default function OrdersReport() {
     isError: tenantLocationsIsError,
     error: tenantLocationsError
   } = useQuery({
-    queryKey: ['tenantlocations'],
+    queryKey: ['tenantlocations', searchLocation],
     queryFn: gettenantlocations
   });
 
@@ -725,7 +726,6 @@ export default function OrdersReport() {
                 <Typography variant="h5"> {totalDeliCancel}</Typography>
               </TableCell>
               <TableCell></TableCell>
-              <TableCell></TableCell>
               <TableCell align="right" sx={{ pr: -2 }}>
                 <Typography variant="h5">{formatNumberToRupees(total)}</Typography>
               </TableCell>{' '}
diff --git a/src/pages/nearle/reports/ordersDetails.js b/src/pages/nearle/reports/ordersDetails.js
index d4ddb41..344832c 100644
--- a/src/pages/nearle/reports/ordersDetails.js
+++ b/src/pages/nearle/reports/ordersDetails.js
@@ -34,7 +34,8 @@ import {
   Badge,
   Autocomplete,
   TextField,
-  CircularProgress
+  CircularProgress,
+  Box
 } from '@mui/material';
 import { SearchOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
@@ -105,7 +106,8 @@ export default function OrdersDetails() {
     { id: 4, status: 'Picked', statusLow: 'picked' },
     { id: 5, status: 'Active', statusLow: 'active' },
     { id: 6, status: 'Delivered', statusLow: 'delivered' },
-    { id: 7, status: 'Cancelled', statusLow: 'cancelled' }
+    { id: 7, status: 'Skipped', statusLow: 'skipped' },
+    { id: 8, status: 'Cancelled', statusLow: 'cancelled' }
   ];
 
   // ============================================= || gettenantlocations (branches) || =============================================
@@ -405,12 +407,11 @@ export default function OrdersDetails() {
             ) : (
               <Autocomplete
                 fullWidth
-                // disabled={!isAppLocation || !isClient}
+                sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
                 id="combo-box-demo"
                 options={tenantLocations || []}
                 getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
                 renderInput={(params) => <TextField {...params} label={locoName} color="primary" />}
-                sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
                 onChange={(event, value, reason) => {
                   if (value) {
                     console.log('Business Locations', value);
@@ -426,8 +427,8 @@ export default function OrdersDetails() {
             )}
 
             <Autocomplete
+              fullWidth
               sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
-              disablePortal
               id="combo-box-demo"
               options={status}
               getOptionLabel={(option) => `${option.status}`}
@@ -575,12 +576,17 @@ export default function OrdersDetails() {
                         <Typography variant="body2" noWrap>
                           {row.orderid}
                         </Typography>
-                        <Typography noWrap sx={{ fontSize: '11px' }}>
-                          {dayjs(row.orderdate).utc().format('DD/MM/YYYY')}
-                        </Typography>
-                        <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
-                          {dayjs(row.orderdate).utc().format('hh:mm A')}
-                        </Typography>
+                        <Tooltip title="Delivery Date">
+                          <Box sx={{ cursor: 'pointer' }}>
+                            <Typography noWrap sx={{ fontSize: '11px' }}>
+                              {dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
+                            </Typography>
+
+                            <Typography noWrap sx={{ fontSize: '11px' }}>
+                              {dayjs(row.deliverydate).utc().format('hh:mm A')}
+                            </Typography>
+                          </Box>
+                        </Tooltip>
                       </TableCell>
                       <TableCell align="left">
                         <Stack direction={'row'} spacing={1}>
@@ -626,6 +632,7 @@ export default function OrdersDetails() {
                           {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 === 'skipped' && <Chip label="Skipped" color="secondary" size="small" sx={{ minWidth: 80 }} />}
 
                           {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" sx={{ minWidth: 80 }} />}
                         </Stack>