@kenyaemr/esm-shr-app 5.1.1-pre.122

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^18.6.2"},"pages":[],"extensions":[{"name":"shr-patient-summary","component":"shrPatientSummary","slot":"patient-chart-shr-dashboard-slot","meta":{"columnSpan":4}},{"name":"shr-summary-dashboard-link","component":"shrSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":21,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-shr-dashboard-slot","title":"SHARED HEALTH RECORDS","path":"SHR panel"}}],"version":"5.1.0"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@kenyaemr/esm-shr-app",
+  "version": "5.1.1-pre.122",
+  "description": "Patient care panels microfrontend for the OpenMRS SPA",
+  "browser": "dist/kenyaemr-esm-shr-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/palladiumkenya/kenyaemr-esm-core#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx'"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palladiumkenya/kenyaemr-esm-core#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/palladiumkenya/kenyaemr-esm-core/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.12.0",
+    "lodash-es": "^4.17.15",
+    "react-to-print": "^2.14.13"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-patient-common-lib": "next",
+    "webpack": "^5.74.0"
+  },
+  "gitHead": "87e82c8006300c48a9e18f7e3fcd8753647793cb"
+}

package/src/config-schema.ts

@@ -0,0 +1 @@
+export const configSchema = {};

package/src/dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const dashboardMeta = {
+  slot: 'patient-chart-shr-dashboard-slot',
+  columns: 1,
+  title: 'SHR panel',
+  path: 'SHR panel',
+};

package/src/declarations.d.tsx

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

package/src/hooks/useSHRSummary.ts

@@ -0,0 +1,14 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { SHRSummary } from '../types/index';
+
+export const useSHRSummary = (patientUuid: string) => {
+  const shrSummaryUrl = `/ws/rest/v1/kenyaemril/shrPatientSummary?patientUuid=${patientUuid}`;
+  const { data, mutate, error, isLoading } = useSWR<{ data: SHRSummary }>(shrSummaryUrl, openmrsFetch);
+
+  return {
+    data: data?.data ? data?.data : null,
+    isError: error,
+    isLoading: isLoading,
+  };
+};

package/src/index.ts

@@ -0,0 +1,24 @@
+import { getAsyncLifecycle, defineConfigSchema, registerBreadcrumbs, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { dashboardMeta } from './dashboard.meta';
+import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+
+const moduleName = '@kenyaemr/esm-shr-app';
+
+const options = {
+  featureName: 'patient-shr',
+  moduleName,
+};
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export const shrPatientSummary = getAsyncLifecycle(
+  () => import('./shrpatient-summary/shrpatient-summary.component'),
+  options,
+);
+// t('sharedhealthrecords', 'Shared Health Records')
+export const shrSummaryDashboardLink = getSyncLifecycle(createDashboardLink({ ...dashboardMeta, moduleName }), options);
+
+export function startupApp() {
+  registerBreadcrumbs([]);
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/print-layout/print.component.tsx

@@ -0,0 +1,16 @@
+import React, { useRef } from 'react';
+import styles from './print.scss';
+import { useConfig } from '@openmrs/esm-framework';
+
+export function PrintComponent() {
+  const componentRef = useRef(null);
+  const { logo } = useConfig();
+
+  return (
+    <div className={styles.printPage}>
+      <div ref={componentRef}>{logo?.src ? <img src={logo.src} alt={logo?.alt} width={110} height={40} /> : null}</div>
+    </div>
+  );
+}
+
+export default PrintComponent;

package/src/print-layout/print.scss

@@ -0,0 +1,10 @@
+.logo {
+  margin: 2rem;
+  
+}
+
+.printPage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/routes.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "kenyaemr": "^18.6.2"
+  },
+  "pages": [],
+  "extensions": [
+    {
+      "name": "shr-patient-summary",
+      "component": "shrPatientSummary",
+      "slot": "patient-chart-shr-dashboard-slot",
+      "meta": {
+        "columnSpan": 4
+      }
+    },
+    {
+      "name": "shr-summary-dashboard-link",
+      "component": "shrSummaryDashboardLink",
+      "slot": "patient-chart-dashboard-slot",
+      "order": 21,
+      "meta": {
+        "columns": 1,
+        "columnSpan": 1,
+        "slot": "patient-chart-shr-dashboard-slot",
+        "title": "SHARED HEALTH RECORDS",
+        "path": "SHR panel"
+      }
+    }
+  ]
+}

