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

package/src/maternal-and-child-health/partography/forms/time-picker-dropdown.component.tsx

@@ -0,0 +1,218 @@
+import React, { useMemo } from 'react';
+import { Select, SelectItem, FormGroup } from '@carbon/react';
+import styles from './time-picker-dropdown.scss';
+
+interface TimePickerDropdownProps {
+  id: string;
+  labelText: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid?: boolean;
+  invalidText?: string;
+  existingTimeEntries?: Array<{ hour: number; time: string }>;
+}
+
+const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
+  id,
+  labelText,
+  value,
+  onChange,
+  invalid = false,
+  invalidText,
+  existingTimeEntries = [],
+}) => {
+  const [hours, minutes] = value && value.includes(':') ? value.split(':') : ['', ''];
+
+  // Memoize sorted entries and latest entry to avoid re-sorting on every render
+  const latestEntry = useMemo(() => {
+    if (!existingTimeEntries || existingTimeEntries.length === 0) {
+      return null;
+    }
+    const sorted = existingTimeEntries.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]);
+
+  const isTimeDisabled = (hour: string, minute: string) => {
+    if (!latestEntry) {
+      return false;
+    }
+    const currentHour = parseInt(hour);
+    const currentMinute = parseInt(minute);
+    const currentTimeInMinutes = currentHour * 60 + currentMinute;
+    const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
+    const latestTimeInMinutes = latestHour * 60 + latestMinute;
+    return currentTimeInMinutes <= latestTimeInMinutes;
+  };
+
+  // Memoize options generation so we don't recreate arrays on every render
+  const hourOptions = useMemo(() => {
+    return Array.from({ length: 24 }, (_, i) => {
+      const hour = i.toString().padStart(2, '0');
+      let isDisabled = false;
+      let disableReason = '';
+      if (existingTimeEntries && existingTimeEntries.length > 0 && latestEntry) {
+        const [latestHour] = latestEntry.time.split(':').map(Number);
+        if (i < latestHour) {
+          isDisabled = true;
+          disableReason = 'before latest entry';
+        }
+      }
+      const displayText = isDisabled ? `${hour} ${disableReason}` : hour;
+      return {
+        value: hour,
+        text: displayText,
+        disabled: isDisabled,
+        reason: disableReason,
+      };
+    });
+  }, [existingTimeEntries, latestEntry]);
+
+  const minuteOptions = useMemo(() => {
+    return Array.from({ length: 12 }, (_, i) => {
+      const minute = (i * 5).toString().padStart(2, '0');
+      let isDisabled = false;
+      let disableReason = '';
+      if (hours && existingTimeEntries.length > 0 && latestEntry) {
+        const currentHour = parseInt(hours);
+        const currentMinute = i * 5;
+        const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
+        if (currentHour === latestHour && currentMinute <= latestMinute) {
+          isDisabled = true;
+          disableReason = `≤ ${latestMinute} min`;
+        }
+      }
+      const displayText = isDisabled ? `${minute} ${disableReason}` : minute;
+      return { value: minute, text: displayText, disabled: isDisabled };
+    });
+  }, [hours, existingTimeEntries, latestEntry]);
+
+  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) / 5) * 5;
+        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}>
+        <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}>
+              <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}>
+              <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>}
+
+        {latestEntry && (
+          <div className={styles.timeConstraint}>
+            Latest entry: <strong>{latestEntry.time}</strong> - Next measurement must be after this time
+          </div>
+        )}
+
+        {existingTimeEntries.length > 0 && (
+          <div className={styles.usedTimesIndicator}>
+            <strong>Time Restrictions:</strong>
+            <br />
+            <strong>Used Times:</strong> {existingTimeEntries.map((entry) => entry.time).join(', ')}
+            <br />
+            <strong>Blocked Hours:</strong>{' '}
+            {hourOptions
+              .filter((opt) => opt.disabled)
+              .map((opt) => opt.value)
+              .join(', ')}{' '}
+            (grayed out)
+            <br />
+            <small>You can only select times after the latest entry</small>
+          </div>
+        )}
+
+        {value && (
+          <div className={styles.timePreview}>
+            Selected Time: <strong>{value}</strong>
+          </div>
+        )}
+      </FormGroup>
+    </div>
+  );
+};
+
+export default TimePickerDropdown;

package/src/maternal-and-child-health/partography/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/maternal-and-child-health/partography/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;

package/src/maternal-and-child-health/partography/forms/time-picker-with-clock.scss

@@ -0,0 +1,178 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.timePickerContainer {
+  position: relative;
+  width: 100%;
+}
+
+.inputWrapper {
+  position: relative;
+  cursor: pointer;
+  input {
+    cursor: pointer;
+    caret-color: transparent;
+  }
+}
+
+.clockIcon {
+  position: absolute;
+  right: spacing.$spacing-05;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: $text-02;
+  z-index: 1;
+}
+
+.clockDropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: $ui-background;
+  border: 1px solid $ui-03;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+  padding: spacing.$spacing-05;
+  margin-top: spacing.$spacing-02;
+  min-height: 240px;
+}
+
+.clockFace {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.clockTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-05;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-03;
+}
+
+.backButton {
+  @include type.type-style('body-compact-01');
+  background: none;
+  border: none;
+  color: colors.$blue-60;
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 0;
+
+  &:hover {
+    color: colors.$blue-70;
+  }
+}
+
+.clockNumbers {
+  position: relative;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  border: 2px solid $ui-03;
+  background: $ui-background;
+}
+
+.clockNumber {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0 0;
+  width: 32px;
+  height: 32px;
+  border: 1px solid $ui-03;
+  border-radius: 50%;
+  background: $ui-background;
+  color: $text-02;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @include type.type-style('body-compact-01');
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: $ui-02;
+    border-color: colors.$blue-60;
+    transform: scale(1.1);
+  }
+
+  &:active {
+    background: colors.$blue-60;
+    color: colors.$white;
+  }
+}
+
+.hourNumber {
+  font-weight: 600;
+
+  &:hover {
+    background: colors.$green-50;
+    color: colors.$white;
+  }
+}
+
+.minuteNumber {
+  background: $ui-02;
+
+  &:hover {
+    background: colors.$purple-60;
+    color: colors.$white;
+  }
+}
+
+@media (max-width: 672px) {
+  .clockDropdown {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    transform: translate(-50%, -50%);
+    width: 90vw;
+    max-width: 300px;
+    border-radius: 8px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .clockNumbers {
+    width: 160px;
+    height: 160px;
+  }
+
+  .clockNumber {
+    width: 28px;
+    height: 28px;
+    @include type.type-style('body-compact-01');
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .clockDropdown {
+    background: $ui-02;
+    border-color: $ui-04;
+  }
+
+  .clockNumbers {
+    border-color: $ui-04;
+    background: $ui-background;
+  }
+
+  .clockNumber {
+    background: $ui-02;
+    border-color: $ui-04;
+    color: $text-02;
+
+    &:hover {
+      background: $ui-03;
+    }
+  }
+}