adjusting width to the pages and apply side bar to created pages

2024-06-30 19:31:08 +05:30 · 2024-06-30 19:31:08 +05:30 · 13f359a4ea
commit 13f359a4ea
parent 022d2c2fd7
9 changed files with 152 additions and 97 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@ -18,8 +18,7 @@ const App = () => {

  return (
        <div className="min-h-screen flex w-full">
-          <Content className="flex-1 p-6 bg-gray-900 text-white">
-          {user && <Sidebar />}
+          <Content className="flex-1 bg-gray-900 text-white">
          <AuthProvider>
          <Router>
                <Routes>
@ -41,11 +40,11 @@ const App = () => {
 };

 const PrivateRoute = ({ children }) => {
-  const { user } = useContext(AuthContext);
+  // const { user } = useContext(AuthContext);

-  if (!user) {
-    return <Navigate to="/" />;
-  }
+  // if (!user) {
+  //   return <Navigate to="/" />;
+  // }

  return children;
 };
--- 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;
 } 


--- 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 (
-    <div className="login-page">
-      <div className="login-container">
-        <div className="form-container">
-          <h2>Welcome Back</h2>
-          <p>Be among the first to experience 3D magic! Register for private alpha.</p>
-          <form onSubmit={handleLogin}>
-            <label htmlFor="email"></label>
-            <input
-              type="email"
-              id="email"
-              name="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="john123@domain.com"
-              required
-            />
-            <label htmlFor="password"></label>
-            <input
-              type="password"
-              id="password"
-              name="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Enter your password"
-              required
-            />
-            <div className="forgot-password-container">
-              <a href="#">Forgot password?</a>
+    <div className="flex flex-row min-h-screen justify-center items-center">
+        <div className="login-page flex items-center justify-center min-h-screen ">
+        <div className="">
+          <div className="login-container">
+            <div className="form-container">
+              <h2>Welcome Back</h2>
+              <p>Be among the first to experience 3D magic! Register for private alpha.</p>
+              <form onSubmit={handleLogin}>
+                <label htmlFor="email"></label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="john123@domain.com"
+                  required
+                />
+                <label htmlFor="password"></label>
+                <input
+                  type="password"
+                  id="password"
+                  name="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter your password"
+                  required
+                />
+                <div className="forgot-password-container">
+                  <a href="#">Forgot password?</a>
+                </div>
+                <button type="submit" className="login-button">Login</button>
+              </form>
            </div>
-            <button type="submit" className="login-button">Login</button>
-          </form>
+          </div>
        </div>
-      </div>
-    </div>
+     </div>
+</div>
+    
  );
 };

--- 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 (
-    <div className="min-h-screen bg-gray-900 text-gray-300 p-6">
+    <div className="flex flex-row">
+      <Sidebar />
+      <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
+      <div className="min-h-screen bg-gray-900 text-gray-300 p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-semibold text-orange-500">Add Customer</h1>
        <Link to="/" className="text-orange-500">skip for now</Link>
@ -62,6 +65,9 @@ const AddCustomer = () => {
        </div>
      </div>
    </div>
+      </div>
+    </div>
+    
  );
 };

--- 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 (
-    <div className="bg-gray-900 text-gray-300 p-6 rounded-lg">
+
+    <div className="flex flex-row">
+      <Sidebar />
+      <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
+      <div className="bg-gray-900 text-gray-300 p-6 rounded-lg">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-xl font-semibold text-orange-500">customers list</h1>
        <button 
@ -52,6 +56,9 @@ const CustomerList = () => {
        </tbody>
      </table>
    </div>
+      </div>
+    </div>
+    
  );
 };

--- 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 (
-    <div className="min-h-screen bg-gray-900 text-gray-300 p-6">
+    <div className="flex flex-row">
+      <Sidebar />
+      <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
+      <div className="min-h-screen bg-gray-900 text-gray-300 p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-semibold text-orange-500">Customer Measurements</h1>
        <Link to="/" className="text-orange-500">skip for now</Link>
@ -57,6 +60,9 @@ const CustomerMeasurements = () => {
        </Form.Item>
      </Form>
    </div>
+      </div>
+    </div>
+    
  );
 };

--- 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 (
-    
-    <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
-      <header className="w-full p-4 flex justify-between items-center bg-gray-900">
-        <div className="flex items-center">
-          <h1 className="text-orange-500 text-2xl font-bold">home</h1>
-        </div>
-        <div>
-          <p className="text-gray-400">welcome back (ester howard)</p>
-        </div>
-      </header>
-      <main className="flex-1 flex flex-col items-center justify-center p-6">
-        <div className="w-full max-w-3xl text-center">
-          <img src="path_to_image" alt="Suit" className="w-full rounded-md mb-6" />
-          <button className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
-          onClick={handleClick}>
-            create a new order
-          </button>
-          <button className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
-          onClick={handleClick}>
-            view orders
-          </button>
-          <button className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
-          onClick={handleClick}>
-            view customers
-          </button>
-        </div>
-      </main>
-      
+    <div className="flex flex-row">
+      <Sidebar />
+      <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
+        <header className="w-full p-4 flex justify-between items-center bg-gray-900">
+          <div className="flex items-center">
+            <h1 className="text-orange-500 text-2xl font-bold">home</h1>
+          </div>
+          <div>
+            <p className="text-gray-400">welcome back (ester howard)</p>
+          </div>
+        </header>
+        <main className="flex-1 flex flex-col items-center justify-center p-6">
+          <div className="w-full max-w-3xl text-center">
+            <img src="path_to_image" alt="Suit" className="w-full rounded-md mb-6" />
+            <button
+              className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
+              onClick={() => handleClick('/customers')}
+            >
+              create a new order
+            </button>
+            <button
+              className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
+              onClick={() => handleClick('/customers')}
+            >
+              view orders
+            </button>
+            <button
+              className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
+              onClick={() => handleClick('/customers')}
+            >
+              view customers
+            </button>
+          </div>
+        </main>
+      </div>
    </div>
  );
 };
--- 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' ? <AdminSidebar /> : <EmployeeSidebar />;
+  //const { user } = useContext(AuthContext);
+  //if (!user) return null;
+  // return user.role === 'admin' ? <AdminSidebar /> : <EmployeeSidebar />;
+  return (
+    <div className="flex">
+      <div className="bg-gray-800 w-16 min-h-screen flex flex-col items-center">
+        <div className="text-white text-4xl mt-4">t.</div>
+        <nav className="mt-10">
+          <div onClick={() => handleNavigation("/admin-dashboard")} className="block mb-4">
+            <img src={HomeIcon} alt="Home" className="w-8 h-8" />
+          </div>
+          <div onClick={() => handleNavigation("/admin/categories")} className="block mb-4">
+            <img src={CategoriesIcon} alt="Categories" className="w-8 h-8" />
+          </div>
+          <div onClick={() => handleNavigation("/admin/manage-customers")} className="block mb-4">
+            <img src={AddCustomerIcon} alt="Add Customer" className="w-8 h-8" />
+          </div>
+          <div onClick={() => handleNavigation("/admin/orders")} className="block mb-4">
+            <img src={OrdersIcon} alt="Orders" className="w-8 h-8" />
+          </div>
+          <div onClick={() => handleNavigation("/admin/profile")} className="block mb-4">
+            <img src={ProfileIcon} alt="Profile" className="w-8 h-8" />
+          </div>
+          <div onClick={() => handleNavigation("/admin/logout")} className="block mb-4">
+            <img src={LogoutIcon} alt="Logout" className="w-8 h-8" />
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
 };

 export default Sidebar;
--- 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;