@kenyaemr/esm-care-panel-app 5.4.1-pre.1917 → 5.4.1-pre.1924

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"care-panel-patient-summary","component":"carePanelPatientSummary","slot":"patient-chart-care-panel-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"care-panel-summary-dashboard-link","component":"carePanelSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":3,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-care-panel-dashboard-slot","layoutMode":"anchored","path":"Care panel"}},{"name":"delete-regimen-confirmation-dialog","component":"deleteRegimenConfirmationDialog"},{"name":"hiv-patient-visit-summary-dashboard-link","component":"hivPatientSummaryDashboardLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-patient-summary-slot","path":"HIV Patient Summary","layoutMode":"anchored"}},{"name":"hiv-patient-visit-summary","slot":"patient-chart-hiv-patient-summary-slot","component":"hivPatientSummary","order":3,"online":true,"offline":false}],"workspaces":[{"name":"patient-regimen-workspace","title":"Patient Regimen","component":"regimenFormWorkspace","type":"form","canMaximize":true,"canHide":true,"width":"wider"}],"version":"5.4.1-pre.1917"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"care-panel-patient-summary","component":"carePanelPatientSummary","slot":"patient-chart-care-panel-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"care-panel-summary-dashboard-link","component":"carePanelSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":3,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-care-panel-dashboard-slot","layoutMode":"anchored","path":"Care panel"}},{"name":"delete-regimen-confirmation-dialog","component":"deleteRegimenConfirmationDialog"},{"name":"hiv-patient-visit-summary-dashboard-link","component":"hivPatientSummaryDashboardLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-patient-summary-slot","path":"HIV Patient Summary","layoutMode":"anchored"}},{"name":"hiv-patient-visit-summary","slot":"patient-chart-hiv-patient-summary-slot","component":"hivPatientSummary","order":3,"online":true,"offline":false},{"name":"patient-diagnoses","component":"patientDiagnoses","online":true,"offline":true},{"name":"patient-conditions","component":"patientConditions","online":true,"offline":true},{"name":"dispensing-patient-vitals","component":"dispensingPaentientVitals","online":true,"offline":true}],"workspaces":[{"name":"patient-regimen-workspace","title":"Patient Regimen","component":"regimenFormWorkspace","type":"form","canMaximize":true,"canHide":true,"width":"wider"}],"version":"5.4.1-pre.1924"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-care-panel-app",
-  "version": "5.4.1-pre.1917",
+  "version": "5.4.1-pre.1924",
   "description": "Patient care panels microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-care-panel-app.js",
   "main": "src/index.ts",

package/src/config-schema.ts

@@ -5,6 +5,10 @@ export interface CarePanelConfig {
     encounterProviderRoleUuid: string;
   };
   hivProgramUuid: string;
+  dispensingVitalsConcepts: Array<{
+    uuid: string;
+    display: string;
+  }>;
 }
 
 export const configSchema = {
@@ -20,4 +24,14 @@ export const configSchema = {
     _description: 'HIV Program UUID',
     _default: 'dfdc6d40-2f2f-463d-ba90-cc97350441a8',
   },
+  dispensingVitalsConcepts: {
+    _type: Type.Array,
+    _description: 'Uuids of patient vitals concept required for dispensing',
+    _default: [
+      {
+        display: 'Weight (Kg)',
+        uuid: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      },
+    ],
+  },
 };

package/src/dispensing-patient-details/conditions.component.tsx

@@ -0,0 +1,55 @@
+import { InlineLoading, InlineNotification, Tile } from '@carbon/react';
+import { WarningFilled } from '@carbon/react/icons';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePatientConditions } from './conditions.resource';
+import styles from './dispensing-patient-details.scss';
+
+type PatientConditionsProps = {
+  patientUuid: string;
+  encounterUuid: string;
+};
+
+const PatientConditions: React.FC<PatientConditionsProps> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+  const { conditions, error, isLoading, mutate } = usePatientConditions(patientUuid);
+
+  if (isLoading) {
+    return (
+      <InlineLoading
+        iconDescription="Loading"
+        description={t('loadingConditions', 'Loading active Conditions ...')}
+        status="active"
+      />
+    );
+  }
+
+  if (error) {
+    return <InlineNotification kind="error" subtitle={t('conditionsError', 'Error loading conditions')} lowContrast />;
+  }
+
+  return (
+    <Tile className={styles.container}>
+      <div className={styles.content}>
+        <div>
+          <WarningFilled size={24} className={styles.icon} />
+          <p>
+            {conditions.length > 0 && (
+              <span>
+                <span style={{ fontWeight: 'bold' }}>
+                  {t('activeConditionsCount', '{{ count }} conditions', {
+                    count: conditions.length,
+                  })}
+                </span>{' '}
+                {conditions?.map(({ display }) => display).join(' | ')}
+              </span>
+            )}
+            {conditions.length === 0 && t('noActiveConditions', 'No active Conditions')}
+          </p>
+        </div>
+      </div>
+    </Tile>
+  );
+};
+
+export default PatientConditions;

