chore: add toast show validation errors

Reviewed-on: #31

frontend/src/pages/HealthPackagePage.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
+import toast from "react-hot-toast";
 import { AxiosError } from "axios";
 import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
 
@@ -164,9 +165,11 @@ export default function HealthPackagePage() {
 		if (!pkg.id) return;
 		try {
 			await updateHealthPackageApi(pkg.id, { isActive: !pkg.isActive });
+			toast.success(`Package ${pkg.isActive ? "hidden" : "activated"}`);
 			fetchData();
 		} catch (err) {
 			console.error("Failed to update status", err);
+			toast.error("Failed to update status");
 		}
 	};
 	const handleToggleCategoryStatus = async (cat: HealthCategory) => {
@@ -180,13 +183,21 @@ export default function HealthPackagePage() {
 			}
 
 			await updateCategoryApi(cat.id, { isActive: !cat.isActive });
+			toast.success(`Category ${cat.isActive ? "hidden" : "activated"}`);
 			fetchData();
 		} catch (err) {
 			console.error("Failed to update category status", err);
+			toast.error("Failed to update category status");
 		}
 	};
 
 	const openAddPackage = () => {
+		if (categories.length === 0) {
+			toast.error(
+				"Please create at least one category before attempting to add a health package.",
+			);
+			return;
+		}
 		setEditingPackage(null);
 		setPkgForm({
 			name: "",
@@ -254,6 +265,27 @@ export default function HealthPackagePage() {
 	};
 
 	const savePackage = async () => {
+		if (!pkgForm.image) return toast.error("Package image is required.");
+		if (!pkgForm.name?.trim()) return toast.error("Package Name is required.");
+		if (!pkgForm.slug?.trim()) return toast.error("URL Slug is required.");
+		if (!pkgForm.categoryId)
+			return toast.error("Please select a valid category.");
+		if (pkgForm.price === undefined || pkgForm.price <= 0)
+			return toast.error(
+				"Regular Price must be a valid amount greater than 0.",
+			);
+		if (!pkgForm.description?.trim())
+			return toast.error("Description is required.");
+
+		const structureFilled = inclusionsList.some(
+			(item) => item.category.trim() !== "" && item.items.trim() !== "",
+		);
+		if (!structureFilled) {
+			return toast.error(
+				"Please provide at least one valid Category Group with tests inside it.",
+			);
+		}
+
 		try {
 			// Convert the dynamic array back into the required JSON object format
 			const parsedInclusions: Record<string, string[]> = {};
@@ -289,18 +321,25 @@ export default function HealthPackagePage() {
 				}
 
 				await updateHealthPackageApi(editingPackage.id, changedFields);
+				toast.success("Package updated successfully!");
 			} else {
 				await createHealthPackageApi(finalData);
+				toast.success("Package created successfully!");
 			}
 
 			setPackageModal(false);
 			fetchData();
 		} catch (err) {
 			console.error(err);
+			toast.error(
+				"An unexpected system error occurred while trying to save the package.",
+			);
 		}
 	};
 
 	const saveCategory = async () => {
+		if (!catForm.name?.trim()) return toast.error("Category Name is required.");
+
 		try {
 			if (editingCategory?.id) {
 				const changedFields: Record<string, any> = {};
@@ -324,21 +363,30 @@ export default function HealthPackagePage() {
 					editingCategory.id,
 					changedFields as Partial<HealthCategory>,
 				);
+				toast.success("Category updated successfully!");
 			} else {
 				await createCategoryApi(catForm as any);
+				toast.success("Category created successfully!");
 			}
 
 			setCategoryModal(false);
 			fetchData();
 		} catch (err) {
 			console.error(err);
+			toast.error("An error occurred while saving the category.");
 		}
 	};
 
 	const deleteCategory = async (id: number) => {
 		if (confirm("Delete this category? Ensure no packages are linked to it.")) {
+			try {
 				await deleteCategoryApi(id);
+				toast.success("Category deleted successfully!");
 				fetchData();
+			} catch (err) {
+				console.error(err);
+				toast.error("Failed to delete category.");
+			}
 		}
 	};
 
@@ -949,16 +997,6 @@ export default function HealthPackagePage() {
 								className="text-base"
 							/>
 						</div>
-						{/* <div className="space-y-1">
-							<Label className="text-sm font-semibold">URL Slug</Label>
-							<Input
-								value={catForm.slug}
-								onChange={(e) =>
-									setCatForm({ ...catForm, slug: e.target.value })
-								}
-								className="text-base"
-							/>
-						</div> */}
 
 						<div className="space-y-1">
 							<Label className="text-sm font-semibold">Sort Order</Label>