User groups page implementation with imported user groups table

KushPatel-18 · KushPatel-18 · commit 507673b9ae22 · 2026-01-06T17:50:10.000+08:00
diff --git a/client/src/components/ui/user_tables/user_groups_table.tsx b/client/src/components/ui/user_tables/user_groups_table.tsx
@@ -0,0 +1,58 @@
+// src/pages/user_dashboard.tsx (Update the import path)
+//import "";
+import { useEffect,useState } from "react";
+
+import GroupsItemModal from "../popups/user_groups_select_popup";
+
+export type MyGroups = {
+  id: number;
+  name: string;
+};
+
+const UserGroupsTable = () => {
+  const [selectedItem, setSelectedItem] = useState<MyGroups | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // Mock data (replace with Django API call later)
+  const [groups, SetGroups] = useState<MyGroups[]>([]);
+  // groups mock data
+  useEffect(() => {
+    const mockGroups: MyGroups[] = Array.from({ length: 30 }, (_, i) => ({
+      id: i + 1,
+      name: `Group ${i + 1}`,
+    }));
+    SetGroups(mockGroups);
+  }, []);
+
+  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*/}
+
+        {groups.length === 0 ? (
+          <p className="py-6 text-center text-gray-500">No groups found.</p>
+        ) : (
+          groups.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>
+            </div>
+          ))
+        )}
+      </div>
+      <GroupsItemModal
+        isOpen={isModalOpen}
+        item={selectedItem}
+        onClose={() => setIsModalOpen(false)}
+      />
+    </>
+  );
+};
+export default UserGroupsTable;
diff --git a/client/src/pages/user_groups.tsx b/client/src/pages/user_groups.tsx
@@ -0,0 +1,51 @@
+// src/pages/user_dashboard.tsx (Update the import path)
+//import "";
+
+import Head from "next/head";
+
+import UserNavbar from "../components/ui/user_navbar";
+// import {useState, useEffect} from "react";
+import UserGroupsTable from "../components/ui/user_tables/user_groups_table";
+
+// type MyGroups = {
+//   id: number;
+//   name: string;
+// }
+
+{
+  /* optional: later have a list for friends in said groups or something in above "my groups" */
+}
+
+// The Header component is now one directory level up from 'pages',
+// so the path is '../components/Header'
+//import Header from '../components/Header';
+
+const UserGroupsPage = () => {
+  return (
+    <>
+      <Head>
+        <title>My Groups</title>
+      </Head>
+      {/* Page background */}
+      <UserNavbar />
+      <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 Groups</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 Groups</h2>
+              <UserGroupsTable />
+            </div>
+          </div>
+        </main>
+      </div>
+    </>
+  );
+};
+
+// export to make the function available to other parts of the app
+export default UserGroupsPage;
