@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

package/src/components/anaesthetic/forms/post-operative-summary-form.component.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { Column, Grid, Modal, NumberInput, TextArea, TextInput } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import styles from '../anaesthetic-data-form.scss';
+
+export type PostOperativeSummaryFormData = {
+  position: string;
+  estimatedBloodLoss: number | string;
+  resultsOfOperation: string;
+  postOperativeManagement: string;
+};
+
+type PostOperativeSummaryFormProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: PostOperativeSummaryFormData) => Promise<void> | void;
+  isSaving?: boolean;
+};
+
+const PostOperativeSummaryForm: React.FC<PostOperativeSummaryFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  isSaving = false,
+}) => {
+  const { t } = useTranslation();
+  const { control, handleSubmit, reset } = useForm<PostOperativeSummaryFormData>({
+    defaultValues: {
+      position: '',
+      estimatedBloodLoss: '',
+      resultsOfOperation: '',
+      postOperativeManagement: '',
+    },
+  });
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const handleFormSubmit = async (data: PostOperativeSummaryFormData) => {
+    try {
+      await onSubmit(data);
+
+      showSnackbar({
+        title: t('postOperativeSummarySaved', 'Post Operative Summary saved'),
+        subtitle: t('postOperativeSummarySavedToBackend', 'Post Operative Summary has been saved to backend'),
+        kind: 'success',
+        isLowContrast: true,
+      });
+
+      reset();
+      onClose();
+    } catch (error) {
+      showSnackbar({
+        title: t('postOperativeSummarySaveFailed', 'Failed to save Post Operative Summary'),
+        subtitle:
+          error instanceof Error
+            ? error.message
+            : t('failedToSavePostOperativeSummary', 'Failed to save post operative summary data'),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={handleClose}
+      modalHeading={t('postOperativeSummary', 'Post Operative Summary')}
+      primaryButtonText={isSaving ? t('saving', 'Saving...') : t('save', 'Save')}
+      primaryButtonDisabled={isSaving}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSubmit(handleFormSubmit)}
+      onSecondarySubmit={handleClose}
+      size="md">
+      <div className={styles.modalContent}>
+        <Grid>
+          <Column sm={4} md={8} lg={16}>
+            <Controller
+              name="position"
+              control={control}
+              rules={{ required: t('positionRequired', 'Position is required') }}
+              render={({ field, fieldState }) => (
+                <TextInput
+                  id="post-operative-position"
+                  labelText={t('position', 'Position')}
+                  placeholder={t('enterPosition', 'Enter position')}
+                  value={field.value}
+                  onChange={field.onChange}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column sm={4} md={8} lg={16}>
+            <Controller
+              name="estimatedBloodLoss"
+              control={control}
+              rules={{
+                required: t('estimatedBloodLossRequired', 'Estimated blood loss is required'),
+                validate: (value) =>
+                  value === '' || Number(value) < 0
+                    ? t('estimatedBloodLossInvalid', 'Estimated blood loss must be 0 or greater')
+                    : true,
+              }}
+              render={({ field, fieldState }) => (
+                <NumberInput
+                  id="estimated-blood-loss"
+                  label={t('estimatedBloodLoss', 'Estimated Blood Loss (ML)')}
+                  min={0}
+                  value={field.value === '' ? '' : Number(field.value)}
+                  onChange={(event, { value }) => field.onChange(value === '' ? '' : Number(value))}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column sm={4} md={8} lg={16}>
+            <Controller
+              name="resultsOfOperation"
+              control={control}
+              rules={{ required: t('resultsOfOperationRequired', 'Results of operation are required') }}
+              render={({ field, fieldState }) => (
+                <TextArea
+                  id="results-of-operation"
+                  labelText={t('resultsOfOperation', 'Results of Operation')}
+                  placeholder={t('enterResultsOfOperation', 'Enter results of operation')}
+                  rows={4}
+                  value={field.value}
+                  onChange={field.onChange}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column sm={4} md={8} lg={16}>
+            <Controller
+              name="postOperativeManagement"
+              control={control}
+              rules={{ required: t('postOperativeManagementRequired', 'Post-operative management is required') }}
+              render={({ field, fieldState }) => (
+                <TextArea
+                  id="post-operative-management"
+                  labelText={t('postOperativeManagement', 'Post-Operative management')}
+                  placeholder={t('enterPostOperativeManagement', 'Enter post-operative management')}
+                  rows={4}
+                  value={field.value}
+                  onChange={field.onChange}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+        </Grid>
+      </div>
+    </Modal>
+  );
+};
+
+export default PostOperativeSummaryForm;

package/src/components/anaesthetic/forms/time-picker-dropdown.component.tsx

@@ -0,0 +1,202 @@
+import React, { useMemo } from 'react';
+import { Select, SelectItem, FormGroup } from '@carbon/react';
+import styles from './time-picker-dropdown.scss';
+
+const MINUTE_INTERVAL = 1;
+
+function buildMinuteOptions() {
+  return Array.from({ length: 60 / MINUTE_INTERVAL }, (_, index) => {
+    const minute = String(index * MINUTE_INTERVAL).padStart(2, '0');
+    return minute;
+  });
+}
+
+interface TimePickerDropdownProps {
+  id: string;
+  labelText: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid?: boolean;
+  invalidText?: string;
+  existingTimeEntries?: Array<{ hour: number; time: string }>;
+  minTime?: string;
+}
+
+const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
+  id,
+  labelText,
+  value,
+  onChange,
+  invalid = false,
+  invalidText,
+  existingTimeEntries = [],
+  minTime,
+}) => {
+  const [hours, minutes] = value && value.includes(':') ? value.split(':') : ['', ''];
+  const latestEntry = useMemo(() => {
+    const allEntries = [...existingTimeEntries];
+    if (minTime && /^\d{2}:\d{2}$/.test(minTime)) {
+      allEntries.push({ hour: -1, time: minTime });
+    }
+    if (allEntries.length === 0) {
+      return null;
+    }
+    const sorted = allEntries.slice().sort((a, b) => {
+      const aTime = a.time.split(':').map(Number);
+      const bTime = b.time.split(':').map(Number);
+      const aTimeInMinutes = aTime[0] * 60 + aTime[1];
+      const bTimeInMinutes = bTime[0] * 60 + bTime[1];
+      return aTimeInMinutes - bTimeInMinutes;
+    });
+    return sorted[sorted.length - 1];
+  }, [existingTimeEntries, minTime]);
+  const minuteValues = useMemo(() => buildMinuteOptions(), []);
+
+  const hourOptions = useMemo(() => {
+    if (!latestEntry) {
+      return Array.from({ length: 24 }, (_, i) => {
+        const hour = i.toString().padStart(2, '0');
+        return { value: hour, text: hour, disabled: false, reason: '' };
+      });
+    }
+    const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
+    return Array.from({ length: 24 }, (_, i) => {
+      const hour = i.toString().padStart(2, '0');
+      let isDisabled = false;
+      let disableReason = '';
+      if (i < latestHour) {
+        isDisabled = true;
+        disableReason = 'before latest entry';
+      } else if (i === latestHour && latestMinute >= 55) {
+        isDisabled = true;
+        disableReason = 'latest entry full hour';
+      }
+      const displayText = isDisabled ? `${hour} ${disableReason}` : hour;
+      return {
+        value: hour,
+        text: displayText,
+        disabled: isDisabled,
+        reason: disableReason,
+      };
+    });
+  }, [latestEntry]);
+
+  const minuteOptions = useMemo(() => {
+    if (!latestEntry || !hours) {
+      return minuteValues.map((minute) => {
+        return { value: minute, text: minute, disabled: false };
+      });
+    }
+    const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
+    const currentHour = parseInt(hours);
+    return minuteValues.map((minute) => {
+      const minuteValue = parseInt(minute, 10);
+      let isDisabled = false;
+      let disableReason = '';
+      if (currentHour < latestHour) {
+        isDisabled = true;
+        disableReason = 'before latest entry';
+      } else if (currentHour === latestHour && minuteValue <= latestMinute) {
+        isDisabled = true;
+        disableReason = `≤ ${latestMinute} min`;
+      }
+      const displayText = isDisabled ? `${minute} ${disableReason}` : minute;
+      return { value: minute, text: displayText, disabled: isDisabled };
+    });
+  }, [hours, latestEntry, minuteValues]);
+
+  const handleHourChange = (selectedHour: string) => {
+    if (!selectedHour || selectedHour === '') {
+      return;
+    }
+    const hourOption = hourOptions.find((opt) => opt.value === selectedHour);
+    if (hourOption && hourOption.disabled) {
+      alert(`This hour (${selectedHour}) cannot be selected as it is before a previous entry.`);
+      return;
+    }
+    let defaultMinute = '00';
+    if (existingTimeEntries.length > 0 && latestEntry) {
+      const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
+      const selectedHourInt = parseInt(selectedHour);
+      if (selectedHourInt === latestHour) {
+        const nextValidMinute = Math.ceil((latestMinute + 1) / MINUTE_INTERVAL) * MINUTE_INTERVAL;
+        if (nextValidMinute < 60) {
+          defaultMinute = nextValidMinute.toString().padStart(2, '0');
+        } else {
+          alert(`Hour ${selectedHour} has no available time slots after ${latestEntry.time}`);
+          return;
+        }
+      }
+    }
+    const newTime = `${selectedHour}:${defaultMinute}`;
+    onChange(newTime);
+  };
+
+  const handleMinuteChange = (selectedMinute: string) => {
+    const newTime = `${hours || '00'}:${selectedMinute}`;
+    if (existingTimeEntries.length > 0 && latestEntry && hours) {
+      const currentHour = parseInt(hours);
+      const currentMinute = parseInt(selectedMinute);
+      const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
+      if (currentHour === latestHour && currentMinute <= latestMinute) {
+        alert(`Cannot select ${selectedMinute} minutes. Must select a time after ${latestEntry.time}`);
+        return;
+      }
+    }
+    onChange(newTime);
+  };
+
+  return (
+    <div className={styles.timePickerContainer}>
+      <FormGroup legendText={labelText} invalid={invalid === true}>
+        <div className={styles.timeInputsWrapper}>
+          <div className={styles.timeInput}>
+            <Select
+              id={`${id}-hours`}
+              labelText="Hours (HH)"
+              value={hours}
+              onChange={(e) => handleHourChange((e.target as HTMLSelectElement).value)}
+              invalid={invalid === true}>
+              <SelectItem value="" text="HH" />
+              {hourOptions.map((option) => (
+                <SelectItem
+                  key={option.value}
+                  value={option.disabled ? '' : option.value}
+                  text={option.text}
+                  disabled={option.disabled}
+                  className={option.disabled ? styles.disabledOption : undefined}
+                />
+              ))}
+            </Select>
+          </div>
+
+          <div className={styles.separator}>:</div>
+
+          <div className={styles.timeInput}>
+            <Select
+              id={`${id}-minutes`}
+              labelText="Minutes (MM)"
+              value={minutes}
+              onChange={(e) => handleMinuteChange((e.target as HTMLSelectElement).value)}
+              invalid={invalid === true}>
+              <SelectItem value="" text="MM" />
+              {minuteOptions.map((option) => (
+                <SelectItem
+                  key={option.value}
+                  value={option.value}
+                  text={option.text}
+                  disabled={option.disabled}
+                  className={option.disabled ? styles.disabledOption : undefined}
+                />
+              ))}
+            </Select>
+          </div>
+        </div>
+
+        {invalid && invalidText && <div className={styles.errorText}>{invalidText}</div>}
+      </FormGroup>
+    </div>
+  );
+};
+
+export default TimePickerDropdown;

package/src/components/anaesthetic/forms/time-picker-dropdown.scss

@@ -0,0 +1,107 @@
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '~@carbon/styles/scss/spacing' as *;
+@use '~@carbon/styles/scss/type' as *;
+@use '~@carbon/styles/scss/colors' as *;
+@use '~@carbon/styles/scss/theme' as *;
+
+.timePickerContainer {
+  width: 100%;
+  margin-bottom: $spacing-05;
+}
+
+.timeInputsWrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: $spacing-03;
+  margin-top: $spacing-03;
+}
+
+.timeInput {
+  flex: 1;
+  min-width: 80px;
+}
+
+.separator {
+  @include type-style('heading-compact-01');
+  color: var(--cds-text-primary);
+  padding-bottom: $spacing-05;
+  font-weight: 600;
+  font-size: 1.25rem;
+  align-self: center;
+  margin-top: $spacing-02;
+}
+
+.timePreview {
+  @include type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+  margin-top: $spacing-03;
+  padding: $spacing-03;
+  background-color: var(--cds-layer-01);
+  border-radius: 4px;
+  border-left: 3px solid var(--cds-support-success);
+}
+
+.timeConstraint {
+  @include type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+  margin-top: $spacing-03;
+  padding: $spacing-03;
+  background-color: var(--cds-layer-01);
+  border-radius: 4px;
+  border-left: 3px solid var(--cds-support-warning);
+}
+
+.usedTimesIndicator {
+  @include type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+  margin-top: $spacing-03;
+  padding: $spacing-03;
+  background-color: var(--cds-layer-accent);
+  border-radius: 4px;
+  border-left: 3px solid var(--cds-support-error);
+
+  small {
+    @include type-style('caption-01');
+    color: var(--cds-text-secondary);
+    font-style: italic;
+  }
+}
+
+.errorText {
+  @include type-style('caption-01');
+  color: var(--cds-support-error);
+  margin-top: $spacing-02;
+}
+
+// Disabled option styling for used times
+.disabledOption {
+  color: var(--cds-text-disabled) !important;
+  background-color: var(--cds-layer-disabled) !important;
+  opacity: 0.5 !important;
+  font-style: italic;
+  cursor: not-allowed !important;
+
+  &:hover {
+    background-color: var(--cds-layer-disabled) !important;
+    color: var(--cds-text-disabled) !important;
+  }
+}
+
+// Additional styling for disabled select items in Carbon
+:global(.cds--list-box__menu-item--disabled) {
+  color: var(--cds-text-disabled) !important;
+  background-color: var(--cds-layer-disabled) !important;
+  opacity: 0.5 !important;
+  font-style: italic;
+  cursor: not-allowed !important;
+
+  &:hover {
+    background-color: var(--cds-layer-disabled) !important;
+    color: var(--cds-text-disabled) !important;
+  }
+
+  &::after {
+    content: ' 🚫';
+    font-style: normal;
+  }
+}

package/src/components/anaesthetic/forms/time-picker-with-clock.component.tsx

@@ -0,0 +1,174 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { TextInput, Layer } from '@carbon/react';
+import { Time } from '@carbon/react/icons';
+import styles from './time-picker-with-clock.scss';
+
+interface TimePickerWithClockProps {
+  id: string;
+  labelText: string;
+  placeholder?: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid?: boolean;
+  invalidText?: string;
+}
+
+const TimePickerWithClock: React.FC<TimePickerWithClockProps> = ({
+  id,
+  labelText,
+  placeholder = 'HH:MM',
+  value,
+  onChange,
+  invalid = false,
+  invalidText,
+}) => {
+  const [isClockOpen, setIsClockOpen] = useState(false);
+  const [selectedHour, setSelectedHour] = useState<number | null>(null);
+  const [selectedMinute, setSelectedMinute] = useState<number | null>(null);
+  const clockRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (value && value.includes(':')) {
+      const [hours, minutes] = value.split(':').map(Number);
+      if (!isNaN(hours) && !isNaN(minutes)) {
+        setSelectedHour(hours);
+        setSelectedMinute(minutes);
+      }
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (clockRef.current && !clockRef.current.contains(event.target as Node)) {
+        setIsClockOpen(false);
+      }
+    };
+    if (isClockOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isClockOpen]);
+
+  const handleInputClick = () => {
+    setIsClockOpen(true);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+    onChange(inputValue);
+  };
+
+  const handleHourClick = (hour: number) => {
+    setSelectedHour(hour);
+    if (selectedMinute !== null) {
+      const timeString = `${hour.toString().padStart(2, '0')}:${selectedMinute.toString().padStart(2, '0')}`;
+      onChange(timeString);
+      setIsClockOpen(false);
+    }
+  };
+
+  const handleMinuteClick = (minute: number) => {
+    setSelectedMinute(minute);
+    if (selectedHour !== null) {
+      const timeString = `${selectedHour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+      onChange(timeString);
+      setIsClockOpen(false);
+    }
+  };
+
+  const renderClockFace = () => {
+    if (selectedHour === null) {
+      return (
+        <div className={styles.clockFace}>
+          <div className={styles.clockTitle}>Select Hour</div>
+          <div className={styles.clockNumbers}>
+            {Array.from({ length: 24 }, (_, i) => (
+              <button
+                key={i}
+                type="button"
+                className={`${styles.clockNumber} ${styles.hourNumber}`}
+                onClick={() => handleHourClick(i)}
+                style={{
+                  transform: `rotate(${i * 15}deg) translate(0, -80px) rotate(-${i * 15}deg)`,
+                }}>
+                {i.toString().padStart(2, '0')}
+              </button>
+            ))}
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.clockFace}>
+          <div className={styles.clockTitle}>
+            Select Minute
+            <button type="button" className={styles.backButton} onClick={() => setSelectedHour(null)}>
+              ← Back to Hours
+            </button>
+          </div>
+          <div className={styles.clockNumbers}>
+            {Array.from({ length: 12 }, (_, i) => {
+              const minute = i * 5;
+              return (
+                <button
+                  key={minute}
+                  type="button"
+                  className={`${styles.clockNumber} ${styles.minuteNumber}`}
+                  onClick={() => handleMinuteClick(minute)}
+                  style={{
+                    transform: `rotate(${i * 30}deg) translate(0, -80px) rotate(-${i * 30}deg)`,
+                  }}>
+                  {minute.toString().padStart(2, '0')}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className={styles.timePickerContainer}>
+      <div
+        className={styles.inputWrapper}
+        onClick={handleInputClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleInputClick();
+          }
+        }}
+        role="button"
+        tabIndex={0}>
+        <TextInput
+          ref={inputRef}
+          id={id}
+          labelText={labelText}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleInputChange}
+          invalid={invalid}
+          invalidText={invalidText}
+          readOnly
+        />
+        <div className={styles.clockIcon}>
+          <Time size={16} />
+        </div>
+      </div>
+
+      {isClockOpen && (
+        <Layer>
+          <div ref={clockRef} className={styles.clockDropdown}>
+            {renderClockFace()}
+          </div>
+        </Layer>
+      )}
+    </div>
+  );
+};
+
+export default TimePickerWithClock;