customers
This commit is contained in:
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -7,13 +7,13 @@ const Footer = () => (
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: '24px 16px 0px', mt: 'auto' }}>
|
||||
<Typography variant="caption">© 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -214,7 +214,7 @@ const HeaderContent = () => {
|
||||
<ListItemButton
|
||||
selected={location.pathname === 'nearle/customers/create'}
|
||||
onClick={() => {
|
||||
navigate('nearle/customers/create');
|
||||
navigate('nearle/customers');
|
||||
handleClickAway();
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -58,7 +58,7 @@ const MainLayout = () => {
|
||||
>
|
||||
{/* <Breadcrumbs navigation={navigation} title titleBottom card={false} divider={false} /> */}
|
||||
<Outlet />
|
||||
<Footer />
|
||||
{/* <Footer /> */}
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user