Logic improvement for admin users + tooltip

sandboxnu · Nov 26, 2024 · f546506 · f546506
1 parent 317b07f
commit f546506
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 33 deletions.
diff --git a/src/components/Admin/UserManagement.tsx b/src/components/Admin/UserManagement.tsx
@@ -4,14 +4,17 @@ import React, { useEffect, useState } from "react";
 import Spinner from "../Spinner";
 import { toast } from "react-toastify";
 import { ConfigProvider, Select } from "antd";
+import { Note } from "../../styles/profile";
 
 type TempUser = {
   id: string;
   email: string;
   permission: Permission;
 };
-
-const UserManagement = () => {
+type UserManagementProps = {
+  permission: Permission;
+};
+const UserManagement = ({ permission }: UserManagementProps) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [selectedUser, setSelectedUser] = React.useState<TempUser | null>(null);
   const [selectedPermission, setSelectedPermission] =
@@ -84,6 +87,17 @@ const UserManagement = () => {
             <h1 className="text-center font-montserrat text-3xl font-bold text-black">
               Permissions Management
             </h1>
+            {permission !== "MANAGER" && (
+              <div className="items-center gap-1 text-center">
+                <Note>
+                  Admins can view user permissions but cannot modify them.
+                </Note>
+                <Note>
+                  To change your permission, contact a MANAGER from the
+                  dropdown.
+                </Note>
+              </div>
+            )}
             <div className="flex flex-row items-center justify-center gap-8">
               <ConfigProvider
                 theme={{
@@ -97,7 +111,11 @@ const UserManagement = () => {
                 <Select
                   showSearch
                   style={{ width: "180px" }}
-                  placeholder="Select a User"
+                  placeholder={
+                    permission === "MANAGER"
+                      ? "Select a User"
+                      : "View User List"
+                  }
                   onChange={handleUserChange}
                   popupMatchSelectWidth={false}
                   placement={"bottomRight"}
@@ -111,6 +129,7 @@ const UserManagement = () => {
                 <Select
                   placeholder="Change Permission"
                   value={selectedPermission}
+                  disabled={permission !== "MANAGER"}
                   onChange={(value: Permission) => {
                     setSelectedPermission(value);
                   }}
@@ -124,12 +143,14 @@ const UserManagement = () => {
                 />
               </ConfigProvider>
             </div>
-            <button
-              className="text-bold w-full justify-center rounded-2xl bg-northeastern-red py-2 font-lato text-white hover:bg-busy-red "
-              onClick={updatePermission}
-            >
-              Update Permission
-            </button>
+            {permission === "MANAGER" && (
+              <button
+                className="text-bold w-full justify-center rounded-2xl bg-northeastern-red py-2 font-lato text-white hover:bg-busy-red "
+                onClick={updatePermission}
+              >
+                Update Permission
+              </button>
+            )}
           </div>
         </div>
       )}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -140,25 +140,24 @@ const Header = (props: HeaderProps) => {
         <div className="flex items-center">
           <button
             onClick={handleAdminClick}
-            className="rounded-xl p-4 text-xl font-medium text-white"
+            className="rounded-xl pr-10 text-xl font-medium text-white"
           >
             Home
           </button>
+          <DropDownMenu />
         </div>
       ) : (
-        props.data && (
-          <div className="flex items-center">
-            {renderSidebarOptions(props.data)}
-            <DropDownMenu />
-            <>
-              {displayGroup &&
-                createPortal(
-                  <GroupPage onClose={() => setDisplayGroup(false)} />,
-                  document.body
-                )}
-            </>
-          </div>
-        )
+        <div className="flex items-center">
+          {props.data && renderSidebarOptions(props.data)}
+          <DropDownMenu />
+          <>
+            {displayGroup &&
+              createPortal(
+                <GroupPage onClose={() => setDisplayGroup(false)} />,
+                document.body
+              )}
+          </>
+        </div>
       )}
     </HeaderDiv>
   );

diff --git a/src/pages/admin.tsx b/src/pages/admin.tsx
@@ -4,6 +4,8 @@ import Header from "../components/Header";
 import AdminSidebar from "../components/Admin/AdminSidebar";
 import { useState } from "react";
 import UserManagement from "../components/Admin/UserManagement";
+import Spinner from "../components/Spinner";
+import { Permission } from "@prisma/client";
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const session = await getSession(context);
@@ -17,26 +19,45 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         },
       };
     }
+  } else {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
   }
 
   return {
-    props: {},
+    props: {
+      userPermission: session.user.permission,
+    },
   };
 }
 
-const Admin: NextPage = () => {
+interface AdminProps {
+  userPermission: Permission;
+}
+
+const Admin: NextPage<AdminProps> = ({ userPermission }) => {
   const [option, setOption] = useState<string>("management");
   return (
     <div className="relative h-full w-full overflow-hidden  ">
       <Header admin={true} />
-      <div className="flex h-full  flex-row">
-        <div className="z-0 min-w-[150px] max-w-[250px] flex-[1] border-r-4 border-busy-red   bg-stone-100">
-          <AdminSidebar option={option} setOption={setOption} />
-        </div>
-        <div className="flex-[3]">
-          {option === "management" && <UserManagement />}
+      {!userPermission ? (
+        <Spinner />
+      ) : (
+        <div className="flex h-full  flex-row">
+          <div className="z-0 min-w-[150px] max-w-[250px] flex-[1] border-r-4 border-busy-red   bg-stone-100">
+            <AdminSidebar option={option} setOption={setOption} />
+          </div>
+          <div className="flex-[3]">
+            {option === "management" && (
+              <UserManagement permission={userPermission} />
+            )}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

diff --git a/src/server/router/user/admin.ts b/src/server/router/user/admin.ts
@@ -8,7 +8,7 @@ export const adminRouter = router({
   getAllUsers: protectedRouter.query(async ({ ctx, input }) => {
     const permission = ctx.session.user?.permission;
     console.log(ctx.session);
-    if (permission !== "MANAGER") {
+    if (permission === "USER") {
       throw new Error("Unauthorized access.");
     }