added setmeasurements page and standardmeaurement page

src/App.jsx

@@ -17,8 +17,14 @@ import CategoryList from "./components/categories/CategoryList";
 import ShirtsProductList from "./components/categories/ShirtsProductList";
 import SuitsProductList from "./components/categories/SuitsProductList";
 import TuxedosProductList from "./components/categories/TuxedosProductList";
-import JacketsProductList from "./components/categories/JacketsProductList";
+
-import Customize from "./components/customize/Customize";
+
+import JacketsProductList from "./components/categories/JacketsProductList.jsx";
+import Customize from "./components/customize/Customize.jsx";
+import SetMeasurements from "./components/customize/SetMeasurements.jsx";
+import StandardMeasurements from "./components/customize/StandardMeasurements.jsx";
+import CustomMeasurements from "./components/customize/CustomMeasurements.jsx";
+
 
 
 import { Refine } from "@refinedev/core";
@@ -58,6 +64,9 @@ const App = () => {
                   <Route path="/products/tuxedos" element={<TuxedosProductList />} />
                   <Route path="/products/jackets" element={<JacketsProductList />} />
                   <Route path="/customize/:id" element={<Customize />} />
+                  <Route path="/setmeasurements" element={<SetMeasurements />} />
+                  <Route path="/measurements/standard" element={<StandardMeasurements />} />
+                  <Route path="/measurements/custom" element={<CustomMeasurements />} />
                 </Routes>
               </Content>
             </div>

src/components/customize/CustomMeasurements.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const CustomMeasurements = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <h2 className="text-2xl font-medium mb-4">Custom Measurements</h2>
+      <form className="w-full max-w-md">
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700">Chest Size:</label>
+          <input type="text" className="mt-1 block w-full" placeholder="Enter chest size" />
+        </div>
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700">Waist Size:</label>
+          <input type="text" className="mt-1 block w-full" placeholder="Enter waist size" />
+        </div>
+        <button type="submit" className="w-full py-2 px-4 ">
+          Save Measurements
+        </button>
+      </form>
+      <Link to="/measurements" className="mt-4 text-blue-500">Back to Measurements</Link>
+    </div>
+  );
+};
+
+export default CustomMeasurements;

src/components/customize/Customize.jsx

@@ -52,7 +52,7 @@ const Customize = () => {
       .then(response => response.json())
       .then(data => {
         console.log('Success:', data);
-        navigate('/');
+        navigate('/setmeasurements'); // Redirect to the Set Measurements page
       })
       .catch((error) => {
         console.error('Error:', error);
@@ -77,9 +77,9 @@ const Customize = () => {
         {/* Content */}
         <div className="flex-grow flex items-stretch p-8">
           {/* Customization Options */}
-          <div className="bg-white p-6 rounded-lg  w-1/3 mr-4">
+          <div className="bg-white p-6 rounded-lg w-1/3 mr-4">
             <h2 className="text-lg font-medium text-gray-700 mb-4">Customize</h2>
-            
+
             {/* Style Selection */}
             <div className="mb-4">
               <label className="block text-sm font-medium text-gray-700">
@@ -117,14 +117,14 @@ const Customize = () => {
             {/* Save Button */}
             <button
               onClick={handleSave}
-              className="w-full py-2 px-4 "
+              className="w-full py-2 px-4"
             >
               Save Style and Material
             </button>
           </div>
 
           {/* Product Image */}
-          <div className="bg-white p-6 rounded-lg  flex-grow">
+          <div className="bg-white p-6 rounded-lg flex-grow">
             {productImage ? (
               <img src={productImage} alt="Product" className="w-full h-auto rounded-lg" />
             ) : (

src/components/customize/SetMeasurements.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom'; // Add Link here
+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');
+  const navigate = useNavigate();
+
+  const handleOptionChange = (event) => {
+    setSelectedOption(event.target.value);
+  };
+
+  const handleContinue = () => {
+    if (selectedOption === 'standard') {
+      navigate('/measurements/standard');
+    } else {
+      navigate('/measurements/custom');
+    }
+  };
+
+  return (
+    <div className="flex h-screen">
+      <Sidebar />
+      <div className="flex-grow flex flex-col">
+        <div className="bg-white p-4 flex items-center">
+          <Link to="/customize/:id"> 
+            <FontAwesomeIcon icon={faChevronLeft} />
+          </Link>
+          <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="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700">
+                <input
+                  type="radio"
+                  value="standard"
+                  checked={selectedOption === 'standard'}
+                  onChange={handleOptionChange}
+                  className="mr-2"
+                />
+                Standard Measurements
+              </label>
+              <label className="block text-sm font-medium text-gray-700 mt-2">
+                <input
+                  type="radio"
+                  value="custom"
+                  checked={selectedOption === 'custom'}
+                  onChange={handleOptionChange}
+                  className="mr-2"
+                />
+                Custom Measurements
+              </label>
+            </div>
+            <button
+              onClick={handleContinue}
+              className="w-full py-2 px-4"
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SetMeasurements;

src/components/customize/StandardMeasurements.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { 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 StandardMeasurements = () => {
+  
+  const [selectedSize, setSelectedSize] = useState('medium');
+
+  const handleSizeChange = (event) => {
+    setSelectedSize(event.target.value);
+  };
+
+  return (
+    <div className="flex">
+      <Sidebar /> 
+      <div className="w-full ml-10 p-2">
+        <div className="bg-white p-4 flex items-center">
+          <Link to="/setmeasurements"> 
+            <FontAwesomeIcon icon={faChevronLeft} />
+          </Link>
+          <h1 className="ml-4 text-2xl font-medium text-gray-700">standard measurements</h1>
+        </div>
+        <div className="flex mt-4">
+          <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
+          />
+          <div className="w-2/3">
+            <p className="text-xl mb-4 text-gray-700">blue aces</p>
+            <p className="text-md mb-4 text-gray-600">
+              this is a comfortable and stylish blue t-shirt made from high-quality cotton. perfect for casual outings and daily wear.
+            </p>
+            <p className="text-xl mb-4 text-gray-700">$99.00</p>
+            <div className="mb-4 select-container">
+              <label htmlFor="size" className="block text-sm font-medium text-gray-700">
+                size:
+              </label>
+              <select
+                id="size"
+                value={selectedSize}
+                onChange={handleSizeChange}
+                className="custom-select mt-1 block "
+              >
+                <option value="s">s</option>
+                <option value="m">m</option>
+                <option value="l">l</option>
+                <option value="xl">xl</option>
+                <option value="xxl">xxl</option>
+              </select>
+            </div>
+            <p className="text-xl mb-4 text-gray-700">selected size: {selectedSize}</p> {/* Display selected size */}
+            <button className="mt-4 py-2 px-4">
+              continue to checkout
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StandardMeasurements;

src/components/sidebar/EmployeeSidebar.jsx

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

src/styles/Measurements.css

@@ -0,0 +1,24 @@
+.custom-select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: transparent;
+    border: 1px solid #d1d5db; /* Tailwind's border-gray-300 */
+    border-radius: 0.375rem; /* Tailwind's rounded */
+    padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* Adjust padding for arrow */
+    font-size: 1rem; /* Tailwind's text-sm */
+  }
+  .custom-select::after {
+    content: '▼'; /* Unicode arrow */
+    position: absolute;
+    top: 50%;
+    right: 0.75rem; /* Adjust as needed */
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: #6b7280; /* Tailwind's text-gray-700 */
+  }
+  .select-container {
+    position: relative;
+    display: inline-block;
+    width: 100%; /* Ensure full width */
+  }