diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx
index 15bf9c0..050a865 100644
--- a/compass/app/admin/page.tsx
+++ b/compass/app/admin/page.tsx
@@ -1,7 +1,7 @@
"use client";
import { PageLayout } from "@/components/PageLayout";
-import UserTable from "@/components/Table/UserIndex";
+import { Table } from "@/components/Table/Index"
import User from "@/utils/models/User";
import { createClient } from "@/utils/supabase/client";
@@ -38,7 +38,7 @@ export default function Page() {
<div className="min-h-screen flex flex-col">
{/* icon + title */}
<PageLayout title="Users" icon={<UsersIcon />}>
- <UserTable users={users} />
+ <Table users={users} />
</PageLayout>
</div>
);
diff --git a/compass/app/admin_test/layout.tsx b/compass/app/admin_test/layout.tsx
new file mode 100644
index 0000000..78bf6a6
--- /dev/null
+++ b/compass/app/admin_test/layout.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import Sidebar from "@/components/Sidebar/Sidebar";
+import React, { useState } from "react";
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
+import { createClient } from "@/utils/supabase/client";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import User, { Role } from "@/utils/models/User";
+import Loading from "@/components/auth/Loading";
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+ const router = useRouter();
+ const [user, setUser] = useState<User>();
+
+ useEffect(() => {
+ async function getUser() {
+ const supabase = createClient();
+
+ const { data, error } = await supabase.auth.getUser();
+
+ console.log(data, error);
+
+ if (error) {
+ console.log("Accessed admin page but not logged in");
+ router.push("/auth/login");
+ return;
+ }
+
+ const userData = await fetch(
+ `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}`
+ );
+
+ const user: User = await userData.json();
+
+ if (user.role !== Role.ADMIN) {
+ console.log(
+ `Accessed admin page but incorrect permissions: ${user.username} ${user.role}`
+ );
+ router.push("/home");
+ return;
+ }
+
+ setUser(user);
+ }
+
+ getUser();
+ }, [router]);
+
+ return (
+ <div className="flex-row">
+ {user ? (
+ <div>
+ {/* button to open sidebar */}
+ <button
+ onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+ className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
+ aria-label={"Open sidebar"}
+ >
+ {
+ !isSidebarOpen && (
+ <ChevronDoubleRightIcon className="h-5 w-5" />
+ ) // Icon for closing the sidebar
+ }
+ </button>
+ {/* sidebar */}
+ <div
+ className={`absolute inset-y-0 left-0 transform ${
+ isSidebarOpen
+ ? "translate-x-0"
+ : "-translate-x-full"
+ } w-64 transition duration-300 ease-in-out`}
+ >
+ <Sidebar
+ setIsSidebarOpen={setIsSidebarOpen}
+ name={user.username}
+ email={user.email}
+ isAdmin={user.role === Role.ADMIN}
+ />
+ </div>
+ {/* page ui */}
+ <div
+ className={`flex-1 transition duration-300 ease-in-out ${
+ isSidebarOpen ? "ml-64" : "ml-0"
+ }`}
+ >
+ {children}
+ </div>
+ </div>
+ ) : (
+ <Loading />
+ )}
+ </div>
+ );
+}
diff --git a/compass/app/admin_test/page.tsx b/compass/app/admin_test/page.tsx
new file mode 100644
index 0000000..78f97fa
--- /dev/null
+++ b/compass/app/admin_test/page.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { PageLayout } from "@/components/PageLayout";
+import { Table } from "@/components/Table/Index"
+import UserTable from "@/components/Table/UserIndex";
+import User from "@/utils/models/User";
+import { createClient } from "@/utils/supabase/client";
+
+import { UsersIcon } from "@heroicons/react/24/solid";
+import { useEffect, useState } from "react";
+
+export default function Page() {
+ const [users, setUsers] = useState<User[]>([]);
+
+ useEffect(() => {
+ async function getUser() {
+ const supabase = createClient();
+
+ const { data, error } = await supabase.auth.getUser();
+
+ if (error) {
+ console.log("Accessed admin page but not logged in");
+ return;
+ }
+
+ const userListData = await fetch(
+ `${process.env.NEXT_PUBLIC_HOST}/api/user/all?uuid=${data.user.id}`
+ );
+
+ const users: User[] = await userListData.json();
+
+ setUsers(users);
+ }
+
+ getUser();
+ }, []);
+
+ return (
+ <div className="min-h-screen flex flex-col">
+ {/* icon + title */}
+ <PageLayout title="Users" icon={<UsersIcon />}>
+ <UserTable users={users} />
+ </PageLayout>
+ </div>
+ )
+}
diff --git a/compass/components/Table/Table.tsx b/compass/components/Table/Table.tsx
index 4bd5d1c..9598134 100644
--- a/compass/components/Table/Table.tsx
+++ b/compass/components/Table/Table.tsx
@@ -54,17 +54,17 @@ const fuzzyFilter = (
* @param props.columns Column definitions made with Tanstack columnHelper
*/
export const Table = ({ data, setData, columns }: TableProps) => {
- const columnHelper = createColumnHelper<Resource>();
+ const columnHelper = createColumnHelper<DataPoint>();
useEffect(() => {
const sortedData = [...data].sort((a, b) =>
a.visible === b.visible ? 0 : a.visible ? -1 : 1
);
- setData(sortedData);
+ setData(sortedData);
}, [data, setData]);
// Data manipulation
- // TODO: Connect data manipulation methods to the database (deleteResource, hideResource, addResource)
+ // TODO: Connect data manipulation methods to the database (deleteData, hideData, addData)
const deleteData = (dataId: number) => {
console.log(data);
setData((currentData) =>
diff --git a/compass/components/Table/UserIndex.tsx b/compass/components/Table/UserIndex.tsx
index 30ec363..766780a 100644
--- a/compass/components/Table/UserIndex.tsx
+++ b/compass/components/Table/UserIndex.tsx
@@ -13,7 +13,7 @@ import { DataPoint } from "@/components/Table/Table";
* @param props.users List of users to be displayed by the table
*/
export default function UserTable({ users }: { users: User[] }) {
- const columnHelper = createColumnHelper<User>();
+ const columnHelper = createColumnHelper<User>();
const [data, setData] = useState<DataPoint[]>([...users]);
const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([