Raid Instance tab working

src/components/classGroup/ClassGroupsByRaidLayoutDisplay.tsx

@@ -20,7 +20,7 @@ export default function ClassGroupsByRaidLayoutDisplay({
 	else{
 		return (
 			<div
-				className="flex flex-row gap-x-4"
+				className="flex flex-row items-center justify-center gap-x-4"
 			>
 				{
 					classGroupsQuery.data.map((classGroup, index) => (

src/hooks/RaidInstanceHooks.ts

@@ -0,0 +1,140 @@
+import { RaidInstance } from "@/interface/RaidInstance";
+import { api } from "@/util/AxiosUtil";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+
+export function useGetRaidInstance(raidInstanceId: string, raidGroupId: string){
+	return useQuery({
+		queryKey: ["raidInstances", raidInstanceId, raidGroupId],
+		queryFn: async () => {
+			const response = await api.get(`/raidGroup/${raidGroupId}/raidInstance/${raidInstanceId}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get raid instance");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data as RaidInstance;
+		}
+	});
+}
+
+export function useGetRaidInstancesByRaidGroup(raidGroupId: string, page: number, pageSize: number, searchTerm?: string){
+	return useQuery({
+		queryKey: ["raidInstances", raidGroupId, {page, pageSize, searchTerm}],
+		queryFn: async () => {
+			const params = new URLSearchParams();
+			params.append("page", page.toString());
+			params.append("pageSize", pageSize.toString());
+			if(searchTerm){
+				params.append("searchTerm", searchTerm);
+			}
+
+			const response = await api.get(`/raidGroup/${raidGroupId}/raidInstance?${params}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get accounts");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data as RaidInstance[];
+		}
+	});
+}
+
+
+export function useGetRaidInstancesByRaidGroupCount(raidGroupId: string, searchTerm?: string){
+	return useQuery({
+		queryKey: ["raidInstances", raidGroupId, "count", {searchTerm}],
+		queryFn: async () => {
+			const params = new URLSearchParams();
+			if(searchTerm){
+				params.append("searchTerm", searchTerm);
+			}
+
+			const response = await api.get(`/raidGroup/${raidGroupId}/raidInstance/count?${params}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get accounts");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data.count as number;
+		}
+	});
+}
+
+
+export function useCreateRaidInstance(raidGroupId: string){
+	const queryClient = useQueryClient();
+
+
+	return useMutation({
+		mutationKey: ["createRaidInstance", raidGroupId],
+		mutationFn: async (raidInstance: RaidInstance) => {
+			const response = await api.post(`/raidGroup/${raidGroupId}/raidInstance`, raidInstance);
+
+			if(response.status !== 200){
+				throw new Error("Failed to create raid instance");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidInstances"] });
+		}
+	});
+}
+
+export function useUpdateRaidInstance(raidGroupId: string){
+	const queryClient = useQueryClient();
+
+
+	return useMutation({
+		mutationKey: ["updateRaidInstance", raidGroupId],
+		mutationFn: async (raidInstance: RaidInstance) => {
+			console.log("raidInstance");
+			console.log(raidInstance);
+			const response = await api.put(`/raidGroup/${raidGroupId}/raidInstance/${raidInstance.raidInstanceId}`, raidInstance);
+
+			if(response.status !== 200){
+				throw new Error("Failed to update raid instance");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidInstances"] });
+		}
+	});
+}
+
+export function useDeleteRaidInstance(raidGroupId: string, raidInstanceId: string){
+	const queryClient = useQueryClient();
+
+
+	return useMutation({
+		mutationKey: ["deleteRaidInstance", raidGroupId, raidInstanceId],
+		mutationFn: async () => {
+			const response = await api.delete(`/raidGroup/${raidGroupId}/raidInstance/${raidInstanceId}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to delete raid instance");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidInstances"] });
+		}
+	});
+}

src/interface/RaidInstance.ts

@@ -0,0 +1,10 @@
+export interface RaidInstance {
+	raidInstanceId?: string;
+	raidGroupId: string;
+	raidLayoutId?: string;
+	raidInstanceName?: string;
+	raidSize?: number;
+	numberRuns: number;
+	raidStartDate: Date;
+	raidEndDate: Date;
+}

src/pages/protected/RaidGroupPage.tsx

@@ -7,7 +7,7 @@ import RaidGroupHeader from "@/ui/calendar/RaidGroupHeader";
 import ClassGroupsTab from "@/ui/classGroup/ClassGroupsTab";
 import PersonTab from "@/ui/person/PersonTab";
 import RaidGroupRequestTab from "@/ui/raidGroupRequest/RaidGroupRequestTab";
-import RaidInstancesTab from "@/ui/raidInstances/RaidInstancesTab";
+import RaidInstanceTab from "@/ui/raidInstances/RaidInstanceTab";
 import RaidLayoutTab from "@/ui/raidLayout/RaidLayoutTab";
 import { useEffect, useState } from "react";
 import { Navigate, useParams } from "react-router";
@@ -61,7 +61,7 @@ export default function RaidGroupPage(){
 			},
 			{
 				tabHeader: "Raid Instances",
-				tabContent: <RaidInstancesTab/>
+				tabContent: <RaidInstanceTab raidGroup={raidGroup}/>
 			},
 			{
 				tabHeader: "Users",

src/ui/game/GamesListSkeleton.tsx

@@ -4,6 +4,7 @@ import { elementBg } from "@/util/SkeletonUtil";
 import React from "react";
 import GameAdminButtons from "./GameAdminButtons";
 
+
 export default function GamesListSkeleton(){
 	const headElements: React.ReactNode[] = [
 		<div>

src/ui/raidInstances/RaidInstanceAdminButtons.tsx

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

src/ui/raidInstances/RaidInstanceList.tsx

@@ -0,0 +1,124 @@
+import { ButtonProps } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { RaidInstance } from "@/interface/RaidInstance";
+import moment from "moment";
+import { useState } from "react";
+import { Link } from "react-router";
+import DeleteRaidInstanceModal from "./modals/DeleteRaidInstanceModal";
+import RaidInstanceModal from "./modals/RaidInstanceModal";
+import RaidInstanceAdminButtons from "./RaidInstanceAdminButtons";
+
+
+export default function RaidInstanceList({
+	raidInstances,
+	raidGroup
+}:{
+	raidInstances: RaidInstance[];
+	raidGroup: RaidGroup;
+}){
+	const [ selectedRaidInstance, setSelectedRaidInstance ] = useState<RaidInstance>();
+	const [ displayEditRaidInstanceModal, setDisplayEditRaidInstanceModal ] = useState(false);
+	const [ displayDeleteRaidInstanceModal, setDisplayDeleteRaidInstanceModal ] = useState(false);
+
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	const headElements: React.ReactNode[] = [
+		<div
+			className="text-nowrap"
+		>
+			Raid Instance
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Start Date
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			End Date
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Size
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Runs
+		</div>,
+		<div
+			className="text-nowrap pl-16"
+		>
+			Actions
+		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = raidInstances.map((raidInstance) => [
+		<Link
+			to={`/raidGroup/${raidInstance.raidGroupId}/raidInstance/${raidInstance.raidInstanceId}`}
+			className="text-nowrap"
+		>
+			{raidInstance.raidInstanceName}
+		</Link>,
+		<div
+			className="text-nowrap"
+		>
+			{moment(raidInstance.raidStartDate).format("MM-DD-YYYY HH:mm")}
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			{moment(raidInstance.raidEndDate).format("MM-DD-YYYY HH:mm")}
+		</div>,
+		<div>
+			{raidInstance.raidSize}
+		</div>,
+		<div>
+			{raidInstance.numberRuns}
+		</div>,
+		<div
+			className="flex flex-row items-center justify-center gap-2 pl-16"
+		>
+			<div
+				className="py-4 border-l border-neutral-500"
+			>
+				&nbsp;
+			</div>
+			<RaidInstanceAdminButtons
+				buttonProps={buttonProps}
+				showRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayEditRaidInstanceModal(true); }}
+				showDeleteRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayDeleteRaidInstanceModal(true); }}
+			/>
+		</div>
+	]);
+
+
+	return (
+		<>
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+			<RaidInstanceModal
+				display={displayEditRaidInstanceModal}
+				close={() => { setDisplayEditRaidInstanceModal(false); setSelectedRaidInstance(undefined); }}
+				raidInstance={selectedRaidInstance}
+				raidGroup={raidGroup}
+			/>
+			<DeleteRaidInstanceModal
+				display={displayDeleteRaidInstanceModal}
+				close={() => { setDisplayDeleteRaidInstanceModal(false); setSelectedRaidInstance(undefined); }}
+				raidInstance={selectedRaidInstance}
+			/>
+		</>
+	);
+}

src/ui/raidInstances/RaidInstanceListSkeleton.tsx

@@ -0,0 +1,95 @@
+import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { elementBg } from "@/util/SkeletonUtil";
+import RaidInstanceAdminButtons from "./RaidInstanceAdminButtons";
+
+
+export default function RaidInstanceListSkeleton(){
+	const headElements: React.ReactNode[] = [
+		<div
+			className="text-nowrap"
+		>
+			Raid Instance
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Start Date
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			End Date
+		</div>,
+		<div>
+			Size
+		</div>,
+		<div>
+			Runs
+		</div>,
+		<div>
+			Actions
+		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = [
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton(),
+		RaidInstanceSkeleton()
+	];
+
+
+	return (
+		<Table
+			tableHeadElements={headElements}
+			tableBodyElements={bodyElements}
+		/>
+	);
+}
+
+
+function RaidInstanceSkeleton(){
+	const buttonsProps = {
+		buttonProps: {
+			variant: "ghost" as ButtonVariant,
+			size: "md" as ButtonSizeType,
+			shape: "square" as ButtonShape,
+			disabled: true
+		},
+		showRaidInstanceModal: () => {},
+		showDeleteRaidInstanceModal: () => {}
+	};
+
+	const elements: React.ReactNode[] = [
+		<div
+			className={`h-6 w-32 mr-2 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-[26rem] mr-2 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-[26rem] mr-2 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-32 mr-2 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-32 mr-2 ${elementBg}`}
+		/>,
+		<div
+			className="flex flex-row items-center justify-center gap-2 pl-16"
+		>
+			<div className="py-4 border-l border-neutral-500">&nbsp;</div>
+			<RaidInstanceAdminButtons {...buttonsProps}/>
+		</div>
+	];
+
+	return elements;
+}

src/ui/raidInstances/RaidInstanceLoader.tsx

@@ -0,0 +1,36 @@
+import DangerMessage from "@/components/message/DangerMessage";
+import { useGetRaidInstancesByRaidGroup } from "@/hooks/RaidInstanceHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import RaidInstanceList from "./RaidInstanceList";
+import RaidInstanceListSkeleton from "./RaidInstanceListSkeleton";
+
+
+export default function RaidInstanceLoader({
+	raidGroup,
+	page,
+	pageSize,
+	searchTerm
+}:{
+	raidGroup: RaidGroup;
+	page: number;
+	pageSize: number;
+	searchTerm?: string;
+}){
+	const raidInstancesQuery = useGetRaidInstancesByRaidGroup(raidGroup.raidGroupId ?? "", page - 1, pageSize, searchTerm);
+
+
+	if(raidInstancesQuery.status === "pending"){
+		return <RaidInstanceListSkeleton/>
+	}
+	else if(raidInstancesQuery.status === "error"){
+		return <DangerMessage>Error: {raidInstancesQuery.error.message}</DangerMessage>
+	}
+	else{
+		return (
+			<RaidInstanceList
+				raidInstances={raidInstancesQuery.data ?? []}
+				raidGroup={raidGroup}
+			/>
+		);
+	}
+}

src/ui/raidInstances/RaidInstanceTab.tsx

@@ -0,0 +1,105 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetRaidInstancesByRaidGroupCount } from "@/hooks/RaidInstanceHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import RaidInstanceLoader from "./RaidInstanceLoader";
+import RaidInstanceModal from "./modals/RaidInstanceModal";
+
+
+export default function RaidInstanceTab({
+	raidGroup
+}:{
+	raidGroup: RaidGroup;
+}){
+	const [ displayCreateRaidInstanceModal, setDisplayCreateRaidInstanceModal ] = useState(false);
+	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 updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+		setSentSearchTerm(newSearchTerm);
+	}, 1000);
+	
+	
+	useEffect(() => {
+		updateSearchTerm(searchTerm);
+	}, [ searchTerm, updateSearchTerm ]);
+
+
+	const raidInstanceCountQuery = useGetRaidInstancesByRaidGroupCount(raidGroup.raidGroupId!, sentSearchTerm);
+
+	useEffect(() => {
+		if(raidInstanceCountQuery.status === "success"){
+			setTotalPages(Math.ceil(raidInstanceCountQuery.data / pageSize));
+		}
+	}, [ raidInstanceCountQuery ]);
+
+
+	return (
+		<>
+			<div
+				className="flex flex-row items-center justify-between w-full mb-8"
+			>
+				<div
+					className="flex flex-row items-center justify-start w-full"
+				>
+					&nbsp;
+				</div>
+				{/* Add Raid Instance Button */}
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					<PrimaryButton
+						className="text-nowrap"
+						onClick={() => setDisplayCreateRaidInstanceModal(true)}
+					>
+						Create Raid Instance
+					</PrimaryButton>
+					<RaidInstanceModal
+						display={displayCreateRaidInstanceModal}
+						close={() => setDisplayCreateRaidInstanceModal(false)}
+						raidInstance={undefined}
+						raidGroup={raidGroup}
+					/>
+				</div>
+				{/* Raid Instance Search Box */}
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					<div>
+						<TextInput
+							id={`raidInstanceSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+				</div>
+			</div>
+			{/* Raid Layout List */}
+			<RaidInstanceLoader
+				page={page}
+				pageSize={pageSize}
+				searchTerm={sentSearchTerm}
+				raidGroup={raidGroup}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}

src/ui/raidInstances/RaidInstancesTab.tsx

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

src/ui/raidInstances/modals/DeleteRaidInstanceModal.tsx

@@ -0,0 +1,64 @@
+import DangerButton from "@/components/button/DangerButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useDeleteRaidInstance } from "@/hooks/RaidInstanceHooks";
+import { RaidInstance } from "@/interface/RaidInstance";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
+
+
+export default function DeleteRaidInstanceModal({
+	display,
+	close,
+	raidInstance
+}:{
+	display: boolean;
+	close: () => void;
+	raidInstance?: RaidInstance;
+}){
+	const deleteRaidInstanceMutate = useDeleteRaidInstance(raidInstance?.raidGroupId ?? "", raidInstance?.raidInstanceId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	const deleteRaidInstance = () => {
+		deleteRaidInstanceMutate.mutate();
+	}
+
+
+	useEffect(() => {
+		if(deleteRaidInstanceMutate.status === "success"){
+			deleteRaidInstanceMutate.reset();
+			addSuccessMessage("Raid Instance Deleted");
+			close();
+		}
+		else if(deleteRaidInstanceMutate.status === "error"){
+			deleteRaidInstanceMutate.reset();
+			addErrorMessage(`Error deleting raid instance ${raidInstance?.raidInstanceName}: ${deleteRaidInstanceMutate.error.message}`);
+			console.log(deleteRaidInstanceMutate.error);
+		}
+	});
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={`Delete Raid Instance`}
+			modalBody={`Are you sure you want to delete ${raidInstance?.raidInstanceName}`}
+			modalFooter={
+				<>
+					<DangerButton
+						onClick={deleteRaidInstance}
+					>
+						Delete
+					</DangerButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/raidInstances/modals/RaidInstanceModal.tsx

@@ -0,0 +1,156 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import DateInput from "@/components/input/DateInput";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useCreateRaidInstance, useUpdateRaidInstance } from "@/hooks/RaidInstanceHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { RaidInstance } from "@/interface/RaidInstance";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import moment from "moment";
+import { useEffect, useState } from "react";
+
+
+export default function RaidInstanceModal({
+	display,
+	close,
+	raidInstance,
+	raidGroup
+}:{
+	display: boolean;
+	close: () => void;
+	raidInstance?: RaidInstance;
+	raidGroup: RaidGroup;
+}){
+	const [raidInstanceName, setRaidInstanceName] = useState("");
+	const [raidStartDate, setRaidStartDate] = useState(new Date());
+	const [raidEndDate, setRaidEndDate] = useState(new Date());
+	const [raidSize, setRaidSize] = useState(0);
+	const [numberRuns, setNumberRuns] = useState(0);
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+	const createRaidInstanceMutate = useCreateRaidInstance(raidGroup.raidGroupId ?? "");
+	const updateRaidInstanceMutate = useUpdateRaidInstance(raidGroup.raidGroupId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+	useEffect(() => {
+		if(raidInstance){
+			setRaidInstanceName(raidInstance.raidInstanceName ?? "");
+			setRaidStartDate(raidInstance.raidStartDate);
+			setRaidEndDate(raidInstance.raidEndDate);
+			setRaidSize(raidInstance.raidSize ?? 0);
+			setNumberRuns(raidInstance.numberRuns);
+		}
+		else{
+			const currentDate = new Date();
+			const futureDate = new Date();
+			futureDate.setHours(futureDate.getHours() + 1);
+			setRaidInstanceName("");
+			setRaidStartDate(currentDate);
+			setRaidEndDate(futureDate);
+			setRaidSize(0);
+			setNumberRuns(0);
+		}
+	}, [ raidInstance ]);
+
+	useEffect(() => {
+		if(createRaidInstanceMutate.status === "success"){
+			createRaidInstanceMutate.reset();
+			addSuccessMessage("Raid Instance Created");
+			close();
+		}
+		else if(createRaidInstanceMutate.status === "error"){
+			createRaidInstanceMutate.reset();
+			addErrorMessage(`Error creating raid instance ${raidInstanceName}: ${createRaidInstanceMutate.error.message}`);
+			console.log(createRaidInstanceMutate.error);
+		}
+		else if(updateRaidInstanceMutate.status === "success"){
+			updateRaidInstanceMutate.reset();
+			addSuccessMessage("Raid Instance Updated");
+			close();
+		}
+		else if(updateRaidInstanceMutate.status === "error"){
+			updateRaidInstanceMutate.reset();
+			addErrorMessage(`Error updating raid instance ${raidInstanceName}: ${updateRaidInstanceMutate.error.message}`);
+			console.log(updateRaidInstanceMutate.error);
+		}
+	});
+
+	const createRaidInstance = () => {
+		createRaidInstanceMutate.mutate({
+				raidInstanceName,
+				raidStartDate,
+				raidEndDate,
+				raidSize,
+				numberRuns,
+				raidGroupId: raidGroup.raidGroupId ?? ""
+			});
+	}
+
+	const updateRaidInstance = () => {
+		updateRaidInstanceMutate.mutate({
+				raidInstanceId: raidInstance?.raidInstanceId,
+				raidInstanceName,
+				raidStartDate,
+				raidEndDate,
+				raidSize,
+				numberRuns,
+				raidGroupId: raidGroup.raidGroupId ?? ""
+			});
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={raidInstance ? "Update Raid Instance" : "Create Raid Instance"}
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center gap-4"
+				>
+					<TextInput
+						id={`raidInstanceName${modalId}`}
+						placeholder="Raid Instance Name"
+						value={raidInstanceName}
+						onChange={(e) => setRaidInstanceName(e.target.value)}
+					/>
+					<br/>
+					{/*
+					<NumberInput
+						id="raidSizeInput"
+						min={1}
+						max={100}
+						value={raidSize}
+						onChange={setRaidSize}
+					/>
+					*/}
+					<DateInput
+						id="raidStartDateInput"
+						value={moment(raidStartDate).format("YYYY-MM-DDTHH:mm")}
+						onChange={(e) => setRaidStartDate(moment(e.target.value).toDate())}
+					/>
+					<DateInput
+						id="raidEndDateInput"
+						value={moment(raidEndDate).format("YYYY-MM-DDTHH:mm")}
+						onChange={(e) => setRaidEndDate(moment(e.target.value).toDate())}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={raidInstance ? updateRaidInstance : createRaidInstance}
+					>
+						{raidInstance ? "Update" : "Create"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/raidLayout/RaidLayoutListSkeleton.tsx

@@ -0,0 +1,85 @@
+import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { elementBg } from "@/util/SkeletonUtil";
+import RaidLayoutAdminButtons from "./RaidLayoutAdminButtons";
+
+
+export default function RaidLayoutListSkeleton(){
+	const headElements: React.ReactNode[] = [
+		<div
+			className="text-nowrap"
+		>
+			Raid Layout Name
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Raid Size
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Class Groups
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Actions
+		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = [
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton(),
+		RaidLayoutSkeleton()
+	];
+
+
+	return (
+		<Table
+			tableHeadElements={headElements}
+			tableBodyElements={bodyElements}
+		/>
+	);
+}
+
+
+function RaidLayoutSkeleton(){
+	const buttonsProps = {
+		buttonProps: {
+			variant: "ghost" as ButtonVariant,
+			size: "md" as ButtonSizeType,
+			shape: "square" as ButtonShape,
+			disabled: true
+		},
+		showRaidLayoutModal: () => {},
+		showDeleteRaidLayoutModal: () => {}
+	};
+
+	const elements: React.ReactNode[] = [
+		<div
+			className={`h-6 w-64 mr-1 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-24 ml-2 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-[56rem] ml-2 ${elementBg}`}
+		/>,
+		<div
+			className="flex flex-row items-center justify-center gap-2 pl-16"
+		>
+			<div className="py-4 border-l border-neutral-500">&nbsp;</div>
+			<RaidLayoutAdminButtons {...buttonsProps}/>
+		</div>
+	];
+
+	return elements;
+}

src/ui/raidLayout/modal/RaidLayoutModal.tsx

@@ -45,7 +45,7 @@ export default function RaidLayoutModal({
 		else if(newLayoutSize > classGroups.length){
 			setClassGroups([
 				...classGroups,
-				null
+				...Array(newLayoutSize - classGroups.length).fill(null)
 			]);
 		}
 	}
@@ -128,7 +128,7 @@ export default function RaidLayoutModal({
 					/>
 					<NumberInput
 						id="raidLayoutSizeInput"
-						min={1}
+						min={0}
 						max={100}
 						value={raidLayoutSize}
 						onChange={updateRaidLayoutSize}