@digihmis/esm-triage-app 1.0.0

package/src/past-vitals/patient-vitals-history.scss

@@ -0,0 +1,75 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+:global(.cds--tabs .cds--tabs__nav-item--selected) {
+  border-bottom: 2px solid var(--cds-border-interactive, #4a90b8);
+  transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+:global(.cds--tabs .cds--tabs__nav-item:focus) {
+  outline: 0;
+  outline-offset: -2px;
+}
+
+.tabsContainer {
+  padding-left: layout.$spacing-06;
+  padding-right: layout.$spacing-06;
+  background: var(--cds-field);
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding-left: layout.$spacing-03;
+    padding-right: layout.$spacing-03;
+  }
+}
+
+.tabsHeaderRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    gap: layout.$spacing-03;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-03;
+  }
+}
+
+.buttonNotesTab {
+  margin-right: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-02 layout.$spacing-03;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    margin-right: layout.$spacing-02;
+  }
+}
+
+.buttonOtherTabs {
+  margin-right: layout.$spacing-06;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-02 layout.$spacing-03;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    margin-right: layout.$spacing-03;
+  }
+}
+
+.notesContainer {
+  padding-right: layout.$spacing-03;
+}
+
+.vitalsContainer {
+  padding-top: layout.$spacing-03;
+  padding-right: layout.$spacing-06;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding-right: layout.$spacing-03;
+  }
+}

