From d21c368cfdb441a03c20dd54c8b43277b2619569 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Tue, 27 Jan 2026 22:22:59 +1100
Subject: [PATCH] Add CreateChoreModal component

---
 frontend/src/components/CreateChoreModal.tsx | 206 +++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 frontend/src/components/CreateChoreModal.tsx

diff --git a/frontend/src/components/CreateChoreModal.tsx b/frontend/src/components/CreateChoreModal.tsx
new file mode 100644
index 0000000..fe34554
--- /dev/null
+++ b/frontend/src/components/CreateChoreModal.tsx
@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from 'react';
+import { choreService, CreateChoreRequest } from '../api/chores';
+import api from '../api/axios';
+import { User } from '../api/auth';
+
+interface CreateChoreModalProps {
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+const CreateChoreModal: React.FC<CreateChoreModalProps> = ({ onClose, onSuccess }) => {
+  const [formData, setFormData] = useState<CreateChoreRequest>({
+    title: '',
+    description: '',
+    room: '',
+    frequency: 'once',
+    assigned_to: undefined,
+    due_date: '',
+  });
+  const [users, setUsers] = useState<User[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    loadUsers();
+  }, []);
+
+  const loadUsers = async () => {
+    try {
+      const response = await api.get<User[]>('/api/v1/users');
+      setUsers(response.data);
+    } catch (error) {
+      console.error('Failed to load users:', error);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      await choreService.createChore(formData);
+      onSuccess();
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Failed to create task');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: name === 'assigned_to' ? (value ? parseInt(value) : undefined) : value,
+    }));
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="text-2xl font-bold text-gray-900">Create New Task</h2>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 transition-colors"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+                {error}
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
+                Task Title *
+              </label>
+              <input
+                id="title"
+                name="title"
+                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"
+                placeholder="e.g., Vacuum living room"
+                required
+              />
+            </div>
+
+            <div>
+              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-2">
+                Description
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                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"
+                placeholder="Additional details..."
+              />
+            </div>
+
+            <div>
+              <label htmlFor="room" className="block text-sm font-medium text-gray-700 mb-2">
+                Room/Area *
+              </label>
+              <input
+                id="room"
+                name="room"
+                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"
+                placeholder="e.g., Living Room, Kitchen"
+                required
+              />
+            </div>
+
+            <div>
+              <label htmlFor="frequency" className="block text-sm font-medium text-gray-700 mb-2">
+                Frequency *
+              </label>
+              <select
+                id="frequency"
+                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"
+                required
+              >
+                <option value="once">Once</option>
+                <option value="daily">Daily</option>
+                <option value="weekly">Weekly</option>
+                <option value="monthly">Monthly</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="assigned_to" className="block text-sm font-medium text-gray-700 mb-2">
+                Assign To
+              </label>
+              <select
+                id="assigned_to"
+                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"
+              >
+                <option value="">Unassigned</option>
+                {users.map(user => (
+                  <option key={user.id} value={user.id}>
+                    {user.full_name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="due_date" className="block text-sm font-medium text-gray-700 mb-2">
+                Due Date
+              </label>
+              <input
+                id="due_date"
+                name="due_date"
+                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"
+              />
+            </div>
+
+            <div className="flex gap-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isLoading ? 'Creating...' : 'Create Task'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateChoreModal;