diff --git a/public/mainPageLogo.png b/public/mainPageLogo.png new file mode 100644 index 0000000..719a885 Binary files /dev/null and b/public/mainPageLogo.png differ diff --git a/src/components/AppNavbar/index.tsx b/src/components/AppNavbar/index.tsx index 3922311..49933ef 100644 --- a/src/components/AppNavbar/index.tsx +++ b/src/components/AppNavbar/index.tsx @@ -68,7 +68,7 @@ export default function AppNavbar() { Dashboard @@ -81,7 +81,6 @@ export default function AppNavbar() { - ); } diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 4724de2..22e7c12 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -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" + }} > + {/* + Notifications + */} No notifications yet diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx index 2ec9a9c..c1557c0 100644 --- a/src/components/MenuContent/index.tsx +++ b/src/components/MenuContent/index.tsx @@ -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: , + text: "Dashboard", + icon: , url: "/panel/dashboard", }, // { @@ -32,7 +34,7 @@ const baseMenuItems = [ const superAdminOnlyItems = [ { text: "Admin List", - icon: , + icon: , url: "/panel/adminlist", }, ]; diff --git a/src/components/OptionsMenu/index.tsx b/src/components/OptionsMenu/index.tsx index dfcdd7c..1778e11 100644 --- a/src/components/OptionsMenu/index.tsx +++ b/src/components/OptionsMenu/index.tsx @@ -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); - const [logoutModal, setLogoutModal] = React.useState(false); - const open = Boolean(anchorEl); - const handleClick = (event: React.MouseEvent) => { - 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 ( - - - {avatar ? ( - - ) : ( - - )} - - - Profile - My account - - Add another account - Settings - - - {/* //Eknoor singh and jaanvi + const [anchorEl, setAnchorEl] = React.useState(null); + const [logoutModal, setLogoutModal] = React.useState(false); + const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + 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 ( + + + {avatar ? ( + + ) : ( + + )} + + + Profile + My account + + Add another account + Settings + + + {/* //Eknoor singh and jaanvi //date:- 13-Feb-2025 //Implemented logout functionality which was static previously */} - - { - e.stopPropagation(); - setLogoutModal(true); - }} - > - Logout - - - - - - - - - - ); + + { + e.stopPropagation(); + setLogoutModal(true); + }} + > + Logout + + + + + + + + + + ); } - \ No newline at end of file diff --git a/src/components/SideMenuMobile/index.tsx b/src/components/SideMenuMobile/index.tsx index 0f69c01..efefb4f 100644 --- a/src/components/SideMenuMobile/index.tsx +++ b/src/components/SideMenuMobile/index.tsx @@ -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(); + const { user } = useSelector((state: RootState) => state?.profileReducer); + React.useEffect(() => { + dispatch(fetchAdminProfile()); + }, [dispatch]); + return ( - Riley Carter + Super Admin @@ -61,7 +70,7 @@ export default function SideMenuMobile({ - + diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx index 3cc6efa..a205d50 100644 --- a/src/pages/Auth/Login/index.tsx +++ b/src/pages/Auth/Login/index.tsx @@ -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 ( - - - - + + + + {/* - - {/* */} - Digi-EV - - Sign in - - - - Email - ( - - )} - /> - + /> */} - - Password - ( - - )} - /> - - - - } - label="Remember me" + + - - - {/* - Forgot your password? - */} - - {/* or + + Welcome Back! + + + {/* */} + + + + Login + + + Log in with your email and password + + + + Email + + ( + + )} + /> + + + + + Password + + ( + + + + setShowPassword( + (prev) => !prev + ) + } + > + {showPassword ? ( + + ) : ( + + )} + + + )} + /> + + + + } + label="Remember me" + /> + + + Forgot your password? + + + + + + {/* or */} - - - + + + + + + + ); } diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index ccb3ab2..abb04e2 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -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 = ({ disableCustomTheme = false }) => {!disableCustomTheme ? ( - + <> ) : (