From d2da4538081f78fab99b1497cb36cc9695a0040d Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Mon, 5 May 2025 23:44:10 +0500
Subject: [PATCH] add mockup table

---
 gui/app/components/ModTable.tsx | 414 ++++++++++++++++++++++++++++++++
 gui/app/components/Sidebar.tsx  |  30 ++-
 gui/app/pack/page.tsx           |  14 +-
 3 files changed, 447 insertions(+), 11 deletions(-)
 create mode 100644 gui/app/components/ModTable.tsx

diff --git a/gui/app/components/ModTable.tsx b/gui/app/components/ModTable.tsx
new file mode 100644
index 0000000..5c1d4b0
--- /dev/null
+++ b/gui/app/components/ModTable.tsx
@@ -0,0 +1,414 @@
+import {
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+} from "flowbite-react";
+
+export const ModTable = () => {
+  return (
+    <div className="overflow-x-auto">
+      <Table hoverable>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell className="p-4">
+              <Checkbox />
+            </TableHeadCell>
+            <TableHeadCell>Product name</TableHeadCell>
+            <TableHeadCell>Color</TableHeadCell>
+            <TableHeadCell>Category</TableHeadCell>
+            <TableHeadCell>Price</TableHeadCell>
+            <TableHeadCell>
+              <span className="sr-only">Edit</span>
+            </TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody className="divide-y">
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Apple MacBook Pro 17"
+            </TableCell>
+            <TableCell>Sliver</TableCell>
+            <TableCell>Laptop</TableCell>
+            <TableCell>$2999</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Microsoft Surface Pro
+            </TableCell>
+            <TableCell>White</TableCell>
+            <TableCell>Laptop PC</TableCell>
+            <TableCell>$1999</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="p-4">
+              <Checkbox />
+            </TableCell>
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Magic Mouse 2
+            </TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a
+                href="#"
+                className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
+              >
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
diff --git a/gui/app/components/Sidebar.tsx b/gui/app/components/Sidebar.tsx
index f337545..2aee6a6 100644
--- a/gui/app/components/Sidebar.tsx
+++ b/gui/app/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { PACKS_ENDPOINT } from "@/api/ENDPOINTS";
+import { PACK_ENDPOINT, PACKS_ENDPOINT } from "@/api/ENDPOINTS";
 import { Pack } from "@/types/pack";
 import {
   Sidebar,
@@ -31,11 +31,29 @@ export const Menu = () => {
           {packsData &&
             packsData.map((pack) => {
               return (
-                <SidebarItem href={`/pack/?id=${pack._id}`} key={pack._id}>
-                  <p className="line-clamp-1">{pack.title}</p>
-                  <p className="text-sm text-gray-400 line-clamp-1">
-                    by {pack.author}
-                  </p>
+                <SidebarItem
+                  href={`/pack/?id=${pack._id}`}
+                  key={pack._id}
+                  theme={{
+                    content: {
+                      base: "p-0!",
+                    },
+                  }}
+                >
+                  <div className="flex gap-2 items-center">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      alt=""
+                      src={PACK_ENDPOINT("getPackImage", pack._id)}
+                      className="w-10 h-10 rounded-md"
+                    />
+                    <div>
+                      <p className="line-clamp-1">{pack.title}</p>
+                      <p className="text-sm text-gray-400 line-clamp-1">
+                        by {pack.author}
+                      </p>
+                    </div>
+                  </div>
                 </SidebarItem>
               );
             })}
diff --git a/gui/app/pack/page.tsx b/gui/app/pack/page.tsx
index fa64bf0..e770211 100644
--- a/gui/app/pack/page.tsx
+++ b/gui/app/pack/page.tsx
@@ -8,6 +8,7 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import { HiDownload, HiTrash } from "react-icons/hi";
+import { ModTable } from "../components/ModTable";
 
 export default function PackPage() {
   const [packData, setPackData] = useState<Pack | null>(null);
@@ -59,10 +60,10 @@ export default function PackPage() {
 
     if (window.confirm(`Delete pack ${packData.title}?`)) {
       fetch(`${PACKS_ENDPOINT("deletePack", packData._id)}`);
-      const ur = new URL(window.location.href)
-      ur.searchParams.delete("id")
-      ur.pathname = "/"
-      window.location.href = ur.href
+      const ur = new URL(window.location.href);
+      ur.searchParams.delete("id");
+      ur.pathname = "/";
+      window.location.href = ur.href;
     }
   }
 
@@ -75,7 +76,7 @@ export default function PackPage() {
       )}
       {packData && (
         <div>
-          <Card className="sticky top-0 left-0 right-0">
+          <Card className="sticky top-0 left-0 right-0 z-10">
             <div className="flex gap-4 items-center justify-between">
               <div>
                 <p className="text-xl font-semibold">{packData.version}</p>
@@ -112,6 +113,9 @@ export default function PackPage() {
               </div>
             </div>
           </Card>
+          <div className="mt-4">
+            <ModTable />
+          </div>
         </div>
       )}
     </div>