@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.20 → 5.4.2-pre.26

package/src/patient-chart/visit/visits-widget/visit-detail-overview.component.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import type { ChartConfig } from '../../../config-schema';
+import VisitHistoryTable from '../visit-history-table/visit-history-table.component';
+import AllEncountersTable from './past-visits-components/encounters-table/all-encounters-table.component';
+import styles from './visit-detail-overview.scss';
+
+interface VisitOverviewComponentProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+}
+
+function VisitDetailOverviewComponent({ patientUuid, patient }: VisitOverviewComponentProps) {
+  const { t } = useTranslation();
+  const [tabIndex, setTabIndex] = useState(0);
+  const { showAllEncountersTab } = useConfig<ChartConfig>();
+
+  return (
+    <div className={styles.tabs}>
+      <Tabs onChange={({ selectedIndex }) => setTabIndex(selectedIndex)} selectedIndex={tabIndex}>
+        <TabList aria-label="Visit detail tabs" className={styles.tabList}>
+          <Tab className={styles.tab} id="visit-summaries-tab">
+            {t('Visits', 'Visits')}
+          </Tab>
+          {showAllEncountersTab ? (
+            <Tab className={styles.tab} id="all-encounters-tab">
+              {t('allEncounters', 'All encounters')}
+            </Tab>
+          ) : (
+            <></>
+          )}
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <VisitHistoryTable patientUuid={patientUuid} patient={patient} />
+          </TabPanel>
+          {showAllEncountersTab && (
+            <TabPanel>
+              <AllEncountersTable patientUuid={patientUuid} />
+            </TabPanel>
+          )}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+}
+
+export default VisitDetailOverviewComponent;

package/src/patient-chart/visit/visits-widget/visit-detail-overview.scss

@@ -0,0 +1,262 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.visitType {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 5px;
+}
+
+.date {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  padding-right: 0.625rem;
+}
+
+.dateLabel {
+  padding-right: 0.313rem;
+}
+
+.displayFlex {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
+.container {
+  background-color: $ui-background;
+  border: 1px solid $grey-2;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-05 0 layout.$spacing-05;
+  width: 100%;
+}
+
+.tabs > :global(.cds--tab-content) {
+  padding: 0 0 !important;
+}
+
+.tabList {
+  position: sticky;
+  top: 3rem;
+  z-index: 10;
+  background-color: $ui-01;
+  border-bottom: 2px solid $ui-03;
+
+  & :global(.cds--tabs__nav-link) {
+    border-bottom: none !important;
+  }
+}
+
+.tab {
+  height: 2.5rem;
+
+  &:active,
+  &:focus {
+    outline: none !important;
+  }
+
+  &[aria-selected='true'] {
+    border-bottom: 3px solid var(--brand-03) !important;
+  }
+}
+
+.header {
+  .visitInfo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.header::after {
+  content: '';
+  display: block;
+  width: layout.$spacing-07;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.toggleButtons {
+  margin: 0 layout.$spacing-05;
+  height: layout.$spacing-08;
+}
+
+.toggle {
+  border: 1px solid colors.$blue-30;
+
+  &:hover {
+    background-color: $color-blue-10;
+  }
+
+  &:active,
+  &:focus {
+    box-shadow: none;
+    background-color: $color-blue-10;
+  }
+
+  &:first-of-type {
+    border-radius: layout.$spacing-02 0 0 layout.$spacing-02;
+  }
+
+  &:last-of-type {
+    border-radius: 0 layout.$spacing-02 layout.$spacing-02 0;
+  }
+}
+
+.emptyStateContainer {
+  text-align: center;
+  margin: layout.$spacing-05 0;
+}
+
+.observation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: layout.$spacing-03;
+  margin: layout.$spacing-05 layout.$spacing-05 0 0;
+}
+
+.observation > span {
+  align-self: center;
+}
+
+.flexSections {
+  display: flex;
+}
+
+.desktopTabs {
+  button {
+    height: layout.$spacing-07;
+  }
+}
+
+.tabletTabs {
+  button {
+    height: layout.$spacing-09;
+  }
+}
+
+.tabContent {
+  border-top: 1px solid $ui-03;
+  padding: layout.$spacing-05 0;
+  width: 70%;
+}
+
+.medicationRecord {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .bodyLong01 {
+    gap: layout.$spacing-02;
+    margin: layout.$spacing-02 0;
+  }
+}
+
+.medicationContainer {
+  background-color: $ui-01;
+  padding: layout.$spacing-05;
+  width: 100% !important;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.medicationContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.medicationContainer p {
+  margin: layout.$spacing-02 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.dosage {
+  @include type.type-style('heading-compact-01');
+}
+
+.toggleSwitch {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-bottom: layout.$spacing-02;
+}
+
+.toggleSwitch div {
+  width: 30%;
+}
+
+.noteText {
+  background-color: $ui-01;
+  padding: layout.$spacing-05;
+  width: 100% !important;
+  white-space: pre-wrap;
+}
+
+.metadata {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: layout.$spacing-03 0 layout.$spacing-05;
+}
+
+.observationsEmptyState {
+  margin-top: layout.$spacing-06;
+}
+
+.loader {
+  margin: 0 auto;
+}
+
+.notesContainer {
+  margin-bottom: layout.$spacing-07;
+}
+
+.visitDetailOverviewActions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.loadMoreButton {
+  :global(.cds--inline-loading) {
+    min-height: layout.$spacing-05 !important;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset !important;
+  }
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.tag {
+  margin: 0 layout.$spacing-02 0 !important;
+  text-transform: uppercase;
+}
+
+.text02 {
+  color: colors.$gray-70;
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .header {
+    .visitInfo {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}

package/src/patient-chart/visit/visits-widget/visit.resource.tsx

@@ -0,0 +1,144 @@
+import {
+  openmrsFetch,
+  restBaseUrl,
+  type OpenmrsResource,
+  type Visit,
+  useOpenmrsInfinite,
+  useOpenmrsPagination,
+} from '@openmrs/esm-framework';
+
+const customRepresentation =
+  'custom:(uuid,location,encounters:(uuid,diagnoses:(uuid,display,rank,diagnosis,certainty,voided),form:(uuid,display,name,description,encounterType,version,resources:(uuid,display,name,valueReference)),encounterDatetime,orders:full,obs:(uuid,concept:(uuid,display,conceptClass:(uuid,display)),display,groupMembers:(uuid,concept:(uuid,display),value:(uuid,display),display),value,obsDatetime),encounterType:(uuid,display,viewPrivilege,editPrivilege),encounterProviders:(uuid,display,encounterRole:(uuid,display),provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime,stopDatetime,patient,attributes:(attributeType:ref,display,uuid,value)';
+
+export function useInfiniteVisits(
+  patientUuid: string,
+  params: Record<string, number | string> = {},
+  rep: string = customRepresentation,
+) {
+  const url = new URL(
+    `${window.openmrsBase}/${restBaseUrl}/visit?patient=${patientUuid}&v=${rep}`,
+    window.location.toString(),
+  );
+  for (const key in params) {
+    url.searchParams.set(key, '' + params[key]);
+  }
+
+  const { data, mutate, ...rest } = useOpenmrsInfinite<Visit>(patientUuid ? url : null);
+
+  return { visits: data, mutate, ...rest };
+}
+
+export function usePaginatedVisits(
+  patientUuid: string,
+  pageSize: number,
+  params: Record<string, number | string> = {},
+) {
+  const url = new URL(
+    `${window.openmrsBase}/${restBaseUrl}/visit?patient=${patientUuid}&v=${customRepresentation}`,
+    window.location.toString(),
+  );
+  for (const key in params) {
+    url.searchParams.set(key, '' + params[key]);
+  }
+
+  const ret = useOpenmrsPagination<Visit>(url, pageSize);
+
+  return ret;
+}
+
+export function deleteVisit(visitUuid: string) {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}`, {
+    method: 'DELETE',
+  });
+}
+
+export function restoreVisit(visitUuid: string) {
+  return openmrsFetch<Visit>(`${restBaseUrl}/visit/${visitUuid}`, {
+    headers: {
+      'content-type': 'application/json',
+    },
+    method: 'POST',
+    body: { voided: false },
+  });
+}
+
+export interface Order {
+  uuid: string;
+  action?: string | null;
+  autoExpireDate?: Date | null;
+  dateActivated: string;
+  dateStopped?: Date | null;
+  fulfillerStatus?: string | null;
+  dose: number;
+  dosingInstructions: string | null;
+  dosingType?: 'org.openmrs.FreeTextDosingInstructions' | 'org.openmrs.SimpleDosingInstructions';
+  doseUnits: {
+    uuid: string;
+    display: string;
+  };
+  drug: {
+    uuid: string;
+    name: string;
+    strength: string;
+    display: string;
+  };
+  duration: number;
+  durationUnits: {
+    uuid: string;
+    display: string;
+  };
+  frequency: {
+    uuid: string;
+    display: string;
+  };
+  numRefills: number;
+  orderNumber: string;
+  orderReason: string | null;
+  orderReasonNonCoded: string | null;
+  orderer: OpenmrsResource;
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+  quantity: number;
+  quantityUnits: OpenmrsResource;
+}
+
+export interface Note {
+  concept: OpenmrsResource;
+  note: string;
+  provider: {
+    name: string;
+    role: string;
+  };
+  time: string;
+}
+
+export interface OrderItem {
+  order: Order;
+  provider: {
+    name: string;
+    role: string;
+  };
+}
+
+export interface Diagnosis {
+  certainty: string;
+  display: string;
+  encounter: OpenmrsResource;
+  links: Array<any>;
+  patient: OpenmrsResource;
+  rank: number;
+  resourceVersion: string;
+  uuid: string;
+  voided: boolean;
+  diagnosis: {
+    coded: {
+      display: string;
+    };
+  };
+}

package/src/patient-notes/types/index.ts

@@ -0,0 +1,194 @@
+export interface EncountersFetchResponse {
+  results: Array<RESTPatientNote>;
+}
+
+export interface RESTPatientNote {
+  uuid: string;
+  display: string;
+  encounterDatetime: string;
+  encounterType: { name: string; uuid: string };
+  encounterProviders: [{ encounterRole: { uuid: string; display: string }; provider: { person: { display: string } } }];
+  location: { uuid: string; display: string; name: string };
+  auditInfo: {
+    creator: any;
+    uuid: string;
+    display: string;
+    links: any;
+    dateCreated: Date;
+    changedBy?: any;
+    dateChanged?: Date;
+  };
+  obs: Array<ObsData>;
+  diagnoses: Array<DiagnosisData>;
+}
+
+export interface PatientNote {
+  id: string;
+  diagnoses: string;
+  encounterDate: string;
+  encounterNote: string;
+  encounterNoteRecordedAt: string;
+  encounterProvider: string;
+  encounterProviderRole: string;
+}
+
+export interface Concept {
+  display: string;
+  uuid: string;
+}
+
+export interface DiagnosisData {
+  uuid: string;
+  display: string;
+  conceptClass: {
+    uuid: string;
+    name: string;
+    description: string;
+  };
+  names: Array<ConceptNames>;
+  mappings: Array<ConceptMapping>;
+  voided: boolean;
+}
+
+export interface ConceptNames {
+  uuid: string;
+  name: string;
+  conceptNameType: string;
+}
+export interface ConceptMapping {
+  conceptMapType: {
+    uuid: string;
+    display: string;
+  };
+  conceptReferenceTerm: {
+    display: string;
+  };
+}
+
+export interface DisplayMetadata {
+  display?: string;
+  links?: Links;
+  uuid?: string;
+}
+
+export interface SessionData {
+  authenticated: boolean;
+  locale: string;
+  currentProvider: {
+    uuid: string;
+    display: string;
+    person: DisplayMetadata;
+    identifier: string;
+    attributes: Array<{}>;
+    retired: boolean;
+    links: Links;
+    resourceVersion: string;
+  };
+  sessionLocation: {
+    uuid: string;
+    display: string;
+    name: string;
+    description?: string;
+  };
+  user: {
+    uuid: string;
+    display: string;
+    username: string;
+  };
+  privileges: Array<DisplayMetadata>;
+  roles: Array<DisplayMetadata>;
+  retired: false;
+  links: Links;
+}
+
+export type Links = Array<{
+  rel: string;
+  uri: string;
+}>;
+
+export interface Provider {
+  uuid: string;
+  display: string;
+  person: {
+    uuid: string;
+    display: string;
+    links: Links;
+  };
+  identifier: string;
+  attributes: Array<any>;
+  retired: boolean;
+  links: Links;
+  resourceVersion: string;
+}
+
+export interface Location {
+  uuid: string;
+  display: string;
+  name: string;
+  description?: string;
+  address1?: string;
+  address2?: string;
+  cityVillage?: string;
+  stateProvince?: string;
+  country?: string;
+  postalCode?: string;
+  latitude?: string;
+  longitude?: string;
+  countryDistrict?: string;
+  address3?: string;
+  address4?: string;
+  address5?: string;
+  address6?: string;
+}
+
+export interface ObsData {
+  concept: Concept;
+  value?: string | any;
+  groupMembers?: Array<{
+    concept: Concept;
+    value?: string | any;
+  }>;
+  obsDatetime: string;
+}
+
+export interface Diagnosis {
+  patient: string;
+  diagnosis: {
+    coded: string;
+  };
+  certainty: string;
+  rank: number;
+  display: string;
+}
+
+export interface DiagnosisPayload {
+  encounter: string;
+  patient: string;
+  condition: null;
+  diagnosis: {
+    coded: string;
+  };
+  certainty: string;
+  rank: number;
+}
+
+export interface VisitNotePayload {
+  encounterDatetime: string; // date and time the encounter was created (ISO8601 Long) (REQUIRED)
+  encounterType: string; // uuid of the encounter type - initial visit, return visit etc. (REQUIRED)
+  patient: string; // the patient to whom the encounter applies
+  location: string; // the location at which the encounter occurred (REQUIRED)
+  encounterProviders: Array<{ encounterRole: string; provider: string }>; // array of providers and their role within the encounter. At least 1 provider is required
+  obs: Array<ObsPayload>; // array of observations and values for the encounter
+  form: string; // target form uuid to be filled for the encounter
+  orders?: Array<any>; // list of orders created during the encounter
+  visit?: string; // when creating an encounter for a specific visit, this specifies the visit
+}
+
+export interface ObsPayload {
+  concept: Concept;
+  value?: string;
+  groupMembers?: Array<{
+    concept: Concept;
+    value: string;
+  }>;
+}

package/src/patient-notes/visit-note-action-button.extension.tsx

@@ -0,0 +1,28 @@
+import React, { type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ActionMenuButton2, PenIcon } from '@openmrs/esm-framework';
+import { useStartVisitIfNeeded, type PatientChartWorkspaceActionButtonProps } from '@openmrs/esm-patient-common-lib';
+
+/**
+ * This button uses the patient chart store and MUST only be used
+ * within the patient chart
+ */
+const VisitNoteActionButton: React.FC<PatientChartWorkspaceActionButtonProps> = ({ groupProps: { patientUuid } }) => {
+  const { t } = useTranslation();
+
+  const startVisitIfNeeded = useStartVisitIfNeeded(patientUuid);
+
+  return (
+    <ActionMenuButton2
+      icon={(props: ComponentProps<typeof PenIcon>) => <PenIcon {...props} />}
+      label={t('visitNote', 'Visit note')}
+      workspaceToLaunch={{
+        workspaceName: 'visit-notes-form-shadow-workspace',
+        workspaceProps: {},
+      }}
+      onBeforeWorkspaceLaunch={startVisitIfNeeded}
+    />
+  );
+};
+
+export default VisitNoteActionButton;

package/src/patient-notes/visit-note-config-schema.ts

@@ -0,0 +1,38 @@
+import { Type } from '@openmrs/esm-framework';
+
+export default {
+  clinicianEncounterRole: {
+    _type: Type.UUID,
+    _default: '240b26f9-dd88-4172-823d-4a8bfeb7841f',
+    _description: 'Doctor or Nurse who is the primary provider for an encounter, and will sign the note',
+  },
+  visitDiagnosesConceptUuid: {
+    _type: Type.ConceptUuid,
+    _default: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _description: 'The set of diagnoses that were either addressed or diagnosed during the current visit',
+  },
+  encounterNoteTextConceptUuid: {
+    _type: Type.ConceptUuid,
+    _default: '162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _description: 'Free text note field intended to capture unstructured description of the patient encounter',
+  },
+  encounterTypeUuid: {
+    _type: Type.UUID,
+    _default: 'd7151f82-c1f3-4152-a605-2f9ea7414a79',
+    _description:
+      'Encounter where a full or abbreviated examination is done, usually leading to a presumptive or confirmed diagnosis, recorded by the examining clinician.',
+  },
+  formConceptUuid: {
+    _type: Type.UUID,
+    _default: 'c75f120a-04ec-11e3-8780-2b40bef9a44b',
+    _description: 'The UUID of the Visit Note form to be associated with visit note encounters',
+  },
+};
+
+export interface VisitNoteConfigObject {
+  clinicianEncounterRole: string;
+  encounterNoteTextConceptUuid: string;
+  encounterTypeUuid: string;
+  formConceptUuid: string;
+  visitDiagnosesConceptUuid: string;
+}