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

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

@@ -1,17 +1,17 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use "@carbon/type";
+@use '@carbon/type';
 
 .desktopHeading {
   h4 {
-    @include type.type-style("heading-compact-02");
+    @include type.type-style('heading-compact-02');
     color: colors.$gray-70;
   }
 }
 
 .tabletHeading {
   h4 {
-    @include type.type-style("heading-03");
+    @include type.type-style('heading-03');
     color: colors.$gray-70;
   }
 }
@@ -23,26 +23,26 @@
   margin-bottom: layout.$spacing-05;
 
   h4:after {
-    content: "";
+    content: '';
     display: block;
-    width: 2rem;
+    width: layout.$spacing-07;
     padding-top: 0.188rem;
     border-bottom: 0.375rem solid var(--brand-03);
   }
 }
 
 .heading:after {
-  content: "";
+  content: '';
   display: block;
-  width: 2rem;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-03);
 }
 
 .tile {
-  padding: 2rem;
+  padding: layout.$spacing-07;
   border: 1px solid colors.$gray-20;
-  margin: 1.5rem;
+  margin: layout.$spacing-06;
 }
 
 .layer {
@@ -50,7 +50,7 @@
 }
 
 .content {
-  @include type.type-style("heading-compact-02");
+  @include type.type-style('heading-compact-02');
   color: colors.$gray-70;
   margin-top: layout.$spacing-05;
   margin-bottom: layout.$spacing-03;

package/src/header/header.component.tsx

@@ -1,47 +1,38 @@
-import React from "react";
-import {
-  ConfigurableLink,
-  formatDate,
-  useSession,
-} from "@openmrs/esm-framework";
-import { useTranslation } from "react-i18next";
-import { Calendar, Location } from "@carbon/react/icons";
-import Illustration from "./illustration.component";
-import styles from "./header.scss";
+import React from 'react';
+import { ConfigurableLink, formatDate, useSession } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import Illustration from './illustration.component';
+import styles from './header.scss';
 
 type HeaderProps = {
   route: string;
   headerTitle?: string;
 };
 
-const Header: React.FC<HeaderProps> = ({
-  route,
-  headerTitle = "Bed Management",
-}) => {
+const Header: React.FC<HeaderProps> = ({ route, headerTitle = 'Bed Management' }) => {
   const { t } = useTranslation();
   const userSession = useSession();
   const userLocation = userSession?.sessionLocation?.display;
 
   return (
     <div className={styles.header}>
-      <div className={styles["left-justified-items"]}>
+      <div className={styles['left-justified-items']}>
         <ConfigurableLink to={`${window.getOpenmrsSpaBase()}bed-management`}>
           <Illustration />
         </ConfigurableLink>
-        <div className={styles["page-labels"]}>
-          <p>{t("headerTitle", headerTitle)}</p>
-          <p className={styles["page-name"]}>{route}</p>
+        <div className={styles['page-labels']}>
+          <p>{t('headerTitle', headerTitle)}</p>
+          <p className={styles['page-name']}>{route}</p>
         </div>
       </div>
-      <div className={styles["right-justified-items"]}>
-        <div className={styles["date-and-location"]}>
+      <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>
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
         </div>
       </div>
     </div>

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,65 +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 root = getAsyncLifecycle(() => import('./root.component'), options);
 
-export const bedAdmission = getAsyncLifecycle(
-  () => import("./bed-admission/bed-admission.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 bedAdmissionDashboardLink = getSyncLifecycle(
-  createDashboardLink({
-    name: "bed-admission",
-    title: "In Patient",
+export const bedTypeLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'bed-type',
+    title: 'Bed Type',
+  }),
+  options,
+);
+export const bedTagLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    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,21 +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 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 (
@@ -26,6 +28,8 @@ const Root: React.FC = () => {
           <Route path="/" element={<Home />} />
           <Route path="/location/:location" element={<WardWithBeds />} />
           <Route path="/administration" element={<BedAdministrationTable />} />
+          <Route path="/bed-tag" element={<BedTagAdministrationTable />} />
+          <Route path="/bed-type" element={<BedTypeAdministrationTable />} />
         </Routes>
       </main>
     </BrowserRouter>

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",
@@ -43,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} />
     );
   }
 };