jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Login Page UI and minor change in notification feature

Browse source
This commit is contained in:
jaanvi 2025-02-20 18:33:22 +05:30
parent cadad61747
commit 709d9e17fc
8 changed files with 413 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/mainPageLogo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 566 KiB

3
src/components/AppNavbar/index.tsx
View file

@ -68,7 +68,7 @@ export default function AppNavbar() {
<Typography
variant="h4"
component="h1"
sx={{ color: "text.primary" }}
sx={{ color: "#202020" }}
>
Dashboard
</Typography>
@ -81,7 +81,6 @@ export default function AppNavbar() {
<SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
</Stack>
</Toolbar>
</AppBar>
);
}

9
src/components/Header/index.tsx
View file

@ -45,14 +45,19 @@ export default function Header() {
sx={{
p: 2,
position: "absolute",
top: "55px", // Adjust this value according to your AppBar height
top: "55px",
right: "66px",
bgcolor: "lightblue",
bgcolor: "background.paper",
boxShadow: 1,
borderRadius: 1,
zIndex: 1300,
cursor: "pointer"
}}
>
{/* <Typography variant="h6" color="text.primary">
Notifications
</Typography> */}
<Typography variant="body2" color="text.secondary">
No notifications yet
</Typography>

8
src/components/MenuContent/index.tsx
View file

@ -10,11 +10,13 @@ import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import { Link, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/store/store";
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
const baseMenuItems = [
{
text: "Home",
icon: <HomeRoundedIcon />,
text: "Dashboard",
icon: <DashboardOutlinedIcon />,
url: "/panel/dashboard",
},
// {
@ -32,7 +34,7 @@ const baseMenuItems = [
const superAdminOnlyItems = [
{
text: "Admin List",
icon: <FormatListBulletedIcon />,
icon: <ManageAccountsOutlinedIcon />,
url: "/panel/adminlist",
},
];

197
src/components/OptionsMenu/index.tsx
View file

@ -13,108 +13,107 @@ import MenuButton from "../MenuButton";
import { Avatar } from "@mui/material";
import { useNavigate } from "react-router-dom";
import Logout from "../LogOutFunction/LogOutFunction";
const MenuItem = styled(MuiMenuItem)({
margin: "2px 0",
margin: "2px 0",
});
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event?.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
//Eknoor singh and jaanvi
//date:- 12-Feb-2025
//Made a navigation page for the profile page
const navigate = useNavigate();
const handleProfile = () => {
navigate("/panel/profile");
};
//jaanvi
//date:- 13-Feb-2025
return (
<React.Fragment>
<MenuButton
aria-label="Open menu"
onClick={handleClick}
sx={{ borderColor: "transparent" }}
>
{avatar ? (
<MoreVertRoundedIcon />
) : (
<Avatar
sizes="small"
alt="Riley Carter"
src="/static/images/avatar/7.jpg"
sx={{ width: 36, height: 36 }}
/>
)}
</MenuButton>
<Menu
anchorEl={anchorEl}
id="menu"
open={open}
onClose={handleClose}
onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
},
}}
>
<MenuItem onClick={handleProfile}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<Divider />
<MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider />
<MenuItem
onClick={handleClose}
sx={{
[`& .${listItemIconClasses.root}`]: {
ml: "auto",
minWidth: 0,
},
}}
>
{/* //Eknoor singh and jaanvi
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event?.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
//Eknoor singh and jaanvi
//date:- 12-Feb-2025
//Made a navigation page for the profile page
const navigate = useNavigate();
const handleProfile = () => {
navigate("/panel/profile");
};
//jaanvi
//date:- 13-Feb-2025
return (
<React.Fragment>
<MenuButton
aria-label="Open menu"
onClick={handleClick}
sx={{ borderColor: "transparent" }}
>
{avatar ? (
<MoreVertRoundedIcon />
) : (
<Avatar
sizes="small"
alt="Super Admin"
src="/static/images/avatar/7.jpg"
sx={{ width: 36, height: 36 }}
/>
)}
</MenuButton>
<Menu
anchorEl={anchorEl}
id="menu"
open={open}
onClose={handleClose}
onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
},
}}
>
<MenuItem onClick={handleProfile}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<Divider />
<MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider />
<MenuItem
onClick={handleClose}
sx={{
[`& .${listItemIconClasses.root}`]: {
ml: "auto",
minWidth: 0,
},
}}
>
{/* //Eknoor singh and jaanvi
//date:- 13-Feb-2025
//Implemented logout functionality which was static previously */}
<ListItemText
onClick={(e) => {
e.stopPropagation();
setLogoutModal(true);
}}
>
Logout
</ListItemText>
<Logout
setLogoutModal={setLogoutModal}
logoutModal={logoutModal}
/>
<ListItemIcon>
<LogoutRoundedIcon fontSize="small" />
</ListItemIcon>
</MenuItem>
</Menu>
</React.Fragment>
);
<ListItemText
onClick={(e) => {
e.stopPropagation();
setLogoutModal(true);
}}
>
Logout
</ListItemText>
<Logout
setLogoutModal={setLogoutModal}
logoutModal={logoutModal}
/>
<ListItemIcon>
<LogoutRoundedIcon fontSize="small" />
</ListItemIcon>
</MenuItem>
</Menu>
</React.Fragment>
);
}

