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

package/src/maternal-and-child-health/partography/forms/oxytocin-form.component.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { Button, Modal, Grid, Column, NumberInput, Dropdown } from '@carbon/react';
+import TimePickerDropdown from './time-picker-dropdown.component';
+import styles from '../partography-data-form.scss';
+
+type OxytocinFormData = {
+  time: string;
+  oxytocinUsed: string;
+  dropsPerMinute: string;
+};
+
+type OxytocinFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: { oxytocinUsed: 'yes' | 'no'; dropsPerMinute: number; timeSlot: string }) => void;
+  onDataSaved?: () => void;
+  existingTimeEntries?: Array<{ hour: number; time: string }>;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+};
+
+const OxytocinForm: React.FC<OxytocinFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  onDataSaved,
+  existingTimeEntries = [],
+  patient,
+}) => {
+  const { t } = useTranslation();
+
+  const { control, handleSubmit, reset, setError, clearErrors, watch } = useForm<OxytocinFormData>({
+    defaultValues: {
+      time: '',
+      oxytocinUsed: '',
+      dropsPerMinute: '',
+    },
+  });
+
+  const watchOxytocinUsed = watch('oxytocinUsed');
+
+  const oxytocinOptions = [
+    { id: 'yes', text: t('yes', 'Yes') },
+    { id: 'no', text: t('no', 'No') },
+  ];
+
+  const onSubmitForm = async (data: OxytocinFormData) => {
+    if (!data.time || data.time === '') {
+      setError('time', {
+        type: 'manual',
+        message: 'Time selection is required',
+      });
+      return;
+    }
+    if (!data.oxytocinUsed || data.oxytocinUsed === '') {
+      setError('oxytocinUsed', {
+        type: 'manual',
+        message: 'Oxytocin usage selection is required',
+      });
+      return;
+    }
+    if (data.oxytocinUsed === 'yes' && (!data.dropsPerMinute || data.dropsPerMinute === '')) {
+      setError('dropsPerMinute', {
+        type: 'manual',
+        message: 'Drops per minute is required when oxytocin is used',
+      });
+      return;
+    }
+    const dropsPerMinute = data.oxytocinUsed === 'yes' ? parseInt(data.dropsPerMinute) : 0;
+
+    if (data.oxytocinUsed === 'yes' && isNaN(dropsPerMinute)) {
+      setError('dropsPerMinute', {
+        type: 'manual',
+        message: 'Invalid drops per minute value',
+      });
+      return;
+    }
+    if (data.oxytocinUsed === 'yes' && (dropsPerMinute < 0 || dropsPerMinute > 60)) {
+      setError('dropsPerMinute', {
+        type: 'manual',
+        message: 'Drops per minute must be between 0 and 60',
+      });
+      return;
+    }
+    clearErrors();
+    const timeSlot = data.time;
+    onSubmit({
+      oxytocinUsed: data.oxytocinUsed as 'yes' | 'no',
+      dropsPerMinute: dropsPerMinute,
+      timeSlot: timeSlot,
+    });
+
+    reset();
+    onClose();
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const patientLabel = patient ? `${patient.name}, ${patient.gender}, ${patient.age}` : 'Patient Information';
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      modalHeading="Oxytocin"
+      modalLabel={patientLabel}
+      primaryButtonText={t('save', 'Save')}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSubmit(onSubmitForm)}
+      onSecondarySubmit={handleClose}
+      size="md">
+      <div className={styles.modalContent}>
+        <Grid>
+          <Column sm={4} md={8} lg={16}>
+            <Controller
+              name="time"
+              control={control}
+              rules={{
+                required: 'Time selection is required',
+              }}
+              render={({ field, fieldState }) => (
+                <TimePickerDropdown
+                  id="time-input"
+                  labelText={t('chooseTime', 'Choose a time')}
+                  value={field.value}
+                  onChange={(value) => field.onChange(value)}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                  existingTimeEntries={existingTimeEntries}
+                />
+              )}
+            />
+          </Column>
+          <Column sm={4} md={8} lg={16}>
+            <Controller
+              name="oxytocinUsed"
+              control={control}
+              rules={{
+                required: 'Oxytocin usage selection is required',
+              }}
+              render={({ field, fieldState }) => (
+                <Dropdown
+                  id="oxytocin-usage-dropdown"
+                  titleText={t('oxytocin', 'Oxytocin')}
+                  label="Select if oxytocin is used"
+                  items={oxytocinOptions}
+                  itemToString={(item) => (item ? item.text : '')}
+                  selectedItem={field.value ? oxytocinOptions.find((opt) => opt.id === field.value) : null}
+                  onChange={({ selectedItem }) => field.onChange(selectedItem?.id || '')}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+          {watchOxytocinUsed === 'yes' && (
+            <Column sm={4} md={8} lg={16}>
+              <Controller
+                name="dropsPerMinute"
+                control={control}
+                rules={{
+                  required: watchOxytocinUsed === 'yes' ? 'Drops per minute is required when oxytocin is used' : false,
+                  validate: {
+                    isNumber: (value) => !isNaN(parseInt(value)) || 'Must be a valid number',
+                    minValue: (value) => {
+                      const numValue = parseInt(value);
+                      return numValue >= 0 || 'Cannot be less than 0';
+                    },
+                    maxValue: (value) => {
+                      const numValue = parseInt(value);
+                      return numValue <= 60 || 'Cannot exceed 60 drops per minute';
+                    },
+                  },
+                }}
+                render={({ field, fieldState }) => (
+                  <NumberInput
+                    id="drops-per-minute-input"
+                    label={t('dropsPerMinute', 'Drops per minute')}
+                    placeholder="Enter drops per minute"
+                    value={field.value || ''}
+                    onChange={(e, { value }) => field.onChange(String(value))}
+                    min={0}
+                    max={60}
+                    step={1}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                  />
+                )}
+              />
+            </Column>
+          )}
+        </Grid>
+      </div>
+    </Modal>
+  );
+};
+
+export default OxytocinForm;

package/src/maternal-and-child-health/partography/forms/pulse-bp-form.component.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { Modal, Grid, Column, NumberInput } from '@carbon/react';
+import styles from '../partography-data-form.scss';
+
+type PulseBPFormData = {
+  pulse: string;
+  systolicBP: string;
+  diastolicBP: string;
+};
+
+type PulseBPFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: { pulse: number; systolicBP: number; diastolicBP: number }) => void;
+  onDataSaved?: () => void;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+};
+
+const PulseBPForm: React.FC<PulseBPFormProps> = ({ isOpen, onClose, onSubmit, onDataSaved, patient }) => {
+  const { t } = useTranslation();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useForm<PulseBPFormData>({
+    defaultValues: {
+      pulse: '',
+      systolicBP: '',
+      diastolicBP: '',
+    },
+  });
+
+  const onSubmitForm = async (data: PulseBPFormData) => {
+    const pulseValue = parseInt(data.pulse);
+    const systolicValue = parseInt(data.systolicBP);
+    const diastolicValue = parseInt(data.diastolicBP);
+
+    clearErrors();
+
+    if (!data.pulse || isNaN(pulseValue) || pulseValue < 30 || pulseValue > 200) {
+      setError('pulse', {
+        type: 'manual',
+        message: 'Please enter a valid pulse rate (30-200 bpm)',
+      });
+      return;
+    }
+
+    if (!data.systolicBP || isNaN(systolicValue) || systolicValue < 60 || systolicValue > 250) {
+      setError('systolicBP', {
+        type: 'manual',
+        message: 'Please enter a valid systolic BP (60-250 mmHg)',
+      });
+      return;
+    }
+
+    if (!data.diastolicBP || isNaN(diastolicValue) || diastolicValue < 40 || diastolicValue > 150) {
+      setError('diastolicBP', {
+        type: 'manual',
+        message: 'Please enter a valid diastolic BP (40-150 mmHg)',
+      });
+      return;
+    }
+
+    if (systolicValue <= diastolicValue) {
+      setError('systolicBP', {
+        type: 'manual',
+        message: 'Systolic BP must be higher than diastolic BP',
+      });
+      return;
+    }
+
+    onSubmit({
+      pulse: pulseValue,
+      systolicBP: systolicValue,
+      diastolicBP: diastolicValue,
+    });
+
+    reset();
+    onClose();
+  };
+
+  const handleClose = () => {
+    reset();
+    clearErrors();
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      modalHeading={t('addPulseBpData', 'Pulse & BP')}
+      modalLabel={patient ? `${patient.name}, ${patient.gender}, ${patient.age}` : 'Patient Information'}
+      primaryButtonText={t('save', 'Save')}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSubmit(onSubmitForm)}
+      className={styles.modal}>
+      <form>
+        <Grid>
+          <Column lg={16} md={8} sm={4}>
+            <Controller
+              name="pulse"
+              control={control}
+              render={({ field }) => (
+                <NumberInput
+                  id="pulse"
+                  label={t('pulse', 'Pulse Rate')}
+                  helperText="Normal: 60-100 bpm"
+                  min={30}
+                  max={200}
+                  value={field.value}
+                  onChange={(e, { value }) => field.onChange(value)}
+                  invalid={!!errors.pulse}
+                  invalidText={errors.pulse?.message}
+                />
+              )}
+            />
+          </Column>
+          <Column lg={8} md={4} sm={4}>
+            <Controller
+              name="systolicBP"
+              control={control}
+              render={({ field }) => (
+                <NumberInput
+                  id="systolicBP"
+                  label={t('systolicBP', 'BP Systolic')}
+                  helperText="Normal: 90-149 mmHg"
+                  min={60}
+                  max={250}
+                  value={field.value}
+                  onChange={(e, { value }) => field.onChange(value)}
+                  invalid={!!errors.systolicBP}
+                  invalidText={errors.systolicBP?.message}
+                />
+              )}
+            />
+          </Column>
+          <Column lg={8} md={4} sm={4}>
+            <Controller
+              name="diastolicBP"
+              control={control}
+              render={({ field }) => (
+                <NumberInput
+                  id="diastolicBP"
+                  label={t('diastolicBP', 'BP Diastolic')}
+                  helperText="Normal: 60-80 mmHg"
+                  min={40}
+                  max={150}
+                  value={field.value}
+                  onChange={(e, { value }) => field.onChange(value)}
+                  invalid={!!errors.diastolicBP}
+                  invalidText={errors.diastolicBP?.message}
+                />
+              )}
+            />
+          </Column>
+        </Grid>
+      </form>
+    </Modal>
+  );
+};
+
+export default PulseBPForm;

