Raid Instance Creator working

src/ui/classGroup/modal/SelectClassGroupModal.tsx

@@ -16,8 +16,8 @@ export default function SelectClassGroupModal({
 }:{
 	display: boolean;
 	close: () => void;
-	selectedClassGroup?: ClassGroup | null;
-	onChange: (classGroup?: ClassGroup | null) => void;
+	selectedClassGroup?: ClassGroup | null | undefined;
+	onChange: (classGroup?: ClassGroup | null | undefined) => void;
 	raidGroupId: string;
 }){
 	const [ currentClassGroup, setCurrentClassGroup ] = useState(selectedClassGroup);

src/ui/person/modals/PersonSelectorModal.tsx

@@ -0,0 +1,137 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import Pagination from "@/components/pagination/Pagination";
+import { Person } from "@/interface/Person";
+import { useEffect, useState } from "react";
+
+
+export default function PersonSelectorModal({
+	display,
+	close,
+	onSubmit,
+	people,
+	selectedPersonIds
+}:{
+	display: boolean;
+	close: () => void;
+	onSubmit: (personIds: string[]) => void;
+	people: Person[];
+	selectedPersonIds: string[];
+}){
+	const pageSize = 16;
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+	const [ page, setPage ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState<string>();
+	const [ currentlySelectedPersonIds, setCurrentlySelectedPersonIds ] = useState(selectedPersonIds);
+	const [ matchingPeople, setMatchingPeople ] = useState(people);
+	const [ currentlyVisiblePeople, setCurrentlyVisiblePeople ] = useState(people.slice((page - 1) * pageSize, page * pageSize));
+
+
+	const updateInput = (personId: string) => {
+		if(currentlySelectedPersonIds.includes(personId)){
+			setCurrentlySelectedPersonIds(currentlySelectedPersonIds.filter((id) => id !== personId));
+		}
+		else{
+			setCurrentlySelectedPersonIds([...currentlySelectedPersonIds, personId]);
+		}
+	}
+
+
+	//Update selected when the modal is updated
+	useEffect(() => {
+		setCurrentlySelectedPersonIds(selectedPersonIds);
+	}, [ selectedPersonIds ]);
+
+	//Update page data when modal becomes visible
+	useEffect(() => {
+		setPage(1);
+		setSearchTerm(undefined);
+	}, [ display ]);
+
+	//Update visible people when paging info is updated
+	useEffect(() => {
+		//! Update visible people
+		const filteredPeople = people.filter((person) => person.personName.toLowerCase().includes(searchTerm?.toLowerCase() ?? ""));
+
+		setMatchingPeople(filteredPeople);
+		setCurrentlyVisiblePeople(filteredPeople.slice((page - 1) * pageSize, page * pageSize));
+	}, [ page, pageSize, searchTerm, people ]);
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader="Select Raid Layout"
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center w-full gap-y-8"
+				>
+					{/* Search Box */}
+					<div>
+						<TextInput
+							id={`raidLayoutSelectorModalSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+					{/* Raid Layouts */}
+					<div
+						className="grid grid-cols-4 gap-4"
+						style={{flex: "0 0 33.333333333%"}}
+					>
+						{
+							currentlyVisiblePeople.map((person) => (
+								<div
+									key={person.personId}
+									className="flex flex-row"
+								>
+									<input
+										id={`personModal${modalId}`}
+										type="checkbox"
+										name="personId"
+										value={person.personId}
+										checked={currentlySelectedPersonIds.includes(person.personId ?? "")}
+										onChange={() => {}}
+										onClick={() => updateInput(person.personId ?? "")}
+									/>
+									<label
+										className="ml-2"
+										htmlFor={`personModal${modalId}`}
+									>
+										{person.personName}
+									</label>
+								</div>
+							))
+						}
+					</div>
+					{/* Pagination */}
+					<div>
+						<Pagination
+							currentPage={page}
+							totalPages={Math.ceil(matchingPeople.length / pageSize)}
+							onChange={setPage}
+						/>
+					</div>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={() => {onSubmit(currentlySelectedPersonIds); close();}}
+					>
+						Select
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/personCharacter/modal/PersonCharacterSelectorModal.tsx

@@ -0,0 +1,177 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import Pagination from "@/components/pagination/Pagination";
+import PersonCharacterSelector from "@/components/personCharacter/PersonCharacterSelector";
+import { useGetGameClassesByClassGroup } from "@/hooks/GameClassHooks";
+import { ClassGroup } from "@/interface/ClassGroup";
+import { PersonCharacter } from "@/interface/PersonCharacter";
+import { getCharactersThatMatchClassGroup, getCharactersThatNotMatchClassGroup } from "@/util/PersonCharacterUtil";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+
+
+export default function PersonCharacterSelectorModal({
+	display,
+	close,
+	currentSlotClassGroup,
+	currentRunCharacters,
+	otherRunsCharacters,
+	personCharacters,
+	selectedCharacterId,
+	setInput
+}:{
+	display: boolean;
+	close: () => void;
+	currentSlotClassGroup?: ClassGroup;
+	currentRunCharacters: PersonCharacter[];
+	otherRunsCharacters: PersonCharacter[];
+	personCharacters: PersonCharacter[];
+	selectedCharacterId?: string;
+	setInput: (characterId?: string) => void;
+}){
+	enum SelectorTabs {
+		UNLOCKED = "UNLOCKED",
+		LOCKED = "LOCKED",
+		NO_MATCH = "NO_MATCH"
+	};
+
+
+	const [ page, setPage ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const [ selectedTab, setSelectedTab ] = useState(SelectorTabs.UNLOCKED);
+	const [ matchingCharacters, setMatchingCharacters ] = useState<PersonCharacter[]>(personCharacters);
+	const [ currentlyVisibleCharacters, setCurrentlyVisibleCharacters ] = useState<PersonCharacter[]>([]);
+	const [ currentlySelectedCharacterId, setCurrentlySelectedCharacterId ] = useState(selectedCharacterId);
+	const pageSize = 9;
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+
+	const gameClassQuery = useGetGameClassesByClassGroup(currentSlotClassGroup?.classGroupId);
+
+
+	//Update selected when the modal is updated
+	useEffect(() => {
+		setCurrentlySelectedCharacterId(selectedCharacterId);
+	}, [ selectedCharacterId ]);
+
+
+	//Update page data when modal becomes visible
+	useEffect(() => {
+		setPage(1);
+		setSearchTerm("");
+		setSelectedTab(SelectorTabs.UNLOCKED);
+	}, [ display, SelectorTabs.UNLOCKED ]);
+
+
+	//Update visible characters whenever page data changes
+	useEffect(() => {
+		//! Update visible characters
+
+		//Get characters that match the search term
+		let newMatchingCharacters = personCharacters.filter((ch) => ch.characterName.toLowerCase().includes(searchTerm?.toLowerCase() ?? ""));
+
+		if(selectedTab === SelectorTabs.UNLOCKED){
+			//Remove characters that don't belong to the current class group
+			newMatchingCharacters = getCharactersThatMatchClassGroup(newMatchingCharacters, gameClassQuery.status === "success" ? gameClassQuery.data : []);
+			//Remove characters that are locked in other runs
+			newMatchingCharacters = newMatchingCharacters.filter((ch) => !otherRunsCharacters.includes(ch));
+		}
+		else if(selectedTab === SelectorTabs.LOCKED){
+			//Remove characters that don't belong to the current class group
+			newMatchingCharacters = getCharactersThatMatchClassGroup(newMatchingCharacters, gameClassQuery.status === "success" ? gameClassQuery.data : []);
+			//Remove characters that aren't locked in other runs
+			newMatchingCharacters = newMatchingCharacters.filter((ch) => otherRunsCharacters.includes(ch));
+		}
+		else if(selectedTab === SelectorTabs.NO_MATCH){
+			//Remove characters that match the class group
+			const validMatches = getCharactersThatNotMatchClassGroup(newMatchingCharacters, gameClassQuery.status === "success" ? gameClassQuery.data : []);
+			newMatchingCharacters = newMatchingCharacters.filter((ch) => validMatches.includes(ch));
+		}
+
+		//Remove characters that belong to players that have other characters in this run, minus the current person
+		const invalidPersonIds = currentRunCharacters.filter((ch) => ch.personCharacterId !== selectedCharacterId).map((ch) => ch.personId);
+		newMatchingCharacters = newMatchingCharacters.filter((ch) => !invalidPersonIds.includes(ch.personId));
+
+		setMatchingCharacters(newMatchingCharacters);
+		//Add the currently selected character to the front of the array
+		//Apply paging
+		setCurrentlyVisibleCharacters(newMatchingCharacters.slice((page - 1) * pageSize, page * pageSize));
+	}, [ page, searchTerm, selectedTab, personCharacters, currentSlotClassGroup, SelectorTabs.UNLOCKED, SelectorTabs.LOCKED, SelectorTabs.NO_MATCH, currentRunCharacters, otherRunsCharacters, selectedCharacterId, gameClassQuery.status, gameClassQuery.data ]);
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader="Character Selector"
+			modalBody={
+				<>
+					{/* Search */}
+					<div>
+						<TextInput
+							id={`personCharacterSelectorModal${modalId}SearchTerm`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+						/>
+					</div>
+					{/* Tabs */}
+					<div
+						className="flex flex-row items-center justify-center my-4"
+					>
+						{
+							Object.values(SelectorTabs).map((tab) => (
+								<div
+									key={tab}
+									className={clsx(
+										"px-4 py-2 mx-2 cursor-pointer rounded-lg",
+										{
+											"bg-blue-400": selectedTab === tab,
+											"bg-blue-600": selectedTab !== tab
+										}
+									)}
+									onClick={() => setSelectedTab(tab)}
+								>
+									{tab}
+								</div>
+							))
+						}
+					</div>
+					{/* Character Selector */}
+					<div
+						className="m-8 max-w-[50rem]"
+					>
+						<PersonCharacterSelector
+							personCharacters={currentlyVisibleCharacters}
+							selectedCharacterId={currentlySelectedCharacterId}
+							onChange={setCurrentlySelectedCharacterId}
+						/>
+					</div>
+					{/* Pagination */}
+					<div>
+						<Pagination
+							currentPage={page}
+							totalPages={Math.ceil(matchingCharacters.length / pageSize)}
+							onChange={setPage}
+						/>
+					</div>
+				</>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={() => { setInput(currentlySelectedCharacterId); close(); }}
+					>
+						Select
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Close
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/raidInstance/RaidInstanceHeader.tsx

@@ -0,0 +1,207 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import DateInput from "@/components/input/DateInput";
+import NumberInput from "@/components/input/NumberInput";
+import TextInput from "@/components/input/TextInput";
+import { useUpdateRaidInstanceNoInvalidation, useUpdateRaidInstancePersonCharacterXrefs } from "@/hooks/RaidInstanceHooks";
+import { RaidInstance } from "@/interface/RaidInstance";
+import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import clsx from "clsx";
+import moment from "moment";
+import { useEffect, useState } from "react";
+import PersonSelectorModal from "../person/modals/PersonSelectorModal";
+import RaidLayoutSelectorModal from "../raidLayout/modal/RaidLayoutSelectorModal";
+
+
+export default function RaidInstanceHeader(){
+	const {
+		raidInstance, setRaidInstance,
+		raidGroup,
+		selectedClassGroups, setSelectedClassGroups,
+		raidLayout, setRaidLayout,
+		raidLayouts,
+		people,
+		roster, setRoster,
+		personCharacterXrefs, setPersonCharacterXrefs
+	} = useRaidInstanceContext();
+
+	const [ displayRaidLayoutSelectorModal, setDisplayRaidLayoutSelectorModal ] = useState(false);
+	const [ displayRosterSelectorModal, setDisplayRosterSelectorModal ] = useState(false);
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	const updateRaidLayout = (newRaidLayoutId?: string) => {
+		const newRaidLayout = raidLayouts.find((rl) => rl.raidLayoutId === newRaidLayoutId);
+
+		setRaidInstance({...raidInstance, raidLayoutId: newRaidLayoutId, raidSize: newRaidLayout?.raidSize ?? raidInstance?.raidSize} as RaidInstance);
+		setRaidLayout(newRaidLayout);
+	}
+
+	const updateRaidSize = (newRaidSize: number) => {
+		if(newRaidSize > (raidInstance?.raidSize ?? 0)){
+			setSelectedClassGroups([...selectedClassGroups, null]);
+		}
+		else{
+			setSelectedClassGroups(selectedClassGroups.slice(0, newRaidSize));
+		}
+		const newXrefs = personCharacterXrefs.filter((xref) => xref.positionNumber < newRaidSize);
+		setPersonCharacterXrefs(newXrefs);
+		setRaidInstance({...raidInstance, raidSize: newRaidSize, raidLayoutId: undefined} as RaidInstance);
+		setRaidLayout(undefined);
+	}
+
+	//Mutations
+	const { mutate: updateRaidInstanceMutate, status: updateRaidInstanceStatus, reset: updateRaidInstanceReset, error: updateRaidInstanceError } = useUpdateRaidInstanceNoInvalidation(raidGroup?.raidGroupId ?? "");
+	const { mutate: updatePersonCharacterXrefsMutate, status: updatePersonCharacterXrefsStatus, reset: updatePersonCharacterXrefsReset, error: updatePersonCharacterXrefsError } = useUpdateRaidInstancePersonCharacterXrefs(raidGroup?.raidGroupId ?? "", raidInstance?.raidInstanceId ?? "");
+
+	const saveRaidInstance = () => {
+		updateRaidInstanceMutate(raidInstance!);
+		updatePersonCharacterXrefsMutate(personCharacterXrefs);
+	}
+
+	useEffect(() => {
+		if((updateRaidInstanceStatus === "success") && (updatePersonCharacterXrefsStatus === "success")){
+			addSuccessMessage("Raid Instance Saved");
+			updateRaidInstanceReset();
+			updatePersonCharacterXrefsReset();
+		}
+		else if(updateRaidInstanceStatus === "error"){
+			addErrorMessage("Error Saving Raid Instance: " + updateRaidInstanceError.message);
+			updateRaidInstanceReset();
+		}
+		else if(updatePersonCharacterXrefsStatus === "error"){
+			addErrorMessage("Error Saving Raid Instance: " + updatePersonCharacterXrefsError.message);
+			updatePersonCharacterXrefsReset();
+		}
+	}, [ addErrorMessage, addSuccessMessage, updatePersonCharacterXrefsError?.message, updatePersonCharacterXrefsReset, updatePersonCharacterXrefsStatus, updateRaidInstanceError?.message, updateRaidInstanceReset, updateRaidInstanceStatus ]);
+
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center w-full h-full mb-16"
+		>
+			{/* Raid Instance Name */}
+			<div
+				className="flex flex-col justify-center items-center min-w-[60rem] text-center"
+			>
+				<h1
+					className="flex flex-row items-center justify-center text-4xl"
+				>
+					<TextInput
+						id={`raidInstance${raidInstance?.raidInstanceId}Name`}
+						inputClasses="text-center"
+						placeholder="Raid Instance Name"
+						value={raidInstance?.raidInstanceName ?? ""}
+						onChange={(e) =>
+							setRaidInstance({
+								...raidInstance,
+								raidInstanceName: e.target.value
+							} as RaidInstance)
+						}
+						//disabled={}
+					/>
+				</h1>
+			</div>
+			{/* Start and End Dates */}
+			<div
+				className="flex flex-row justify-center mt-4"
+			>
+				<DateInput
+					id={`raidInstance${raidInstance?.raidInstanceId}StartDate`}
+					placeholder="Start Date"
+					value={moment(raidInstance?.raidStartDate ?? new Date()).format("YYYY-MM-DDTHH:mm")}
+					onChange={(e) => setRaidInstance({...raidInstance, raidStartDate: moment(e.target.value).toDate()} as RaidInstance)}
+				/>
+				<DateInput
+					id={`raidInstance${raidInstance?.raidInstanceId}EndDate`}
+					placeholder="End Date"
+					value={moment(raidInstance?.raidEndDate).format("YYYY-MM-DDTHH:mm")}
+					onChange={(e) => setRaidInstance({...raidInstance, raidEndDate: moment(e.target.value).toDate()} as RaidInstance)}
+				/>
+			</div>
+			{/* Raid Size & Layout */}
+			<div
+				className="flex flex-row items-center justify-center gap-x-4 mt-4"
+			>
+				{/* Raid Size */}
+				<div
+					className="flex flex-row items-center justify-center"
+				>
+					<NumberInput
+						id={`raidInstance${raidInstance?.raidInstanceId}Size`}
+						label="Raid Size"
+						value={raidInstance?.raidSize ?? 0}
+						onChange={updateRaidSize}
+						min={0}
+						max={100}
+					/>
+				</div>
+				{/* Raid Layout */}
+				<div
+					className="flex flex-row items-center justify-center"
+				>
+					<div
+						className="bg-inherit px-4 rounded-sm w-auto"
+						onClick={() => setDisplayRaidLayoutSelectorModal(true)}
+					>
+						<div
+							className="relative bg-inherit"
+						>
+							<div
+								id="selectRaidLayoutButton"
+								className="px-4 py-2 rounded-lg whitespace-nowrap cursor-pointer ring-2 ring-gray-500"
+							>
+								{raidLayout?.raidLayoutId ? raidLayout.raidLayoutName : "Select Raid Layout"}
+							</div>
+							<div
+								className={clsx(
+									"absolute cursor-text left-0 -top-3 mx-1 px-1 whitespace-nowrap",
+									"bg-white dark:bg-neutral-800 text-sm text-gray-500"
+								)}
+								style={{transitionProperty: "top, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)", transitionDuration: "150ms"}}
+							>
+								Raid Layout
+							</div>
+						</div>
+					</div>
+					<RaidLayoutSelectorModal
+						raidLayouts={raidLayouts}
+						selectedRaidLayoutId={raidLayout?.raidLayoutId}
+						display={displayRaidLayoutSelectorModal}
+						close={() => setDisplayRaidLayoutSelectorModal(false)}
+						onSubmit={updateRaidLayout}
+					/>
+				</div>
+				{/* Roster */}
+				<div
+					className="flex flex-row items-center justify-center"
+				>
+					<PrimaryButton
+						onClick={() => setDisplayRosterSelectorModal(true)}
+					>
+						Roster
+					</PrimaryButton>
+					<PersonSelectorModal
+						display={displayRosterSelectorModal}
+						close={() => setDisplayRosterSelectorModal(false)}
+						onSubmit={(newRosterIds) => setRoster(people.filter(person => newRosterIds.includes(person.personId ?? "")))}
+						people={people}
+						selectedPersonIds={roster.map(person => person.personId ?? "")}
+					/>
+				</div>
+				{/* Save Button */}
+				<div
+					className="flex flex-row items-center justify-center ml-4"
+				>
+					{
+						<PrimaryButton
+							onClick={saveRaidInstance}
+						>
+							Save
+						</PrimaryButton>
+					}
+				</div>
+			</div>
+		</div>
+	);
+}

src/ui/raidInstance/creator/RaidInstanceCreator.tsx

@@ -0,0 +1,129 @@
+import { ClassGroup } from "@/interface/ClassGroup";
+import { GridLocation } from "@/interface/GridLocation";
+import { PersonCharacter } from "@/interface/PersonCharacter";
+import { RaidInstance } from "@/interface/RaidInstance";
+import { RaidInstancePersonCharacterXref } from "@/interface/RaidInstancePersonCharacterXref";
+import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
+import SelectClassGroupModal from "@/ui/classGroup/modal/SelectClassGroupModal";
+import PersonCharacterSelectorModal from "@/ui/personCharacter/modal/PersonCharacterSelectorModal";
+import { useState } from "react";
+import RaidInstanceCreatorTable from "./RaidInstanceCreatorTable";
+
+
+export default function RaidInstanceCreator(){
+	const {
+		raidGroup,
+		classGroups,
+		raidInstance, setRaidInstance,
+		roster,
+		setRaidLayout,
+		selectedClassGroups, setSelectedClassGroups,
+		personCharacters,
+		personCharacterXrefs, setPersonCharacterXrefs
+	} = useRaidInstanceContext();
+	const [ displayClassGroupsSelectorModal, setDisplayClassGroupsSelectorModal ] = useState(false);
+	const [ displayPersonCharacterSelectorModal, setDisplayPersonCharacterSelectorModal ] = useState(false);
+	const [ currentLocation, setCurrentLocation ] = useState<GridLocation>({row: 0, col: 0});
+
+
+	const updateClassGroupsLayout = (newSelectedClassGroup: ClassGroup | null | undefined) => {
+		//Get all existing xrefs, leaving out the current xref it it's been removed
+		const newClassGroups = selectedClassGroups;
+		newClassGroups[currentLocation.col] = newSelectedClassGroup ?? null;
+
+		//Update the raid layout to persist the changes
+		setSelectedClassGroups(newClassGroups);
+
+		setRaidInstance({...raidInstance, raidLayoutId: undefined} as RaidInstance);
+		setRaidLayout(undefined);
+
+		//Hide modal
+		setDisplayClassGroupsSelectorModal(false);
+	}
+
+	const setCharacterIdInCurrentSlot = (newPersonCharacterId: string | undefined) => {
+		let newPersonCharacterXrefs: RaidInstancePersonCharacterXref[] = personCharacterXrefs;
+		//Step through this to make sure it's working as expected
+		if(newPersonCharacterId && (newPersonCharacterId !== "")){
+			const existingXref = personCharacterXrefs?.find((xref) => xref.groupNumber === currentLocation.row && xref.positionNumber == currentLocation.col);
+			//If the ID exists and the xref also exists then update the xref
+			if(existingXref){
+				newPersonCharacterXrefs = personCharacterXrefs?.map((xref) => {
+					if((xref.groupNumber === currentLocation.row) && (xref.positionNumber === currentLocation.col)){
+						xref.personCharacterId = newPersonCharacterId;
+					}
+					return xref;
+				});
+			}
+			//If the ID exists and the xref doesn't add a new xref
+			else{
+				newPersonCharacterXrefs.push(
+					{
+						raidInstanceId: raidInstance?.raidInstanceId ?? "",
+						personCharacterId: newPersonCharacterId,
+						groupNumber: currentLocation.row,
+						positionNumber: currentLocation.col
+					}
+				);
+			}
+		}
+		else{
+			//If the ID doesn't exist then remove the xref if it exists
+			newPersonCharacterXrefs = personCharacterXrefs?.filter((xref) => !(xref.groupNumber === currentLocation.row && xref.positionNumber == currentLocation.col));
+		}
+		setPersonCharacterXrefs(newPersonCharacterXrefs);
+	}
+
+	const getCurrentRunCharacters = (): PersonCharacter[] => {
+		const characterIds = personCharacterXrefs?.filter((xref) => xref.groupNumber === currentLocation.row).map((xref) => xref.personCharacterId);
+		return personCharacters.filter((personCharacter) => characterIds.includes(personCharacter.personCharacterId ?? ""));
+	}
+
+	const getCharactersFromOtherRuns = (): PersonCharacter[] => {
+		const characterIds = personCharacterXrefs?.filter((xref) => xref.groupNumber !== currentLocation.row).map((xref) => xref.personCharacterId);
+		return personCharacters.filter((personCharacter) => characterIds.includes(personCharacter.personCharacterId ?? ""));
+	}
+
+	const getCharacterFromCell = () => {
+		const xref = personCharacterXrefs.find((xref) => xref.groupNumber === currentLocation.row && xref.positionNumber === currentLocation.col);
+		return personCharacters.find((personCharacter) => personCharacter.personCharacterId === xref?.personCharacterId);
+	}
+
+	const getPersonCharactersFromRoster = (): PersonCharacter[] => {
+		const personIds = roster.map((person) => person.personId);
+		return personCharacters.filter((personCharacter) => personIds.includes(personCharacter.personId));
+	}
+
+
+
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center"
+		>
+			{/* Main Content */}
+			<RaidInstanceCreatorTable
+				onClickHeaderCell={(col) => { setCurrentLocation({row: 0, col: col}); setDisplayClassGroupsSelectorModal(true); }}
+				onClickBodyCell={(row, col) => { setCurrentLocation({row: row, col: col}); setDisplayPersonCharacterSelectorModal(true); }}
+			/>
+			{/* Modals */}
+			<SelectClassGroupModal
+				display={displayClassGroupsSelectorModal}
+				close={() => setDisplayClassGroupsSelectorModal(false)}
+				onChange={updateClassGroupsLayout}
+				selectedClassGroup={selectedClassGroups[currentLocation.col]}
+				raidGroupId={raidGroup?.raidGroupId ?? ""}
+			/>
+			<PersonCharacterSelectorModal
+				display={displayPersonCharacterSelectorModal}
+				close={() => setDisplayPersonCharacterSelectorModal(false)}
+				currentSlotClassGroup={classGroups[currentLocation.col]}
+				currentRunCharacters={getCurrentRunCharacters()}
+				otherRunsCharacters={getCharactersFromOtherRuns()}
+				personCharacters={getPersonCharactersFromRoster()}
+				selectedCharacterId={getCharacterFromCell()?.personCharacterId}
+				setInput={setCharacterIdInCurrentSlot}
+			/>
+		</div>
+	);
+}

src/ui/raidInstance/creator/RaidInstanceCreatorTable.tsx

@@ -0,0 +1,51 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import { RaidInstance } from "@/interface/RaidInstance";
+import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
+import RaidInstanceCreatorTableBody from "./RaidInstanceCreatorTableBody";
+import RaidInstanceCreatorTableHeader from "./RaidInstanceCreatorTableHeader";
+
+
+export default function RaidInstanceCreatorTable({
+	onClickHeaderCell,
+	onClickBodyCell
+}:{
+	onClickHeaderCell: (col: number) => void;
+	onClickBodyCell: (row: number, col: number) => void;
+}){
+	const { raidInstance, setRaidInstance } = useRaidInstanceContext();
+
+
+	const addRun = () => {
+		const newRaidInstance = {...raidInstance};
+		newRaidInstance.numberRuns = (newRaidInstance.numberRuns ?? 0) + 1;
+		setRaidInstance(newRaidInstance as RaidInstance);
+	}
+
+
+	return(
+		<div
+			className="flex flex-col items-center justify-center"
+		>
+			<div
+				className="flex flex-col items-start justify-start max-w-full overflow-auto pb-16"
+			>
+				<table>
+					{/* Header */}
+					<RaidInstanceCreatorTableHeader
+						onClickHeaderCell={onClickHeaderCell}
+					/>
+					{/* Body */}
+					<RaidInstanceCreatorTableBody
+						onClickBodyCell={onClickBodyCell}
+					/>
+				</table>
+			</div>
+			{/* Buttons */}
+			<PrimaryButton
+				onClick={addRun}
+			>
+				Add Run
+			</PrimaryButton>
+		</div>
+	);
+}

src/ui/raidInstance/creator/RaidInstanceCreatorTableBody.tsx

@@ -0,0 +1,132 @@
+import DangerButton from "@/components/button/DangerButton";
+import TertiaryButton from "@/components/button/TertiaryButton";
+import { PersonCharacter } from "@/interface/PersonCharacter";
+import { RaidInstance } from "@/interface/RaidInstance";
+import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
+import { getPersonCharactersFromXrefs } from "@/util/PersonCharacterUtil";
+import moment from "moment";
+import { BsDiscord, BsXLg } from "react-icons/bs";
+
+
+export default function RaidInstanceCreatorTableBody({
+	onClickBodyCell
+}:{
+	onClickBodyCell: (run: number, slot: number) => void;
+}){
+	const {
+		raidInstance, setRaidInstance,
+		people,
+		personCharacterXrefs, setPersonCharacterXrefs,
+		personCharacters,
+		selectedClassGroups
+	} = useRaidInstanceContext();
+
+
+	const characterGrid: (PersonCharacter | null)[][] = getPersonCharactersFromXrefs(personCharacterXrefs, personCharacters, raidInstance);
+
+
+	const removeRun = (runNumber: number) => {
+		const newXrefs = personCharacterXrefs.filter((xref) => xref.groupNumber !== runNumber)?.map((xref) => {return {...xref, groupNumber: xref.groupNumber >= runNumber ? xref.groupNumber - 1 : xref.groupNumber}});
+		setPersonCharacterXrefs(newXrefs);
+		setRaidInstance({...raidInstance, numberRuns: (raidInstance?.numberRuns ?? 1) - 1} as RaidInstance);
+	}
+
+	const copyDiscordStringToClipBoard = (run: number) => {
+		let discordString = "";
+		//Instance name
+		discordString += `${raidInstance?.raidInstanceName}\n`;
+
+		//Start time
+		discordString += moment(raidInstance?.raidStartDate).format("MM/DD/YYYY HH:mm") + " - ";
+		//End time
+		discordString += moment(raidInstance?.raidEndDate).format("MM/DD/YYYY HH:mm") + "\n";
+
+		//Characters
+		characterGrid[run].forEach((ch, index) => {
+			const person = people.find((p) => p.personId === ch?.personId);
+			if(person){
+				//Discord ID / name
+				discordString += (person.discordId && (person.discordId !== "")) ? "@" + person.discordId : person.personName;
+				discordString += ": ";
+				//Character Name
+				discordString += ch?.characterName;
+			}
+			else{
+				const classGroup = selectedClassGroups[index];
+				//Class Group
+				discordString += classGroup?.classGroupName ?? "Any Class";
+				discordString += ": ";
+				//Any
+				discordString += "None";
+			}
+			discordString += "\n";
+		});
+
+		navigator.clipboard.writeText(discordString);
+	}
+
+
+	return (
+		<tbody
+			id="instanceTableBody"
+		>
+			{
+				characterGrid.map((run, runIndex) => (
+					<tr
+						key={runIndex}
+					>
+						{
+							run.map((ch, chIndex) => (
+								<td
+									key={chIndex}
+									className="px-4 py-2 border-2 cursor-default"
+									onClick={() => onClickBodyCell(runIndex, chIndex)}
+								>
+									<div
+										className="flex flex-row justify-start flex-nowrap"
+									>
+										{
+											ch?.gameClassId &&
+											<img
+												className="mr-2 max-h-8 max-w-8"
+												src={`${import.meta.env.VITE_ICON_URL}/gameClass/id/${ch.gameClassId}`}
+											/>
+										}
+										{ch ? ch.characterName : "None"}
+									</div>
+								</td>
+							))
+						}
+						<td
+							className="pl-2"
+						>
+							<div
+								className="flex flex-row justify-center items-center cursor-pointer p-2 space-x-2"
+							>
+								<DangerButton
+									variant="ghost"
+									shape="square"
+									onClick={() => removeRun(runIndex)}
+								>
+									<BsXLg
+										size={22}
+										strokeWidth={2}
+									/>
+								</DangerButton>
+								<TertiaryButton
+									variant="ghost"
+									shape="square"
+									onClick={() => copyDiscordStringToClipBoard(runIndex)}
+								>
+									<BsDiscord
+										size={22}
+									/>
+								</TertiaryButton>
+							</div>
+						</td>
+					</tr>
+				))
+			}
+		</tbody>
+	);
+}

src/ui/raidInstance/creator/RaidInstanceCreatorTableHeader.tsx

@@ -0,0 +1,36 @@
+import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
+
+
+export default function RaidInstanceCreatorTableHeader({
+	onClickHeaderCell
+}:{
+	onClickHeaderCell: (slot: number) => void;
+}){
+	const { selectedClassGroups } = useRaidInstanceContext();
+
+
+	return (
+		<thead>
+			<tr
+				id="instanceTableHead"
+			>
+				{
+					selectedClassGroups.map((classGroup, index) => (
+						<th
+							key={index}
+							className="px-4 py-2 border-2 cursor-pointer"
+							onClick={() => onClickHeaderCell(index)}
+						>
+							{classGroup?.classGroupName ?? "Any"}
+						</th>
+					))
+				}
+				<th
+					className="px-4 py-2"
+				>
+					&nbsp;
+				</th>
+			</tr>
+		</thead>
+	);
+}

src/ui/raidInstance/creator/RaidInstanceCreatorUI.tsx

@@ -0,0 +1,12 @@
+import RaidInstanceHeader from "../RaidInstanceHeader";
+import RaidInstanceCreator from "./RaidInstanceCreator";
+
+
+export default function RaidInstanceCreatorUI(){
+	return (
+		<>
+			<RaidInstanceHeader/>
+			<RaidInstanceCreator/>
+		</>
+	);
+}

src/ui/raidInstance/modals/RaidInstanceModal.tsx

@@ -25,8 +25,8 @@ export default function RaidInstanceModal({
 	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 [raidSize, setRaidSize] = useState(3);
+	const [numberRuns, setNumberRuns] = useState(1);
 	const modalId = crypto.randomUUID().replaceAll("-", "");
 
 	const createRaidInstanceMutate = useCreateRaidInstance(raidGroup.raidGroupId ?? "");
@@ -48,10 +48,10 @@ export default function RaidInstanceModal({
 			setRaidInstanceName("");
 			setRaidStartDate(currentDate);
 			setRaidEndDate(futureDate);
-			setRaidSize(0);
-			setNumberRuns(0);
+			setRaidSize(3);
+			setNumberRuns(1);
 		}
-	}, [ raidInstance ]);
+	}, [ display, raidInstance ]);
 
 	useEffect(() => {
 		if(createRaidInstanceMutate.status === "success"){

src/ui/raidLayout/modal/RaidLayoutSelectorModal.tsx

@@ -0,0 +1,135 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import Pagination from "@/components/pagination/Pagination";
+import { RaidLayout } from "@/interface/RaidLayout";
+import { useEffect, useState } from "react";
+
+
+export default function RaidLayoutSelectorModal({
+	display,
+	close,
+	onSubmit,
+	raidLayouts,
+	selectedRaidLayoutId
+}:{
+	display: boolean;
+	close: () => void;
+	onSubmit: (raidLayoutId?: string) => void;
+	raidLayouts: RaidLayout[];
+	selectedRaidLayoutId?: string;
+}){
+	const pageSize = 16;
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+	const [ page, setPage ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const [ matchingLayouts, setMatchingLayouts ] = useState<RaidLayout[]>(raidLayouts);
+	const [ currentlyVisibleLayouts, setCurrentlyVisibleLayouts ] = useState<RaidLayout[]>(raidLayouts);
+	const [ currentlySelectedLayoutId, setCurrentlySelectedLayoutId ] = useState(selectedRaidLayoutId?.slice((page - 1) * pageSize, page * pageSize));
+
+
+	const updateInput = (raidLayoutId: string | undefined) => {
+		if(raidLayoutId === currentlySelectedLayoutId){
+			setCurrentlySelectedLayoutId(undefined);
+		}
+		else{
+			setCurrentlySelectedLayoutId(raidLayoutId);
+		}
+	}
+
+	//Update any changes to Raid Layout ID
+	useEffect(() => {
+		setCurrentlySelectedLayoutId(selectedRaidLayoutId);
+	}, [ raidLayouts, selectedRaidLayoutId ]);
+
+	//Update page data when modal becomes visible
+	useEffect(() => {
+		setPage(1);
+		setSearchTerm("");
+	}, [ display ]);
+
+	//Update visible people when paging info is updated
+	useEffect(() => {
+		const filteredLayouts = raidLayouts.filter((raidLayout) => raidLayout.raidLayoutName.toLowerCase().includes(searchTerm?.toLowerCase() ?? ""));
+
+		setMatchingLayouts(filteredLayouts);
+		setCurrentlyVisibleLayouts(filteredLayouts.slice((page - 1) * pageSize, page * pageSize));
+	}, [ page, searchTerm, raidLayouts ]);
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader="Select Raid Layout"
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center w-full gap-y-8"
+				>
+					{/* Search Box */}
+					<div>
+						<TextInput
+							id={`raidLayoutSelectorModalSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+					{/* Raid Layouts */}
+					<div
+						className="grid grid-cols-4 gap-4"
+						style={{flex: "0 0 33.333333333%"}}
+					>
+						{
+							currentlyVisibleLayouts.map((raidLayout) => (
+								<div
+									key={raidLayout.raidLayoutId}
+									className="flex flex-row"
+								>
+									<input
+										id={`raidLayoutModal${modalId}`}
+										type="radio"
+										name="raidLayoutId"
+										value={raidLayout.raidLayoutId}
+										checked={currentlySelectedLayoutId === raidLayout.raidLayoutId}
+										onChange={() => {}}
+										onClick={() => updateInput(raidLayout.raidLayoutId)}
+									/>
+									<label
+										className="ml-2"
+										htmlFor={`raidLayoutModal${modalId}`}
+									>
+										{raidLayout.raidLayoutName}
+									</label>
+								</div>
+							))
+						}
+					</div>
+					{/* Pagination */}
+					<div>
+						<Pagination
+							currentPage={page}
+							totalPages={Math.ceil(matchingLayouts.length / pageSize)}
+							onChange={setPage}
+						/>
+					</div>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={() => {onSubmit(currentlySelectedLayoutId); close();}}
+					>
+						Select
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}