adding order tracking feature #39

src/App.js

@@ -21,6 +21,7 @@ import AddProductForm from './pages/AddProd';
 // import data from './data';
 import MapComponent from "./components/map/ITEMmap";
 import SellerForm from "./pages/SellerRegistration";
+import OrderTracking from "./pages/Track/ordertracking";
 
 const MyContext = createContext();
 
@@ -195,6 +196,11 @@ const signIn = () => {
               path="/AboutUs"
               element={<About/>}
             />
+            <Route
+              exact={true}
+              path="/order-tracking"
+              element={<OrderTracking/>}
+            />
             <Route
               exact={true}
               path="/cat/:id"

src/components/header/header.js

@@ -295,9 +295,12 @@ const Header = (props) => {
                                 </Button>
                               </li>
                               <li>
-                                <Button>
+                              <Link to={"/order-tracking"}>
+                            {" "}
+                                <Button className="align-items-center">
                                   <LocationOnOutlinedIcon /> Order Tracking
                                 </Button>
+                                </Link>
                               </li>
                               <li>
                                 <Button>
@@ -371,13 +374,6 @@ const Header = (props) => {
                 </Link>
               </Button>
             </li>
-            <li>
-              <Button>
-                <Link to="">
-                  <LocationOnOutlinedIcon /> Order Tracking
-                </Link>
-              </Button>
-            </li>
             <li>
               <Button>
                 <Link to="">

src/pages/Track/OrderTracking.css

@@ -0,0 +1,23 @@
+.order-tracking {
+    padding: 40px;
+    padding-left: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .order-tracking h2 {
+    margin: 0;
+  }
+
+  .order-details {
+    margin-top: 10px;
+  }
+
+  .order-tracking.open {
+    height: auto;
+    border: 1px solid #333; /* Update with desired color */
+    padding-left: 40px;
+  }
+

src/pages/Track/ordertracking.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+import "./OrderTracking.css"; // Update the correct CSS file path
+import MapComponent from "../../components/map/ITEMmap";
+const OrderTracking = () => {
+  const [orderDetails, setOrderDetails] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const fetchOrderDetails = async () => {
+      try {
+        // Simulate fetching data from Firebase
+        const simulatedData = {
+          orderId: "123456",
+          status: "Delivered",
+          deliveryTime: "2024-05-18 12:00 PM",
+          requirements: "Handle with care",
+          arrivalLocation: "Your Arrival Location"
+        };
+        setOrderDetails(simulatedData);
+      } catch (error) {
+        console.error("Failed to fetch order details:", error);
+      }
+    };
+
+    fetchOrderDetails();
+  }, []);
+
+  const toggleDetails = () => {
+    setIsOpen(!isOpen);
+  };
+
+  if (!orderDetails) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className={`order-tracking ${isOpen ? "open" : ""}`} onClick={toggleDetails}>
+      <h2>Order Tracking</h2>
+      <div className="order-details">
+        <h3>Order ID: {orderDetails.orderId}</h3>
+        {isOpen && (
+          <>
+            <p>Status: {orderDetails.status}</p>
+            <p>Estimated Delivery Time: {orderDetails.deliveryTime}</p>
+            <p>Order Requirements: {orderDetails.requirements}</p>
+          </>
+        )}
+      </div>
+      <div className="map-container">
+        <MapComponent location={orderDetails.arrivalLocation} />
+      </div>
+    </div>
+  );
+};
+
+export default OrderTracking;