Buttons hidden by permissions

src/pages/protected/RaidGroupPage.tsx

@@ -1,6 +1,8 @@
+import DangerMessage from "@/components/message/DangerMessage";
 import TabGroup, { Tab } from "@/components/tab/TabGroup";
 import { useGetRaidGroup } from "@/hooks/RaidGroupHooks";
 import { RaidGroup } from "@/interface/RaidGroup";
+import { useAuth } from "@/providers/AuthProvider";
 import RaidGroupAccountsTab from "@/ui/account/RaidGroupAccountsTab";
 import RaidGroupCalendarDisplay from "@/ui/calendar/RaidGroupCalendarDisplay";
 import RaidGroupHeader from "@/ui/calendar/RaidGroupHeader";
@@ -9,12 +11,14 @@ import PersonTab from "@/ui/person/PersonTab";
 import RaidGroupRequestTab from "@/ui/raidGroupRequest/RaidGroupRequestTab";
 import RaidInstanceTab from "@/ui/raidInstance/RaidInstanceTab";
 import RaidLayoutTab from "@/ui/raidLayout/RaidLayoutTab";
+import { isRaidGroupAdmin } from "@/util/PermissionUtil";
 import { useEffect, useState } from "react";
 import { Navigate, useParams } from "react-router";
 
 
 export default function RaidGroupPage(){
 	const { raidGroupId } = useParams();
+	const { accountPermissions, raidGroupPermissions } = useAuth();
 
 
 	const [ raidGroup, setRaidGroup ] = useState<RaidGroup>();
@@ -33,7 +37,7 @@ export default function RaidGroupPage(){
 	}
 	else if(raidGroupQuery.status === "error"){
 		return (
-			<div>Error</div>
+			<DangerMessage>Error {raidGroupQuery.error.message}</DangerMessage>
 		);
 	}
 	else if(raidGroupQuery.status === "success" && raidGroupQuery.data === undefined){
@@ -62,17 +66,20 @@ export default function RaidGroupPage(){
 			{
 				tabHeader: "Raid Instances",
 				tabContent: <RaidInstanceTab raidGroup={raidGroup}/>
-			},
-			{
-				tabHeader: "Users",
-				tabContent: <RaidGroupAccountsTab raidGroup={raidGroup}/>
-			},
-			{
-				tabHeader: "Requests",
-				tabContent: <RaidGroupRequestTab raidGroup={raidGroup}/>
 			}
 		];
 
+		if(isRaidGroupAdmin(raidGroupId!, raidGroupPermissions, accountPermissions)){
+			tabs.push({
+				tabHeader: "Users",
+				tabContent: <RaidGroupAccountsTab raidGroup={raidGroup}/>
+			});
+			tabs.push({
+				tabHeader: "Requests",
+				tabContent: <RaidGroupRequestTab raidGroup={raidGroup}/>
+			});
+		}
+
 
 		return (
 			<main