feat: inventory page implemented

Author: CodedVeli

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/shop/inventory/InventoryCardComponent.jsx

@@ -0,0 +1,29 @@
+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;

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

@@ -0,0 +1,33 @@
+const columns = [
+    {
+      accessorKey: "id",
+      header: "Item ID",
+    },
+    {
+      accessorKey: "name",
+      header: "Name",
+    },
+    {
+      accessorKey: "items-sold",
+      header: "Items Sold",
+    },
+    {
+      accessorKey: "items-remaining",
+      header: "Items Remaining",
+    },
+  
+    {
+      id: "actions",
+      enableHiding: false,
+      cell: () => (
+        <div>
+          <button type="button" className="text-primary text-sm font-semibold">
+            View
+          </button>
+        </div>
+      ),
+    },
+  ];
+  
+  export default columns;
+  

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

@@ -0,0 +1,82 @@
+import {
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+  } from "@tanstack/react-table";
+  
+  import PropTypes from "prop-types";
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+  } from "../../../ui/table";
+  
+  function InventoryPreviewTable({ columns, data }) {
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+  
+    return (
+      <Table className="text-gray-500">
+        <TableHeader className="bg-grey-light uppercase">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    );
+  }
+  
+  export default InventoryPreviewTable;
+  
+  InventoryPreviewTable.propTypes = {
+    columns: PropTypes.arrayOf(
+      PropTypes.shape({
+        accessorKey: PropTypes.string,
+        cell: PropTypes.func,
+        header: PropTypes.func,
+        id: PropTypes.string,
+      })
+    ).isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
+    data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  };
+