@digihmis/esm-outpatient-app 1.0.0

package/src/patient-management/patient-management-workspace/patient-management-workspace.tsx

@@ -0,0 +1,1581 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  ButtonSet,
+  Button,
+  Stack,
+  TextArea,
+  RadioButtonGroup,
+  RadioButton,
+  Tag,
+  TreeView,
+  InlineNotification,
+  InlineLoading,
+  TreeNode,
+  Layer,
+  FilterableMultiSelect,
+} from '@carbon/react';
+import { type DefaultWorkspaceProps, launchWorkspace, ResponsiveWrapper, showModal, useConfig } from '@openmrs/esm-framework';
+import capitalize from 'lodash-es/capitalize';
+import {
+  useBillableServicesWithPricing,
+  useConceptAnswers,
+  useDiagnosis,
+  usePatientPaymentType,
+  usePerson,
+} from './patient-management.resource';
+import {
+  ClinicalEncounterSchema,
+  ClinicalEncounterFormData,
+  OTHER_SYMPTOM_UUID,
+  SURGICAL_HISTORY_UUID,
+  ADMISSION_HISTORY_UUID,
+  OTHER_PAST_ILLNESS_UUID,
+  YES_ANSWER_UUID,
+  ABNORMAL_GAIT_UUID,
+  JAUNDICE_UUID,
+  CYANOSIS_UUID,
+  DEHYDRATION_UUID,
+  FINGER_CLUBBING_UUID,
+  OEDEMA_UUID,
+  PALLOR_UUID,
+  LYMPHADENOPATHY_UUID,
+  GenericItem,
+  ProcedureWithBilling,
+  TransformedBillableItem,
+} from './patient-management-schema';
+import { ConfigObject } from '../../config-schema';
+import styles from './patient-management-workspace.scss';
+import debounce from 'lodash-es/debounce';
+import { DiagnosisAutosuggest } from '../components/auto-suggest/diagnosis-autosuggest.component';
+import { useCurrencyFormatting } from './utils';
+import { BillableServicesSelector } from './billable-services-selector.component';
+
+interface ClinicalEncounterWorkspaceProps extends DefaultWorkspaceProps {
+  patientUuid: string;
+  formContext: 'creating' | 'editing';
+  editEncounterUuid?: string;
+  queueEntryUuid?: string;
+  completeServiceCallback?: () => Promise<void>;
+}
+
+const ClinicalEncounterWorkspace: React.FC<ClinicalEncounterWorkspaceProps> = ({ closeWorkspace, patientUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigObject>();
+  const [currentSection, setCurrentSection] = useState(0);
+
+  const procedureServices = useBillableServicesWithPricing(config.SurgicalOutpatientDepartmentServiceConceptUuid);
+  const labServices = useBillableServicesWithPricing(config.LaboratoryServiceConceptUuid);
+  const imagingServices = useBillableServicesWithPricing(config.ImagingServiceConceptUuid);
+
+  const paymentInfo = usePatientPaymentType(patientUuid);
+
+  const procedureOptionsWithPrices = useMemo(
+    () => procedureServices.transformItems(procedureServices.lineItems, paymentInfo.isInsurance),
+    [procedureServices, paymentInfo.isInsurance],
+  );
+
+  const labOptionsWithPrices = useMemo(
+    () => labServices.transformItems(labServices.lineItems, paymentInfo.isInsurance),
+    [labServices, paymentInfo.isInsurance],
+  );
+
+  const imagingOptionsWithPrices = useMemo(
+    () => imagingServices.transformItems(imagingServices.lineItems, paymentInfo.isInsurance),
+    [imagingServices, paymentInfo.isInsurance],
+  );
+
+  const {
+    control,
+    handleSubmit: handleFormSubmit,
+    watch,
+    setValue,
+    trigger,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = useForm<ClinicalEncounterFormData>({
+    resolver: zodResolver(ClinicalEncounterSchema),
+    defaultValues: {
+      symptoms: [] as Array<GenericItem>,
+      pastIllness: [] as Array<GenericItem>,
+      onsetStatus: '',
+      tbContact: '',
+      otherSymptomText: '',
+      surgeryDetails: '',
+      admissionReason: '',
+      otherPastIllnessText: '',
+      medicationsTaken: '',
+      medicationDetails: '',
+      // Physical Examination defaults
+      generalExamination: [] as Array<GenericItem>,
+      generalExaminationNotes: '',
+      gaitFinding: '',
+      jaundiceGrading: '',
+      cyanosisType: '',
+      dehydrationType: [] as Array<GenericItem>,
+      fingerclubGrading: '',
+      oedemaLocation: [] as Array<GenericItem>,
+      oedemaType: '',
+      oedemaGrading: '',
+      pallorLocation: [] as Array<GenericItem>,
+      pallorGrading: '',
+      siteLymphadenopathy: [] as Array<GenericItem>,
+      // Diagnosis defaults
+      primaryDiagnosis: [] as Array<GenericItem>,
+      secondaryDiagnosis: [] as Array<GenericItem>,
+      diagnosisNotes: '',
+      procedures: [] as Array<TransformedBillableItem>,
+      labTests: [] as Array<TransformedBillableItem>,
+      imagingTests: [] as Array<TransformedBillableItem>,
+      notes: '',
+      patientOutcome: '',
+    },
+    mode: 'onTouched',
+  });
+
+  // Watch form values
+  const symptoms = watch('symptoms');
+  const pastIllness = watch('pastIllness');
+  const medicationsTaken = watch('medicationsTaken');
+  const generalExamination = watch('generalExamination');
+
+  // Fetch person data
+  const { person } = usePerson(patientUuid);
+  const openmrsId =
+    person?.identifiers?.find((id) => id.identifierType?.uuid === config.OpenmrsIdentifierTypeUuid)?.identifier || '';
+
+  // Fetch TB contact answers
+  const { data: tbContactAnswersRaw, isLoading: isLoadingTbAnswers } = useConceptAnswers(
+    config.tuberculosisContactQuestionConceptUuid,
+  );
+
+  const tbContactAnswers = useMemo(
+    () => tbContactAnswersRaw?.filter((answer) => answer.uuid !== '1067AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') || [],
+    [tbContactAnswersRaw],
+  );
+
+  // Prepare options for Section 0 & 1
+  const symptomOptions = useMemo(
+    () =>
+      (config.symptomsConceptAnswers || []).map((symptom) => ({
+        id: symptom.concept,
+        text: symptom.label,
+      })),
+    [config.symptomsConceptAnswers],
+  );
+
+  const pastIllnessOptions = useMemo(
+    () =>
+      (config.pastIllnessAnswers || []).map((pastIllness) => ({
+        id: pastIllness.concept,
+        text: pastIllness.label,
+      })),
+    [config.pastIllnessAnswers],
+  );
+
+  const onsetStatusAnswers = useMemo(
+    () =>
+      (config.onsetStatusAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.onsetStatusAnswers],
+  );
+
+  // Prepare options for Section 2 - Physical Examination
+  const generalExaminationOptions = useMemo(
+    () =>
+      (config.generalExaminationConceptAnswers || []).map((exam) => ({
+        id: exam.concept,
+        text: exam.label,
+      })),
+    [config.generalExaminationConceptAnswers],
+  );
+
+  const gaitFindingOptions = useMemo(
+    () =>
+      (config.gaitFindingConceptAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.gaitFindingConceptAnswers],
+  );
+
+  const jaundiceGradingOptions = useMemo(
+    () =>
+      (config.jaundiceGradingAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.jaundiceGradingAnswers],
+  );
+
+  const cyanosisTypeOptions = useMemo(
+    () =>
+      (config.cyanosisTypeAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.cyanosisTypeAnswers],
+  );
+
+  const dehydrationTypeOptions = useMemo(
+    () =>
+      (config.dehydrationTypeAnswers || []).map((answer) => ({
+        id: answer.concept,
+        text: answer.label,
+      })),
+    [config.dehydrationTypeAnswers],
+  );
+
+  const fingerclubGradingOptions = useMemo(
+    () =>
+      (config.fingerclubGradingAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.fingerclubGradingAnswers],
+  );
+
+  const oedemaLocationOptions = useMemo(
+    () =>
+      (config.oedemaLocationAnswers || []).map((answer) => ({
+        id: answer.concept,
+        text: answer.label,
+      })),
+    [config.oedemaLocationAnswers],
+  );
+
+  const oedemaTypeOptions = useMemo(
+    () =>
+      (config.oedemaTypeAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.oedemaTypeAnswers],
+  );
+
+  const oedemaGradingOptions = useMemo(
+    () =>
+      (config.oedemaGradingAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.oedemaGradingAnswers],
+  );
+
+  const pallorLocationOptions = useMemo(
+    () =>
+      (config.pallorLocationAnswers || []).map((answer) => ({
+        id: answer.concept,
+        text: answer.label,
+      })),
+    [config.pallorLocationAnswers],
+  );
+
+  const pallorGradingOptions = useMemo(
+    () =>
+      (config.pallorGradingAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.pallorGradingAnswers],
+  );
+
+  const patientOutcomeOptions = useMemo(
+    () =>
+      (config.patientOutcomeAnswers || []).map((answer) => ({
+        uuid: answer.concept,
+        label: answer.label,
+      })),
+    [config.patientOutcomeAnswers],
+  );
+
+  const siteLymphadenopathyOptions = useMemo(
+    () =>
+      (config.siteLymphadenopathyAnswers || []).map((answer) => ({
+        id: answer.concept,
+        text: answer.label,
+      })),
+    [config.siteLymphadenopathyAnswers],
+  );
+
+  // Sections
+  const sections = [
+    { id: 0, label: t('symptoms', 'Symptoms') },
+    { id: 1, label: t('presentIllness', 'History of present illness') },
+    { id: 2, label: t('physicalExamination', 'Physical examination') },
+    { id: 3, label: t('diagnosis', 'Diagnosis') },
+    { id: 4, label: t('procedures', 'Procedures') },
+    { id: 5, label: t('laboratory', 'Laboratory') },
+    { id: 6, label: t('imaging', 'Imaging') },
+    { id: 7, label: t('notesInstructions', 'Notes/Instructions') },
+    { id: 8, label: t('outcome', 'Outcome') },
+  ];
+  // Computed values for Section 0
+  const hasCoughSymptom = useMemo(
+    () => symptoms?.some((symptom) => symptom.id === config.coughConceptUuid) || false,
+    [symptoms, config.coughConceptUuid],
+  );
+
+  const hasOtherSymptom = useMemo(
+    () => symptoms?.some((symptom) => symptom.id === OTHER_SYMPTOM_UUID) || false,
+    [symptoms],
+  );
+
+  // Computed values for Section 1
+  const hasSurgicalHistory = useMemo(
+    () => pastIllness?.some((illness) => illness.id === SURGICAL_HISTORY_UUID) || false,
+    [pastIllness],
+  );
+
+  const hasAdmissionHistory = useMemo(
+    () => pastIllness?.some((illness) => illness.id === ADMISSION_HISTORY_UUID) || false,
+    [pastIllness],
+  );
+
+  const hasOtherPastIllness = useMemo(
+    () => pastIllness?.some((illness) => illness.id === OTHER_PAST_ILLNESS_UUID) || false,
+    [pastIllness],
+  );
+
+  // Computed values for Section 2 - Physical Examination
+  const hasAbnormalGait = useMemo(
+    () => generalExamination?.some((exam) => exam.id === ABNORMAL_GAIT_UUID) || false,
+    [generalExamination],
+  );
+
+  const hasJaundice = useMemo(
+    () => generalExamination?.some((exam) => exam.id === JAUNDICE_UUID) || false,
+    [generalExamination],
+  );
+
+  const hasCyanosis = useMemo(
+    () => generalExamination?.some((exam) => exam.id === CYANOSIS_UUID) || false,
+    [generalExamination],
+  );
+
+  const hasDehydration = useMemo(
+    () => generalExamination?.some((exam) => exam.id === DEHYDRATION_UUID) || false,
+    [generalExamination],
+  );
+
+  const hasFingerClubbing = useMemo(
+    () => generalExamination?.some((exam) => exam.id === FINGER_CLUBBING_UUID) || false,
+    [generalExamination],
+  );
+
+  const hasOedema = useMemo(
+    () => generalExamination?.some((exam) => exam.id === OEDEMA_UUID) || false,
+    [generalExamination],
+  );
+
+  const hasPallor = useMemo(
+    () => generalExamination?.some((exam) => exam.id === PALLOR_UUID) || false,
+    [generalExamination],
+  );
+
+  const hasLymphadenopathy = useMemo(
+    () => generalExamination?.some((exam) => exam.id === LYMPHADENOPATHY_UUID) || false,
+    [generalExamination],
+  );
+
+  // Clear dependent fields for Section 0
+  useEffect(() => {
+    if (!hasCoughSymptom && getValues('tbContact')) {
+      setValue('tbContact', '');
+    }
+  }, [hasCoughSymptom, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasOtherSymptom && getValues('otherSymptomText')) {
+      setValue('otherSymptomText', '');
+    }
+  }, [hasOtherSymptom, setValue, getValues]);
+
+  useEffect(() => {
+    if ((!symptoms || symptoms.length === 0) && getValues('onsetStatus')) {
+      setValue('onsetStatus', '');
+    }
+  }, [symptoms, setValue, getValues]);
+
+  // Clear dependent fields for Section 1
+  useEffect(() => {
+    if (!hasSurgicalHistory && getValues('surgeryDetails')) {
+      setValue('surgeryDetails', '');
+    }
+  }, [hasSurgicalHistory, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasAdmissionHistory && getValues('admissionReason')) {
+      setValue('admissionReason', '');
+    }
+  }, [hasAdmissionHistory, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasOtherPastIllness && getValues('otherPastIllnessText')) {
+      setValue('otherPastIllnessText', '');
+    }
+  }, [hasOtherPastIllness, setValue, getValues]);
+
+  useEffect(() => {
+    if (medicationsTaken !== YES_ANSWER_UUID && getValues('medicationDetails')) {
+      setValue('medicationDetails', '');
+    }
+  }, [medicationsTaken, setValue, getValues]);
+
+  // Clear dependent fields for Section 2 - Physical Examination
+  useEffect(() => {
+    if (!hasAbnormalGait && getValues('gaitFinding')) {
+      setValue('gaitFinding', '');
+    }
+  }, [hasAbnormalGait, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasJaundice && getValues('jaundiceGrading')) {
+      setValue('jaundiceGrading', '');
+    }
+  }, [hasJaundice, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasCyanosis && getValues('cyanosisType')) {
+      setValue('cyanosisType', '');
+    }
+  }, [hasCyanosis, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasDehydration && getValues('dehydrationType')?.length) {
+      setValue('dehydrationType', []);
+    }
+  }, [hasDehydration, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasFingerClubbing && getValues('fingerclubGrading')) {
+      setValue('fingerclubGrading', '');
+    }
+  }, [hasFingerClubbing, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasOedema) {
+      if (getValues('oedemaLocation')?.length) {
+        setValue('oedemaLocation', []);
+      }
+      if (getValues('oedemaType')) {
+        setValue('oedemaType', '');
+      }
+      if (getValues('oedemaGrading')) {
+        setValue('oedemaGrading', '');
+      }
+    }
+  }, [hasOedema, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasPallor) {
+      if (getValues('pallorLocation')?.length) {
+        setValue('pallorLocation', []);
+      }
+      if (getValues('pallorGrading')) {
+        setValue('pallorGrading', '');
+      }
+    }
+  }, [hasPallor, setValue, getValues]);
+
+  useEffect(() => {
+    if (!hasLymphadenopathy && getValues('siteLymphadenopathy')?.length) {
+      setValue('siteLymphadenopathy', []);
+    }
+  }, [hasLymphadenopathy, setValue, getValues]);
+
+  // Handlers
+  const handleNext = async () => {
+    const fieldsToValidate: (keyof ClinicalEncounterFormData)[] = [];
+
+    if (currentSection === 0) {
+      fieldsToValidate.push('symptoms');
+      if (hasOtherSymptom) {
+        fieldsToValidate.push('otherSymptomText');
+      }
+    } else if (currentSection === 1) {
+      if (hasSurgicalHistory) {
+        fieldsToValidate.push('surgeryDetails');
+      }
+      if (hasAdmissionHistory) {
+        fieldsToValidate.push('admissionReason');
+      }
+      if (hasOtherPastIllness) {
+        fieldsToValidate.push('otherPastIllnessText');
+      }
+      if (medicationsTaken === YES_ANSWER_UUID) {
+        fieldsToValidate.push('medicationDetails');
+      }
+    } else if (currentSection === 2) {
+      if (hasAbnormalGait) {
+        fieldsToValidate.push('gaitFinding');
+      }
+      if (hasJaundice) {
+        fieldsToValidate.push('jaundiceGrading');
+      }
+      if (hasCyanosis) {
+        fieldsToValidate.push('cyanosisType');
+      }
+      if (hasDehydration) {
+        fieldsToValidate.push('dehydrationType');
+      }
+      if (hasFingerClubbing) {
+        fieldsToValidate.push('fingerclubGrading');
+      }
+      if (hasOedema) {
+        fieldsToValidate.push('oedemaLocation', 'oedemaType', 'oedemaGrading');
+      }
+      if (hasPallor) {
+        fieldsToValidate.push('pallorLocation', 'pallorGrading');
+      }
+      if (hasLymphadenopathy) {
+        fieldsToValidate.push('siteLymphadenopathy');
+      }
+    }
+
+    const isValid = fieldsToValidate.length > 0 ? await trigger(fieldsToValidate) : true;
+
+    if (isValid && currentSection < sections.length - 1) {
+      setCurrentSection(currentSection + 1);
+    }
+  };
+
+  const handleBack = () => {
+    if (currentSection > 0) {
+      setCurrentSection(currentSection - 1);
+    }
+  };
+
+  const onSubmit = (data: ClinicalEncounterFormData) => {
+    // TODO: Submit data to backend
+    closeWorkspace();
+  };
+
+  const handleError = (errors: any) => {
+    if (errors.symptoms || errors.otherSymptomText) {
+      setCurrentSection(0);
+    } else if (
+      errors.surgeryDetails ||
+      errors.admissionReason ||
+      errors.otherPastIllnessText ||
+      errors.medicationDetails
+    ) {
+      setCurrentSection(1);
+    } else if (
+      errors.gaitFinding ||
+      errors.jaundiceGrading ||
+      errors.cyanosisType ||
+      errors.dehydrationType ||
+      errors.fingerclubGrading ||
+      errors.oedemaLocation ||
+      errors.oedemaType ||
+      errors.oedemaGrading ||
+      errors.pallorLocation ||
+      errors.pallorGrading ||
+      errors.siteLymphadenopathy
+    ) {
+      setCurrentSection(2);
+    }
+  };
+
+  const isLastSection = currentSection === sections.length - 1;
+  const isFirstSection = currentSection === 0;
+
+  // Render section content
+  const renderSectionContent = () => {
+    switch (currentSection) {
+      case 0: // Symptoms
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('symptoms', 'Symptoms')}</h3>
+            <Stack gap={5}>
+              <Layer>
+                <Controller
+                  name="symptoms"
+                  control={control}
+                  render={({ field }) => {
+                    const currentSymptoms = field.value || [];
+                    return (
+                      <div className={styles.selectedSymptomsContainer}>
+                        {currentSymptoms.length > 0 && (
+                          <div className={styles.selectedSymptomsTags}>
+                            {currentSymptoms.map((item) => (
+                              <Tag
+                                key={item.id}
+                                type="cyan"
+                                filter
+                                onClose={() => {
+                                  const updatedSymptoms = currentSymptoms.filter((s) => s.id !== item.id);
+                                  field.onChange(updatedSymptoms);
+                                }}
+                                className={styles.selectedSymptomTag}>
+                                {item.text}
+                              </Tag>
+                            ))}
+                          </div>
+                        )}
+                        <FilterableMultiSelect
+                          id="symptoms-select"
+                          className={styles.symptomsMultiSelect}
+                          titleText={t('symptom', '* Symptoms')}
+                          placeholder={t('searchSymptom', 'Search and select symptoms')}
+                          items={symptomOptions}
+                          itemToString={(item) => (item ? item.text : '')}
+                          selectedItems={currentSymptoms}
+                          onChange={({ selectedItems }: { selectedItems: Array<GenericItem> }) => {
+                            field.onChange(selectedItems || []);
+                          }}
+                          invalid={!!errors.symptoms}
+                          invalidText={errors.symptoms?.message}
+                        />
+                      </div>
+                    );
+                  }}
+                />
+              </Layer>
+
+              {symptoms && symptoms.length > 0 && (
+                <Layer>
+                  <Controller
+                    name="onsetStatus"
+                    control={control}
+                    render={({ field }) => (
+                      <RadioButtonGroup
+                        legendText={t('onsetStatus', 'Onset of symptoms')}
+                        name="onsetStatus"
+                        valueSelected={field.value || ''}
+                        onChange={field.onChange}>
+                        {onsetStatusAnswers.map((answer) => (
+                          <RadioButton
+                            key={answer.uuid}
+                            labelText={answer.label}
+                            value={answer.uuid}
+                            id={`onset-${answer.uuid}`}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                    )}
+                  />
+                </Layer>
+              )}
+
+              {hasCoughSymptom && !isLoadingTbAnswers && (
+                <Layer>
+                  <Controller
+                    name="tbContact"
+                    control={control}
+                    render={({ field }) => (
+                      <RadioButtonGroup
+                        legendText={t(
+                          'tbContactQuestion',
+                          'In the past 12 months, have you been in close contact with anyone who has active tuberculosis (TB)?',
+                        )}
+                        name="tbContact"
+                        valueSelected={field.value || ''}
+                        onChange={field.onChange}>
+                        {tbContactAnswers.map((answer) => (
+                          <RadioButton
+                            key={answer.uuid}
+                            labelText={answer.display}
+                            value={answer.uuid}
+                            id={`tb-${answer.uuid}`}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                    )}
+                  />
+                </Layer>
+              )}
+
+              {hasOtherSymptom && (
+                <Controller
+                  name="otherSymptomText"
+                  control={control}
+                  render={({ field }) => (
+                    <TextArea
+                      id="other-symptom-details"
+                      labelText={t('specifyOtherSymptom', '* Specify other symptom(s)')}
+                      placeholder={t('enterSymptomDetails', 'Enter details about the other symptom(s)')}
+                      value={field.value || ''}
+                      onChange={(e) => field.onChange(e.target.value)}
+                      onBlur={field.onBlur}
+                      invalid={!!errors.otherSymptomText}
+                      invalidText={errors.otherSymptomText?.message}
+                      rows={3}
+                    />
+                  )}
+                />
+              )}
+            </Stack>
+          </div>
+        );
+
+      case 1: // History of present illness
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('presentIllness', 'History of present illness')}</h3>
+            <Stack gap={5}>
+              <Layer>
+                <Controller
+                  name="pastIllness"
+                  control={control}
+                  render={({ field }) => {
+                    const currentPastIllness = field.value || [];
+                    return (
+                      <div className={styles.selectedSymptomsContainer}>
+                        {currentPastIllness.length > 0 && (
+                          <div className={styles.selectedSymptomsTags}>
+                            {currentPastIllness.map((item) => (
+                              <Tag
+                                key={item.id}
+                                type="cyan"
+                                filter
+                                onClose={() => {
+                                  const updatedIllness = currentPastIllness.filter((s) => s.id !== item.id);
+                                  field.onChange(updatedIllness);
+                                }}
+                                className={styles.selectedSymptomTag}>
+                                {item.text}
+                              </Tag>
+                            ))}
+                          </div>
+                        )}
+                        <FilterableMultiSelect
+                          id="past-illness-select"
+                          className={styles.symptomsMultiSelect}
+                          titleText={t('pastIllness', 'Past Illness')}
+                          placeholder={t('selectPastIllness', 'Select past illness')}
+                          items={pastIllnessOptions}
+                          itemToString={(item) => (item ? item.text : '')}
+                          selectedItems={currentPastIllness}
+                          onChange={({ selectedItems }: { selectedItems: Array<GenericItem> }) => {
+                            field.onChange(selectedItems || []);
+                          }}
+                        />
+                      </div>
+                    );
+                  }}
+                />
+              </Layer>
+
+              {hasSurgicalHistory && (
+                <Controller
+                  name="surgeryDetails"
+                  control={control}
+                  render={({ field }) => (
+                    <TextArea
+                      id="surgery-details"
+                      className={styles.textAreaInput}
+                      labelText={t('surgeryPerformed', '* Surgery performed')}
+                      placeholder={t('addSurgeryDetails', 'Add details of surgery performed')}
+                      value={field.value || ''}
+                      onChange={(e) => field.onChange(e.target.value)}
+                      onBlur={field.onBlur}
+                      invalid={!!errors.surgeryDetails}
+                      invalidText={errors.surgeryDetails?.message}
+                      rows={4}
+                    />
+                  )}
+                />
+              )}
+
+              {hasAdmissionHistory && (
+                <Controller
+                  name="admissionReason"
+                  control={control}
+                  render={({ field }) => (
+                    <TextArea
+                      id="admission-reason"
+                      className={styles.textAreaInput}
+                      labelText={t('reasonForAdmission', '* Reason for admission')}
+                      placeholder={t('addReasonForAdmission', 'Add reason for admission')}
+                      value={field.value || ''}
+                      onChange={(e) => field.onChange(e.target.value)}
+                      onBlur={field.onBlur}
+                      invalid={!!errors.admissionReason}
+                      invalidText={errors.admissionReason?.message}
+                      rows={4}
+                    />
+                  )}
+                />
+              )}
+
+              {hasOtherPastIllness && (
+                <Controller
+                  name="otherPastIllnessText"
+                  control={control}
+                  render={({ field }) => (
+                    <TextArea
+                      id="other-past-illness"
+                      className={styles.textAreaInput}
+                      labelText={t('specifyOtherIllness', '* Specify other illness')}
+                      placeholder={t('enterOtherIllnessDetails', 'Enter details about the other illness')}
+                      value={field.value || ''}
+                      onChange={(e) => field.onChange(e.target.value)}
+                      onBlur={field.onBlur}
+                      invalid={!!errors.otherPastIllnessText}
+                      invalidText={errors.otherPastIllnessText?.message}
+                      rows={4}
+                    />
+                  )}
+                />
+              )}
+
+              <Layer>
+                <Controller
+                  name="medicationsTaken"
+                  control={control}
+                  render={({ field }) => (
+                    <RadioButtonGroup
+                      legendText={t(
+                        'medicationsTakenQuestion',
+                        'Have you taken any prescription or over-the-counter medications, or herbal remedies before this visit?',
+                      )}
+                      name="medicationsTaken"
+                      className={styles.radioButtonGroup}
+                      valueSelected={field.value || ''}
+                      onChange={field.onChange}>
+                      {tbContactAnswers.map((answer) => (
+                        <RadioButton
+                          key={answer.uuid}
+                          labelText={answer.display}
+                          value={answer.uuid}
+                          id={`medications-${answer.uuid}`}
+                        />
+                      ))}
+                    </RadioButtonGroup>
+                  )}
+                />
+              </Layer>
+
+              {medicationsTaken === YES_ANSWER_UUID && (
+                <Controller
+                  name="medicationDetails"
+                  control={control}
+                  render={({ field }) => (
+                    <TextArea
+                      id="medications-details"
+                      className={styles.textAreaInput}
+                      labelText={t('medicationsTaken', '* Medications taken')}
+                      placeholder={t('addMedicationsTaken', 'Add medications taken')}
+                      value={field.value || ''}
+                      onChange={(e) => field.onChange(e.target.value)}
+                      onBlur={field.onBlur}
+                      invalid={!!errors.medicationDetails}
+                      invalidText={errors.medicationDetails?.message}
+                      rows={3}
+                    />
+                  )}
+                />
+              )}
+            </Stack>
+          </div>
+        );
+
+      case 2: // Physical Examination
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('physicalExamination', 'Physical Examination')}</h3>
+            <Stack gap={5}>
+              <Layer>
+                <Controller
+                  name="generalExamination"
+                  control={control}
+                  render={({ field }) => {
+                    const currentExamination = field.value || [];
+                    return (
+                      <div className={styles.selectedSymptomsContainer}>
+                        {currentExamination.length > 0 && (
+                          <div className={styles.selectedSymptomsTags}>
+                            {currentExamination.map((item) => (
+                              <Tag
+                                key={item.id}
+                                type="cyan"
+                                filter
+                                onClose={() => {
+                                  const updatedExamination = currentExamination.filter((e) => e.id !== item.id);
+                                  field.onChange(updatedExamination);
+                                }}
+                                className={styles.selectedSymptomTag}>
+                                {item.text}
+                              </Tag>
+                            ))}
+                          </div>
+                        )}
+                        <FilterableMultiSelect
+                          id="general-examination-select"
+                          className={styles.symptomsMultiSelect}
+                          titleText={t('generalExamination', 'General Examination')}
+                          placeholder={t('selectGeneralExamination', 'Select general examination findings')}
+                          items={generalExaminationOptions}
+                          itemToString={(item) => (item ? item.text : '')}
+                          selectedItems={currentExamination}
+                          onChange={({ selectedItems }: { selectedItems: Array<GenericItem> }) => {
+                            field.onChange(selectedItems || []);
+                          }}
+                        />
+                      </div>
+                    );
+                  }}
+                />
+              </Layer>
+
+              {/* Abnormal Gait */}
+              {hasAbnormalGait && (
+                <Layer>
+                  <Controller
+                    name="gaitFinding"
+                    control={control}
+                    render={({ field }) => (
+                      <RadioButtonGroup
+                        legendText={t('gaitFinding', '* Gait Finding')}
+                        name="gaitFinding"
+                        orientation="vertical"
+                        valueSelected={field.value || ''}
+                        onChange={field.onChange}>
+                        {gaitFindingOptions.map((option) => (
+                          <RadioButton
+                            key={option.uuid}
+                            className={styles.radioButtonOption}
+                            labelText={option.label}
+                            value={option.uuid}
+                            id={`gait-${option.uuid}`}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                    )}
+                  />
+                  {errors.gaitFinding && <div className={styles.errorText}>{errors.gaitFinding.message}</div>}
+                </Layer>
+              )}
+
+              {/* Jaundice */}
+              {hasJaundice && (
+                <Layer>
+                  <Controller
+                    name="jaundiceGrading"
+                    control={control}
+                    render={({ field }) => (
+                      <RadioButtonGroup
+                        legendText={t('jaundiceGrading', '* Jaundice Grading')}
+                        name="jaundiceGrading"
+                        orientation="vertical"
+                        valueSelected={field.value || ''}
+                        onChange={field.onChange}>
+                        {jaundiceGradingOptions.map((option) => (
+                          <RadioButton
+                            key={option.uuid}
+                            className={styles.radioButtonOption}
+                            labelText={option.label}
+                            value={option.uuid}
+                            id={`jaundice-${option.uuid}`}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                    )}
+                  />
+                  {errors.jaundiceGrading && <div className={styles.errorText}>{errors.jaundiceGrading.message}</div>}
+                </Layer>
+              )}
+
+              {/* Cyanosis */}
+              {hasCyanosis && (
+                <Layer>
+                  <Controller
+                    name="cyanosisType"
+                    control={control}
+                    render={({ field }) => (
+                      <RadioButtonGroup
+                        legendText={t('cyanosisType', '* Cyanosis Type')}
+                        name="cyanosisType"
+                        orientation="vertical"
+                        valueSelected={field.value || ''}
+                        onChange={field.onChange}>
+                        {cyanosisTypeOptions.map((option) => (
+                          <RadioButton
+                            key={option.uuid}
+                            labelText={option.label}
+                            className={styles.radioButtonOption}
+                            value={option.uuid}
+                            id={`cyanosis-${option.uuid}`}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                    )}
+                  />
+                  {errors.cyanosisType && <div className={styles.errorText}>{errors.cyanosisType.message}</div>}
+                </Layer>
+              )}
+
+              {/* Dehydration */}
+              {hasDehydration && (
+                <Layer>
+                  <Controller
+                    name="dehydrationType"
+                    control={control}
+                    render={({ field }) => {
+                      const currentDehydration = field.value || [];
+                      return (
+                        <div className={styles.selectedSymptomsContainer}>
+                          {currentDehydration.length > 0 && (
+                            <div className={styles.selectedSymptomsTags}>
+                              {currentDehydration.map((item) => (
+                                <Tag
+                                  key={item.id}
+                                  type="cyan"
+                                  filter
+                                  onClose={() => {
+                                    const updated = currentDehydration.filter((d) => d.id !== item.id);
+                                    field.onChange(updated);
+                                  }}
+                                  className={styles.selectedSymptomTag}>
+                                  {item.text}
+                                </Tag>
+                              ))}
+                            </div>
+                          )}
+                          <FilterableMultiSelect
+                            id="dehydration-type-select"
+                            className={styles.symptomsMultiSelect}
+                            titleText={t('dehydrationType', '* Dehydration Type')}
+                            placeholder={t('selectDehydrationType', 'Select dehydration type')}
+                            items={dehydrationTypeOptions}
+                            itemToString={(item) => (item ? item.text : '')}
+                            selectedItems={currentDehydration}
+                            onChange={({ selectedItems }: { selectedItems: Array<GenericItem> }) => {
+                              field.onChange(selectedItems || []);
+                            }}
+                            invalid={!!errors.dehydrationType}
+                            invalidText={errors.dehydrationType?.message}
+                          />
+                        </div>
+                      );
+                    }}
+                  />
+                </Layer>
+              )}
+
+              {/* Finger Clubbing */}
+              {hasFingerClubbing && (
+                <Layer>
+                  <Controller
+                    name="fingerclubGrading"
+                    control={control}
+                    render={({ field }) => (
+                      <RadioButtonGroup
+                        legendText={t('fingerclubGrading', '* Finger Clubbing Grading')}
+                        name="fingerclubGrading"
+                        valueSelected={field.value || ''}
+                        orientation="vertical"
+                        className={styles.radioButtonOption}
+                        onChange={field.onChange}>
+                        {fingerclubGradingOptions.map((option) => (
+                          <RadioButton
+                            key={option.uuid}
+                            labelText={option.label}
+                            value={option.uuid}
+                            id={`fingerclub-${option.uuid}`}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                    )}
+                  />
+                  {errors.fingerclubGrading && (
+                    <div className={styles.errorText}>{errors.fingerclubGrading.message}</div>
+                  )}
+                </Layer>
+              )}
+
+              {/* Oedema */}
+              {hasOedema && (
+                <>
+                  <Layer>
+                    <Controller
+                      name="oedemaLocation"
+                      control={control}
+                      render={({ field }) => {
+                        const currentLocation = field.value || [];
+                        return (
+                          <div className={styles.selectedSymptomsContainer}>
+                            {currentLocation.length > 0 && (
+                              <div className={styles.selectedSymptomsTags}>
+                                {currentLocation.map((item) => (
+                                  <Tag
+                                    key={item.id}
+                                    type="cyan"
+                                    filter
+                                    onClose={() => {
+                                      const updated = currentLocation.filter((l) => l.id !== item.id);
+                                      field.onChange(updated);
+                                    }}
+                                    className={styles.selectedSymptomTag}>
+                                    {item.text}
+                                  </Tag>
+                                ))}
+                              </div>
+                            )}
+                            <FilterableMultiSelect
+                              id="oedema-location-select"
+                              className={styles.symptomsMultiSelect}
+                              titleText={t('oedemaLocation', '* Oedema Location')}
+                              placeholder={t('selectOedemaLocation', 'Select oedema location')}
+                              items={oedemaLocationOptions}
+                              itemToString={(item) => (item ? item.text : '')}
+                              selectedItems={currentLocation}
+                              onChange={({ selectedItems }: { selectedItems: Array<GenericItem> }) => {
+                                field.onChange(selectedItems || []);
+                              }}
+                              invalid={!!errors.oedemaLocation}
+                              invalidText={errors.oedemaLocation?.message}
+                            />
+                          </div>
+                        );
+                      }}
+                    />
+                  </Layer>
+
+                  <Layer>
+                    <Controller
+                      name="oedemaType"
+                      control={control}
+                      render={({ field }) => (
+                        <RadioButtonGroup
+                          legendText={t('oedemaType', '* Oedema Type')}
+                          name="oedemaType"
+                          valueSelected={field.value || ''}
+                          onChange={field.onChange}>
+                          orientation="vertical"
+                          {oedemaTypeOptions.map((option) => (
+                            <RadioButton
+                              key={option.uuid}
+                              labelText={option.label}
+                              value={option.uuid}
+                              id={`oedema-type-${option.uuid}`}
+                            />
+                          ))}
+                        </RadioButtonGroup>
+                      )}
+                    />
+                    {errors.oedemaType && <div className={styles.errorText}>{errors.oedemaType.message}</div>}
+                  </Layer>
+
+                  <Layer>
+                    <Controller
+                      name="oedemaGrading"
+                      control={control}
+                      render={({ field }) => (
+                        <RadioButtonGroup
+                          legendText={t('oedemaGrading', '* Oedema Grading')}
+                          name="oedemaGrading"
+                          orientation="vertical"
+                          valueSelected={field.value || ''}
+                          onChange={field.onChange}>
+                          {oedemaGradingOptions.map((option) => (
+                            <RadioButton
+                              key={option.uuid}
+                              labelText={option.label}
+                              value={option.uuid}
+                              id={`oedema-grading-${option.uuid}`}
+                              className={styles.radioButtonOption}
+                            />
+                          ))}
+                        </RadioButtonGroup>
+                      )}
+                    />
+                    {errors.oedemaGrading && <div className={styles.errorText}>{errors.oedemaGrading.message}</div>}
+                  </Layer>
+                </>
+              )}
+
+              {/* Pallor */}
+              {hasPallor && (
+                <>
+                  <Layer>
+                    <Controller
+                      name="pallorLocation"
+                      control={control}
+                      render={({ field }) => {
+                        const currentLocation = field.value || [];
+                        return (
+                          <div className={styles.selectedSymptomsContainer}>
+                            {currentLocation.length > 0 && (
+                              <div className={styles.selectedSymptomsTags}>
+                                {currentLocation.map((item) => (
+                                  <Tag
+                                    key={item.id}
+                                    type="cyan"
+                                    filter
+                                    onClose={() => {
+                                      const updated = currentLocation.filter((l) => l.id !== item.id);
+                                      field.onChange(updated);
+                                    }}
+                                    className={styles.selectedSymptomTag}>
+                                    {item.text}
+                                  </Tag>
+                                ))}
+                              </div>
+                            )}
+                            <FilterableMultiSelect
+                              id="pallor-location-select"
+                              className={styles.symptomsMultiSelect}
+                              titleText={t('pallorLocation', '* Pallor Location')}
+                              placeholder={t('selectPallorLocation', 'Select pallor location')}
+                              items={pallorLocationOptions}
+                              itemToString={(item) => (item ? item.text : '')}
+                              selectedItems={currentLocation}
+                              onChange={({ selectedItems }: { selectedItems: Array<GenericItem> }) => {
+                                field.onChange(selectedItems || []);
+                              }}
+                              invalid={!!errors.pallorLocation}
+                              invalidText={errors.pallorLocation?.message}
+                            />
+                          </div>
+                        );
+                      }}
+                    />
+                  </Layer>
+
+                  <Layer>
+                    <Controller
+                      name="pallorGrading"
+                      control={control}
+                      render={({ field }) => (
+                        <RadioButtonGroup
+                          legendText={t('pallorGrading', '* Pallor Grading')}
+                          name="pallorGrading"
+                          orientation="vertical"
+                          valueSelected={field.value || ''}
+                          onChange={field.onChange}>
+                          {pallorGradingOptions.map((option) => (
+                            <RadioButton
+                              key={option.uuid}
+                              labelText={option.label}
+                              value={option.uuid}
+                              className={styles.radioButtonOption}
+                              id={`pallor-grading-${option.uuid}`}
+                            />
+                          ))}
+                        </RadioButtonGroup>
+                      )}
+                    />
+                    {errors.pallorGrading && <div className={styles.errorText}>{errors.pallorGrading.message}</div>}
+                  </Layer>
+                </>
+              )}
+
+              {/* Lymphadenopathy */}
+              {hasLymphadenopathy && (
+                <Layer>
+                  <Controller
+                    name="siteLymphadenopathy"
+                    control={control}
+                    render={({ field }) => {
+                      const currentSite = field.value || [];
+                      return (
+                        <div className={styles.selectedSymptomsContainer}>
+                          {currentSite.length > 0 && (
+                            <div className={styles.selectedSymptomsTags}>
+                              {currentSite.map((item) => (
+                                <Tag
+                                  key={item.id}
+                                  type="cyan"
+                                  filter
+                                  onClose={() => {
+                                    const updated = currentSite.filter((s) => s.id !== item.id);
+                                    field.onChange(updated);
+                                  }}
+                                  className={styles.selectedSymptomTag}>
+                                  {item.text}
+                                </Tag>
+                              ))}
+                            </div>
+                          )}
+                          <FilterableMultiSelect
+                            id="lymphadenopathy-site-select"
+                            className={styles.symptomsMultiSelect}
+                            titleText={t('siteLymphadenopathy', '* Lymphadenopathy Site')}
+                            placeholder={t('selectLymphadenopathySite', 'Select lymphadenopathy site')}
+                            items={siteLymphadenopathyOptions}
+                            itemToString={(item) => (item ? item.text : '')}
+                            selectedItems={currentSite}
+                            onChange={({ selectedItems }: { selectedItems: Array<GenericItem> }) => {
+                              field.onChange(selectedItems || []);
+                            }}
+                            invalid={!!errors.siteLymphadenopathy}
+                            invalidText={errors.siteLymphadenopathy?.message}
+                          />
+                        </div>
+                      );
+                    }}
+                  />
+                </Layer>
+              )}
+              <Controller
+                name="generalExaminationNotes"
+                control={control}
+                render={({ field }) => (
+                  <TextArea
+                    id="general-examination-notes"
+                    labelText={t('generalExaminationNotes', 'Additional Notes')}
+                    placeholder={t(
+                      'enterGeneralExaminationNotes',
+                      'Enter any additional notes or observations from the physical examination',
+                    )}
+                    value={field.value || ''}
+                    onChange={(e) => field.onChange(e.target.value)}
+                    onBlur={field.onBlur}
+                    rows={4}
+                  />
+                )}
+              />
+            </Stack>
+          </div>
+        );
+      case 3: // Diagnosis
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('diagnosis', 'Diagnosis')}</h3>
+            <Stack gap={5}>
+              {/* Primary Diagnosis */}
+              <Controller
+                name="primaryDiagnosis"
+                control={control}
+                render={({ field }) => (
+                  <DiagnosisAutosuggest
+                    id="primary-diagnosis"
+                    labelText={t('primaryDiagnosis', 'Primary Diagnosis')}
+                    placeholder={t('searchPrimaryDiagnosis', 'Search and select primary diagnosis')}
+                    selectedDiagnoses={(field.value || []) as Array<GenericItem>}
+                    onChange={field.onChange}
+                    invalid={!!errors.primaryDiagnosis}
+                    invalidText={errors.primaryDiagnosis?.message}
+                  />
+                )}
+              />
+
+              {/* Secondary Diagnosis */}
+              <Controller
+                name="secondaryDiagnosis"
+                control={control}
+                render={({ field }) => (
+                  <DiagnosisAutosuggest
+                    id="secondary-diagnosis"
+                    labelText={t('secondaryDiagnosis', 'Secondary Diagnosis (Optional)')}
+                    placeholder={t('searchSecondaryDiagnosis', 'Search and select secondary diagnosis')}
+                    selectedDiagnoses={(field.value || []) as Array<GenericItem>}
+                    onChange={field.onChange}
+                    invalid={!!errors.secondaryDiagnosis}
+                    invalidText={errors.secondaryDiagnosis?.message}
+                  />
+                )}
+              />
+
+              <Controller
+                name="diagnosisNotes"
+                control={control}
+                render={({ field }) => (
+                  <TextArea
+                    id="diagnosis-notes"
+                    labelText={t('anyAdditionalNotes', 'Any Additional Notes')}
+                    placeholder={t('enterAnyAdditionalNotes', 'Enter any additional notes')}
+                    value={field.value || ''}
+                    onChange={(e) => field.onChange(e.target.value)}
+                    onBlur={field.onBlur}
+                    rows={4}
+                  />
+                )}
+              />
+            </Stack>
+          </div>
+        );
+
+      case 4: // Procedures
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('procedures', 'Procedures')}</h3>
+            <BillableServicesSelector
+              control={control}
+              fieldName="procedures"
+              key="procedures-selector" // 👈 ADD THIS
+              lineItems={procedureOptionsWithPrices}
+              isLoading={procedureServices.isLoading}
+              paymentInfo={paymentInfo}
+              title={t('searchProcedures', 'Search procedures')}
+              searchPlaceholder={t('searchAndSelectProcedures', 'Search and select procedures')}
+              errors={errors.procedures}
+            />
+          </div>
+        );
+
+      case 5: // Laboratory
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('laboratory', 'Laboratory Tests')}</h3>
+            <BillableServicesSelector
+              key="lab-selector" // 👈 ADD THIS
+              control={control}
+              fieldName="labTests"
+              lineItems={labOptionsWithPrices}
+              isLoading={labServices.isLoading}
+              paymentInfo={paymentInfo}
+              title={t('searchLabTests', 'Search laboratory tests')}
+              searchPlaceholder={t('searchAndSelectLabTests', 'Search and select laboratory tests')}
+              errors={errors.labTests}
+            />
+          </div>
+        );
+
+      case 6: // Imaging
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('imaging', 'Imaging Studies')}</h3>
+            <BillableServicesSelector
+              control={control}
+              key="imaging-selector" // 👈 ADD THIS
+              fieldName="imagingTests"
+              lineItems={imagingOptionsWithPrices}
+              isLoading={imagingServices.isLoading}
+              paymentInfo={paymentInfo}
+              title={t('searchImagingTests', 'Search imaging studies')}
+              searchPlaceholder={t('searchAndSelectImagingTests', 'Search and select imaging studies')}
+              errors={errors.imagingTests}
+            />
+          </div>
+        );
+      case 7: // Notes/Instructions
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('notesInstructions', 'Notes/Instructions')}</h3>
+            <Controller
+              name="notes"
+              control={control}
+              render={({ field }) => (
+                <TextArea
+                  id="notes-instructions"
+                  labelText={t('notesInstructions', 'Notes/Instructions')}
+                  placeholder={t(
+                    'enterNotesInstructions',
+                    'Enter any additional notes or instructions for the patient',
+                  )}
+                  value={field.value || ''}
+                  onChange={(e) => field.onChange(e.target.value)}
+                  onBlur={field.onBlur}
+                  rows={6}
+                />
+              )}
+            />
+          </div>
+        );
+
+      case 8:
+        return (
+          <div className={styles.sectionContent}>
+            <h3 className={styles.sectionTitle}>{t('outcome', 'Outcome')}</h3>
+            <Layer>
+              <Controller
+                name="patientOutcome"
+                control={control}
+                render={({ field }) => (
+                  <RadioButtonGroup
+                    legendText={t('patientOutcome', '* Patient Outcome')}
+                    name="patientOutcome"
+                    orientation="vertical"
+                    valueSelected={field.value || ''}
+                    onChange={field.onChange}>
+                    {patientOutcomeOptions?.map((option) => (
+                      <RadioButton
+                        key={option.uuid}
+                        labelText={option.label}
+                        value={option.uuid}
+                        className={styles.radioButtonOption}
+                        id={`pallor-grading-${option.uuid}`}
+                      />
+                    ))}
+                  </RadioButtonGroup>
+                )}
+              />
+              {errors.pallorGrading && <div className={styles.errorText}>{errors.pallorGrading.message}</div>}
+            </Layer>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={styles.workspaceWrapper}>
+      <div className={styles.patientHeader}>
+        <span className={styles.patientName}>{capitalize(person?.display)}</span>
+        <span className={styles.patientDetails}>· {openmrsId} </span>
+        <span className={styles.patientDetails}>
+          · {person?.gender} · {person?.age} {t('years', 'yrs')}
+        </span>
+      </div>
+      <div className={styles.workspaceContainer}>
+        <div className={styles.sidebar}>
+          <TreeView
+            key={currentSection}
+            label={t('clinicalEncounter', 'Clinical Encounter')}
+            selected={[currentSection.toString()]}
+            active={currentSection.toString()}
+            hideLabel
+            className={styles.treeView}>
+            {sections.map((section) => (
+              <TreeNode
+                key={section.id}
+                id={section.id.toString()}
+                label={section.label}
+                onClick={() => setCurrentSection(section.id)}
+                isSelected={currentSection === section.id}
+              />
+            ))}
+          </TreeView>
+        </div>
+        <div className={styles.mainContent}>
+          <Form
+            className={styles.formWrapper}
+            data-openmrs-role="clinical-encounter-form"
+            onSubmit={handleFormSubmit(onSubmit, handleError)}>
+            <div className={styles.formContent}>{renderSectionContent()}</div>
+
+            <div className={styles.navigationButtons}>
+              {isLastSection ? (
+                <ButtonSet className={styles.buttonSet}>
+                  <Button kind="secondary" className={styles.button} size="lg" onClick={() => closeWorkspace()}>
+                    {t('discard', 'Discard')}
+                  </Button>
+                  <Button className={styles.button} kind="primary" size="lg" type="submit" disabled={isSubmitting}>
+                    {t('saveAndClose', 'Save and close')}
+                  </Button>
+                </ButtonSet>
+              ) : (
+                <ButtonSet className={styles.buttonSet}>
+                  <Button
+                    className={styles.button}
+                    kind="secondary"
+                    size="lg"
+                    onClick={handleBack}
+                    disabled={isFirstSection}>
+                    {t('back', 'Back')}
+                  </Button>
+                  <Button className={styles.button} kind="primary" size="lg" onClick={handleNext}>
+                    {t('next', 'Next')}
+                  </Button>
+                </ButtonSet>
+              )}
+            </div>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClinicalEncounterWorkspace;