@openmrs/esm-bed-management-app 7.0.3-pre.94

package/src/card-header/card-header.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.desktopHeader,
+.tabletHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-background;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.desktopHeader {
+  height: layout.$spacing-09;
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {
+  height: 4.5rem;
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeader,
+  .tabletHeader {
+    text-align: right;
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+  }
+}

package/src/config-schema.ts

@@ -0,0 +1,13 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  admissionLocationTagName: {
+    _type: Type.String,
+    _description: 'Patients may only be admitted to inpatient care in a location with this tag',
+    _default: 'Admission Location',
+  },
+};
+
+export interface BedManagementConfig {
+  admissionLocationTagName: string;
+}

package/src/declarations.d.ts

@@ -0,0 +1,7 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+declare module '*.svg';
+
+declare type SideNavProps = object;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Layer, Tile } from '@carbon/react';
+import styles from './empty-state.scss';
+
+type EmptyStateProps = {
+  msg: string;
+  helper: string;
+};
+
+const EmptyState: React.FC<EmptyStateProps> = ({ msg, helper }: EmptyStateProps) => {
+  return (
+    <Layer className={styles.layer}>
+      <Tile className={styles.tile}>
+        <svg width={64} height={64} viewBox="0 0 64 64">
+          <title>Empty data illustration</title>
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+              fill="#F4F4F4"
+            />
+            <path
+              d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+              fill="#8D8D8D"
+            />
+            <path
+              d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+              fill="#C6C6C6"
+            />
+            <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+            <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
+            <path
+              d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+              fill="#F4F4F4"
+            />
+            <path
+              d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+              fill="#8D8D8D"
+            />
+            <path
+              d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+              fill="#C6C6C6"
+            />
+            <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+            <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
+          </g>
+        </svg>
+        <p className={styles.content}>{msg}</p>
+        <p className={styles.explainer}>{helper}</p>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default EmptyState;

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

@@ -0,0 +1,62 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: colors.$gray-70;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: layout.$spacing-07;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  padding: layout.$spacing-07;
+  border: 1px solid colors.$gray-20;
+  margin: layout.$spacing-06;
+}
+
+.layer {
+  text-align: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.explainer {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}

package/src/header/header.component.tsx

@@ -0,0 +1,42 @@
+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 { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <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>
+      </div>
+      <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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

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: layout.$spacing-03;
+  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: layout.$spacing-03;
+  padding-top: layout.$spacing-04;
+}
+
+.page-name {
+  white-space: nowrap;
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin: layout.$spacing-05;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: layout.$spacing-05;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+  fill: var(--brand-03);
+}
+
+.svgContainer svg {
+  width: 4.5rem;
+  height: 4.5rem;
+  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,51 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createLeftPanelLink } from './left-panel-link.component';
+
+const moduleName = '@ugandaemr/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 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,
+);

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

@@ -0,0 +1,23 @@
+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,42 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.leftPanel {
+  border-right: 1px solid colors.$gray-20;
+  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');
+
+    &:focus,
+    &:hover {
+      background-color: colors.$gray-10-hover;
+    }
+
+    // Active menu item
+    &:global(.active-left-nav-link) {
+      color: colors.$gray-100;
+      border-left: layout.$spacing-02 solid var(--brand-01);
+      outline: none;
+      padding: 0 layout.$spacing-04;
+      background-color: colors.$gray-20;
+    }
+  }
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-07;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  :global(.cds--side-nav__link) {
+    height: layout.$spacing-09;
+  }
+}

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

@@ -0,0 +1,39 @@
+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 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',
+      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/layout';
+
+.container {
+  background-color: colors.$white-0;
+  height: calc(100vh - layout.$spacing-09);
+}
+
+: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",
+    "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": "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",
+      "slot": "bed-management-left-panel-slot",
+      "order": 0
+    },
+    {
+      "component": "bedAdmission",
+      "name": "bed-admission-dashboard",
+      "slot": "bed-admission-dashboard-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,60 @@
+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();
+
+  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;