From f2da48711b4ab3cba758fc6ad5840cbe658bcafc Mon Sep 17 00:00:00 2001
From: rezwan-hossen <rezwanhossen625@gmail.com>
Date: Mon, 10 Jun 2024 01:56:59 +0600
Subject: [PATCH] upcommin add and get

---
 package-lock.json                         | 182 +++++++++++++++++
 package.json                              |   1 +
 src/Dashbord/AdminPages/AddUpcoming.jsx   | 234 ++++++++++++++++++++++
 src/Dashbord/AdminPages/Addmeal.jsx       |   4 +-
 src/Dashbord/AdminPages/Upcommingmeal.jsx |  73 ++++---
 5 files changed, 467 insertions(+), 27 deletions(-)
 create mode 100644 src/Dashbord/AdminPages/AddUpcoming.jsx

diff --git a/package-lock.json b/package-lock.json
index 02f853f..f69f33a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "sms-clint",
       "version": "0.0.0",
       "dependencies": {
+        "@headlessui/react": "^2.0.4",
         "@tanstack/react-query": "^5.40.0",
         "axios": "^1.7.2",
         "firebase": "^10.12.2",
@@ -1354,6 +1355,54 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.0.tgz",
       "integrity": "sha512-zuWxyfXNbsKbm96HhXzainONPFqRcoZblQ++e9cAIGUuHfl2cFSBzW01jtesqWG/lqaUyX3H8O1y9oWboGNQBA=="
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz",
+      "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.0",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.9.14",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.14.tgz",
@@ -1383,6 +1432,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.0.4.tgz",
+      "integrity": "sha512-16d/rOLeYsFsmPlRmXGu8DCBzrWD0zV1Ccx3n73wN87yFu8Y9+X04zflv8EJEt9TAYRyLKOmQXUnOnqQl6NgpA==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.13",
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@tanstack/react-virtual": "3.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18",
+        "react-dom": "^18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1607,6 +1674,83 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "node_modules/@react-aria/focus": {
+      "version": "3.17.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.17.1.tgz",
+      "integrity": "sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.21.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.21.3.tgz",
+      "integrity": "sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz",
+      "integrity": "sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.24.1.tgz",
+      "integrity": "sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.4",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.1.tgz",
+      "integrity": "sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.23.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.23.1.tgz",
+      "integrity": "sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
@@ -1823,6 +1967,14 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.11.tgz",
+      "integrity": "sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.40.0",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.40.0.tgz",
@@ -1847,6 +1999,31 @@
         "react": "^18.0.0"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.5.0.tgz",
+      "integrity": "sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.5.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.5.0.tgz",
+      "integrity": "sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -5966,6 +6143,11 @@
         "node": ">= 4.7.0"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
diff --git a/package.json b/package.json
index 5b0a310..6417019 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^2.0.4",
     "@tanstack/react-query": "^5.40.0",
     "axios": "^1.7.2",
     "firebase": "^10.12.2",
diff --git a/src/Dashbord/AdminPages/AddUpcoming.jsx b/src/Dashbord/AdminPages/AddUpcoming.jsx
new file mode 100644
index 0000000..fbb7157
--- /dev/null
+++ b/src/Dashbord/AdminPages/AddUpcoming.jsx
@@ -0,0 +1,234 @@
+import {
+  Button,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from "@headlessui/react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import useAuth from "../../Hooks/useAuth";
+import useAxiosCommon from "../../Hooks/useAxiosCommon";
+import useAxiosSecqur from "../../Hooks/useAxiosSecqur";
+const imgHosting_api = `https://api.imgbb.com/1/upload?key=${
+  import.meta.env.VITE_IMGBB_key
+}`;
+const AddUpcoming = ({ isOpen, setisOpen }) => {
+  const { user } = useAuth();
+  const axiosPub = useAxiosCommon();
+  const axiosSec = useAxiosSecqur();
+  const { register, handleSubmit } = useForm();
+
+  const onSubmit = async (data) => {
+    const {
+      title,
+      catagory,
+      price,
+      rating,
+      likes,
+      itm1,
+      itm2,
+      itm3,
+      itm4,
+      image,
+      description,
+    } = data;
+    const imageFile = { image: data.image[0] };
+    const res = await axiosPub.post(imgHosting_api, imageFile, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+    if (res.data.success) {
+      const mealItem = {
+        title,
+        catagory,
+        price: parseFloat(price),
+        rating: parseFloat(rating),
+        likes: parseFloat(likes),
+        ingredients: [itm1, itm2, itm3, itm4],
+        image: res.data.data.display_url,
+        description,
+        admin_name: user?.displayName,
+        email: user?.email,
+      };
+      const menuRes = await axiosSec.post("/upcommingmeals", mealItem);
+
+      if (menuRes.data.insertedId) {
+        toast.success("add upcomming meal successfully !");
+      }
+    }
+  };
+  return (
+    <div>
+      <Transition appear show={isOpen}>
+        <Dialog
+          as="div"
+          onClose={() => setisOpen(false)}
+          className="relative z-5 focus:outline-none"
+        >
+          <div className="fixed inset-0 z-5 w-screen overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4">
+              <TransitionChild
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 transform-[scale(95%)]"
+                enterTo="opacity-100 transform-[scale(100%)]"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 transform-[scale(100%)]"
+                leaveTo="opacity-0 transform-[scale(95%)]"
+              >
+                <DialogPanel className="w-full max-w-md rounded-xl bg-white/5 p-6 backdrop-blur-2xl">
+                  <DialogTitle as="h3" className="text-3xl font-mediu">
+                    Add Upcomming Meal
+                  </DialogTitle>
+                  <form onSubmit={handleSubmit(onSubmit)}>
+                    <div>
+                      <div>
+                        <div>
+                          <label>Meal Title</label>
+                          <input
+                            type="text"
+                            className=" input input-disabled w-full"
+                            name=""
+                            {...register("title")}
+                            id=""
+                            required
+                          />
+                        </div>
+
+                        <div>
+                          <label>Catagory</label>
+                          <select
+                            className=" input input-disabled w-full"
+                            id="meal"
+                            name="catagory"
+                            {...register("catagory")}
+                            required
+                          >
+                            <option value="breakfast">Breakfast</option>
+                            <option value="lunch">Lunch</option>
+                            <option value="dinner">Dinner</option>
+                          </select>
+                        </div>
+
+                        <div>
+                          <label>Meal Price</label>
+                          <input
+                            type="number"
+                            className=" input input-disabled w-full"
+                            name="price"
+                            {...register("price")}
+                            required
+                            id=""
+                          />
+                        </div>
+
+                        <div>
+                          <label>Meal Rating</label>
+                          <input
+                            type="number"
+                            required
+                            className=" input input-disabled w-full"
+                            name="rating"
+                            {...register("rating")}
+                            id=""
+                          />
+                        </div>
+
+                        <div>
+                          <label>Meal likes</label>
+                          <input
+                            type="number"
+                            className=" input input-disabled w-full"
+                            name=" likes"
+                            {...register("likes")}
+                            required
+                            id=""
+                          />
+                        </div>
+
+                        <div>
+                          <label>ingredients</label>
+                          <div className="grid md:grid-cols-2 gap-2">
+                            <input
+                              type="text"
+                              className=" input input-disabled w-full"
+                              name=" itm1"
+                              {...register("itm1")}
+                              id=""
+                              required
+                            />
+                            <input
+                              type="text"
+                              className=" input input-disabled w-full"
+                              name=" itm2"
+                              required
+                              {...register("itm2")}
+                              id=""
+                            />
+                            <input
+                              type="text"
+                              className=" input input-disabled w-full"
+                              name=" itm3"
+                              {...register("itm3")}
+                              id=""
+                            />
+                            <input
+                              type="text"
+                              className=" input input-disabled w-full"
+                              name=" itm4"
+                              {...register("itm4")}
+                              id=""
+                            />
+                          </div>
+                        </div>
+
+                        <div>
+                          <input
+                            type="file"
+                            className="file-input file-input-bordered file-input-secondary w-full max-w-xs"
+                            {...register("image")}
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <label>description </label>
+                        <textarea
+                          className=" input input-disabled w-full"
+                          name=""
+                          {...register("description")}
+                          id=""
+                          required
+                          cols="30"
+                          rows="50"
+                        ></textarea>
+                      </div>
+                      <input
+                        className=" btn btn-primary w-full"
+                        type="submit"
+                        onClick={() => setisOpen(false)}
+                        value="Add upcomming Meal"
+                      />
+                    </div>
+                  </form>
+
+                  {/* <div className="mt-4">
+                    <Button
+                      onClick={() => setisOpen(false)}
+                      className="inline-flex items-center gap-2 rounded-md bg-gray-700 py-1.5 px-3 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-600 data-[open]:bg-gray-700 data-[focus]:outline-1 data-[focus]:outline-white"
+                    >
+                      Add meals
+                    </Button>
+                  </div> */}
+                </DialogPanel>
+              </TransitionChild>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default AddUpcoming;
diff --git a/src/Dashbord/AdminPages/Addmeal.jsx b/src/Dashbord/AdminPages/Addmeal.jsx
index 034bfb5..5393828 100644
--- a/src/Dashbord/AdminPages/Addmeal.jsx
+++ b/src/Dashbord/AdminPages/Addmeal.jsx
@@ -43,8 +43,8 @@ const Addmeal = () => {
         ingredients: [itm1, itm2, itm3, itm4],
         image: res.data.data.display_url,
         description,
-        admin_name: user.displayName,
-        email: user.email,
+        admin_name: user?.displayName,
+        email: user?.email,
       };
       const menuRes = await axiosSec.post("/addmeals", mealItem);
 
diff --git a/src/Dashbord/AdminPages/Upcommingmeal.jsx b/src/Dashbord/AdminPages/Upcommingmeal.jsx
index 6e6e7f2..93518a7 100644
--- a/src/Dashbord/AdminPages/Upcommingmeal.jsx
+++ b/src/Dashbord/AdminPages/Upcommingmeal.jsx
@@ -1,10 +1,37 @@
-import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import useAxiosCommon from "../../Hooks/useAxiosCommon";
+import LogingSpiner from "../../Sheare/LogingSpiner";
+import AddUpcoming from "./AddUpcoming";
 
 const Upcommingmeal = () => {
+  let [isOpen, setIsOpen] = useState(false);
+  const axioscommon = useAxiosCommon();
+  const { data: upcommingmeals = [], isLoading } = useQuery({
+    queryKey: ["upcommingmeals"],
+    queryFn: async () => {
+      const { data } = await axioscommon.get("/upcommingmeals");
+      return data;
+    },
+  });
+
+  const handelPublic = (upcom) => {
+    console.log(upcom);
+  };
+
+  if (isLoading) return <LogingSpiner></LogingSpiner>;
   return (
     <div>
       <div className=" md:flex justify-between items-center">
         <h2 className="text-2xl font-bold">Upcomming Meals</h2>
+        <div>
+          <button className=" btn" onClick={() => setIsOpen(true)}>
+            Add UpcommingMeal
+          </button>
+        </div>
+      </div>
+      <div>
+        <AddUpcoming isOpen={isOpen} setisOpen={setIsOpen}></AddUpcoming>
       </div>
       <div>
         <div className="overflow-x-auto">
@@ -13,33 +40,29 @@ const Upcommingmeal = () => {
             <thead>
               <tr>
                 <th></th>
-                <th>Name</th>
-                <th>Job</th>
-                <th>Favorite Color</th>
+                <th>Title</th>
+                <th>Likes</th>
+                <th>Provider Name</th>
+                <th>Action</th>
               </tr>
             </thead>
             <tbody>
-              {/* row 1 */}
-              <tr>
-                <th>1</th>
-                <td>Cy Ganderton</td>
-                <td>Quality Control Specialist</td>
-                <td>Blue</td>
-              </tr>
-              {/* row 2 */}
-              <tr>
-                <th>2</th>
-                <td>Hart Hagerty</td>
-                <td>Desktop Support Technician</td>
-                <td>Purple</td>
-              </tr>
-              {/* row 3 */}
-              <tr>
-                <th>3</th>
-                <td>Brice Swyre</td>
-                <td>Tax Accountant</td>
-                <td>Red</td>
-              </tr>
+              {upcommingmeals.map((upcom, inx) => (
+                <tr key={upcom._id}>
+                  <th>{inx + 1}</th>
+                  <td>{upcom.title}</td>
+                  <td>{upcom.likes} </td>
+                  <td>{upcom.admin_name}</td>
+                  <td>
+                    <button
+                      onClick={() => handelPublic(upcom)}
+                      className="btn btn-outline btn-success"
+                    >
+                      Publish
+                    </button>{" "}
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </div>