From 625d0858c4cfe5fa3a51c307af390efacf526c73 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Mon, 1 Jul 2024 02:04:25 +0530
Subject: [PATCH] now user can update image and description

---
 server/controllers/canteenController.js |  64 +++++++-
 server/routes/canteen.js                |   6 +-
 src/App.css                             |   3 -
 src/components/Modal-update.js          |  26 +++-
 src/components/Navbar.jsx               |  77 +++-------
 src/pages/Foodlist.jsx                  |  45 ++++--
 src/pages/MenuPage.jsx                  | 190 ++++--------------------
 7 files changed, 160 insertions(+), 251 deletions(-)

diff --git a/server/controllers/canteenController.js b/server/controllers/canteenController.js
index 697e48e..834120c 100644
--- a/server/controllers/canteenController.js
+++ b/server/controllers/canteenController.js
@@ -334,12 +334,29 @@ const updateCanteen = async (req, res, next) => {
 // Controller function to update a breakfast dish
 const updateBreakfastDish = asyncHandler(async (req, res, next) => {
   const canteenId = req.params.id;
-  const { dishId, dish } = req.body;
+  const { dishId, dish, description, dishImage } = req.body;
+
+  let uploadedImageUrl = null;
+
+  if (dishImage) {
+    try {
+      const uploadResult = await uploadImage(dishImage);
+      uploadedImageUrl = uploadResult.secure_url;
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      return res.status(500).json({ message: 'Failed to upload image' });
+    }
+  }
 
   try {
+    const updateFields = { dish, description };
+    if (uploadedImageUrl) {
+      updateFields.dishImage = uploadedImageUrl;
+    }
+
     const updatedDish = await Breakfast.findOneAndUpdate(
       { _id: dishId, canteen: canteenId },
-      { $set: { dish } },
+      { $set: updateFields },
       { new: true }
     ).exec();
 
@@ -355,12 +372,29 @@ const updateBreakfastDish = asyncHandler(async (req, res, next) => {
 //Controller to update Lunch
 const updateLunchDish = asyncHandler(async (req, res, next) => {
   const canteenId = req.params.id;
-  const { dishId, dish } = req.body;
+  const { dishId, dish, description, dishImage } = req.body;
+
+  let uploadedImageUrl = null;
+
+  if (dishImage) {
+    try {
+      const uploadResult = await uploadImage(dishImage);
+      uploadedImageUrl = uploadResult.secure_url;
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      return res.status(500).json({ message: 'Failed to upload image' });
+    }
+  }
 
   try {
+    const updateFields = { dish, description };
+    if (uploadedImageUrl) {
+      updateFields.dishImage = uploadedImageUrl;
+    }
+
     const updatedDish = await Lunch.findOneAndUpdate(
       { _id: dishId, canteen: canteenId },
-      { $set: { dish } },
+      { $set: updateFields },
       { new: true }
     ).exec();
 
@@ -377,12 +411,29 @@ const updateLunchDish = asyncHandler(async (req, res, next) => {
 
 const updateDinnerDish = asyncHandler(async (req, res, next) => {
   const canteenId = req.params.id;
-  const { dishId, dish } = req.body;
+  const { dishId, dish, description, dishImage } = req.body;
+
+  let uploadedImageUrl = null;
+
+  if (dishImage) {
+    try {
+      const uploadResult = await uploadImage(dishImage);
+      uploadedImageUrl = uploadResult.secure_url;
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      return res.status(500).json({ message: 'Failed to upload image' });
+    }
+  }
 
   try {
+    const updateFields = { dish, description };
+    if (uploadedImageUrl) {
+      updateFields.dishImage = uploadedImageUrl;
+    }
+
     const updatedDish = await Dinner.findOneAndUpdate(
       { _id: dishId, canteen: canteenId },
-      { $set: { dish } },
+      { $set: updateFields },
       { new: true }
     ).exec();
 
@@ -397,6 +448,7 @@ const updateDinnerDish = asyncHandler(async (req, res, next) => {
 });
 
 
+
 module.exports = {
   getCanteenDashboard,
   addBreakfastDish,
diff --git a/server/routes/canteen.js b/server/routes/canteen.js
index f8dd47a..7cb5b36 100644
--- a/server/routes/canteen.js
+++ b/server/routes/canteen.js
@@ -43,8 +43,8 @@ router.delete('/:id/dinner/remove',auth,isCanteen, canteenController.removeDinne
 router.put('/:id/update', auth, isCanteen, multerUploads, canteenController.updateCanteen);
 
 // New update routes
-router.put('/:id/breakfast/updateitem',auth,isCanteen, canteenController.updateBreakfastDish);
-router.put('/:id/lunch/updateitem',auth,isCanteen, canteenController.updateLunchDish);
-router.put('/:id/dinner/updateitem',auth,isCanteen, canteenController.updateDinnerDish);
+router.put('/:id/breakfast/updateitem',auth,isCanteen,multerUploads, canteenController.updateBreakfastDish);
+router.put('/:id/lunch/updateitem',auth,isCanteen,multerUploads, canteenController.updateLunchDish);
+router.put('/:id/dinner/updateitem',auth,isCanteen,multerUploads, canteenController.updateDinnerDish);
 
 module.exports = router;
diff --git a/src/App.css b/src/App.css
index 95be599..a445221 100644
--- a/src/App.css
+++ b/src/App.css
@@ -42,8 +42,6 @@ li:hover span {
 
 .nav-item{
   font-size: 52px !important;
-<<<<<<< Updated upstream
-=======
 }
 
 .star-rating {
@@ -90,5 +88,4 @@ li:hover span {
 .stars {
   color: yellow;
   font-size: 24px; /* Increase the font size to make the stars bigger */
->>>>>>> Stashed changes
 }
\ No newline at end of file
diff --git a/src/components/Modal-update.js b/src/components/Modal-update.js
index 37e99df..140d73d 100644
--- a/src/components/Modal-update.js
+++ b/src/components/Modal-update.js
@@ -1,8 +1,15 @@
-
 import React, { useState } from "react";
 
 const Modalupdate = ({ dish, onUpdate, onCancel }) => {
-  const [updatedDish, setUpdatedDish] = useState(dish);
+  const [updatedDish, setUpdatedDish] = useState({
+    dish: dish.dish,
+    description: dish.description || "",
+    dishImage: null, // For the new image file
+  });
+
+  const handleFileChange = (e) => {
+    setUpdatedDish({ ...updatedDish, dishImage: e.target.files[0] });
+  };
 
   const handleUpdate = () => {
     onUpdate(updatedDish);
@@ -14,8 +21,19 @@ const Modalupdate = ({ dish, onUpdate, onCancel }) => {
         <h2 className="text-2xl mb-4">Edit Dish</h2>
         <input
           type="text"
-          value={updatedDish}
-          onChange={(e) => setUpdatedDish(e.target.value)}
+          value={updatedDish.dish}
+          onChange={(e) => setUpdatedDish({ ...updatedDish, dish: e.target.value })}
+          className="border border-gray-300 p-2 w-full mb-4"
+        />
+        <textarea
+          value={updatedDish.description}
+          onChange={(e) => setUpdatedDish({ ...updatedDish, description: e.target.value })}
+          className="border border-gray-300 p-2 w-full mb-4"
+          placeholder="Description"
+        />
+        <input
+          type="file"
+          onChange={handleFileChange}
           className="border border-gray-300 p-2 w-full mb-4"
         />
         <div className="flex justify-end">
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index e1c35b8..45a9a8b 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,6 +1,5 @@
-import React, { useState, useContext } from "react";
-import { Link, useNavigate } from "react-router-dom";
-
+import React, { useState, useContext, useEffect } from "react";
+import { Link } from "react-router-dom";
 import logo from "../assets/logo2.png";
 import { motion, AnimatePresence, useScroll } from "framer-motion";
 import { IoClose } from "react-icons/io5";
@@ -10,10 +9,9 @@ import { jwtDecode } from "jwt-decode";
 import { useAuth } from "../authContext";
 
 const Navbar = () => {
-  const navigate = useNavigate();
-  const canteenId = localStorage.getItem("canteenId");
+  
   const { logout} = useAuth();
-
+  // const [canteenId, setCanteenId] = useState(null);
   const { theme, toggleTheme } = useContext(ThemeContext);
   const [isOpen, setIsOpen] = useState(false);
   const { scrollYProgress } = useScroll();
@@ -37,12 +35,6 @@ const Navbar = () => {
     setIsOpen(!isOpen);
   };
 
-  const handleLogout = () => {
-    localStorage.removeItem('usertoken');
-    navigate('/')
-  }
-
-
   return (
     <>
     <nav className="text-white p-3 shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
@@ -70,21 +62,19 @@ const Navbar = () => {
             </div>
           </div>
 
-            <div className="hidden md:flex items-center gap-5">
-              <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none">
-                {theme === 'dark' ? '🌞' : '🌙'}
-              </button>
-              <div>
-                <Link to="/">
-                  <button
-                    onClick={handleLogout}
-                    className={`py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
-                  >
-                    Log out
-                  </button>
-                </Link>
-              </div>
-
+          <div className="hidden md:flex items-center gap-5">
+            <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none">
+              {theme === 'dark' ? '🌞' : '🌙'}
+            </button>
+            <div>
+              <Link to="/">
+                <button
+                  onClick={logout}
+                  className={`py-1 px-2  w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
+                >
+                  Log out
+                </button>
+              </Link>
             </div>
           </div>
 
@@ -140,39 +130,6 @@ const Navbar = () => {
     </nav>
   </>
 
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              initial={{ opacity: 0, y: -50 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -50 }}
-              className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
-            >
-              <div className="w-[100%] bg-[#152146] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
-                <MobileNavItem to="/home">Home</MobileNavItem>
-                <MobileNavItem to="/about">About us</MobileNavItem>
-                <MobileNavItem to="/news">News</MobileNavItem>
-                <MobileNavItem to="/contact">Contact</MobileNavItem>
-                <MobileNavItem to="/rateus">RateUs</MobileNavItem>
-                {/* Conditionally render "My Canteen" button */}
-                {canteenId && (
-                  <MobileNavItem to={`/section/${canteenId}`}>My Canteen</MobileNavItem>
-                )}
-                <MobileNavItem to="/">
-                  <button
-                  onClick={handleLogout}
-                    className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-500 hover:bg-green-700 text-white py-1 px-2'}`}
-                  >
-                    Log out
-                  </button>
-                </MobileNavItem>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </nav>
-    </>
-
   );
 };
 
diff --git a/src/pages/Foodlist.jsx b/src/pages/Foodlist.jsx
index dd309e5..d574238 100644
--- a/src/pages/Foodlist.jsx
+++ b/src/pages/Foodlist.jsx
@@ -83,17 +83,24 @@ const Foodlist = () => {
         return;
       }
 
+      const formData = new FormData();
+      formData.append("dishId", currentDish._id);
+      formData.append("dish", updatedDish.dish);
+      formData.append("description", updatedDish.description);
+
+      if (updatedDish.dishImage) {
+        const base64Image = await convertToBase64(updatedDish.dishImage);
+        formData.append("dishImage", base64Image);
+      }
+
       await axios.put(
         `${process.env.REACT_APP_BASE_URL}/${_id}/${currentDish.mealType}/updateitem`,
-        {
-          dishId: currentDish._id,
-          dish: updatedDish,
-        },
+        formData,
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": "multipart/form-data",
             Authorization: `Bearer ${token}`, // Include the token in the Authorization header
-          }
+          },
         }
       );
 
@@ -109,6 +116,15 @@ const Foodlist = () => {
     }
   };
 
+  const convertToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = (error) => reject(error);
+    });
+  };
+
   useEffect(() => {
     getFoodData("breakfast", setBreakfast);
     getFoodData("lunch", setLunch);
@@ -243,8 +259,8 @@ const Foodlist = () => {
               </div>
             )}
             {dinner && (
-              <div className="w-2/3 rounded-lg shadow-md border-yellow-300 border-2 mt-5">
-                <div className="text-center bg-yellow-300 text-black py-3 font-xl relative">
+              <div className="w-2/3 rounded-lg shadow-md border-blue-300 border-2 mt-5">
+                <div className="text-center bg-blue-300 text-black py-3 font-xl relative">
                   <img
                     src="https://cdn-icons-png.flaticon.com/128/3321/3321601.png"
                     alt="Dinner Icon"
@@ -258,8 +274,8 @@ const Foodlist = () => {
                       <li
                         key={dish._id}
                         onClick={() => handleDishClick(dish._id)}
-                        className={`cursor-pointer relative text-start hover:bg-gradient-to-r from-yellow-300 to-yellow-500 transition-transform duration-300 ease-in-out transform hover:-translate-y-1 px-5 py-2 ${
-                          theme === "dark" ? "text-white" : "text-yellow-600"
+                        className={`cursor-pointer relative text-start hover:bg-gradient-to-r from-green-300 to-green-500 transition-transform duration-300 ease-in-out transform hover:-translate-y-1 px-5 py-2 ${
+                          theme === "dark" ? "text-white" : "text-blue-600"
                         } hover:text-black mt-2`}
                       >
                         • {dish.dish}
@@ -298,13 +314,12 @@ const Foodlist = () => {
           </div>
         )}
       </div>
-   
-      {/* Modal for Editing Dish */}
+      <Footer />
       {editModal && (
         <Modalupdate
-          dish={currentDish.dish}
-          onUpdate={(updatedDish) => handleUpdateDish(updatedDish)}
-          onCancel={() => setEditModal(false)}
+          dish={currentDish}
+          onClose={() => setEditModal(false)}
+          onUpdate={handleUpdateDish}
         />
       )}
     </div>
diff --git a/src/pages/MenuPage.jsx b/src/pages/MenuPage.jsx
index 57fc33b..352f09b 100644
--- a/src/pages/MenuPage.jsx
+++ b/src/pages/MenuPage.jsx
@@ -5,37 +5,16 @@ import { toast } from "react-hot-toast";
 import Navbar from "../components/Navbar";
 import Loader from "../components/Loader/Loader";
 import Footer from "../components/Footer";
+import FoodCard from "../components/FoodCard";
 import { ThemeContext } from '../themeContext';
 
-const StarRating = ({ rating, onRatingChange }) => {
-  const [hoverRating, setHoverRating] = useState(0);
-
-  return (
-    <div className="star-rating">
-      {[1, 2, 3, 4, 5].map((star) => (
-        <button
-          type="button"
-          key={star}
-          className={`star ${star <= (hoverRating || rating) ? "on" : "off"}`}
-          onClick={() => onRatingChange(star)}
-          onMouseEnter={() => setHoverRating(star)}
-          onMouseLeave={() => setHoverRating(0)}
-        >
-          &#9733;
-        </button>
-      ))}
-    </div>
-  );
-};
-
 function MenuPage() {
   const { _id } = useParams();
-  const [breakfast, setBreakfast] = useState();
-  const [lunch, setLunch] = useState();
-  const [dinner, setDinner] = useState();
-  const [selectedDish, setSelectedDish] = useState(null);
+  const [breakfast, setBreakfast] = useState([]);
+  const [lunch, setLunch] = useState([]);
+  const [dinner, setDinner] = useState([]);
+  const [selectedCategory, setSelectedCategory] = useState('breakfast');
   const [feedback, setFeedback] = useState("");
-  const [rating, setRating] = useState(0);
   const [loading, setLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [searchResults, setSearchResults] = useState([]);
@@ -54,7 +33,7 @@ function MenuPage() {
         }
       );
       const res = await getBreakfast.json();
-      setBreakfast(res);
+      setBreakfast(res.data);
     } catch (error) {
       console.error(error);
     } finally {
@@ -75,7 +54,7 @@ function MenuPage() {
         }
       );
       const res = await getLunch.json();
-      setLunch(res);
+      setLunch(res.data);
     } catch (error) {
       console.error(error);
     } finally {
@@ -96,7 +75,7 @@ function MenuPage() {
         }
       );
       const res = await getDinner.json();
-      setDinner(res);
+      setDinner(res.data);
     } catch (error) {
       console.error(error);
     } finally {
@@ -152,9 +131,9 @@ function MenuPage() {
     }
   };
 
-  const handleFeedbackSubmit = async () => {
-    if (feedback.trim() === '' && rating === 0) {
-      toast.error("Please provide your feedback and rating before submitting.");
+  function handleFeedbackSubmit() {
+    if (feedback.trim() === '') {
+      toast.error("Please provide your feedback before submitting.");
     } else {
       setFeedback('');
       toast.success('Feedback Submitted!');
@@ -178,29 +157,10 @@ function MenuPage() {
     }
     if (items.length === 0) {
       return <p className="absolute w-full text-xl text-red-700 text-center dark:text-red-400">No {selectedCategory.charAt(0).toUpperCase() + selectedCategory.slice(1)} Available Now</p>;
-      try {
-        const response = await axios.post(
-          `${process.env.REACT_APP_BASE_URL}/feedback`,
-          {
-            canteenId: _id,
-            feedback: feedback,
-            rating: rating,
-            studentId: localStorage.getItem('token')
-          },
-          {
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-        setFeedback('');
-        setRating(0);
-        toast.success('Feedback Submitted!');
-      } catch (error) {
-        console.error("Error submitting feedback: ", error);
-        toast.error("Failed to submit feedback. Please try again.");
-      }
     }
+    return items.map((dish) => (
+      <FoodCard key={dish._id} dish={dish} onClick={() => handleDishClick(dish.dishId)} />
+    ));
   };
 
   const renderSearchResults = () => {
@@ -213,7 +173,7 @@ function MenuPage() {
   };
 
   return (
-    <div className="text-purple-800 min-h-screen pt-5">
+    <div className="text-purple-800 min-h-screen pt-5 bg-transparent dark:bg-slate-200">
       <Navbar />
       <div className="container px-8 mx-auto p-4 mt-20 min-h-screen bg-transparent dark:bg-slate-200">
         <div className="flex justify-center space-x-4 mb-8">
@@ -252,112 +212,22 @@ function MenuPage() {
             )}
           </>
         )}
-      <div className="container mx-auto p-4">
-        <h1 className="text-4xl font-bold mb-8 text-white">Today's Menu</h1>
-        {
-          loading ? (
-            <Loader />
-          ) : (
-            <>
-              <div className="flex flex-col gap-4 p-5 md:flex-row justify-center">
-                {breakfast && (
-                  <div className="w-2/3 rounded-lg shadow-md border-2 border-red-300 mt-5">
-                    <div className="text-center bg-red-300 text-black py-3 font-xl relative">
-                      <img
-                        src="https://cdn-icons-png.flaticon.com/128/5025/5025429.png"
-                        alt="Breakfast Icon"
-                        className="absolute top-0 left-4 h-16 w-16 -mt-8 -ml-8"
-                      />
-                      Breakfast
-                    </div>
-                    <div className="p-4">
-                      <ul>
-                        {breakfast.data.map((dish) => (
-                          <li
-                            key={dish._id}
-                            onClick={() => handleDishClick(dish.dishId)}
-                            className={`cursor-pointer hover:bg-gradient-to-r from-green-300 to-green-500 transition-transform duration-300 ease-in-out transform hover:-translate-y-1 px-5 py-2 ${theme === 'dark' ? 'text-white' : 'text-red-600'} hover:text-black mt-2 `}
-                          >
-                            • {dish.dish}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
-                {lunch && (
-                  <div className="w-2/3 rounded-lg shadow-md border-green-300 border-2 mt-5">
-                    <div className="text-center bg-green-300 text-black py-3 font-xl relative">
-                      <img
-                        src="https://cdn-icons-png.flaticon.com/128/2082/2082045.png"
-                        alt="Lunch Icon"
-                        className="absolute top-0 left-4 h-16 w-16 -mt-8 -ml-8"
-                      />
-                      Lunch
-                    </div>
-                    <div>
-                      <ul>
-                        {lunch.data.map((dish) => (
-                          <li
-                            key={dish._id}
-                            onClick={() => handleDishClick(dish.dishId)}
-                            className={`hover:bg-gradient-to-r from-green-300 to-green-500 transition-transform duration-300 ease-in-out transform hover:-translate-y-1 px-5 py-2 ${theme === 'dark' ? 'text-white' : 'text-green-600'} hover:text-black mt-2 `}
-                          >
-                            • {dish.dish}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
-                {dinner && (
-                  <div className="w-2/3 rounded-lg shadow-md border-yellow-300 border-2 mt-5">
-                    <div className="text-center bg-yellow-300 text-black py-3 font-xl relative">
-                      <img
-                        src="https://cdn-icons-png.flaticon.com/128/3321/3321601.png"
-                        alt="Dinner Icon"
-                        className="absolute top-0 left-4 h-16 w-16 -mt-8 -ml-8"
-                      />
-                      Dinner
-                    </div>
-                    <div>
-                      <ul>
-                        {dinner.data.map((dish) => (
-                          <li
-                            key={dish._id}
-                            onClick={() => handleDishClick(dish.dishId)}
-                            className={`hover:bg-gradient-to-r from-yellow-300 to-yellow-500 transition-transform duration-300 ease-in-out transform hover:-translate-y-1 px-5 py-2 ${theme === 'dark' ? 'text-white' : 'text-yellow-600'} hover:text-black mt-2 `}
-                          >
-                            • {dish.dish}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
-              </div>
-              <div className="mt-8 text-purple-800">
-                <h2 className="text-2xl font-bold mb-4 text-white dark:text-slate-900">Meal Feedback</h2>
-                <textarea
-                  className="w-full h-32 p-4 border border-purple-300 rounded mb-4"
-                  placeholder="Enter your feedback here..."
-                  value={feedback}
-                  onChange={(e) => setFeedback(e.target.value)}
-                ></textarea>
-                <div className="mb-4">
-                  <StarRating rating={rating} onRatingChange={setRating} />
-                </div>
-                <button
-                  onClick={handleFeedbackSubmit}
-                  className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
-                >
-                  Submit Feedback
-                </button>
-              </div>
-            </>
-          )
-        }
       </div>
+      <div className="mt-8 text-purple-800 px-8 mb-4">
+          <h2 className="text-2xl font-bold mb-4 text-white text-center dark:text-black">Meal Feedback</h2>
+          <textarea
+            className="w-full h-32 p-4 border border-purple-300 rounded mb-4"
+            placeholder="Enter your feedback here..."
+            value={feedback}
+            onChange={(e) => setFeedback(e.target.value)}
+          ></textarea>
+          <button
+            onClick={handleFeedbackSubmit}
+            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
+          >
+            Submit Feedback
+          </button>
+        </div>
       <Footer />
     </div>
   );