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

package/src/ward-with-beds/ward-with-beds.scss

@@ -0,0 +1,27 @@
+@use '@carbon/layout';
+
+.container {
+  margin: 1rem;
+}
+
+.backButton {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  margin-left: 1rem;
+  
+  button {
+    display: flex;
+    padding-left: 0 !important;
+    
+    svg {
+      order: 1;
+      margin-right: layout.$spacing-03;
+      margin-left: 0.5 !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}

package/src/workspace/allocate-bed-workspace.component.tsx

@@ -0,0 +1,188 @@
+import React, { useCallback, useState } from "react";
+import classNames from "classnames";
+import { Stack, ButtonSet, Button } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import {
+  openmrsFetch,
+  showNotification,
+  showToast,
+  useConfig,
+  useLayoutType,
+} from "@openmrs/esm-framework";
+import styles from "./allocate-bed.scss";
+import Overlay from "./overlay.component";
+import {
+  assignPatientBed,
+  endPatientQueue,
+  findLatestClinicalEncounter,
+} from "../bed-admission/bed-admission.resource";
+import BedLayoutList from "../bed-admission/bed-layout/bed-layout-list.component";
+import LocationComboBox from "../bed-admission/admitted-patients/location-combo-box.component";
+import { Bed } from "../types";
+import useSWR from "swr";
+import { EmptyState } from "@openmrs/esm-patient-common-lib";
+
+interface WorkSpaceProps {
+  closePanel: (e: boolean) => void;
+  headerTitle?: string;
+  queueStatus: string;
+  patientDetails: {
+    name: string;
+    patientUuid: string;
+    locationUuid: string;
+    locationTo: string;
+    locationFrom: string;
+    queueUuid: string;
+    encounter: {
+      uuid: string;
+    };
+  };
+}
+
+const AllocateBedWorkSpace: React.FC<WorkSpaceProps> = ({
+  headerTitle,
+  closePanel,
+  patientDetails,
+  queueStatus,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === "tablet";
+  const {
+    restrictWardAdministrationToLoginLocation,
+    admissionFormUuid,
+    admissionEncounterTypeUuid,
+  } = useConfig();
+  const locationsUrl = `/ws/rest/v1/encounter?patient=${patientDetails.patientUuid}&encounterType=${admissionEncounterTypeUuid}&v=default`;
+  const {
+    data: encounters,
+    error,
+    isLoading: isLoadingEncounters,
+  } = useSWR<{ data }>(locationsUrl, openmrsFetch);
+  const [selectedBed, setSelectedBed] = useState<Bed>();
+  const [isBedAssigned, setIsBedAssigned] = useState(false);
+  const [isQueueEnded, setIsQueueEnded] = useState(false);
+  const [locationUuid, setLocation] = useState(
+    restrictWardAdministrationToLoginLocation ? patientDetails.locationUuid : ""
+  );
+
+  let lastClinicalEncounter;
+  if (admissionEncounterTypeUuid !== undefined) {
+    const { data } = findLatestClinicalEncounter(
+      patientDetails.patientUuid,
+      admissionEncounterTypeUuid,
+      encounters,
+      admissionFormUuid
+    );
+    lastClinicalEncounter = data;
+  }
+
+  const handleClick = (bed) => {
+    setSelectedBed(bed);
+  };
+
+  const handleAssignBedToPatient = useCallback(() => {
+    if (lastClinicalEncounter === "") {
+      showNotification({
+        title: t("errorAssigningBed", "Error assigning bed"),
+        kind: "error",
+        critical: true,
+        description: t(
+          "admissionEncounterRequired",
+          "This operation requires an admission encounter filled first"
+        ),
+      });
+      return;
+    }
+
+    const patientAndEncounterUuids = {
+      encounterUuid: lastClinicalEncounter,
+      patientUuid: patientDetails.patientUuid,
+    };
+
+    assignPatientBed(patientAndEncounterUuids, selectedBed.bedId)
+      .then(() => {
+        setIsBedAssigned(true);
+        showToast({
+          title: t("bedAssigned", "Bed Assigned"),
+          kind: "success",
+          critical: true,
+          description: `Bed ${selectedBed.bedNumber} was assigned to ${patientDetails.name} successfully.`,
+        });
+        closePanel(false);
+      })
+      .catch((error) => {
+        showNotification({
+          title: t("errorAssigningBed", "Error assigning bed"),
+          kind: "error",
+          critical: true,
+          description: error?.message,
+        });
+      });
+  }, [patientDetails, selectedBed, t, closePanel, lastClinicalEncounter]);
+
+  return (
+    <>
+      <Overlay header={headerTitle} closePanel={() => closePanel(false)}>
+        <div className={styles.container}>
+          <Stack gap={8} className={styles.container}>
+            <section className={styles.section}>
+              {restrictWardAdministrationToLoginLocation ? (
+                <LocationComboBox setLocationUuid={setLocation} />
+              ) : (
+                <>
+                  <LocationComboBox setLocationUuid={setLocation} />
+                </>
+              )}
+              {lastClinicalEncounter !== "" && (
+                <BedLayoutList
+                  locationUuid={locationUuid}
+                  handleClick={handleClick}
+                  patientDetails={patientDetails}
+                />
+              )}
+              {lastClinicalEncounter === "" && (
+                <div className={styles.missingEncounter}>
+                  {t(
+                    "missingAdmissionEncounter",
+                    "Clinical encounter for admission is required!"
+                  )}
+                </div>
+              )}
+            </section>
+          </Stack>
+        </div>
+        {selectedBed && (
+          <span className={styles.admitPatientInfo}>
+            {" "}
+            {t(
+              "admittingPatientToBedText",
+              `Click Save button to admit patient to Bed ${selectedBed.bedNumber}`
+            )}
+          </span>
+        )}
+
+        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+          <Button
+            className={styles.button}
+            kind="secondary"
+            onClick={closePanel}
+          >
+            {t("discard", "Discard")}
+          </Button>
+          <Button
+            onClick={handleAssignBedToPatient}
+            className={classNames(styles.button, {
+              [styles.disabled]: !lastClinicalEncounter || !selectedBed,
+            })}
+            kind="primary"
+            type="submit"
+          >
+            {t("save", "Save")}
+          </Button>
+        </ButtonSet>
+      </Overlay>
+    </>
+  );
+};
+
+export default AllocateBedWorkSpace;

package/src/workspace/allocate-bed.scss

@@ -0,0 +1,124 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  // margin: spacing.$spacing-05 0rem;
+  background-color: $ui-background;
+  max-height: 100%;
+  
+
+  & section {
+    margin: spacing.$spacing-09 0 0;
+    // overflow-y: auto;
+
+  }
+
+  :global(.cds--text-input) {
+    &:focus,
+    &:hover {
+      outline: 2px solid var(--cds-focus,#ff832b);
+    }
+  }
+}
+
+.admitPatientInfo {
+  padding: 2rem;
+  background-color: #fff;
+}
+
+.heading {
+  @include type.type-style('heading-03');
+  margin: spacing.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-05;
+}
+
+.dateTimeSection {
+  display: flex;
+}
+
+.radioButton {
+  margin: spacing.$spacing-05 0;
+}
+
+.headerGridRow {
+  border-bottom: 0.0625rem solid $grey-2;
+  margin: 0;
+}
+
+.dataGridRow {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: spacing.$spacing-03 spacing.$spacing-05;
+  width: 100%;
+}
+
+.form {
+  background-color: $ui-background;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: spacing.$spacing-06 spacing.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+@media screen and (max-width: 600px) {
+  .dateTimeSection {
+    flex-direction: column;
+  }
+}
+
+.backButton {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  margin: spacing.$spacing-03 0;
+  padding: 0;
+  @include type.type-style('body-compact-01');
+
+  button {
+    display: flex;
+
+    svg {
+      order: 1;
+      margin-right: spacing.$spacing-03;
+      margin-left: 0rem !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}
+
+.disabled {
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.missingEncounter {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}

package/src/workspace/overlay.component.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Button, Header } from "@carbon/react";
+import { ArrowLeft, Close } from "@carbon/react/icons";
+import { isDesktop, useLayoutType } from "@openmrs/esm-framework";
+import styles from "./overlay.scss";
+import { useTranslation } from "react-i18next";
+
+interface OverlayProps {
+  closePanel: () => void;
+  header: string;
+  children?: React.ReactNode;
+}
+
+const Overlay: React.FC<OverlayProps> = ({ closePanel, children, header }) => {
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={
+        isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay
+      }
+    >
+      {isDesktop(layout) ? (
+        <div className={styles.desktopHeader}>
+          <div className={styles.headerContent}>{header}</div>
+          <Button
+            className={styles.closePanelButton}
+            onClick={closePanel}
+            kind="ghost"
+            hasIconOnly
+            renderIcon={(props) => <Close size={16} {...props} />}
+            iconDescription={t("closeOverlay", "Close overlay")}
+          />
+        </div>
+      ) : (
+        <Header
+          aria-label="Tablet overlay"
+          className={styles.tabletOverlayHeader}
+        >
+          <Button
+            onClick={closePanel}
+            hasIconOnly
+            renderIcon={(props) => <ArrowLeft size={16} {...props} />}
+            iconDescription={t("closeOverlay", "Close overlay")}
+          />
+          <div className={styles.headerContent}>{header}</div>
+        </Header>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Overlay;

package/src/workspace/overlay.scss

@@ -0,0 +1,96 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '../root.scss';
+
+.desktopOverlay {
+  position: fixed;
+  top: spacing.$spacing-09;
+  width: 37rem;
+  right: 0;
+  bottom: 0;
+  border-left: 1px solid $text-03;
+  background-color: $ui-01;
+  overflow-y: auto;
+  height: calc(100vh - 3rem);
+  z-index: 99999;
+  display: grid;
+  grid-template-rows: 1fr auto;
+}
+
+.desktopOverlay::after {
+  height: 100%;
+  border-left: 1px solid $text-03;
+}
+
+.tabletOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: $ui-01;
+  overflow: hidden;
+  padding-top: spacing.$spacing-09;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.tabletOverlayHeader {
+  button {
+    @include brand-01(background-color);
+  }
+
+  .headerContent {
+    color: $ui-02;
+  }
+}
+
+.desktopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-03;
+  border-bottom: 1px solid $text-03;
+  position: absolute;
+  position: -webkit-sticky;
+  width: 100%;
+  z-index: 1000;
+  top: 0;
+}
+
+.headerContent {
+  @include type.type-style('heading-compact-02');
+  padding: 0 spacing.$spacing-05;
+  color: $ui-05;
+}
+
+.closePanelButton {
+  background-color: $ui-background;
+  color: $ui-05;
+  fill: $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;
+  }
+}
+
+.wardLabel {
+   @include type.type-style('label-01');
+  // color: colors.$gray-70;
+}

package/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "bedManagement": "Bed Management",
+  "headTitle": "",
+  "home": "Home",
+  "manageBed": "Manage Beds",
+  "wardType": ""
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015",
+      "es2015.promise",
+      "es2016.array.include",
+      "es2018",
+      "es2020"
+    ],
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "target": "esnext"
+  }
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("openmrs/default-webpack-config");