added custom measurement to the web application

src/App.jsx

@@ -67,6 +67,7 @@ const App = () => {
                   <Route path="/setmeasurements" element={<SetMeasurements />} />
                   <Route path="/measurements/standard" element={<StandardMeasurements />} />
                   <Route path="/measurements/custom" element={<CustomMeasurements />} />
+                  <Route path="/orders" element={<CustomMeasurements />} />
                 </Routes>
               </Content>
             </div>

src/components/categories/CategoryList.jsx

@@ -8,10 +8,10 @@ const CategoryList = () => {
 
   // Updated categories array with names and specifications
   const categories = [
-    { name: 'Shirts', image: 'https://img.freepik.com/premium-photo/blue-shirt-white-isolated_267651-1565.jpg?w=740', description: 'shirts' },
+    { name: 'Shirts', image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg', description: 'shirts' },
     { name: 'Suits', image: 'https://img.freepik.com/free-psd/realistic-suit-illustration_23-2151236757.jpg?t=st=1722512180~exp=1722515780~hmac=79030884ba3866ce8461b252477505e74e625c63012705c110eced45b59c63fb&w=740', description: 'suits' },
     { name: 'Tuxedos', image: 'https://img.freepik.com/premium-vector/businessman-suit_98292-5674.jpg?w=740', description: 'tuxedos' },
-    { name: 'Jackets', image: 'https://img.freepik.com/free-photo/still-life-rendering-jackets-display_23-2149745027.jpg?t=st=1722512352~exp=1722515952~hmac=ac34ad84d45b411fb64951e7324277994ed07ec0357b343ad4e5db09ea55e67f&w=360', description: 'jackets' },
+    { name: 'Jackets', image: 'https://i5.walmartimages.com/seo/Lmtime-Clearance-Men-s-Casual-Blazer-Suit-Jackets-Slim-Fit-Lightweight-Sport-Coat-Business-Coat-Suit-Tops-Jacket-One-Button-Grey-XXL_4277f765-9e49-4ed1-a4b1-c70c71d3d1f0.5c005fe2c8e9d110bfb00216fb52f77b.jpeg?odnHeight=768&odnWidth=768&odnBg=FFFFFF', description: 'jackets' },
   ];
 
   const handleClick = (category) => {

src/components/categories/JacketsProductList.jsx

@@ -5,12 +5,12 @@ import ProductRow from './ProductRow';
 import '../../styles/ProductList.css';
 
 const products = [
-  { id: 1, name: 'red bomber jacket', price: 129, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
+  { id: 1, name: 'red bomber jacket', price: 129, image: 'https://i5.walmartimages.com/seo/Lmtime-Clearance-Men-s-Casual-Blazer-Suit-Jackets-Slim-Fit-Lightweight-Sport-Coat-Business-Coat-Suit-Tops-Jacket-One-Button-Grey-XXL_4277f765-9e49-4ed1-a4b1-c70c71d3d1f0.5c005fe2c8e9d110bfb00216fb52f77b.jpeg?odnHeight=768&odnWidth=768&odnBg=FFFFFF' },
-  { id: 2, name: 'green utility jacket', price: 149, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
+  { id: 2, name: 'green utility jacket', price: 149, image: 'https://i5.walmartimages.com/seo/Lmtime-Clearance-Men-s-Casual-Blazer-Suit-Jackets-Slim-Fit-Lightweight-Sport-Coat-Business-Coat-Suit-Tops-Jacket-One-Button-Grey-XXL_4277f765-9e49-4ed1-a4b1-c70c71d3d1f0.5c005fe2c8e9d110bfb00216fb52f77b.jpeg?odnHeight=768&odnWidth=768&odnBg=FFFFFF' },
-  { id: 3, name: 'black leather jacket', price: 199, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
+  { id: 3, name: 'black leather jacket', price: 199, image: 'https://i5.walmartimages.com/seo/Lmtime-Clearance-Men-s-Casual-Blazer-Suit-Jackets-Slim-Fit-Lightweight-Sport-Coat-Business-Coat-Suit-Tops-Jacket-One-Button-Grey-XXL_4277f765-9e49-4ed1-a4b1-c70c71d3d1f0.5c005fe2c8e9d110bfb00216fb52f77b.jpeg?odnHeight=768&odnWidth=768&odnBg=FFFFFF' },
-  { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
+  { id: 4, name: 'blue aces', price: 99, image: 'https://i5.walmartimages.com/seo/Lmtime-Clearance-Men-s-Casual-Blazer-Suit-Jackets-Slim-Fit-Lightweight-Sport-Coat-Business-Coat-Suit-Tops-Jacket-One-Button-Grey-XXL_4277f765-9e49-4ed1-a4b1-c70c71d3d1f0.5c005fe2c8e9d110bfb00216fb52f77b.jpeg?odnHeight=768&odnWidth=768&odnBg=FFFFFF' },
-  { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
+  { id: 5, name: 'blue birdseye', price: 99, image: 'https://i5.walmartimages.com/seo/Lmtime-Clearance-Men-s-Casual-Blazer-Suit-Jackets-Slim-Fit-Lightweight-Sport-Coat-Business-Coat-Suit-Tops-Jacket-One-Button-Grey-XXL_4277f765-9e49-4ed1-a4b1-c70c71d3d1f0.5c005fe2c8e9d110bfb00216fb52f77b.jpeg?odnHeight=768&odnWidth=768&odnBg=FFFFFF' },
-  { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-psd/mens-bomber-jacket-mockup_1119-1729.jpg?w=996' },
+  { id: 6, name: 'blue hydrangea', price: 99, image: 'https://i5.walmartimages.com/seo/Lmtime-Clearance-Men-s-Casual-Blazer-Suit-Jackets-Slim-Fit-Lightweight-Sport-Coat-Business-Coat-Suit-Tops-Jacket-One-Button-Grey-XXL_4277f765-9e49-4ed1-a4b1-c70c71d3d1f0.5c005fe2c8e9d110bfb00216fb52f77b.jpeg?odnHeight=768&odnWidth=768&odnBg=FFFFFF' },
 ];
 
 const JacketsProductList = () => {

src/components/categories/ProductRow.jsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import '../../styles/ProductList.css';
 
-const ProductRow = ({ className = "", image17, shirts, onClick, propLeft, propTop }) => {
+const ProductRow = ({ className = "", image17, shirts, price, onClick, propLeft, propTop }) => {
   const productRowStyle = useMemo(() => {
     return {
       left: propLeft,
@@ -12,7 +12,7 @@ const ProductRow = ({ className = "", image17, shirts, onClick, propLeft, propTo
 
   return (
     <div
-      className={`h-88 w-88 m-0 rounded-lg flex flex-col items-start justify-start py-5 px-0 gap-4 text-center text-3xl  border border-gray-300 ${className}`}
+      className={`h-88 w-88 m-0 rounded-lg flex flex-col items-start justify-start py-5 px-0 gap-4 text-center text-3xl border border-gray-700 ${className}`}
       style={productRowStyle}
     >
       <img
@@ -21,15 +21,17 @@ const ProductRow = ({ className = "", image17, shirts, onClick, propLeft, propTo
         alt={shirts}
         src={image17}
       />
-      <div className="w-full flex flex-row items-center justify-content: flex-end; py-0 pr-5 pl-5">
+      <div className="w-full flex flex-col items-start py-0 px-5">
-        <div className="leading-9 text-grey-600">
+        <div className="text-xl mb-2 text-gray-700">
           {shirts}
         </div>
+        <div className="text-lg mb-4 text-gray-500">
+          ${price}
+        </div>
       </div>
-     
       {/* Customize Button */}
       <button
-        className="customize-button w-full "
+        className="customize-button w-full py-2 px-4 "
         onClick={onClick}
       >
         customize
@@ -42,6 +44,7 @@ ProductRow.propTypes = {
   className: PropTypes.string,
   image17: PropTypes.string.isRequired,
   shirts: PropTypes.string.isRequired,
+  price: PropTypes.string.isRequired, // Ensure price is a required prop
   onClick: PropTypes.func.isRequired,
   propLeft: PropTypes.any,
   propTop: PropTypes.any,

src/components/categories/ShirtsProductList.jsx

@@ -5,14 +5,14 @@ import ProductRow from './ProductRow';
 import '../../styles/ProductList.css';
 
 const products = [
-  { id: 1, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
+  { id: 1, name: 'blue aces', price: 99, image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg' },
-  { id: 2, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
+  { id: 2, name: 'blue birdseye', price: 99, image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg' },
-  { id: 3, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
+  { id: 3, name: 'blue hydrangea', price: 99, image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg' },
-  { id: 4, name: 'blue aces', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
+  { id: 4, name: 'blue aces', price: 99, image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg' },
-  { id: 5, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
+  { id: 5, name: 'blue birdseye', price: 99, image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg' },
-  { id: 6, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
+  { id: 6, name: 'blue hydrangea', price: 99, image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg' },
-  { id: 7, name: 'blue birdseye', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
+  { id: 7, name: 'blue birdseye', price: 99, image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg' },
-  { id: 8, name: 'blue hydrangea', price: 99, image: 'https://img.freepik.com/premium-photo/bright-striped-shirt-isolated-white-background_639785-65791.jpg?w=740' },
+  { id: 8, name: 'blue hydrangea', price: 99, image: 'https://brooksbingham.com/51-large_default/light-blue-jetstream.jpg' },
 ];
 
 const ShirtsProductList = () => {

src/components/customer/CustomerMeasurements.jsx

@@ -27,9 +27,9 @@ const CustomerMeasurements = () => {
       <Sidebar />
       <div className="content flex-1">
         <div className="form-container max-w-2xl mx-auto p-6">
-          <div className="header flex justify-between items-center mb-4">
+          <div className="header flex justify-between items-left mb-4">
-            <h1 className="text-2xl font-semibold text-[#0e355b]">Customer Measurements</h1>
+            <h1 className="mml-4 text-2xl font-semibold text-gray-700">customer measurements</h1>
-            <Link to="/CategoryList" className="skip-link ">Skip for now</Link>
+            <Link to="/CategoryList" className="skip-link ">skip for now</Link>
           </div>
           <Form onFinish={onFinish} className="form space-y-4">
             <h2 className="section-title text-lg font-medium">Upper Body Measurements</h2>

src/components/customize/CustomMeasurements.jsx

@@ -1,24 +1,186 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import Sidebar from '../sidebar/Sidebar'; 
+import '../../styles/Measurements.css';
 
 const CustomMeasurements = () => {
+  const navigate = useNavigate();
+
+  const handleCheckout = () => {
+    navigate('/checkout');
+  };
+
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
+    <div className="flex">
-      <h2 className="text-2xl font-medium mb-4">Custom Measurements</h2>
+      <Sidebar />
-      <form className="w-full max-w-md">
+      <div className="w-full ml-10 p-2">
-        <div className="mb-4">
+        <div className="bg-white p-4 flex items-center">
-          <label className="block text-sm font-medium text-gray-700">Chest Size:</label>
+          <Link to="/setmeasurements"> 
-          <input type="text" className="mt-1 block w-full" placeholder="Enter chest size" />
+            <FontAwesomeIcon icon={faChevronLeft} />
+          </Link>
+          <h1 className="ml-4 text-2xl font-medium text-gray-700">custom measurements</h1>
         </div>
-        <div className="mb-4">
+        
-          <label className="block text-sm font-medium text-gray-700">Waist Size:</label>
+        <div className="mt-4 flex-">
-          <input type="text" className="mt-1 block w-full" placeholder="Enter waist size" />
+          <img
+            src="https://5.imimg.com/data5/HM/AE/VV/SELLER-77211399/white-plain-tshirts.jpg"
+            alt="Product"
+            className="w-1/3 h-auto mr-4"
+          />
+
+          <div className="w-2/3">
+            <p className="text-xl mb-2 text-gray-700">product name: blue aces</p>
+            <p className="text-xl mb-4 text-gray-700">$99.00</p>
+            <form className="bg-white p-6 rounded shadow">
+              <h2 className="text-lg mb-4 text-gray-700 font-semibold">upper body measurements</h2>
+              <div className="flex flex-wrap mb-4">
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="neck-circumference" className="block text-sm font-medium text-gray-700">
+                    neck circumference (in inch):
+                  </label>
+                  <input
+                    id="neck-circumference"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter neck size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="chest-circumference" className="block text-sm font-medium text-gray-700">
+                    chest circumference (in inch):
+                  </label>
+                  <input
+                    id="chest-circumference"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter chest size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="waist-circumference" className="block text-sm font-medium text-gray-700">
+                    waist circumference (in inch):
+                  </label>
+                  <input
+                    id="waist-circumference"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter waist size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="shoulder-width" className="block text-sm font-medium text-gray-700">
+                    shoulder width (in inch):
+                  </label>
+                  <input
+                    id="shoulder-width"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter shoulder size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="arm-length" className="block text-sm font-medium text-gray-700">
+                    arm length (in inch):
+                  </label>
+                  <input
+                    id="arm-length"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter arm size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="sleeve-length" className="block text-sm font-medium text-gray-700">
+                    sleeve length (in inch):
+                  </label>
+                  <input
+                    id="sleeve-length"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter sleeve size"
+                  />
+                </div>
+              </div>
+
+              <h2 className="text-lg mb-4 text-gray-700 font-semibold">lower body measurements</h2>
+              <div className="flex flex-wrap mb-4">
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="hip-circumference" className="block text-sm font-medium text-gray-700">
+                    hip circumference (in inch):
+                  </label>
+                  <input
+                    id="hip-circumference"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter hip size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="inseam" className="block text-sm font-medium text-gray-700">
+                    inseam (in inch):
+                  </label>
+                  <input
+                    id="inseam"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter inseam size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="outseam" className="block text-sm font-medium text-gray-700">
+                    outseam (in inch):
+                  </label>
+                  <input
+                    id="outseam"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter outseam size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="thigh-circumference" className="block text-sm font-medium text-gray-700">
+                    thigh circumference (in inch):
+                  </label>
+                  <input
+                    id="thigh-circumference"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter thigh size"
+                  />
+                </div>
+                <div className="w-1/2 mb-2">
+                  <label htmlFor="ankle-circumference" className="block text-sm font-medium text-gray-700">
+                    ankle circumference (in inch):
+                  </label>
+                  <input
+                    id="ankle-circumference"
+                    type="text"
+                    className="mt-1 block border border-gray-300 rounded py-2 px-3"
+                    placeholder="Enter ankle size"
+                  />
+                </div>
+              </div>
+              <button
+                type="submit"
+                className="py-2 px-4 mb-4 "
+              >
+                save measurements
+              </button>
+              <span className="text-gray-700 cursor-pointer hover:underline ml-2">
+                edit measurements
+              </span>
+            </form>
+            <button
+              onClick={handleCheckout}
+              className="mt-6 py-2 px-4 "
+            >
+              continue to checkout
+            </button>
+          </div>
         </div>
-        <button type="submit" className="w-full py-2 px-4 ">
+      </div>
-          Save Measurements
-        </button>
-      </form>
-      <Link to="/measurements" className="mt-4 text-blue-500">Back to Measurements</Link>
     </div>
   );
 };

src/components/customize/Customize.jsx

@@ -128,7 +128,7 @@ const Customize = () => {
             {productImage ? (
               <img src={productImage} alt="Product" className="w-full h-auto rounded-lg" />
             ) : (
-              <p>Loading image...</p>
+              <p className="ml-4 text-xl text-gray-700" >Loading image...</p>
             )}
           </div>
         </div>

src/components/customize/SetMeasurements.jsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
-import { useNavigate, Link } from 'react-router-dom'; // Add Link here
+import { useNavigate, Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import Sidebar from '../sidebar/Sidebar';
-// import '../../styles/Measurements.css';
 
 const SetMeasurements = () => {
   const [selectedOption, setSelectedOption] = useState('standard');
@@ -26,13 +25,13 @@ const SetMeasurements = () => {
       <Sidebar />
       <div className="flex-grow flex flex-col">
         <div className="bg-white p-4 flex items-center">
-          <Link to="/customize/:id"> 
+          <Link to="/customize/:id">
             <FontAwesomeIcon icon={faChevronLeft} />
           </Link>
-          <h1 className="ml-4 text-2xl font-medium text-gray-700">Set Measurements</h1>
+          <h1 className="ml-4 text-2xl font-medium text-gray-700">set measurements</h1>
         </div>
-        <div className="flex-grow flex items-center justify-center p-8">
+        <div className="flex-grow flex items-start justify-end p-8">
-          <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
+          <div className="bg-white p-6 rounded-lg  w-full max-w-md">
             <div className="mb-4">
               <label className="block text-sm font-medium text-gray-700">
                 <input
@@ -42,7 +41,7 @@ const SetMeasurements = () => {
                   onChange={handleOptionChange}
                   className="mr-2"
                 />
-                Standard Measurements
+                standard measurements
               </label>
               <label className="block text-sm font-medium text-gray-700 mt-2">
                 <input
@@ -52,14 +51,14 @@ const SetMeasurements = () => {
                   onChange={handleOptionChange}
                   className="mr-2"
                 />
-                Custom Measurements
+                custom measurements
               </label>
             </div>
             <button
               onClick={handleContinue}
-              className="w-full py-2 px-4"
+              className=" py-2 px-4 "
             >
-              Continue
+              continue
             </button>
           </div>
         </div>

src/components/customize/StandardMeasurements.jsx

@@ -27,7 +27,7 @@ const StandardMeasurements = () => {
           <img
             src="https://5.imimg.com/data5/HM/AE/VV/SELLER-77211399/white-plain-tshirts.jpg"
             alt="Product"
-            className="w-1/3 h-auto mr-4" // Adjust width and margin as needed
+            className="w-1/3 h-auto mr-4" 
           />
           <div className="w-2/3">
             <p className="text-xl mb-4 text-gray-700">blue aces</p>

src/components/order/ViewOrders.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const ViewOrders = () => {
-  return <div>View Orders Page</div>;
-};
-
-export default ViewOrders;

src/components/sidebar/EmployeeSidebar.jsx

@@ -47,10 +47,10 @@ const EmployeeSidebar = () => {
           <Link to="/customers" className={classNames.iconLink}>
             <img src={AddCustomerIcon} alt="Add Customer" className={classNames.icon} />
           </Link>
-          <Link to="/setmeasurements" className={classNames.iconLink}>
+          <Link to="/order" className={classNames.iconLink}>
             <img src={OrdersIcon} alt="Orders" className={classNames.icon} />
           </Link>
-          <Link to="/employee/profile" className={classNames.iconLink}>
+          <Link to="/setmeasurements" className={classNames.iconLink}>
             <img src={ProfileIcon} alt="Profile" className={classNames.icon} />
           </Link>
         </div>

src/styles/AdminDashboard.css

@@ -40,7 +40,7 @@
 
 .dashboard-main-content {
   width: 100%;
-  max-width: 768px;
+  max-width: 400px;
   text-align: center;
 }
 

src/styles/EmployeeDashboard.css

@@ -40,7 +40,7 @@
 
 .dashboard-main-content {
   width: 100%;
-  max-width: 768px;
+  max-width: 400px;
   text-align: center;
 }