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

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

@@ -0,0 +1,354 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+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';
+
+type CervixFormData = {
+  hour: string;
+  time: string;
+  cervicalDilation: string;
+  descent: string;
+};
+
+type CervixFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: { hour: number; time: string; cervicalDilation: number; descentOfHead: number }) => void;
+  onDataSaved?: () => void;
+  selectedHours?: number[];
+  existingTimeEntries?: Array<{ hour: number; time: string }>;
+  existingCervixData?: Array<{ cervicalDilation: number; descentOfHead: number }>;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+};
+
+const CervixForm: React.FC<CervixFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  onDataSaved,
+  selectedHours = [],
+  existingTimeEntries = [],
+  existingCervixData = [],
+  patient,
+}) => {
+  const { t } = useTranslation();
+
+  const { control, handleSubmit, reset, setError, clearErrors } = useForm<CervixFormData>({
+    defaultValues: {
+      hour: '',
+      time: '',
+      cervicalDilation: '',
+      descent: '5',
+    },
+  });
+
+  const validationLimits = useMemo(() => {
+    if (!existingCervixData || existingCervixData.length === 0) {
+      return {
+        cervicalDilationMin: 0,
+        descentOfHeadMax: 5,
+      };
+    }
+
+    const maxCervicalDilation = Math.max(...existingCervixData.map((data) => data.cervicalDilation));
+    const minDescentOfHead = Math.min(...existingCervixData.map((data) => data.descentOfHead));
+
+    return {
+      cervicalDilationMin: maxCervicalDilation,
+      descentOfHeadMax: minDescentOfHead,
+    };
+  }, [existingCervixData]);
+
+  const maxSelectedHour = useMemo(
+    () => (selectedHours && selectedHours.length > 0 ? Math.max(...selectedHours) : -1),
+    [selectedHours],
+  );
+
+  const hourOptions = useMemo(() => {
+    return Array.from({ length: 24 }, (_, i) => {
+      const hourValue = String(i).padStart(2, '0');
+      const isDisabled = i <= maxSelectedHour;
+      const displayText = isDisabled ? `${hourValue} (used)` : hourValue;
+
+      return {
+        value: hourValue,
+        text: displayText,
+        disabled: isDisabled,
+      };
+    });
+  }, [maxSelectedHour]);
+
+  const onSubmitForm = async (data: CervixFormData) => {
+    if (!data.hour || data.hour === '') {
+      setError('hour', {
+        type: 'manual',
+        message: 'Hour selection is required',
+      });
+      return;
+    }
+
+    if (!data.time || data.time === '') {
+      setError('time', {
+        type: 'manual',
+        message: 'Time selection is required',
+      });
+      return;
+    }
+
+    if (!data.cervicalDilation || data.cervicalDilation === '') {
+      setError('cervicalDilation', {
+        type: 'manual',
+        message: 'Cervical dilation is required',
+      });
+      return;
+    }
+
+    if (!data.descent || data.descent === '') {
+      setError('descent', {
+        type: 'manual',
+        message: 'Descent of head is required',
+      });
+      return;
+    }
+
+    const hourValue = parseInt(data.hour);
+    const cervicalDilation = parseFloat(data.cervicalDilation);
+    const descentOfHead = parseInt(data.descent);
+
+    if (isNaN(hourValue)) {
+      setError('hour', {
+        type: 'manual',
+        message: 'Invalid hour value',
+      });
+      return;
+    }
+
+    if (isNaN(cervicalDilation)) {
+      setError('cervicalDilation', {
+        type: 'manual',
+        message: 'Invalid cervical dilation value',
+      });
+      return;
+    }
+
+    if (isNaN(descentOfHead)) {
+      setError('descent', {
+        type: 'manual',
+        message: 'Invalid descent of head value',
+      });
+      return;
+    }
+
+    if (cervicalDilation < validationLimits.cervicalDilationMin) {
+      setError('cervicalDilation', {
+        type: 'manual',
+        message: `Cervical dilation cannot be less than previous measurement (${validationLimits.cervicalDilationMin}cm)`,
+      });
+      return;
+    }
+
+    if (cervicalDilation > 10) {
+      setError('cervicalDilation', {
+        type: 'manual',
+        message: 'Cervical dilation cannot exceed 10cm',
+      });
+      return;
+    }
+
+    if (descentOfHead < 1) {
+      setError('descent', {
+        type: 'manual',
+        message: 'Descent of head cannot be less than 1 (most descended)',
+      });
+      return;
+    }
+    if (descentOfHead > 5) {
+      setError('descent', {
+        type: 'manual',
+        message: 'Descent of head cannot exceed 5',
+      });
+      return;
+    }
+
+    clearErrors();
+
+    onSubmit({
+      hour: hourValue,
+      time: data.time,
+      cervicalDilation: cervicalDilation,
+      descentOfHead: descentOfHead,
+    });
+
+    reset();
+    onClose();
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const patientLabel = useMemo(
+    () => (patient ? `${patient.name}, ${patient.gender}, ${patient.age}` : 'Patient Information'),
+    [patient],
+  );
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      modalHeading="Cervical Dilation & Descent of Head"
+      modalLabel={patientLabel}
+      primaryButtonText={t('save', 'Save')}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSubmit(onSubmitForm)}
+      onSecondarySubmit={handleClose}
+      size="md">
+      <div className={styles.modalContent}>
+        <div className={styles.requiredFieldsNote}>
+          <p>* All fields are required</p>
+        </div>
+        <Grid>
+          <Column sm={4} md={4} lg={8}>
+            <Controller
+              name="hour"
+              control={control}
+              rules={{
+                required: 'Hour selection is required',
+              }}
+              render={({ field, fieldState }) => (
+                <Select
+                  id="hour-select"
+                  labelText="Hour *"
+                  value={field.value}
+                  onChange={(e) => field.onChange((e.target as HTMLSelectElement).value)}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}>
+                  <SelectItem value="" text="Select hour" />
+                  {hourOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value} text={option.text} disabled={option.disabled} />
+                  ))}
+                </Select>
+              )}
+            />
+          </Column>
+          <Column sm={4} md={4} lg={8}>
+            <Controller
+              name="time"
+              control={control}
+              rules={{
+                required: 'Time selection is required',
+              }}
+              render={({ field, fieldState }) => (
+                <TimePickerDropdown
+                  id="time-input"
+                  labelText="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="cervicalDilation"
+              control={control}
+              rules={{
+                required: 'Cervical dilation is required',
+                validate: {
+                  isNumber: (value) => !isNaN(parseFloat(value)) || 'Must be a valid number',
+                  minValue: (value) => {
+                    const numValue = parseFloat(value);
+                    return (
+                      numValue >= validationLimits.cervicalDilationMin ||
+                      `Cannot be less than previous measurement (${validationLimits.cervicalDilationMin}cm)`
+                    );
+                  },
+                  maxValue: (value) => {
+                    const numValue = parseFloat(value);
+                    return numValue <= 10 || 'Cannot exceed 10cm';
+                  },
+                },
+              }}
+              render={({ field, fieldState }) => (
+                <>
+                  <NumberInput
+                    id="cervical-dilation-input"
+                    label="Cervical Dilation (cm) *"
+                    placeholder={`Enter dilation (min: ${validationLimits.cervicalDilationMin}cm, max: 10cm)`}
+                    value={field.value || ''}
+                    onChange={(e, { value }) => field.onChange(String(value))}
+                    min={validationLimits.cervicalDilationMin}
+                    max={10}
+                    step={0.5}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                  />
+                  {existingCervixData.length > 0 && (
+                    <div className={styles.validationHint}>
+                      Previous highest: {validationLimits.cervicalDilationMin}cm (cannot go below this value)
+                    </div>
+                  )}
+                </>
+              )}
+            />
+          </Column>
+
+          <Column sm={4} md={8} lg={16}>
+            <Controller
+              name="descent"
+              control={control}
+              rules={{
+                required: 'Descent of head is required',
+                validate: {
+                  isNumber: (value) => !isNaN(parseInt(value)) || 'Must be a valid number',
+                  minValue: (value) => {
+                    const numValue = parseInt(value);
+                    return numValue >= 1 || 'Descent of head cannot be less than 1 (most descended)';
+                  },
+                  maxValue: (value) => {
+                    const numValue = parseInt(value);
+                    return numValue <= 5 || 'Descent of head cannot exceed 5';
+                  },
+                },
+              }}
+              render={({ field, fieldState }) => (
+                <>
+                  <NumberInput
+                    id="descent-input"
+                    label="Descent of Head *"
+                    placeholder={
+                      existingCervixData.length === 0
+                        ? `Default: 5 (high position), can decrement to lower values`
+                        : `Enter descent (1=most descended, 5=high position)`
+                    }
+                    value={field.value || '5'}
+                    onChange={(e, { value }) => field.onChange(String(value))}
+                    min={1}
+                    max={5}
+                    step={1}
+                    invalid={!!fieldState.error}
+                    invalidText={fieldState.error?.message}
+                  />
+                </>
+              )}
+            />
+          </Column>
+        </Grid>
+      </div>
+    </Modal>
+  );
+};
+
+export default CervixForm;

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

