From 8e3e97a3c8d283b87ac0dbd98522b5cb95165e10 Mon Sep 17 00:00:00 2001
From: Nikhil <ny5036851@gmail.com>
Date: Sat, 13 Sep 2025 09:09:36 +0530
Subject: [PATCH 1/7] added my orders and my profile page

---
 frontend/src/App.jsx                       |  48 +++++-
 frontend/src/pages/MyOrder/MyOrder.css     |  50 ++++++
 frontend/src/pages/MyOrder/MyOrder.jsx     | 190 +++++++++++++++++++++
 frontend/src/pages/MyProfile/MyProfile.css |  60 +++++++
 frontend/src/pages/MyProfile/MyProfile.jsx |  73 ++++++++
 5 files changed, 420 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/MyOrder/MyOrder.css
 create mode 100644 frontend/src/pages/MyOrder/MyOrder.jsx
 create mode 100644 frontend/src/pages/MyProfile/MyProfile.css
 create mode 100644 frontend/src/pages/MyProfile/MyProfile.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 61abd78d..0d256156 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -27,6 +27,8 @@ import ScrollToBottom from "./components/ScrollToBottomButton/ScrollToBottomButt
 import ReferralProgram from "./components/Referrals/ReferralProgram";
 import AboutUs from "./components/Aboutus/Aboutus";
 import FAQ from "./components/FAQ/FAQ";
