@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2788 → 5.4.2-pre.2797

package/src/maternal-and-child-health/partography/forms/drugs-iv-fluids-form.component.tsx

@@ -1,9 +1,8 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useForm, Controller } from 'react-hook-form';
-import { Button, Modal, Grid, Column, Dropdown, InlineNotification, TextInput, ButtonSkeleton } from '@carbon/react';
-import { Add } from '@carbon/react/icons';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { Button, Modal, Grid, Column, Dropdown, TextInput, ButtonSkeleton } from '@carbon/react';
+import { launchWorkspace, useSession, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
 import { saveDrugOrderData } from '../partography.resource';
 import styles from '../partography-data-form.scss';
 import { ROUTE_OPTIONS, FREQUENCY_OPTIONS } from '../types';
@@ -30,9 +29,27 @@ type DrugsIVFluidsFormProps = {
 
 const DrugsIVFluidsForm: React.FC<DrugsIVFluidsFormProps> = ({ isOpen, onClose, onSubmit, onDataSaved, patient }) => {
   const { t } = useTranslation();
+  const session = useSession();
   const [isSaving, setIsSaving] = useState(false);
-  const [saveError, setSaveError] = useState<string | null>(null);
-  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [providerUuid, setProviderUuid] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    const fetchProviderData = async () => {
+      if (session?.user?.person?.uuid && !providerUuid) {
+        try {
+          const providerResp = await openmrsFetch(`/ws/rest/v1/provider?person=${session.user.person.uuid}&v=default`);
+          const providerData = await providerResp.json();
+          if (providerData.results && providerData.results.length > 0) {
+            setProviderUuid(providerData.results[0].uuid);
+          }
+        } catch (e) {
+          console.warn('Failed to fetch provider data:', e);
+        }
+      }
+    };
+
+    fetchProviderData();
+  }, [session?.user?.person?.uuid, providerUuid]);
 
   const {
     control,
@@ -71,8 +88,6 @@ const DrugsIVFluidsForm: React.FC<DrugsIVFluidsFormProps> = ({ isOpen, onClose,
 
   const onSubmitForm = async (data: DrugsIVFluidsFormData) => {
     clearErrors();
-    setSaveError(null);
-    setSaveSuccess(false);
 
     if (!data.drugName || data.drugName === '') {
       setError('drugName', {
@@ -106,67 +121,109 @@ const DrugsIVFluidsForm: React.FC<DrugsIVFluidsFormProps> = ({ isOpen, onClose,
       return;
     }
 
-    if (patient?.uuid) {
-      setIsSaving(true);
-      try {
-        const result = await saveDrugOrderData(patient.uuid, {
+    if (!patient) {
+      showSnackbar({
+        title: t('validationError', 'Validation Error'),
+        subtitle: t('noPatientSelected', 'No patient selected'),
+        kind: 'error',
+      });
+      return;
+    }
+    if (!patient.uuid) {
+      showSnackbar({
+        title: t('validationError', 'Validation Error'),
+        subtitle: t('patientMissingUuid', 'Patient is missing a UUID'),
+        kind: 'error',
+      });
+      return;
+    }
+
+    setIsSaving(true);
+
+    const abortController = new AbortController();
+
+    const timeoutId = setTimeout(() => {
+      abortController.abort();
+    }, 30000);
+    try {
+      const locationUuid = session?.sessionLocation?.uuid;
+
+      const result = await saveDrugOrderData(
+        patient.uuid,
+        {
           drugName: data.drugName,
           dosage: data.dosage,
           route: data.route,
           frequency: data.frequency,
-        });
+        },
+        locationUuid,
+        providerUuid,
+        abortController.signal,
+      );
 
-        if (result.success) {
-          setSaveSuccess(true);
+      clearTimeout(timeoutId);
 
-          if (onDataSaved) {
-            onDataSaved();
-          }
+      if (result.success) {
+        // Show success notification
+        showSnackbar({
+          title: t('drugOrderSaved', 'Drug order saved'),
+          subtitle: t('drugOrderSavedSuccessfully', 'Drug order has been saved successfully'),
+          kind: 'success',
+          isLowContrast: true,
+        });
 
-          onSubmit({
-            drugName: data.drugName,
-            dosage: data.dosage,
-            route: data.route,
-            frequency: data.frequency,
-          });
-
-          reset();
-
-          setTimeout(() => {
-            setSaveSuccess(false);
-            onClose();
-          }, 1500);
-        } else {
-          setSaveError(result.message || t('saveError', 'Failed to save data'));
+        // Call callbacks
+        if (onDataSaved) {
+          onDataSaved();
         }
-      } catch (error) {
-        console.error('Save error details:', error);
-        setSaveError(
-          error?.message ||
-            error?.responseBody?.error?.message ||
-            error?.response?.data?.error?.message ||
-            t('saveError', 'Failed to save data'),
-        );
-      } finally {
-        setIsSaving(false);
+        onSubmit({
+          drugName: data.drugName,
+          dosage: data.dosage,
+          route: data.route,
+          frequency: data.frequency,
+        });
+
+        // Reset form and close modal
+        reset();
+        onClose();
+      } else {
+        showSnackbar({
+          title: t('errorSavingDrugOrder', 'Error saving drug order'),
+          subtitle: result.message || t('saveError', 'Failed to save data'),
+          kind: 'error',
+        });
       }
-    } else {
-      onSubmit({
-        drugName: data.drugName,
-        dosage: data.dosage,
-        route: data.route,
-        frequency: data.frequency,
+    } catch (error) {
+      clearTimeout(timeoutId);
+
+      // Handle request cancellation (timeout or manual abort)
+      if (error.name === 'AbortError') {
+        showSnackbar({
+          title: t('requestCancelled', 'Request cancelled'),
+          subtitle: t('saveTimeout', 'Request was cancelled due to timeout. Please try again.'),
+          kind: 'warning',
+        });
+        return;
+      }
+
+      // Handle other errors
+      showSnackbar({
+        title: t('errorSavingDrugOrder', 'Error saving drug order'),
+        subtitle:
+          error?.message ||
+          error?.responseBody?.error?.message ||
+          error?.response?.data?.error?.message ||
+          t('saveError', 'Failed to save data'),
+        kind: 'error',
       });
-      reset();
-      onClose();
+    } finally {
+      setIsSaving(false);
     }
   };
 
   const handleClose = () => {
     reset();
     clearErrors();
-    setSaveError(null);
-    setSaveSuccess(false);
     onClose();
   };
 
@@ -184,55 +241,8 @@ const DrugsIVFluidsForm: React.FC<DrugsIVFluidsFormProps> = ({ isOpen, onClose,
       onRequestSubmit={handleSubmit(onSubmitForm)}
       onSecondarySubmit={handleClose}
       size="md">
-      {saveSuccess && (
-        <InlineNotification
-          kind="success"
-          title={t('saveSuccess', 'Data saved successfully')}
-          subtitle={t('drugOrderDataSaved', 'Drug order data has been saved to OpenMRS')}
-          hideCloseButton
-        />
-      )}
-
-      {saveError && (
-        <InlineNotification
-          kind="error"
-          title={t('saveError', 'Error saving data')}
-          subtitle={saveError}
-          onCloseButtonClick={() => setSaveError(null)}
-        />
-      )}
-
       <div className={styles.modalContent}>
         <Grid>
-          <Column sm={4} md={8} lg={16}>
-            <div className={styles.workspaceLauncherSection}>
-              <h4>{t('selectFromDrugList', 'Select from Drug List')}</h4>
-              <p className={styles.helperText}>
-                {t(
-                  'drugOrderDescription',
-                  'Use the drug order workspace to select from the complete list of available drugs with proper dosing and administration details.',
-                )}
-              </p>
-              <Button
-                kind="tertiary"
-                renderIcon={Add}
-                onClick={handleLaunchDrugOrderWorkspace}
-                disabled={!patient?.uuid}
-                className={styles.workspaceLauncherButton}>
-                {t('addDrugOrder', 'Add drug order')}
-              </Button>
-            </div>
-          </Column>
-
-          <Column sm={4} md={8} lg={16}>
-            <div className={styles.manualEntrySection}>
-              <h4>{t('manualEntry', 'Manual Entry')}</h4>
-              <p className={styles.helperText}>
-                {t('manualEntryDescription', 'Or enter drug information manually for quick documentation.')}
-              </p>
-            </div>
-          </Column>
-
           <Column sm={4} md={8} lg={16}>
             <Controller
               name="drugName"

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

@@ -57,13 +57,13 @@ const FetalHeartRateForm: React.FC<FetalHeartRateFormProps> = ({
   });
   const generateHourOptions = () => {
     const options = [];
-    options.push({ value: '0', label: '00' });
-    options.push({ value: '0.5', label: '30min' });
-    for (let i = 1; i <= 24; i++) {
-      options.push({ value: i.toString(), label: `${i}hr` });
-      if (i < 24) {
-        options.push({ value: (i + 0.5).toString(), label: `${i}hr 30min` });
-      }
+    // Add 00 hour option first
+    options.push({ value: '0', label: '0hr' });
+    // Start from 0.5hr, then 1hr, 1.5hr, ... up to 24hr (in 0.5 increments)
+    for (let i = 1; i <= 48; i++) {
+      const value = (i * 0.5).toString();
+      const label = i % 2 === 0 ? `${i / 2}hr` : `${i * 0.5}hr`;
+      options.push({ value, label });
     }
     return options;
   };

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

@@ -69,88 +69,48 @@ const MembraneAmnioticFluidForm: React.FC<MembraneAmnioticFluidFormProps> = ({
     [],
   );
 
-  const latestUsedTimeSlot = React.useMemo(() => {
+  // Calculate the latest used hour from existing entries (similar to fetal heart rate form)
+  const latestUsedHour = 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);
+    // Convert timeSlot values to numeric hours and find the maximum
+    const hours = existingTimeEntries.map((entry) => parseFloat(entry.timeSlot || '0')).filter((hour) => !isNaN(hour)); // Filter out invalid values
 
-          const adjustedHours = hours <= 5 ? hours + 24 : hours;
-          return adjustedHours * 60 + minutes;
-        };
-        return getMinutes(a) - getMinutes(b);
-      });
-    return sortedTimeSlots[sortedTimeSlots.length - 1];
+    return hours.length > 0 ? Math.max(...hours) : null;
   }, [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);
-  };
+  // Generate time slot options with disabled state (similar to fetal heart rate form)
+  const timeSlotOptionsWithDisabled = React.useMemo(() => {
+    return timeSlotOptions.map((option) => {
+      const hourValue = parseFloat(option.value);
+      const isDisabled = latestUsedHour !== null && hourValue <= latestUsedHour;
 
-  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 },
-    ],
-    [],
-  );
+      return {
+        ...option,
+        disabled: isDisabled,
+      };
+    });
+  }, [timeSlotOptions, latestUsedHour]);
 
   const handleFormSubmit = (data: MembraneAmnioticFluidFormData) => {
     clearErrors();
 
     let hasErrors = false;
 
+    // Validate time slot selection
     if (!data.timeSlot || data.timeSlot.trim() === '') {
       setError('timeSlot', { type: 'manual', message: t('timeSlotRequired', 'Please select a time slot') });
       hasErrors = true;
     }
 
+    // Validate exact time
     if (!data.exactTime || data.exactTime.trim() === '') {
       setError('exactTime', { type: 'manual', message: t('exactTimeRequired', 'Exact time is required') });
       hasErrors = true;
     }
 
+    // Validate amniotic fluid selection
     if (!data.amnioticFluid || data.amnioticFluid.trim() === '') {
       setError('amnioticFluid', {
         type: 'manual',
@@ -159,6 +119,7 @@ const MembraneAmnioticFluidForm: React.FC<MembraneAmnioticFluidFormProps> = ({
       hasErrors = true;
     }
 
+    // Validate moulding selection
     if (!data.moulding || data.moulding.trim() === '') {
       setError('moulding', {
         type: 'manual',
@@ -172,10 +133,16 @@ const MembraneAmnioticFluidForm: React.FC<MembraneAmnioticFluidFormProps> = ({
       return;
     }
 
-    if (isTimeSlotDisabled(data.timeSlot)) {
+    // Progressive validation - prevent selecting hours before the latest entered hour
+    const selectedHour = parseFloat(data.timeSlot);
+
+    if (latestUsedHour !== null && selectedHour <= latestUsedHour) {
       setError('timeSlot', {
         type: 'manual',
-        message: t('timeSlotDisabled', 'Selected time slot is not available. Please select a later time.'),
+        message: t(
+          'timeSlotDisabled',
+          `Cannot select ${data.timeSlot}hr. Please select a time after ${latestUsedHour}hr.`,
+        ),
       });
       alert(t('timeSlotValidationError', 'Please select a valid time slot that comes after the previous entry.'));
       return;
@@ -191,6 +158,39 @@ const MembraneAmnioticFluidForm: React.FC<MembraneAmnioticFluidFormProps> = ({
     reset();
   };
 
+  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 handleClose = () => {
     reset();
     clearErrors();
@@ -223,25 +223,22 @@ const MembraneAmnioticFluidForm: React.FC<MembraneAmnioticFluidFormProps> = ({
                   invalid={!!fieldState.error}
                   invalidText={fieldState.error?.message}
                   helperText={
-                    latestUsedTimeSlot
-                      ? t('timeSlotInfo', `Select a time after ${latestUsedTimeSlot}`)
+                    latestUsedHour !== null
+                      ? t('timeSlotInfo', `Select a time after ${latestUsedHour}hr`)
                       : 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}
-                      />
-                    );
-                  })}
+                  {timeSlotOptionsWithDisabled.map((option) => (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value}
+                      text={option.label}
+                      disabled={option.disabled}
+                      className={option.disabled ? styles.disabledOption : undefined}
+                    />
+                  ))}
                 </Select>
               )}
             />

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

@@ -1,7 +1,7 @@
 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 { Button, Modal, Grid, Column, NumberInput, Select, SelectItem } from '@carbon/react';
 import TimePickerDropdown from './time-picker-dropdown.component';
 import styles from '../partography-data-form.scss';
 
@@ -45,11 +45,6 @@ const OxytocinForm: React.FC<OxytocinFormProps> = ({
 
   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', {
@@ -148,17 +143,17 @@ const OxytocinForm: React.FC<OxytocinFormProps> = ({
                 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 || '')}
+                <Select
+                  id="oxytocin-usage-select"
+                  labelText={t('oxytocin', 'Oxytocin')}
+                  value={field.value}
+                  onChange={(e) => field.onChange(e.target.value)}
                   invalid={!!fieldState.error}
-                  invalidText={fieldState.error?.message}
-                />
+                  invalidText={fieldState.error?.message}>
+                  <SelectItem value="" text={t('selectIfOxytocinIsUsed', 'Select if oxytocin is used')} />
+                  <SelectItem value="yes" text={t('yes', 'Yes')} />
+                  <SelectItem value="no" text={t('no', 'No')} />
+                </Select>
               )}
             />
           </Column>
@@ -185,14 +180,14 @@ const OxytocinForm: React.FC<OxytocinFormProps> = ({
                   <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}
+                    value={field.value || ''}
+                    onChange={(e, { value }) => field.onChange(String(value))}
                     invalid={!!fieldState.error}
                     invalidText={fieldState.error?.message}
+                    allowEmpty
                   />
                 )}
               />