@pih/esm-referrals-queue-app 2.0.0-pre.9 → 2.1.1-pre.101

package/package.json

@@ -1,100 +1,57 @@
 {
   "name": "@pih/esm-referrals-queue-app",
-  "version": "2.0.0-pre.9",
-  "license": "MPL-2.0",
+  "version": "2.1.1-pre.101",
   "description": "A page for viewing the J9 Home Visits from CommCare",
   "browser": "dist/pih-esm-referrals-queue-app.js",
   "main": "src/index.ts",
   "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/PIH/openmrs-esm-pihemr#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 js,jsx,ts,tsx",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "lint": "cross-env eslint src --ext ts,tsx",
+    "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",
-    "test": "jest --config jest.config.json",
-    "verify": "concurrently 'yarn:lint' 'yarn:test' 'yarn:typescript'",
-    "coverage": "yarn test -- --coverage",
-    "prepare": "husky install"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && yarn verify"
-    }
+    "extract-translations": "i18next 'src/**/*.component.tsx'"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
   ],
   "keywords": [
-    "openmrs",
-    "microfrontends"
+    "openmrs"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pih/pih-esm-referrals-queue.git"
-  },
-  "homepage": "https://github.com/pih/pih-esm-referrals-queue#readme",
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PIH/openmrs-esm-pihemr.git"
+  },
   "bugs": {
-    "url": "https://github.com/pih/pih-esm-referrals-queue/issues"
+    "url": "https://github.com/PIH/openmrs-esm-pihemr/issues"
   },
   "dependencies": {
-    "lodash-es": "^4.17.15"
+    "@babel/runtime": "^7.24.0",
+    "moment": "^2.30.1",
+    "react-dates": "^21.8.0",
+    "webpack": "^5.74.0"
   },
   "peerDependencies": {
-    "@carbon/react": "^1.9.0",
-    "@openmrs/esm-framework": "next",
-    "dayjs": "1.x",
+    "@openmrs/esm-framework": "8.x",
+    "i18next": "^19.0.0",
     "react": "18.x",
-    "react-i18next": "11.x",
-    "react-router-dom": "6.x",
-    "rxjs": "6.x"
+    "react-i18next": "16.x",
+    "react-router-dom": "^6.x",
+    "swr": "2.x"
   },
   "devDependencies": {
-    "@carbon/react": "^1.9.0",
-    "@carbon/icons-react": "^10.18.0",
-    "@openmrs/esm-framework": "next",
-    "@swc/core": "^1.2.203",
-    "@swc/jest": "^0.2.21",
-    "@testing-library/dom": "^7.20.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.4",
-    "@types/react": "^18.0.14",
-    "@types/react-dates": "^21.8.0",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-router": "^5.1.14",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/webpack-env": "^1.16.0",
-    "@typescript-eslint/parser": "^5.28.0",
-    "concurrently": "^6.2.0",
-    "css-loader": "^6.7.1",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-ts-react-important-stuff": "^3.0.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "husky": "^6.0.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.4",
-    "jest-cli": "^27.0.4",
-    "mockdate": "^3.0.5",
-    "openmrs": "next",
-    "prettier": "^2.3.0",
-    "pretty-quick": "^3.1.0",
-    "react": "^18.2.0",
-    "react-dates": "^21.8.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^11.7.0",
-    "react-router-dom": "^6.3.0",
-    "rxjs": "^6.5.4",
-    "typescript": "^4.3.2"
+    "webpack": "^5.74.0"
   },
-  "resolutions": {
-    "**/@types/react": "^18.0.14"
-  }
-}
+  "stableVersion": "2.1.0"
+}

package/src/config-schema.ts