+import MyProfile from "./pages/MyProfile/MyProfile";
+import MyOrder from "./pages/MyOrder/MyOrder";
 
 const App = () => {
   const [showLogin, setShowLogin] = useState(false);
@@ -92,13 +94,57 @@ const App = () => {
             <Route path="/referral" element={<ReferralProgram />} />
             <Route path="/restaurant/:id" element={<RestaurantDetail />} />
             <Route path="/aboutus" element={<AboutUs />} />
+            <Route
+              path="/profile/me"
+              element={
+                isLoggedIn ? (<MyProfile />) : (
+                  <div style={{ padding: "2rem", textAlign: "center" }}>
+                    <h2
+                      style={{
+                        color: "#f97316", // Tailwind's orange-500
+                        fontSize: "2rem",
+                        fontWeight: "bold",
+                        textShadow: "1px 1px 2px rgba(0,0,0,0.2)",
+                        marginBottom: "0.5rem",
+                      }}
+                    >
+                      Please Log In To Proceed
+                    </h2>
+                    <p style={{ color: "#fdba74", fontSize: "1rem" }}>
+                      Your journey continues after login 🔐
+                    </p>
+                  </div>
+                )
+              } />
+            <Route
+              path="/orders/me"
+              element={
+                isLoggedIn ? (<MyOrder />) : (
+                  <div style={{ padding: "2rem", textAlign: "center" }}>
+                    <h2
+                      style={{
+                        color: "#f97316", // Tailwind's orange-500
+                        fontSize: "2rem",
+                        fontWeight: "bold",
+                        textShadow: "1px 1px 2px rgba(0,0,0,0.2)",
+                        marginBottom: "0.5rem",
+                      }}
+                    >
+                      Please Log In To Proceed
+                    </h2>
+                    <p style={{ color: "#fdba74", fontSize: "1rem" }}>
+                      Your journey continues after login 🔐
+                    </p>
+                  </div>
+                )
+              } />
             <Route path="*" element={<NotFound />} />
           </Routes>
 
           <ScrollToTopButton /> {/* floating button */}
           <CartSummaryBar />
           <AppDownload />
-          
+
           {/* ✅ Footer now contains FAQ */}
           <Footer>
             <FAQ />
diff --git a/frontend/src/pages/MyOrder/MyOrder.css b/frontend/src/pages/MyOrder/MyOrder.css
new file mode 100644
index 00000000..511c8b19
--- /dev/null
+++ b/frontend/src/pages/MyOrder/MyOrder.css
@@ -0,0 +1,50 @@
+.my-order{
+    display: flex;
+    gap: 1vmax;
+    padding: 3vmax;
+    background-color: smoke-white
+}
+.my-order-filter{
+    display: flex;
+    flex-direction: column;
+    gap: 1vmax;
+    border: 1px solid rgba(234, 230, 230, 1);
+    padding: 2vmax;
+    border-radius: 10px;
+    background-color: rgba(250, 248, 248, 1)
+}
+.my-order-filter > p{
+    font-size: 1.5rem
+}
+hr{
+    margin-top: -0.6vmax;
+}
+.my-order-status, .my-order-delivery-time{
+    display: flex;
+    align-items: center;
+    gap: 1vmax;
+}
+.my-order-search-list{
+    
+}
+.my-order-search-list > input{
+    width: 60vw;
+    padding:1vmax;
+    outline: none;
+    border: 1px solid rgba(234, 230, 230, 1);
+    border-radius: 10px;
+    background-color: rgba(250, 248, 248, 1)
+}
+.my-order-items{
+    display: flex;
+    border: 1px solid rgba(234, 230, 230, 1);
+    border-radius: 10px;
+    background-color: rgba(250, 248, 248, 1);
+    margin-top: 1vmax;
+    padding: 1vmax;
+    justify-content: space-between;
+}
+.my-order-all{
+    height: 70vh;
+    overflow: auto
+}
\ No newline at end of file
diff --git a/frontend/src/pages/MyOrder/MyOrder.jsx b/frontend/src/pages/MyOrder/MyOrder.jsx
new file mode 100644
index 00000000..daa41a41
--- /dev/null
+++ b/frontend/src/pages/MyOrder/MyOrder.jsx
@@ -0,0 +1,190 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect } from 'react'
+import './MyOrder.css'
+import { food_list } from '../../assets/frontend_assets/assets'
+import { Dialog, DialogContent, DialogTitle, Rating } from '@mui/material';
+
+const MyOrder = () => {
+    const [search, setSearch] = useState("");
+    const [selectedStatuses, setSelectedStatuses] = useState([]);
+    const [orders, setOrders] = useState([]); // store items with status+time
+    const [openReviewModal, setOpenReviewModal] = useState(false);
+    const [description, setDescription] = useState("");
+    const [ratingValue, setRatingValue] = useState(5);
+    const [review, setReview] = useState([]);
+
+    const orderStatus = [
+        { text: "On the Way" },
+        { text: "Delivered" },
+        { text: "Cancelled" },
+        { text: "Return" }
+    ];
+
+    const orderTime = [
+        { time: 2024 },
+        { time: 2023 },
+        { time: 2022 },
+        { time: 2021 },
+    ];
+
+    // Initialize food_list with random status and time
+    useEffect(() => {
+        const enriched = food_list.map(item => {
+            const randomStatus =
+                orderStatus[Math.floor(Math.random() * orderStatus.length)].text;
+            const randomYear =
+                orderTime[Math.floor(Math.random() * orderTime.length)].time;
+
+            return { ...item, status: randomStatus, year: randomYear };
+        });
+        setOrders(enriched);
+    }, []);
+
+    const handleCloseModal = () => setOpenReviewModal(false);
+    const handleOpenModal = () => setOpenReviewModal(true);
+    const submitHandler = () => {
+        const item = {
+            id: review.length + 1,
+            text: description,
+            user: 'Jack Doe',  // replace with real user after integrating api
+            ratings: ratingValue
+        }
+        setReview((prev) => [...prev, item])
+        setDescription("");
+        handleCloseModal()
+    }
+
+
+    return (
+        <>
+            <div className="my-order">
+                <div className="my-order-filter">
+                    <h2>Filter</h2>
+                    <hr />
+                    <p>Order Status</p>
+                    {orderStatus.map((item, index) => (
+                        <div key={index} className="my-order-status">
+                            <input
+                                type="checkbox"
+                                value={item.text}
+                                onChange={(e) => {
+                                    if (e.target.checked) {
+                                        setSelectedStatuses([...selectedStatuses, item.text]);
+                                    } else {
+                                        setSelectedStatuses(
+                                            selectedStatuses.filter((s) => s !== item.text)
+                                        );
+                                    }
+                                }}
+                            />
+                            <p>{item.text}</p>
+                        </div>
+                    ))}
+                </div>
+
+                <div className="my-order-search-list">
+                    <input
+                        type="text"
+                        placeholder="Search Your Order here..."
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                    />
+                    <div className="my-order-all">
+                        {orders
+                            .filter((item) =>
+                                item.name.toLowerCase().includes(search.toLowerCase())
+                            )
+                            .filter((item) => {
+                                if (selectedStatuses.length === 0) return true;
+                                return selectedStatuses.includes(item.status);
+                            })
+                            .map((item) => (
+                                <div className="my-order-items" key={item._id}>
+                                    <img
+                                        src={item.image}
+                                        alt={item.name}
+                                        width={85}
+                                        loading="lazy"
+                                    />
+                                    <p>{item.name}</p>
+                                    <p>$ {item.price}</p>
+                                    <div className="my-order-delivery-status">
+                                        <div className="my-order-delivery-time">
+                                            {item.status === "Delivered" && <span>🟢</span>}
+                                            {item.status === "On the Way" && <span>🟡</span>}
+                                            {item.status === "Cancelled" && <span>🔴</span>}
+                                            {item.status === "Return" && <span>🔵</span>}
+
+                                            <p>
+                                                {item.status === "Delivered"
+                                                    ? `Delivered in ${item.year}`
+                                                    : item.status === "On the Way"
+                                                        ? "Your order is on the way"
+                                                        : item.status === "Cancelled"
+                                                            ? "Your order was cancelled"
+                                                            : "Your order was returned"}
+                                            </p>
+                                        </div>
+
+                                        {item.status === "Delivered" && (
+                                            <>
+                                                <p style={{ color: "gray" }}>
+                                                    Your item has been delivered
+                                                </p>
+                                                <b style={{ color: "tomato", cursor: "pointer" }} onClick={handleOpenModal}>
+                                                    Rate & Review Product
+                                                </b>
+                                                <Dialog
+                                                    open={openReviewModal}
+                                                    onClose={handleCloseModal}
+                                                    slotProps={{
+                                                        backdrop: {
+                                                            style: { backgroundColor: "transparent" }, // no black overlay
+                                                        },
+                                                    }}
+                                                >
+                                                    <DialogTitle textAlign={"center"}>Submit You Review</DialogTitle>
+                                                    <DialogContent>
+                                                        <div className="reviewratings">
+                                                            <Rating
+                                                                name="half-rating"
+                                                                precision={0.5}
+                                                                value={ratingValue}
+                                                                onChange={(event, newValue) => {
+                                                                    setRatingValue(newValue);   //  direct update
+                                                                }}
+                                                                sx={{
+                                                                    '& .MuiRating-icon': {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        height: '30px',
+                                                                    },
+                                                                    '& .MuiRating-iconFilled': { color: '#ff4b2b' },
+                                                                }}
+                                                            />
+                                                            <div className="description">
+                                                                <textarea
+                                                                    placeholder="Write your Review..."
+                                                                    rows={5}
+                                                                    autoFocus
+                                                                    value={description}
+                                                                    onChange={(e) => setDescription(e.target.value)}
+                                                                />
+                                                            </div>
+                                                            <button className="submitbtn" onClick={submitHandler}>Submit</button>
+                                                        </div>
+                                                    </DialogContent>
+                                                </Dialog>
+                                            </>
+                                        )}
+                                    </div>
+                                </div>
+                            ))}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default MyOrder;
diff --git a/frontend/src/pages/MyProfile/MyProfile.css b/frontend/src/pages/MyProfile/MyProfile.css
new file mode 100644
index 00000000..3e97c85a
--- /dev/null
+++ b/frontend/src/pages/MyProfile/MyProfile.css
@@ -0,0 +1,60 @@
+.my-profile{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(223, 222, 222, 1);
+    padding: 2vmax;
+    width: 40vmax;
+    margin: auto;
+    gap: 2.5vmax;
+    margin-top: 13vmax
+}
+.my-profile-detail{
+    display: flex;
+    flex-direction: column;
+    padding: 2vmax;
+    gap: 2vmax;
+}
+.profile-btn{
+    padding: 1vmax;
+    background-color: tomato;
+    border: none;
+    outline:none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    font-size: 18px;
+    font-weight: bold;
+    color:white
+}
+.profile-btn:hover{
+    background-color: rgb(239, 17, 17);
+    transform: scale(1.05);
+}
+.update-my-profile{
+    display: flex;
+    flex-direction: column;
+    gap: 1vmax;
+}
+.update-my-profile > input{
+    padding: 1vmax;
+    width: 20vmax;
+    outline:none;
+    border: 1px solid rgba(207, 204, 204, 1);
+    border-radius: 10px;
+}
+.update-btn{
+    padding: 0.5vmax;
+    background-color: tomato;
+    border: none;
+    outline:none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    font-size: 18px;
+    font-weight: bold;
+    color:white;
+    width: 7vmax;
+    margin-top: 0.5vmax;
+    margin-left: 6vmax;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/MyProfile/MyProfile.jsx b/frontend/src/pages/MyProfile/MyProfile.jsx
new file mode 100644
index 00000000..d313cecf
--- /dev/null
+++ b/frontend/src/pages/MyProfile/MyProfile.jsx
@@ -0,0 +1,73 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react'
+import { Avatar, Dialog, DialogContent, DialogTitle } from '@mui/material'
+import './MyProfile.css'
+
+const MyProfile = () => {
+    const [openProfileModal, setOpenProfileModal] = useState(false);
+    const [update, setUpdate] = useState({
+        name: "",
+        email: "",
+        password: ""
+    })
+
+    const handleProfileClose = () => setOpenProfileModal(false);
+    const handleOpenProfile = () => setOpenProfileModal(true);
+    const handleSave = () => {
+         // api call here...
+        handleProfileClose()
+    }
+    return (
+        <>
+            <div className="my-profile">
+                <Avatar variant='square' sx={{ width: 200, height: 200 }} />
+                <div className="my-profile-detail">
+                    <div className="my-profile-name">
+                        <b>Name</b>
+                        <p>Nikhil Yadav</p>
+                    </div>
+                    <div className="my-profile-email">
+                        <b>Email</b>
+                        <p>Nikhil@gmail.com</p>
+                    </div>
+                    <div className="my-profile-password">
+                        <b>Password</b>
+                        <p>abcde12345</p>
+                    </div>
+                    <button className='profile-btn' onClick={handleOpenProfile}>Update Profile</button>
+                    <Dialog open={openProfileModal} onClose={handleProfileClose}>
+                        <DialogTitle align="center">Update Profile</DialogTitle>
+                        <DialogContent>
+                            <div className="update-my-profile">
+                                <input
+                                    type="text"
+                                    placeholder='Update Name'
+                                    value={update.name}
+                                    onChange={(e) => setUpdate({...update, name: e.target.value})}
+                                    name='nmae'
+                                />
+                                <input
+                                    type="email"
+                                    placeholder='Update Email'
+                                    value={update.email}
+                                    onChange={(e) => setUpdate({...update, email:  e.target.value})}
+                                    name='email'
+                                />
+                                <input
+                                    type="password"
+                                    placeholder='Update Password'
+                                    value={update.password}
+                                    onChange={(e) => setUpdate({...update, password:  e.target.value})}
+                                    name='password'
+                                />
+                            </div>
+                            <button className='update-btn' onClick={handleSave}>Save</button>
+                        </DialogContent>
+                    </Dialog>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MyProfile
\ No newline at end of file

From 4db9f0c0f15cf045e46263d06aca14888343e00f Mon Sep 17 00:00:00 2001
From: Nikhil <ny5036851@gmail.com>
Date: Sun, 14 Sep 2025 07:19:51 +0530
Subject: [PATCH 2/7] Added Confirm order, payment and order success page

---
 frontend/package-lock.json                    |  9 +-
 frontend/package.json                         |  2 +-
 frontend/src/App.jsx                          | 69 ++++++++++++++
 .../pages/ConfirmOrder.jsx/ConfirmOrder.css   | 75 +++++++++++++++
 .../pages/ConfirmOrder.jsx/ConfirmOrder.jsx   | 92 +++++++++++++++++++
 .../src/pages/OrderSuccess/OrderSuccess.css   | 27 ++++++
 .../src/pages/OrderSuccess/OrderSuccess.jsx   | 21 +++++
 frontend/src/pages/Payment/Payment.jsx        | 84 +++++++++++++++++
 frontend/src/pages/PlaceOrder/PlaceOrder.jsx  |  5 +-
 9 files changed, 378 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/pages/ConfirmOrder.jsx/ConfirmOrder.css
 create mode 100644 frontend/src/pages/ConfirmOrder.jsx/ConfirmOrder.jsx
 create mode 100644 frontend/src/pages/OrderSuccess/OrderSuccess.css
 create mode 100644 frontend/src/pages/OrderSuccess/OrderSuccess.jsx
 create mode 100644 frontend/src/pages/Payment/Payment.jsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a42af3bf..bb3edef1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,7 @@
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@mui/material": "^7.3.2",
-        "axios": "^1.11.0",
+        "axios": "^1.12.1",
         "gsap": "^3.13.0",
         "html2pdf.js": "^0.10.3",
         "leaflet": "^1.9.4",
@@ -1935,9 +1935,10 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
-      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.1.tgz",
+      "integrity": "sha512-Kn4kbSXpkFHCGE6rBFNwIv0GQs4AvDT80jlveJDKFxjbTYMUeB4QtsdPCv6H8Cm19Je7IU6VFtRl2zWZI0rudQ==",
+      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.4",
diff --git a/frontend/package.json b/frontend/package.json
index dc3d497d..a39baa9a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.3.2",
-    "axios": "^1.11.0",
+    "axios": "^1.12.1",
     "gsap": "^3.13.0",
     "html2pdf.js": "^0.10.3",
     "leaflet": "^1.9.4",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 0d256156..de1c917c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -29,6 +29,9 @@ import AboutUs from "./components/Aboutus/Aboutus";
 import FAQ from "./components/FAQ/FAQ";
 import MyProfile from "./pages/MyProfile/MyProfile";
 import MyOrder from "./pages/MyOrder/MyOrder";
+import ConfirmOrder from "./pages/ConfirmOrder.jsx/ConfirmOrder";
+import Payment from "./pages/Payment/Payment";
+import OrderSuccess from "./pages/OrderSuccess/OrderSuccess";
 
 const App = () => {
   const [showLogin, setShowLogin] = useState(false);
@@ -138,6 +141,72 @@ const App = () => {
                   </div>
                 )
               } />
+              <Route 
+              path="/order/confirm" 
+              element={
+                isLoggedIn ? (<ConfirmOrder/>) : (
+                  <div style={{ padding: "2rem", textAlign: "center" }}>
+                    <h2
+                      style={{
+                        color: "#f97316", // Tailwind's orange-500
+                        fontSize: "2rem",
+                        fontWeight: "bold",
+                        textShadow: "1px 1px 2px rgba(0,0,0,0.2)",
+                        marginBottom: "0.5rem",
+                      }}
+                    >
+                      Please Log In To Proceed
+                    </h2>
+                    <p style={{ color: "#fdba74", fontSize: "1rem" }}>
+                      Your journey continues after login 🔐
+                    </p>
+                  </div>
+                )
+              }/>
+              <Route 
+              path="/order/payment" 
+              element={
+              isLoggedIn ? (<Payment/>) : (
+                <div style={{ padding: "2rem", textAlign: "center" }}>
+                    <h2
+                      style={{
+                        color: "#f97316", // Tailwind's orange-500
+                        fontSize: "2rem",
+                        fontWeight: "bold",
+                        textShadow: "1px 1px 2px rgba(0,0,0,0.2)",
+                        marginBottom: "0.5rem",
+                      }}
+                    >
+                      Please Log In To Proceed
+                    </h2>
+                    <p style={{ color: "#fdba74", fontSize: "1rem" }}>
+                      Your journey continues after login 🔐
+                    </p>
+                  </div>
+              )
+              }/>
+              <Route 
+              path="/order/Success" 
+              element={
+              isLoggedIn ? (<OrderSuccess/>) : (
+                <div style={{ padding: "2rem", textAlign: "center" }}>
+                    <h2
+                      style={{
+                        color: "#f97316", // Tailwind's orange-500
+                        fontSize: "2rem",
+                        fontWeight: "bold",
+                        textShadow: "1px 1px 2px rgba(0,0,0,0.2)",
+                        marginBottom: "0.5rem",
+                      }}
+                    >
+                      Please Log In To Proceed
+                    </h2>
+                    <p style={{ color: "#fdba74", fontSize: "1rem" }}>
+                      Your journey continues after login 🔐
+                    </p>
+                  </div>
+              )
+              }/>
             <Route path="*" element={<NotFound />} />
           </Routes>
 
diff --git a/frontend/src/pages/ConfirmOrder.jsx/ConfirmOrder.css b/frontend/src/pages/ConfirmOrder.jsx/ConfirmOrder.css
new file mode 100644
index 00000000..c8ebc0cb
--- /dev/null
+++ b/frontend/src/pages/ConfirmOrder.jsx/ConfirmOrder.css
@@ -0,0 +1,75 @@
+.order-confirm{
+    display: flex;
+    align-items:center;
+    justify-content: space-between;
+    width: 70vw;
+    margin: auto;
+    margin-top: 10vmax;
+    border: 1px solid rgba(234, 230, 230, 1);
+    border-radius: 10px;
+    background-color: rgba(250, 248, 248, 1);
+    padding: 2vmax
+}
+.order-confirm-left{
+    display: flex;
+    flex-direction: column;
+    gap: 2vmax;
+    width: 35vw
+}
+.order-confirm-user-details{
+    display: flex;
+    align-items:center;
+    gap: 3vmax
+}
+.order-confirm-btn{
+     display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    background-color: tomato;
+    color: white;
+    padding: 18px 32px;
+    font-size: 18px;
+    font-weight: bold;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    margin-inline: 1vmax;
+    width: 20vmax
+}
+.order-confirm-btn:hover{
+    background-color: rgb(239, 17, 17);
+    transform: scale(1.05);
+}
+.order-confirm-right{
+    display: flex;
+    flex-direction: column;
+    gap: 2vmax;
+    width: 35vw;
+    border: 1px solid rgba(234, 230, 230, 1);
+    border-radius: 10px;
+    background-color: white;
+    padding: 2vmax;
+}
+.order-confirm-details, .order-confirm-order, .order-conform-subtotal, .order-conform-shipping, .order-conform-tax, .order-confirm-paytotal{
+    display: flex;
+    align-items:center;
+    justify-content: space-between
+}
+.order-conform-subtotal, .order-conform-shipping, .order-conform-tax{
+gap: 1vmax
+}
+
+@media (max-width: 768px) {
+    .order-confirm{
+        flex-direction:column;
+        width: 100vw;
+    }
+    .order-confirm-left, .order-confirm-right{
+        width: 100vw;
+        margin: auto;
+    }
+    .order-confirm-btn{
+        width: 90vw
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/ConfirmOrder.jsx/ConfirmOrder.jsx b/frontend/src/pages/ConfirmOrder.jsx/ConfirmOrder.jsx
new file mode 100644
index 00000000..914a70ba
--- /dev/null
+++ b/frontend/src/pages/ConfirmOrder.jsx/ConfirmOrder.jsx
@@ -0,0 +1,92 @@
+/* eslint-disable no-unused-vars */
+import React from 'react'
+import { Typography } from '@mui/material'
+import './ConfirmOrder.css'
+import { food_list } from '../../assets/frontend_assets/assets'
+import { Link } from 'react-router-dom'
+
+const ConfirmOrder = () => {
+  return (
+    <>
+      <div className="order-confirm">
+        <div className="order-confirm-left">
+          <h1>Confirm Your order</h1>
+          <Typography>Your order will be processed within few minutes, We will notify you once it is shipped</Typography>
+          <h3>Billing Address</h3>
+          <div className="order-confirm-user-details">
+            <b>Name</b>
+            <p>Nikhil Yadav</p>
+          </div>
+          <div className="order-confirm-user-details">
+            <b>Address</b>
+            <p style={{ marginLeft: '-1vmax' }}>22-ring road, Gorakhpur</p>
+          </div>
+          <div className="order-confirm-user-details">
+            <b>Email</b>
+            <p>nikhil@gmail.com</p>
+          </div>
+          <div className="order-confirm-user-details">
+            <b>Phone</b>
+            <p>6789045671</p>
+          </div>
+         <Link to={'/order/payment'}><button className='order-confirm-btn'>Procced To Payment</button></Link>
+        </div>
+        <div className="order-confirm-right">
+          <h3>Order Summary</h3>
+          <hr />
+          <div className="order-confirm-details">
+            <div className="order-confir-date">
+              <p>Date</p>
+              <b>13 Sep 2025</b>
+            </div>
+            <div className="order-confir-id">
+              <p>Order Id</p>
+              <b>1234567</b>
+            </div>
+            <div className="order-confir-payment">
+              <p>Payment method</p>
+              <b>RazorPay</b>
+            </div>
+          </div>
+          <hr />
+          {food_list.slice(0, 2).map((item) => {
+            return (
+              <div className="order-confirm-order" key={item._id}>
+                <img
+                  src={item.image}
+                  alt={item.name}
+                  width={85}
+                  loading="lazy"
+                />
+                <p>{item.name}</p>
+                <p>$ {item.price}</p>
+              </div>
+            )
+          })}
+          <hr />
+          <div className="order-confirm-total">
+            <div className="order-conform-subtotal">
+              <p>Sub total</p>
+              <b>$ 70</b>
+            </div>
+            <div className="order-conform-shipping">
+              <p>Shipping</p>
+              <b>$ 5</b>
+            </div>
+            <div className="order-conform-tax">
+              <p>tax</p>
+              <b>$ 2</b>
+            </div>
+          </div>
+          <hr />
+          <div className="order-confirm-paytotal">
+            <b>Order Total</b>
+            <b>$ 77</b>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default ConfirmOrder
\ No newline at end of file
diff --git a/frontend/src/pages/OrderSuccess/OrderSuccess.css b/frontend/src/pages/OrderSuccess/OrderSuccess.css
new file mode 100644
index 00000000..e86b0c30
--- /dev/null
+++ b/frontend/src/pages/OrderSuccess/OrderSuccess.css
@@ -0,0 +1,27 @@
+.order-success{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 15vmax;
+    gap: 1vmax
+}
+.order-success-btn{
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    background-color: tomato;
+    color: white;
+    padding: 18px 32px;
+    font-size: 18px;
+    font-weight: bold;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    margin-inline: 1vmax;
+}
+.order-success-btn:hover{
+    background-color: rgb(239, 17, 17);
+    transform: scale(1.05);
+}
\ No newline at end of file
diff --git a/frontend/src/pages/OrderSuccess/OrderSuccess.jsx b/frontend/src/pages/OrderSuccess/OrderSuccess.jsx
new file mode 100644
index 00000000..e58619e1
--- /dev/null
+++ b/frontend/src/pages/OrderSuccess/OrderSuccess.jsx
@@ -0,0 +1,21 @@
+/* eslint-disable no-unused-vars */
+import { Typography } from '@mui/material';
+import React from 'react'
+import { SiTicktick } from "react-icons/si";
+import './OrderSuccess.css'
+import { Link } from 'react-router-dom'
+
+const OrderSuccess = () => {
+    return (
+        <>
+            <div className="order-success">
+                <SiTicktick color='tomato' size={60} />
+                <h2>Congratulation !</h2>
+                <Typography>Your Order has been Placed Successfully</Typography>
+              <Link to={'/order/details'}><button className='order-success-btn'>View Orders Detail</button></Link>
+            </div>
+        </>
+    )
+}
+
+export default OrderSuccess
\ No newline at end of file
diff --git a/frontend/src/pages/Payment/Payment.jsx b/frontend/src/pages/Payment/Payment.jsx
new file mode 100644
index 00000000..1308885b
--- /dev/null
+++ b/frontend/src/pages/Payment/Payment.jsx
@@ -0,0 +1,84 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const Payment = () => {
+  const [responseId, setResponseId] = useState("");
+  const navigate = useNavigate()
+
+  const loadScript = (src) => {
+    return new Promise((resolve) => {
+      const script = document.createElement("script");
+      script.src = src;
+      script.onload = () => resolve(true);
+      script.onerror = () => resolve(false);
+      document.body.appendChild(script);
+    });
+  };
+
+  const createRazorpayOrder = async (amount) => {
+    try {
+      const { data } = await axios.post(
+        "http://localhost:4000/api/payment/create-order",
+        { amount } // send in USD
+      );
+
+      if (!data.success) {
+        alert("Order creation failed");
+        return;
+      }
+
+      handleRazorpayScreen(data.orderId, data.amount, data.currency);
+    } catch (error) {
+      console.log("Error:", error);
+    }
+  };
+
+  const handleRazorpayScreen = async (orderId, amount, currency) => {
+    const res = await loadScript("https://checkout.razorpay.com/v1/checkout.js");
+
+    if (!res) {
+      alert("Razorpay SDK failed to load");
+      return;
+    }
+
+    const options = {
+      key: 'rzp_test_RH03kd9mBRX1jM', // frontend public key
+      amount: amount,
+      currency: currency,
+      name: "Foodie",
+      description: "Payment to Foodie",
+      order_id: orderId,
+      handler: function (response) {
+        // This gives you payment details
+        setResponseId(response.razorpay_payment_id);
+        console.log("Payment success:", response);
+
+        // redirect to success page 
+        navigate("/order/success");
+
+      },
+      prefill: {
+        name: "Foodie Customer",
+        email: "customer@example.com",
+        contact: "9999999999",
+      },
+      theme: {
+        color: "#F37254",
+      },
+    };
+
+    const paymentObject = new window.Razorpay(options);
+    paymentObject.open();
+  };
+
+  return (
+    <div className="pay">
+      <button onClick={() => createRazorpayOrder(100)} className="order-success-btn">Payment of $100</button>
+      {responseId && <p>Payment ID: {responseId}</p>}
+    </div>
+  );
+};
+
+export default Payment;
diff --git a/frontend/src/pages/PlaceOrder/PlaceOrder.jsx b/frontend/src/pages/PlaceOrder/PlaceOrder.jsx
index f96861c0..ba2e25c5 100644
--- a/frontend/src/pages/PlaceOrder/PlaceOrder.jsx
+++ b/frontend/src/pages/PlaceOrder/PlaceOrder.jsx
@@ -61,6 +61,7 @@ import React, { useContext, useState } from "react";
 import "./PlaceOrder.css";
 import { StoreContext } from "../../components/context/StoreContext";
 import Location from "./Location"; // Import the Location component
+import { Link } from 'react-router-dom'
 
 const PlaceOrder = () => {
     const { getTotalCartAmount } = useContext(StoreContext);
@@ -253,9 +254,11 @@ const PlaceOrder = () => {
                                 <p>${getTotalCartAmount() === 0 ? 0 : getTotalCartAmount() + 2}</p>
                             </b>
                         </div>
+                        <Link to={'/order/confirm'}>
                         <button type="submit">
-                            PROCEED TO PAYMENT
+                            PROCEED TO CHECKOUT
                         </button>
+                        </Link>
                     </div>
                 </div>
             </form>

From 441c5a2c6f4a835126d35c2f842acdfa05c31eca Mon Sep 17 00:00:00 2001
From: Nikhil <ny5036851@gmail.com>
Date: Sun, 14 Sep 2025 15:29:31 +0530
Subject: [PATCH 3/7] added .env.example

---
 frontend/src/pages/Payment/Payment.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/Payment/Payment.jsx b/frontend/src/pages/Payment/Payment.jsx
index 1308885b..e2d28191 100644
--- a/frontend/src/pages/Payment/Payment.jsx
+++ b/frontend/src/pages/Payment/Payment.jsx
@@ -44,7 +44,7 @@ const Payment = () => {
     }
 
     const options = {
-      key: 'rzp_test_RH03kd9mBRX1jM', // frontend public key
+      key: '', // RAZORPAY KEY ID
       amount: amount,
       currency: currency,
       name: "Foodie",

From 338a0468922064d3eefdfee1aad2e77a503367e0 Mon Sep 17 00:00:00 2001
From: Nikhil <ny5036851@gmail.com>
Date: Wed, 17 Sep 2025 10:04:37 +0530
Subject: [PATCH 4/7] solved login error issue & tested razorpay payment

---
 backend/controllers/authController.js    | 2 +-
 backend/controllers/paymentController.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/controllers/authController.js b/backend/controllers/authController.js
index 7209eaea..69ed542e 100644
--- a/backend/controllers/authController.js
+++ b/backend/controllers/authController.js
@@ -53,7 +53,7 @@ export const loginUser = async (req, res) => {
   }
 
   // Generate JWT
-  const token = generateToken(user._id);
+  const token = generateToken(user._id);  
 
   // Set JWT in secure, HTTP-only cookie
   res.cookie('token', token, {
diff --git a/backend/controllers/paymentController.js b/backend/controllers/paymentController.js
index 15f8862d..ef07ef25 100644
--- a/backend/controllers/paymentController.js
+++ b/backend/controllers/paymentController.js
@@ -22,7 +22,7 @@ export const createOrder = async (req, res) => {
     res.status(200).json({
       success: true,
       orderId: order.id,
-      amount: order.amount,
+      amount: order.amount, 
       currency: order.currency,
     });
   } catch (error) {

From 2b39f097609c4135b2a49a4a1f31c06c763f2d0e Mon Sep 17 00:00:00 2001
From: Nikhil <ny5036851@gmail.com>
Date: Wed, 17 Sep 2025 11:43:06 +0530
Subject: [PATCH 5/7] Added Profile dropdown menu for logged in users

---
 .../src/components/LoginPopup/LoginPopup.jsx  | 26 ++---
 frontend/src/components/Navbar/Navbar.css     |  8 +-
 frontend/src/components/Navbar/Navbar.jsx     | 98 +++++++++++--------
 .../src/components/Stepper/CheckoutFlow.jsx   | 10 ++
 frontend/src/components/Stepper/Stepper.jsx   | 10 ++
 .../src/pages/ConfirmOrder/ConfirmOrder.css   | 75 ++++++++++++++
 .../src/pages/ConfirmOrder/ConfirmOrder.jsx   | 93 ++++++++++++++++++
 frontend/src/pages/Payment/Payment.jsx        |  4 +-
 8 files changed, 271 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/components/Stepper/CheckoutFlow.jsx
 create mode 100644 frontend/src/components/Stepper/Stepper.jsx
 create mode 100644 frontend/src/pages/ConfirmOrder/ConfirmOrder.css
 create mode 100644 frontend/src/pages/ConfirmOrder/ConfirmOrder.jsx

diff --git a/frontend/src/components/LoginPopup/LoginPopup.jsx b/frontend/src/components/LoginPopup/LoginPopup.jsx
index 79da8052..7478897d 100644
--- a/frontend/src/components/LoginPopup/LoginPopup.jsx
+++ b/frontend/src/components/LoginPopup/LoginPopup.jsx
@@ -15,7 +15,7 @@ const LoginPopup = ({ setShowLogin }) => {
   const [timer, setTimer] = useState(60);
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const navigate=useNavigate();
+  const navigate = useNavigate();
 
   const [password, setPassword] = useState('');
   const [passwordStrength, setPasswordStrength] = useState({
@@ -114,13 +114,13 @@ const LoginPopup = ({ setShowLogin }) => {
   const handleResetPassword = (e) => {
     e.preventDefault();
     if (newPassword !== confirmPassword) return toast.error("Passwords do not match");
-      toast.success("Password reset successfully!");
-      setForgotFlow(false);
-      setStage(1);
-      setOtp(Array(6).fill(""));
-      setCurrState("Login");
-    };
-    const handleSubmit = async (e) => {
+    toast.success("Password reset successfully!");
+    setForgotFlow(false);
+    setStage(1);
+    setOtp(Array(6).fill(""));
+    setCurrState("Login");
+  };
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
     const formData = new FormData(e.target);
@@ -130,8 +130,8 @@ const LoginPopup = ({ setShowLogin }) => {
     const confirmPassword = formData.get("confirmPassword");
 
     if (!email || !password || (currState === "Sign Up" && !name)) {
-        return toast.error("Please fill all fields");
-      }
+      return toast.error("Please fill all fields");
+    }
 
     if (currState === "Sign Up" && password !== confirmPassword) {
       return toast.error("Passwords do not match");
@@ -141,11 +141,15 @@ const LoginPopup = ({ setShowLogin }) => {
       currState === "Sign Up" ? "/api/auth/register" : "/api/auth/login";
 
     try {
-        const { data } = await apiRequest.post(endpoint, { name, email, password });
+      const { data } = await apiRequest.post(endpoint, { name, email, password }, {
+        headers: { "Content-Type": "application/json" },
+        withCredentials: true
+      });
 
       toast.success(`${currState} successful!`);
 
       // Store user info locally (no token)
+      localStorage.setItem("authToken", data.token);
       localStorage.setItem("user", JSON.stringify(data.user));
 
       setShowLogin(false);
diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
index c8775b43..17e41f1f 100644
--- a/frontend/src/components/Navbar/Navbar.css
+++ b/frontend/src/components/Navbar/Navbar.css
@@ -136,9 +136,13 @@ body {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
   /* gap: 10px; */
-  /* margin-right: 10px; */
+}
+.menu-item{
+  display:flex;
+  align-items: center;
+  gap:0.5vmax;
 }
 
 /* ACTION BUTTONS */
diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
index 95797c98..febaa705 100644
--- a/frontend/src/components/Navbar/Navbar.jsx
+++ b/frontend/src/components/Navbar/Navbar.jsx
@@ -4,9 +4,10 @@ import { Link, useNavigate, useLocation } from "react-router-dom";
 import { StoreContext } from "../context/StoreContext";
 import { ThemeContext } from "../context/ThemeContext";
 import { assets } from "../../assets/frontend_assets/assets";
+import { Avatar, Divider, Menu, MenuItem } from '@mui/material'
+import {} from 'react-router-dom'
 import {
   Home,
-  Menu,
   Smartphone,
   Heart,
   Phone,
@@ -16,12 +17,12 @@ import {
   Moon,
   HelpCircle,
   Utensils,
-  Users,
-  Info,
   CircleDollarSign,
 } from "lucide-react";
 
 const Navbar = ({ setShowLogin }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
   const [menu, setMenu] = useState("home");
   const { cartItems, wishlistItems, toggleWishlist, getTotalCartAmount } =
     useContext(StoreContext);
@@ -38,12 +39,20 @@ const Navbar = ({ setShowLogin }) => {
 
   const handleNavMenuClick = (menuName, id) => {
     setMenu(menuName);
-      if (location.pathname !== "/") {
-        navigate("/", {state: {scrollTo: id } });
-      } else {
-        const section = document.getElementById(id);
-        if (section) section.scrollIntoView({ behavior: "smooth" });
-      }
+    if (location.pathname !== "/") {
+      navigate("/", { state: { scrollTo: id } });
+    } else {
+      const section = document.getElementById(id);
+      if (section) section.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  const handleMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
   };
 
   const handleLogout = () => {
@@ -52,7 +61,7 @@ const Navbar = ({ setShowLogin }) => {
     setUser(null);
     window.location.reload();
   };
-  
+
   // to trigger the dark theme on scroll bar
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
@@ -65,11 +74,11 @@ const Navbar = ({ setShowLogin }) => {
         onClick={(e) => {
           e.preventDefault();
           setMenu("home");
-          if(location.pathname === "/"){
+          if (location.pathname === "/") {
             // already on home, just scroll to top
-            window.scrollTo({top: 0, behavior: "smooth"});
+            window.scrollTo({ top: 0, behavior: "smooth" });
           }
-          else{
+          else {
             navigate("/");
           }
         }}
@@ -88,8 +97,8 @@ const Navbar = ({ setShowLogin }) => {
       </Link>
       <Link
         to="/"
-        state={{scrollTo: "explore-menu"}}
-        onClick={()=> setMenu("menu")}
+        state={{ scrollTo: "explore-menu" }}
+        onClick={() => setMenu("menu")}
         className={`nav-item ${menu === "menu" ? "active" : ""}`}
       >
         <Menu size={18} />
@@ -97,8 +106,8 @@ const Navbar = ({ setShowLogin }) => {
       </Link>
       <Link
         to="/"
-        state={{scrollTo: "appdownload"}}
-        onClick={()=> setMenu("mobile-app")}
+        state={{ scrollTo: "appdownload" }}
+        onClick={() => setMenu("mobile-app")}
         className={`nav-item ${menu === "mobile-app" ? "active" : ""}`}
       >
         <Smartphone size={18} />
@@ -112,20 +121,20 @@ const Navbar = ({ setShowLogin }) => {
         <Heart size={18} />
         <span>Wishlist</span>
         {Object.keys(wishlistItems).length > 0 && (
-  <div className="wishlist-badge">{Object.keys(wishlistItems).length}</div>
-)}
+          <div className="wishlist-badge">{Object.keys(wishlistItems).length}</div>
+        )}
 
       </Link>
 
-      
-   <Link
-      to="/aboutus"
-      onClick={() => setMenu("aboutus")}
-      className={`nav-item ${menu === "aboutus" ? "active" : ""}`}
-    >
-      <HelpCircle size={18} />
-      <span>About Us</span>
-    </Link>
+
+      <Link
+        to="/aboutus"
+        onClick={() => setMenu("aboutus")}
+        className={`nav-item ${menu === "aboutus" ? "active" : ""}`}
+      >
+        <HelpCircle size={18} />
+        <span>About Us</span>
+      </Link>
       <Link
         to="/contact"
         onClick={() => setMenu("contact-us")}
@@ -134,13 +143,13 @@ const Navbar = ({ setShowLogin }) => {
         <Phone size={18} />
         <span>Contact</span>
       </Link>
-       <Link
+      <Link
         to="/referral"
         onClick={() => setMenu("referral")}
         className={`nav-item ${menu === "referral" ? "active" : ""}`}
       >
         <CircleDollarSign size={20} strokeWidth={1.8} />
-        
+
         <span>Refer & Earn</span>
       </Link>
     </>
@@ -185,16 +194,27 @@ const Navbar = ({ setShowLogin }) => {
           </div>
 
           {/* User / Auth */}
+          <Avatar
+            onClick={handleMenuOpen}
+            sx={{ cursor: "pointer" }}
+          />
+         
           {user ? (
-            <div className="user-info">
-              <div className="user-avatar">
-                {user.name?.charAt(0).toUpperCase()}
-              </div>
-              <span>{user.name}</span>
-              <button className="signin-button" onClick={handleLogout}>
-                Logout
-              </button>
-            </div>
+            <Menu
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleMenuClose}
+            transformOrigin={{ horizontal: "right", vertical: "top" }}
+            anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+          >
+            <MenuItem>{user.name}</MenuItem>
+            <Divider/>
+            <MenuItem><Link to={'/profile/me'}>My Profile</Link></MenuItem>
+            <MenuItem><Link to={'/orders/me'}>My Orders</Link></MenuItem>
+            <MenuItem><Link to={'/wishlist'}>My Wishlist</Link></MenuItem>
+            <MenuItem>Reviews</MenuItem>
+            <MenuItem onClick={handleLogout}>Logout</MenuItem>
+          </Menu>
           ) : (
             <button className="signin-button" onClick={() => setShowLogin(true)}>
               <User size={16} />
diff --git a/frontend/src/components/Stepper/CheckoutFlow.jsx b/frontend/src/components/Stepper/CheckoutFlow.jsx
new file mode 100644
index 00000000..860ba753
--- /dev/null
+++ b/frontend/src/components/Stepper/CheckoutFlow.jsx
@@ -0,0 +1,10 @@
+/* eslint-disable no-unused-vars */
+import React from 'react'
+
+const CheckoutFlow = () => {
+  return (
+    <div>CheckoutFlow</div>
+  )
+}
+
+export default CheckoutFlow
\ No newline at end of file
diff --git a/frontend/src/components/Stepper/Stepper.jsx b/frontend/src/components/Stepper/Stepper.jsx
new file mode 100644
index 00000000..d8c6ff22
--- /dev/null
+++ b/frontend/src/components/Stepper/Stepper.jsx
@@ -0,0 +1,10 @@
+/* eslint-disable no-unused-vars */
+import React from 'react'
+
+const Stepper = () => {
+  return (
+    <div>Stepper</div>
+  )
+}
+
+export default Stepper
\ No newline at end of file
diff --git a/frontend/src/pages/ConfirmOrder/ConfirmOrder.css b/frontend/src/pages/ConfirmOrder/ConfirmOrder.css
new file mode 100644
index 00000000..c8ebc0cb
--- /dev/null
+++ b/frontend/src/pages/ConfirmOrder/ConfirmOrder.css
@@ -0,0 +1,75 @@
+.order-confirm{
+    display: flex;
+    align-items:center;
+    justify-content: space-between;
+    width: 70vw;
+    margin: auto;
+    margin-top: 10vmax;
+    border: 1px solid rgba(234, 230, 230, 1);
+    border-radius: 10px;
+    background-color: rgba(250, 248, 248, 1);
+    padding: 2vmax
+}
+.order-confirm-left{
+    display: flex;
+    flex-direction: column;
+    gap: 2vmax;
+    width: 35vw
+}
+.order-confirm-user-details{
+    display: flex;
+    align-items:center;
+    gap: 3vmax
+}
+.order-confirm-btn{
+     display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    background-color: tomato;
+    color: white;
+    padding: 18px 32px;
+    font-size: 18px;
+    font-weight: bold;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    margin-inline: 1vmax;
+    width: 20vmax
+}
+.order-confirm-btn:hover{
+    background-color: rgb(239, 17, 17);
+    transform: scale(1.05);
+}
+.order-confirm-right{
+    display: flex;
+    flex-direction: column;
+    gap: 2vmax;
+    width: 35vw;
+    border: 1px solid rgba(234, 230, 230, 1);
+    border-radius: 10px;
+    background-color: white;
+    padding: 2vmax;
+}
+.order-confirm-details, .order-confirm-order, .order-conform-subtotal, .order-conform-shipping, .order-conform-tax, .order-confirm-paytotal{
+    display: flex;
+    align-items:center;
+    justify-content: space-between
+}
+.order-conform-subtotal, .order-conform-shipping, .order-conform-tax{
+gap: 1vmax
+}
+
+@media (max-width: 768px) {
+    .order-confirm{
+        flex-direction:column;
+        width: 100vw;
+    }
+    .order-confirm-left, .order-confirm-right{
+        width: 100vw;
+        margin: auto;
+    }
+    .order-confirm-btn{
+        width: 90vw
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/ConfirmOrder/ConfirmOrder.jsx b/frontend/src/pages/ConfirmOrder/ConfirmOrder.jsx
new file mode 100644
index 00000000..15277957
--- /dev/null
+++ b/frontend/src/pages/ConfirmOrder/ConfirmOrder.jsx
@@ -0,0 +1,93 @@
+/* eslint-disable no-unused-vars */
+import React from 'react'
+import { Typography } from '@mui/material'
+import './ConfirmOrder.css'
+import { food_list } from '../../assets/frontend_assets/assets'
+import { Link } from 'react-router-dom'
+
+const ConfirmOrder = () => {
+  return (
+    <>
+    
+      <div className="order-confirm">
+        <div className="order-confirm-left">
+          <h1>Confirm Your order</h1>
+          <Typography>Your order will be processed within few minutes, We will notify you once it is shipped</Typography>
+          <h3>Billing Address</h3>
+          <div className="order-confirm-user-details">
+            <b>Name</b>
+            <p>Nikhil Yadav</p>
+          </div>
+          <div className="order-confirm-user-details">
+            <b>Address</b>
+            <p style={{ marginLeft: '-1vmax' }}>22-ring road, Gorakhpur</p>
+          </div>
+          <div className="order-confirm-user-details">
+            <b>Email</b>
+            <p>nikhil@gmail.com</p>
+          </div>
+          <div className="order-confirm-user-details">
+            <b>Phone</b>
+            <p>6789045671</p>
+          </div>
+         <Link to={'/order/payment'}><button className='order-confirm-btn'>Procced To Payment</button></Link>
+        </div>
+        <div className="order-confirm-right">
+          <h3>Order Summary</h3>
+          <hr />
+          <div className="order-confirm-details">
+            <div className="order-confir-date">
+              <p>Date</p>
+              <b>13 Sep 2025</b>
+            </div>
+            <div className="order-confir-id">
+              <p>Order Id</p>
+              <b>1234567</b>
+            </div>
+            <div className="order-confir-payment">
+              <p>Payment method</p>
+              <b>RazorPay</b>
+            </div>
+          </div>
+          <hr />
+          {food_list.slice(0, 2).map((item) => {
+            return (
+              <div className="order-confirm-order" key={item._id}>
+                <img
+                  src={item.image}
+                  alt={item.name}
+                  width={85}
+                  loading="lazy"
+                />
+                <p>{item.name}</p>
+                <p>$ {item.price}</p>
+              </div>
+            )
+          })}
+          <hr />
+          <div className="order-confirm-total">
+            <div className="order-conform-subtotal">
+              <p>Sub total</p>
+              <b>$ 70</b>
+            </div>
+            <div className="order-conform-shipping">
+              <p>Shipping</p>
+              <b>$ 5</b>
+            </div>
+            <div className="order-conform-tax">
+              <p>tax</p>
+              <b>$ 2</b>
+            </div>
+          </div>
+          <hr />
+          <div className="order-confirm-paytotal">
+            <b>Order Total</b>
+            <b>$ 77</b>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default ConfirmOrder
\ No newline at end of file
diff --git a/frontend/src/pages/Payment/Payment.jsx b/frontend/src/pages/Payment/Payment.jsx
index e2d28191..dc5f982b 100644
--- a/frontend/src/pages/Payment/Payment.jsx
+++ b/frontend/src/pages/Payment/Payment.jsx
@@ -21,7 +21,9 @@ const Payment = () => {
     try {
       const { data } = await axios.post(
         "http://localhost:4000/api/payment/create-order",
-        { amount } // send in USD
+        { amount } , {
+          withCredentials: true
+        }
       );
 
       if (!data.success) {

From a98ecccd4c7503072f4580ce8b96d23c787f3e97 Mon Sep 17 00:00:00 2001
From: Nikhil <ny5036851@gmail.com>
Date: Thu, 18 Sep 2025 12:23:22 +0530
Subject: [PATCH 6/7] added similar restaurant feature

---
 .../src/pages/Restaurants/Restaurants.jsx     |   2 +
 .../pages/Restaurants/SimilarRestaurants.jsx  | 129 ++++++++++++++++++
 2 files changed, 131 insertions(+)
 create mode 100644 frontend/src/pages/Restaurants/SimilarRestaurants.jsx

diff --git a/frontend/src/pages/Restaurants/Restaurants.jsx b/frontend/src/pages/Restaurants/Restaurants.jsx
index 2f338a67..4e5663bd 100644
--- a/frontend/src/pages/Restaurants/Restaurants.jsx
+++ b/frontend/src/pages/Restaurants/Restaurants.jsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import "./Restaurants.css";
 import { Star, MapPin, Clock } from "lucide-react";
 import { useNavigate } from "react-router-dom";
+import SimilarRestaurants from "./SimilarRestaurants";
 
 const Restaurants = () => {
   const navigate = useNavigate();
@@ -147,6 +148,7 @@ const Restaurants = () => {
           </p>
         )}
       </div>
+      <SimilarRestaurants/>
     </div>
   );
 };
diff --git a/frontend/src/pages/Restaurants/SimilarRestaurants.jsx b/frontend/src/pages/Restaurants/SimilarRestaurants.jsx
new file mode 100644
index 00000000..69071887
--- /dev/null
+++ b/frontend/src/pages/Restaurants/SimilarRestaurants.jsx
@@ -0,0 +1,129 @@
+import { Clock, MapPin, Star } from 'lucide-react'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import "./Restaurants.css";
+
+const SimilarRestaurants = () => {
+    const navigate = useNavigate();
+    const SimilarRestaurants = [
+        {
+            id: 1,
+            name: "White Rose",
+            image: "https://b.zmtcdn.com/data/pictures/1/2900111/bb0ff3eb4f4c5bc782e4e84aecca429b_featured_v2.jpg?output-format=webp",
+            rating: 4.5,
+            discount: "25% OFF",
+            cuisine: "Chinese",
+            deliveryTime: "40-45 min",
+            location: "Gurgaon",
+            description: "Authentic Italian cuisine with fresh ingredients and traditional recipes.",
+        },
+        {
+            id: 1,
+            name: "The Fork",
+            image: "https://b.zmtcdn.com/data/pictures/6/19729416/328bd9a65a1ebde88d5f70c8e1aaf90a_featured_v2.jpg?output-format=webp",
+            rating: 4.3,
+            discount: "15% OFF",
+            cuisine: "North Indian",
+            deliveryTime: "35-40 min",
+            location: "Noida",
+            description: "Authentic Italian cuisine with fresh ingredients and traditional recipes.",
+        },
+        {
+            id: 1,
+            name: "Green tea",
+            image: "https://b.zmtcdn.com/data/pictures/3/2901243/8b17b1df933b87ca0a537f2188343b2d_featured_v2.jpg?output-format=webp",
+            rating: 4.4,
+            discount: "20% OFF",
+            cuisine: "Italian",
+            deliveryTime: "20-25 min",
+            location: "Hyderabad",
+            description: "Authentic Italian cuisine with fresh ingredients and traditional recipes.",
+        },
+        {
+            id: 1,
+            name: "Paris Bakry",
+            image: "https://b.zmtcdn.com/data/pictures/chains/2/19391402/baba44b8700e02256928be092a272b42_featured_v2.jpg?output-format=webp",
+            rating: 4.2,
+            discount: "30% OFF",
+            cuisine: "South Indian",
+            deliveryTime: "25-30 min",
+            location: "Bangalore",
+            description: "Authentic Italian cuisine with fresh ingredients and traditional recipes.",
+        },
+
+    ]
+    const renderStars = (rating) => {
+        const stars = [];
+        const fullStars = Math.floor(rating);
+        const hasHalfStar = rating % 1 !== 0;
+
+        for (let i = 0; i < fullStars; i++) {
+            stars.push(<Star key={i} size={16} fill="#FFD700" color="#FFD700" />);
+        }
+
+        if (hasHalfStar) {
+            stars.push(
+                <Star key="half" size={16} fill="#FFD700" color="#FFD700" style={{ opacity: 0.5 }} />
+            );
+        }
+
+        const emptyStars = 5 - Math.ceil(rating);
+        for (let i = 0; i < emptyStars; i++) {
+            stars.push(<Star key={`empty-${i}`} size={16} color="#ddd" />);
+        }
+
+        return stars;
+    };
+    return (
+        <>
+            <h2>Similar Restaurants</h2>
+            <div className="restaurants-grid">
+                {
+                    SimilarRestaurants.map((restaurants) => {
+                        return (
+                            <div
+                                key={restaurants.id}
+                                className="restaurant-card"
+                                onClick={() => navigate(`/restaurant/${restaurants.id}`)}
+                                style={{ cursor: "pointer" }}
+                            >
+                                <div className="restaurant-image-container">
+                                    <img src={restaurants.image} alt={restaurants.name} className="restaurant-image" />
+                                    <div className="discount-badge">{restaurants.discount}</div>
+                                </div>
+
+                                <div className="restaurant-info">
+                                    <div className="restaurant-header">
+                                        <h3 className="restaurant-name">{restaurants.name}</h3>
+                                        <div className="rating-container">
+                                            {renderStars(restaurants.rating)}
+                                            <span className="rating-text">{restaurants.rating}</span>
+                                        </div>
+                                    </div>
+
+                                    <div className="restaurant-details">
+                                        <div className="detail-item">
+                                            <MapPin size={14} />
+                                            <span>{restaurants.location}</span>
+                                        </div>
+                                        <div className="detail-item">
+                                            <Clock size={14} />
+                                            <span>{restaurants.deliveryTime}</span>
+                                        </div>
+                                    </div>
+
+                                    <p className="restaurant-cuisine">{restaurants.cuisine}</p>
+                                    <p className="restaurant-description">{restaurants.description}</p>
+
+                                    <button className="order-now-btn">Order Now</button>
+                                </div>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        </>
+    )
+}
+
+export default SimilarRestaurants
\ No newline at end of file

From 012c6579b09b6cd2baf7f02463719a3b93d9389f Mon Sep 17 00:00:00 2001
From: Nikhil <ny5036851@gmail.com>
Date: Thu, 18 Sep 2025 13:12:18 +0530
Subject: [PATCH 7/7] add share feature for restaurants

---
 .../src/pages/Restaurants/Restaurants.css     |  6 +-
 .../src/pages/Restaurants/Restaurants.jsx     | 87 +++++++++++++++++-
 .../pages/Restaurants/SimilarRestaurants.jsx  | 92 +++++++++++++++++--
 3 files changed, 177 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Restaurants/Restaurants.css b/frontend/src/pages/Restaurants/Restaurants.css
index f6b031ef..4e2e8edb 100644
--- a/frontend/src/pages/Restaurants/Restaurants.css
+++ b/frontend/src/pages/Restaurants/Restaurants.css
@@ -191,7 +191,11 @@
 .order-now-btn:hover {
   background-color: #e5533d;
 }
-
+.share-restaurants{
+  display: flex;
+  align-items: center;
+  justify-content:space-between
+}
 @keyframes FadeIn {
   0% {
     opacity: 0;
diff --git a/frontend/src/pages/Restaurants/Restaurants.jsx b/frontend/src/pages/Restaurants/Restaurants.jsx
index 4e5663bd..d4d4e73c 100644
--- a/frontend/src/pages/Restaurants/Restaurants.jsx
+++ b/frontend/src/pages/Restaurants/Restaurants.jsx
@@ -3,10 +3,16 @@ import "./Restaurants.css";
 import { Star, MapPin, Clock } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import SimilarRestaurants from "./SimilarRestaurants";
+import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
+import { FaSquareWhatsapp, FaSquareXTwitter, FaFacebook } from "react-icons/fa6";
+import { SiGmail } from "react-icons/si";
+import { LuShare2 } from "react-icons/lu";
+
 
 const Restaurants = () => {
   const navigate = useNavigate();
   const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
 
   const restaurants = [
     {
@@ -55,6 +61,57 @@ const Restaurants = () => {
     },
   ];
 
+  const shareUrl = window.location.href;
+  const options = [
+    {
+      icon: <FaSquareWhatsapp
+        color="green"
+        size={50}
+        cursor={'pointer'}
+        onClick={() => window.open(`https://wa.me/?text=${encodeURIComponent(shareUrl)}`)}
+      />,
+      text: "WhatsApp"
+    },
+    {
+      icon: <FaFacebook
+        color="blue"
+        size={50}
+        cursor={'pointer'}
+        onClick={() => window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+          shareUrl
+        )}`, "_blank")}
+      />,
+      text: "Instagram"
+    },
+    {
+      icon: <FaSquareXTwitter
+        size={50}
+        cursor={'pointer'}
+        color="black"
+        onClick={() => window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(
+          shareUrl
+        )}`)}
+      />,
+      text: "Twitter"
+    },
+    {
+      icon: <SiGmail
+        size={50}
+        cursor={'pointer'}
+        color="red"
+        onClick={() => window.open(`mailto:?subject=${encodeURIComponent(
+          "Check out this food on Foodie!"
+        )}&body=${encodeURIComponent(
+          `I found this food item, thought you might like it: ${shareUrl}`
+        )}`)}
+      />,
+      text: "Mail"
+    }
+  ]
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
   // Filter restaurants by cuisine search
   const filteredRestaurants = restaurants.filter((restaurant) =>
     restaurant.cuisine.toLowerCase().includes(search.toLowerCase())
@@ -133,6 +190,34 @@ const Restaurants = () => {
                     <Clock size={14} />
                     <span>{restaurant.deliveryTime}</span>
                   </div>
+                  <div className='share-restaurants'>
+                    <p className="restaurant-cuisine">{restaurants.cuisine}</p>
+                    <IconButton
+                      onClick={(e) => {
+                        e.stopPropagation(); // prevent parent card onClick
+                        handleOpen();
+                      }}
+                    >
+                      <LuShare2 />
+                    </IconButton>
+                    <Dialog open={open} onClose={handleClose}>
+                      <DialogTitle align="center">Share this Food</DialogTitle>
+                      <DialogContent>
+                        <div style={{ display: "flex", alignItems: "center", gap: "1vmax" }}>
+                          {
+                            options.map((item, index) => {
+                              return (
+                                <div key={index} style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+                                  <IconButton>{item.icon}</IconButton>
+                                  {item.text}
+                                </div>
+                              )
+                            })
+                          }
+                        </div>
+                      </DialogContent>
+                    </Dialog>
+                  </div>
                 </div>
 
                 <p className="restaurant-cuisine">{restaurant.cuisine}</p>
@@ -148,7 +233,7 @@ const Restaurants = () => {
           </p>
         )}
       </div>
-      <SimilarRestaurants/>
+      <SimilarRestaurants />
     </div>
   );
 };
diff --git a/frontend/src/pages/Restaurants/SimilarRestaurants.jsx b/frontend/src/pages/Restaurants/SimilarRestaurants.jsx
index 69071887..c9665440 100644
--- a/frontend/src/pages/Restaurants/SimilarRestaurants.jsx
+++ b/frontend/src/pages/Restaurants/SimilarRestaurants.jsx
@@ -1,10 +1,16 @@
 import { Clock, MapPin, Star } from 'lucide-react'
-import React from 'react'
+import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import "./Restaurants.css";
+import { LuShare2 } from "react-icons/lu";
+import { Dialog, DialogContent, DialogTitle, IconButton } from '@mui/material'
+import { FaSquareWhatsapp, FaSquareXTwitter, FaFacebook } from "react-icons/fa6";
+import { SiGmail } from "react-icons/si";
 
 const SimilarRestaurants = () => {
     const navigate = useNavigate();
+    const [open, setOpen] = useState(false);
+    const shareUrl = window.location.href;
     const SimilarRestaurants = [
         {
             id: 1,
@@ -18,7 +24,7 @@ const SimilarRestaurants = () => {
             description: "Authentic Italian cuisine with fresh ingredients and traditional recipes.",
         },
         {
-            id: 1,
+            id: 2,
             name: "The Fork",
             image: "https://b.zmtcdn.com/data/pictures/6/19729416/328bd9a65a1ebde88d5f70c8e1aaf90a_featured_v2.jpg?output-format=webp",
             rating: 4.3,
@@ -29,7 +35,7 @@ const SimilarRestaurants = () => {
             description: "Authentic Italian cuisine with fresh ingredients and traditional recipes.",
         },
         {
-            id: 1,
+            id: 3,
             name: "Green tea",
             image: "https://b.zmtcdn.com/data/pictures/3/2901243/8b17b1df933b87ca0a537f2188343b2d_featured_v2.jpg?output-format=webp",
             rating: 4.4,
@@ -40,7 +46,7 @@ const SimilarRestaurants = () => {
             description: "Authentic Italian cuisine with fresh ingredients and traditional recipes.",
         },
         {
-            id: 1,
+            id: 4,
             name: "Paris Bakry",
             image: "https://b.zmtcdn.com/data/pictures/chains/2/19391402/baba44b8700e02256928be092a272b42_featured_v2.jpg?output-format=webp",
             rating: 4.2,
@@ -52,6 +58,52 @@ const SimilarRestaurants = () => {
         },
 
     ]
+    const options = [
+        {
+            icon: <FaSquareWhatsapp
+                color="green"
+                size={50}
+                cursor={'pointer'}
+                onClick={() => window.open(`https://wa.me/?text=${encodeURIComponent(shareUrl)}`)}
+            />,
+            text: "WhatsApp"
+        },
+        {
+            icon: <FaFacebook
+                color="blue"
+                size={50}
+                cursor={'pointer'}
+                onClick={() => window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+                    shareUrl
+                )}`, "_blank")}
+            />,
+            text: "Instagram"
+        },
+        {
+            icon: <FaSquareXTwitter
+                size={50}
+                cursor={'pointer'}
+                color="black"
+                onClick={() => window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(
+                    shareUrl
+                )}`)}
+            />,
+            text: "Twitter"
+        },
+        {
+            icon: <SiGmail
+                size={50}
+                cursor={'pointer'}
+                color="red"
+                onClick={() => window.open(`mailto:?subject=${encodeURIComponent(
+                    "Check out this food on Foodie!"
+                )}&body=${encodeURIComponent(
+                    `I found this food item, thought you might like it: ${shareUrl}`
+                )}`)}
+            />,
+            text: "Mail"
+        }
+    ]
     const renderStars = (rating) => {
         const stars = [];
         const fullStars = Math.floor(rating);
@@ -74,6 +126,8 @@ const SimilarRestaurants = () => {
 
         return stars;
     };
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
     return (
         <>
             <h2>Similar Restaurants</h2>
@@ -111,8 +165,34 @@ const SimilarRestaurants = () => {
                                             <span>{restaurants.deliveryTime}</span>
                                         </div>
                                     </div>
-
-                                    <p className="restaurant-cuisine">{restaurants.cuisine}</p>
+                                    <div className='share-restaurants'>
+                                        <p className="restaurant-cuisine">{restaurants.cuisine}</p>
+                                        <IconButton
+                                            onClick={(e) => {
+                                                e.stopPropagation(); // prevent parent card onClick
+                                                handleOpen();
+                                            }}
+                                        >
+                                            <LuShare2 />
+                                        </IconButton>
+                                        <Dialog open={open} onClose={handleClose}>
+                                            <DialogTitle align="center">Share this Food</DialogTitle>
+                                            <DialogContent>
+                                                <div style={{ display: "flex", alignItems: "center", gap: "1vmax" }}>
+                                                    {
+                                                        options.map((item, index) => {
+                                                            return (
+                                                                <div key={index} style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+                                                                    <IconButton>{item.icon}</IconButton>
+                                                                    {item.text}
+                                                                </div>
+                                                            )
+                                                        })
+                                                    }
+                                                </div>
+                                            </DialogContent>
+                                        </Dialog>
+                                    </div>
                                     <p className="restaurant-description">{restaurants.description}</p>
 
                                     <button className="order-now-btn">Order Now</button>