User tab working

src/ui/account/AccountsByRaidGroupLoader.tsx

@@ -0,0 +1,36 @@
+import DangerMessage from "@/components/message/DangerMessage";
+import { useGetAccountsByRaidGroup } from "@/hooks/AccountHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import AccountsList from "./AccountsList";
+import AccountsListSkeleton from "./AccountsListSkeleton";
+
+
+export default function AccountsByRaidGroupLoader({
+	page,
+	pageSize,
+	searchTerm,
+	raidGroup
+}:{
+	page: number;
+	pageSize: number;
+	searchTerm?: string;
+	raidGroup: RaidGroup;
+}){
+	const accountsQuery = useGetAccountsByRaidGroup(raidGroup.raidGroupId!, page - 1, pageSize, searchTerm);
+
+
+	if(accountsQuery.status === "pending"){
+		return <AccountsListSkeleton/>
+	}
+	else if(accountsQuery.status === "error"){
+		return <DangerMessage>Error: {accountsQuery.error.message}</DangerMessage>
+	}
+	else{
+		return (
+			<AccountsList
+				accounts={accountsQuery.data ?? []}
+				raidGroup={raidGroup}
+			/>
+		);
+	}
+}

src/ui/account/AccountsList.tsx

@@ -1,23 +1,28 @@
 import { ButtonProps } from "@/components/button/Button";
 import Table from "@/components/table/Table";
 import { Account } from "@/interface/Account";
+import { RaidGroup } from "@/interface/RaidGroup";
 import moment from "moment";
 import { useState } from "react";
 import AccountAdminButtons from "./AccountAdminButtons";
 import AccountModal from "./modals/AccountModal";
 import AccountPasswordRestModal from "./modals/AccountPasswordResetModal";
+import AccountRaidGroupPermissionsModal from "./modals/AccountRaidGroupPermissionsModal";
 import DeleteAccountModal from "./modals/DeleteAccountModal";
 import ForcePasswordResetModal from "./modals/ForcePasswordResetModal";
+import RemoveAccountFromRaidGroupModal from "./modals/RemoveAccountFromRaidGroupModal";
 import RevokeRefreshTokenModal from "./modals/RevokeRefreshTokenModal";
+import RaidGroupAccountAdminButtons from "./RaidGroupAccountAdminButtons";
 
 
 export interface AccountsListProps {
 	accounts: Account[];
+	raidGroup?: RaidGroup;
 }
 
 
 export default function AccountsList(props: AccountsListProps){
-	const { accounts } = props;
+	const { accounts, raidGroup } = props;
 
 
 	const [ selectedAccount, setSelectedAccount ] = useState<Account | undefined>(undefined);
@@ -26,6 +31,8 @@ export default function AccountsList(props: AccountsListProps){
 	const [ displayRevokeRefreshTokenModal, setDisplayRevokeRefreshTokenModal ] = useState(false);
 	const [ displayAccountModal, setDisplayAccountModal ] = useState(false);
 	const [ displayDeleteAccountModal, setDisplayDeleteAccountModal ] = useState(false);
+	const [ displayAccountRaidGroupPermissionsModal, setDisplayAccountRaidGroupPermissionsModal ] = useState(false);
+	const [ displayRemoveAccountFromRaidGroupModal, setDisplayRemoveAccountFromRaidGroupModal ] = useState(false);
 
 
 	const buttonProps: ButtonProps = {
@@ -109,6 +116,20 @@ export default function AccountsList(props: AccountsListProps){
 					setDisplayDeleteAccountModal(true);
 				}}
 			/>
+			{
+				raidGroup &&
+				<RaidGroupAccountAdminButtons
+					buttonProps={buttonProps}
+					showRaidGroupPermissionsModal={() => {
+						setSelectedAccount(account);
+						setDisplayAccountRaidGroupPermissionsModal(true)
+					}}
+					showRemoveFromRaidGroupModal={() => {
+						setSelectedAccount(account);
+						setDisplayRemoveAccountFromRaidGroupModal(true);
+					}}
+				/>
+			}
 		</div>
 	]);
 
