@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2716 → 5.4.2-pre.2722

package/src/maternal-and-child-health/partography/forms/fetal-heart-rate-form.component.tsx

@@ -0,0 +1,275 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { Modal, Grid, Column, NumberInput, Select, SelectItem, InlineNotification } from '@carbon/react';
+import { saveFetalHeartRateData } from '../resources/fetal-heart-rate.resource';
+import TimePickerDropdown from './time-picker-dropdown.component';
+import styles from '../partography-data-form.scss';
+
+type FetalHeartRateFormData = {
+  hour: string;
+  time: string;
+  fetalHeartRate: string;
+};
+
+type FetalHeartRateFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: { hour: number; time: string; fetalHeartRate: number }) => void;
+  onDataSaved?: () => void;
+  selectedHours?: number[];
+  existingTimeEntries?: Array<{ hour: number; time: string }>;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+};
+
+const FetalHeartRateForm: React.FC<FetalHeartRateFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  onDataSaved,
+  selectedHours = [],
+  existingTimeEntries = [],
+  patient,
+}) => {
+  const { t } = useTranslation();
+  const [isSaving, setIsSaving] = React.useState(false);
+  const [saveError, setSaveError] = React.useState<string | null>(null);
+  const [saveSuccess, setSaveSuccess] = React.useState(false);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useForm<FetalHeartRateFormData>({
+    defaultValues: {
+      hour: '',
+      time: '',
+      fetalHeartRate: '',
+    },
+  });
+  const generateHourOptions = () => {
+    const options = [];
+    for (let i = 0; i <= 24; i++) {
+      if (i === 0) {
+        options.push({ value: '0.5', label: '30min' });
+      } else {
+        options.push({ value: i.toString(), label: `${i}hr` });
+      }
+      if (i < 24) {
+        const halfHourValue = (i + 0.5).toString();
+        const halfHourLabel = i === 0 ? '1hr' : `${i}hr 30min`;
+        options.push({ value: halfHourValue, label: halfHourLabel });
+      }
+    }
+    return options;
+  };
+
+  const hourOptions = generateHourOptions();
+
+  const handleFormSubmit = async (data: FetalHeartRateFormData) => {
+    const hourValue = parseFloat(data.hour);
+    const fetalHeartRateValue = parseInt(data.fetalHeartRate);
+
+    clearErrors();
+    setSaveError(null);
+    setSaveSuccess(false);
+
+    if (!data.hour || isNaN(hourValue) || hourValue < 0 || hourValue > 24) {
+      setError('hour', { type: 'manual', message: t('hourRequired', 'Please select a valid hour') });
+      return;
+    }
+    if (!data.time || data.time.trim() === '') {
+      setError('time', { type: 'manual', message: t('timeRequired', 'Time is required') });
+      return;
+    }
+    if (!data.fetalHeartRate || isNaN(fetalHeartRateValue)) {
+      setError('fetalHeartRate', {
+        type: 'manual',
+        message: t('fetalHeartRateRequired', 'Fetal heart rate is required'),
+      });
+      return;
+    }
+    if (fetalHeartRateValue < 80) {
+      setError('fetalHeartRate', {
+        type: 'manual',
+        message: t('fetalHeartRateTooLow', 'Fetal heart rate is too low. Minimum is 80 bpm'),
+      });
+      return;
+    }
+
+    if (fetalHeartRateValue > 200) {
+      setError('fetalHeartRate', {
+        type: 'manual',
+        message: t('fetalHeartRateTooHigh', 'Fetal heart rate is too high. Maximum is 200 bpm'),
+      });
+      return;
+    }
+
+    if (patient?.uuid) {
+      setIsSaving(true);
+      try {
+        const result = await saveFetalHeartRateData(
+          patient.uuid,
+          {
+            hour: hourValue,
+            time: data.time,
+            fetalHeartRate: fetalHeartRateValue,
+          },
+          t,
+        );
+
+        if (result.success) {
+          setSaveSuccess(true);
+          if (onDataSaved) {
+            onDataSaved();
+          }
+          onSubmit({
+            hour: hourValue,
+            time: data.time,
+            fetalHeartRate: fetalHeartRateValue,
+          });
+          reset();
+          setTimeout(() => {
+            setSaveSuccess(false);
+            onClose();
+          }, 1500);
+        } else {
+          setSaveError(result.message || t('saveError', 'Failed to save data'));
+        }
+      } catch (error) {
+        setSaveError(error?.message || t('saveError', 'Failed to save data'));
+      } finally {
+        setIsSaving(false);
+      }
+    } else {
+      onSubmit({
+        hour: hourValue,
+        time: data.time,
+        fetalHeartRate: fetalHeartRateValue,
+      });
+      reset();
+    }
+  };
+
+  const handleClose = () => {
+    reset();
+    clearErrors();
+    setSaveError(null);
+    setSaveSuccess(false);
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      modalHeading={t('fetalHeartRateData', 'Foetal Heart Rate Data')}
+      modalLabel=""
+      primaryButtonText={isSaving ? t('saving', 'Saving...') : t('save', 'Save')}
+      primaryButtonDisabled={isSaving}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSubmit(handleFormSubmit)}
+      onSecondarySubmit={handleClose}
+      className={styles.cervixModal}
+      size="md">
+      {saveSuccess && (
+        <InlineNotification
+          kind="success"
+          title={t('saveSuccess', 'Data saved successfully')}
+          subtitle={t('fetalHeartRateDataSaved', 'Fetal heart rate data has been saved')}
+          hideCloseButton
+        />
+      )}
+
+      {saveError && (
+        <InlineNotification
+          kind="error"
+          title={t('saveError', 'Error saving data')}
+          subtitle={saveError}
+          onCloseButtonClick={() => setSaveError(null)}
+        />
+      )}
+
+      <Grid className={styles.formGrid}>
+        <Column lg={8} md={4} sm={2}>
+          <div className={styles.formField}>
+            <Controller
+              name="hour"
+              control={control}
+              render={({ field, fieldState }) => (
+                <Select
+                  id="hour-select"
+                  labelText={t('hour', 'Hour')}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  value={field.value}
+                  onChange={(e) => field.onChange(e.target.value)}>
+                  <SelectItem value="" text={t('admissionTime', 'Admission')} />
+                  {hourOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value} text={option.label} />
+                  ))}
+                </Select>
+              )}
+            />
+          </div>
+        </Column>
+
+        <Column lg={8} md={4} sm={2}>
+          <div className={styles.formField}>
+            <Controller
+              name="time"
+              control={control}
+              render={({ field, fieldState }) => (
+                <div>
+                  <label className={styles.fieldLabel}>{t('time', 'Time')}</label>
+                  <TimePickerDropdown
+                    id="time-picker"
+                    labelText=""
+                    value={field.value}
+                    onChange={field.onChange}
+                    existingTimeEntries={existingTimeEntries}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                  />
+                </div>
+              )}
+            />
+          </div>
+        </Column>
+
+        <Column lg={16} md={8} sm={4}>
+          <div className={styles.formField}>
+            <Controller
+              name="fetalHeartRate"
+              control={control}
+              render={({ field, fieldState }) => (
+                <NumberInput
+                  id="fetal-heart-rate-input"
+                  label={t('fetalHeartRate', 'Foetal Heart Rate')}
+                  min={80}
+                  max={200}
+                  step={1}
+                  value={field.value}
+                  onChange={(_, state) => field.onChange(state.value)}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  size="lg"
+                />
+              )}
+            />
+          </div>
+        </Column>
+      </Grid>
+    </Modal>
+  );
+};
+
+export default FetalHeartRateForm;

