(feat)Added Morgue Module

package.json

@@ -34,7 +34,7 @@
     "@babel/core": "^7.11.6",
     "@carbon/react": "~1.37.0",
     "@ohri/openmrs-esm-ohri-commons-lib": "next",
-    "@openmrs/esm-framework": "^5.6.1-pre.1881",
+    "@openmrs/esm-framework": "^5.6.1-pre.1895",
     "@openmrs/esm-patient-common-lib": "next",
     "@playwright/test": "1.40.1",
     "@swc/core": "^1.2.165",
@@ -71,7 +71,7 @@
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.1",
-    "openmrs": "^5.6.1-pre.1881",
+    "openmrs": "^5.6.1-pre.1895",
     "prettier": "^3.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

packages/esm-morgue-app/jest.config.js

@@ -0,0 +1,8 @@
+const rootConfig = require('../../jest.config.js');
+
+const packageConfig = {
+  ...rootConfig,
+  collectCoverage: false,
+};
+
+module.exports = packageConfig;

packages/esm-morgue-app/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ampath/esm-morgue-app",
+  "version": "5.1.1",
+  "description": "AMPATH Morgue App",
+  "browser": "dist/ampath-esm-morgue-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/AMPATH/ampath-esm-3.x#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' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AMPATH/ampath-esm-3.x.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AMPATH/ampath-esm-3.x/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.42.1",
+    "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",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  }
+}

packages/esm-morgue-app/src/config-schema.ts

@@ -0,0 +1,43 @@
+import { Type, validator } from '@openmrs/esm-framework';
+
+/**
+ * This is the config schema. It expects a configuration object which
+ * looks like this:
+ *
+ * ```json
+ * { "casualGreeting": true, "whoToGreet": ["Mom"] }
+ * ```
+ *
+ * In OpenMRS Microfrontends, all config parameters are optional. Thus,
+ * all elements must have a reasonable default. A good default is one
+ * that works well with the reference application.
+ *
+ * To understand the schema below, please read the configuration system
+ * documentation:
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config
+ * Note especially the section "How do I make my module configurable?"
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
+ * and the Schema Reference
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
+ */
+export const configSchema = {
+  casualGreeting: {
+    _type: Type.Boolean,
+    _default: false,
+    _description: 'Whether to use a casual greeting (or a formal one).',
+  },
+  whoToGreet: {
+    _type: Type.Array,
+    _default: ['World'],
+    _description: 'Who should be greeted. Names will be separated by a comma and space.',
+    _elements: {
+      _type: Type.String,
+    },
+    _validators: [validator((v) => v.length > 0, 'At least one person must be greeted.')],
+  },
+};
+
+export type Config = {
+  casualGreeting: boolean;
+  whoToGreet: Array<string>;
+};

packages/esm-morgue-app/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

packages/esm-morgue-app/src/index.ts

@@ -0,0 +1,34 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createLeftPanelLink } from './morgue-left-panel/morgue-left-panel-link.component';
+const moduleName = '@ampath/esm-morgue-app';
+
+const options = {
+  featureName: 'esm-morgue-app',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  const morgueBasepath = `${window.spaBase}/home/morgue`;
+
+  defineConfigSchema(moduleName, configSchema);
+  registerBreadcrumbs([
+    {
+      title: 'morgue',
+      path: morgueBasepath,
+      parent: `${window.spaBase}/home`,
+    },
+  ]);
+}
+
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+
+export const morgueDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'morgue',
+    title: 'Morgue',
+  }),
+  options,
+);

packages/esm-morgue-app/src/morgue-component/morgue.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MorgueHeader } from '../morgue-header/morgue-header.component';
+import MorgueMetrics from '../morgue-metrics/morgue-metrics.component';
+import { MorgueTabs } from '../morgue-tabs/morgue-tabs-component';
+
+const MorgueComponent: React.FC = () => {
+  return (
+    <div className={`omrs-main-content`}>
+      <MorgueHeader title={'Morgue'} />
+      <MorgueMetrics />
+      <MorgueTabs />
+    </div>
+  );
+};
+
+export default MorgueComponent;

packages/esm-morgue-app/src/morgue-header/morgue-header.component.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { useSession, formatDate } from '@openmrs/esm-framework';
+import styles from './morgue-header.scss';
+import MorgueIllustration from './morgue-illustration.component';
+
+interface MorgueHeaderProps {
+  title: string;
+}
+export const MorgueHeader: React.FC<MorgueHeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <MorgueIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('morgue', 'Morgue Management')}</p>
+          <p className={styles['page-name']}>{title}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/esm-morgue-app/src/morgue-header/morgue-header.scss

@@ -0,0 +1,71 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: 0px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 0.75rem;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: 1rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin-left: 1rem;
+
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+  fill: var(--brand-03);
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+  fill: var(--brand-03);
+}

packages/esm-morgue-app/src/morgue-header/morgue-illustration.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './morgue-header.scss';
+import { HospitalBed } from '@carbon/react/icons';
+
+const MorgueIllustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <HospitalBed className={styles.iconOverrides} />
+    </div>
+  );
+};
+
+export default MorgueIllustration;

packages/esm-morgue-app/src/morgue-left-panel/morgue-left-panel-link.component.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import last from 'lodash-es/last';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+
+export interface LinkConfig {
+  name: string;
+  title: string;
+}
+
+export function LinkExtension({ config }: { config: LinkConfig }) {
+  const { name, title } = config;
+  const location = useLocation();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+
+  const isUUID = (value) => {
+    const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+    return regex.test(value);
+  };
+
+  if (isUUID(urlSegment)) {
+    urlSegment = 'morgue';
+  }
+
+  return (
+    <ConfigurableLink
+      to={spaBasePath + '/' + name}
+      className={`cds--side-nav__link ${name === urlSegment && 'active-left-nav-link'}`}>
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createLeftPanelLink = (config: LinkConfig) => () => (
+  <BrowserRouter>
+    <LinkExtension config={config} />
+  </BrowserRouter>
+);

packages/esm-morgue-app/src/morgue-metrics/morgue-card.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Layer, Tile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import styles from './morgue-card.scss';
+
+interface MetricsCardProps {
+  label: string;
+  value: number | string;
+  headerLabel: string;
+  children?: React.ReactNode;
+  service?: string;
+}
+
+const MetricsCard: React.FC<MetricsCardProps> = ({ label, value, headerLabel, children }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Layer
+      className={classNames(styles.container, {
+        [styles.cardWithChildren]: children,
+      })}>
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+            {children}
+          </div>
+          <div className={styles.link}>
+            <ConfigurableLink className={styles.link} to={`\${openmrsSpaBase}/home`}>
+              {t('viewReport', 'View Report')}
+            </ConfigurableLink>
+            <ArrowRight size={16} />
+          </div>
+        </div>
+        <div>
+          <label className={styles.totalsLabel}>{label}</label>
+          <p className={styles.totalsValue}>{value}</p>
+        </div>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default MetricsCard;