package/src/past-vitals/triage-anthropometrics/antropometrics-chart.component.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Tab, TabListVertical, TabPanel, TabPanels, TabsVertical } from '@carbon/react';
+import { LineChart, ScaleTypes } from '@carbon/charts-react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import { type PatientVitalsAndBiometrics } from '../../record-vitals-workspace/common';
+import styles from './antropometrics-chart.scss';
+
+type BiometricType = 'weight' | 'height' | 'bmi';
+
+interface BiometricsChartProps {
+  conceptUnits: Map<string, string>;
+  config: ConfigObject;
+  patientBiometrics: Array<PatientVitalsAndBiometrics>;
+}
+
+interface BiometricChartData {
+  groupName: BiometricType;
+  title: string;
+  value: number | string;
+}
+
+const BiometricsChart: React.FC<BiometricsChartProps> = ({ patientBiometrics, conceptUnits, config }) => {
+  const { t } = useTranslation();
+  const { bmiUnit } = config.biometrics;
+  const [selectedBiometrics, setSelectedBiometrics] = useState<BiometricChartData>({
+    title: `${t('weight', 'Weight')} (${conceptUnits.get(config.concepts.weightUuid) ?? ''})`,
+    value: 'weight',
+    groupName: 'weight',
+  });
+
+  const biometrics: { id: BiometricType; title: string; value: BiometricType }[] = [
+    {
+      id: 'weight',
+      title: `${t('weight', 'Weight')} (${conceptUnits.get(config.concepts.weightUuid) ?? ''})`,
+      value: 'weight',
+    },
+    {
+      id: 'height',
+      title: `${t('height', 'Height')} (${conceptUnits.get(config.concepts.heightUuid) ?? ''})`,
+      value: 'height',
+    },
+    { id: 'bmi', title: `${t('bmi', 'BMI')} (${bmiUnit})`, value: 'bmi' },
+  ];
+
+  const chartData = useMemo(
+    () =>
+      patientBiometrics
+        .filter((biometrics) => biometrics[selectedBiometrics.value])
+        .slice(0, 10)
+        .sort((biometricA, biometricB) => new Date(biometricA.date).getTime() - new Date(biometricB.date).getTime())
+        .map(
+          (biometrics) =>
+            biometrics[selectedBiometrics.value] && {
+              group: selectedBiometrics.title,
+              key: formatDate(parseDate(biometrics.date), { year: true }),
+              value: biometrics[selectedBiometrics.value],
+              date: biometrics.date,
+            },
+        ),
+    [patientBiometrics, selectedBiometrics.title, selectedBiometrics.value],
+  );
+
+  const chartOptions = useMemo(() => {
+    return {
+      title: selectedBiometrics.title,
+      axes: {
+        bottom: {
+          title: t('date', 'Date'),
+          mapsTo: 'date',
+          scaleType: ScaleTypes.TIME,
+        },
+        left: {
+          mapsTo: 'value',
+          title: selectedBiometrics.title,
+          scaleType: ScaleTypes.LINEAR,
+          includeZero: false,
+        },
+      },
+      legend: {
+        enabled: false,
+      },
+      color: {
+        scale: {
+          [selectedBiometrics.title]: '#6929c4',
+        },
+      },
+      tooltip: {
+        customHTML: ([{ value, date }]) =>
+          `<div class="cds--tooltip cds--tooltip--shown" style="min-width: max-content; font-weight:600">${formatDate(
+            parseDate(date),
+            { year: true },
+          )} -
+          <span style="color: #c6c6c6; font-size: 1rem; font-weight:400">${value}</span></div>`,
+      },
+      toolbar: {
+        enabled: true,
+        numberOfIcons: 4,
+        controls: [
+          {
+            type: 'Zoom in',
+          },
+          {
+            type: 'Zoom out',
+          },
+          {
+            type: 'Reset zoom',
+          },
+          {
+            type: 'Export as CSV',
+          },
+          {
+            type: 'Export as PNG',
+          },
+          {
+            type: 'Make fullscreen',
+          },
+        ],
+      },
+      zoomBar: {
+        top: {
+          enabled: true,
+        },
+      },
+      height: '400px',
+    };
+  }, [selectedBiometrics, t]);
+
+  return (
+    <div className={styles.biometricChartContainer}>
+      <div className={styles.biometricsArea}>
+        <label className={styles.biometricLabel} htmlFor="biometrics-chart-radio-group">
+          {t('biometricDisplayed', 'Biometric displayed')}
+        </label>
+        <TabsVertical>
+          <TabListVertical aria-label="Biometrics tabs">
+            {biometrics.map(({ id, title, value }) => (
+              <Tab
+                className={classNames(styles.tab, styles.bodyLong01, {
+                  [styles.selectedTab]: selectedBiometrics.title === title,
+                })}
+                id={`${id}-tab`}
+                key={id}
+                onClick={() =>
+                  setSelectedBiometrics({
+                    title: title,
+                    value: value,
+                    groupName: id,
+                  })
+                }>
+                {title}
+              </Tab>
+            ))}
+          </TabListVertical>
+          <TabPanels>
+            {biometrics.map(({ id }) => (
+              <TabPanel key={id}>
+                <LineChart data={chartData} options={chartOptions} key={id} />
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </TabsVertical>
+      </div>
+    </div>
+  );
+};
+
+export default BiometricsChart;

package/src/past-vitals/triage-anthropometrics/antropometrics-chart.scss

@@ -0,0 +1,70 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
+
+.biometricChartContainer {
+  display: flex;
+  margin: 0 layout.$spacing-05;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.biometricsArea {
+  flex-grow: 1;
+  margin: layout.$spacing-03 0;
+
+  // This is a hack to override the max-width of the overflow menu button
+  :global(
+    .cds--chart-holder
+      .cds--cc--toolbar
+      .cds--overflow-menu-options
+      .cds--overflow-menu-options__option
+      .cds--overflow-menu-options__btn
+  ) {
+    max-width: none !important;
+  }
+
+  // Ensures the chart toolbar tooltips are visible
+  :global(.cds--tabs--vertical ~ .cds--tab-content) {
+    overflow-y: visible;
+  }
+}
+
+.biometricLabel {
+  @extend .label01;
+  margin-bottom: layout.$spacing-05;
+  display: inline-block;
+}
+
+.tab {
+  outline: 0;
+  outline-offset: 0;
+  min-height: layout.$spacing-07 !important;
+  block-size: layout.$spacing-05 !important;
+
+  &:active,
+  &:focus {
+    outline: layout.$spacing-01 solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    box-shadow: inset 4px 0 0 0 var(--brand-03) !important;
+    border-bottom: none;
+    font-weight: 600;
+    margin-left: 0 !important;
+  }
+
+  &[aria-selected='false'] {
+    border-bottom: none;
+    border-left: layout.$spacing-01 solid $ui-03;
+    margin-left: 0 !important;
+  }
+}

package/src/past-vitals/triage-anthropometrics/triage-antropometrics.component.tsx

@@ -0,0 +1,124 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ContentSwitcher, DataTableSkeleton, IconSwitch, InlineLoading } from '@carbon/react';
+import { Add, Analytics, Table } from '@carbon/react/icons';
+import { formatDatetime, parseDate, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { useConceptUnits, useVitalsAndBiometrics, withUnit } from '../../record-vitals-workspace/common';
+import { type ConfigObject } from '../../config-schema';
+import styles from './triage-antropometrics.scss';
+import { BiometricsTableHeader, BiometricsTableRow } from './type';
+import PaginatedBiometrics from '../paginated-antropometrics/paginated-antropometrics.component';
+import BiometricsChart from './antropometrics-chart.component';
+
+interface BiometricsBaseProps {
+  pageSize: number;
+  patientUuid: string;
+  patient: fhir.Patient;
+  urlLabel: string;
+}
+
+const BiometricsBase: React.FC<BiometricsBaseProps> = ({ patientUuid, patient, pageSize, urlLabel }) => {
+  const { t } = useTranslation();
+  const displayText = t('anthropometrics_lower', 'anthropometrics');
+  const headerTitle = t('anthropometrics', 'Anthropometrics');
+  const [chartView, setChartView] = useState(false);
+  const isTablet = useLayoutType() === 'tablet';
+
+  const config = useConfig<ConfigObject>();
+  const { bmiUnit } = config.biometrics;
+  const { data: biometrics, isLoading, error, isValidating } = useVitalsAndBiometrics(patientUuid, 'biometrics');
+  const { conceptUnits } = useConceptUnits();
+
+  const tableHeaders: Array<BiometricsTableHeader> = [
+    {
+      key: 'dateRender',
+      header: t('dateAndTime', 'Date and time'),
+      isSortable: true,
+      sortFunc: (valueA, valueB) => new Date(valueA.date).getTime() - new Date(valueB.date).getTime(),
+    },
+    {
+      key: 'weightRender',
+      header: withUnit(t('weight', 'Weight'), conceptUnits.get(config.concepts.weightUuid) ?? ''),
+      isSortable: true,
+      sortFunc: (valueA, valueB) => (valueA.weight && valueB.weight ? valueA.weight - valueB.weight : 0),
+    },
+    {
+      key: 'heightRender',
+      header: withUnit(t('height', 'Height'), conceptUnits.get(config.concepts.heightUuid) ?? ''),
+      isSortable: true,
+      sortFunc: (valueA, valueB) => (valueA.height && valueB.height ? valueA.height - valueB.height : 0),
+    },
+    {
+      key: 'bmiRender',
+      header: `${t('bmi', 'BMI')} (${bmiUnit})`,
+      isSortable: true,
+      sortFunc: (valueA, valueB) => (valueA.bmi && valueB.bmi ? valueA.bmi - valueB.bmi : 0),
+    },
+    {
+      key: 'muacRender',
+      header: withUnit(t('muac', 'MUAC'), conceptUnits.get(config.concepts.midUpperArmCircumferenceUuid) ?? ''),
+      isSortable: true,
+      sortFunc: (valueA, valueB) => (valueA.muac && valueB.muac ? valueA.muac - valueB.muac : 0),
+    },
+  ];
+
+  const tableRows: Array<BiometricsTableRow> = useMemo(
+    () =>
+      biometrics?.map((biometricsData, index) => {
+        return {
+          ...biometricsData,
+          dateRender: formatDatetime(parseDate(biometricsData.date.toString()), { mode: 'wide' }),
+          weightRender: biometricsData.weight ?? '--',
+          heightRender: biometricsData.height ?? '--',
+          bmiRender: biometricsData.bmi ?? '--',
+          muacRender: biometricsData.muac ?? '--',
+        };
+      }),
+    [biometrics],
+  );
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={headerTitle} />;
+  }
+
+  if (biometrics?.length) {
+    return (
+      <div className={styles.widgetCard}>
+        <CardHeader title={headerTitle}>
+          <div className={styles.biometricsHeaderActionItems}>
+            <ContentSwitcher
+              onChange={(evt) => setChartView(evt.name === 'chartView')}
+              size={isTablet ? 'md' : 'sm'}
+              selectedIndex={chartView ? 1 : 0}>
+              <IconSwitch name="tableView" text="Table view">
+                <Table size={16} />
+              </IconSwitch>
+              <IconSwitch name="chartView" text="Chart view">
+                <Analytics size={16} />
+              </IconSwitch>
+            </ContentSwitcher>
+          </div>
+        </CardHeader>
+        {chartView ? (
+          <BiometricsChart patientBiometrics={biometrics} conceptUnits={conceptUnits} config={config} />
+        ) : (
+          <PaginatedBiometrics
+            tableRows={tableRows}
+            pageSize={pageSize}
+            urlLabel={urlLabel}
+            tableHeaders={tableHeaders}
+            patient={patient}
+          />
+        )}
+      </div>
+    );
+  }
+  return <EmptyState displayText={displayText} headerTitle={headerTitle} />;
+};
+
+export default BiometricsBase;

package/src/past-vitals/triage-anthropometrics/triage-antropometrics.scss

@@ -0,0 +1,37 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.widgetCard {
+  border: 1px solid $ui-03;
+  background-color: $ui-02;
+}
+
+.biometricsHeaderActionItems {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: end;
+  padding-right: layout.$spacing-05;
+
+  & :global(.cds--content-switcher) {
+    max-width: max-content;
+
+    :global(.cds--content-switcher__label) {
+      height: layout.$spacing-05;
+    }
+  }
+}
+
+.divider {
+  width: 1px;
+  height: layout.$spacing-05;
+  color: $ui-05;
+  margin: 0 layout.$spacing-05;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: end;
+}

package/src/past-vitals/triage-anthropometrics/type/index.ts

@@ -0,0 +1,17 @@
+import { type PatientVitalsAndBiometrics } from '../../../record-vitals-workspace/common';
+
+export interface BiometricsTableRow extends PatientVitalsAndBiometrics {
+  id: string;
+  dateRender: string;
+  weightRender: string | number;
+  heightRender: string | number;
+  bmiRender: string | number;
+  muacRender: string | number;
+}
+
+export interface BiometricsTableHeader {
+  key: 'dateRender' | 'weightRender' | 'heightRender' | 'bmiRender' | 'muacRender';
+  header: string;
+  isSortable?: boolean;
+  sortFunc: (valueA: BiometricsTableRow, valueB: BiometricsTableRow) => number;
+}

package/src/past-vitals/triage-notes/triage-note.scss

@@ -0,0 +1,94 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.medicalNotesContainer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: layout.$spacing-05;
+  max-width: 100%;
+  width: 100%;
+  margin-top: layout.$spacing-05;
+
+  @media (max-width: 1056px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 672px) {
+    grid-template-columns: 1fr;
+  }
+}
+.emptyMedicalNotesContainer {
+  margin-top: layout.$spacing-03;
+}
+
+.noteCard {
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-20;
+  border-radius: 4px;
+  padding: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+  height: 100%;
+}
+
+.noteHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.noteTitle {
+  @include type.type-style('heading-compact-01');
+  margin: 0;
+  font-weight: 600;
+  color: colors.$gray-100;
+}
+
+.noteDate {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  font-size: 0.875rem;
+}
+
+.tagsContainer {
+  display: flex;
+  gap: layout.$spacing-03;
+  flex-wrap: wrap;
+}
+
+.noteContent {
+  @include type.type-style('body-compact-01');
+  margin: 0;
+  color: colors.$gray-100;
+  line-height: 1.6;
+  font-size: 0.875rem;
+  flex: 1;
+  text-align: justify;
+}
+
+.noteFooter {
+  display: flex;
+  justify-content: flex-start;
+  padding-top: layout.$spacing-03;
+  border-top: 1px solid colors.$gray-20;
+  margin-top: auto;
+}
+
+.authorName {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  font-size: 0.875rem;
+}
+
+.loadMoreContainer {
+  display: flex;
+  justify-content: center;
+  padding: layout.$spacing-05 0;
+  grid-column: 1 / -1;
+}
+
+.loadMoreButton {
+  min-width: 200px;
+}

package/src/past-vitals/triage-notes/triage-notes.component.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import type { Note } from './type';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import styles from './triage-note.scss';
+import { ConfigObject } from '../../config-schema';
+import { useConfig } from '@openmrs/esm-framework';
+import { useTriageNotes } from './triage-notes.resource';
+
+interface NotesSummaryProps {
+  patientUuid: string;
+  initialDisplayCount?: number;
+  loadMoreCount?: number;
+}
+
+const NotesSummary: React.FC<NotesSummaryProps> = ({ patientUuid, initialDisplayCount = 9, loadMoreCount = 9 }) => {
+  const { t } = useTranslation();
+  const [displayCount, setDisplayCount] = useState(initialDisplayCount);
+
+  const config = useConfig<ConfigObject>();
+  const { generalPatientNoteUuid } = config.concepts;
+  const { encounterTypeUuid } = config.vitals;
+
+  const { notes, error, isLoading } = useTriageNotes(patientUuid, generalPatientNoteUuid, encounterTypeUuid);
+
+  const handleLoadMore = () => {
+    setDisplayCount((prev) => prev + loadMoreCount);
+  };
+
+  if (notes.length === 0) {
+    return (
+      <div className={styles.emptyMedicalNotesContainer}>
+        <EmptyState displayText={t('notes__lower', 'notes')} headerTitle={t('nursesNote', "Nurse's note")} />
+      </div>
+    );
+  }
+
+  const displayedNotes = notes.slice(0, displayCount);
+  const hasMore = displayCount < notes.length;
+  const remainingCount = notes.length - displayCount;
+
+  return (
+    <>
+      <div className={styles.medicalNotesContainer}>
+        {displayedNotes.map((note, index) => (
+          <div key={index} className={styles.noteCard}>
+            <div className={styles.noteHeader}>
+              <h4 className={styles.noteTitle}>{t('nursesNote', "Nurse's note")}</h4>
+              <span className={styles.noteDate}>{note.time}</span>
+            </div>
+
+            <p className={styles.noteContent}>{note.note}</p>
+
+            <div className={styles.noteFooter}>
+              <span className={styles.authorName}>{note.provider.name}</span>
+            </div>
+          </div>
+        ))}
+
+        {hasMore && (
+          <div className={styles.loadMoreContainer}>
+            <Button kind="ghost" onClick={handleLoadMore} className={styles.loadMoreButton}>
+              {t('loadMore', 'Load more')} ({remainingCount}{' '}
+              {remainingCount === 1 ? t('note', 'note') : t('notes', 'notes')} {t('remaining', 'remaining')})
+            </Button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default NotesSummary;