package/src/maternal-and-child-health/partography/forms/temperature-form.component.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { Modal, Grid, Column, NumberInput } from '@carbon/react';
+import TimePickerDropdown from './time-picker-dropdown.component';
+import styles from '../partography-data-form.scss';
+
+type TemperatureFormData = {
+  time: string;
+  temperature: string;
+};
+
+type TemperatureFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: { timeSlot: string; exactTime: string; temperature: number }) => void;
+  onDataSaved?: () => void;
+  existingTimeEntries?: Array<{ hour: number; time: string }>;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+  initialTime?: string;
+};
+
+const TemperatureForm: React.FC<TemperatureFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  onDataSaved,
+  existingTimeEntries = [],
+  patient,
+}) => {
+  const { t } = useTranslation();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    clearErrors,
+    watch,
+    formState: { errors },
+  } = useForm<TemperatureFormData>({
+    defaultValues: {
+      temperature: '',
+    },
+  });
+
+  const watchedTime = watch('time');
+
+  const onSubmitForm = async (data: TemperatureFormData) => {
+    const temperatureValue = parseFloat(data.temperature);
+
+    clearErrors();
+
+    if (!data.time) {
+      setError('time', {
+        type: 'manual',
+        message: t('timeRequired', 'Please select a time'),
+      });
+      return;
+    }
+
+    if (!data.temperature || isNaN(temperatureValue) || temperatureValue < 30 || temperatureValue > 45) {
+      setError('temperature', {
+        type: 'manual',
+        message: t('temperatureValidation', 'Please enter a valid temperature (30-45°C)'),
+      });
+      return;
+    }
+
+    const isDuplicateTime = existingTimeEntries.some((entry) => entry.time === data.time);
+
+    if (isDuplicateTime) {
+      setError('time', {
+        type: 'manual',
+        message: t('duplicateTimeEntry', 'This time already exists'),
+      });
+      return;
+    }
+
+    onSubmit({
+      timeSlot: data.time,
+      exactTime: data.time,
+      temperature: temperatureValue,
+    });
+
+    if (onDataSaved) {
+      onDataSaved();
+    }
+
+    reset();
+    onClose();
+  };
+
+  const handleClose = () => {
+    reset();
+    clearErrors();
+    onClose();
+  };
+
+  const getTemperatureAdvice = (temp: string): { status: string; color: string; advice: string } => {
+    const temperature = parseFloat(temp);
+    if (isNaN(temperature)) {
+      return { status: '', color: '', advice: '' };
+    }
+
+    if (temperature < 36.1) {
+      return {
+        status: 'Low',
+        color: '#0043ce',
+        advice: 'Temperature below normal range. Monitor closely.',
+      };
+    } else if (temperature >= 36.1 && temperature <= 37.2) {
+      return {
+        status: 'Normal',
+        color: '#198038',
+        advice: 'Temperature within normal range.',
+      };
+    } else if (temperature > 37.2) {
+      return {
+        status: 'High (Fever)',
+        color: '#da1e28',
+        advice: 'Elevated temperature. Consider fever management.',
+      };
+    }
+    return { status: '', color: '', advice: '' };
+  };
+
+  const temperatureAdvice = getTemperatureAdvice(watch('temperature') || '');
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      modalHeading={t('addTemperatureData', 'Temperature')}
+      modalLabel={patient ? `${patient.name}, ${patient.gender}, ${patient.age}` : 'Patient Information'}
+      primaryButtonText={t('save', 'Save')}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSubmit(onSubmitForm)}
+      className={styles.modal}>
+      <form>
+        <Grid>
+          <Column lg={8} md={4} sm={4}>
+            <Controller
+              name="time"
+              control={control}
+              render={({ field }) => (
+                <TimePickerDropdown
+                  id="time"
+                  labelText={t('time', 'Time')}
+                  value={field.value}
+                  onChange={field.onChange}
+                  invalid={!!errors.time}
+                  invalidText={errors.time?.message}
+                  existingTimeEntries={existingTimeEntries}
+                />
+              )}
+            />
+          </Column>
+          <Column lg={16} md={8} sm={4}>
+            <Controller
+              name="temperature"
+              control={control}
+              render={({ field }) => (
+                <NumberInput
+                  id="temperature"
+                  label={t('temperature', 'Temperature')}
+                  helperText="Normal: 36.1-37.2°C"
+                  min={30}
+                  max={45}
+                  step={0.1}
+                  value={field.value}
+                  onChange={(e, { value }) => field.onChange(value)}
+                  invalid={!!errors.temperature}
+                  invalidText={errors.temperature?.message}
+                />
+              )}
+            />
+          </Column>
+
+          {temperatureAdvice.status && (
+            <Column lg={16} md={8} sm={4}>
+              <div className={styles.temperatureStatus}>
+                <div
+                  className={
+                    styles.statusIndicator +
+                    ' ' +
+                    (temperatureAdvice.status === 'Low'
+                      ? styles['statusIndicator--low']
+                      : temperatureAdvice.status === 'Normal'
+                      ? styles['statusIndicator--normal']
+                      : styles['statusIndicator--high'])
+                  }>
+                  <strong>{temperatureAdvice.status}</strong>
+                  <span className={styles.statusAdvice}>{temperatureAdvice.advice}</span>
+                </div>
+              </div>
+            </Column>
+          )}
+        </Grid>
+      </form>
+    </Modal>
+  );
+};
+
+export default TemperatureForm;