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

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">
+          <Content className="flex-1 bg-gray-900 text-white">
-          {user && <Sidebar />}
           <AuthProvider>
           <Router>
                 <Routes>
@@ -41,11 +40,11 @@ const App = () => {
 };
 
 const PrivateRoute = ({ children }) => {
-  const { user } = useContext(AuthContext);
+  // const { user } = useContext(AuthContext);
 
-  if (!user) {
+  // if (!user) {
-    return <Navigate to="/" />;
+  //   return <Navigate to="/" />;
-  }
+  // }
 
   return children;
 };

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;
+  padding: 4rem;
-  justify-content: center; 
-  align-items: center; 
 } 
 
 

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

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>
+    
   );
 };
 

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>
+    
   );
 };
 

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>
+    
   );
 };
 

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 = () => {
+  const handleClick = (link) => {
-    navigate('/customers'); // Redirects to the '/customers' route
+    navigate(link); // Redirects to the '/customers' route
   };
   return (
-    
+    <div className="flex flex-row">
-    <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
+      <Sidebar />
-      <header className="w-full p-4 flex justify-between items-center bg-gray-900">
+      <div className="w-full flex flex-col min-h-screen bg-gray-900 text-white">
-        <div className="flex items-center">
+        <header className="w-full p-4 flex justify-between items-center bg-gray-900">
-          <h1 className="text-orange-500 text-2xl font-bold">home</h1>
+          <div className="flex items-center">
-        </div>
+            <h1 className="text-orange-500 text-2xl font-bold">home</h1>
-        <div>
+          </div>
-          <p className="text-gray-400">welcome back (ester howard)</p>
+          <div>
-        </div>
+            <p className="text-gray-400">welcome back (ester howard)</p>
-      </header>
+          </div>
-      <main className="flex-1 flex flex-col items-center justify-center p-6">
+        </header>
-        <div className="w-full max-w-3xl text-center">
+        <main className="flex-1 flex flex-col items-center justify-center p-6">
-          <img src="path_to_image" alt="Suit" className="w-full rounded-md mb-6" />
+          <div className="w-full max-w-3xl text-center">
-          <button className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
+            <img src="path_to_image" alt="Suit" className="w-full rounded-md mb-6" />
-          onClick={handleClick}>
+            <button
-            create a new order
+              className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
-          </button>
+              onClick={() => handleClick('/customers')}
-          <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
-            view orders
+            </button>
-          </button>
+            <button
-          <button className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
+              className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400"
-          onClick={handleClick}>
+              onClick={() => handleClick('/customers')}
-            view customers
+            >
-          </button>
+              view orders
-        </div>
+            </button>
-      </main>
+            <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>
   );
 };

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);
+  //const { user } = useContext(AuthContext);
-  if (!user) return null;
+  //if (!user) return null;
-  return user.role === 'admin' ? <AdminSidebar /> : <EmployeeSidebar />;
+  // 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;

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;