import React from 'react'; import ReactDOM from 'react-dom'; const sections = [ "SG1", "SG2", "SG3", "SG4", "SG5", "SG6", "SG7", "SG8", "SG9", "SG10", "SG11", "SG12", "SG13", "SG14", "SG15", "SG16", "BA17", "BA18", "BA19", "BA20", "BA21", "BA22", "HE23", "HE24", "HE25", "HE26", "MO27", "MO28", "MO29", "MO30", "GU31", "GU32", "GU33", "AT34", "AT35", "AT36" ]; const bloodTests = ["FBC", "CRP", "LFT", "UEC", "Blood Cultures"]; const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; const imagingOptions = ["Xray", "CT-Non contrast", "CT-Contrast", "MRI", "Ultrasound"]; const taskStatuses = ["Completed", "Not yet completed", "Pending"]; function EditableForm() { const [formData, setFormData] = React.useState( sections.reduce((acc, section) => { acc[section] = { plan: "", bloods: bloodTests.reduce((bAcc, test) => ({ ...bAcc, [test]: { checked: false, status: "", date: "" } }), {}), bloodDays: days.reduce((dAcc, day) => ({ ...dAcc, [day]: false }), {}), imaging: imagingOptions.reduce((iAcc, img) => ({ ...iAcc, [img]: { checked: false, status: "", date: "" } }), {}), imagingDetails: "" }; return acc; }, {}) ); const handleChange = (section, field, value) => { setFormData(prev => ({ ...prev, [section]: { ...prev[section], [field]: value } })); }; return (
{sections.map(section => (

{section}

Plan