@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"component":"procedureDashboardLink","name":"procedure-dashboard-link","meta":{"name":"procedure","title":"procedure","slot":"procedure-dashboard-slot"}},{"component":"root","name":"procedure-dashboard-root","slot":"procedure-dashboard-slot"},{"name":"procedures-ordered-tile-component","slot":"procedure-tiles-slot","component":"OrderedTileComponent","meta":{"name":"proceduresOrderedTileSlot","title":"Active Orders"}},{"name":"procedures-worklist-tile-component","slot":"procedure-tiles-slot","component":"worklistTileComponent","meta":{"name":"worklisTileSlot","title":"Worklist"}},{"name":"procedures-referred-tile-component","slot":"procedure-tiles-slot","component":"referredOutTileComponent","meta":{"name":"referredTileSlot","title":"Referred Out"}},{"name":"procedures-not-done-tile-component","slot":"procedure-tiles-slot","component":"notDoneTileComponent","meta":{"name":"notDoneTileSlot","title":"Not Done"}},{"name":"procedures-completed-tile-component","slot":"procedure-tiles-slot","component":"completedTileComponent","meta":{"name":"completedTileSlot","title":"Completed"}},{"name":"procedures-worklist-tab-component","slot":"procedures-panels-slot","component":"worklistProceduresTabComponent","meta":{"name":"proceduresPanelSlot","title":"Worklist"}},{"name":"procedures-referred-tab-component","slot":"procedures-panels-slot","component":"referredProceduresTabComponent","meta":{"name":"proceduresPanelSlot","title":"Referred Out"}},{"name":"procedures-not-done-tab-component","slot":"procedures-panels-slot","component":"notDoneProceduresTabComponent","meta":{"name":"proceduresPanelSlot","title":"Not Done"}},{"name":"procedures-completed-tab-component","slot":"procedures-panels-slot","component":"completedProceduresTabComponent","meta":{"name":"proceduresPanelSlot","title":"Completed"}},{"name":"procedure-instructions-modal","component":"procedureInstructionsModalComponent"},{"name":"procedure-reject-reason-modal","component":"procedureRejectModalComponent"},{"name":"add-procedure-to-worklist-dialog","component":"addProcedureToWorklistDialogComponent"},{"name":"reject-procedure-order-dialog","component":"rejectProcedureOrderDialogComponent"},{"name":"procedures-order-panel","component":"proceduresOrderPanel","slot":"order-basket-slot","order":4}],"workspaces":[{"name":"add-procedures-order","type":"order","title":"Add procedure order","component":"addProceduresOrderWorkspace"},{"name":"procedure-report-form","component":"postProcedureResults","title":"Procedure Report Form","type":"form"}],"modals":[{"name":"print-procedure-report-modal","component":"printProcedureReportModal"}],"pages":[{"component":"root","route":"procedure"}],"version":"1.0.2-pre.6"}

package/jest.config.js

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

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@thrustdevs/esm-procedure-orders-app",
+  "version": "1.0.2-pre.6",
+  "description": "Procedure Orders app for KenyaEMR",
+  "browser": "dist/kenyaemr-esm-procedure-orders-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 --ignore-pattern '**/*.test.ts' --ignore-pattern '**/*.test.tsx' --ignore-pattern '**/__tests__/**'",
+    "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/palladiumkenya/kenyaemr-esm-core#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/palladiumkenya/kenyaemr-esm-core/issues"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react-to-print": "^2.14.13"
+  },
+  "peerDependencies": {
+    "@carbon/react": "^1.x",
+    "@openmrs/esm-framework": "6.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "stableVersion": "1.0.1"
+}

