From 13f359a4eacab87d8b8db58962fa348fe082df3a Mon Sep 17 00:00:00 2001 From: Suraj Birewar Date: Sun, 30 Jun 2024 19:31:08 +0530 Subject: [PATCH] adjusting width to the pages and apply side bar to created pages --- src/App.jsx | 11 ++- src/components/Auth/LoginPage.css | 6 +- src/components/Auth/LoginPage.jsx | 75 ++++++++++--------- src/components/customer/AddCustomer.jsx | 10 ++- src/components/customer/CustomerList.jsx | 11 ++- .../customer/CustomerMeasurements.jsx | 10 ++- src/components/employee/EmployeeDashboard.jsx | 69 +++++++++-------- src/components/sidebar/Sidebar.jsx | 46 +++++++++++- src/index.css | 11 --- 9 files changed, 152 insertions(+), 97 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index b11e6cc..7868830 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -18,8 +18,7 @@ const App = () => { return (
- - {user && } + @@ -41,11 +40,11 @@ const App = () => { }; const PrivateRoute = ({ children }) => { - const { user } = useContext(AuthContext); + // const { user } = useContext(AuthContext); - if (!user) { - return ; - } + // if (!user) { + // return ; + // } return children; }; diff --git a/src/components/Auth/LoginPage.css b/src/components/Auth/LoginPage.css index 9d29893..31263cb 100644 --- a/src/components/Auth/LoginPage.css +++ b/src/components/Auth/LoginPage.css @@ -5,13 +5,9 @@ .login-page { font-family: 'Nunito Sans', sans-serif; background-color: #09090B; - margin: 0; - padding: 0; color: #fff; display: flex; - height: 100vh; - justify-content: center; - align-items: center; + padding: 4rem; } diff --git a/src/components/Auth/LoginPage.jsx b/src/components/Auth/LoginPage.jsx index e81ed83..6f42346 100644 --- a/src/components/Auth/LoginPage.jsx +++ b/src/components/Auth/LoginPage.jsx @@ -1,4 +1,4 @@ -import React, { useState, useContext } from 'react'; +import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { AuthContext } from '../../contexts/AuthContext'; import './LoginPage.css'; @@ -6,12 +6,12 @@ import './LoginPage.css'; const LoginPage = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); - const { login } = useContext(AuthContext); + // const { login } = useContext(AuthContext); const navigate = useNavigate(); const handleLogin = async (e) => { e.preventDefault(); - const role = await login(email, password); + const role = 'employee' //await login(email, password); if (role === 'admin') { navigate('/admin'); } else if (role === 'employee') { @@ -22,40 +22,45 @@ const LoginPage = () => { }; return ( -
-
-
-

Welcome Back

-

Be among the first to experience 3D magic! Register for private alpha.

-
- - setEmail(e.target.value)} - placeholder="john123@domain.com" - required - /> - - setPassword(e.target.value)} - placeholder="Enter your password" - required - /> -
- Forgot password? +
+
+
+
+
+

Welcome Back

+

Be among the first to experience 3D magic! Register for private alpha.

+ + + setEmail(e.target.value)} + placeholder="john123@domain.com" + required + /> + + setPassword(e.target.value)} + placeholder="Enter your password" + required + /> + + +
- - +
-
-
+
+
+ ); }; diff --git a/src/components/customer/AddCustomer.jsx b/src/components/customer/AddCustomer.jsx index eddd896..dd1db5b 100644 --- a/src/components/customer/AddCustomer.jsx +++ b/src/components/customer/AddCustomer.jsx @@ -1,9 +1,12 @@ import React from 'react'; import { Link } from 'react-router-dom'; - +import Sidebar from '../sidebar/Sidebar'; const AddCustomer = () => { return ( -
+
+ +
+

Add Customer

skip for now @@ -62,6 +65,9 @@ const AddCustomer = () => {
+
+
+ ); }; diff --git a/src/components/customer/CustomerList.jsx b/src/components/customer/CustomerList.jsx index a991043..8995ab7 100644 --- a/src/components/customer/CustomerList.jsx +++ b/src/components/customer/CustomerList.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; - +import Sidebar from '../sidebar/Sidebar'; const CustomerList = () => { const navigate = useNavigate(); @@ -16,7 +16,11 @@ const CustomerList = () => { }; return ( -
+ +
+ +
+

customers list

+
+
+ ); }; diff --git a/src/components/customer/CustomerMeasurements.jsx b/src/components/customer/CustomerMeasurements.jsx index 20e1195..f962246 100644 --- a/src/components/customer/CustomerMeasurements.jsx +++ b/src/components/customer/CustomerMeasurements.jsx @@ -1,14 +1,17 @@ import React from 'react'; import { Button, Input, Form } from 'antd'; import { Link } from 'react-router-dom'; - +import Sidebar from '../sidebar/Sidebar'; const CustomerMeasurements = () => { const onFinish = (values) => { console.log('Measurements:', values); }; return ( -
+
+ +
+

Customer Measurements

skip for now @@ -57,6 +60,9 @@ const CustomerMeasurements = () => {
+
+
+ ); }; diff --git a/src/components/employee/EmployeeDashboard.jsx b/src/components/employee/EmployeeDashboard.jsx index 5fd9b92..3e6ad6e 100644 --- a/src/components/employee/EmployeeDashboard.jsx +++ b/src/components/employee/EmployeeDashboard.jsx @@ -1,40 +1,47 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; - +import Sidebar from '../sidebar/Sidebar'; const HomePage = () => { const navigate = useNavigate(); - const handleClick = () => { - navigate('/customers'); // Redirects to the '/customers' route + const handleClick = (link) => { + navigate(link); // Redirects to the '/customers' route }; return ( - -
-
-
-

home

-
-
-

welcome back (ester howard)

-
-
-
-
- Suit - - - -
-
- +
+ +
+
+
+

home

+
+
+

welcome back (ester howard)

+
+
+
+
+ Suit + + + +
+
+
); }; diff --git a/src/components/sidebar/Sidebar.jsx b/src/components/sidebar/Sidebar.jsx index 0de1941..ca38ff1 100644 --- a/src/components/sidebar/Sidebar.jsx +++ b/src/components/sidebar/Sidebar.jsx @@ -2,11 +2,51 @@ import React, { useContext } from 'react'; import AdminSidebar from './AdminSidebar'; import EmployeeSidebar from './EmployeeSidebar'; import { AuthContext } from '../../contexts/AuthContext'; +import { useNavigate } from 'react-router-dom'; +// Import your SVG icons +import HomeIcon from '../../assets/thob-data/HomeIcon.svg'; +import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg'; +import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg'; +import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg'; +import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg'; +import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg'; + + const handleNavigation = async (e, link) => { + e.preventDefault(); + window.location = link + }; const Sidebar = () => { - const { user } = useContext(AuthContext); - if (!user) return null; - return user.role === 'admin' ? : ; + //const { user } = useContext(AuthContext); + //if (!user) return null; + // return user.role === 'admin' ? : ; + return ( +
+
+
t.
+ +
+
+ ); }; export default Sidebar; diff --git a/src/index.css b/src/index.css index 0e25fd6..8e2378c 100644 --- a/src/index.css +++ b/src/index.css @@ -26,17 +26,6 @@ a { a:hover { color: #F26502; } -/* -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; - justify-content: center; - align-items: center; - background-color: #09090B; -} */ h1 { font-size: 3.2em;