@@ -144,6 +165,17 @@ export default function AccountsList(props: AccountsListProps){
 				close={() => {setDisplayDeleteAccountModal(false); setSelectedAccount(undefined);}}
 				account={selectedAccount}
 			/>
+			<AccountRaidGroupPermissionsModal
+				display={displayAccountRaidGroupPermissionsModal}
+				close={() => {setDisplayAccountRaidGroupPermissionsModal(false); setSelectedAccount(undefined);}}
+				account={selectedAccount}
+				raidGroup={raidGroup}
+			/>
+			<RemoveAccountFromRaidGroupModal
+				display={displayRemoveAccountFromRaidGroupModal}
+				close={() => {setDisplayRemoveAccountFromRaidGroupModal(false); setSelectedAccount(undefined);}}
+				account={selectedAccount}
+			/>
 		</>
 	);
 }

src/ui/account/RaidGroupAccountAdminButtons.tsx

@@ -0,0 +1,38 @@
+import { ButtonProps } from "@/components/button/Button";
+import DangerButton from "@/components/button/DangerButton";
+import WarningButton from "@/components/button/WarningButton";
+import { BsKeyFill, BsTrash3 } from "react-icons/bs";
+
+
+export default function RaidGroupAccountAdminButtons({
+	buttonProps,
+	showRaidGroupPermissionsModal,
+	showRemoveFromRaidGroupModal
+}:{
+	buttonProps: ButtonProps;
+	showRaidGroupPermissionsModal: () => void;
+	showRemoveFromRaidGroupModal: () => void;
+}){
+	return (
+		<div
+			className="flex flex-row gap-2"
+		>
+			<WarningButton
+				{...buttonProps}
+				onClick={showRaidGroupPermissionsModal}
+			>
+				<BsKeyFill
+					size={22}
+				/>
+			</WarningButton>
+			<DangerButton
+				{...buttonProps}
+				onClick={showRemoveFromRaidGroupModal}
+			>
+				<BsTrash3
+					size={22}
+				/>
+			</DangerButton>
+		</div>
+	);
+}

src/ui/account/RaidGroupAccountsTab.tsx

