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,7 +22,9 @@ const LoginPage = () => {
   };
 
   return (
-    <div className="login-page">
+    <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>
@@ -56,6 +58,9 @@ const LoginPage = () => {
             </div>
           </div>
         </div>
+     </div>
+</div>
+    
   );
 };
 

src/components/customer/AddCustomer.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-
+import Sidebar from '../sidebar/Sidebar';
 const AddCustomer = () => {
   return (
+    <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>
@@ -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,6 +16,10 @@ const CustomerList = () => {
   };
 
   return (
+
+    <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>
@@ -52,6 +56,9 @@ const CustomerList = () => {
         </tbody>
       </table>
     </div>
+      </div>
+    </div>
+    
   );
 };
 

src/components/customer/CustomerMeasurements.jsx

@@ -1,13 +1,16 @@
 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="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>
@@ -57,6 +60,9 @@ const CustomerMeasurements = () => {
         </Form.Item>
       </Form>
     </div>
+      </div>
+    </div>
+    
   );
 };
 

src/components/employee/EmployeeDashboard.jsx

@@ -1,13 +1,14 @@
 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">
+      <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">
@@ -20,21 +21,27 @@ const HomePage = () => {
         <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"
+            <button
-          onClick={handleClick}>
+              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"
+            <button
-          onClick={handleClick}>
+              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"
+            <button
-          onClick={handleClick}>
+              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;