@kenyaemr/esm-bed-management-app 1.0.1-pre.7 → 8.0.2

package/src/header/header.scss

@@ -1,6 +1,6 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use "@carbon/type";
+@use '@carbon/type';
 
 .header {
   @include type.type-style('body-compact-02');
@@ -8,7 +8,7 @@
   height: layout.$spacing-12;
   background-color: colors.$white-0;
   display: flex;
-  padding-left: 8px;
+  padding-left: layout.$spacing-03;
   justify-content: space-between;
   border-bottom: 1px solid colors.$gray-20;
 }
@@ -23,8 +23,8 @@
 .right-justified-items {
   @include type.type-style('body-compact-02');
   color: colors.$gray-70;
-  margin: 0.5rem;
-  padding-top: 0.75rem;
+  margin: layout.$spacing-03;
+  padding-top: layout.$spacing-04;
 }
 
 .page-name {
@@ -33,26 +33,26 @@
 }
 
 .page-labels {
-  margin: 1rem;
+  margin: layout.$spacing-05;
 }
 
 .middot {
-  margin: 0 0.5rem;
+  margin: 0 layout.$spacing-03;
 }
 
 .date-and-location {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-right: 1rem;
+  margin-right: layout.$spacing-05;
 }
 
 .value {
-  margin-left: 0.25rem;
+  margin-left: layout.$spacing-02;
 }
 
 .middot {
-  margin: 0 0.5rem;
+  margin: 0 layout.$spacing-03;
 }
 
 .view {
@@ -66,7 +66,7 @@ svg.iconOverrides {
 }
 
 .svgContainer svg {
-  width: 72px;
-  height: 72px;
+  width: 4.5rem;
+  height: 4.5rem;
   fill: var(--brand-03);
 }

package/src/header/illustration.component.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import styles from "./header.scss";
-import { Stethoscope } from "@carbon/react/icons";
+import React from 'react';
+import styles from './header.scss';
+import { Stethoscope } from '@carbon/react/icons';
 
 const Illustration: React.FC = () => {
   return (

package/src/home.component.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import BedManagementSummary from "./summary/summary.component";
-import Header from "./header/header.component";
-import styles from "./home.scss";
+import React from 'react';
+import BedManagementSummary from './summary/summary.component';
+import Header from './header/header.component';
+import styles from './home.scss';
 
 const Home: React.FC = () => {
   return (

package/src/index.ts

@@ -1,78 +1,51 @@
-import {
-  getAsyncLifecycle,
-  defineConfigSchema,
-  getSyncLifecycle,
-} from "@openmrs/esm-framework";
-import { configSchema } from "./config-schema";
-import { createLeftPanelLink } from "./left-panel-link.component";
-import { createDashboardLink } from "./bed-admission/createDashboardLink";
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createLeftPanelLink } from './left-panel-link.component';
 
-const moduleName = "@kenyaemr/esm-bed-management-app";
+const moduleName = '@ugandaemr/esm-bed-management-app';
 
 const options = {
-  featureName: "bed-management",
+  featureName: 'bed-management',
   moduleName,
 };
 
-export const importTranslation = require.context(
-  "../translations",
-  false,
-  /.json$/,
-  "lazy"
-);
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
-export const root = getAsyncLifecycle(
-  () => import("./root.component"),
-  options
-);
-
-export const bedAdmission = getAsyncLifecycle(
-  () => import("./bed-admission/bed-admission.component"),
-  options
-);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
-export const adminCardLink = getAsyncLifecycle(
-  () => import("./admin-card-link.component"),
-  options
-);
+export const adminCardLink = getAsyncLifecycle(() => import('./admin-card-link.component'), options);
 
 export const summaryLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: "bed-management",
-    title: "Summary",
+    name: 'bed-management',
+    title: 'Summary',
   }),
-  options
+  options,
 );
 
 export const adminLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: "administration",
-    title: "Ward Allocation",
+    name: 'administration',
+    title: 'Ward Allocation',
   }),
