@digihmis/esm-outpatient-app 1.0.0

package/src/page-header/page-header.scss

@@ -0,0 +1,76 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  border: 1px solid colors.$gray-20;
+  border-left: 0px;
+  display: flex;
+  background: var(--cds-field);
+  justify-content: space-between;
+  margin-top: 1.5rem;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-01');
+  color: colors.$gray-80;
+  padding-top: layout.$spacing-05;
+  padding-bottom: layout.$spacing-07;
+}
+
+.page-subtitle {
+  @include type.type-style('caption-01');
+  color: colors.$gray-70;
+  font-size: layout.$spacing-06;
+}
+.page-name {
+  @include type.type-style('caption-01');
+  color: colors.$gray-80;
+  font-size: layout.$spacing-05;
+}
+
+.page-labels {
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.date-and-location {
+  margin-top: layout.$spacing-03;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: layout.$spacing-05;
+  @include type.type-style('caption-01');
+  font-size: 0.83rem;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('caption-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+}

package/src/patient-management/components/auto-suggest/autosuggest.component.tsx

@@ -0,0 +1,149 @@
+import { InlineLoading, Layer, Search } from '@carbon/react';
+import classNames from 'classnames';
+import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './autosuggest.scss';
+
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
+interface SearchProps extends InputPropsBase {
+  autoComplete?: string;
+  className?: string;
+  closeButtonLabelText?: string;
+  defaultValue?: string | number;
+  disabled?: boolean;
+  isExpanded?: boolean;
+  id?: string;
+  labelText: React.ReactNode;
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+  onClear?(): void;
+  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
+  placeholder?: string;
+  renderIcon?: React.ComponentType | React.FunctionComponent;
+  role?: string;
+  size?: 'sm' | 'md' | 'lg';
+  type?: string;
+  value?: string | number;
+}
+
+interface AutosuggestProps extends SearchProps {
+  getDisplayValue: (item: any) => string;
+  getFieldValue: (item: any) => string;
+  getSearchResults: (query: string) => Promise<any>;
+  onSuggestionSelected: (field: string, value: string) => void;
+  invalid?: boolean;
+  invalidText?: string;
+  renderSuggestionItem?: (item: any) => React.ReactNode;
+  renderEmptyState?: (value: any) => React.ReactNode;
+}
+
+export const Autosuggest: React.FC<AutosuggestProps> = ({
+  getDisplayValue,
+  getFieldValue,
+  getSearchResults,
+  onSuggestionSelected,
+  invalid,
+  invalidText,
+  renderSuggestionItem,
+  renderEmptyState,
+  ...searchProps
+}) => {
+  const { t } = useTranslation();
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const searchBox = useRef<HTMLInputElement>(null);
+  const wrapper = useRef<HTMLDivElement>(null);
+  const { id: name, labelText } = searchProps;
+
+  useEffect(() => {
+    const handleClickOutsideComponent = (e: MouseEvent) => {
+      if (wrapper.current && !wrapper.current.contains(e.target as Node)) {
+        setSuggestions([]);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  const handleChange = (e) => {
+    const query = e.target.value;
+    onSuggestionSelected(name, undefined);
+
+    if (query && query.trim()) {
+      setIsLoading(true);
+      getSearchResults(query.trim())
+        .then((results) => {
+          setSuggestions(results || []);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setSuggestions([]);
+          setIsLoading(false);
+        });
+    } else {
+      setSuggestions([]);
+      setIsLoading(false);
+    }
+  };
+
+  const handleClear = () => {
+    onSuggestionSelected(name, undefined);
+    setSuggestions([]);
+    setIsLoading(false);
+  };
+
+  const handleClick = (index: number) => {
+    const selectedSuggestion = suggestions[index];
+    if (selectedSuggestion) {
+      const fieldValue = getFieldValue(selectedSuggestion);
+      const displayValue = getDisplayValue(selectedSuggestion);
+      if (searchBox.current) {
+        searchBox.current.value = displayValue;
+      }
+      onSuggestionSelected(name, fieldValue);
+      setSuggestions([]);
+    }
+  };
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper}>
+      <label className="cds--label">{labelText}</label>
+      <Layer className={classNames({ [styles.invalid]: invalid })}>
+        <Search
+          id="autosuggest"
+          onChange={handleChange}
+          onClear={handleClear}
+          ref={searchBox}
+          className={styles.autocompleteSearch}
+          {...searchProps}
+        />
+      </Layer>
+      {isLoading && (
+        <div className={styles.loading}>
+          <InlineLoading status="active" description={t('loading', 'Loading...')} />
+        </div>
+      )}
+      {suggestions.length > 0 ? (
+        <ul className={styles.suggestions}>
+          {suggestions.map((suggestion, index) => {
+            return (
+              <li
+                key={getFieldValue(suggestion) || index}
+                onClick={() => handleClick(index)}
+                role="presentation"
+                style={{ cursor: 'pointer' }}>
+                {renderSuggestionItem ? renderSuggestionItem(suggestion) : getDisplayValue(suggestion)}
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        !isLoading && renderEmptyState && renderEmptyState(searchBox.current?.value || '')
+      )}
+      {invalid && <label className={classNames(styles.invalidMsg)}>{invalidText}</label>}
+    </div>
+  );
+};

package/src/patient-management/components/auto-suggest/autosuggest.scss

@@ -0,0 +1,61 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.suggestions {
+  position: relative;
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 0;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background-color: colors.$white;
+  margin-bottom: 20px;
+  z-index: 99;
+  box-shadow: layout.$spacing-03 layout.$spacing-03 layout.$spacing-03 layout.$spacing-03 colors.$gray-30;
+}
+
+.suggestions li {
+  color: colors.$gray-70;
+  border-bottom: 1px solid colors.$gray-50;
+}
+
+.displayText {
+  padding: layout.$spacing-05;
+}
+
+.suggestions li:not(:last-of-type) {
+  border-bottom: 1px solid colors.$gray-40-hover;
+}
+
+.autocomplete {
+  position: relative;
+}
+
+.autocompleteSearch {
+  width: 100%;
+}
+
+.suggestions a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.invalid input {
+  outline: 2px solid var(--cds-support-error, colors.$red-60);
+  outline-offset: -2px;
+  margin-bottom: layout.$spacing-02;
+}
+
+.invalidMsg {
+  color: var(--cds-text-error, colors.$red-60);
+  font-size: small;
+}

package/src/patient-management/components/auto-suggest/diagnosis-autosuggest.component.tsx

@@ -0,0 +1,131 @@
+import React, { useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tag } from '@carbon/react';
+import styles from './diagnosis-autosuggest.scss';
+import { GenericItem } from '../../patient-management-workspace/patient-management-schema';
+import { Autosuggest } from './autosuggest.component';
+import { useDiagnosis } from '../../patient-management-workspace/patient-management.resource';
+
+interface DiagnosisAutosuggestProps {
+  id: string;
+  labelText: string;
+  placeholder?: string;
+  selectedDiagnoses: Array<GenericItem>;
+  onChange: (diagnoses: Array<GenericItem>) => void;
+  invalid?: boolean;
+  invalidText?: string;
+}
+
+export const DiagnosisAutosuggest: React.FC<DiagnosisAutosuggestProps> = ({
+  id,
+  labelText,
+  placeholder = 'Search for diagnosis',
+  selectedDiagnoses,
+  onChange,
+  invalid = false,
+  invalidText,
+}) => {
+  const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const { diagnoses, isLoading } = useDiagnosis(searchQuery);
+
+  const diagnosesRef = useRef<any[]>([]);
+
+  useEffect(() => {
+    if (diagnoses && diagnoses.length > 0) {
+      diagnosesRef.current = diagnoses;
+    }
+  }, [diagnoses]);
+
+  const getSearchResults = async (query: string): Promise<any[]> => {
+    setSearchQuery(query);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    return diagnoses || [];
+  };
+
+  const handleSuggestionSelected = (fieldName: string, value: string) => {
+    if (value) {
+      const selectedDiagnosis = diagnosesRef.current.find((d) => d.uuid === value);
+
+      if (selectedDiagnosis) {
+        const newDiagnosis: GenericItem = {
+          id: selectedDiagnosis.uuid,
+          text: selectedDiagnosis.display,
+        };
+
+        const alreadySelected = selectedDiagnoses.some((d) => d.id === value);
+
+        if (!alreadySelected) {
+          const updated = [...selectedDiagnoses, newDiagnosis];
+          onChange(updated);
+        }
+      }
+    }
+  };
+
+  const handleRemoveDiagnosis = (diagnosisId: string) => {
+    const updated = selectedDiagnoses.filter((d) => d.id !== diagnosisId);
+    onChange(updated);
+  };
+
+  return (
+    <div className={styles.diagnosisAutosuggestContainer}>
+      {selectedDiagnoses.length > 0 && (
+        <div className={styles.selectedDiagnosesTags}>
+          {selectedDiagnoses.map((diagnosis) => (
+            <Tag
+              key={diagnosis.id}
+              type="cyan"
+              filter
+              onClose={() => handleRemoveDiagnosis(diagnosis.id)}
+              className={styles.diagnosisTag}>
+              {diagnosis.text}
+            </Tag>
+          ))}
+        </div>
+      )}
+
+      <Autosuggest
+        id={id}
+        labelText={labelText}
+        placeholder={placeholder}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        getSearchResults={getSearchResults}
+        onSuggestionSelected={handleSuggestionSelected}
+        invalid={invalid}
+        invalidText={invalidText}
+        renderSuggestionItem={(item) => (
+          <div className={styles.suggestionItem}>
+            <span className={styles.diagnosisDisplay}>{item.display}</span>
+          </div>
+        )}
+        renderEmptyState={(value) => {
+          if (!value || value.trim().length === 0) {
+            return null;
+          }
+
+          if (value.length < 3) {
+            return (
+              <div className={styles.emptyState}>{t('typeMoreCharacters', 'Type at least 3 characters to search')}</div>
+            );
+          }
+
+          if (isLoading) {
+            return <div className={styles.emptyState}>{t('searchingDiagnosis', 'Searching...')}</div>;
+          }
+
+          if (searchQuery.length >= 3 && (!diagnoses || diagnoses.length === 0)) {
+            return (
+              <div className={styles.emptyState}>
+                {t('noDiagnosisFound', 'No diagnosis codes found. Try different keywords.')}
+              </div>
+            );
+          }
+
+          return null;
+        }}
+      />
+    </div>
+  );
+};

package/src/patient-management/components/auto-suggest/diagnosis-autosuggest.scss

@@ -0,0 +1,42 @@
+// diagnosis-autosuggest.scss
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.diagnosisAutosuggestContainer {
+  margin-bottom: layout.$spacing-05;
+
+  .selectedDiagnosesTags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: layout.$spacing-03;
+    margin-bottom: layout.$spacing-04;
+
+    .diagnosisTag {
+      max-width: 100%;
+    }
+  }
+
+  .suggestionItem {
+    padding: layout.$spacing-04 layout.$spacing-05;
+    cursor: pointer;
+    transition: background-color 0.1s;
+
+    &:hover {
+      background-color: colors.$gray-20;
+    }
+
+    .diagnosisDisplay {
+      font-size: 0.875rem;
+      color: colors.$gray-100;
+      line-height: 1.25rem;
+    }
+  }
+
+  .emptyState {
+    padding: layout.$spacing-05;
+    text-align: center;
+    color: colors.$gray-70;
+    font-size: 0.875rem;
+    font-style: italic;
+  }
+}

package/src/patient-management/patient-banner/patient-banner.component.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+  getPatientName,
+  PatientBannerPatientInfo,
+  PatientBannerToggleContactDetailsButton,
+  PatientPhoto,
+} from '@openmrs/esm-framework';
+import styles from './patient-banner.scss';
+
+interface PatientBannerProps {
+  patient: fhir.Patient;
+  patientUuid: string;
+  hideActionsOverflow?: boolean;
+}
+
+const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid }) => {
+  const patientBannerRef = useRef(null);
+  const [isTabletViewport, setIsTabletViewport] = useState(false);
+  const [showContactDetails, setShowContactDetails] = useState(false);
+
+  useEffect(() => {
+    const currentRef = patientBannerRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setIsTabletViewport(entry.contentRect.width < 1023);
+      }
+    });
+    resizeObserver.observe(patientBannerRef.current);
+    return () => {
+      if (currentRef) {
+        resizeObserver.unobserve(currentRef);
+      }
+    };
+  }, [patientBannerRef, setIsTabletViewport]);
+
+  const patientName = patient ? getPatientName(patient) : '';
+
+  const isDeceased = Boolean(patient?.deceasedDateTime);
+
+  return (
+    <header
+      aria-label="patient banner"
+      className={classNames(
+        styles.container,
+        isDeceased ? styles.deceasedPatientContainer : styles.activePatientContainer,
+      )}
+      role="banner"
+      ref={patientBannerRef}>
+      <div className={styles.patientBanner}>
+        <div className={styles.patientAvatar}>
+          <PatientPhoto patientUuid={patientUuid} patientName={patientName} />
+        </div>
+        <PatientBannerPatientInfo patient={patient} renderedFrom="patient-chart" />
+      </div>
+    </header>
+  );
+};
+
+export default PatientBanner;

package/src/patient-management/patient-banner/patient-banner.scss

@@ -0,0 +1,72 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  border-top: 0.063rem solid $ui-03;
+  border-bottom: 0.063rem solid $ui-03;
+  background-color: $ui-01;
+}
+
+.activePatientContainer,
+.deceasedPatientContainer {
+  background-color: $ui-01;
+}
+
+.buttonCol {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.patientBanner {
+  display: flex;
+}
+
+.patientAvatar {
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: layout.$spacing-05;
+  border-radius: 1px;
+}
+
+.patientAvatarButton {
+  cursor: pointer;
+  border: none;
+  padding: 0px;
+  background: none;
+}
+
+.contactDetails {
+  color: $text-02;
+  width: 100%;
+  display: flex;
+
+  a {
+    @include type.type-style('body-compact-01');
+    text-decoration: none;
+  }
+}
+
+.tabletContactDetails {
+  display: block;
+
+  .row {
+    &:first-child {
+      border-bottom: 1px solid $ui-03;
+    }
+  }
+
+  .row > .col {
+    &:nth-of-type(2n + 1) {
+      border-right: 1px solid $ui-03;
+    }
+  }
+}
+
+.toggleContactDetailsButton {
+  > svg {
+    fill: $color-blue-60-2 !important;
+  }
+}