added employee list page and add employee page

db.json

@@ -102,6 +102,16 @@
       "email": "dikshant001@gmail.com",
       "address": "Bavdhan, Pune",
       "mobile": "45654665645"
+    },
+    {
+      "id": "377d",
+      "firstname": "tejas",
+      "lastname": "chari",
+      "age": "28",
+      "gender": "male",
+      "email": "tejas001@gmail.com",
+      "address": " Baner, Pune",
+      "mobile": "8675493099"
     }
   ]
 }

src/App.jsx

@@ -8,10 +8,9 @@ import CustomerList from './components/customer/CustomerList';
 import AddCustomer from './components/customer/AddCustomer';
 import Sidebar from './components/sidebar/Sidebar';
 import CustomerMeasurements from './components/customer/CustomerMeasurements';
-
-
-
 import { AuthProvider, AuthContext } from './contexts/AuthContext';
+import EmployeeList from './components/admin/EmployeeList';
+import AddEmployee from './components/admin/AddEmployee';
 
 const { Content } = Layout;
 
@@ -25,13 +24,15 @@ const App = () => {
           <Router>
                 <Routes>
                   <Route exact path="/" element={<LoginPage />} />
-                  <Route path="/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
+                  <Route path="/employee/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
                   <Route path="/admin" element={<PrivateRoute><AdminDashboard /></PrivateRoute>} />
                   <Route path="/employee" element={<PrivateRoute><EmployeeDashboard /></PrivateRoute>} />
                   <Route path="/customers" element={<PrivateRoute><CustomerList /></PrivateRoute>} />
                   <Route path="/add-customer" element={<PrivateRoute><AddCustomer /></PrivateRoute>} />
                   <Route path="/employee/create-order" element={<CustomerList />} />
                   <Route path="/measurements" element={<CustomerMeasurements />} />
+                  <Route path="employees" element={<PrivateRoute><EmployeeList /></PrivateRoute>} />
+                  <Route path="/add-employee" element={<PrivateRoute><AddEmployee /></PrivateRoute>} />
                 </Routes>
             </Router>
     </AuthProvider>

src/components/Auth/LoginPage.css

@@ -21,7 +21,7 @@ body, html {
   /* background-color: #222; */
   border-radius: 8px;
   padding: 40px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 10px #d1d5db;
   width: 310.4px;
   display: flex;
   flex-direction: column;

src/components/admin/AddEmployee.jsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Sidebar from '../sidebar/Sidebar';
+import axiosInstance from '../../api/axiosConfig';
+
+const AddEmployee = () => {
+  const navigate = useNavigate();
+  const [employeeData, setEmployeeData] = useState({
+    firstname: '',
+    lastname: '',
+    age: '',
+    gender: '',
+    email: '',
+    address: '',
+    mobile: '',
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setEmployeeData({
+      ...employeeData,
+      [name]: value,
+    });
+  };
+
+  const handleAddEmployeeSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await axiosInstance.post('/employees', employeeData);
+      navigate('/employees');
+    } catch (error) {
+      console.error('Error adding employee:', error.response || error.message);
+    }
+  };
+
+  return (
+    <div className="flex flex-row">
+      <Sidebar />
+      <div className="w-full flex flex-col min-h-screen text-black">
+        <div className="min-h-screen text-gray-800 p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h1 className="text-2xl font-semibold text-blue-900">Creating Employee Account</h1>
+            <Link to="/" className="text-blue-900">Skip for now</Link>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="space-y-6">
+              <div className="text-center">
+                <div className="inline-block relative">
+                  <div className="bg-gray-300 w-24 h-24 rounded-full mx-auto"></div>
+                  <button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-#4b5563 text-white text-xs px-2 py-1 rounded-full">
+                    Add Employee Image
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className="md:col-span-2 space-y-4">
+              <form onSubmit={handleAddEmployeeSubmit}>
+                <div>
+                  <label className="block text-gray-800 font-medium">Employee Firstname:</label>
+                  <input
+                    type="text"
+                    name="firstname"
+                    value={employeeData.firstname}
+                    onChange={handleInputChange}
+                    className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
+                  />
+                </div>
+                <div>
+                  <label className="block text-gray-800 font-medium">Employee Lastname:</label>
+                  <input
+                    type="text"
+                    name="lastname"
+                    value={employeeData.lastname}
+                    onChange={handleInputChange}
+                    className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
+                  />
+                </div>
+                <div>
+                  <label className="block text-gray-800 font-medium">Age:</label>
+                  <input
+                    type="number"
+                    name="age"
+                    value={employeeData.age}
+                    onChange={handleInputChange}
+                    className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
+                  />
+                </div>
+                <div>
+                  <label className="block text-gray-800 font-medium">Gender:</label>
+                  <select
+                    name="gender"
+                    value={employeeData.gender}
+                    onChange={handleInputChange}
+                    className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
+                  >
+                    <option value="" disabled>Select Gender</option>
+                    <option value="male">Male</option>
+                    <option value="female">Female</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-gray-800 font-medium">Email:</label>
+                  <input
+                    type="email"
+                    name="email"
+                    value={employeeData.email}
+                    onChange={handleInputChange}
+                    className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
+                  />
+                </div>
+                <div>
+                  <label className="block text-gray-800 font-medium">Address:</label>
+                  <input
+                    type="text"
+                    name="address"
+                    value={employeeData.address}
+                    onChange={handleInputChange}
+                    className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
+                  />
+                </div>
+                <div>
+                  <label className="block text-gray-800 font-medium">Mobile No:</label>
+                  <input
+                    type="text"
+                    name="mobile"
+                    value={employeeData.mobile}
+                    onChange={handleInputChange}
+                    className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
+                  />
+                </div>
+                <br />
+                <div className="text-center">
+                  <button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold">
+                    Create Account
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddEmployee;

src/components/admin/AdminDashboard.jsx

@@ -26,22 +26,22 @@ const AdminDashboard = () => {
           <div className="w-full max-w-3xl text-center">
             <img src="path_to_image" alt="Dashboard Graphic" className="w-full rounded-md mb-6" />
             <button
-              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
-              onClick={() => handleClick('/admin/create-order')}
+              onClick={() => handleClick('')}
             >
-              Create Order
+              view orders
             </button>
             <button
-              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
-              onClick={() => handleClick('/admin/view-orders')}
+              onClick={() => handleClick('/employees')}
             >
-              View Orders
+              view employees
             </button>
             <button
-              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
-              onClick={() => handleClick('/admin/view-customers')}
+              onClick={() => handleClick('')}
             >
-              View Customers
+              view Customers
             </button>
           </div>
         </main>

src/components/admin/Dashboard.css

@@ -50,6 +50,7 @@
   flex-direction: column;
   gap: 20px;
   align-items: center;
+  background-color: #0e355b;
 }
 
 .dashboard-button {
@@ -64,7 +65,7 @@
   color: #0e355b;
 }
 
-.dashboard-button:hover {
+.button:hover {
   background-color: #154676;
   border-color: #154676;
 }

src/components/admin/EmployeeList.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Sidebar from '../sidebar/Sidebar';
+import axiosInstance from '../../api/axiosConfig';
+// import EmployeeCards from './EmployeeCards';
+// import PropTypes from 'prop-types';
+
+const EmployeeList = ({ className = '' }) => {
+  const [employees, setEmployees] = useState([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Fetch the employees data from the JSON file
+    getEmployees();
+  }, []);
+
+  const getEmployees = async () => {
+    try {
+      const response = await axiosInstance.get('http://localhost:5000/employees');
+      let employees_data = response.data; // List of employees
+      setEmployees(employees_data);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const handleAddEmployee = () => {
+     navigate('/add-employee');
+   };
+
+//   const onEmployeeCardsClick = useCallback(() => {
+//     navigate('/employee-profile');
+//   }, [navigate]);
+
+  return (
+    <div className="flex flex-row min-h-screen">
+      <Sidebar />
+      <div className="flex-grow p-6 bg-gray-100">
+        <div className="bg-white p-6 rounded-lg shadow">
+          <div className="flex justify-between items-center mb-6">
+            <h1 className="text-2xl font-semibold text-gray-800">Employees List</h1>
+            <button
+              className="bg-#0e355b text-d1d5db px-4 py-2 rounded-md text-sm"
+              onClick={handleAddEmployee}
+            >
+              Add New Employee
+            </button>
+          </div>
+          <div className="flex items-center mb-4">
+            <svg
+              className="w-5 h-5 mr-2 text-gray-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+              />
+            </svg>
+            <span className="text-sm text-gray-600">Filter</span>
+          </div>
+          <p className="text-sm text-gray-600 mb-4">Total Employees ({employees.length})</p>
+          <table className="w-full bg-white">
+            <thead>
+              <tr className="text-left text-xs uppercase text-gray-600 border-b">
+                <th className="py-2">#</th>
+                <th className="py-2">Employee Name</th>
+                <th className="py-2">Email Address</th>
+                <th className="py-2">Details</th>
+              </tr>
+            </thead>
+            <tbody>
+              {employees.map((employee, index) => (
+                <tr key={employee.id} className="border-b last:border-none">
+                  <td className="py-2 text-gray-800">{index + 1}</td>
+                  <td className="py-2 text-gray-800">{employee.firstname} {employee.lastname}</td>
+                  <td className="py-2 text-gray-800">{employee.email}</td>
+                  <td className="py-2 text-gray-800">
+                    <button
+                      className="text-#4b5563 underline"
+                    //   onClick={onEmployeeCardsClick}
+                    >
+                      View Details
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// EmployeeList.propTypes = {
+//   className: PropTypes.string,
+// };
+
+export default EmployeeList;

src/components/customer/AddCustomer.jsx

@@ -8,7 +8,8 @@ import { useNavigate } from 'react-router-dom';
 const AddCustomer = () => {
   const navigate = useNavigate();
   const [customerData, setCustomerData] = useState({
-    name: '',
+    firstname: '',
+    lastname:'',
     age: '',
     gender: '',
     email: '',
@@ -40,42 +41,52 @@ const AddCustomer = () => {
       <div className="w-full flex flex-col min-h-screen text-white">
         <div className="min-h-screen text-gray-300 p-6">
           <div className="flex justify-between items-center mb-6">
-            <h1 className="text-2xl font-semibold text-#0e355b">Add Customer</h1>
+            <h1 className="text-2xl font-semibold text-#0e355b">add customer</h1>
-            <Link to="/" className="text-#0e355b">Skip for now</Link>
+            <Link to="/" className="text-#0e355b">skip for now</Link>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div className="space-y-6">
               <div className="text-center">
                 <div className="inline-block relative">
                   <div className="bg-gray-700 w-24 h-24 rounded-full mx-auto"></div>
-                  <button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-xs px-2 py-1 rounded-full">
+                  <button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-0e355b text-white text-xs px-2 py-1 rounded-full">
                     {/* Add Customer Image */}
                   </button>
                 </div>
               </div>
               <div>
                 <Link to="/">
-                  <h2 className="text-lg font-semibold text-">Customer Information</h2>
+                  <h2 className="text-lg font-semibold text-">customer information</h2>
                 </Link>
                 <Link to="/measurements">
-                  <h2 className="text-lg font-semibold text-">Measurements</h2>
+                  <h2 className="text-lg font-semibold text-">measurements</h2>
                 </Link>
               </div>
             </div>
             <div className="md:col-span-2 space-y-4">
               <form onSubmit={handleAddCustomerSubmit}>
                 <div>
-                  <label className="block text-sm font-medium text-black-700">Customer Name:</label>
+                  <label className="block text-d1d5db font-medium text-d1d5db">customer firstname:</label>
                   <input
                     type="text"
-                    name="name"
+                    name="firstname"
-                    value={customerData.name}
+                    value={customerData.firstname}
                     onChange={handleInputChange}
                     className="input-underline"
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-black-700">Age:</label>
+                  <label className="block text-d1d5db font-medium text-d1d5db">customer lastname:</label>
+                  <input
+                    type="text"
+                    name="lastname"
+                    value={customerData.lastname}
+                    onChange={handleInputChange}
+                    className="input-underline"
+                  />
+                </div>
+                <div>
+                  <label className="block text-d1d5db font-medium text-d1d5db">age:</label>
                   <input
                     type="number"
                     name="age"
@@ -85,21 +96,21 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-black-700">Gender:</label>
+                  <label className="block text-d1d5db font-medium text-d1d5db">gender:</label>
                   <select
                     name="gender"
                     value={customerData.gender}
                     onChange={handleInputChange}
                     className="input-underline"
                   >
-                    <option value="" disabled>Select gender</option>
+                    <option value="" disabled>select gender</option>
-                    <option value="male">Male</option>
+                    <option value="male">male</option>
-                    <option value="female">Female</option>
+                    <option value="female">female</option>
-                    <option value="other">Other</option>
+                    <option value="other">other</option>
                   </select>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-black-700">Email:</label>
+                  <label className="block text-d1d5db font-medium text-d1d5db">email:</label>
                   <input
                     type="email"
                     name="email"
@@ -109,7 +120,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-black-700">Address:</label>
+                  <label className="block text-d1d5db font-medium text-d1d5db">address:</label>
                   <input
                     type="text"
                     name="address"
@@ -119,7 +130,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-black-700">Mobile No:</label>
+                  <label className="block text-d1d5db font-medium text-d1d5db">mobile no:</label>
                   <input
                     type="text"
                     name="mobile"
@@ -130,8 +141,8 @@ const AddCustomer = () => {
                 </div>
                 <br />
                 <div className="text-center">
-                  <button type="submit" className="bg-orange-500 text-black px-4 py-2 rounded-md font-semibold text-sm">
+                  <button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold text-sm">
-                    Save Information
+                    save information
                   </button>
                 </div>
               </form>

src/components/customer/CustomerList.css

@@ -1,7 +1,7 @@
 .customer-list {
     padding: 20px;
-    background-color: #09090B; 
+    background-color: #ffffff; 
-    color: #09090B; 
+    /* color: #09090B;  */
     border-radius: 8px;
     max-width: 800px;
     margin: 0 auto; 
@@ -21,7 +21,7 @@
   .add-customer-button {
     padding: 10px 20px;
     background-color: #0e355b;
-    color: #09090B;
+    /* color: #09090B; */
     border: none;
     cursor: pointer;
     border-radius: 5px;
@@ -40,22 +40,22 @@
   
   .customer-table th,
   .customer-table td {
-    border: 1px solid #09090B; 
+    border: 1px solid #ffffff; 
     padding: 10px;
     text-align: left;
   }
   
-  .customer-table th {
+   .customer-table th {
     background-color: #09090B; 
-  }
+  } 
   
-  .customer-table tbody tr:nth-child(odd) {
+   .customer-table tbody tr:nth-child(odd) {
     background-color: #09090B; 
-  }
+  } 
   
-  .customer-table tbody tr:nth-child(even) {
+   .customer-table tbody tr:nth-child(even) {
     background-color: #09090B; 
-  }
+  } 
   
   .customer-table tbody tr:hover {
     background-color: #0e355b; 
@@ -80,7 +80,7 @@
     background-color: transparent;
     border: none;
     border-bottom: 1px solid #b3b3b3;
-    color: #b3b3b3;
+    color: #e8e8e8;
     width: 100%;
     padding: 0.5rem 0;
     margin-bottom: 20px;
@@ -89,6 +89,6 @@
   }
   
   .input-underline:focus {
-    border-bottom-color: #F97316; /* Orange underline on focus */
+    border-bottom-color: #4b5563; /* Orange underline on focus */
   }
   

src/components/customer/CustomerList.jsx

@@ -1,26 +1,26 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Sidebar from '../sidebar/Sidebar';
-import axiosInstance from '../../api/axiosConfig'; 
+import axiosInstance from '../../api/axiosConfig';
+
 const CustomerList = () => {
   const [customers, setCustomers] = useState([]);
   const navigate = useNavigate();
 
   useEffect(() => {
     // Fetch the customers data from the JSON file
-    getCustomers()
+    getCustomers();
   }, []);
 
   const getCustomers = async () => {
     try {
       const response = await axiosInstance.get('http://localhost:5000/customers');
       let customers_data = response.data; // List of customers
-      setCustomers(customers_data)
+      setCustomers(customers_data);
     } catch (error) {
       throw error;
     }
   };
-  
 
   const handleAddCustomer = () => {
     navigate('/add-customer');
@@ -29,38 +29,50 @@ const CustomerList = () => {
   return (
     <div className="flex flex-row min-h-screen">
       <Sidebar />
-      <div className="w-full flex flex-col bg-#090909B text-white">
+      <div className="flex-grow p-6 bg-gray-100">
-        <div className="bg-[#090909B] text-gray-300 p-6 rounded-lg">
+        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="flex justify-between items-center mb-4">
+          <div className="flex justify-between items-center mb-6">
-            <h1 className="text-xl font-semibold text-#0e355b">Customers List</h1>
+            <h1 className="text-2xl font-semibold text-gray-800">Customers List</h1>
             <button
-              className="bg-orange-500 text-black px-4 py-2 rounded-md text-sm"
+              className="bg-#0e355b text-d1d5db px-4 py-2 rounded-md text-sm"
               onClick={handleAddCustomer}
             >
               Add New Customer
             </button>
           </div>
           <div className="flex items-center mb-4">
-            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <svg
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+              className="w-5 h-5 mr-2 text-gray-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+              />
             </svg>
-            <span className="text-sm">Filter</span>
+            <span className="text-sm text-gray-600">Filter</span>
           </div>
-          <p className="text-sm mb-4">Total Customers ({customers.length})</p>
+          <p className="text-sm text-gray-600 mb-4">Total Customers ({customers.length})</p>
-          <table className="w-full">
+          <table className="w-full bg-white">
             <thead>
-              <tr className="text-left text-xs uppercase">
+              <tr className="text-left text-xs uppercase text-gray-600 border-b">
                 <th className="py-2">#</th>
-                <th className="py-2">Customer ID</th>
+                <th className="py-2">customer id</th>
-                <th className="py-2">Customer Name</th>
+                <th className="py-2">customer fullname</th>
               </tr>
             </thead>
             <tbody>
               {customers.map((customer, index) => (
-                <tr key={customer.id} className="border-t border-gray-700">
+                <tr key={customer.id} className="border-b last:border-none">
-                  <td className="py-2">{index + 1}</td>
+                  <td className="py-2 text-gray-800">{index + 1}</td>
-                  <td className="py-2">{customer.id}</td>
+                  <td className="py-2 text-gray-800">{customer.id}</td>
-                  <td className="py-2">{customer.name}</td>
+                  <td className="py-2 text-gray-800">{customer.firstname} {customer.lastname} </td>
+                  
                 </tr>
               ))}
             </tbody>

src/components/customer/CustomerMeasurements.jsx

@@ -25,50 +25,50 @@ const CustomerMeasurements = () => {
     <div className="flex flex-row">
       <Sidebar />
       <div className="w-full flex flex-col min-h-screen text-white">
-        <div className="min-h-screen text-gray-300 p-6">
+        <div className="min-h-screen text-#4b5563 p-6">
           <div className="flex justify-between items-center mb-6">
             <h1 className="text-2xl font-semibold text-#0e355b">Customer Measurements</h1>
-            <Link to="/CategoryList" className="text-0e355b">skip for now</Link>
+            <Link to="/CategoryList" className="text-#0e355b">skip for now</Link>
           </div>
           <Form onFinish={onFinish} className="space-y-4">
-            <h2 className="text-lg font-semibold text-gray-400">Upper Body Measurements</h2>
+            <h2 className="text-lg font-semibold text-#0e355b">Upper Body Measurements</h2>
-            <Form.Item name="neck" label={<span className="text-white">Neck Circumference (in inch)</span>}>
+            <Form.Item name="neck" label={<span className="text-#0e355b">Neck Circumference (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="chest" label={<span className="text-white">Chest Circumference (in inch)</span>}>
+            <Form.Item name="chest" label={<span className="text-#0e355b">Chest Circumference (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="waist" label={<span className="text-white">Waist Circumference (in inch)</span>}>
+            <Form.Item name="waist" label={<span className="text-#0e355b">Waist Circumference (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="shoulder" label={<span className="text-white">Shoulder Width (in inch)</span>}>
+            <Form.Item name="shoulder" label={<span className="text-#0e355b">Shoulder Width (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="arm" label={<span className="text-white">Arm Length (in inch)</span>}>
+            <Form.Item name="arm" label={<span className="text-#0e355b">Arm Length (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="sleeve" label={<span className="text-white">Sleeve Length (in inch)</span>}>
+            <Form.Item name="sleeve" label={<span className="text-#0e355b">Sleeve Length (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
 
-            <h2 className="text-lg font-semibold text-gray-400">Lower Body Measurements</h2>
+            <h2 className="text-lg font-semibold text-#0e355b">Lower Body Measurements</h2>
-            <Form.Item name="hip" label={<span className="text-white">Hip Circumference (in inch)</span>}>
+            <Form.Item name="hip" label={<span className="text-#0e355b">Hip Circumference (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="inseam" label={<span className="text-white">Inseam (in inch)</span>}>
+            <Form.Item name="inseam" label={<span className="text-#0e355b">Inseam (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="outseam" label={<span className="text-white">Out Seam (in inch)</span>}>
+            <Form.Item name="outseam" label={<span className="text-#0e355b">Out Seam (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="thigh" label={<span className="text-white">Thigh Circumference (in inch)</span>}>
+            <Form.Item name="thigh" label={<span className="text-#0e355b">Thigh Circumference (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
-            <Form.Item name="ankle" label={<span className="text-white">Ankle Circumference (in inch)</span>}>
+            <Form.Item name="ankle" label={<span className="text-#0e355b">Ankle Circumference (in inch)</span>}>
-              <Input className="block text-sm font-medium text-black-400" />
+              <Input className="block text-sm font-medium text-#4b5563" />
             </Form.Item>
             <Form.Item>
-              <Button type="primary" htmlType="submit" className="w-full py-4 bg-orange-500 text-black rounded-md font-semibold mb-4 hover:bg-orange-400">
+              <Button type="primary" htmlType="submit" className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676">
                 Save Measurements
               </Button>
             </Form.Item>

src/components/employee/EmployeeDashboard.jsx

@@ -22,19 +22,19 @@ const HomePage = () => {
           <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-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('/customers')}
             >
               create a new order
             </button>
             <button
-              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('')}
             >
               view orders
             </button>
             <button
-              className="w-full py-4 bg-#0e355b text-black rounded-md font-semibold mb-4 hover:bg-#154676"
+              className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('')}
             >
               view customers

src/components/sidebar/AdminSidebar.jsx

@@ -1,7 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Layout, Drawer, Button } from 'antd';
-
+import { Link } from 'react-router-dom';
-// Import your SVG icons
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons';
+import BrookslogoIcon from '../../assets/thob-data/BrookslogoIcon.svg';
 import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
 import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
 import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
@@ -12,49 +16,65 @@ import MeasurmentsIcon from '../../assets/thob-data/MeasurmentsIcon.svg';
 import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
 import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
 
-const Sidebar = () => {
+const { Sider } = Layout;
-  const navigate = useNavigate();
 
-  const handleNavigation = (link) => {
+const AdminSidebar = () => {
-    navigate(link);
+  const [visible, setVisible] = useState(false);
+
+  const showDrawer = () => {
+    setVisible(true);
+  };
+
+  const closeDrawer = () => {
+    setVisible(false);
   };
 
   return (
-    <div className="flex">
+    <>
-      <div className="w-16 min-h-screen bg-black flex flex-col items-center py-4">
+      <Sider
-        <div className="text-orange-500 text-4xl mb-10">t.</div>
+        className="desktop-sidebar"
-        <nav className="flex flex-col items-center space-y-4">
+        breakpoint="lg"
-          <div onClick={() => handleNavigation('/admin-dashboard')} className="cursor-pointer">
+        collapsedWidth="0"
-            <img src={HomeIcon} alt="Home" className="w-8 h-8" />
+        width={80}
-          </div>
+        style={{ height: '100vh' }}
-          <div onClick={() => handleNavigation('/admin/manage-customers')} className="cursor-pointer">
+      >
-            <img src={AddCustomerIcon} alt="Add Customer" className="w-8 h-8" />
+        <div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>   
-          </div>
+          <Link to="/admin" className="my-6">
-          <div onClick={() => handleNavigation('/admin/orders')} className="cursor-pointer">
+            <img src={BrookslogoIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
-            <img src={OrdersIcon} alt="Orders" className="w-8 h-8" />
+          </Link>
-          </div>
+        </div>
-          <div onClick={() => handleNavigation('/admin/categories')} className="cursor-pointer">
+        <div className="flex flex-col items-center">
-            <img src={CategoriesIcon} alt="Categories" className="w-8 h-8" />
+          <Link to="/admin/home" className="my-6">
-          </div>
+            <img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
-          <div onClick={() => handleNavigation('/admin/catalog')} className="cursor-pointer">
+          </Link>
-            <img src={CatalogIcon} alt="Catalog" className="w-8 h-8" />
+          <Link to="/admin/categories" className="my-6">
-          </div>
+            <img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
-          <div onClick={() => handleNavigation('/admin/employee')} className="cursor-pointer">
+          </Link>
-            <img src={EmployeeIcon} alt="employee" className="w-8 h-8" />
+          <Link to="/admin/add-customer" className="my-6">
-          </div>
+            <img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
-          <div onClick={() => handleNavigation('/admin/measurements')} className="cursor-pointer">
+          </Link>
-            <img src={MeasurmentsIcon} alt="measurements" className="w-8 h-8" />
+          <Link to="/admin/orders" className="my-6">
-          </div>
+            <img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
-          <div onClick={() => handleNavigation('/admin/profile')} className="cursor-pointer">
+          </Link>
-            <img src={ProfileIcon} alt="Profile" className="w-8 h-8" />
+          <Link to="/admin/catalog" className="my-6">
-          </div>
+            <img src={CatalogIcon} alt="Catalog" className="hover:opacity-75 sidebar-icon" />
-          <div onClick={() => handleNavigation('/admin/logout')} className="cursor-pointer mt-auto mb-4">
+          </Link>
-            <img src={LogoutIcon} alt="Logout" className="w-8 h-8" />
+          <Link to="/admin/employee" className="my-6">
-          </div>
+            <img src={EmployeeIcon} alt="Employee" className="hover:opacity-75 sidebar-icon" />
-        </nav>
+          </Link>
-      </div>
+          <Link to="/admin/measurements" className="my-6">
-    </div>
+            <img src={MeasurmentsIcon} alt="Measurements" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+          <Link to="/admin/profile" className="my-6">
+            <img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+          <Link to="/admin/logout" className="my-6">
+            <img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
+          </Link>
+        </div>
+      </Sider>
+    </>
   );
 };
 
-export default Sidebar;
+export default AdminSidebar;

src/components/sidebar/EmployeeSidebar.jsx

@@ -33,7 +33,7 @@ const EmployeeSidebar = () => {
         className="desktop-sidebar"
         breakpoint="lg"
         collapsedWidth="0"
-        width={80}
+        width={70}
         style={{ height: '100vh' }}
       >
         <div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>   
@@ -42,22 +42,22 @@ const EmployeeSidebar = () => {
           </Link>
         </div>
         <div className="flex flex-col items-center">
-          <Link to="/employee" className="my-6">
+          <Link to="/employee/home" className="my-6">
             <img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/categories" className="my-6">
+          <Link to="/employee/categories" className="my-6">
             <img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
           </Link>
           <Link to="/customers" className="my-6">
             <img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/orders" className="my-6">
+          <Link to="/employee/orders" className="my-6">
             <img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/profile" className="my-6">
+          <Link to="/employee/profile" className="my-6">
             <img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/logout" className="my-6">
+          <Link to="/employee/logout" className="my-6">
             <img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
           </Link>
         </div>

src/index.css

@@ -61,13 +61,13 @@ button:focus-visible {
     color: #154676;
   }
   button {
-    background-color: #f9f9f9;
+    background-color: #0e355b;
   }
 }
 
-.input-underline {
+ .input-underline {
-  @apply w-full border-b-2 border-gray-300 focus:border-orange-500 outline-none;
+  @apply w-full border-b-2 border-gray-300  outline-none;
-  max-width: 300px; /* Set a fixed max-width for uniformity */
+   max-width: 300px; /* Set a fixed max-width for uniformity  */
   padding: 0.5rem;
-}
+}