css and layout implementation

src/components/Auth/LoginPage.jsx

@@ -44,8 +44,8 @@ const LoginPage = () => {
     <div className="flex flex-row min-h-screen justify-center items-center">
       <div className="login-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
         <div className="w-full">
-          <h1>Welcome Back</h1>
+          <h1>welcome back</h1>
-          <p>Be among the first to experience 3D magic! Register for private alpha.</p>
+          <p>be among the first to experience 3D magic! register for private alpha.</p>
           {error && <p className="error-message">{error}</p>}
           <form onSubmit={handleLogin} className="space-y-4">
             <label htmlFor="email" className="block"></label>
@@ -74,7 +74,7 @@ const LoginPage = () => {
               <a href="#">Forgot password?</a>
             </div>
             <button type="submit" className="login-button">
-              Login
+              login
             </button>
           </form>
         </div>

src/components/admin/AddEmployee.css

@@ -0,0 +1,18 @@
+.employee-image-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .employee-image-container button {
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  
+  .input-underline:focus {
+    border-color: #4b5563; /* Adjust focus border color */
+  }
+  

src/components/admin/AddEmployee.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Sidebar from '../sidebar/Sidebar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import axiosInstance from '../../api/axiosConfig';
 
 const AddEmployee = () => {
@@ -17,25 +19,28 @@ const AddEmployee = () => {
     pincode: '',
     city_id: '',
     mobile: '',
+    image: null,
   });
   const [cities, setCities] = useState([]);
+  const [imagePreview, setImagePreview] = useState(null);
 
-  useEffect(() => {
+  // Uncomment to fetch cities data from backend
-    const fetchCities = async () => {
+  // useEffect(() => {
-      try {
+  //   const fetchCities = async () => {
-        const response = await axiosInstance.get('/cities');
+  //     try {
-        if (Array.isArray(response.data)) {
+  //       const response = await axiosInstance.get('/cities');
-          setCities(response.data);
+  //       if (Array.isArray(response.data)) {
-        } else {
+  //         setCities(response.data);
-          console.error('Error: Data is not an array', response.data);
+  //       } else {
-        }
+  //         console.error('Error: Data is not an array', response.data);
-      } catch (error) {
+  //       }
-        console.error('Error fetching cities:', error.response || error.message);
+  //     } catch (error) {
-      }
+  //       console.error('Error fetching cities:', error.response || error.message);
-    };
+  //     }
+  //   };
 
-    fetchCities();
+  //   fetchCities();
-  }, []);
+  // }, []);
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
@@ -45,10 +50,30 @@ const AddEmployee = () => {
     });
   };
 
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setEmployeeData({
+        ...employeeData,
+        image: file,
+      });
+      setImagePreview(URL.createObjectURL(file));
+    }
+  };
+
   const handleAddEmployeeSubmit = async (e) => {
     e.preventDefault();
+    const formData = new FormData();
+    Object.keys(employeeData).forEach((key) => {
+      formData.append(key, employeeData[key]);
+    });
+
     try {
-      await axiosInstance.post('http://localhost:5000/employees', employeeData);
+      await axiosInstance.post('http://localhost:5000/employees', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
       navigate('/employees');
     } catch (error) {
       console.error('Error adding employee:', error.response || error.message);
@@ -60,144 +85,202 @@ const AddEmployee = () => {
       <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">
+          <div className="flex items-center mb-6">
-            <h1 className="text-2xl font-semibold text-blue-900">creating employee account</h1>
+            <Link to="/employees" className="text-#0e355b text-xl mr-4">
-            <Link to="/" className="text-blue-900">skip for now</Link>
+              <FontAwesomeIcon icon={faChevronLeft} />
+            </Link>
+            <h1 className="text-2xl font-semibold text-#0e355b">
+              create employee account
+            </h1>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="flex justify-center">
-            <div className="space-y-6">
+            <div className="space-y-6 w-full max-w-4xl">
               <div className="text-center">
                 <div className="inline-block relative">
-                  <div className="bg-gray-300 w-24 h-24 rounded-full mx-auto"></div>
+                  <div className="bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden">
-                  <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">
+                    {imagePreview ? (
-                    add employee image
+                      <img
+                        src={imagePreview}
+                        alt="Employee"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center text-gray-500">
+                        No image
+                      </div>
+                    )}
+                  </div>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    id="imageUpload"
+                    onChange={handleImageChange}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => document.getElementById('imageUpload').click()}
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full"
+                  >
+                    add customer image
                   </button>
                 </div>
               </div>
-            </div>
+              <form onSubmit={handleAddEmployeeSubmit} className="space-y-4">
-            <div className="md:col-span-2 space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              <form onSubmit={handleAddEmployeeSubmit}>
                   <div>
-                  <label className="block text-gray-800 font-medium">employee firstname:</label>
+                    <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"
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
                     />
                   </div>
                   <div>
-                  <label className="block text-gray-800 font-medium">employee lastname:</label>
+                    <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"
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
                     />
                   </div>
                   <div>
-                  <label className="block text-gray-800 font-medium">age:</label>
+                    <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"
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
                     />
                   </div>
                   <div>
-                  <label className="block text-gray-800 font-medium">gender:</label>
+                    <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"
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
                     >
-                    <option value="" disabled>select gender</option>
+                      <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>
+                    <label className="block text-gray-800 font-medium">
-                  <input
+                      mobile:
-                    type="email"
+                    </label>
-                    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 line 1:</label>
-                  <input
-                    type="text"
-                    name="address_line_1"
-                    value={employeeData.address_line_1}
-                    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 line 2:</label>
-                  <input
-                    type="text"
-                    name="address_line_2"
-                    value={employeeData.address_line_2}
-                    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">nearby landmark:</label>
-                  <input
-                    type="text"
-                    name="nearby_landmark"
-                    value={employeeData.nearby_landmark}
-                    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">pincode:</label>
-                  <input
-                    type="text"
-                    name="pincode"
-                    value={employeeData.pincode}
-                    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">city:</label>
-                  <select
-                    name="city_id"
-                    value={employeeData.city_id}
-                    onChange={handleInputChange}
-                    className="input-underline w-full p-2 border-b border-gray-400 focus:border-#4b5563"
-                  >
-                    <option value="" disabled>select city</option>
-                    {Array.isArray(cities) && cities.map(city => (
-                      <option key={city.id} value={city.id}>{city.name}</option>
-                    ))}
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-gray-800 font-medium">mobile number:</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"
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
                     />
                   </div>
-                <br />
+                  <div className="md:col-span-2 lg:col-span-3">
-                <div className="text-center">
+                    <label className="block text-gray-800 font-medium">
-                  <button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md font-semibold">
+                      address line 1:
+                    </label>
+                    <input
+                      type="text"
+                      name="address_line_1"
+                      value={employeeData.address_line_1}
+                      onChange={handleInputChange}
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
+                    />
+                  </div>
+                  <div className="md:col-span-2 lg:col-span-3">
+                    <label className="block text-gray-800 font-medium">
+                      address line 2:
+                    </label>
+                    <input
+                      type="text"
+                      name="address_line_2"
+                      value={employeeData.address_line_2}
+                      onChange={handleInputChange}
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
+                    />
+                  </div>
+                  <div className="md:col-span-2 lg:col-span-3">
+                    <label className="block text-gray-800 font-medium">
+                      nearby landmark:
+                    </label>
+                    <input
+                      type="text"
+                      name="nearby_landmark"
+                      value={employeeData.nearby_landmark}
+                      onChange={handleInputChange}
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
+                    />
+                  </div>
+                  <div className="md:col-span-2 lg:col-span-3">
+                    <label className="block text-gray-800 font-medium">
+                      pincode:
+                    </label>
+                    <input
+                      type="text"
+                      name="pincode"
+                      value={employeeData.pincode}
+                      onChange={handleInputChange}
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
+                    />
+                  </div>
+                  <div className="md:col-span-2 lg:col-span-3">
+                    <label className="block text-gray-800 font-medium">
+                      city:
+                    </label>
+                    <select
+                      name="city_id"
+                      value={employeeData.city_id}
+                      onChange={handleInputChange}
+                      className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
+                    >
+                      <option value="" disabled>
+                        select city
+                      </option>
+                      {Array.isArray(cities) &&
+                        cities.map((city) => (
+                          <option key={city.id} value={city.id}>
+                            {city.name}
+                          </option>
+                        ))}
+                    </select>
+                  </div>
+                  <div className="md:col-span-2 lg:col-span-3">
+                    <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-gray-700"
+                    />
+                  </div>
+                </div>
+                <div className="text-center mt-6">
+                  <button
+                    type="submit"
+                    className="bg-#0e355b text-white px-4 py-2 rounded-md font-semibold"
+                  >
                     create account
                   </button>
                 </div>

src/components/admin/AdminDashboard.jsx

@@ -25,10 +25,10 @@ const AdminDashboard = () => {
       <div className="w-full flex flex-col min-h-screen text-white">
         <header className="w-full p-4 flex justify-between items-center">
           <div className="flex items-center">
-            <h1 className="text-#0e355b text-2xl font-bold">Admin Dashboard</h1>
+            <h1 className="text-#0e355b text-2xl font-bold">admin dashboard</h1>
           </div>
           <div>
-            <p className="text-#4b5563">Welcome back {userName}</p>
+            <p className="text-#4b5563">welcome back {userName}</p>
           </div>
         </header>
         <main className="flex-1 flex flex-col items-center justify-center p-6">
@@ -38,19 +38,19 @@ const AdminDashboard = () => {
               className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('')}
             >
-              View Orders
+              view orders
             </button>
             <button
               className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('/employees')}
             >
-              View Employees
+              view employees
             </button>
             <button
               className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('')}
             >
-              View Customers
+              view customers
             </button>
           </div>
         </main>

src/components/admin/EmployeeList.jsx

@@ -58,7 +58,7 @@ const EmployeeList = ({ className = '' }) => {
                 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>
+            <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">

src/components/customer/AddCustomer.jsx

@@ -19,9 +19,12 @@ const AddCustomer = () => {
     pincode: '',
     city_id: '',
     mobile: '',
+    image: null,
   });
   const [cities, setCities] = useState([]);
+  const [imagePreview, setImagePreview] = useState(null);
 
+  // Uncomment to fetch cities data from backend
   // useEffect(() => {
   //   const fetchCities = async () => {
   //     try {
@@ -47,10 +50,30 @@ const AddCustomer = () => {
     });
   };
 
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setCustomerData({
+        ...customerData,
+        image: file,
+      });
+      setImagePreview(URL.createObjectURL(file));
+    }
+  };
+
   const handleAddCustomerSubmit = async (e) => {
     e.preventDefault();
+    const formData = new FormData();
+    Object.keys(customerData).forEach((key) => {
+      formData.append(key, customerData[key]);
+    });
+
     try {
-      await axiosInstance.post('http://localhost:5000/customers', customerData);
+      await axiosInstance.post('http://localhost:5000/customers', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
       navigate('/customers');
     } catch (error) {
       console.error('Error adding customer:', error.response || error.message);
@@ -63,37 +86,64 @@ const AddCustomer = () => {
       <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">
-            <span
+            <div className="flex items-center mb-6">
-              onClick={() => navigate(-1)}
+              <Link to="/customers" className="text-#0e355b text-xl mr-4">
-              className="text-#0e355b cursor-pointer hover:text-#d1d5db transition font-bold"
+                <FontAwesomeIcon icon={faChevronLeft} />
-            >
+              </Link>
-              <FontAwesomeIcon icon={faChevronLeft} /> Add Customer
+              <h1 className="text-2xl font-semibold text-#0e355b">
-            </span>
+                add customer
-            <Link to="/CategoryList" className="text-blue-900">Skip for now</Link>
+              </h1>
+            </div>
+            <Link to="/CategoryList" 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>
+                  <div className="bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden">
-                  <button className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full">
+                    {imagePreview ? (
-                    Add Customer Image
+                      <img
+                        src={imagePreview}
+                        alt="Customer"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center text-gray-500">
+                        no image
+                      </div>
+                    )}
+                  </div>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    id="imageUpload"
+                    onChange={handleImageChange}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => document.getElementById('imageUpload').click()}
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full"
+                  >
+                    
                   </button>
                 </div>
               </div>
               <div>
                 <Link to="/add-customer">
-                  <h2 className="text-lg font-semibold">Customer Information</h2>
+                  <h2 className="text-lg font-semibold">customer information</h2>
                 </Link>
                 <Link to="/measurements">
-                  <h2 className="text-lg font-semibold">Measurements</h2>
+                  <h2 className="text-lg font-semibold">measurements</h2>
                 </Link>
               </div>
             </div>
             <div className="md:col-span-2 space-y-4">
               <form onSubmit={handleAddCustomerSubmit}>
                 <div>
-                  <label className="block text-gray-800 font-medium">Customer Firstname:</label>
+                  <label className="block text-gray-800 font-medium">
+                    customer firstname:
+                  </label>
                   <input
                     type="text"
                     name="firstname"
@@ -103,7 +153,9 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">Customer Lastname:</label>
+                  <label className="block text-gray-800 font-medium">
+                    customer lastname:
+                  </label>
                   <input
                     type="text"
                     name="lastname"
@@ -113,7 +165,9 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">Age:</label>
+                  <label className="block text-gray-800 font-medium">
+                    age:
+                  </label>
                   <input
                     type="number"
                     name="age"
@@ -123,21 +177,27 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">Gender:</label>
+                    <label className="block text-gray-800 font-medium">
+                      gender:
+                    </label>
                     <select
                       name="gender"
                       value={customerData.gender}
                       onChange={handleInputChange}
                       className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
                     >
-                    <option value="" disabled>Select Gender</option>
+                      <option value="" disabled>
-                    <option value="male">Male</option>
+                        select gender
-                    <option value="female">Female</option>
+                      </option>
-                    <option value="other">Other</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>
+                  <label className="block text-gray-800 font-medium">
+                    email:
+                  </label>
                   <input
                     type="email"
                     name="email"
@@ -147,7 +207,9 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">Address Line 1:</label>
+                  <label className="block text-gray-800 font-medium">
+                    address line 1:
+                  </label>
                   <input
                     type="text"
                     name="address_line_1"
@@ -157,7 +219,9 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">Address Line 2:</label>
+                  <label className="block text-gray-800 font-medium">
+                    address line 2:
+                  </label>
                   <input
                     type="text"
                     name="address_line_2"
@@ -167,7 +231,9 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">Nearby Landmark:</label>
+                  <label className="block text-gray-800 font-medium">
+                    nearby landmark:
+                  </label>
                   <input
                     type="text"
                     name="nearby_landmark"
@@ -177,7 +243,9 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">Pincode:</label>
+                  <label className="block text-gray-800 font-medium">
+                    pincode:
+                  </label>
                   <input
                     type="text"
                     name="pincode"
@@ -187,33 +255,44 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">City:</label>
+                  <label className="block text-gray-800 font-medium">
+                    city:
+                  </label>
                   <select
                     name="city_id"
                     value={customerData.city_id}
                     onChange={handleInputChange}
                     className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
                   >
-                    <option value="" disabled>Select City</option>
+                    <option value="" disabled>
-                    {Array.isArray(cities) && cities.map(city => (
+                      select city
-                      <option key={city.id} value={city.id}>{city.name}</option>
+                    </option>
+                    {Array.isArray(cities) &&
+                      cities.map((city) => (
+                        <option key={city.id} value={city.id}>
+                          {city.name}
+                        </option>
                       ))}
                   </select>
                 </div>
                 <div>
-                  <label className="block text-gray-800 font-medium">Mobile Number:</label>
+                  <label className="block text-gray-800 font-medium">
+                    mobile:
+                  </label>
                   <input
-                    type="text"
+                    type="tel"
                     name="mobile"
                     value={customerData.mobile}
                     onChange={handleInputChange}
                     className="input-underline w-full p-2 border-b border-gray-400 focus:border-gray-700"
                   />
                 </div>
-                <br />
+                <div className="flex justify-end">
-                <div className="text-center">
+                  <button
-                  <button type="submit" className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm">
+                    type="submit"
-                    Save Information
+                    className="bg-#0e355b text-white py-2 px-4 rounded-md"
+                  >
+                    add customer
                   </button>
                 </div>
               </form>

src/components/customer/CustomerList.css

@@ -46,15 +46,15 @@
   }
   
    .customer-table th {
-    background-color: #09090B; 
+    background-color: #ffffff; 
   } 
   
    .customer-table tbody tr:nth-child(odd) {
-    background-color: #09090B; 
+    background-color: #ffffff; 
   } 
   
    .customer-table tbody tr:nth-child(even) {
-    background-color: #09090B; 
+    background-color: #ffffff; 
   } 
   
   .customer-table tbody tr:hover {

src/components/customer/CustomerList.jsx

@@ -32,12 +32,12 @@ const CustomerList = () => {
       <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">Customers List</h1>
+            <h1 className="text-2xl font-semibold text-gray-800">customers list</h1>
             <button
               className="bg-#0e355b text-#d1d5db px-4 py-2 rounded-md text-sm"
               onClick={handleAddCustomer}
             >
-              Add New Customer
+              add new customer
             </button>
           </div>
           <div className="flex items-center mb-4">
@@ -55,9 +55,9 @@ const CustomerList = () => {
                 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>
+            <span className="text-sm text-gray-600">filter</span>
           </div>
-          <p className="text-sm text-gray-600 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 bg-white">
             <thead>
               <tr className="text-left text-xs uppercase text-gray-600 border-b">

src/components/customer/CustomerMeasurements.jsx

@@ -27,45 +27,45 @@ const CustomerMeasurements = () => {
       <div className="w-full flex flex-col min-h-screen text-white">
         <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>
+            <h1 className="text-2xl font-semibold text-#0e355b">customer measurements</h1>
             <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-#0e355b">Upper Body Measurements</h2>
+            <h2 className="text-lg font-semibold text-#0e355b">upper body measurements</h2>
-            <Form.Item name="neck" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="chest" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="waist" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="shoulder" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="arm" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="sleeve" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
 
-            <h2 className="text-lg font-semibold text-#0e355b">Lower Body Measurements</h2>
+            <h2 className="text-lg font-semibold text-#0e355b">lower body measurements</h2>
-            <Form.Item name="hip" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="inseam" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="outseam" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="thigh" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 focus:ring-0" />
             </Form.Item>
-            <Form.Item name="ankle" label={<span className="text-#0e355b">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-#4b5563" />
+              <Input className="w-full border-0 border-b border-gray-400 focus:border-#4b5563 " />
             </Form.Item>
             <Form.Item>
               <div className="text-center">

src/components/employee/EmployeeDashboard.jsx

@@ -24,10 +24,10 @@ const HomePage = () => {
       <div className="w-full flex flex-col min-h-screen text-white">
         <header className="w-full p-4 flex justify-between items-center">
           <div className="flex items-center">
-            <h1 className="text-#0e355b text-2xl font-bold">Home</h1>
+            <h1 className="text-#0e355b text-2xl font-bold">home</h1>
           </div>
           <div>
-            <p className="text-#4b5563">Welcome back, {userName}</p>
+            <p className="text-#4b5563">welcome back, {userName}</p>
           </div>
         </header>
         <main className="flex-1 flex flex-col items-center justify-center p-6">
@@ -37,19 +37,19 @@ const HomePage = () => {
               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
+              create a new order
             </button>
             <button
               className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('')}
             >
-              View Orders
+              view orders
             </button>
             <button
               className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676"
               onClick={() => handleClick('')}
             >
-              View Customers
+              view customers
             </button>
           </div>
         </main>

src/components/sidebar/EmployeeSidebar.jsx

@@ -1,10 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { Layout, Drawer, Button } from 'antd';
+import { Layout } from 'antd';
 import { Link } from 'react-router-dom';
-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';
@@ -16,32 +12,21 @@ import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
 const { Sider } = Layout;
 
 const EmployeeSidebar = () => {
-  const [visible, setVisible] = useState(false);
-
-  const showDrawer = () => {
-    setVisible(true);
-  };
-
-  const closeDrawer = () => {
-    setVisible(false);
-  };
-
   return (
-    <>
-      
     <Sider
       className="desktop-sidebar"
       breakpoint="lg"
       collapsedWidth="0"
       width={70}
-        style={{ height: '100vh' }}
+      style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
     >
-        <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 className="flex flex-col items-center mt-4">
-        <Link to="/employee" className="my-6">
+        <div className="flex items-center justify-center h-16 w-16 mb-5 bg-white">
-            <img src={BrookslogoIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
+          <Link to="">
+            <img src={BrookslogoIcon} alt="Brooks Bingham Logo" className="hover:opacity-75 sidebar-icon" />
           </Link>
         </div>
-        <div className="flex flex-col items-center">
+        <div className="flex flex-col items-center flex-grow">
           <Link to="/employee/home" className="my-6">
             <img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
           </Link>
@@ -57,17 +42,15 @@ const EmployeeSidebar = () => {
           <Link to="/employee/profile" className="my-6">
             <img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
           </Link>
-          <Link to="/employee/logout" className="my-6">
+        </div>
+      </div>
+      <div className="flex items-center justify-center mb-4">
+        <Link to="/employee/logout">
           <img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
         </Link>
       </div>
     </Sider>
-    </>
   );
 };
 
 export default EmployeeSidebar;
-
-
-
-