@@ -1,4 +1,4 @@
-import { Type, validators } from "@openmrs/esm-framework";
+import { Type, validators } from '@openmrs/esm-framework';
 
 /**
  * This is the config schema. It expects a configuration object which
@@ -25,33 +25,25 @@ export const configSchema = {
     patientDash: {
       _type: Type.String,
       _default:
-        "${openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&app=pih.app.clinicianDashboard",
-      _validators: [validators.isUrlWithTemplateParameters(["patientUuid"])],
+        '${openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&app=pih.app.clinicianDashboard',
+      _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
     },
     visitPage: {
       _type: Type.String,
       _default:
-        "${openmrsBase}/pihcore/visit/visit.page?patient=${patientUuid}&visit=${visitUuid}&suppressActions=true#/overview",
-      _validators: [
-        validators.isUrlWithTemplateParameters(["patientUuid", "visitUuid"]),
-      ],
+        '${openmrsBase}/pihcore/visit/visit.page?patient=${patientUuid}&visit=${visitUuid}&suppressActions=true#/overview',
+      _validators: [validators.isUrlWithTemplateParameters(['patientUuid', 'visitUuid'])],
     },
     homeVisitForm: {
       _type: Type.String,
       _default:
-        "${openmrsBase}/htmlformentryui/htmlform/editHtmlFormWithStandardUi.page?patientId=${patientUuid}&visitId=${visitUuid}&encounterId=${encounterUuid}&definitionUiResource=file:configuration/pih/htmlforms/section-mch-referral.xml&returnUrl=/mirebalais/spa/referrals-queue",
-      _validators: [
-        validators.isUrlWithTemplateParameters([
-          "patientUuid",
-          "visitUuid",
-          "encounterUuid",
-        ]),
-      ],
+        '${openmrsBase}/htmlformentryui/htmlform/editHtmlFormWithStandardUi.page?patientId=${patientUuid}&visitId=${visitUuid}&encounterId=${encounterUuid}&definitionUiResource=file:configuration/pih/htmlforms/section-mch-referral.xml&returnUrl=/mirebalais/spa/referrals-queue',
+      _validators: [validators.isUrlWithTemplateParameters(['patientUuid', 'visitUuid', 'encounterUuid'])],
     },
   },
   pendingStatuses: {
     _type: Type.Array,
-    _default: ["Pending status", "Referral unmet"],
+    _default: ['Pending status', 'Referral unmet'],
     _elements: {
       _type: Type.String,
     },

package/src/declarations.d.tsx

@@ -1,7 +1,7 @@
-declare type Observable<T> = import("rxjs").Observable<T>;
-
-declare module "*.css";
-declare module "*.scss";
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare type SideNavProps = {};
 
 type Referral = {
   details: string;

package/src/index.ts

@@ -5,79 +5,25 @@
  * microfrontend.
  */
 
