add page login

src/App.js

@@ -16,6 +16,7 @@ import Pie from './scenes/Pie';
 import FAQ from './scenes/FAQ';
 import Geography from './scenes/Geography';
 import Calendar from './scenes/Calendar';
+import Login from './scenes/Login';
 
 function App() {
   const [theme, coloMode] = useMode();
@@ -39,6 +40,7 @@ function App() {
               <Route path="/geography" element={<Geography />} />
               <Route path="/faq" element={<FAQ />} />
               <Route path="/calendar" element={<Calendar />} />
+              <Route path="/login" element={<Login />} />
             </Routes>
           </main>
         </div>

src/scenes/Login/index.jsx

@@ -0,0 +1,90 @@
+import { Box, Button, TextField } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { Formik } from 'formik';
+import * as yup from 'yup';
+import Header from '../../components/Shared/Header/Header';
+
+const initialValues = {
+  email: '',
+  password: '',
+};
+
+const userSchema = yup.object().shape({
+  email: yup.string().email('Invalid Email').required('Required'),
+  password: yup.string().required('Required'),
+});
+
+const Login = () => {
+  const isNonMobile = useMediaQuery('(min-width: 600px)');
+
+  const handleFormSubmit = (values) => {
+    console.log(values);
+  };
+
+  return (
+    <Box m="20px">
+      <Header title="LOGIN USER" subTitle="Login To Dashboard" />
+
+      <Formik
+        onSubmit={handleFormSubmit}
+        initialValues={initialValues}
+        validationSchema={userSchema}
+      >
+        {({
+          values, errors, touched, handleBlur, handleChange, handleSubmit, handleReset,
+        }) => (
+          <form onSubmit={handleSubmit} onReset={handleReset}>
+            <Box
+              display="grid"
+              gap="30px"
+              gridTemplateColumns="repeate(4, minmax(0, 1fr))"
+              sx={{
+                '& div': { gridColumn: isNonMobile ? undefined : 'span 4' },
+              }}
+            >
+              <TextField
+                fullWidth
+                variant="filled"
+                type="text"
+                label="Email"
+                onBlur={handleBlur}
+                onChange={handleChange}
+                value={values.email}
+                name="email"
+                error={!!touched.email && !!errors.email}
+                helperText={touched.email && errors.email}
+                autoComplete="disabled"
+                sx={{
+                  gridColumn: 'span 4',
+                }}
+              />
+              <TextField
+                fullWidth
+                variant="filled"
+                type="password"
+                label="Password"
+                onBlur={handleBlur}
+                onChange={handleChange}
+                value={values.password}
+                name="password"
+                error={!!touched.password && !!errors.password}
+                helperText={touched.password && errors.password}
+                autoComplete="disabled"
+                sx={{
+                  gridColumn: 'span 4',
+                }}
+              />
+            </Box>
+            <Box display="flex" justifyContent="end" mt="20px">
+              <Button type="submit" color="secondary" variant="contained">
+                Login
+              </Button>
+            </Box>
+          </form>
+        )}
+      </Formik>
+    </Box>
+  );
+};
+
+export default Login;

src/scenes/global/Sidebar/Sidebar.jsx

@@ -16,6 +16,7 @@ import PieChartOutlinedIcon from '@mui/icons-material/PieChartOutline';
 import TimeLineOutlinedIcon from '@mui/icons-material/TimelineOutlined';
 import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
 import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
+import LoginIcon from '@mui/icons-material/Login';
 import PropTypes from 'prop-types';
 import user from '../../../assets/users/user.png';
 import { tokens } from '../../../theme';
@@ -184,6 +185,13 @@ const Sidebar = () => {
               selected={selected}
               setSelected={setSelected}
             />
+            <Item
+              title="Login Page"
+              to="/login"
+              icon={<LoginIcon />}
+              selected={selected}
+              setSelected={setSelected}
+            />
             <Item
               title="FAQ Page"
               to="/faq"