@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/src/patient-chart/results-summary/print-results-summary.scss

@@ -0,0 +1,80 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+@import '../../root.scss';
+
+@media screen {
+  .printPage {
+    background-color: white;
+    display: none;
+  }
+}
+
+@media print {
+  @page {
+    size: auto;
+    margin: 5px;
+  }
+
+  .section {
+    margin: 5px;
+  }
+
+  table {
+    font-family: Arial, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  td,
+  th {
+    border: 1px solid #000;
+    text-align: left;
+    font-size: 8px;
+    padding: 8px;
+    width: 80px;
+  }
+
+  th {
+    background-color: #f2f2f2;
+  }
+
+  .headingText {
+    font-size: '10px';
+    font-weight: 'bold';
+    margin: '5px';
+  }
+
+  .header {
+    display: 'flex';
+    justify-content: 'space-around';
+    flex-direction: 'row';
+    align-items: 'center';
+    margin: ' 10px';
+  }
+
+  .facilityContainer {
+    display: 'flex';
+    flex-direction: 'row';
+    justify-content: 'space-between';
+  }
+
+  .patientContainer {
+    display: 'flex';
+    flex-direction: 'column';
+  }
+
+  .headerSection {
+    display: 'flex';
+    flex-direction: 'column';
+    justify-content: 'center';
+    align-items: 'center';
+  }
+
+  .footerSection {
+    margin: '10px';
+    display: 'flex';
+    width: '500px';
+    flex-direction: 'row';
+  }
+}

package/src/patient-chart/results-summary/print-results-table.component.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import styles from './print-results-summary.scss';
+import { type GroupMember } from '../patient-procedure-order-results.resource';
+import { useGetConceptById } from './results-summary.resource';
+import { InlineLoading } from '@carbon/react';
+
+interface PrintResultsTableProps {
+  groupedResults: any[];
+}
+
+interface ResultsRowProps {
+  groupMembers: GroupMember[];
+}
+
+interface ValueUnitsProps {
+  conceptUuid: string;
+}
+
+const PrintResultsTable: React.FC<PrintResultsTableProps> = ({ groupedResults }) => {
+  const RowTest: React.FC<ResultsRowProps> = ({ groupMembers }) => {
+    // get Units
+    const ValueUnits: React.FC<ValueUnitsProps> = ({ conceptUuid }) => {
+      const { concept, isLoading, isError } = useGetConceptById(conceptUuid);
+
+      if (isLoading) {
+        return <InlineLoading status="active" />;
+      }
+      if (isError) {
+        return <span>Error</span>;
+      }
+
+      return <span style={{ marginLeft: '10px' }}>{concept?.units ?? 'N/A'}</span>;
+    };
+
+    // get Reference Range
+    const ReferenceRange: React.FC<ValueUnitsProps> = ({ conceptUuid }) => {
+      const { concept, isLoading, isError } = useGetConceptById(conceptUuid);
+
+      if (isLoading) {
+        return <InlineLoading status="active" />;
+      }
+      if (isError) {
+        return <span>Error</span>;
+      }
+
+      const lowNormal = concept?.lowNormal !== undefined ? concept.lowNormal : '--';
+      const hiNormal = concept?.hiNormal !== undefined ? concept.hiNormal : '--';
+
+      return (
+        <>
+          {concept?.hiNormal === undefined || concept?.lowNormal === undefined ? (
+            'N/A'
+          ) : (
+            <div>
+              <span>{lowNormal}</span> : <span>{hiNormal}</span>
+            </div>
+          )}
+        </>
+      );
+    };
+
+    return (
+      <>
+        {groupMembers?.map((element, index) => (
+          <tr key={index}>
+            <td>{element?.concept.display}</td>
+            <td>{typeof element.value === 'object' ? element.value.display : element.value}</td>
+            <td>
+              <ReferenceRange conceptUuid={element.concept.uuid} />
+            </td>
+            <td>
+              <ValueUnits conceptUuid={element.concept.uuid} />
+            </td>
+          </tr>
+        ))}
+      </>
+    );
+  };
+  return (
+    <section className={styles.section}>
+      <table>
+        <thead>
+          <tr>
+            <th>Tests</th>
+            <th>Result</th>
+            <th>Reference Range</th>
+            <th>Units</th>
+          </tr>
+        </thead>
+      </table>
+      <table>
+        <tbody>
+          {Object.keys(groupedResults).map((test) => {
+            const { uuid, groupMembers } = groupedResults[test];
+            const isGrouped = uuid && groupMembers?.length > 0;
+            return (
+              <tr key={test} style={{ margin: '10px' }}>
+                <span
+                  style={{
+                    margin: '10px',
+                    fontSize: '8px',
+                    fontWeight: 'bold',
+                  }}>
+                  {test}
+                </span>
+                <table style={{ margin: '10px' }}>
+                  {isGrouped && <RowTest groupMembers={groupMembers} />}
+                  {!isGrouped && (
+                    <tr>
+                      <td>
+                        <span>{groupedResults[test]?.order?.display}</span>
+                      </td>
+                      <td>
+                        <span>{groupedResults[test]?.value?.display}</span>
+                      </td>
+                      <td>
+                        <span>{'N/A'}</span>
+                      </td>
+                      <td>
+                        <span>{'N/A'}</span>
+                      </td>
+                    </tr>
+                  )}{' '}
+                </table>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </section>
+  );
+};
+
+export default PrintResultsTable;

package/src/patient-chart/results-summary/results-summary.resource.tsx

@@ -0,0 +1,174 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type ObsMetaInfo } from '@openmrs/esm-patient-common-lib';
+
+import useSWR from 'swr';
+
+export type ObservationInterpretation = 'critically_low' | 'critically_high' | 'high' | 'low' | 'normal';
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  name: Name;
+  datatype: Datatype;
+  conceptClass: ConceptClass;
+  set: boolean;
+  version: any;
+  retired: boolean;
+  names: Name2[];
+  descriptions: Description[];
+  mappings: Mapping[];
+  answers: any[];
+  setMembers: any[];
+  auditInfo: AuditInfo;
+  hiNormal: number;
+  hiAbsolute: number;
+  hiCritical: number;
+  lowNormal: number;
+  lowAbsolute: number;
+  lowCritical: number;
+  units: string;
+  allowDecimal: boolean;
+  displayPrecision: any;
+  attributes: any[];
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Name {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Datatype {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  hl7Abbreviation: string;
+  retired: boolean;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface ConceptClass {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Name2 {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType?: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Description {
+  display: string;
+  uuid: string;
+  description: string;
+  locale: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Mapping {
+  display: string;
+  uuid: string;
+  conceptReferenceTerm: ConceptReferenceTerm;
+  conceptMapType: ConceptMapType;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface ConceptReferenceTerm {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface ConceptMapType {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: ChangedBy;
+  dateChanged: string;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface ChangedBy {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export function assessValue(value: number, range: ObsMetaInfo): ObservationInterpretation {
+  if (range?.hiCritical && value >= range.hiCritical) {
+    return 'critically_high';
+  }
+
+  if (range?.hiNormal && value > range.hiNormal) {
+    return 'high';
+  }
+
+  if (range?.lowCritical && value <= range.lowCritical) {
+    return 'critically_low';
+  }
+
+  if (range?.lowNormal && value < range.lowNormal) {
+    return 'low';
+  }
+
+  return 'normal';
+}
+
+export function useGetConceptById(conceptUuid: string) {
+  const apiUrl = `${restBaseUrl}/concept/${conceptUuid}?v=full`;
+  const { data, error, isLoading } = useSWR<{ data: ConceptResponse }, Error>(apiUrl, openmrsFetch);
+  return {
+    concept: data?.data,
+    isLoading,
+    isError: error,
+  };
+}
+
+export async function GetPatientByUuid(uuid: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/patient/${uuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+  });
+}

package/src/patient-chart/results-summary/results-summary.scss

@@ -0,0 +1,158 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+@import '../../root.scss';
+
+.section {
+  margin: 5px;
+}
+
+.tileContainer {
+  background-color: vars.$ui-02;
+  border-top: 1px solid vars.$ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: vars.$text-02;
+  margin-bottom: 0.5rem;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: vars.$text-02;
+}
+
+.separator {
+  @include type.type-style('body-compact-02');
+  color: vars.$text-02;
+  width: 80%;
+  margin: 1.5rem auto;
+  overflow: hidden;
+  text-align: center;
+
+  &::before,
+  &::after {
+    background-color: vars.$text-03;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
+
+  &::before {
+    right: 0.5rem;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: 0.5rem;
+    margin-right: -50%;
+  }
+}
+
+td {
+  white-space: nowrap;
+}
+
+.criticallyLow,
+.criticallyHigh,
+.low,
+.high {
+  td:nth-child(2) {
+    @include type.type-style('heading-compact-01');
+  }
+}
+
+.criticallyLow,
+.criticallyHigh {
+  border: 2px solid colors.$red-60 !important;
+}
+
+.low,
+.high {
+  border: 1.5px solid colors.$black-100 !important;
+}
+
+.criticallyLow {
+  td:nth-child(2)::after {
+    content: ' ↓↓';
+  }
+}
+
+.criticallyHigh {
+  td:nth-child(2)::after {
+    content: ' ↑↑';
+  }
+}
+
+.low {
+  td:nth-child(2)::after {
+    content: ' ↓';
+  }
+}
+
+.high {
+  td:nth-child(2)::after {
+    content: ' ↑';
+  }
+}
+
+.off-scale-low {
+  td:nth-child(2)::after {
+    content: ' ↓↓↓';
+  }
+}
+
+.off-scale-high {
+  td:nth-child(2)::after {
+    content: ' ↑↑↑';
+  }
+}
+
+.offScaleHigh,
+.offScaleLow,
+.criticallyHigh,
+.criticallyLow,
+.high,
+.low {
+  @include type.type-style('heading-compact-01');
+}
+
+.criticallyLow::after {
+  content: ' ↓↓';
+}
+
+.criticallyHigh::after {
+  content: ' ↑↑';
+}
+
+.low::after {
+  content: ' ↓';
+}
+
+.high::after {
+  content: ' ↑';
+}
+
+.cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td {
+  background-color: #fff;
+  border-bottom: 1px solid #e0e0e0;
+  border-top: 1px solid #e0e0e0;
+  padding: 0 16px;
+}

package/src/patient-chart/results-summary/send-email-dialog.component.tsx

@@ -0,0 +1,59 @@
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, TextInput, InlineLoading } from '@carbon/react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePatient } from '@openmrs/esm-framework';
+import styles from './results-summary.scss';
+
+interface SendEmailDialogProps {
+  patientUuid: string;
+  closeModal: () => void;
+  sendEmail: () => Promise<void>;
+}
+
+const SendEmailDialog: React.FC<SendEmailDialogProps> = ({ patientUuid, closeModal, sendEmail }) => {
+  const { t } = useTranslation();
+
+  const [email, setEmail] = useState();
+
+  const { patient, isLoading } = usePatient(patientUuid);
+
+  return (
+    <>
+      <Form onSubmit={sendEmail}>
+        <ModalHeader closeModal={closeModal} title={t('sendResults', 'Send Results')} />
+        <ModalBody>
+          {isLoading && (
+            <InlineLoading
+              className={styles.bannerLoading}
+              iconDescription="Loading"
+              description="Loading banner"
+              status="active"
+            />
+          )}
+          {patient?.address ? (
+            <div>
+              <TextInput
+                id="text-input-email"
+                invalidText="Error message goes here"
+                labelText="Email"
+                onChange={(e) => setEmail(e.target.value)}
+                size="md"
+                type="email"
+              />
+            </div>
+          ) : (
+            "Patient doesn't have an email address"
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button type="submit">{t('sendEmail', 'Send Email')}</Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
+};
+
+export default SendEmailDialog;