-  options
+  options,
 );
+
 export const bedTypeLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: "bed-type",
-    title: "Bed Type",
+    name: 'bed-type',
+    title: 'Bed Type',
   }),
-  options
+  options,
 );
 export const bedTagLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: "bed-tag",
-    title: "Bed Tag",
-  }),
-  options
-);
-export const bedAdmissionDashboardLink = getSyncLifecycle(
-  createDashboardLink({
-    name: "bed-admission",
-    title: "In Patient",
+    name: 'bed-tag',
+    title: 'Bed Tag',
   }),
-  options
+  options,
 );

package/src/left-panel/left-panel.component.tsx

@@ -1,29 +1,19 @@
-import React, { useEffect } from "react";
-import {
-  attach,
-  detach,
-  ExtensionSlot,
-  isDesktop,
-  useLayoutType,
-} from "@openmrs/esm-framework";
-import { SideNav } from "@carbon/react";
-import styles from "./left-panel.scss";
+import React, { useEffect } from 'react';
+import { attach, detach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import { SideNav } from '@carbon/react';
+import styles from './left-panel.scss';
 
 const LeftPanel: React.FC = () => {
   const layout = useLayoutType();
 
   useEffect(() => {
-    attach("nav-menu-slot", "bed-management-left-panel");
-    return () => detach("nav-menu-slot", "bed-management-left-panel");
+    attach('nav-menu-slot', 'bed-management-left-panel');
+    return () => detach('nav-menu-slot', 'bed-management-left-panel');
   }, []);
 
   return (
     isDesktop(layout) && (
-      <SideNav
-        aria-label="Bed management left panel"
-        className={styles.leftPanel}
-        expanded
-      >
+      <SideNav aria-label="Bed management left panel" className={styles.leftPanel} expanded>
         <ExtensionSlot name="bed-management-left-panel-slot" />
       </SideNav>
     )

package/src/left-panel/left-panel.scss

@@ -1,14 +1,15 @@
 @use '@carbon/colors';
-@use "@carbon/type";
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .leftPanel {
   border-right: 1px solid colors.$gray-20;
-  padding-top: 1rem;
+  padding-top: layout.$spacing-05;
 
   // Left nav menu item
   :global(.cds--side-nav__link) {
     color: colors.$gray-70;
-    @include type.type-style("heading-compact-01");
+    @include type.type-style('heading-compact-01');
 
     &:focus,
     &:hover {
@@ -18,9 +19,9 @@
     // Active menu item
     &:global(.active-left-nav-link) {
       color: colors.$gray-100;
-      border-left: 0.25rem solid var(--brand-01);
+      border-left: layout.$spacing-02 solid var(--brand-01);
       outline: none;
-      padding: 0 0.75rem;
+      padding: 0 layout.$spacing-04;
       background-color: colors.$gray-20;
     }
   }
@@ -29,13 +30,13 @@
 /* Desktop */
 :global(.omrs-breakpoint-gt-tablet) {
   :global(.cds--side-nav__link) {
-    height: 2rem;
+    height: layout.$spacing-07;
   }
 }
 
 /* Tablet */
 :global(.omrs-breakpoint-lt-desktop) {
   :global(.cds--side-nav__link) {
-    height: 3rem;
+    height: layout.$spacing-09;
   }
 }

package/src/left-panel-link.component.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from "react";
-import last from "lodash-es/last";
-import { BrowserRouter, useLocation } from "react-router-dom";
-import { ConfigurableLink } from "@openmrs/esm-framework";
+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;
@@ -12,38 +12,28 @@ function LinkExtension({ config }: { config: LinkConfig }) {
   const { name, title } = config;
   const location = useLocation();
 
-  let urlSegment = useMemo(
-    () => decodeURIComponent(last(location.pathname.split("/"))),
-    [location.pathname]
-  );
+  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}$/;
+    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 = "summary";
+    urlSegment = 'summary';
   }
 
   return (
     <ConfigurableLink
-      to={`${window.getOpenmrsSpaBase()}bed-management${
-        name && name !== "bed-management" ? `/${name}` : ""
-      }`}
-      className={`cds--side-nav__link ${
-        name === urlSegment && "active-left-nav-link"
-      }`}
-    >
+      to={`${window.getOpenmrsSpaBase()}bed-management${name && name !== 'bed-management' ? `/${name}` : ''}`}
+      className={`cds--side-nav__link ${name === urlSegment && 'active-left-nav-link'}`}>
       {title}
     </ConfigurableLink>
   );
 }
 
-export const createLeftPanelLink = (config: LinkConfig) => () =>
-  (
-    <BrowserRouter>
-      <LinkExtension config={config} />
-    </BrowserRouter>
-  );
+export const createLeftPanelLink = (config: LinkConfig) => () => (
+  <BrowserRouter>
+    <LinkExtension config={config} />
+  </BrowserRouter>
+);

package/src/root.component.tsx

@@ -1,23 +1,23 @@
-import React, { useEffect } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { setLeftNav, unsetLeftNav } from "@openmrs/esm-framework";
-import BedAdministrationTable from "./bed-administration/bed-administration-table.component";
-import Home from "./home.component";
-import LeftPanel from "./left-panel/left-panel.component";
-import WardWithBeds from "./ward-with-beds/ward-with-beds.component";
-import styles from "./root.scss";
-import BedTagAdministrationTable from "./bed-admission/bed-tag/bed-tag-administration-table.component";
-import BedTypeAdministrationTable from "./bed-admission/bed-type/bed-type-administration-table.component";
+import React, { useEffect } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { setLeftNav, unsetLeftNav } from '@openmrs/esm-framework';
+import Home from './home.component';
+import LeftPanel from './left-panel/left-panel.component';
+import WardWithBeds from './ward-with-beds/ward-with-beds.component';
+import BedAdministrationTable from './bed-administration/bed-administration-table.component';
+import BedTagAdministrationTable from './bed-tag/bed-tag-administration-table.component';
+import BedTypeAdministrationTable from './bed-type/bed-type-administration-table.component';
+import styles from './root.scss';
 
 const Root: React.FC = () => {
   const spaBasePath = window.spaBase;
 
   useEffect(() => {
     setLeftNav({
-      name: "bed-management-left-panel-slot",
+      name: 'bed-management-left-panel-slot',
       basePath: spaBasePath,
     });
-    return () => unsetLeftNav("bed-management-left-panel-slot");
+    return () => unsetLeftNav('bed-management-left-panel-slot');
   }, [spaBasePath]);
 
   return (

package/src/root.scss

@@ -1,9 +1,9 @@
 @use '@carbon/colors';
-@use "@carbon/type";
+@use '@carbon/layout';
 
 .container {
   background-color: colors.$white-0;
-  height: calc(100vh - 3rem);
+  height: calc(100vh - layout.$spacing-09);
 }
 
 :global(.omrs-breakpoint-gt-tablet) .container {

package/src/routes.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
-    "fhir2": "^1.2.0",
+    "fhir2": ">=1.2",
     "webservices.rest": "^2.24.0"
   },
   "pages": [
@@ -21,6 +21,16 @@
       "name": "bed-administration-left-panel-link",
       "slot": "bed-management-left-panel-slot"
     },
+    {
+      "component": "bedTypeLeftPanelLink",
+      "name": "bed-type-left-panel-link",
+      "slot": "bed-management-left-panel-slot"
+    },
+    {
+      "component": "bedTagLeftPanelLink",
+      "name": "bed-tag-left-panel-link",
+      "slot": "bed-management-left-panel-slot"
+    },
     {
       "component": "summaryLeftPanelLink",
       "name": "bed-management-home-dashboard-link",
@@ -32,16 +42,6 @@
       "name": "bed-admission-dashboard",
       "slot": "bed-admission-dashboard-slot"
     },
-    {
-      "component": "bedTypeLeftPanelLink",
-      "name": "bed-type-left-panel-link",
-      "slot": "bed-management-left-panel-slot"
-    },
-    {
-      "component": "bedTagLeftPanelLink",
-      "name": "bed-tag-left-panel-link",
-      "slot": "bed-management-left-panel-slot"
-    },
     {
       "name": "bed-admission-dashboard-link",
       "component": "bedAdmissionDashboardLink",
@@ -53,4 +53,4 @@
       }
     }
   ]
-}
+}

package/src/setup-tests.ts

@@ -1 +1 @@
-import "@testing-library/jest-dom/extend-expect";
+import '@testing-library/jest-dom/extend-expect';

package/src/summary/summary.component.tsx

@@ -1,21 +1,16 @@
-import React from "react";
-import { DataTableSkeleton } from "@carbon/react";
-import { ArrowRight } from "@carbon/react/icons";
-import { useTranslation } from "react-i18next";
-import { ConfigurableLink } from "@openmrs/esm-framework";
-import { useAdmissionLocations } from "./summary.resource";
-import EmptyState from "../empty-state/empty-state.component";
-import WardCard from "../ward-card/ward-card.component";
-import styles from "./summary.scss";
-import { ErrorState } from "@openmrs/esm-patient-common-lib";
+import React from 'react';
+import { DataTableSkeleton } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { ConfigurableLink, ErrorState } from '@openmrs/esm-framework';
+import { useAdmissionLocations } from './summary.resource';
+import EmptyState from '../empty-state/empty-state.component';
+import WardCard from '../ward-card/ward-card.component';
+import styles from './summary.scss';
 
 const Summary: React.FC = () => {
   const { t } = useTranslation();
-  const {
-    data: admissionLocations,
-    isLoading,
-    error,
-  } = useAdmissionLocations();
+  const { data: admissionLocations, isLoading, error } = useAdmissionLocations();
 
   if (isLoading) {
     return (
@@ -29,20 +24,17 @@ const Summary: React.FC = () => {
     return (
       <div className={styles.cardContainer}>
         {admissionLocations.map((admissionLocation) => {
-          const routeSegment = `${window.getOpenmrsSpaBase()}bed-management/location/${
-            admissionLocation.ward.uuid
-          }`;
+          const routeSegment = `${window.getOpenmrsSpaBase()}bed-management/location/${admissionLocation.ward.uuid}`;
 
           return (
             <WardCard
               headerLabel={admissionLocation.ward.display}
-              label={t("beds", "Beds")}
-              value={admissionLocation?.totalBeds}
-            >
+              label={t('beds', 'Beds')}
+              value={admissionLocation?.totalBeds}>
               {admissionLocation?.totalBeds && (
                 <div className={styles.link}>
                   <ConfigurableLink className={styles.link} to={routeSegment}>
-                    {t("viewBeds", "View beds")}
+                    {t('viewBeds', 'View beds')}
                   </ConfigurableLink>
                   <ArrowRight size={16} />
                 </div>
@@ -55,18 +47,12 @@ const Summary: React.FC = () => {
   }
 
   if (!isLoading && admissionLocations?.length === 0 && !error) {
-    return <EmptyState msg="No data to display" helper={""} />;
+    return <EmptyState msg="No data to display" helper={''} />;
   }
 
   if (error) {
     return (
-      <ErrorState
-        headerTitle={t(
-          "errorFetchingbedInformation",
-          "Error fetching bed information"
-        )}
-        error={error}
-      />
+      <ErrorState headerTitle={t('errorFetchingbedInformation', 'Error fetching bed information')} error={error} />
     );
   }
 };