package/src/completed-list/completed-list.component.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Overlay from '../components/overlay/overlay.component';
+import { useOrdersWorklist } from '../hooks/useOrdersWorklist';
+import GroupedOrdersTable from '../shared/ui/common/grouped-orders-table.component';
+import { DataTableSkeleton } from '@carbon/react';
+
+interface CompletedListProps {
+  fulfillerStatus: string;
+}
+
+export const CompletedList: React.FC<CompletedListProps> = ({ fulfillerStatus }) => {
+  const { t } = useTranslation();
+
+  const { workListEntries, isLoading } = useOrdersWorklist('COMPLETED', fulfillerStatus);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (workListEntries?.length >= 0) {
+    return (
+      <>
+        <div>
+          <GroupedOrdersTable
+            orders={workListEntries}
+            showActions={false}
+            showStatus={true}
+            showOrderType={true}
+            showStartButton={false}
+            title={t('completedOrders', 'Completed Orders')}
+            actions={[]}
+          />
+        </div>
+        <Overlay />
+      </>
+    );
+  }
+};

package/src/completed-list/completed-list.scss

@@ -0,0 +1,223 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+title {
+  width: 6.938rem;
+  height: 1.75rem;
+  margin: 0.438rem 22.875rem 0.813rem 0;
+  font-family: IBMPlexSans;
+  font-size: 1.25rem;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: normal;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.orderTabsContainer {
+  height: 100%;
+  width: 100%;
+
+  :global(.cds--tab-content) {
+    padding: 0 !important;
+  }
+}
+
+.orderTabs {
+  grid-column: 'span 2';
+  padding: 0 spacing.$spacing-05;
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.tabsContainer {
+  background-color: vars.$ui-02;
+
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+
+  :global(.cds--tab--list) button {
+    max-width: 12rem !important;
+  }
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  margin: 0.5rem spacing.$spacing-05;
+  background-color: vars.$ui-01;
+  border: 0.5px solid #e0e0e0;
+
+  :global(.cds--data-table-container) {
+    padding-top: 0 !important;
+  }
+
+  tbody > tr > :nth-child(2) {
+    white-space: nowrap;
+  }
+
+  :global(.cds--data-table td) {
+    height: unset !important;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 1) td {
+    background-color: vars.$ui-02;
+    border-bottom: 1px solid vars.$ui-03;
+    border-top: 1px solid vars.$ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: vars.$ui-01;
+    border-bottom: 1px solid vars.$ui-03;
+  }
+}
+
+.tableContainer {
+  background-color: vars.$ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: vars.$text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: vars.$ui-03;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.activePatientsTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  padding-top: 0.5rem;
+
+  :global(.cds--search-magnifier-icon) {
+    z-index: 0 !important;
+  }
+
+  input {
+    background-color: #fff;
+  }
+}
+
+.addOrderBtn {
+  width: 10rem !important;
+  padding: 0.5rem !important;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.patientSearch {
+  width: 25rem;
+  border-bottom-color: vars.$ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: vars.$ui-02;
+  border-bottom-color: vars.$ui-03;
+}
+
+.container {
+  background-color: vars.$ui-01;
+}
+
+.expandedLabQueueVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    > div {
+      max-height: max-content !important;
+      background-color: vars.$ui-02;
+    }
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 1rem;
+  }
+}
+
+.tableLayerSearch {
+  margin: 5px;
+  padding: 10px;
+}
+
+.dropDownContainer {
+  padding: 10px;
+}
+
+.toolbar {
+  position: static;
+  height: 3rem;
+  overflow: visible;
+  background-color: color;
+}
+
+.tileContainer {
+  background-color: vars.$ui-02;
+  border-top: 1px solid vars.$ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: vars.$text-02;
+  margin-bottom: 0.5rem;
+}

package/src/components/create-dashboard-link.component.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+  slot?: string;
+}
+
+function DashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) {
+  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'}`}>
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createHomeDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => (
+  <BrowserRouter>
+    <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+  </BrowserRouter>
+);

package/src/components/overlay/hook.ts

@@ -0,0 +1,47 @@
+import { getGlobalStore } from '@openmrs/esm-framework';
+import { useEffect, useState } from 'react';
+
+interface OverlayStore {
+  isOverlayOpen: boolean;
+  component?: any;
+  header: string;
+}
+
+const initialState = { isOverlayOpen: false, component: Function, header: '' };
+
+const getOverlayStore = () => {
+  return getGlobalStore('laboratory', initialState);
+};
+
+export const launchOverlay = (headerTitle: string, componentToRender) => {
+  const store = getOverlayStore();
+  store.setState({
+    isOverlayOpen: true,
+    component: componentToRender,
+    header: headerTitle,
+  });
+};
+
+export const closeOverlay = () => {
+  const store = getOverlayStore();
+  store.setState({ component: null, isOverlayOpen: false });
+};
+
+export const useOverlay = () => {
+  const [overlay, setOverlay] = useState<OverlayStore>();
+
+  useEffect(() => {
+    function update(state: OverlayStore) {
+      setOverlay(state);
+    }
+
+    update(getOverlayStore().getState());
+    getOverlayStore().subscribe(update);
+  }, []);
+
+  return {
+    isOverlayOpen: overlay?.isOverlayOpen,
+    component: overlay?.component,
+    header: overlay?.header,
+  };
+};

package/src/components/overlay/overlay.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button, Header } from '@carbon/react';
+import { ArrowLeft, Close } from '@carbon/react/icons';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './overlay.scss';
+import { useTranslation } from 'react-i18next';
+import { closeOverlay, useOverlay } from './hook';
+
+const Overlay: React.FC = () => {
+  const { header, component, isOverlayOpen } = useOverlay();
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+  return (
+    <>
+      {isOverlayOpen && (
+        <div className={layout !== 'tablet' ? styles.desktopOverlay : styles.tabletOverlay}>
+          {layout !== 'tablet' ? (
+            <div className={styles.desktopHeader}>
+              <div className={styles.headerContent}>{header}</div>
+              <Button className={styles.closePanelButton} onClick={() => closeOverlay()} kind="ghost" hasIconOnly>
+                <Close size={16} />
+              </Button>
+            </div>
+          ) : (
+            <Header
+              onClick={() => closeOverlay()}
+              aria-label={t('tabletOverlay', 'Tablet overlay')}
+              className={styles.tabletOverlayHeader}>
+              <Button hasIconOnly>
+                <ArrowLeft size={16} />
+              </Button>
+              <div className={styles.headerContent}>{header}</div>
+            </Header>
+          )}
+          <div>{component}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Overlay;

package/src/components/overlay/overlay.scss

@@ -0,0 +1,92 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.desktopOverlay {
+  position: fixed;
+  top: spacing.$spacing-09;
+  width: 37rem;
+  right: 0;
+  bottom: 0;
+  border-left: 1px solid vars.$text-03;
+  background-color: vars.$ui-01;
+  overflow-y: auto;
+  height: calc(100vh - 3rem);
+}
+
+.desktopOverlay::after {
+  height: 100%;
+  border-left: 1px solid vars.$text-03;
+}
+
+.tabletOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: vars.$ui-01;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  & > div {
+    margin-top: spacing.$spacing-09;
+  }
+}
+
+.tabletOverlayHeader {
+  button {
+    @include vars.brand-01(background-color);
+  }
+
+  .headerContent {
+    color: vars.$ui-02;
+  }
+}
+
+.desktopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: vars.$ui-03;
+  border-bottom: 1px solid vars.$text-03;
+  position: sticky;
+  position: -webkit-sticky;
+  width: 100%;
+  z-index: 1000;
+  top: 0;
+}
+
+.headerContent {
+  @include type.type-style('heading-compact-02');
+  padding: 0 spacing.$spacing-05;
+  color: vars.$ui-05;
+}
+
+.closeButton {
+  background-color: vars.$ui-background;
+  color: vars.$ui-05;
+  fill: vars.$ui-05;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}

package/src/config-schema.ts

@@ -0,0 +1,78 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  procedureOrderTypeUuid: {
+    _type: Type.String,
+    _description: 'Procedure Order type UUID',
+    _default: 'b4a7c280-369e-4d12-9ce8-18e36783fed6',
+  },
+  procedureConceptSetUuid: {
+    _type: Type.String,
+    _description: 'Procedure Concept SET UUID',
+    _default: '165418AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  testOrderTypeUuid: {
+    _type: Type.String,
+    _description: 'Test Order type UUID',
+    _default: '52a447d3-a64a-11e3-9aeb-50e549534c5e',
+  },
+  orders: {
+    _type: Type.Object,
+    _description: 'List of lab orderable concepts',
+    _default: {
+      labOrderableConcepts: [],
+      labOrderTypeUuid: '',
+    },
+  },
+  conditionConceptClassUuid: {
+    _type: Type.ConceptUuid,
+    _description: 'The concept class UUID for conditions',
+    _default: '8d4918b0-c2cc-11de-8d13-0010c6dffd0f',
+  },
+  procedureComplicationGroupingConceptUuid: {
+    _type: Type.ConceptUuid,
+    _description: 'The concept UUID for grouping procedure complications obs',
+    _default: '120202AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  procedureComplicationConceptUuid: {
+    _type: Type.ConceptUuid,
+    _description: 'The concept UUID for capturing procedure complications',
+    _default: '120198AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  procedureResultEncounterType: {
+    _type: Type.String,
+    _description: 'The procedure results encounter type UUID',
+    _default: '99a7a6ba-59f4-484e-880d-01cbeaead62f',
+  },
+  procedureResultEncounterRole: {
+    _type: Type.String,
+    _description: 'The encounter provider role UUID',
+    _default: 'a0b03050-c99b-11e0-9572-0800200c9a66',
+  },
+};
+
+export interface OrderReason {
+  labTestUuid: string;
+  required: boolean;
+  orderReasons: Array<string>;
+}
+
+export interface ConfigObject {
+  procedureOrderTypeUuid: string;
+  procedureConceptSetUuid: string;
+  testOrderTypeUuid: string;
+  labTestsWithOrderReasons: Array<OrderReason>;
+  showPrintButton: boolean;
+  orders: {
+    labOrderTypeUuid: string;
+    labOrderableConcepts: Array<string>;
+  };
+  conditionConceptClassUuid: string;
+  procedureComplicationGroupingConceptUuid: string;
+  procedureComplicationConceptUuid: string;
+  procedureResultEncounterType: string;
+  procedureResultEncounterRole: string;
+}
+
+export const StringPath =
+  'M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z';

package/src/constants.ts

@@ -0,0 +1,5 @@
+export const spaPath = window.getOpenmrsSpaBase();
+export const basePath = `${spaPath}home/procedure`;
+export const moduleName = '@openmrs/esm-procedure-app';
+export const ProcedureConceptClass_UUID = '8d490bf4-c2cc-11de-8d13-0010c6dffd0f';
+export const ServiceConceptSet_UUID = '330c0ec6-0ac7-4b86-9c70-29d76f0ae20a';

package/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;

package/src/empty-state/empty-state-component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './empty-state.scss';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+
+interface EmptyStateProps {
+  subTitle: string;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ subTitle }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.emptyStateContainer}>
+      <EmptyDataIllustration />
+      <p className={styles.subTitle}>{subTitle}</p>
+    </div>
+  );
+};
+
+export default EmptyState;

package/src/empty-state/empty-state.scss

@@ -0,0 +1,23 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.emptyStateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  background-color: colors.$white;
+  row-gap: layout.$spacing-02;
+
+  & form {
+    border: none;
+  }
+
+  .subTitle {
+    @include type.type-style('body-compact-01');
+    color: colors.$cool-gray-70;
+    font-weight: bold;
+  }
+}