package/src/shrpatient-summary/root.scss

@@ -0,0 +1,81 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.patientChartWrapper {
+  display: flex;
+  position: relative;
+}
+
+.patientChartWrapper {
+  &>nav {
+    overflow-y: scroll;
+    padding-bottom: 3rem;
+    scrollbar-width: none;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0px;
+    background-color: transparent
+  }
+  :global(.cds--side-nav__overlay-active) {
+    background-color: transparent;
+  }
+}
+
+.caption01 {
+  @include type.type-style("legal-01");
+}
+
+.productiveHeading01 {
+  @include type.type-style("heading-compact-01");
+}
+
+.productiveHeading02 {
+  @include type.type-style("heading-compact-02");
+}
+
+.productiveHeading03 {
+  @include type.type-style("heading-03");
+}
+
+.productiveHeading04 {
+  @include type.type-style("heading-04");
+}
+
+.bodyLong01 {
+  @include type.type-style("body-01");
+}
+
+.bodyShort02 {
+  @include type.type-style("body-compact-02");
+}
+
+.text01 {
+  color: $ui-05;
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.label01 {
+  @include type.type-style("label-01")
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  :global(.cds--date-picker-input__wrapper) {
+    svg {
+      left: 1rem;
+      right: unset;
+    }
+  }
+  :global(.cds--side-nav) {
+      right: 0;
+      :global(.active-left-nav-link) {
+        border-right: 0.25rem solid var(--brand-01);
+        border-left: unset;
+      }
+  }
+}

package/src/shrpatient-summary/shr-summary.scss

@@ -0,0 +1,168 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.bodyContainer {
+  margin: spacing.$spacing-03;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  display: flex;
+  justify-content: space-between;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-02;
+  margin-top: spacing.$spacing-02;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.card {
+  background-color: $ui-02;
+  padding: spacing.$spacing-04;
+}
+
+.value {
+  @include type.type-style('productive-heading-03');
+  color: colors.$gray-100;
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  padding-left: 1rem;
+  // flex-wrap: wrap;
+}
+
+.content {
+  margin-top: spacing.$spacing-05;
+  width: 30%;
+  margin-left: spacing.$spacing-03;
+}
+
+.btnHidden {
+  visibility: hidden;
+}
+
+.btnShow {
+  visibility: visible;
+}
+
+.verticalTabs {
+  margin: 1rem 0;
+  scroll-behavior: smooth;
+
+  > ul {
+    flex-direction: column !important;
+  }
+
+  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item+.cds--tabs--scrollable__nav-item) {
+    margin-left: 0rem;
+  }
+
+  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
+    border-bottom: 0 !important;
+    border-left: 2px solid $color-gray-30;
+  }
+}
+
+.tab {
+  outline: 0;
+  outline-offset: 0;
+
+  &:active, &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &[aria-selected="true"] {
+    border-left: 3px solid var(--brand-03);
+    border-bottom: none;
+    font-weight: 600;
+    margin-left: 0rem !important;
+  }
+
+  &[aria-selected="false"] {
+    border-bottom: none;
+    border-left: 2px solid $ui-03;
+    margin-left: 0rem !important;
+  }
+}
+
+.tablist {
+  :global(.cds--tab--list) {
+    flex-direction: column;
+    max-height: fit-content;
+    overflow-x: visible;
+  }
+  
+  > button :global(.cds--tabs .cds--tabs__nav-link) {
+    border-bottom: none;
+  }
+}
+
+.flexSections {
+  display: flex;
+}
+
+.desktopTabs {
+  button {
+    height: 32px;
+  }
+}
+
+.tabletTabs {
+  button {
+    height: 48px;
+  }
+}
+
+.tabContent {
+  border-top: 1px solid $ui-03;
+  padding: 1rem 0;
+  width: 70%;
+}
+
+.summaryContainer {
+  background-color: $ui-background;
+  display: grid;
+  grid-template-columns: max-content auto;
+  padding: 1rem 0rem;
+
+  :global(.cds--tabs) {
+    max-height: 30rem;
+  }
+}

