From 8c60b0d900d02b312a63a136e28f12b36990e0c1 Mon Sep 17 00:00:00 2001
From: BradyMitch <braden.jr.mitch@gmail.com>
Date: Tue, 10 Mar 2026 14:09:05 -0700
Subject: [PATCH] error handling on form save

---
 .../CreateLocationModal.tsx                   | 26 +++++++++++++++----
 .../EditLocationModal/EditLocationModal.tsx   | 26 +++++++++++++++----
 .../CreateServiceCategoryModal.tsx            | 26 +++++++++++++++----
 .../EditServiceCategoryModal.tsx              | 26 +++++++++++++++----
 .../CreateServiceModal/CreateServiceModal.tsx | 26 +++++++++++++++----
 .../EditServiceModal/EditServiceModal.tsx     | 26 +++++++++++++++----
 .../EditStaffUserModal/EditStaffUserModal.tsx | 26 +++++++++++++++----
 7 files changed, 147 insertions(+), 35 deletions(-)

diff --git a/src/components/settings/locations/CreateLocationModal/CreateLocationModal.tsx b/src/components/settings/locations/CreateLocationModal/CreateLocationModal.tsx
index 71a833d..d813013 100644
--- a/src/components/settings/locations/CreateLocationModal/CreateLocationModal.tsx
+++ b/src/components/settings/locations/CreateLocationModal/CreateLocationModal.tsx
@@ -39,6 +39,7 @@ export const CreateLocationModal = ({
   revalidateTable,
 }: CreateLocationModalProps) => {
   const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [formData, setFormData] = useState<Partial<LocationWithRelations> | null>(null)
   const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
   const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
@@ -138,11 +139,20 @@ export const CreateLocationModal = ({
 
   const handleSave = async () => {
     if (formData && !isReadonly) {
-      setIsSaving(true)
-      await insertLocation(formData)
-      await revalidateTable()
-      onClose()
-      setIsSaving(false)
+      try {
+        setIsSaving(true)
+        await insertLocation(formData)
+        await revalidateTable()
+        onClose()
+        setIsSaving(false)
+      } catch (e: unknown) {
+        if (e instanceof Error) {
+          setError(e.message)
+        } else {
+          setError("An unknown error occurred")
+        }
+        setIsSaving(false)
+      }
     }
   }
 
@@ -154,6 +164,12 @@ export const CreateLocationModal = ({
 
       <DialogBody>
         <form className="space-y-5">
+          {error && (
+            <div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
+              <p className="text-sm font-medium text-red-800">{error}</p>
+            </div>
+          )}
+
           <LocationForm
             location={formData}
             services={services}
diff --git a/src/components/settings/locations/EditLocationModal/EditLocationModal.tsx b/src/components/settings/locations/EditLocationModal/EditLocationModal.tsx
index 0b45bb3..7f6686a 100644
--- a/src/components/settings/locations/EditLocationModal/EditLocationModal.tsx
+++ b/src/components/settings/locations/EditLocationModal/EditLocationModal.tsx
@@ -44,6 +44,7 @@ export const EditLocationModal = ({
   openConfirmArchiveLocationModal,
 }: EditLocationModalProps) => {
   const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [formData, setFormData] = useState<Partial<LocationWithRelations> | null>(null)
   const [previousLocation, setPreviousLocation] = useState<Partial<LocationWithRelations> | null>(
     null
@@ -134,11 +135,20 @@ export const EditLocationModal = ({
 
   const handleSave = async () => {
     if (formData && !isReadonly) {
-      setIsSaving(true)
-      await updateLocation(formData, previousLocation)
-      await revalidateTable()
-      onClose()
-      setIsSaving(false)
+      try {
+        setIsSaving(true)
+        await updateLocation(formData, previousLocation)
+        await revalidateTable()
+        onClose()
+        setIsSaving(false)
+      } catch (e: unknown) {
+        if (e instanceof Error) {
+          setError(e.message)
+        } else {
+          setError("An unknown error occurred")
+        }
+        setIsSaving(false)
+      }
     }
   }
 
@@ -165,6 +175,12 @@ export const EditLocationModal = ({
             </div>
           )}
 
+          {error && (
+            <div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
+              <p className="text-sm font-medium text-red-800">{error}</p>
+            </div>
+          )}
+
           <LocationForm
             location={formData}
             services={services}
diff --git a/src/components/settings/service_categories/CreateServiceCategoryModal/CreateServiceCategoryModal.tsx b/src/components/settings/service_categories/CreateServiceCategoryModal/CreateServiceCategoryModal.tsx
index 57f31fa..7b84546 100644
--- a/src/components/settings/service_categories/CreateServiceCategoryModal/CreateServiceCategoryModal.tsx
+++ b/src/components/settings/service_categories/CreateServiceCategoryModal/CreateServiceCategoryModal.tsx
@@ -32,6 +32,7 @@ export const CreateServiceCategoryModal = ({
   revalidateTable,
 }: CreateServiceCategoryModalProps) => {
   const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [formData, setFormData] = useState<Partial<ServiceCategoryWithRelations> | null>(null)
   const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
   const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
@@ -91,11 +92,20 @@ export const CreateServiceCategoryModal = ({
 
   const handleSave = async () => {
     if (formData && !isReadonly) {
-      setIsSaving(true)
-      await insertServiceCategory(formData)
-      await revalidateTable()
-      onClose()
-      setIsSaving(false)
+      try {
+        setIsSaving(true)
+        await insertServiceCategory(formData)
+        await revalidateTable()
+        onClose()
+        setIsSaving(false)
+      } catch (e: unknown) {
+        if (e instanceof Error) {
+          setError(e.message)
+        } else {
+          setError("An unknown error occurred")
+        }
+        setIsSaving(false)
+      }
     }
   }
 
@@ -107,6 +117,12 @@ export const CreateServiceCategoryModal = ({
 
       <DialogBody>
         <form className="space-y-5">
+          {error && (
+            <div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
+              <p className="text-sm font-medium text-red-800">{error}</p>
+            </div>
+          )}
+
           <ServiceCategoryForm
             serviceCategory={formData}
             setFormData={setFormData}
diff --git a/src/components/settings/service_categories/EditServiceCategoryModal/EditServiceCategoryModal.tsx b/src/components/settings/service_categories/EditServiceCategoryModal/EditServiceCategoryModal.tsx
index b13ea7b..e3e76bb 100644
--- a/src/components/settings/service_categories/EditServiceCategoryModal/EditServiceCategoryModal.tsx
+++ b/src/components/settings/service_categories/EditServiceCategoryModal/EditServiceCategoryModal.tsx
@@ -36,6 +36,7 @@ export const EditServiceCategoryModal = ({
   openConfirmArchiveServiceCategoryModal,
 }: EditServiceCategoryModalProps) => {
   const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [formData, setFormData] = useState<Partial<ServiceCategoryWithRelations> | null>(null)
   const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
   const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
@@ -91,11 +92,20 @@ export const EditServiceCategoryModal = ({
 
   const handleSave = async () => {
     if (formData && !isReadonly) {
-      setIsSaving(true)
-      await updateServiceCategory(formData)
-      await revalidateTable()
-      onClose()
-      setIsSaving(false)
+      try {
+        setIsSaving(true)
+        await updateServiceCategory(formData)
+        await revalidateTable()
+        onClose()
+        setIsSaving(false)
+      } catch (e: unknown) {
+        if (e instanceof Error) {
+          setError(e.message)
+        } else {
+          setError("An unknown error occurred")
+        }
+        setIsSaving(false)
+      }
     }
   }
 
@@ -122,6 +132,12 @@ export const EditServiceCategoryModal = ({
             </div>
           )}
 
+          {error && (
+            <div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
+              <p className="text-sm font-medium text-red-800">{error}</p>
+            </div>
+          )}
+
           <ServiceCategoryForm
             serviceCategory={formData}
             services={services}
diff --git a/src/components/settings/services/CreateServiceModal/CreateServiceModal.tsx b/src/components/settings/services/CreateServiceModal/CreateServiceModal.tsx
index eed393c..b0e2326 100644
--- a/src/components/settings/services/CreateServiceModal/CreateServiceModal.tsx
+++ b/src/components/settings/services/CreateServiceModal/CreateServiceModal.tsx
@@ -35,6 +35,7 @@ export const CreateServiceModal = ({
   revalidateTable,
 }: CreateServiceModalProps) => {
   const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [formData, setFormData] = useState<Partial<ServiceWithRelations> | null>(null)
   const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
   const [isFormValidating, setIsFormValidating] = useState<boolean>(false)
@@ -115,11 +116,20 @@ export const CreateServiceModal = ({
 
   const handleSave = async () => {
     if (formData && !isReadonly) {
-      setIsSaving(true)
-      await insertService(formData)
-      await revalidateTable()
-      onClose()
-      setIsSaving(false)
+      try {
+        setIsSaving(true)
+        await insertService(formData)
+        await revalidateTable()
+        onClose()
+        setIsSaving(false)
+      } catch (e: unknown) {
+        if (e instanceof Error) {
+          setError(e.message)
+        } else {
+          setError("An unknown error occurred")
+        }
+        setIsSaving(false)
+      }
     }
   }
 
@@ -131,6 +141,12 @@ export const CreateServiceModal = ({
 
       <DialogBody>
         <form className="space-y-5">
+          {error && (
+            <div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
+              <p className="text-sm font-medium text-red-800">{error}</p>
+            </div>
+          )}
+
           <ServiceForm
             service={formData}
             locations={locations}
diff --git a/src/components/settings/services/EditServiceModal/EditServiceModal.tsx b/src/components/settings/services/EditServiceModal/EditServiceModal.tsx
index 2672dbf..f6185d1 100644
--- a/src/components/settings/services/EditServiceModal/EditServiceModal.tsx
+++ b/src/components/settings/services/EditServiceModal/EditServiceModal.tsx
@@ -42,6 +42,7 @@ export const EditServiceModal = ({
   openConfirmArchiveServiceModal,
 }: EditServiceModalProps) => {
   const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [formData, setFormData] = useState<Partial<ServiceWithRelations> | null>(null)
   const [previousService, setPreviousService] = useState<Partial<ServiceWithRelations> | null>(null)
   const [isFormValidState, setIsFormValidState] = useState<boolean>(false)
@@ -115,11 +116,20 @@ export const EditServiceModal = ({
 
   const handleSave = async () => {
     if (formData && !isReadonly) {
-      setIsSaving(true)
-      await updateService(formData, previousService)
-      await revalidateTable()
-      onClose()
-      setIsSaving(false)
+      try {
+        setIsSaving(true)
+        await updateService(formData, previousService)
+        await revalidateTable()
+        onClose()
+        setIsSaving(false)
+      } catch (e: unknown) {
+        if (e instanceof Error) {
+          setError(e.message)
+        } else {
+          setError("An unknown error occurred")
+        }
+        setIsSaving(false)
+      }
     }
   }
 
@@ -146,6 +156,12 @@ export const EditServiceModal = ({
             </div>
           )}
 
+          {error && (
+            <div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
+              <p className="text-sm font-medium text-red-800">{error}</p>
+            </div>
+          )}
+
           <ServiceForm
             service={formData}
             locations={locations}
diff --git a/src/components/settings/users/EditStaffUserModal/EditStaffUserModal.tsx b/src/components/settings/users/EditStaffUserModal/EditStaffUserModal.tsx
index 8ae7691..cfcd0d2 100644
--- a/src/components/settings/users/EditStaffUserModal/EditStaffUserModal.tsx
+++ b/src/components/settings/users/EditStaffUserModal/EditStaffUserModal.tsx
@@ -39,6 +39,7 @@ export const EditStaffUserModal = ({
   openConfirmArchiveUserModal,
 }: EditStaffUserModalProps) => {
   const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [formData, setFormData] = useState<StaffUser | null>(null)
   const [previousUser, setPreviousUser] = useState<StaffUser | null>(null)
   const editableRoles = useEditableRoles()
@@ -61,11 +62,20 @@ export const EditStaffUserModal = ({
 
   const handleSave = async () => {
     if (formData && !isReadonly) {
-      setIsSaving(true)
-      await updateStaffUser(formData, previousUser, editableRoles)
-      await revalidateTable()
-      onClose()
-      setIsSaving(false)
+      try {
+        setIsSaving(true)
+        await updateStaffUser(formData, previousUser, editableRoles)
+        await revalidateTable()
+        onClose()
+        setIsSaving(false)
+      } catch (e: unknown) {
+        if (e instanceof Error) {
+          setError(e.message)
+        } else {
+          setError("An unknown error occurred")
+        }
+        setIsSaving(false)
+      }
     }
   }
 
@@ -97,6 +107,12 @@ export const EditStaffUserModal = ({
             </div>
           )}
 
+          {error && (
+            <div className="flex flex-col gap-1 rounded-md border-l-4 border-l-red-600 bg-red-50 p-4">
+              <p className="text-sm font-medium text-red-800">{error}</p>
+            </div>
+          )}
+
           <UserInformationSection user={user} />
 
           <div className="grid grid-cols-2 gap-6">