package/src/dispensing-patient-details/conditions.resource.ts

@@ -0,0 +1,97 @@
+import { fhirBaseUrl, useFhirFetchAll } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+
+export interface Resource {
+  resourceType: string;
+  id: string;
+  meta: ResourceMeta;
+  clinicalStatus: ClinicalStatus;
+  code: Code;
+  subject: Subject;
+  onsetDateTime: string;
+  recordedDate: string;
+  recorder: Recorder;
+}
+
+export interface ResourceMeta {
+  versionId: string;
+  lastUpdated: string;
+  tag: Array<ResourceMetaTag>;
+}
+
+export interface ResourceMetaTag {
+  system: string;
+  code: string;
+  display: string;
+}
+
+export interface ClinicalStatus {
+  coding: Array<Coding>;
+}
+
+export interface Coding {
+  system: string;
+  code: string;
+}
+
+export interface Code {
+  coding: Array<ConditionCoding>;
+  text: string;
+}
+
+export interface ConditionCoding {
+  code: string;
+  display?: string;
+  system?: string;
+}
+
+export interface Subject {
+  reference: string;
+  type: string;
+  display: string;
+}
+
+export interface Recorder {
+  reference: string;
+  type: string;
+  display: string;
+}
+
+export interface Condition {
+  id: string;
+  status?: 'active' | 'inactive';
+  display: string;
+  patient: string;
+  onsetDateTime: string;
+  recordedDate: string;
+  recorder: string;
+}
+
+export const usePatientConditions = (patientUuid: string) => {
+  const url = `${fhirBaseUrl}/Condition?patient=${patientUuid}&_summary=data`;
+  const { data, isLoading, mutate, error } = useFhirFetchAll<Resource>(url);
+
+  const conditions = useMemo(() => {
+    return data?.reduce<Array<Condition>>((prev, entry) => {
+      if (entry?.resourceType === 'Condition') {
+        const condition: Condition = {
+          id: entry.id,
+          display: entry?.code?.text,
+          onsetDateTime: entry?.onsetDateTime,
+          patient: entry?.subject?.display,
+          recordedDate: entry?.recordedDate,
+          recorder: entry?.recorder?.display,
+          status: entry?.clinicalStatus?.coding[0]?.code as any,
+        };
+        return [...prev, condition];
+      }
+      return prev;
+    }, []);
+  }, [data]);
+  return {
+    conditions: (conditions ?? []).filter((condition) => condition.status === 'active'),
+    isLoading,
+    error,
+    mutate,
+  };
+};

package/src/dispensing-patient-details/diagnoses.component.tsx

@@ -0,0 +1,55 @@
+import { InlineLoading, InlineNotification, Tile } from '@carbon/react';
+import { WarningFilled } from '@carbon/react/icons';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePatientDiagnosis } from './diagnoses.resource';
+import styles from './dispensing-patient-details.scss';
+
+type PatientDiagnosesProps = {
+  patientUuid: string;
+  encounterUuid: string;
+};
+
+const PatientDiagnoses: React.FC<PatientDiagnosesProps> = ({ encounterUuid, patientUuid }) => {
+  const { diagnoses, isLoading, error } = usePatientDiagnosis(encounterUuid);
+  const { t } = useTranslation();
+
+  if (isLoading) {
+    return (
+      <InlineLoading
+        iconDescription="Loading"
+        description={t('loadingDiagnoses', 'Loading Diagnoses ...')}
+        status="active"
+      />
+    );
+  }
+
+  if (error) {
+    return <InlineNotification kind="error" subtitle={t('diagnosesError', 'Error loading diagnoses')} lowContrast />;
+  }
+
+  return (
+    <Tile className={styles.container}>
+      <div className={styles.content}>
+        <div>
+          <WarningFilled size={24} className={styles.icon} />
+          <p>
+            {diagnoses.length > 0 && (
+              <span>
+                <span style={{ fontWeight: 'bold' }}>
+                  {t('diagnosesCount', '{{ count }} diagnoses', {
+                    count: diagnoses.length,
+                  })}
+                </span>{' '}
+                {diagnoses?.map(({ text }) => text).join(' | ')}
+              </span>
+            )}
+            {diagnoses.length === 0 && t('noFinalDiagnoses', 'No patient final diagnosis for this visit')}
+          </p>
+        </div>
+      </div>
+    </Tile>
+  );
+};
+
+export default PatientDiagnoses;

