payment and badge section add

package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.0.4",
+    "@stripe/react-stripe-js": "^2.7.1",
+    "@stripe/stripe-js": "^3.5.0",
     "@tanstack/react-query": "^5.40.0",
     "axios": "^1.7.2",
     "firebase": "^10.12.2",

public/badge.json

@@ -0,0 +1,17 @@
+[
+  {
+    "price": 200,
+    "badge": "Platinum",
+    "badgeImg": "https://i.ibb.co/C27Wgv4/download-2.jpg"
+  },
+  {
+    "price": 300,
+    "badge": "gold",
+    "badgeImg": "https://i.ibb.co/MC3VxDp/download-4.jpg"
+  },
+  {
+    "price": 150,
+    "badge": "silver",
+    "badgeImg": "https://i.ibb.co/nLqwdg1/download-3.jpg"
+  }
+]

src/Componente/Home.jsx

@@ -2,12 +2,14 @@ import Banner from "../Pages/Home/Banner";
 import Blog from "../Pages/Home/Blog";
 import ContactUs from "../Pages/Home/ContactUs";
 import MaleinCatagory from "../Pages/Home/MaleinCatagory";
+import PrimeMeal from "../Pages/Home/PrimeMeal";
 
 const Home = () => {
   return (
     <div>
       <Banner></Banner>
       <MaleinCatagory></MaleinCatagory>
+      <PrimeMeal></PrimeMeal>
       {/* <ContactUs></ContactUs> */}
       {/* <Blog></Blog> */}
     </div>

src/Dashbord/AdminPages/ServicMeal.jsx

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+// import useAxiosCommon from "../../Hooks/useAxiosCommon";
+import useAxiosSecqur from "../../Hooks/useAxiosSecqur";
+import LogingSpiner from "../../Sheare/LogingSpiner";
+
+const ServicMeal = () => {
+  const axiosSec = useAxiosSecqur();
+  const {
+    data: requst = [],
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["requst"],
+    queryFn: async () => {
+      const { data } = await axiosSec.get("/allrequstmeal");
+      return data;
+    },
+  });
+
+  if (isLoading) return <LogingSpiner></LogingSpiner>;
+  return (
+    <div className="my-10">
+      <h2 className="text-3xl font-bold">All Requst meal</h2>
+      <div className="overflow-x-auto">
+        <table className="table">
+          {/* head */}
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Title</th>
+              <th>Email</th>
+              <th>Name</th>
+              <th>status</th>
+              <th>serve</th>
+            </tr>
+          </thead>
+          <tbody>
+            {requst.map((req, inx) => (
+              <tr key={req._id}>
+                <th>{inx + 1}</th>
+                <td>Cy Ganderton</td>
+                <td>Quality Control Specialist</td>
+                <td>Blue</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default ServicMeal;

src/Dashbord/Payment.jsx

@@ -0,0 +1,9 @@
+const Payment = () => {
+  return (
+    <div>
+      <h1 className="text3xl md:text-5xl font-bold"> Payment</h1>
+    </div>
+  );
+};
+
+export default Payment;

src/Dashbord/UserProfil.jsx

@@ -23,7 +23,7 @@ const UserProfil = () => {
             alt=""
           />
           <p className={`text-2xl p-2 bg-orange-500 rounded-lg text-center `}>
-            {useron?.badge}{" "}
+            {useron.badge}
           </p>
           <p className="text-4xl font-bold">Name: {user?.displayName}</p>
           <p>Email: {user?.email}</p>

src/Dashbord/UserRequstmeal.jsx

@@ -0,0 +1,97 @@
+import { async } from "@firebase/util";
+import { useQuery } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import Swal from "sweetalert2";
+import useAuth from "../Hooks/useAuth";
+// import useAxiosCommon from "../Hooks/useAxiosCommon";
+import useAxiosSecqur from "../Hooks/useAxiosSecqur";
+import LogingSpiner from "../Sheare/LogingSpiner";
+
+const UserRequstmeal = () => {
+  const { user } = useAuth();
+  //   const axioscom = useAxiosCommon();
+  const axiosSec = useAxiosSecqur();
+  const {
+    data: requst = [],
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["requst", user?.email],
+    queryFn: async () => {
+      const { data } = await axiosSec.get(`/requstmeal?email=${user.email}`);
+      return data;
+    },
+  });
+  const handelCansel = async (id) => {
+    Swal.fire({
+      title: "Are you sure?",
+      text: "you punlish thid item",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#3085d6",
+      cancelButtonColor: "#d33",
+      confirmButtonText: "Yes, Publish!",
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        const res = await axioscom.delete(`/requstmeal/${id}`);
+        if (res.data.deletedCount > 0) {
+          toast.success("cancel sucessifully");
+        }
+      }
+      refetch();
+    });
+  };
+  if (isLoading) return <LogingSpiner></LogingSpiner>;
+  return (
+    <div>
+      <h2 className="text-3xl font-bold"> Requsted meals</h2>
+
+      <div className="overflow-x-auto">
+        <table className="table">
+          {/* head */}
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Title</th>
+              <th>Likes</th>
+              <th>Reviews</th>
+              <th>Status</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {requst.map((req, inx) => (
+              <tr key={req._id}>
+                <th>{inx + 1}</th>
+                <td>{req?.title} </td>
+                <td>{req?.likes}</td>
+                <td>reviews</td>
+                <td>
+                  <p
+                    className={` p-1 rounded-lg text-center ${
+                      req.status === " pending" && " bg-red-600 text-white"
+                    } ${
+                      req.status === "delivered" && " bg-green-600 text-white"
+                    }`}
+                  >
+                    {req?.status}
+                  </p>{" "}
+                </td>
+                <td>
+                  <button
+                    onClick={() => handelCansel(req._id)}
+                    className=" btn "
+                  >
+                    <span className=" text-red">x</span> cancel{" "}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default UserRequstmeal;

src/Pages/Home/PrimeMeal.jsx

@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+import useAxiosCommon from "../../Hooks/useAxiosCommon";
+import LogingSpiner from "../../Sheare/LogingSpiner";
+
+const PrimeMeal = () => {
+  const axioscom = useAxiosCommon();
+  const { data: badge = [], isLoading } = useQuery({
+    queryKey: ["badge"],
+    queryFn: async () => {
+      const { data } = await axioscom.get("/badge");
+      return data;
+    },
+  });
+  if (isLoading) return <LogingSpiner></LogingSpiner>;
+  return (
+    <div className="my-20">
+      <h2 className="text-3xl md:text-5xl font-bold md:ml-5">
+        Membership Pakages
+      </h2>
+      <div className=" grid md:grid-cols-3 gap-4 mt-10">
+        {badge.map((bag) => (
+          <Link
+            to={`/dashbord/payment/${bag._id}`}
+            className=" border-2 p-3"
+            key={bag._id}
+          >
+            <img className=" w-full h-[250px]" src={bag.badgeImg} alt="" />
+            <p className="text-3xl">Price : $ {bag.price}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PrimeMeal;

src/Root/Dashboard.jsx

@@ -27,7 +27,7 @@ const Dashboard = () => {
                 <NavLink>All Reviews</NavLink>
               </li>
               <li>
-                <NavLink>Serve Meals</NavLink>
+                <NavLink to="/dashbord/servicmeal">Serve Meals</NavLink>
               </li>
               <li>
                 <NavLink to="/dashbord/upcommingmeal">Upcoming Meals</NavLink>
@@ -40,7 +40,7 @@ const Dashboard = () => {
                 <NavLink to="/dashbord/userpro">My Profile</NavLink>
               </li>
               <li>
-                <NavLink to="">Requested Meals</NavLink>
+                <NavLink to="/dashbord/userRequstMeal">Requested Meals</NavLink>
               </li>
               <li>
                 <NavLink>My Reviews</NavLink>

src/Route/Route.jsx

@@ -8,9 +8,12 @@ import Addmeal from "../Dashbord/AdminPages/Addmeal";
 import AdminProfil from "../Dashbord/AdminPages/AdminProfil";
 import AllMeals from "../Dashbord/AdminPages/AllMeals";
 import Allusers from "../Dashbord/AdminPages/Allusers";
+import ServicMeal from "../Dashbord/AdminPages/ServicMeal";
 import Upcommingmeal from "../Dashbord/AdminPages/Upcommingmeal";
 import ViewDeteal from "../Dashbord/AdminPages/ViewDeteal";
+import Payment from "../Dashbord/Payment";
 import UserProfil from "../Dashbord/UserProfil";
+import UserRequstmeal from "../Dashbord/UserRequstmeal";
 import ErrorPage from "../Pages/ErrorPage";
 import UpcomMeal from "../Pages/Home/UpcomMeal";
 import Dashboard from "../Root/Dashboard";
@@ -66,11 +69,20 @@ const router = createBrowserRouter([
         path: "userpro",
         element: <UserProfil></UserProfil>,
       },
+      {
+        path: "userRequstMeal",
+        element: <UserRequstmeal></UserRequstmeal>,
+      },
+      {
+        path: "payment/:id",
+        element: <Payment></Payment>,
+      },
       //admin route
       {
         path: "users",
         element: <Allusers></Allusers>,
       },
+
       {
         path: "addmeal",
         element: <Addmeal></Addmeal>,
@@ -91,6 +103,10 @@ const router = createBrowserRouter([
         path: "adminProfil",
         element: <AdminProfil></AdminProfil>,
       },
+      {
+        path: "servicmeal",
+        element: <ServicMeal></ServicMeal>,
+      },
     ],
   },
 ]);