User inventory page implementation with imported user inventory table

KushPatel-18 · KushPatel-18 · commit a029d7cd91ed · 2026-01-06T17:50:43.000+08:00
diff --git a/client/src/components/ui/user_tables/user_inventory_table.tsx b/client/src/components/ui/user_tables/user_inventory_table.tsx
@@ -0,0 +1,74 @@
+// src/pages/user_dashboard.tsx (Update the import path)
+//import "";
+import { useEffect,useState } from "react";
+
+import InventoryItemModal from "../popups/user_inventory_select_popup";
+
+export type InventoryItem = {
+  id: number;
+  name: string;
+  date: string;
+};
+
+const UserInventoryTable = () => {
+  const [inventory, setInventory] = useState<InventoryItem[]>([]);
+  const [selectedItem, setSelectedItem] = useState<InventoryItem | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // Mock data (replace with Django API call later)
+  useEffect(() => {
+    const mockInventory: InventoryItem[] = Array.from(
+      { length: 30 },
+      (_, i) => ({
+        id: i + 1,
+        name: `Item ${i + 1}`,
+        date:
+          ((Math.floor(Math.random() * 10) % 11) + 1).toString() +
+          "/" +
+          (Math.floor(Math.random() * 10) + 1).toString() +
+          "/2026",
+      }),
+    );
+    {
+      /* have 
+          is_due_soon = date is larger than 2 weeks
+          in the array? -- as flag for due soon inventory */
+    }
+    setInventory(mockInventory);
+  }, []);
+
+  return (
+    <>
+      {/* Scrollable container */}
+      <div className="flex-1 cursor-pointer overflow-y-auto rounded-md border">
+        {/* logic for clicking to open pop-up window to edit/resolve an item*/}
+
+        {inventory.length === 0 ? (
+          <p className="py-6 text-center text-gray-500">No items found.</p>
+        ) : (
+          inventory.map((item) => (
+            <div
+              key={item.id}
+              onClick={() => {
+                setSelectedItem(item);
+                setIsModalOpen(true);
+              }}
+              className="flex items-center justify-between border-b px-3 py-3 last:border-b-0 hover:bg-gray-50"
+            >
+              <span className="font-medium text-gray-800">{item.name}</span>
+              <span className="font-medium text-gray-800">
+                date:{item.date}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+      <InventoryItemModal
+        isOpen={isModalOpen}
+        item={selectedItem}
+        onClose={() => setIsModalOpen(false)}
+      />
+    </>
+  );
+};
+export default UserInventoryTable;
diff --git a/client/src/pages/user_inventory.tsx b/client/src/pages/user_inventory.tsx
@@ -0,0 +1,38 @@
+// src/pages/user_dashboard.tsx (Update the import path)
+//import "";
+
+import Head from "next/head";
+
+import UserNavbar from "../components/ui/user_navbar";
+import UserInventoryTable from "../components/ui/user_tables/user_inventory_table";
+
+const UserInventoryPage = () => {
+  return (
+    <>
+      <Head>
+        <title>My Inventory</title>
+      </Head>
+      {/* Navbar */}
+      <UserNavbar />
+      {/* Page background */}
+      <div className="min-h-screen bg-gray-100 p-6">
+        {/* 2. Main content wrapper */}
+        <main className="mx-auto h-[80vh] max-w-6xl">
+          {/* Components for Statistics, Recent Activity, and Quick Actions */}
+          <h1 className="mb-6 text-3xl font-bold">My Inventory</h1>
+
+          {/* Inventory Grid */}
+          <div className="grid h-full grid-flow-col grid-rows-1 gap-4">
+            <div className="row-span-4 flex flex-col rounded-xl bg-white p-4 shadow">
+              <h2 className="mb-2 text-xl font-semibold">My Inventory</h2>
+              <UserInventoryTable />
+            </div>
+          </div>
+        </main>
+      </div>
+    </>
+  );
+};
+
+// export to make the function available to other parts of the app
+export default UserInventoryPage;
