Updated input validation

src/ui/raidInstance/modals/RaidInstanceModal.tsx

@@ -1,6 +1,7 @@
 import PrimaryButton from "@/components/button/PrimaryButton";
 import SecondaryButton from "@/components/button/SecondaryButton";
 import DateInput from "@/components/input/DateInput";
+import NumberInput from "@/components/input/NumberInput";
 import TextInput from "@/components/input/TextInput";
 import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
 import { useCreateRaidInstance, useUpdateRaidInstance } from "@/hooks/RaidInstanceHooks";
@@ -77,26 +78,82 @@ export default function RaidInstanceModal({
 	});
 
 	const createRaidInstance = () => {
+		if(!raidInstanceName || raidInstanceName.trim().length <= 0){
+			addErrorMessage("Error creating raid instance: Raid instance name must contain at least 1 letter");
+			return;
+		}
+		else if(raidSize <= 0){
+			addErrorMessage("Error creating raid instance: Raid size must be greater than 0");
+			return;
+		}
+		else if(numberRuns <= 0){
+			addErrorMessage("Error creating raid instance: Number of runs must be greater than 0");
+			return;
+		}
+		else if(!raidGroup?.raidGroupId || raidGroup?.raidGroupId.trim() === ""){
+			addErrorMessage("Error creating raid instance: Raid group is required");
+			return;
+		}
+		else if(raidStartDate > raidEndDate){
+			addErrorMessage("Error creating raid instance: Raid start date must be before raid end date");
+			return;
+		}
+		else if(raidStartDate < new Date()){
+			addErrorMessage("Error creating raid instance: Raid start date must be in the future");
+			return;
+		}
+
+
 		createRaidInstanceMutate.mutate({
-				raidInstanceName,
-				raidStartDate,
-				raidEndDate,
-				raidSize,
-				numberRuns,
-				raidGroupId: raidGroup.raidGroupId ?? ""
-			});
+			raidInstanceName,
+			raidStartDate,
+			raidEndDate,
+			raidSize,
+			numberRuns,
+			raidGroupId: raidGroup.raidGroupId ?? ""
+		});
 	}
 
 	const updateRaidInstance = () => {
+		if(!raidInstance?.raidInstanceId || raidInstance?.raidInstanceId.trim() === ""){
+			addErrorMessage("Raid Instance ID is required");
+			return;
+		}
+		else if(!raidInstanceName || raidInstanceName.trim().length <= 0){
+			addErrorMessage("Error creating raid instance: Raid instance name must contain at least 1 letter");
+			return;
+		}
+		else if(raidSize <= 0){
+			addErrorMessage("Error creating raid instance: Raid size must be greater than 0");
+			return;
+		}
+		else if(numberRuns <= 0){
+			addErrorMessage("Error creating raid instance: Number of runs must be greater than 0");
+			return;
+		}
+		else if(!raidGroup?.raidGroupId || raidGroup?.raidGroupId.trim() === ""){
+			addErrorMessage("Error creating raid instance: Raid group is required");
+			return;
+		}
+		else if(raidStartDate > raidEndDate){
+			addErrorMessage("Error creating raid instance: Raid start date must be before raid end date");
+			return;
+		}
+		else if(raidStartDate < new Date()){
+			addErrorMessage("Error creating raid instance: Raid start date must be in the future");
+			return;
+		}
+
+
 		updateRaidInstanceMutate.mutate({
-				raidInstanceId: raidInstance?.raidInstanceId,
-				raidInstanceName,
-				raidStartDate,
-				raidEndDate,
-				raidSize,
-				numberRuns,
-				raidGroupId: raidGroup.raidGroupId ?? ""
-			});
+			raidInstanceId: raidInstance?.raidInstanceId,
+			raidInstanceName,
+			raidStartDate,
+			raidEndDate,
+			raidSize,
+			numberRuns,
+			raidGroupId: raidGroup.raidGroupId ?? ""
+		});
 	}
 
 
@@ -115,16 +172,26 @@ export default function RaidInstanceModal({
 						value={raidInstanceName}
 						onChange={(e) => setRaidInstanceName(e.target.value)}
 					/>
-					<br/>
-					{/*
-					<NumberInput
-						id="raidSizeInput"
-						min={1}
-						max={100}
-						value={raidSize}
-						onChange={setRaidSize}
-					/>
-					*/}
+					<div
+						className="flex flex-row items-center justify-center gap-4"
+					>
+						<NumberInput
+							id="raidSizeInput"
+							label="Size"
+							min={1}
+							max={100}
+							value={raidSize}
+							onChange={setRaidSize}
+						/>
+						<NumberInput
+							id="numberRunsInput"
+							label="Runs"
+							min={1}
+							max={100}
+							value={numberRuns}
+							onChange={setNumberRuns}
+						/>
+					</div>
 					<DateInput
 						id="raidStartDateInput"
 						value={moment(raidStartDate).format("YYYY-MM-DDTHH:mm")}