function PatientDataStorage({ data, onAddPatient, onSelectPatient, selectedExercises }) { const [patientName, setPatientName] = React.useState(''); const handleInputChange = (event)=>{ setPatientName(event.target.value); }; const handleAddPatient = ()=>{ onAddPatient(patientName); setPatientName(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", type: "text", placeholder: "Type patient name", value: patientName, onChange: handleInputChange, name: "patientName", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-700", onClick: handleAddPatient, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Add Patient"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border-2 border-gray-300 rounded-lg focus:border-blue-500", onChange: (e)=>onSelectPatient(e.target.value), name: "selectedPatient", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Select a patient"), data.map((patient, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: patient.name, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, patient.name)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, selectedExercises.map((exercise, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-medium text-gray-600", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, exercise))))); } function PatientDataStorageStory() { const [patients, setPatients] = React.useState([ { name: 'John Doe', exercises: [ 'Running', 'Swimming' ] }, { name: 'Jane Smith', exercises: [ 'Cycling' ] } ]); const [selectedPatient, setSelectedPatient] = React.useState(''); const [selectedExercises, setSelectedExercises] = React.useState([]); const addPatient = (patientName)=>{ setPatients((prev)=>[ ...prev, { name: patientName, exercises: [] } ]); }; const selectPatient = (patientName)=>{ setSelectedPatient(patientName); const patient = patients.find((patient)=>patient.name === patientName); if (patient) { setSelectedExercises(patient.exercises); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PatientDataStorage, { data: patients, onAddPatient: addPatient, onSelectPatient: selectPatient, selectedExercises: selectedExercises, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "Selected Patient: ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 75, columnNumber: 27 }, __self: this }, selectedPatient))); } function MainComponent() { const [patientsList, setPatientsList] = React.useState([]); const [selectedPatientId, setSelectedPatientId] = React.useState(''); const [exerciseData, setExerciseData] = React.useState({ exercise: '', sets: '', reps: '', load: '', frequency: '' }); const [patientExercises, setPatientExercises] = React.useState({}); const [acuteCronicRatio, setAcuteCronicRatio] = React.useState(''); const addPatient = (patientName)=>{ const newPatient = { name: patientName, id: `${Date.now()}`, exercises: [] }; setPatientsList((prev)=>[ ...prev, newPatient ]); }; const onSelectPatient = (patientId)=>{ setSelectedPatientId(patientId); setAcuteCronicRatio(''); if (patientExercises[patientId]) { setExerciseData({ ...exerciseData, exercise: '', sets: '', reps: '', load: '', frequency: '' }); } }; const handleInputChange = (e)=>{ const { name, value } = e.target; setExerciseData({ ...exerciseData, [name]: value }); }; const handleAddExercise = ()=>{ const newData = { ...patientExercises }; if (!newData[selectedPatientId]) { newData[selectedPatientId] = []; } newData[selectedPatientId].push({ ...exerciseData, date: new Date().toISOString() }); setPatientExercises(newData); setExerciseData({ exercise: '', sets: '', reps: '', load: '', frequency: '' }); }; const calculateAcuteCronicRatio = ()=>{ if (patientExercises[selectedPatientId]) { const lastFourWeeksExercises = patientExercises[selectedPatientId].filter((ex)=>{ const exerciseDate = new Date(ex.date); const fourWeeksAgo = new Date(); fourWeeksAgo.setDate(fourWeeksAgo.getDate() - 28); return exerciseDate > fourWeeksAgo; }); const lastSevenDaysExercises = patientExercises[selectedPatientId].filter((ex)=>{ const exerciseDate = new Date(ex.date); const sevenDaysAgo = new Date(); sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); return exerciseDate > sevenDaysAgo; }); const fourWeeksVolume = lastFourWeeksExercises.reduce((total, ex)=>total + ex.sets * ex.reps * ex.load * ex.frequency, 0) / 4; const sevenDaysVolume = lastSevenDaysExercises.reduce((total, ex)=>total + ex.sets * ex.reps * ex.load * ex.frequency, 0); setAcuteCronicRatio((sevenDaysVolume / fourWeeksVolume).toFixed(2)); } }; React.useEffect(()=>{ calculateAcuteCronicRatio(); }, [ patientExercises, selectedPatientId ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6 space-y-4 w-full max-w-xs", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-crimson-text text-[#121212]", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, "Training Volume Calculator"), /*#__PURE__*/ React.createElement(PatientDataStorage, { data: patientsList.map((patient)=>{ const patientWithExercises = { ...patient }; if (patientExercises[patient.id]) { patientWithExercises.exercises = patientExercises[patient.id].map((e)=>e.exercise); } return patientWithExercises; }), onAddPatient: addPatient, onSelectPatient: onSelectPatient, selectedExercises: selectedPatientId && patientExercises[selectedPatientId] ? patientExercises[selectedPatientId].map((e)=>e.exercise) : [], __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }), selectedPatientId && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Exercise name", name: "exercise", value: exerciseData.exercise, onChange: handleInputChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", placeholder: "Sets", name: "sets", value: exerciseData.sets, onChange: handleInputChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", placeholder: "Reps", name: "reps", value: exerciseData.reps, onChange: handleInputChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", placeholder: "Load (kg)", name: "load", value: exerciseData.load, onChange: handleInputChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "frequency", value: exerciseData.frequency, onChange: handleInputChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Select frequency"), /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "1 time a week"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "2 times a week"), /*#__PURE__*/ React.createElement("option", { value: "3", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "3 times a week"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "4 times a week"), /*#__PURE__*/ React.createElement("option", { value: "5", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "5 times a week"), /*#__PURE__*/ React.createElement("option", { value: "6", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "6 times a week"), /*#__PURE__*/ React.createElement("option", { value: "7", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "7 times a week")), /*#__PURE__*/ React.createElement("button", { onClick: handleAddExercise, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, "Add Exercise")), acuteCronicRatio && /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, "Acute/Cronic Ratio: ", acuteCronicRatio)); }