@kenyaemr/esm-bed-management-app 1.0.1-pre.11

package/src/header/header.scss

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

package/src/header/illustration.component.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./header.scss";
+import { Stethoscope } from "@carbon/react/icons";
+
+const Illustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <Stethoscope className={styles.iconOverrides} />
+    </div>
+  );
+};
+
+export default Illustration;

package/src/home.component.tsx

@@ -0,0 +1,15 @@
+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 (
+    <section className={styles.section}>
+      <Header route="Summary" />
+      <BedManagementSummary />
+    </section>
+  );
+};
+
+export default Home;

package/src/home.scss

@@ -0,0 +1,5 @@
+@use '@carbon/colors';
+
+.section {
+  border-right: 1px solid colors.$gray-20;
+}

package/src/index.ts

@@ -0,0 +1,78 @@
+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";
+
+const moduleName = "@kenyaemr/esm-bed-management-app";
+
+const options = {
+  featureName: "bed-management",
+  moduleName,
+};
+
+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 adminCardLink = getAsyncLifecycle(
+  () => import("./admin-card-link.component"),
+  options
+);
+
+export const summaryLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: "bed-management",
+    title: "Summary",
+  }),
+  options
+);
+
+export const adminLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: "administration",
+    title: "Ward Allocation",
+  }),
+  options
+);
+export const bedTypeLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: "bed-type",
+    title: "Bed Type",
+  }),
+  options
+);
+export const bedTagLeftPanelLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: "bed-tag",
+    title: "Bed Tag",
+  }),
+  options
+);
+export const bedAdmissionDashboardLink = getSyncLifecycle(
+  createDashboardLink({
+    name: "bed-admission",
+    title: "In Patient",
+  }),
+  options
+);

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

@@ -0,0 +1,33 @@
+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");
+  }, []);
+
+  return (
+    isDesktop(layout) && (
+      <SideNav
+        aria-label="Bed management left panel"
+        className={styles.leftPanel}
+        expanded
+      >
+        <ExtensionSlot name="bed-management-left-panel-slot" />
+      </SideNav>
+    )
+  );
+};
+
+export default LeftPanel;

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

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

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

@@ -0,0 +1,49 @@
+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;
+  title: string;
+}
+
+function LinkExtension({ config }: { config: LinkConfig }) {
+  const { name, title } = config;
+  const location = useLocation();
+
+  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}$/;
+    return regex.test(value);
+  };
+
+  if (isUUID(urlSegment)) {
+    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"
+      }`}
+    >
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createLeftPanelLink = (config: LinkConfig) => () =>
+  (
+    <BrowserRouter>
+      <LinkExtension config={config} />
+    </BrowserRouter>
+  );

package/src/root.component.tsx

@@ -0,0 +1,39 @@
+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";
+
+const Root: React.FC = () => {
+  const spaBasePath = window.spaBase;
+
+  useEffect(() => {
+    setLeftNav({
+      name: "bed-management-left-panel-slot",
+      basePath: spaBasePath,
+    });
+    return () => unsetLeftNav("bed-management-left-panel-slot");
+  }, [spaBasePath]);
+
+  return (
+    <BrowserRouter basename={`${window.getOpenmrsSpaBase()}bed-management`}>
+      <LeftPanel />
+      <main className={styles.container}>
+        <Routes>
+          <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>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,11 @@
+@use '@carbon/colors';
+@use "@carbon/type";
+
+.container {
+  background-color: colors.$white-0;
+  height: calc(100vh - 3rem);
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
+}

package/src/routes.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": "^1.2.0",
+    "webservices.rest": "^2.24.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "route": "bed-management"
+    }
+  ],
+  "extensions": [
+    {
+      "component": "adminCardLink",
+      "name": "bed-management-admin-card-link",
+      "slot": "system-admin-page-card-link-slot"
+    },
+    {
+      "component": "adminLeftPanelLink",
+      "name": "bed-administration-left-panel-link",
+      "slot": "bed-management-left-panel-slot"
+    },
+    {
+      "component": "summaryLeftPanelLink",
+      "name": "bed-management-home-dashboard-link",
+      "slot": "bed-management-left-panel-slot",
+      "order": 0
+    },
+    {
+      "component": "bedAdmission",
+      "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",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "bed-admission",
+        "slot": "bed-admission-dashboard-slot",
+        "title": "Bed-admission"
+      }
+    }
+  ]
+}

package/src/setup-tests.ts

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

package/src/summary/summary.component.tsx

@@ -0,0 +1,74 @@
+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";
+
+const Summary: React.FC = () => {
+  const { t } = useTranslation();
+  const {
+    data: admissionLocations,
+    isLoading,
+    error,
+  } = useAdmissionLocations();
+
+  if (isLoading) {
+    return (
+      <div className={styles.loader}>
+        <DataTableSkeleton role="progressbar" zebra />
+      </div>
+    );
+  }
+
+  if (admissionLocations?.length) {
+    return (
+      <div className={styles.cardContainer}>
+        {admissionLocations.map((admissionLocation) => {
+          const routeSegment = `${window.getOpenmrsSpaBase()}bed-management/location/${
+            admissionLocation.ward.uuid
+          }`;
+
+          return (
+            <WardCard
+              headerLabel={admissionLocation.ward.display}
+              label={t("beds", "Beds")}
+              value={admissionLocation?.totalBeds}
+            >
+              {admissionLocation?.totalBeds && (
+                <div className={styles.link}>
+                  <ConfigurableLink className={styles.link} to={routeSegment}>
+                    {t("viewBeds", "View beds")}
+                  </ConfigurableLink>
+                  <ArrowRight size={16} />
+                </div>
+              )}
+            </WardCard>
+          );
+        })}
+      </div>
+    );
+  }
+
+  if (!isLoading && admissionLocations?.length === 0 && !error) {
+    return <EmptyState msg="No data to display" helper={""} />;
+  }
+
+  if (error) {
+    return (
+      <ErrorState
+        headerTitle={t(
+          "errorFetchingbedInformation",
+          "Error fetching bed information"
+        )}
+        error={error}
+      />
+    );
+  }
+};
+
+export default Summary;