(feat) Fetching Patients list

(feat) Fetching Patients list

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@sjhtc/eHospital3.x-Apps",
+  "name": "@sjthc/eHospital3.x-Apps",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -44,7 +44,6 @@
   },
   "dependencies": {
     "@carbon/react": "^1.33.1",
-    "@sjthc/esm-patient-registration-app": "^5.2.8",
     "lodash-es": "^4.17.21",
     "react-image-annotate": "^1.8.0"
   },

packages/esm-patient-list-app/README.md

@@ -0,0 +1,3 @@
+# esm-patient-chart
+
+This microfrontend provides the underlying framework on top of which all the individual widgets are run. It sets up the layout of the patient chart and handles routing between the chart summary and widget dashboards. It also sets up core extensions, the workspace, the side and nav menus, visits functionality as well as offline mode.

packages/esm-patient-list-app/jest.config.js

@@ -0,0 +1,3 @@
+const rootConfig = require("../../jest.config.js");
+
+module.exports = rootConfig;

packages/esm-patient-list-app/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@sjthc/esm-patient-list-app",
+  "version": "1.0.1",
+  "license": "MPL-2.0",
+  "description": "Custom Patient list microfrontend for the OpenMRS SPA",
+  "browser": "dist/sjthc-esm-patient-list-app",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production --color",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "cross-env TIMING=1 eslint src --ext tsx,ts --fix --max-warnings=0",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
+    "coverage": "yarn test --coverage",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "homepage": "https://github.com/IntelliSOFT-Consulting/sjhc-esm-patient-list-app#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IntelliSOFT-Consulting/sjhc-esm-patient-list-app.git"
+  },
+  "bugs": {
+    "url": "https://github.com/IntelliSOFT-Consulting/sjhc-esm-patient-list-app/issues"
+  },
+  "dependencies": {
+    "@carbon/charts-react": "^1.5.2",
+    "lodash-es": "^4.17.21",
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "@carbon/react": "1.x",
+    "@openmrs/esm-framework": "5.x",
+    "@openmrs/esm-patient-common-lib": "*",
+    "dayjs": "1.x",
+    "lodash-es": "4.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x",
+    "single-spa": "5.x",
+    "single-spa-react": "5.x"
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.4",
+    "webpack": "^5.88.2"
+  }
+}

packages/esm-patient-list-app/src/DashboardLink.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from "react";
+import { ConfigurableLink } from "@openmrs/esm-framework";
+import { BrowserRouter, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+}
+
+function DashboardExtension({
+  dashboardLinkConfig,
+}: {
+  dashboardLinkConfig: DashboardLinkConfig;
+}) {
+  const { t } = useTranslation();
+  const { name, title } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split("/home");
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  return (
+    <ConfigurableLink
+      to={`${spaBasePath}/${name}`}
+      className={`cds--side-nav__link ${
+        navLink.match(name) && "active-left-nav-link"
+      }`}
+    >
+      {t("registeredPatients", "Registered Patients")}
+    </ConfigurableLink>
+  );
+}
+
+export const createDashboardLink =
+  (dashboardLinkConfig: DashboardLinkConfig) => () =>
+    (
+      <BrowserRouter>
+        <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+      </BrowserRouter>
+    );

packages/esm-patient-list-app/src/config-schema.ts

@@ -0,0 +1,3 @@
+import { Type } from "@openmrs/esm-framework";
+
+export const configSchema = {};

packages/esm-patient-list-app/src/constants.ts

@@ -0,0 +1 @@
+export const moduleName = "@sjhc/esm-patient-list-app";

packages/esm-patient-list-app/src/dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const homeDashboardMeta = {
+  slot: "registered-patients-dashboard-slot",
+  path: "registered-patients",
+  title: "Registered Patients",
+  name: "registered-patients",
+};

packages/esm-patient-list-app/src/declarations.d.ts

@@ -0,0 +1,3 @@
+declare module "*.css";
+declare module "*.scss";
+declare module "*.png";

packages/esm-patient-list-app/src/home-dashboard/dashboard-card/dashboard-card.component.tsx

@@ -0,0 +1,74 @@
+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 "../home-dashboard.scss";
+
+interface MetricsCardProps {
+  label: string;
+  value: number | string;
+  headerLabel: string;
+  children?: React.ReactNode;
+  service?: string;
+  serviceUuid?: string;
+  locationUuid?: string;
+}
+
+const MetricsCard: React.FC<MetricsCardProps> = ({
+  label,
+  value,
+  headerLabel,
+  children,
+  service,
+  serviceUuid,
+  locationUuid,
+}) => {
+  const { t } = useTranslation();
+
+  const queueListPath =
+    window.getOpenmrsSpaBase() +
+    `home/service-queues/queue-list/${service}/${serviceUuid}/${locationUuid}`;
+
+  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>
+          {service == "scheduled" ? (
+            <div className={styles.link}>
+              <ConfigurableLink
+                className={styles.link}
+                to={`\${openmrsSpaBase}/home`}
+              >
+                {t("activeVisit", "Active Visit")}
+              </ConfigurableLink>
+              <ArrowRight size={16} />
+            </div>
+          ) : service == "waitTime" ? null : (
+            <div className={styles.link}>
+              <ConfigurableLink className={styles.link} to={queueListPath}>
+                {t("activeVisit", "Active Visit")}
+              </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;

packages/esm-patient-list-app/src/home-dashboard/dashboard-card/dashboard-card.scss

@@ -0,0 +1,38 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.dashboardCardContainer{
+    border-radius: 10px;
+    border: 1px solid;
+    @include brand-01(border-color);
+    flex: 1;
+    min-width: max-content;
+    height: 154px;
+    padding: 0 spacing.$spacing-05;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+.label{
+    @include type.type-style("body-compact-02");
+    font-size: 1.2rem;
+    color:  #666666;
+    padding-top: spacing.$spacing-06;
+}
+
+.count {
+    @include type.type-style("heading-07");
+    color: colors.$gray-100;
+    padding-bottom: spacing.$spacing-05;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &> svg{
+        @include brand-03(fill)
+    }
+}

packages/esm-patient-list-app/src/home-dashboard/empty-data-illustration.component.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={17.636}
+          cy={2.314}
+          r={1.175}
+        />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={40.218}
+          cy={9.755}
+          r={1.13}
+        />
+      </g>
+    </svg>
+  );
+};