Create New Project

\n Fill in the details below to create a new project for your client.\n

\n\n

\n {/* Customer Selection */}\n

\n \n Customer *\n \n handleInputChange('customer_id', parseInt(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.customer_id ? 'border-red-300 focus:border-red-500' : 'border-gray-300 focus:border-blue-500'\n }`}\n >\n \n {customers.map((customer) => (\n \n ))}\n \n {errors.customer_id && (\n

{errors.customer_id}

\n )}\n

\n\n {/* Project Title */}\n

\n \n Project Title *\n \n handleInputChange('title', 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.title ? 'border-red-300 focus:border-red-500' : 'border-gray-300 focus:border-blue-500'\n }`}\n placeholder=\"Enter project title\"\n />\n {errors.title && (\n

{errors.title}

\n )}\n

\n\n {/* Project Description */}\n

\n \n Project Description *\n \n handleInputChange('description', e.target.value)}\n rows={4}\n className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${\n errors.description ? 'border-red-300 focus:border-red-500' : 'border-gray-300 focus:border-blue-500'\n }`}\n placeholder=\"Describe the project scope, objectives, and deliverables\"\n />\n {errors.description && (\n

{errors.description}

\n )}\n

\n\n {/* Status and Priority */}\n

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

\n\n

\n \n Priority\n \n handleInputChange('priority', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n \n

\n\n {/* Dates */}\n

\n \n Start Date\n \n handleInputChange('start_date', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n \n Due Date *\n \n handleInputChange('due_date', 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.due_date ? 'border-red-300 focus:border-red-500' : 'border-gray-300 focus:border-blue-500'\n }`}\n />\n {errors.due_date && (\n

{errors.due_date}

\n )}\n

\n\n {/* Budget and Progress */}\n

\n \n Budget ($)\n \n handleInputChange('budget', parseFloat(e.target.value) || 0)}\n className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${\n errors.budget ? 'border-red-300 focus:border-red-500' : 'border-gray-300 focus:border-blue-500'\n }`}\n placeholder=\"0.00\"\n />\n {errors.budget && (\n

{errors.budget}

\n )}\n

\n\n

\n \n Initial Progress (%)\n \n handleInputChange('progress', parseInt(e.target.value) || 0)}\n className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${\n errors.progress ? 'border-red-300 focus:border-red-500' : 'border-gray-300 focus:border-blue-500'\n }`}\n placeholder=\"0\"\n />\n {errors.progress && (\n

{errors.progress}

\n )}\n

\n\n {/* Submit Error */}\n {errors.submit && (\n

{errors.submit}

\n )}\n\n {/* Form Actions */}\n

\n \n Cancel\n \n \n {loading ? 'Creating...' : 'Create Project'}\n \n

\n );\n}","deleted","label",[174,175,158],"frontend","components","permalink","https://www.val.town/x/Mouhak/my-first-val/code/frontend/components/ProjectForm.tsx","extension","actionData","errors"]