@@ -0,0 +1,321 @@
+import React, { useState, useCallback } 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 { saveDrugOrderData } from '../partography.resource';
+import styles from '../partography-data-form.scss';
+import { ROUTE_OPTIONS, FREQUENCY_OPTIONS } from '../types';
+
+type DrugsIVFluidsFormData = {
+  drugName: string;
+  dosage: string;
+  route: string;
+  frequency: string;
+};
+
+type DrugsIVFluidsFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: { drugName: string; dosage: string; route: string; frequency: string }) => void;
+  onDataSaved?: () => void;
+  patient?: {
+    uuid: string;
+    name: string;
+    gender: string;
+    age: string;
+  };
+};
+
+const DrugsIVFluidsForm: React.FC<DrugsIVFluidsFormProps> = ({ isOpen, onClose, onSubmit, onDataSaved, patient }) => {
+  const { t } = useTranslation();
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useForm<DrugsIVFluidsFormData>({
+    defaultValues: {
+      drugName: '',
+      dosage: '',
+      route: '',
+      frequency: '',
+    },
+  });
+
+  const handleLaunchDrugOrderWorkspace = useCallback(() => {
+    if (patient?.uuid) {
+      launchWorkspace('add-drug-order', {
+        patientUuid: patient.uuid,
+        workspaceTitle: 'Add Drug Order',
+        onOrderSaved: (savedOrder) => {
+          if (onDataSaved) {
+            onDataSaved();
+          }
+
+          onClose();
+        },
+      });
+    }
+  }, [patient?.uuid, onDataSaved, onClose]);
+
+  const routeOptions = ROUTE_OPTIONS as unknown as { id: string; text: string }[];
+  const frequencyOptions = FREQUENCY_OPTIONS as unknown as { id: string; text: string }[];
+
+  const onSubmitForm = async (data: DrugsIVFluidsFormData) => {
+    clearErrors();
+    setSaveError(null);
+    setSaveSuccess(false);
+
+    if (!data.drugName || data.drugName === '') {
+      setError('drugName', {
+        type: 'manual',
+        message: t('drugNameRequired', 'Drug name is required'),
+      });
+      return;
+    }
+
+    if (!data.dosage || data.dosage === '') {
+      setError('dosage', {
+        type: 'manual',
+        message: t('dosageRequired', 'Dosage is required'),
+      });
+      return;
+    }
+
+    if (!data.route || data.route === '') {
+      setError('route', {
+        type: 'manual',
+        message: t('routeRequired', 'Route is required'),
+      });
+      return;
+    }
+
+    if (!data.frequency || data.frequency === '') {
+      setError('frequency', {
+        type: 'manual',
+        message: t('frequencyRequired', 'Frequency is required'),
+      });
+      return;
+    }
+
+    if (patient?.uuid) {
+      setIsSaving(true);
+      try {
+        const result = await saveDrugOrderData(
+          patient.uuid,
+          {
+            drugName: data.drugName,
+            dosage: data.dosage,
+            route: data.route,
+            frequency: data.frequency,
+          },
+          t,
+        );
+
+        if (result.success) {
+          setSaveSuccess(true);
+
+          if (onDataSaved) {
+            onDataSaved();
+          }
+
+          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'));
+        }
+      } 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);
+      }
+    } else {
+      onSubmit({
+        drugName: data.drugName,
+        dosage: data.dosage,
+        route: data.route,
+        frequency: data.frequency,
+      });
+      reset();
+      onClose();
+    }
+  };
+
+  const handleClose = () => {
+    reset();
+    clearErrors();
+    setSaveError(null);
+    setSaveSuccess(false);
+    onClose();
+  };
+
+  const patientLabel = patient ? `${patient.name}, ${patient.gender}, ${patient.age}` : 'Patient Information';
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      modalHeading={t('drugsIVFluids', 'Drugs and IV Fluids Given')}
+      modalLabel={patientLabel}
+      primaryButtonText={isSaving ? t('saving', 'Saving...') : t('save', 'Save')}
+      primaryButtonDisabled={isSaving}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      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"
+              control={control}
+              render={({ field, fieldState }) => (
+                <TextInput
+                  id="drug-name-input"
+                  labelText={t('drugName', 'Drug Name')}
+                  placeholder={t('enterDrugName', 'Enter drug name...')}
+                  value={field.value}
+                  onChange={field.onChange}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column sm={4} md={4} lg={8}>
+            <Controller
+              name="dosage"
+              control={control}
+              render={({ field, fieldState }) => (
+                <TextInput
+                  id="dosage-input"
+                  labelText={t('dosage', 'Dosage')}
+                  placeholder={t('enterDosage', 'e.g., 250mg, 500ml')}
+                  value={field.value}
+                  onChange={field.onChange}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column sm={4} md={4} lg={8}>
+            <Controller
+              name="route"
+              control={control}
+              render={({ field, fieldState }) => (
+                <Dropdown
+                  id="route-dropdown"
+                  titleText={t('route', 'Route')}
+                  label={t('selectRoute', 'Select route')}
+                  items={routeOptions}
+                  itemToString={(item) => (item ? item.text : '')}
+                  selectedItem={field.value ? routeOptions.find((opt) => opt.id === field.value) : null}
+                  onChange={({ selectedItem }) => field.onChange(selectedItem?.id || '')}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column sm={4} md={8} lg={16}>
+            <Controller
+              name="frequency"
+              control={control}
+              render={({ field, fieldState }) => (
+                <Dropdown
+                  id="frequency-dropdown"
+                  titleText={t('frequency', 'Frequency')}
+                  label={t('selectFrequency', 'Select frequency')}
+                  items={frequencyOptions}
+                  itemToString={(item) => (item ? item.text : '')}
+                  selectedItem={field.value ? frequencyOptions.find((opt) => opt.id === field.value) : null}
+                  onChange={({ selectedItem }) => field.onChange(selectedItem?.id || '')}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+        </Grid>
+      </div>
+    </Modal>
+  );
+};
+
+export default DrugsIVFluidsForm;