15
src/components/SideMenuMobile/index.tsx
View file

@ -11,6 +11,9 @@ import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
import MenuButton from "../MenuButton";
import MenuContent from "../MenuContent";
import CardAlert from "../CardAlert/CardAlert";
import { AppDispatch, RootState } from "../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
interface SideMenuMobileProps {
open: boolean | undefined;
@ -21,6 +24,12 @@ export default function SideMenuMobile({
open,
toggleDrawer,
}: SideMenuMobileProps) {
const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector((state: RootState) => state?.profileReducer);
React.useEffect(() => {
dispatch(fetchAdminProfile());
}, [dispatch]);
return (
<Drawer
anchor="right"
@ -47,12 +56,12 @@ export default function SideMenuMobile({
>
<Avatar
sizes="small"
alt="Riley Carter"
alt={user?.name || "User Avatar"}
src="/static/images/avatar/7.jpg"
sx={{ width: 24, height: 24 }}
/>
<Typography component="p" variant="h6">
Riley Carter
Super Admin
</Typography>
</Stack>
<MenuButton showBadge>
@ -61,7 +70,7 @@ export default function SideMenuMobile({
</Stack>
<Divider />
<Stack sx={{ flexGrow: 1 }}>
<MenuContent />
<MenuContent hidden={false} />
<Divider />
</Stack>
<CardAlert />

438
src/pages/Auth/Login/index.tsx
View file

@ -1,18 +1,21 @@
import * as React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Checkbox from "@mui/material/Checkbox";
import CssBaseline from "@mui/material/CssBaseline";
import FormControlLabel from "@mui/material/FormControlLabel";
import Divider from "@mui/material/Divider";
import FormLabel from "@mui/material/FormLabel";
import FormControl from "@mui/material/FormControl";
import Link from "@mui/material/Link";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import MuiCard from "@mui/material/Card";
import { styled } from "@mui/material/styles";
import {
Box,
Button,
Checkbox,
CssBaseline,
FormControlLabel,
FormLabel,
FormControl,
TextField,
Typography,
Stack,
Card as MuiCard,
Grid,
IconButton,
Link,
} from "@mui/material";
import { styled, useTheme } from "@mui/material/styles";
import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { useDispatch } from "react-redux";
import { loginUser } from "../../../redux/slices/authSlice.ts";
@ -21,7 +24,10 @@ import AppTheme from "../../../shared-theme/AppTheme.tsx";
import ForgotPassword from "./ForgotPassword.tsx";
import { toast } from "sonner";
import { useNavigate } from "react-router-dom";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { lime, purple } from "@mui/material/colors";
const Card = styled(MuiCard)(({ theme }) => ({
display: "flex",
flexDirection: "column",
@ -29,25 +35,31 @@ const Card = styled(MuiCard)(({ theme }) => ({
width: "100%",
padding: theme.spacing(4),
gap: theme.spacing(2),
margin: "auto",
margin: "16px",
backgroundColor: "#1E1F1F",
[theme.breakpoints.up("sm")]: {
maxWidth: "450px",
},
boxShadow:
"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
...theme.applyStyles("dark", {
boxShadow:
"hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
}),
// boxShadow:
// "hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
// ...theme.applyStyles("dark", {
// boxShadow:
// "hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
// }),
}));
const theme = createTheme({
palette: {
primary: lime,
secondary: purple,
},
});
const SignInContainer = styled(Stack)(({ theme }) => ({
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
minHeight: "100%",
padding: theme.spacing(2),
[theme.breakpoints.up("sm")]: {
padding: theme.spacing(4),
},
// padding: theme.spacing(2),
// [theme.breakpoints.up("sm")]: {
// padding: theme.spacing(4),
// },
"&::before": {
content: '""',
display: "block",
@ -69,6 +81,9 @@ interface ILoginForm {
}
export default function Login(props: { disableCustomTheme?: boolean }) {
const [open, setOpen] = React.useState(false);
console.log("theme", theme.palette.background);
const [showPassword, setShowPassword] = React.useState(false);
const {
control,
handleSubmit,
@ -98,130 +113,249 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
};
return (
<AppTheme {...props}>
<CssBaseline enableColorScheme />
<SignInContainer direction="column" justifyContent="space-between">
<ColorModeSelect
<ThemeProvider theme={theme}>
<AppTheme {...props}>
<CssBaseline enableColorScheme />
<SignInContainer
direction="column"
justifyContent="space-between"
>
{/* <ColorModeSelect
sx={{ position: "fixed", top: "1rem", right: "1rem" }}
/>
<Card variant="outlined">
{/* <SitemarkIcon /> */}
Digi-EV
<Typography
component="h1"
variant="h4"
sx={{
width: "100%",
fontSize: "clamp(2rem, 10vw, 2.15rem)",
}}
>
Sign in
</Typography>
<Box
component="form"
onSubmit={handleSubmit(onSubmit)}
noValidate
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
gap: 2,
}}
>
<FormControl>
<FormLabel htmlFor="email">Email</FormLabel>
<Controller
name="email"
control={control}
defaultValue=""
rules={{
required: "Email is required",
pattern: {
value: /\S+@\S+\.\S+/,
message:
"Please enter a valid email address.",
},
}}
render={({ field }) => (
<TextField
{...field}
error={!!errors.email}
helperText={errors.email?.message}
id="email"
type="email"
placeholder="your@email.com"
autoComplete="email"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.email ? "error" : "primary"
}
/>
)}
/>
</FormControl>
/> */}
<FormControl>
<FormLabel htmlFor="password">Password</FormLabel>
<Controller
name="password"
control={control}
defaultValue=""
rules={{
required: "Password is required",
minLength: {
value: 6,
message:
"Password must be at least 6 characters long.",
},
}}
render={({ field }) => (
<TextField
{...field}
error={!!errors.password}
helperText={errors.password?.message}
name="password"
placeholder="••••••"
type="password"
id="password"
autoComplete="current-password"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.password
? "error"
: "primary"
}
/>
)}
/>
</FormControl>
<FormControlLabel
control={
<Checkbox value="remember" color="primary" />
}
label="Remember me"
<Grid container sx={{ height: "100vh" }}>
<Grid
item
xs={7}
sx={{
background: `url('/mainPageLogo.png') center/cover no-repeat`,
}}
/>
<ForgotPassword open={open} handleClose={handleClose} />
<Button type="submit" fullWidth variant="contained">
Sign in
</Button>
{/* <Link
component="button"
type="button"
onClick={handleClickOpen}
variant="body2"
sx={{ alignSelf: "center" }}
<Grid
item
xs={5}
sx={{
backgroundColor: "black",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
Forgot your password?
</Link> */}
</Box>
{/* <Divider>or</Divider>
<Typography
variant="h3"
sx={{
color: "white",
textAlign: "center",
}}
>
Welcome Back!
</Typography>
<Card variant="outlined">
{/* <SitemarkIcon /> */}
<Box
component="form"
onSubmit={handleSubmit(onSubmit)}
noValidate
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
gap: 2,
}}
>
<Typography
component="h1"
variant="h4"
sx={{
width: "100%",
textAlign: "center",
}}
>
Login
</Typography>
<Typography
component="h6"
variant="subtitle2"
sx={{
width: "100%",
textAlign: "center",
}}
>
Log in with your email and password
</Typography>
<FormControl>
<FormLabel
htmlFor="email"
sx={{ fontSize: "1rem" }}
>
Email
</FormLabel>
<Controller
name="email"
control={control}
defaultValue=""
rules={{
required: "Email is required",
pattern: {
value: /\S+@\S+\.\S+/,
message:
"Please enter a valid email address.",
},
}}
render={({ field }) => (
<TextField
{...field}
error={!!errors.email}
helperText={
errors.email?.message
}
id="email"
type="email"
placeholder="Email"
autoComplete="email"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.email
? "error"
: "primary"
}
/>
)}
/>
</FormControl>
<FormControl>
<FormLabel
htmlFor="password"
sx={{ fontSize: "1rem" }}
>
Password
</FormLabel>
<Controller
name="password"
control={control}
defaultValue=""
rules={{
required:
"Password is required",
minLength: {
value: 6,
message:
"Password must be at least 6 characters long.",
},
}}
render={({ field }) => (
<Box
sx={{
position: "relative",
}}
>
<TextField
{...field}
error={
!!errors.password
}
helperText={
errors.password
?.message
}
name="password"
placeholder="Password"
type="password"
id="password"
autoComplete="current-password"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.password
? "error"
: "primary"
}
/>
<IconButton
sx={{
position:
"absolute",
top: "50%",
right: "10px",
background: "none",
borderColor:
"transparent",
transform:
"translateY(-50%)",
"&:hover": {
backgroundColor:
"transparent", // Darker shade on hover
borderColor:
"transparent",
},
}}
onClick={() =>
setShowPassword(
(prev) => !prev
)
}
>
{showPassword ? (
<VisibilityOff />
) : (
<Visibility />
)}
</IconButton>
</Box>
)}
/>
</FormControl>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
}}
>
<FormControlLabel
control={
<Checkbox
value="remember"
color="primary"
/>
}
label="Remember me"
/>
<Link
component="button"
type="button"
onClick={handleClickOpen}
variant="body2"
sx={{ alignSelf: "center" }}
>
Forgot your password?
</Link>
</Box>
<ForgotPassword
open={open}
handleClose={handleClose}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="secondary"
>
Sign in
</Button>
{/* <Divider>or</Divider>
<Box
sx={{
display: "flex",
@ -240,8 +374,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
</Link>
</Typography>
</Box> */}
</Card>
</SignInContainer>
</AppTheme>
</Box>
</Card>
</Grid>
</Grid>
</SignInContainer>
</AppTheme>
</ThemeProvider>
);
}

3
src/pages/Dashboard/index.tsx
View file

@ -12,6 +12,7 @@ import {
import DashboardLayout from '../../layouts/DashboardLayout';
import AppTheme from '../../shared-theme/AppTheme';
import MainGrid from '../../components/MainGrid';
import AdminList from '../AdminList';
const xThemeComponents = {
...chartsCustomizations,
@ -29,7 +30,7 @@ const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) =>
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
<CssBaseline enableColorScheme />
{!disableCustomTheme ? (
<MainGrid />
<><MainGrid /><AdminList /></>
) : (
<Box
sx={{