feat: inventory page report implemented #202

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@emailjs/browser": "^3.11.0",
     "@headlessui/react": "^2.1.2",
+    "@hookform/resolvers": "^3.9.0",
     "@hookstate/core": "^4.0.1",
     "@tanstack/react-query": "^5.22.2",
     "@tanstack/react-query-devtools": "^5.24.0",
@@ -36,7 +37,7 @@
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.2",
     "react-helmet-async": "^2.0.5",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.52.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "react-lazy-load-image-component": "^1.6.0",
@@ -48,7 +49,8 @@
     "tailwind-merge": "^2.3.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
-    "yet-another-react-lightbox": "^3.15.6"
+    "yet-another-react-lightbox": "^3.15.6",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",

src/components/admin/events/EventsTable.jsx

@@ -225,11 +225,10 @@ function EventsTable() {
                   }
                 >
                   <td
-                    className="hidden sm:table-cell py-4"
-                    id={`checkbox-${row.id}`}
+                    aria-label="events"
+                    className="hidden sm:table-cell py-4 "
                   >
                     <input
-                      aria-labelledby={`checkbox-${row.id}`}
                       type="checkbox"
                       className="cursor-pointer"
                       onChange={(event) => handleSelectRow(event, row.id)}
@@ -238,7 +237,7 @@ function EventsTable() {
                   </td>
                   <td className="whitespace-wrap px-2 py-4">{row.eventName}</td>
                   <td>{row.city}</td>
-                  <td className="hidden sm:table-cell">{row.date}</td>∏
+                  <td className="hidden sm:table-cell">{row.date}</td>
                   <td className="hidden sm:table-cell">{row.from}</td>
                   <td className="hidden sm:table-cell">{row.to}</td>
                   <td className="hidden sm:table-cell">{row.chapter}</td>

src/components/admin/shop/inventory/InventoryCardComponent.jsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/require-default-props */
+import PropTypes from "prop-types";
+
+function InventoryCardComponent({
+  title = "All Orders",
+  number = 500,
+  categories,
+}) {
+  return (
+    <div className="flex  mt-5 ">
+      <div className="flex w-full  p-[12px] ">
+        <div className="flex w-full border-r-[1px] border-[#CBCDCC] pr-[12px]">
+          <div className="grid w-full justify-start font-[600]">
+            <span className=" text-[16px] text-[#475467]">{title}</span>
+            <span className="text-[36px] -mt-1 text-[#4C4D4D]">{number}</span>
+            {categories && (
+              <div className=" mt-5 pr-4 pl-4 pt-2 pb-2 bg-[#F2F4F7] rounded-full">
+                <p className=" text-[#344054]">{categories} Categories</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default InventoryCardComponent;
+
+InventoryCardComponent.propTypes = {
+  categories: PropTypes.number,
+  number: PropTypes.number,
+  title: PropTypes.string,
+};