customers

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>

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>

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
+  });
+};

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>
         }

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.background.paper,
-    backgroundColor: theme.palette.primary.main,
     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 ? (
+  const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : borderIcon;
-    <Icon
+  const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
-      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 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={() => {
+            onClick={handleClick}
-              handleClick();
-              if (open == true) {
-                setOpen(false);
-              }
-            }}
             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: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.light'
-                  bgcolor: '#7b1fa2'
                 },
                 '&.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 ? 'primary.main' : 'white',
-                  // color: selected === menu.id ? textColor : textColor,
-                  // bgcolor:'white',
-                  color: '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,
+                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
-                      color: theme.palette.primary.main,
                       '&: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
+                  <Typography variant="h6" color={selected === menu.id ? 'white' : 'white'}>
-                    variant="h6"
-                    // color={selected === menu.id ? 'primary' : textColor}
-                    // color={'white'}
-                    color={selected === menu.id ? textColor : textColor}
-                  >
                     {menu.title}
                   </Typography>
                 }
@@ -326,22 +296,9 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             )}
             {(drawerOpen || (!drawerOpen && level !== 1)) &&
               (miniMenuOpened || open ? (
-                <UpOutlined
+                <UpOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: theme.palette.primary.main }} />
-                  style={{
-                    fontSize: '0.625rem',
-                    marginLeft: 1,
-                    //  color: theme.palette.primary.main
-                    color: 'white'
-                  }}
-                />
               ) : (
-                <DownOutlined
+                <DownOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: 'white' }} />
-                  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}`,
+                        border: `1px solid ${theme.palette.primary.main}`,
-                        background: 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
+                <ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36, color: theme.palette.secondary.dark }}>
-                  sx={{
-                    my: 'auto',
-                    minWidth: !menu.icon ? 18 : 36
-                    //  color: theme.palette.secondary.dark
-                    // color:'white'
-                  }}
-                >
                   {menuIcon}
                 </ListItemIcon>
               )}
@@ -436,12 +386,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               )}
               <ListItemText
                 primary={
-                  <Typography
+                  <Typography variant="body1" color="inherit" sx={{ my: 'auto' }}>
-                    variant="body1"
-                    // color="inherit"
-                    // color="white"
-                    sx={{ my: 'auto' }}
-                  >
                     {menu.title}
                   </Typography>
                 }

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: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.light'
-                bgcolor: '#7b1fa2'
               },
               '&.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 ? iconSelectedColor : 'white',
-                  color: isSelected ? '#fff' : iconSelectedColor
-                },
-                color: isSelected ? iconSelectedColor : textColor,
-
                 ...(!drawerOpen && {
+                  // borderRadius: 1.5,
                   width: 36,
                   height: 36,
                   alignItems: 'center',
-                  justifyContent: 'center',
+                  justifyContent: 'center'
-                  '&:hover': {
+                  // '&:hover': {
-                    // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter'
+                  //   bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'primary.lighter'
-                    // bgcolor: theme.palette.primary.light
+                  // }
-                  }
                 }),
                 ...(!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'
+                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
-                    },
+                    }
-                    borderRadius: 2
                   })
               }}
             >
@@ -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,
+                    ml: 1,
-                    bgcolor: isSelected && theme.palette.primary.lighter,
+                    color: isSelected ? theme.palette.primary.main : 'white'
-                    padding: isSelected && !drawerOpen ? 0.8 : 'none',
-                    borderRadius: isSelected && !drawerOpen ? 2 : 'none',
-                    ml: isSelected && !drawerOpen ? 0.5 : 'none'
                   }}
                 >
                   {item.title}

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>

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)}>
+      <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)}>
         <ListItemIcon>
           <UserOutlined />
         </ListItemIcon>
         <ListItemText primary="View Profile" />
       </ListItemButton>
 
-      {/* <ListItemButton selected={selectedIndex === 1} onClick={(event) => handleListItemClick(event, 2)}>
+      <ListItemButton selected={selectedIndex === 1} onClick={handleLogout}>
-        <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')
-        // }}
-      >
         <ListItemIcon>
           <LogoutOutlined />
         </ListItemIcon>

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();
                         }}
                       >

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>

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',

src/pages/nearle/accountsettings.js

@@ -1,199 +1,65 @@
-import {
+import { Grid, List, ListItem, Stack, Typography, useMediaQuery } from '@mui/material';
-    Box, Tab, Tabs,
-    Chip,
-    Divider,
-    Grid,
-    Link,
-    List,
-    ListItem,
-    ListItemIcon,
-    ListItemSecondaryAction,
-    Stack,
-    Typography,
-    useMediaQuery,
-    Avatar,
-
-} 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 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 [loading, setLoading] = useState(false);
 
   useEffect(() => {
     if (localStorage.getItem('tenantid')) {
       fetchaccount(localStorage.getItem('tenantid'));
-
     }
   }, []);
 
   const fetchaccount = async (tid) => {
-        setLoading(true)
+    setLoading(true);
-        await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
+    await axios
+      .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
       .then((res) => {
-                console.log(res)
+        console.log(res);
         if (res.data.status) {
           setInfo(res.data.details);
         }
-                setLoading(false)
+        setLoading(false);
-            }).catch((err) => {
+      })
-                console.log(err)
+      .catch((err) => {
+        console.log(err);
         enqueueSnackbar(err.message, {
-                    variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
+          variant: 'error',
+          anchorOrigin: { vertical: 'top', horizontal: 'right' },
           autoHideDuration: 2000
-                })
+        });
-                setLoading(false)
+        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 
+          <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}>
+                  <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} md={6}>
+                  <Grid item xs={12} sm={6}>
-                                                    
                     <Stack spacing={0.5}>
                       <Typography color="secondary">Company Name</Typography>
                       <Typography>{info.companyname || ''}</Typography>
@@ -203,13 +69,13 @@ const Accountsettings = () => {
               </ListItem>
               <ListItem divider={!matchDownMD}>
                 <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
+                  <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} md={6}>
+                  <Grid item xs={12} sm={6}>
                     <Stack spacing={0.5}>
                       <Typography color="secondary">Info</Typography>
                       <Typography>{info.info || ''}</Typography>
@@ -219,15 +85,13 @@ const Accountsettings = () => {
               </ListItem>
               <ListItem divider={!matchDownMD}>
                 <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
+                  <Grid item xs={12} sm={6}>
                     <Stack spacing={0.5}>
                       <Typography color="secondary">Phone</Typography>
-                                                        <Typography>
+                      <Typography>{info.primarycontact || ''}</Typography>
-                                                            {info.primarycontact || ''}
-                                                        </Typography>
                     </Stack>
                   </Grid>
-                                                <Grid item xs={12} md={6}>
+                  <Grid item xs={12} sm={6}>
                     <Stack spacing={0.5}>
                       <Typography color="secondary">State</Typography>
                       <Typography>{info.state || ''}</Typography>
@@ -238,13 +102,13 @@ const Accountsettings = () => {
 
               <ListItem divider={!matchDownMD}>
                 <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
+                  <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} md={6}>
+                  <Grid item xs={12} sm={6}>
                     <Stack spacing={0.5}>
                       <Typography color="secondary">City</Typography>
                       <Typography>{info.city || ''}</Typography>
@@ -254,13 +118,13 @@ const Accountsettings = () => {
               </ListItem>
               <ListItem divider={!matchDownMD}>
                 <Grid container spacing={3}>
-                                                <Grid item xs={12} md={6}>
+                  <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} md={6}>
+                  <Grid item xs={12} sm={6}>
                     <Stack spacing={0.5}>
                       <Typography color="secondary">Zip Code</Typography>
                       <Typography>{info.postcode || ''}</Typography>
@@ -277,22 +141,11 @@ const Accountsettings = () => {
             </List>
           </MainCard>
         </Grid>
-                            {/* <Grid item xs={12}>
+      </Grid>
-                                <MainCard title="Info">
-                                    <Typography color="secondary">
-                                      {info.info || ''}
-                                    </Typography>
-                                </MainCard>
-                            </Grid> */}
 
-                        </Grid>
+      <Footer />
-                    </Grid>
-                </Grid>
-            </Box>
-        </MainCard>
-        </Grid>
-        </Grid>
     </>
-}
+  );
+};
 
 export default Accountsettings;

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;

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 }}>
+      <TitleCard
-        <Stack direction="row" justifyContent="space-between" alignItems="center">
+        title={'Create Customer'}
-          <Typography variant="h3">Create Customer</Typography>
+        secondary={
-        </Stack>
+          <Button variant="contained" color="secondary" onClick={() => navigate('/nearle/customers')}>
-      </Grid>
+            Back
+          </Button>
+        }
+      />
+
       <MainCard>
         <Grid container spacing={3}>
           <Grid item xs={12}>

src/pages/nearle/locations/ResponsiveLocationDrawer.js

@@ -150,7 +150,7 @@ const ResponsiveLocationDrawer = () => {
       currentStatus,
       startdate,
       enddate,
-      debouncedSearchLocation,
+      debouncedSearchword,
       rowsPerPage
     ],
     queryFn: fetchOrders1,
@@ -302,7 +302,7 @@ const ResponsiveLocationDrawer = () => {
               sx={{
                 width: 'auto',
                 height: 60,
-                bgcolor: theme.palette.primary.lighter,
+                bgcolor: 'white',
 
                 '& .MuiOutlinedInput-notchedOutline': {
                   border: 'none',
@@ -312,7 +312,7 @@ const ResponsiveLocationDrawer = () => {
               }}
             />
           </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,
+                    bgcolor: 'white',
-                    '& .MuiOutlinedInput-notchedOutline': {
+                    maxWidth: 800,
-                      border: 'none',
+                    borderRadius: 1
-                      borderBottom: '1px solid ',
+                    // '& .MuiOutlinedInput-notchedOutline': {
-                      borderColor: theme.palette.secondary.light
+                    //   border: 'none'
-                    }
+                    // }
                   }}
                 />
               </Stack>

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,173 +23,73 @@ 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 [showPassword, setShowPassword] = useState(false);
-  const [password, setPassword] = useState('');
-  const [alertmessage, setAlertmessage] = useState('');
-  const [checkusername, setCheckusername] = useState(false);
-  // const [toast, setToast] = 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 (
+    if (localStorage.getItem('authname')) {
-      localStorage.getItem('authname')
-      //  || localStorage.getItem("appuserid")
-    ) {
       navigate('/nearle/orders');
     }
-
-    // console.log(alertmessage)
   }, []);
 
-  const usernamecheck = async (e) => {
+  const loginsend = async (values) => {
-    e.preventDefault();
+    console.log('values', values);
-    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();
     setLoading(true);
-
-    if (password && username) {
-      if (password == 'admin') {
     setSubmitting(true);
+
     try {
-          await axios
+      const res = await axios.post(`${process.env.REACT_APP_URL}/users/tenant/weblogin`, {
-            // .post(`${process.env.REACT_APP_URL}/users/login`, {
+        authname: values.username,
-            .post(`${process.env.REACT_APP_URL}/users/tenant/login`, {
-              authname: username,
         configid: 1,
-              password: password
+        roleid: 1,
-            })
+        password: values.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('');
+      console.log(res.data);
-                setPassword('');
+      if (res.data.code == 200 && res.data.status == true) {
-                localStorage.setItem('tenantname', res.data.details.tenantname);
+        OpenToast('Login Successful', 'success', 1000);
-                localStorage.setItem('firstname', res.data.details.tenantname);
+        // save to localStorage
-                localStorage.setItem('authname', res.data.details.authname);
+        const d = res.data.details;
-                localStorage.setItem('appuserid', res.data.details.userid);
+        localStorage.setItem('tenantname', d.tenantname);
-                localStorage.setItem('roleid', res.data.details.roleid);
+        localStorage.setItem('firstname', d.tenantname);
-                localStorage.setItem('tenantid', res.data.details.tenantid);
+        localStorage.setItem('authname', d.authname);
-                localStorage.setItem('applocationid', res.data.details.applocationid);
+        localStorage.setItem('appuserid', d.userid);
-                localStorage.setItem('fullname', res.data.details.fullname);
+        localStorage.setItem('roleid', d.roleid);
-                localStorage.setItem('configid', res.data.details.configid);
+        localStorage.setItem('tenantid', d.tenantid);
-                localStorage.setItem('locationid', res.data.details.locationid);
+        localStorage.setItem('applocationid', d.applocationid);
-                localStorage.setItem('moduleid', res.data.details.moduleid);
+        localStorage.setItem('fullname', d.fullname);
-                localStorage.setItem('userid', res.data.details.userid);
+        localStorage.setItem('configid', d.configid);
+        localStorage.setItem('locationid', d.locationid);
+        localStorage.setItem('moduleid', d.moduleid);
+        localStorage.setItem('userid', d.userid);
+
+        setSubmitting(false);
+        setLoading(false);
 
         navigate('/nearle/orders');
-                setSubmitting(false);
       } else {
-                opentoast('Login Error');
+        OpenToast(res.data.message, 'warning', 2000);
         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');
       setLoading(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');
-      setLoading(false);
-    }
-  };
-
-  const opentoast = (message) => {
-    enqueueSnackbar(message, {
-      variant: 'error',
-      anchorOrigin: { vertical: 'top', horizontal: 'right' },
-      autoHideDuration: 2000
-    });
   };
 
   return (
@@ -199,7 +97,6 @@ const Login = () => {
       {/* <AuthWrapper> */}
       <Box sx={{ minHeight: '100vh' }}>
         {loading && <Loader />}
-
         <Grid
           container
           direction="column"
@@ -208,117 +105,119 @@ const Login = () => {
             minHeight: '100vh'
           }}
         >
-          <Grid
+          <Grid item xs={12} sx={{ ml: 3, mt: 1 }}>
-            item
-            xs={12}
-            // sx={{ ml: 3, mt: 3 }}
-            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={{
-              sx={{ minHeight: { xs: 'calc(100vh - 210px)', sm: 'calc(100vh - 134px)', md: 'calc(100vh - 140px)' } }}
+              minHeight: {
+                xs: 'calc(100vh - 180px)',
+                sm: 'calc(100vh - 120px)',
+                md: 'calc(100vh - 130px)'
+              },
+              px: 2
+            }}
           >
-              <Grid item>
-                {/* <AuthCard>{children}</AuthCard> */}
             <Box
               sx={{
-                    maxWidth: { xs: 400, lg: 475 },
+                width: '100%',
-                    margin: { xs: 2.5, md: 3 },
+                maxWidth: { xs: 380, sm: 420, md: 450 }
-                    '& > *': {
-                      flexGrow: 1,
-                      flexBasis: '50%'
-                    }
               }}
             >
               <Card
                 sx={{
-                      position: 'relative',
                   border: '1px solid',
-                      borderRadius: 1,
                   borderColor: theme.palette.divider,
+                  borderRadius: 1.5,
                   boxShadow: 'inherit',
-                      p: 2,
+                  p: 2.5
-                      width: '100%'
                 }}
               >
-                    <Grid container spacing={3}>
+                <CardHeader
-                      <Grid item xs={12}>
+                  title={
-                        <Stack direction="row" justifyContent="flex-start" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+                    <Typography variant="h3" color={'primary'}>
-                          <CardHeader title={<Typography variant="h3">Login</Typography>} />
+                      Login
-                        </Stack>
+                    </Typography>
-                      </Grid>
+                  }
-                    </Grid>
+                  sx={{ textAlign: 'center', pb: 3 }}
-                    <CardContent>
+                />
-                      <form
+                <CardContent sx={{ pt: 1 }}>
-                        noValidate
+                  <Formik
-                        onSubmit={(e) => {
+                    initialValues={{ username: '', password: '' }}
-                          e.preventDefault();
+                    validationSchema={LoginSchema}
-                        }}
+                    onSubmit={(values) => loginsend(values)}
                   >
-                        <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
+                              value={values.username}
-                              onChange={usernamecheck}
+                              onChange={handleChange}
-                              error={checkusername}
+                              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
+                              <Button disabled={submitting} fullWidth size="large" type="submit" variant="contained" color="primary">
-                                disabled={submitting}
-                                onClick={() => {
-                                  loginsend();
-                                }}
-                                fullWidth
-                                size="large"
-                                type="submit"
-                                variant="contained"
-                                color="primary"
-                              >
                                 Login
                               </Button>
                             </AnimateButton>
                           </Grid>
                         </Grid>
                       </form>
+                    )}
+                  </Formik>
                 </CardContent>
               </Card>
             </Box>
           </Grid>
-            </Grid>
+
-          </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="#"
+                    href="https://nearle.in/terms"
-                    // target="_blank"
+                    target="_blank"
                     underline="hover"
                     textAlign="center"
                   >
@@ -356,8 +255,8 @@ const Login = () => {
                     variant="subtitle2"
                     color="secondary"
                     component={Link}
-                    href="#"
+                    href="https://nearle.in/privacy"
-                    // target="_blank"
+                    target="_blank"
                     underline="hover"
                     textAlign="center"
                   >

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>{' '}

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>
+                        <Tooltip title="Delivery Date">
+                          <Box sx={{ cursor: 'pointer' }}>
                             <Typography noWrap sx={{ fontSize: '11px' }}>
-                          {dayjs(row.orderdate).utc().format('DD/MM/YYYY')}
+                              {dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
                             </Typography>
-                        <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
+
-                          {dayjs(row.orderdate).utc().format('hh:mm A')}
+                            <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>