-import {
-  getAsyncLifecycle,
-  defineConfigSchema,
-  registerBreadcrumbs,
-} from "@openmrs/esm-framework";
-import { configSchema } from "./config-schema";
+import { getAsyncLifecycle, defineConfigSchema, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
 
-/**
- * This tells the app shell the version of this app. We inject this variable
- * via the Webpack DefinePlugin, so first, in order to keep TypeScript happy,
- * we need to tell it that this is an available variable in this scope. At
- * build-time the __VERSION__ variable is replaced with the version from
- * package.json
- */
-declare var __VERSION__: string;
-const version = __VERSION__;
-
-/**
- * This tells the app shell how to obtain translation files: that they
- * are JSON files in the directory `../translations` (which you should
- * see in the directory structure).
- */
-const importTranslation = require.context(
-  "../translations",
-  false,
-  /.json$/,
-  "lazy"
-);
+const moduleName = '@pih/esm-referrals-queue-app';
+const options = {
+  featureName: 'referrals-queue',
+  moduleName,
+};
 
-/**
- * This tells the app shell what versions of what OpenMRS backend modules
- * are expected. Warnings will appear if suitable modules are not
- * installed. The keys are the part of the module name after
- * `openmrs-module-`; e.g., `openmrs-module-fhir2` becomes `fhir2`.
- */
-const backendDependencies = {};
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-/**
- * This function performs any setup that should happen at microfrontend
- * load-time (such as defining the config schema) and then returns an
- * object which describes how the React application(s) should be
- * rendered.
- *
- * In this example, our return object contains a single page definition.
- * It tells the app shell that the default export of `greeter.tsx`
- * should be rendered when the route matches `hello`. The full route
- * will be `openmrsSpaBase() + 'hello'`, which is usually
- * `/openmrs/spa/hello`.
- */
-function setupOpenMRS() {
-  const moduleName = "@pih/esm-referrals-queue-app";
-  const options = {
-    featureName: "referrals-queue",
-    moduleName,
-  };
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
+export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
-
   registerBreadcrumbs([
     {
       path: `${window.spaBase}/referrals-queue`,
-      title: "Referrals Queue",
+      title: 'Referrals Queue',
     },
   ]);
-
-  return {
-    pages: [
-      {
-        load: getAsyncLifecycle(() => import("./root.component"), options),
-        route: "referrals-queue",
-      },
-    ],
-  };
 }
-
-export { backendDependencies, importTranslation, setupOpenMRS, version };

package/src/referrals-queue/referrals-queue.component.tsx

@@ -1,185 +1,136 @@
-import React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import "react-dates/initialize";
-import { SingleDatePicker } from "react-dates";
-import moment, { Moment } from "moment";
-import "moment/locale/fr";
-import { createErrorHandler } from "@openmrs/esm-framework";
-import Table from "../table/table.component";
-import styles from "./referrals-queue.css";
-import { getReferrals } from "./referrals-queue.resource";
-
-// Override the webpack CSS loader config in order to load react-dates styles.
-//   See thread: https://github.com/webpack-contrib/css-loader/issues/295
-import "!style-loader!css-loader!react-dates/lib/css/_datepicker.css";
-import "!style-loader!css-loader!./react-dates-overrides.css";
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import 'react-dates/initialize';
+import moment from 'moment';
+import { Content, Tile, Heading, Search, Dropdown, DatePicker, DatePickerInput } from '@carbon/react';
+import 'moment/locale/fr';
+import { createErrorHandler } from '@openmrs/esm-framework';
+import Table from '../table/referrals-table.component';
+import styles from './referrals-queue.scss';
+import { getReferrals } from './referrals-queue.resource';
 
 export default function ReferralsQueue(props: ReferralsQueueProps) {
   const [referrals, setReferrals]: [Referral[], Function] = React.useState([]);
-  const [referralTypeFilter, setReferralTypeFilter] = React.useState("");
-  const [statusFilter, setStatusFilter] = React.useState("");
+  const [referralTypeFilter, setReferralTypeFilter] = React.useState('');
+  const [statusFilter, setStatusFilter] = React.useState('');
   const today = moment();
-  const [fromDate, setFromDate] = React.useState(moment().subtract(1, "month"));
+  const [fromDate, setFromDate] = React.useState(moment().subtract(1, 'month'));
   const [toDate, setToDate] = React.useState(today);
-  const [ptQuery, setPtQuery] = React.useState("");
-  const [fromDateFocused, setFromDateFocused] = React.useState(false);
-  const [toDateFocused, setToDateFocused] = React.useState(false);
+  const [ptQuery, setPtQuery] = React.useState('');
   const { t, i18n } = useTranslation();
 
   const languageMatches = i18n.language?.match(/^(en|fr|ht).*/);
-  const language = (languageMatches && languageMatches[1]) || "en";
+  const language = (languageMatches && languageMatches[1]) || 'en';
 
   React.useEffect(() => {
-    moment.locale(language === "ht" ? "fr" : language);
+    moment.locale(language === 'ht' ? 'fr' : language);
   }, [language]);
 
   React.useEffect(() => {
     if (fromDate && toDate) {
       const sub = getReferrals({
-        fromDate: fromDate.format("YYYY-MM-DD"),
-        toDate: toDate.format("YYYY-MM-DD"),
+        fromDate: fromDate.format('YYYY-MM-DD'),
+        toDate: toDate.format('YYYY-MM-DD'),
         locale: language,
-      }).subscribe(
-        (referrals) => setReferrals(referrals),
-        createErrorHandler()
-      );
+      }).subscribe((referrals) => setReferrals(referrals), createErrorHandler());
       return () => sub.unsubscribe();
     }
   }, [fromDate, toDate, language]);
 
-  // console.log(referrals);
   const filteredReferrals = referrals