package/src/shrpatient-summary/shrDataTable.component.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import styles from './shr-summary.scss';
+import { useTranslation } from 'react-i18next';
+import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
+import { itemDetails } from '../types';
+import { usePagination } from '@openmrs/esm-framework';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+
+interface SHRDataTableProps {
+  data: itemDetails[];
+}
+
+const SHRDataTable: React.FC<SHRDataTableProps> = ({ data }) => {
+  const { t } = useTranslation();
+  const tableHeaders = ['Name', 'Value', 'Date Recorded'];
+  const urlLabel = t('seeAll', 'See all');
+  const pageUrl = `\${openmrsSpaBase}/patient/test/chart/SHR`;
+
+  const pagesize = 5;
+  const { results: paginatedData, goTo, currentPage } = usePagination(data ?? [], pagesize);
+
+  const tableRows = useMemo(() => {
+    return paginatedData?.map((payload) => ({
+      ...[payload],
+    }));
+  }, [paginatedData]);
+
+  return (
+    <div className={styles.widgetCard}>
+      <DataTable rows={tableRows} headers={tableHeaders}>
+        {({ rows, headers, getHeaderProps, getRowProps }) => (
+          <Table>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>{header}</TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {tableRows.map((row) => (
+                <TableRow {...getRowProps({ row })}>
+                  <TableCell>{row[0].name}</TableCell>
+                  <TableCell>{row[0].value}</TableCell>
+                  <TableCell>{row[0].dateRecorded}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      <PatientChartPagination
+        currentItems={paginatedData.length}
+        onPageNumberChange={({ page }) => goTo(page)}
+        pageNumber={currentPage}
+        pageSize={pagesize}
+        totalItems={data.length}
+      />
+    </div>
+  );
+};
+
+export default SHRDataTable;

package/src/shrpatient-summary/shrpatient-summary.component.tsx

@@ -0,0 +1,176 @@
+import React, { useRef, useState } from 'react';
+import styles from './shr-summary.scss';
+import { Tab, Tabs, TabList, TabPanel, TabPanels, StructuredListSkeleton, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType, useSession } from '@openmrs/esm-framework';
+import { useSHRSummary } from '../hooks/useSHRSummary';
+import { Printer } from '@carbon/react/icons';
+import { useReactToPrint } from 'react-to-print';
+import PrintComponent from '../print-layout/print.component';
+import SHRDataTable from './shrDataTable.component';
+
+interface SHRSummaryProps {
+  patientUuid: string;
+}
+
+const SharedHealthRecordsSummary: React.FC<SHRSummaryProps> = ({ patientUuid }) => {
+  const { data, isError, isLoading } = useSHRSummary(patientUuid);
+  const currentUserSession = useSession();
+  const componentRef = useRef(null);
+  const [printMode, setPrintMode] = useState(false);
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() == 'tablet';
+
+  const printRef = useReactToPrint({
+    content: () => componentRef.current,
+    onBeforeGetContent: () => setPrintMode(true),
+    onAfterPrint: () => setPrintMode(false),
+    pageStyle: styles.pageStyle,
+    documentTitle: 'Shared Health Records',
+  });
+
+  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+  const handlePrint = async () => {
+    await delay(500);
+    printRef();
+  };
+
+  // If still loading
+  if (isLoading) {
+    return <StructuredListSkeleton role="progressbar" />;
+  }
+
+  // If there is an error
+  if (isError) {
+    return <span>{t('errorSHRSummary', 'Error loading SHR summary')}</span>;
+  }
+
+  // If there is no data
+  if (Object.keys(data)?.length === 0) {
+    return;
+  }
+
+  const tableHeaders = [
+    {
+      key: 'name',
+      header: t('name', 'Name'),
+    },
+    {
+      key: 'value',
+      header: t('value', 'Value'),
+    },
+    {
+      key: 'dateRecorded',
+      header: t('daterecorded', 'Date Recorded'),
+    },
+  ];
+
+  const headers = ['Name', 'Value', 'Date Recorded'];
+  // const [selectedTab, setSelectedTab] = useState(0);
+
+  if (Object.keys(data).length > 0) {
+    return (
+      <div className={styles.bodyContainer} ref={componentRef}>
+        {printMode === true && <PrintComponent />}
+
+        <div className={styles.card}>
+          <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+            <h4 className={styles.title}> {t('shrPatientSHRSummary', 'Patient SHR Summary')}</h4>
+            {printMode === false && (
+              <Button
+                size="sm"
+                className={styles.btnShow}
+                onClick={() => {
+                  handlePrint(), setPrintMode(true);
+                }}
+                kind="tertiary"
+                renderIcon={(props) => <Printer size={16} {...props} />}
+                iconDescription={t('print', 'Print')}>
+                {t('print', 'Print')}
+              </Button>
+            )}
+          </div>
+
+          <hr />
+
+          <div className={styles.summaryContainer}>
+            <Tabs className={`${styles.verticalTabs} ${layout === 'tablet' ? styles.tabletTabs : styles.desktopTabs}`}>
+              <TabList aria-label="Shared Medical Record tabs" className={styles.tablist}>
+                <Tab
+                  className={`${styles.tab} ${styles.bodyLong01}`}
+                  id="vitals-tab"
+                  disabled={data?.vitals.length <= 0}>
+                  {t('vitals', 'Vitals')}
+                </Tab>
+                <Tab className={styles.tab} id="labresults-tab" disabled={data?.labResults.length <= 0}>
+                  {t('labresults', 'labResults')}
+                </Tab>
+                <Tab className={styles.tab} id="complaints-tab" disabled={data?.complaints.length <= 0}>
+                  {t('complaints', 'Complaints')}
+                </Tab>
+                <Tab className={styles.tab} id="diagnosis-tab" disabled={data?.diagnosis.length <= 0}>
+                  {t('diagnosis', 'Diagnosis')}
+                </Tab>
+                <Tab className={styles.tab} id="allergies-tab" disabled={data?.allergies.length <= 0}>
+                  {t('allergies', 'Allergies')}
+                </Tab>
+                <Tab className={styles.tab} id="conditions-tab" disabled={data?.conditions.length <= 0}>
+                  {t('conditions', 'Conditions')}
+                </Tab>
+                <Tab className={styles.tab} id="medications-tab" disabled={data?.medications.length <= 0}>
+                  {t('medications', 'Medications')}
+                </Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <div>
+                    <SHRDataTable data={data?.vitals} />
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div>
+                    <SHRDataTable data={data?.labResults} />
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div>
+                    <SHRDataTable data={data?.complaints} />
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div>
+                    <SHRDataTable data={data?.diagnosis} />
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div>
+                    <SHRDataTable data={data?.allergies} />
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div>
+                    <SHRDataTable data={data?.conditions} />
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div>
+                    <SHRDataTable data={data?.medications} />
+                  </div>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <h4 className={styles.title}> {t('noSharedHealthRecordsFound', 'No Shared Health Records Found')}</h4>
+      </div>
+    );
+  }
+};
+
+export default SharedHealthRecordsSummary;