Tutorial Working

src/components/TutorialComponent.tsx

@@ -0,0 +1,17 @@
+import { CallBackProps, Joyride, Props } from "react-joyride";
+
+
+interface TutorialComponentProps extends Props {
+	updateFunction: () => void;
+}
+
+export default function TutorialComponent(props: TutorialComponentProps){
+	return Joyride({
+		...props,
+		callback: (callbackProps: CallBackProps) => {
+			if(callbackProps.type === "tour:end"){
+				props.updateFunction();
+			}
+		}
+	});
+}

src/components/nav/ProtectedNavLinks.tsx

@@ -33,8 +33,6 @@ export default function ProtectedNavLinks(){
 		path: "/logout"
 	});
 
-	console.log("is admin = " + isSiteAdmin(accountPermissions));
-
 
 	return (
 		<>

src/components/tab/TabGroup.tsx

@@ -3,6 +3,7 @@ import { HTMLProps, useState } from "react";
 
 
 export interface Tab {
+	tabId?: string;
 	tabHeader: React.ReactNode;
 	headerClasses?: string;
 	tabContent: React.ReactNode;
@@ -39,6 +40,7 @@ export default function TabGroup(props: TabGroupProps){
 				{
 					tabs.map((tab, index) => (
 						<TabHeader
+							id={tab.tabId}
 							key={index}
 							tab={tab}
 							active={activeTab === index}
@@ -71,16 +73,19 @@ export default function TabGroup(props: TabGroupProps){
 
 
 function TabHeader({
+	id,
 	tab,
 	onClick,
 	active
 }:{
+	id?: string;
 	tab: Tab;
 	onClick: () => void;
 	active: boolean;
 }){
 	return (
 		<div
+			id={id}
 			className={clsx(
 				tab.headerClasses,
 				"px-4 py-2 rounded-t-lg cursor-pointer whitespace-nowrap",