-    .filter((r) => !referralTypeFilter || r.referral_type == referralTypeFilter)
-    .filter((r) => !statusFilter || r.fulfillment_status == statusFilter)
+    .filter(
+      (r) => !referralTypeFilter || referralTypeFilter == t('any', 'Any') || r.referral_type == referralTypeFilter,
+    )
+    .filter((r) => !statusFilter || statusFilter == t('any', 'Any') || r.fulfillment_status == statusFilter)
     .filter((r) => matchQuery(r, ptQuery));
-  const referralTypes = [...new Set(referrals.map((r) => r.referral_type))];
-  const statuses = [
-    ...new Set(
-      referrals.map((r) => r.fulfillment_status).filter((r) => r != null)
-    ),
-  ];
+
+  const referralTypes = [t('any', 'Any'), ...new Set(referrals.map((r) => r.referral_type).filter((r) => r != null))];
+
+  const statuses = [t('any', 'Any'), ...new Set(referrals.map((r) => r.fulfillment_status).filter((r) => r != null))];
+
   return (
-    <div className={styles.container}>
-      <div className="omrs-card omrs-margin-top-16 omrs-padding-16">
-        <div className="omrs-type-title-2">
+    <Content className={styles.container}>
+      <Tile>
+        <Heading>
           <Trans i18nKey="referrals-queue">Referrals Queue</Trans>
-        </div>
+        </Heading>
         <div className={styles.controlsContainer}>
           <div className={styles.inputContainer}>
-            <div className={styles.dateInputContainer}>
-              <label htmlFor="from-date">
-                <Trans i18nKey="from">From</Trans>
-              </label>
-              <SingleDatePicker
-                id="from-date"
-                date={fromDate}
-                onDateChange={(date) => setFromDate(date)}
-                focused={fromDateFocused}
-                onFocusChange={({ focused }) => setFromDateFocused(focused)}
-                isOutsideRange={(date: Moment) => date.isAfter(today)}
-                displayFormat="DD MMM YYYY"
-                numberOfMonths={1}
-              />
-            </div>
-            <div className={styles.dateInputContainer}>
-              <label htmlFor="to-date">
-                <Trans i18nKey="to">To</Trans>
-              </label>
-              <SingleDatePicker
-                id="to-date"
-                date={toDate}
-                onDateChange={(date) => setToDate(date)}
-                focused={toDateFocused}
-                onFocusChange={({ focused }) => setToDateFocused(focused)}
-                isOutsideRange={(date: Moment) => date.isAfter(today)}
-                displayFormat="DD MMM YYYY"
-                numberOfMonths={1}
-              />
-            </div>
+            <DatePicker
+              dateFormat="d/M/Y"
+              datePickerType="range"
+              locale={language === 'ht' ? 'fr' : language}
+              maxDate={new Date().toISOString()}
+              onChange={(date) => {
+                if (date && date.length > 0) {
+                  setFromDate(date ? moment(date[0]) : null);
+                  if (date.length > 1) {
+                    setToDate(date ? moment(date[1]) : null);
+                  }
+                }
+              }}
+              value={[fromDate.toISOString(), toDate.toISOString()]}>
+              <DatePickerInput id="from-date" labelText={t('from', 'From')} />
+              <DatePickerInput id="to-date" labelText={t('to', 'To')} />
+            </DatePicker>
           </div>
           <div className={styles.inputContainer}>
-            <div className="omrs-input-group">
-              <label htmlFor="referral-type">
-                <Trans i18nKey="referral-type">Referral Type</Trans>
-              </label>
-              <select
+            <div style={{ width: 400 }}>
+              <Dropdown
                 id="referral-type"
-                value={referralTypeFilter}
-                onChange={(e) => setReferralTypeFilter(e.target.value)}
-                className={styles.dropdown}
-              >
-                <option value="">{t("any", "Any")}</option>
-                {referralTypes.map((t) => (
-                  <option key={t} value={t}>
-                    {t}
-                  </option>
-                ))}
-              </select>
+                label={t('select-referral-type', 'Select Referral Type')}
+                titleText={t('referral-type', 'Referral Type')}
+                items={referralTypes}
+                onChange={(e) => setReferralTypeFilter(e.selectedItem)}
+              />
             </div>
           </div>
           <div className={styles.inputContainer}>
-            <div className="omrs-input-group">
+            <div style={{ width: 400 }}>
               <label htmlFor="query-input">
                 <Trans i18nKey="filter-by-patient">Filter by patient</Trans>
               </label>
-              <input
-                id="query-input"
-                type="text"
-                value={ptQuery}
-                onChange={(e) => setPtQuery(e.target.value)}
-                className="omrs-input-outlined"
-              />
+              <Search id="query-input" labelText="" onChange={(e) => setPtQuery(e.target.value)} />
             </div>
           </div>
           <div className={styles.inputContainer}>
-            <div className="omrs-input-group">
-              <label htmlFor="status">
-                <Trans i18nKey="status">Status</Trans>
-              </label>
-              <select
+            <div style={{ width: 400 }}>
+              <Dropdown
                 id="status"
-                value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value)}
-                className={styles.dropdown}
-              >
-                <option value="">{t("any", "Any")}</option>
-                {statuses.map((t) => (
-                  <option key={t} value={t}>
-                    {t}
-                  </option>
-                ))}
-              </select>
+                label={t('select-status', 'Select Status')}
+                titleText={t('status', 'Status')}
+                items={statuses}
+                onChange={(e) => setStatusFilter(e.selectedItem)}
+              />
             </div>
           </div>
         </div>
         <div className={styles.tableContainer}>
           <Table referrals={filteredReferrals} />
         </div>
