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

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

@ -45,14 +45,19 @@ export default function Header() {
sx={{ sx={{
p: 2, p: 2,
position: "absolute", position: "absolute",
top: "55px", // Adjust this value according to your AppBar height top: "55px",
right: "66px", right: "66px",
bgcolor: "lightblue", bgcolor: "background.paper",
boxShadow: 1, boxShadow: 1,
borderRadius: 1, borderRadius: 1,
zIndex: 1300, zIndex: 1300,
cursor: "pointer"
}} }}
> >
{/* <Typography variant="h6" color="text.primary">
Notifications
</Typography> */}
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
No notifications yet No notifications yet
</Typography> </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 { Link, useLocation } from "react-router-dom";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../redux/store/store"; import { RootState } from "../../redux/store/store";
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
const baseMenuItems = [ const baseMenuItems = [
{ {
text: "Home", text: "Dashboard",
icon: <HomeRoundedIcon />, icon: <DashboardOutlinedIcon />,
url: "/panel/dashboard", url: "/panel/dashboard",
}, },
// { // {
@ -32,7 +34,7 @@ const baseMenuItems = [
const superAdminOnlyItems = [ const superAdminOnlyItems = [
{ {
text: "Admin List", text: "Admin List",
icon: <FormatListBulletedIcon />, icon: <ManageAccountsOutlinedIcon />,
url: "/panel/adminlist", 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 { Avatar } from "@mui/material";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Logout from "../LogOutFunction/LogOutFunction"; import Logout from "../LogOutFunction/LogOutFunction";
const MenuItem = styled(MuiMenuItem)({ const MenuItem = styled(MuiMenuItem)({
margin: "2px 0", margin: "2px 0",
}); });
export default function OptionsMenu({ avatar }: { avatar?: boolean }) { export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [logoutModal, setLogoutModal] = React.useState<boolean>(false); const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => { const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event?.currentTarget); setAnchorEl(event?.currentTarget);
}; };
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
//Eknoor singh and jaanvi //Eknoor singh and jaanvi
//date:- 12-Feb-2025 //date:- 12-Feb-2025
//Made a navigation page for the profile page //Made a navigation page for the profile page
const navigate = useNavigate(); const navigate = useNavigate();
const handleProfile = () => { const handleProfile = () => {
navigate("/panel/profile"); navigate("/panel/profile");
}; };
//jaanvi //jaanvi
//date:- 13-Feb-2025 //date:- 13-Feb-2025
return ( return (
<React.Fragment> <React.Fragment>
<MenuButton <MenuButton
aria-label="Open menu" aria-label="Open menu"
onClick={handleClick} onClick={handleClick}
sx={{ borderColor: "transparent" }} sx={{ borderColor: "transparent" }}
> >
{avatar ? ( {avatar ? (
<MoreVertRoundedIcon /> <MoreVertRoundedIcon />
) : ( ) : (
<Avatar <Avatar
sizes="small" sizes="small"
alt="Riley Carter" alt="Super Admin"
src="/static/images/avatar/7.jpg" src="/static/images/avatar/7.jpg"
sx={{ width: 36, height: 36 }} sx={{ width: 36, height: 36 }}
/> />
)} )}
</MenuButton> </MenuButton>
<Menu <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
id="menu" id="menu"
open={open} open={open}
onClose={handleClose} onClose={handleClose}
onClick={handleClose} onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }} transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{ sx={{
[`& .${listClasses.root}`]: { [`& .${listClasses.root}`]: {
padding: "4px", padding: "4px",
}, },
[`& .${paperClasses.root}`]: { [`& .${paperClasses.root}`]: {
padding: 0, padding: 0,
}, },
[`& .${dividerClasses.root}`]: { [`& .${dividerClasses.root}`]: {
margin: "4px -4px", margin: "4px -4px",
}, },
}} }}
> >
<MenuItem onClick={handleProfile}>Profile</MenuItem> <MenuItem onClick={handleProfile}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem> <MenuItem onClick={handleClose}>My account</MenuItem>
<Divider /> <Divider />
<MenuItem onClick={handleClose}>Add another account</MenuItem> <MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem> <MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider /> <Divider />
<MenuItem <MenuItem
onClick={handleClose} onClick={handleClose}
sx={{ sx={{
[`& .${listItemIconClasses.root}`]: { [`& .${listItemIconClasses.root}`]: {
ml: "auto", ml: "auto",
minWidth: 0, minWidth: 0,
}, },
}} }}
> >
{/* //Eknoor singh and jaanvi {/* //Eknoor singh and jaanvi
//date:- 13-Feb-2025 //date:- 13-Feb-2025
//Implemented logout functionality which was static previously */} //Implemented logout functionality which was static previously */}
<ListItemText <ListItemText
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLogoutModal(true); setLogoutModal(true);
}} }}
> >
Logout Logout
</ListItemText> </ListItemText>
<Logout <Logout
setLogoutModal={setLogoutModal} setLogoutModal={setLogoutModal}
logoutModal={logoutModal} logoutModal={logoutModal}
/> />
<ListItemIcon> <ListItemIcon>
<LogoutRoundedIcon fontSize="small" /> <LogoutRoundedIcon fontSize="small" />
</ListItemIcon> </ListItemIcon>
</MenuItem> </MenuItem>
</Menu> </Menu>
</React.Fragment> </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 MenuButton from "../MenuButton";
import MenuContent from "../MenuContent"; import MenuContent from "../MenuContent";
import CardAlert from "../CardAlert/CardAlert"; 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 { interface SideMenuMobileProps {
open: boolean | undefined; open: boolean | undefined;
@ -21,6 +24,12 @@ export default function SideMenuMobile({
open, open,
toggleDrawer, toggleDrawer,
}: SideMenuMobileProps) { }: SideMenuMobileProps) {
const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector((state: RootState) => state?.profileReducer);
React.useEffect(() => {
dispatch(fetchAdminProfile());
}, [dispatch]);
return ( return (
<Drawer <Drawer
anchor="right" anchor="right"
@ -47,12 +56,12 @@ export default function SideMenuMobile({
> >
<Avatar <Avatar
sizes="small" sizes="small"
alt="Riley Carter" alt={user?.name || "User Avatar"}
src="/static/images/avatar/7.jpg" src="/static/images/avatar/7.jpg"
sx={{ width: 24, height: 24 }} sx={{ width: 24, height: 24 }}
/> />
<Typography component="p" variant="h6"> <Typography component="p" variant="h6">
Riley Carter Super Admin
</Typography> </Typography>
</Stack> </Stack>
<MenuButton showBadge> <MenuButton showBadge>
@ -61,7 +70,7 @@ export default function SideMenuMobile({
</Stack> </Stack>
<Divider /> <Divider />
<Stack sx={{ flexGrow: 1 }}> <Stack sx={{ flexGrow: 1 }}>
<MenuContent /> <MenuContent hidden={false} />
<Divider /> <Divider />
</Stack> </Stack>
<CardAlert /> <CardAlert />

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

@ -1,18 +1,21 @@
import * as React from "react"; import * as React from "react";
import Box from "@mui/material/Box"; import {
import Button from "@mui/material/Button"; Box,
import Checkbox from "@mui/material/Checkbox"; Button,
import CssBaseline from "@mui/material/CssBaseline"; Checkbox,
import FormControlLabel from "@mui/material/FormControlLabel"; CssBaseline,
import Divider from "@mui/material/Divider"; FormControlLabel,
import FormLabel from "@mui/material/FormLabel"; FormLabel,
import FormControl from "@mui/material/FormControl"; FormControl,
import Link from "@mui/material/Link"; TextField,
import TextField from "@mui/material/TextField"; Typography,
import Typography from "@mui/material/Typography"; Stack,
import Stack from "@mui/material/Stack"; Card as MuiCard,
import MuiCard from "@mui/material/Card"; Grid,
import { styled } from "@mui/material/styles"; IconButton,
Link,
} from "@mui/material";
import { styled, useTheme } from "@mui/material/styles";
import { useForm, Controller, SubmitHandler } from "react-hook-form"; import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { loginUser } from "../../../redux/slices/authSlice.ts"; import { loginUser } from "../../../redux/slices/authSlice.ts";
@ -21,7 +24,10 @@ import AppTheme from "../../../shared-theme/AppTheme.tsx";
import ForgotPassword from "./ForgotPassword.tsx"; import ForgotPassword from "./ForgotPassword.tsx";
import { toast } from "sonner"; import { toast } from "sonner";
import { useNavigate } from "react-router-dom"; 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 }) => ({ const Card = styled(MuiCard)(({ theme }) => ({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -29,25 +35,31 @@ const Card = styled(MuiCard)(({ theme }) => ({
width: "100%", width: "100%",
padding: theme.spacing(4), padding: theme.spacing(4),
gap: theme.spacing(2), gap: theme.spacing(2),
margin: "auto", margin: "16px",
backgroundColor: "#1E1F1F",
[theme.breakpoints.up("sm")]: { [theme.breakpoints.up("sm")]: {
maxWidth: "450px", maxWidth: "450px",
}, },
boxShadow: // boxShadow:
"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px", // "hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
...theme.applyStyles("dark", { // ...theme.applyStyles("dark", {
boxShadow: // boxShadow:
"hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px", // "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 }) => ({ const SignInContainer = styled(Stack)(({ theme }) => ({
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)", height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
minHeight: "100%", minHeight: "100%",
padding: theme.spacing(2), // padding: theme.spacing(2),
[theme.breakpoints.up("sm")]: { // [theme.breakpoints.up("sm")]: {
padding: theme.spacing(4), // padding: theme.spacing(4),
}, // },
"&::before": { "&::before": {
content: '""', content: '""',
display: "block", display: "block",
@ -69,6 +81,9 @@ interface ILoginForm {
} }
export default function Login(props: { disableCustomTheme?: boolean }) { export default function Login(props: { disableCustomTheme?: boolean }) {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
console.log("theme", theme.palette.background);
const [showPassword, setShowPassword] = React.useState(false);
const { const {
control, control,
handleSubmit, handleSubmit,
@ -98,130 +113,249 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
}; };
return ( return (
<AppTheme {...props}> <ThemeProvider theme={theme}>
<CssBaseline enableColorScheme /> <AppTheme {...props}>
<SignInContainer direction="column" justifyContent="space-between"> <CssBaseline enableColorScheme />
<ColorModeSelect <SignInContainer
direction="column"
justifyContent="space-between"
>
{/* <ColorModeSelect
sx={{ position: "fixed", top: "1rem", right: "1rem" }} 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> <Grid container sx={{ height: "100vh" }}>
<FormLabel htmlFor="password">Password</FormLabel> <Grid
<Controller item
name="password" xs={7}
control={control} sx={{
defaultValue="" background: `url('/mainPageLogo.png') center/cover no-repeat`,
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"
/> />
<ForgotPassword open={open} handleClose={handleClose} />
<Button type="submit" fullWidth variant="contained"> <Grid
Sign in item
</Button> xs={5}
{/* <Link sx={{
component="button" backgroundColor: "black",
type="button" display: "flex",
onClick={handleClickOpen} justifyContent: "center",
variant="body2" alignItems: "center",
sx={{ alignSelf: "center" }} flexDirection: "column",
}}
> >
Forgot your password? <Typography
</Link> */} variant="h3"
</Box> sx={{
{/* <Divider>or</Divider> 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 <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -240,8 +374,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
</Link> </Link>
</Typography> </Typography>
</Box> */} </Box> */}
</Card> </Box>
</SignInContainer> </Card>
</AppTheme> </Grid>
</Grid>
</SignInContainer>
</AppTheme>
</ThemeProvider>
); );
} }

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

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