\n {editingTask ? '✏️ Edit Task' : '➕ Add New Task'}\n

\n \n

\n {/* Client Name */}\n

\n \n Client Name *\n \n handleInputChange('clientName', e.target.value)}\n className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${\n errors.clientName ? 'border-red-500' : 'border-gray-300'\n }`}\n placeholder=\"Enter client name\"\n disabled={isSubmitting}\n />\n {errors.clientName && (\n

{errors.clientName}

\n )}\n

\n\n {/* Task Name */}\n

\n \n Task Name *\n \n handleInputChange('taskName', e.target.value)}\n className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${\n errors.taskName ? 'border-red-500' : 'border-gray-300'\n }`}\n placeholder=\"Enter task description\"\n disabled={isSubmitting}\n />\n {errors.taskName && (\n

{errors.taskName}

\n )}\n

\n\n {/* Due Date */}\n

\n \n Due Date *\n \n handleInputChange('dueDate', e.target.value)}\n className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${\n errors.dueDate ? 'border-red-500' : 'border-gray-300'\n }`}\n disabled={isSubmitting}\n />\n {errors.dueDate && (\n

{errors.dueDate}

\n )}\n

\n\n {/* Status */}\n

\n \n Status *\n \n handleInputChange('status', e.target.value as TaskStatus)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n disabled={isSubmitting}\n >\n \n \n \n \n

\n\n {/* Action Buttons */}\n

\n \n {isSubmitting ? (\n <>\n

\n {editingTask ? 'Updating...' : 'Adding...'}\n \n ) : (\n <>\n {editingTask ? '💾 Update Task' : '➕ Add Task'}\n \n )}\n \n \n {editingTask && onCancel && (\n \n ❌ Cancel\n \n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Josphine95/Tracker/code/frontend/components/TaskForm.tsx","extension","actionData","errors"]