package/src/dispensing-patient-details/diagnoses.resource.ts

@@ -0,0 +1,30 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+export const usePatientDiagnosis = (encounterUuid: string) => {
+  const customRepresentation =
+    'custom:(uuid,display,visit:(uuid,patient,encounters:(uuid,diagnoses:(uuid,display,certainty,diagnosis:(coded:(uuid,display))),encounterDatetime,encounterType:(uuid,display),encounterProviders:(uuid,display,provider:(uuid,person:(uuid,display)))),location:(uuid,name,display),visitType:(uuid,name,display),startDatetime,stopDatetime))';
+  const url = `${restBaseUrl}/encounter/${encounterUuid}?v=${customRepresentation}`;
+
+  const { data, error, isLoading } = useSWR<FetchResponse<{ visit: Visit }>>(url, openmrsFetch);
+
+  const diagnoses = useMemo(() => {
+    return (
+      data?.data?.visit?.encounters?.flatMap(
+        (encounter) =>
+          encounter.diagnoses.map((diagnosis) => ({
+            id: diagnosis.diagnosis.coded.uuid,
+            text: diagnosis.display,
+            certainty: diagnosis.certainty,
+          })) || [],
+      ) || []
+    );
+  }, [data]);
+
+  return {
+    error,
+    isLoading,
+    diagnoses: (diagnoses ?? []) as Array<{ id: string; text: string; certainty: string }>,
+  };
+};

package/src/dispensing-patient-details/dispensing-patient-details.scss