-      </div>
-    </div>
+      </Tile>
+    </Content>
   );
 }
 
 function matchQuery(referral: Referral, query: string): boolean {
   return (
     !query ||
-    prepareQuery(query).every((regexp) =>
-      regexp.test(removeDiacritics(referral.patient_name))
-    ) ||
-    new RegExp(query, "i").test(referral.zl_emr_id)
+    prepareQuery(query).every((regexp) => regexp.test(removeDiacritics(referral.patient_name))) ||
+    new RegExp(query, 'i').test(referral.zl_emr_id)
   );
 }
 
 function prepareQuery(query: string): RegExp[] {
   return query.split(/\s/).map((token) => {
     const tokenCleaned = removeDiacritics(token);
-    return new RegExp("\\b" + tokenCleaned, "i");
+    return new RegExp('\\b' + tokenCleaned, 'i');
   });
 }
 
 function removeDiacritics(str: string) {
   // From https://stackoverflow.com/a/37511463/1464495
-  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+  return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 }
 
 type ReferralsQueueProps = {};

package/src/referrals-queue/referrals-queue.resource.tsx

@@ -1,12 +1,9 @@
-import { openmrsObservableFetch } from "@openmrs/esm-framework";
-import { map } from "rxjs/operators";
+import { openmrsObservableFetch } from '@openmrs/esm-framework';
+import { type Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
-export function getReferrals({
-  fromDate,
-  toDate,
-  locale,
-}): Observable<Object[]> {
+export function getReferrals({ fromDate, toDate, locale }): Observable<Object[]> {
   return openmrsObservableFetch(
-    `/ws/rest/v1/reportingrest/reportdata/cd7dfde7-764a-4da6-81c2-d5887ed1df51?startDate=${fromDate}&endDate=${toDate}&locale=${locale}`
-  ).pipe(map(({ data }) => data["dataSets"][0]["rows"]));
+    `/ws/rest/v1/reportingrest/reportdata/cd7dfde7-764a-4da6-81c2-d5887ed1df51?startDate=${fromDate}&endDate=${toDate}&locale=${locale}`,
+  ).pipe(map(({ data }) => data['dataSets'][0]['rows']));
 }

package/src/referrals-queue/referrals-queue.scss

@@ -0,0 +1,24 @@
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 1500px;
+}
+
+.tableContainer {
+  height: 500px;
+  overflow-x: auto;
+}
+
+.controlsContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.inputContainer {
+  display: flex;
+  width: 50%;
+  min-width: 300px;
+  text-align: left;
+  padding: 0.5rem;
+  align-items: flex-end;
+}