From 2b0f3f66c8f340531fc1860a238099bc6a2cd923 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Wed, 28 Jan 2026 17:04:16 +1100
Subject: [PATCH] Fix text color visibility and error handling, update
 frequency options

---
 frontend/src/components/CreateChoreModal.tsx | 37 +++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/CreateChoreModal.tsx b/frontend/src/components/CreateChoreModal.tsx
index fe34554..bf9c0c9 100644
--- a/frontend/src/components/CreateChoreModal.tsx
+++ b/frontend/src/components/CreateChoreModal.tsx
@@ -13,7 +13,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
     title: '',
     description: '',
     room: '',
-    frequency: 'once',
+    frequency: 'daily',
     assigned_to: undefined,
     due_date: '',
   });
@@ -43,7 +43,25 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
       await choreService.createChore(formData);
       onSuccess();
     } catch (err: any) {
-      setError(err.response?.data?.detail || 'Failed to create task');
+      // Handle different error response formats
+      let errorMessage = 'Failed to create task';
+      
+      if (err.response?.data) {
+        const errorData = err.response.data;
+        
+        // Check if it's a validation error array
+        if (Array.isArray(errorData.detail)) {
+          errorMessage = errorData.detail
+            .map((e: any) => `${e.loc?.join('.')}: ${e.msg}`)
+            .join(', ');
+        } else if (typeof errorData.detail === 'string') {
+          errorMessage = errorData.detail;
+        } else if (typeof errorData === 'string') {
+          errorMessage = errorData;
+        }
+      }
+      
+      setError(errorMessage);
     } finally {
       setIsLoading(false);
     }
@@ -90,7 +108,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
                 type="text"
                 value={formData.title}
                 onChange={handleChange}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                 placeholder="e.g., Vacuum living room"
                 required
               />
@@ -106,7 +124,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
                 value={formData.description}
                 onChange={handleChange}
                 rows={3}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                 placeholder="Additional details..."
               />
             </div>
@@ -121,7 +139,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
                 type="text"
                 value={formData.room}
                 onChange={handleChange}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                 placeholder="e.g., Living Room, Kitchen"
                 required
               />
@@ -136,12 +154,13 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
                 name="frequency"
                 value={formData.frequency}
                 onChange={handleChange}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
                 required
               >
-                <option value="once">Once</option>
+                <option value="on_trigger">On Trigger</option>
                 <option value="daily">Daily</option>
                 <option value="weekly">Weekly</option>
+                <option value="fortnightly">Fortnightly</option>
                 <option value="monthly">Monthly</option>
               </select>
             </div>
@@ -155,7 +174,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
                 name="assigned_to"
                 value={formData.assigned_to || ''}
                 onChange={handleChange}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
               >
                 <option value="">Unassigned</option>
                 {users.map(user => (
@@ -176,7 +195,7 @@ const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess
                 type="date"
                 value={formData.due_date}
                 onChange={handleChange}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
               />
             </div>