@@ -0,0 +1,47 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  height: layout.$spacing-06;
+  padding: 0 layout.$spacing-03 0 0;
+  border-left: layout.$spacing-02 solid #f1c21b;
+  background-color: rgba(253, 209, 58, 0.3);
+  margin: layout.$spacing-03 0 layout.$spacing-03 0;
+  width: 100%;
+}
+
+.content {
+  margin: auto;
+  min-width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  div {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  p {
+    margin-left: layout.$spacing-03;
+    font-size: 0.9rem;
+    width: 80%;
+  }
+
+  a {
+    margin: auto;
+    color: #0f62fe;
+    text-decoration: none;
+    text-align: right;
+  }
+}
+
+svg.icon {
+  fill: #f1c21b;
+  vertical-align: middle;
+  margin-left: layout.$spacing-03;
+}

package/src/dispensing-patient-details/dispensing-patient-vitals.resources.ts

@@ -0,0 +1,132 @@
+import { FetchResponse, fhirBaseUrl, openmrsFetch, parseDate, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { CarePanelConfig } from '../config-schema';
+import { useMemo } from 'react';
+
+export interface Entry {
+  fullUrl: string;
+  resource: Resource;
+}
+
+export interface Resource {
+  resourceType: string;
+  id: string;
+  meta: Meta;
+  status: string;
+  category: Category[];
+  code: Code;
+  subject: Subject;
+  encounter: Encounter;
+  effectiveDateTime: string;
+  issued: string;
+  valueQuantity: ValueQuantity;
+  referenceRange: ReferenceRange[];
+}
+
+export interface Meta {
+  versionId: string;
+  lastUpdated: string;
+  tag: Tag[];
+}
+
+export interface Tag {
+  system: string;
+  code: string;
+  display: string;
+}
+
+export interface Category {
+  coding: Coding[];
+}
+
+export interface Coding {
+  system: string;
+  code: string;
+  display: string;
+}
+
+export interface Code {
+  coding: CategoryCoding[];
+  text: string;
+}
+
+export interface CategoryCoding {
+  code: string;
+  display?: string;
+  system?: string;
+}
+
+export interface Subject {
+  reference: string;
+  type: string;
+  display: string;
+}
+
+export interface Encounter {
+  reference: string;
+  type: string;
+}
+
+export interface ValueQuantity {
+  value: number;
+  unit: string;
+  system: string;
+  code: string;
+}
+
+export interface ReferenceRange {
+  low: Low;
+  high: High;
+  type: Type;
+}
+
+export interface Low {
+  value: number;
+}
+
+export interface High {
+  value: number;
+}
+
+export interface Type {
+  coding: Coding3[];
+}
+
+export interface Coding3 {
+  system: string;
+  code: string;
+}
+
+type DispensingVitals = {
+  display: string;
+  uuid: string;
+  value: number | string;
+  dateRecoded?: Date;
+};
+
+export const usePatientVitals = (patientUuid: string, encounterUuid: string) => {
+  const { dispensingVitalsConcepts } = useConfig<CarePanelConfig>();
+  const urlParams = new URLSearchParams({
+    patient: patientUuid,
+    code: dispensingVitalsConcepts.map(({ uuid }) => uuid).join(','),
+    encounter: encounterUuid,
+  });
+  const url = `${fhirBaseUrl}/Observation?${urlParams.toString()}`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ entry: Array<Entry> }>>(url, openmrsFetch);
+  const vitals = useMemo<Array<DispensingVitals>>(
+    () =>
+      (data?.data?.entry ?? []).map((entry) => ({
+        display: entry?.resource?.code?.text,
+        uuid: entry?.resource?.id,
+        value: entry?.resource?.valueQuantity?.value,
+        dateRecoded: entry?.resource?.issued ? parseDate(entry?.resource?.issued) : undefined,
+      })),
+    [data],
+  );
+  return {
+    vitals,
+    isLoading,
+    mutate,
+    error,
+  };
+};

package/src/dispensing-patient-details/patient-vitals.component.tsx

@@ -0,0 +1,27 @@
+import { Layer } from '@carbon/react';
+import React from 'react';
+import { usePatientVitals } from './dispensing-patient-vitals.resources';
+
+type PatientVitalsProps = {
+  patientUuid: string;
+  encounterUuid: string;
+};
+const DispensingPatientVitals: React.FC<PatientVitalsProps> = ({ encounterUuid, patientUuid }) => {
+  const { vitals, error, isLoading } = usePatientVitals(patientUuid, encounterUuid);
+
+  if (isLoading || error) {
+    return null;
+  }
+  return (
+    <Layer>
+      {vitals.map((vital) => (
+        <div>
+          <strong>{vital?.display}: </strong>
+          <span>{vital?.value}</span>
+        </div>
+      ))}
+    </Layer>
+  );
+};
+
+export default DispensingPatientVitals;

package/src/index.ts

@@ -8,6 +8,9 @@ import deleteRegimenConfirmationDialogComponent from './regimen-editor/delete-re
 import regimenFormComponent from './regimen-editor/regimen-form.component';
 import CarePanelDashboard from './care-panel-dashboard/care-panel-dashboard.component';
 import PatientSummary from './patient-summary/patient-summary.component';
+import PatientDiagnoses from './dispensing-patient-details/diagnoses.component';
+import PatientConditions from './dispensing-patient-details/conditions.component';
+import DispensingPatientVitals from './dispensing-patient-details/patient-vitals.component';
 
 const moduleName = '@kenyaemr/esm-care-panel-app';
 
@@ -45,3 +48,8 @@ export const hivPatientSummaryDashboardLink = getSyncLifecycle(
 );
 export const hivPatientSummary = getSyncLifecycle(PatientSummary, options);
 export const regimenFormWorkspace = getSyncLifecycle(regimenFormComponent, options);
+
+// TODO Clean when community version gets merged
+export const patientDiagnoses = getSyncLifecycle(PatientDiagnoses, options);
+export const patientConditions = getSyncLifecycle(PatientConditions, options);
+export const dispensingPaentientVitals = getSyncLifecycle(DispensingPatientVitals, options);

package/src/routes.json

@@ -50,14 +50,32 @@
       "order": 3,
       "online": true,
       "offline": false
+    },
+    {
+      "name": "patient-diagnoses",
+      "component": "patientDiagnoses",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "patient-conditions",
+      "component": "patientConditions",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "dispensing-patient-vitals",
+      "component": "dispensingPaentientVitals",
+      "online": true,
+      "offline": true
     }
   ],
   "workspaces": [
     {
       "name": "patient-regimen-workspace",
       "title": "Patient Regimen",
-      "component":"regimenFormWorkspace",
-      "type":"form",
+      "component": "regimenFormWorkspace",
+      "type": "form",
       "canMaximize": true,
       "canHide": true,
       "width": "wider"