@@ -0,0 +1,90 @@
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetAccountsByRaidGroupCount } from "@/hooks/AccountHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import AccountsByRaidGroupLoader from "./AccountsByRaidGroupLoader";
+
+
+export default function RaidGroupAccountsTab({
+	raidGroup
+}:{
+	raidGroup: RaidGroup;
+}){
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
+	const pageSize = 10;
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+
+	const accountsCountQuery = useGetAccountsByRaidGroupCount(raidGroup.raidGroupId ?? "", sentSearchTerm);
+
+
+	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+		setSentSearchTerm(newSearchTerm.length ? newSearchTerm : undefined);
+	}, 1000);
+
+
+	useEffect(() => {
+		updateSearchTerm(searchTerm ?? "");
+	}, [ searchTerm, updateSearchTerm ]);
+
+
+	useEffect(() => {
+		if(accountsCountQuery.data){
+			setTotalPages(Math.ceil(accountsCountQuery.data / pageSize));
+		}
+	}, [ accountsCountQuery.data ]);
+
+
+	return (
+		<>
+			<div
+				className="flex flex-row items-center justify-between w-full"
+			>
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					&nbsp;
+				</div>
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					&nbsp;
+				</div>
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					<div>
+						<TextInput
+							id={`accountSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+				</div>
+			</div>
+			{/* Account List */}
+			<AccountsByRaidGroupLoader
+				page={page}
+				pageSize={pageSize}
+				searchTerm={searchTerm}
+				raidGroup={raidGroup}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}

src/ui/account/modals/AccountRaidGroupPermissionsModal.tsx

@@ -0,0 +1,88 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import RaidGroupPermissionSelector from "@/components/raidGroup/RaidGroupPermissionSelector";
+import { useGetRaidGroupPermissionsForAccount, useUpdateRaidGroupPermissionsForAccount } from "@/hooks/AccountHooks";
+import { Account } from "@/interface/Account";
+import { RaidGroup, RaidGroupPermissionType } from "@/interface/RaidGroup";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+
+
+export default function AccountRaidGroupPermissionsModal({
+	display,
+	close,
+	account,
+	raidGroup
+}:{
+	display: boolean;
+	close: () => void;
+	account?: Account;
+	raidGroup?: RaidGroup;
+}){
+	const [ currentPermission, setCurrentPermission ] = useState<RaidGroupPermissionType>();
+
+
+	const raidGroupPermissionsQuery = useGetRaidGroupPermissionsForAccount(raidGroup?.raidGroupId, account?.accountId);
+	const raidGroupPermissionsMutate = useUpdateRaidGroupPermissionsForAccount(raidGroup?.raidGroupId, account?.accountId);
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+	useEffect(() => {
+		if(raidGroupPermissionsQuery.status === "success"){
+			setCurrentPermission(raidGroupPermissionsQuery.data);
+		}
+		else if(raidGroupPermissionsQuery.status === "error"){
+			addErrorMessage(`Error getting raid group permissions: ${raidGroupPermissionsQuery.error.message}`);
+		}
+	}, [raidGroupPermissionsQuery.status, raidGroupPermissionsQuery.data, addSuccessMessage, addErrorMessage, raidGroupPermissionsQuery.error?.message]);
+
+	useEffect(() => {
+		if(raidGroupPermissionsMutate.status === "success"){
+			raidGroupPermissionsMutate.reset();
+			close();
+			addSuccessMessage("Permissions updated successfully");
+		}
+		else if(raidGroupPermissionsMutate.status === "error"){
+			raidGroupPermissionsMutate.reset();
+			addErrorMessage(`Error updating raid group permissions: ${raidGroupPermissionsMutate.error.message}`);
+		}
+	}, [ close, raidGroupPermissionsMutate, raidGroupPermissionsMutate.status, addErrorMessage, addSuccessMessage ]);
+
+
+	const updateRaidGroupPermissions = () => {
+		raidGroupPermissionsMutate.mutate(currentPermission ?? RaidGroupPermissionType.RAIDER);
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={`Raid Group Permissions for ${account?.username}`}
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center gap-4"
+				>
+					<RaidGroupPermissionSelector
+						value={currentPermission}
+						onChange={(e) => setCurrentPermission(e.target.value as RaidGroupPermissionType)}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={updateRaidGroupPermissions}
+					>
+						Update
+					</PrimaryButton>
+						<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/account/modals/RemoveAccountFromRaidGroupModal.tsx

@@ -0,0 +1,66 @@
+import DangerButton from "@/components/button/DangerButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { UseRemoveAccountFromRaidGroup } from "@/hooks/AccountHooks";
+import { Account } from "@/interface/Account";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
+
+
+export default function RemoveAccountFromRaidGroupModal({
+	display,
+	close,
+	account,
+	raidGroup
+}:{
+	display: boolean;
+	close: () => void;
+	account?: Account;
+	raidGroup?: RaidGroup;
+}){
+	const removeAccountFromRaidGroupQuery = UseRemoveAccountFromRaidGroup(raidGroup?.raidGroupId ?? "", account?.accountId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	const removeAccountFromRaidGroup = () => {
+		removeAccountFromRaidGroupQuery.mutate();
+	}
+
+	useEffect(() => {
+		if(removeAccountFromRaidGroupQuery.status === "success"){
+			removeAccountFromRaidGroupQuery.reset();
+			addSuccessMessage(`Successfully removed ${account?.username} from the Raid Group`);
+			close();
+		}
+		else if(removeAccountFromRaidGroupQuery.status === "error"){
+			removeAccountFromRaidGroupQuery.reset();
+			addErrorMessage(`Error removing ${account?.username} from the Raid Group: ${removeAccountFromRaidGroupQuery.error.message}`);
+			console.log(removeAccountFromRaidGroupQuery.error);
+		}
+	});
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader="Remove Account From Raid Group"
+			modalBody={`Are you sure you want to remove ${account?.username} from the Raid Group?`}
+			modalFooter={
+				<>
+					<DangerButton
+						onClick={removeAccountFromRaidGroup}
+					>
+						Remove
+					</DangerButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/raidInstances/RaidInstancesTab.tsx

@@ -0,0 +1,7 @@
+export default function RaidInstancesTab(){
+	return (
+		<div>
+			Raid Instances tab
+		</div>
+	);
+}