Spaces:
Configuration error
Configuration error
File size: 9,016 Bytes
bb8c446 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
import React, { useState } from 'react';
import type { CaseData } from '../types';
import { StepIndicator } from './StepIndicator';
interface CaseIntakeFormProps {
onSubmit: (data: CaseData) => void;
}
const steps = ["About You", "Medical", "Work History", "Limitations"];
export const CaseIntakeForm: React.FC<CaseIntakeFormProps> = ({ onSubmit }) => {
const [currentStep, setCurrentStep] = useState(0);
const [formData, setFormData] = useState<CaseData>({
age: '',
medicalConditions: '',
workHistory: '',
limitations: '',
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const nextStep = () => {
if (currentStep < steps.length - 1) {
setCurrentStep(currentStep + 1);
}
};
const prevStep = () => {
if (currentStep > 0) {
setCurrentStep(currentStep - 1);
}
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
onSubmit(formData);
};
const isNextDisabled = () => {
switch(currentStep) {
case 0: return !formData.age;
case 1: return !formData.medicalConditions;
case 2: return !formData.workHistory;
case 3: return !formData.limitations;
default: return true;
}
};
return (
<div className="bg-gray-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 md:p-8 shadow-2xl">
<StepIndicator steps={steps} currentStep={currentStep} />
<form onSubmit={handleSubmit} className="mt-8 space-y-8">
{currentStep === 0 && (
<div className="animate-fade-in">
<h2 className="text-2xl font-bold text-white">About You</h2>
<p className="text-gray-400 mt-1">This information helps the AI tailor recommendations.</p>
<div className="mt-6">
<label htmlFor="age" className="block text-sm font-medium text-gray-300">Your Age</label>
<input
type="number"
name="age"
id="age"
value={formData.age}
onChange={handleChange}
placeholder="e.g., 54"
className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
required
/>
</div>
</div>
)}
{currentStep === 1 && (
<div className="animate-fade-in">
<h2 className="text-2xl font-bold text-white">Your Medical Conditions</h2>
<p className="text-gray-400 mt-1">List all diagnosed conditions that affect your ability to work.</p>
<div className="mt-6">
<label htmlFor="medicalConditions" className="block text-sm font-medium text-gray-300">Medical Conditions</label>
<textarea
name="medicalConditions"
id="medicalConditions"
value={formData.medicalConditions}
onChange={handleChange}
rows={5}
placeholder="e.g., Degenerative disc disease, severe anxiety, diabetic neuropathy"
className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
required
/>
</div>
</div>
)}
{currentStep === 2 && (
<div className="animate-fade-in">
<h2 className="text-2xl font-bold text-white">Work History</h2>
<p className="text-gray-400 mt-1">Briefly describe your jobs over the last 15 years.</p>
<div className="mt-6">
<label htmlFor="workHistory" className="block text-sm font-medium text-gray-300">Work History</label>
<textarea
name="workHistory"
id="workHistory"
value={formData.workHistory}
onChange={handleChange}
rows={5}
placeholder="e.g., Construction worker (10 years), Warehouse manager (5 years). Both jobs required heavy lifting and long periods of standing."
className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
required
/>
</div>
</div>
)}
{currentStep === 3 && (
<div className="animate-fade-in">
<h2 className="text-2xl font-bold text-white">Daily Limitations</h2>
<p className="text-gray-400 mt-1">Describe how your conditions limit your daily activities and ability to work.</p>
<div className="mt-6">
<label htmlFor="limitations" className="block text-sm font-medium text-gray-300">Daily Limitations</label>
<textarea
name="limitations"
id="limitations"
value={formData.limitations}
onChange={handleChange}
rows={5}
placeholder="e.g., Cannot sit for more than 20 minutes due to back pain. Trouble concentrating due to anxiety. Difficulty lifting anything over 10 pounds."
className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
required
/>
</div>
</div>
)}
<div className="flex justify-between pt-6 border-t border-white/10">
<button
type="button"
onClick={prevStep}
className={`inline-flex items-center px-6 py-3 border border-gray-600 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary focus:ring-offset-gray-900 transition-colors ${currentStep === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
disabled={currentStep === 0}
>
Back
</button>
{currentStep < steps.length - 1 ? (
<button
type="button"
onClick={nextStep}
className={`inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-primary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary focus:ring-offset-gray-900 transition-colors ${isNextDisabled() ? 'opacity-50 cursor-not-allowed' : ''}`}
disabled={isNextDisabled()}
>
Next
</button>
) : (
<button
type="submit"
className={`inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-secondary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-secondary focus:ring-offset-gray-900 transition-colors ${isNextDisabled() ? 'opacity-50 cursor-not-allowed' : ''}`}
disabled={isNextDisabled()}
>
Generate Plan
</button>
)}
</div>
</form>
</div>
);
};
|