package/src/maternal-and-child-health/partography/forms/index.ts

@@ -0,0 +1,9 @@
+export { default as CervixForm } from './cervix-form.component';
+export { default as FetalHeartRateForm } from './fetal-heart-rate-form.component';
+export { default as MembraneAmnioticFluidForm } from './membrane-amniotic-fluid-form.component';
+export { default as CervicalContractionsForm } from './cervical-contractions-form.component';
+export { default as OxytocinForm } from './oxytocin-form.component';
+export { default as DrugsIVFluidsForm } from './drugs-iv-fluids-form.component';
+export { default as PulseBPForm } from './pulse-bp-form.component';
+export { default as TemperatureForm } from './temperature-form.component';
+export { default as UrineTestForm } from './urine-test-form.component';

package/src/maternal-and-child-health/partography/forms/membrane-amniotic-fluid-form.component.tsx

@@ -0,0 +1,330 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { Button, Modal, Grid, Column, Select, SelectItem, TimePicker } from '@carbon/react';
+import TimePickerDropdown from './time-picker-dropdown.component';
+import styles from '../partography-data-form.scss';
+import { MEMBRANE_TIME_SLOT_OPTIONS } from '../types';
+import {
+  AMNIOTIC_MEMBRANE_INTACT_CONCEPT,
+  AMNIOTIC_CLEAR_LIQUOR_CONCEPT,
+  AMNIOTIC_MECONIUM_STAINED_CONCEPT,
+  AMNIOTIC_ABSENT_CONCEPT,
+  AMNIOTIC_BLOOD_STAINED_CONCEPT,
+  MOULDING_NONE_CONCEPT,
+  MOULDING_SLIGHT_CONCEPT,
+  MOULDING_MODERATE_CONCEPT,
+  MOULDING_SEVERE_CONCEPT,
+} from '../../../config-schema';
+
+type MembraneAmnioticFluidFormData = {
+  timeSlot: string;
+  exactTime: string;
+  amnioticFluid: string;
+  moulding: string;
+};
+
+type MembraneAmnioticFluidFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: { timeSlot: string; exactTime: string; amnioticFluid: string; moulding: string }) => void;
+  onDataSaved?: () => void;
+  existingTimeEntries?: Array<{ timeSlot: string; exactTime: string }>;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+};
+
+const MembraneAmnioticFluidForm: React.FC<MembraneAmnioticFluidFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  onDataSaved,
+  existingTimeEntries = [],
+  patient,
+}) => {
+  const { t } = useTranslation();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useForm<MembraneAmnioticFluidFormData>({
+    defaultValues: {
+      timeSlot: '',
+      exactTime: '',
+      amnioticFluid: '',
+      moulding: '',
+    },
+  });
+
+  const timeSlotOptions = useMemo(
+    () => MEMBRANE_TIME_SLOT_OPTIONS as unknown as { value: string; label: string }[],
+    [],
+  );
+
+  const latestUsedTimeSlot = React.useMemo(() => {
+    if (!existingTimeEntries || existingTimeEntries.length === 0) {
+      return null;
+    }
+    const sortedTimeSlots = existingTimeEntries
+      .map((entry) => entry.timeSlot)
+      .slice()
+      .sort((a, b) => {
+        const getMinutes = (time: string) => {
+          const [hours, minutes] = time.split(':').map(Number);
+
+          const adjustedHours = hours <= 5 ? hours + 24 : hours;
+          return adjustedHours * 60 + minutes;
+        };
+        return getMinutes(a) - getMinutes(b);
+      });
+    return sortedTimeSlots[sortedTimeSlots.length - 1];
+  }, [existingTimeEntries]);
+
+  const isTimeSlotDisabled = (timeSlot: string) => {
+    if (!latestUsedTimeSlot) {
+      return false;
+    }
+
+    const getMinutes = (time: string) => {
+      const [hours, minutes] = time.split(':').map(Number);
+
+      const adjustedHours = hours <= 5 ? hours + 24 : hours;
+      return adjustedHours * 60 + minutes;
+    };
+
+    return getMinutes(timeSlot) <= getMinutes(latestUsedTimeSlot);
+  };
+
+  const amnioticFluidOptions = useMemo(
+    () => [
+      {
+        value: 'Membrane intact',
+        label: t('membraneIntact', 'Membrane intact'),
+        concept: AMNIOTIC_MEMBRANE_INTACT_CONCEPT,
+      },
+      { value: 'Clear liquor', label: t('clearLiquor', 'Clear liquor'), concept: AMNIOTIC_CLEAR_LIQUOR_CONCEPT },
+      {
+        value: 'Meconium Stained',
+        label: t('meconiumStained', 'Meconium Stained'),
+        concept: AMNIOTIC_MECONIUM_STAINED_CONCEPT,
+      },
+      { value: 'Absent', label: t('absent', 'Absent'), concept: AMNIOTIC_ABSENT_CONCEPT },
+      {
+        value: 'Blood Stained',
+        label: t('bloodStained', 'Blood Stained'),
+        concept: AMNIOTIC_BLOOD_STAINED_CONCEPT,
+      },
+    ],
+    [t],
+  );
+
+  const mouldingOptions = useMemo(
+    () => [
+      { value: '0', label: '0', concept: MOULDING_NONE_CONCEPT },
+      { value: '+', label: '+', concept: MOULDING_SLIGHT_CONCEPT },
+      { value: '++', label: '++', concept: MOULDING_MODERATE_CONCEPT },
+      { value: '+++', label: '+++', concept: MOULDING_SEVERE_CONCEPT },
+    ],
+    [],
+  );
+
+  const handleFormSubmit = (data: MembraneAmnioticFluidFormData) => {
+    clearErrors();
+
+    let hasErrors = false;
+
+    if (!data.timeSlot || data.timeSlot.trim() === '') {
+      setError('timeSlot', { type: 'manual', message: t('timeSlotRequired', 'Please select a time slot') });
+      hasErrors = true;
+    }
+
+    if (!data.exactTime || data.exactTime.trim() === '') {
+      setError('exactTime', { type: 'manual', message: t('exactTimeRequired', 'Exact time is required') });
+      hasErrors = true;
+    }
+
+    if (!data.amnioticFluid || data.amnioticFluid.trim() === '') {
+      setError('amnioticFluid', {
+        type: 'manual',
+        message: t('amnioticFluidRequired', 'Please select amniotic fluid status'),
+      });
+      hasErrors = true;
+    }
+
+    if (!data.moulding || data.moulding.trim() === '') {
+      setError('moulding', {
+        type: 'manual',
+        message: t('mouldingRequired', 'Please select moulding status'),
+      });
+      hasErrors = true;
+    }
+
+    if (hasErrors) {
+      alert(t('formValidationError', 'Please fill in all required fields before submitting.'));
+      return;
+    }
+
+    if (isTimeSlotDisabled(data.timeSlot)) {
+      setError('timeSlot', {
+        type: 'manual',
+        message: t('timeSlotDisabled', 'Selected time slot is not available. Please select a later time.'),
+      });
+      alert(t('timeSlotValidationError', 'Please select a valid time slot that comes after the previous entry.'));
+      return;
+    }
+
+    onSubmit({
+      timeSlot: data.timeSlot,
+      exactTime: data.exactTime,
+      amnioticFluid: data.amnioticFluid,
+      moulding: data.moulding,
+    });
+
+    reset();
+  };
+
+  const handleClose = () => {
+    reset();
+    clearErrors();
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      modalHeading={t('membraneAmnioticFluidData', 'Membrane Amniotic Fluid & Moulding')}
+      modalLabel={patient ? `${patient.name}, ${patient.gender}, ${patient.age}` : ''}
+      primaryButtonText={t('save', 'Save')}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSubmit(handleFormSubmit)}
+      onSecondarySubmit={handleClose}
+      className={styles.cervixModal}
+      size="md">
+      <Grid className={styles.formGrid}>
+        <Column lg={8} md={4} sm={2}>
+          <div className={styles.formField}>
+            <Controller
+              name="timeSlot"
+              control={control}
+              rules={{ required: t('timeSlotRequired', 'Please select a time slot') }}
+              render={({ field, fieldState }) => (
+                <Select
+                  id="time-slot-select"
+                  labelText={t('timeSlot', 'Time Slot')}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  helperText={
+                    latestUsedTimeSlot
+                      ? t('timeSlotInfo', `Select a time after ${latestUsedTimeSlot}`)
+                      : t('timeSlotInfoInitial', 'Select a time slot')
+                  }
+                  value={field.value}
+                  onChange={(e) => field.onChange(e.target.value)}>
+                  <SelectItem value="" text={t('chooseAnOption', 'Choose an option')} />
+                  {timeSlotOptions.map((option) => {
+                    const isDisabled = isTimeSlotDisabled(option.value);
+                    return (
+                      <SelectItem
+                        key={option.value}
+                        value={option.value}
+                        text={option.label}
+                        disabled={isDisabled}
+                        className={isDisabled ? styles.disabledOption : undefined}
+                      />
+                    );
+                  })}
+                </Select>
+              )}
+            />
+          </div>
+        </Column>
+
+        <Column lg={8} md={4} sm={2}>
+          <div className={styles.formField}>
+            <Controller
+              name="exactTime"
+              control={control}
+              rules={{ required: t('exactTimeRequired', 'Exact time is required') }}
+              render={({ field, fieldState }) => (
+                <div>
+                  <label className={styles.fieldLabel}>{t('exactTime', 'Exact Time')}</label>
+                  <TimePickerDropdown
+                    id="exact-time-picker"
+                    labelText=""
+                    value={field.value}
+                    onChange={field.onChange}
+                    existingTimeEntries={existingTimeEntries.map((e) => ({
+                      hour: parseInt((e.exactTime || '00:00').split(':')[0] || '0', 10) || 0,
+                      time: e.exactTime || '',
+                    }))}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                  />
+                </div>
+              )}
+            />
+          </div>
+        </Column>
+
+        <Column lg={8} md={4} sm={2}>
+          <div className={styles.formField}>
+            <Controller
+              name="amnioticFluid"
+              control={control}
+              rules={{ required: t('amnioticFluidRequired', 'Please select amniotic fluid status') }}
+              render={({ field, fieldState }) => (
+                <Select
+                  id="amniotic-fluid-select"
+                  labelText={t('amnioticFluid', 'Amniotic Fluid')}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  value={field.value}
+                  onChange={(e) => field.onChange(e.target.value)}>
+                  <SelectItem value="" text={t('chooseAnOption', 'Choose an option')} />
+                  {amnioticFluidOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value} text={option.label} />
+                  ))}
+                </Select>
+              )}
+            />
+          </div>
+        </Column>
+
+        <Column lg={8} md={4} sm={2}>
+          <div className={styles.formField}>
+            <Controller
+              name="moulding"
+              control={control}
+              rules={{ required: t('mouldingRequired', 'Please select moulding status') }}
+              render={({ field, fieldState }) => (
+                <Select
+                  id="moulding-select"
+                  labelText={t('moulding', 'Moulding')}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  value={field.value}
+                  onChange={(e) => field.onChange(e.target.value)}>
+                  <SelectItem value="" text={t('chooseAnOption', 'Choose an option')} />
+                  {mouldingOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value} text={option.label} />
+                  ))}
+                </Select>
+              )}
+            />
+          </div>
+        </Column>
+      </Grid>
+    </Modal>
+  );
+};
+
+export default MembraneAmnioticFluidForm;