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

package/src/bed-admission/admitted-patients/admitted-patients.component.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import AdmittedPatientsTable from "./admitted-patients-table.component";
+interface AdmittedPatientsListProps {
+  status: string;
+  setPatientCount: (value: number) => void;
+}
+
+const AdmittedPatientsList: React.FC<AdmittedPatientsListProps> = ({
+  status,
+  setPatientCount,
+}) => {
+  return (
+    <>
+      <AdmittedPatientsTable
+        status={status}
+        setPatientCount={setPatientCount}
+      />
+    </>
+  );
+};
+
+export default AdmittedPatientsList;

package/src/bed-admission/admitted-patients/location-combo-box.component.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { ComboBox, FormGroup } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { useLocationsByTag } from "../../summary/summary.resource";
+import { useConfig, useSession } from "@openmrs/esm-framework";
+
+const LocationComboBox = ({ setLocationUuid }) => {
+  const { t } = useTranslation();
+  const {
+    admissionLocationTagUuid,
+    restrictWardAdministrationToLoginLocation,
+  } = useConfig();
+  const session = useSession();
+  const [selectedLocationId] = useState("");
+
+  const { data: admissionLocations } = useLocationsByTag(
+    admissionLocationTagUuid
+  );
+
+  const filterLocationNames = (location) => {
+    return (
+      location.item.display
+        ?.toLowerCase()
+        .includes(location?.inputValue?.toLowerCase()) ?? []
+    );
+  };
+
+  return (
+    <FormGroup>
+      <ComboBox
+        aria-label={t("location", "Locations")}
+        id="location"
+        label={t("location", "Locations")}
+        shouldFilterItem={filterLocationNames}
+        items={admissionLocations}
+        onChange={({ selectedItem }) => {
+          setLocationUuid(selectedItem?.uuid ?? "");
+        }}
+        selectedItem={admissionLocations?.find(
+          (location) => location?.uuid === selectedLocationId
+        )}
+        itemToString={(location) => location?.display ?? ""}
+        placeholder={t("selectNewLocation", "Select an admission location")}
+        title={selectedLocationId}
+        initialSelectedItem={
+          restrictWardAdministrationToLoginLocation
+            ? session.sessionLocation
+            : ""
+        }
+      />
+    </FormGroup>
+  );
+};
+
+export default LocationComboBox;

package/src/bed-admission/admitted-patients/styles.scss

@@ -0,0 +1,284 @@
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  background-color: $ui-01;
+}
+
+.displayFlex {
+  display: flex;
+}
+
+.section {
+  border-right: 1px solid colors.$gray-20;
+}
+
+.activePatientsTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-background;
+}
+
+.headerButtons {
+  display: flex;
+  flex-flow: column;
+}
+
+.heading {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.filterContainer {
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+
+  :global(.cds--dropdown--inline) :global(.cds--list-box__field) {
+    min-width: 12rem;
+  }
+}
+
+.tooltip :global(.cds--tooltip__trigger.cds--tooltip__trigger--definition) {
+  border-bottom: none;
+}
+
+.tag {
+  margin: 0.25rem 0;
+}
+
+.priorityTag {
+  @extend .tag;
+  @include type.type-style('label-01');
+  color: #943d00;
+  background-color: #ffc9a3;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+.search {
+  max-width: 16rem;
+
+  input {
+    background-color: $ui-02 !important;
+  }
+}
+
+.tableContainer {
+  background-color: $ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: $text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: $ui-03;
+  }
+
+  :global(.cds--data-table-content) {
+    display: contents;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.activeVisitsTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.expandedActiveVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    >div {
+      max-height: max-content !important;
+      background-color: $ui-02;
+    }
+  }
+
+  th[colspan] td[colspan]>div:first-child {
+    padding: 0 1rem;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.separator {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  width: 80%;
+  margin: 1.5rem auto;
+  overflow: hidden;
+  text-align: center;
+
+  &::before,
+  &::after {
+    background-color: $text-03;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
+
+  &::before {
+    right: 0.5rem;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: 0.5rem;
+    margin-right: -50%;
+  }
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 3px;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.statusContainer {
+  display: flex;
+  align-items: center;
+
+  svg {
+    margin-right: 0.5rem;
+  }
+}
+
+.visitType {
+  @include type.type-style('heading-compact-02');
+}
+
+.headerBtnContainer {
+  background-color: $ui-background;
+  text-align: right;
+}
+
+.addPatientToListBtn {
+  margin-left: spacing.$spacing-05;
+  height: spacing.$spacing-09;
+}
+
+.editIcon {
+  color: $interactive-01;
+  margin-top: 0.5rem;
+  cursor: pointer;
+}
+
+.expandedLabQueueVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    >div {
+      max-height: max-content !important;
+      background-color: $ui-02;
+    }
+  }
+
+  th[colspan] td[colspan]>div:first-child {
+    padding: 0 1rem;
+  }
+}

package/src/bed-admission/bed-admission-tabs-styles.scss

@@ -0,0 +1,30 @@
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tabsContainer {
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+
+  }
+}
+
+.tab {
+  min-width: 8rem;
+
+  &:active,
+  &:focus {
+    outline: none !important;
+  }
+
+}
+
+.container {
+  background-color: $ui-01;
+}
+
+.cardContainer {
+  background-color: $ui-02;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  justify-content: space-between;
+  padding: 1rem;
+}

package/src/bed-admission/bed-admission-tabs.component.tsx

@@ -0,0 +1,69 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@carbon/react";
+import React, { useState } from "react";
+import styles from "./bed-admission-tabs-styles.scss";
+import { useTranslation } from "react-i18next";
+import ActivePatientsTable from "./active-patients/active-patients-table.component";
+import AdmittedPatientsList from "./admitted-patients/admitted-patients.component";
+import DischargedPatientsList from "./discharged-patients/discharged-patients.componet";
+import WardCard from "../ward-card/ward-card.component";
+
+const BedAdmissionTabs: React.FC = () => {
+  const { t } = useTranslation();
+  const [admittedCount, setAdmittedCount] = useState(0);
+  const [toAdmitCount, setToAdmitCount] = useState(0);
+  const [toDischargeCount, setToDischargeCount] = useState(0);
+
+  return (
+    <>
+      <div className={styles.cardContainer}>
+        <WardCard
+          label="patients"
+          headerLabel="To Admit"
+          value={admittedCount}
+        />
+        <WardCard
+          label="patients"
+          headerLabel="Admitted"
+          value={toAdmitCount}
+        />
+        <WardCard
+          label="patients"
+          headerLabel="To Discharge"
+          value={toDischargeCount}
+        />
+      </div>
+      <div className={styles.container}>
+        <Tabs>
+          <TabList contained fullWidth className={styles.tabsContainer}>
+            <Tab className={styles.tab}>
+              {t("toAdmit", `To Admit (${admittedCount})`)}
+            </Tab>
+            <Tab className={styles.tab}>
+              {t("admitted", `Admitted (${toAdmitCount})`)}
+            </Tab>
+            <Tab className={styles.tab}>
+              {t("discharged", `To Discharge (0)`)}
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <ActivePatientsTable
+                status="pending"
+                setPatientCount={setAdmittedCount}
+              />
+            </TabPanel>
+            <TabPanel>
+              <AdmittedPatientsList
+                status="completed"
+                setPatientCount={setToAdmitCount}
+              />
+            </TabPanel>
+            <TabPanel></TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </>
+  );
+};
+
+export default BedAdmissionTabs;

package/src/bed-admission/bed-admission.component.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import ActivePatientsHome from "./active-patients";
+
+const BedAdmission: React.FC = () => {
+  return (
+    <BrowserRouter basename={window.getOpenmrsSpaBase()}>
+      <Routes>
+        <Route path="/home/bed-admission" element={<ActivePatientsHome />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default BedAdmission;

package/src/bed-admission/bed-admission.resource.ts

@@ -0,0 +1,35 @@
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+
+export async function assignPatientBed(
+  requestPayload,
+  bedId
+): Promise<FetchResponse> {
+  const abortController = new AbortController();
+  abortController.abort();
+  const response: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/beds/${bedId}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: requestPayload,
+    }
+  );
+  return response;
+}
+
+export async function endPatientQueue(
+  queueStatus,
+  queueUuid
+): Promise<FetchResponse> {
+  const abortController = new AbortController();
+  abortController.abort();
+  const response: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/patientqueue/${queueUuid}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: queueStatus,
+    }
+  );
+  return response;
+}

package/src/bed-admission/bed-layout/bed-layout-list.component.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Column, InlineLoading, Grid } from "@carbon/react";
+import { ErrorState } from "@openmrs/esm-patient-common-lib";
+import { useTranslation } from "react-i18next";
+import BedLayout from "./bed-layout.component";
+import styles from "./bed-layout.scss";
+import EmptyState from "../../empty-state/empty-state.component";
+import MinBedLayout from "./min-bed-layout.component";
+import { useAdmissionLocationBedLayout } from "../../summary/summary.resource";
+import { patientDetailsProps } from "../types";
+interface BedLayoutListProps {
+  locationUuid: string;
+  handleClick: (e) => void;
+  patientDetails: patientDetailsProps;
+}
+
+const BedLayoutList: React.FC<BedLayoutListProps> = React.memo(
+  ({ locationUuid, handleClick, patientDetails }) => {
+    const { t } = useTranslation();
+    const [selectedBed, setSelectedBed] = useState(null);
+    const {
+      data: bedData,
+      isLoading,
+      error,
+    } = useAdmissionLocationBedLayout(locationUuid);
+
+    const getLayoutClass = (status: string) =>
+      status === "AVAILABLE" ? styles.available : styles.occupied;
+
+    if (isLoading) {
+      return (
+        <div className={styles.loadingContainer}>
+          <InlineLoading
+            status="active"
+            iconDescription={t("loading", "Loading")}
+            description={t("loading", "Loading...")}
+          />
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className={styles.errorContainer}>
+          <ErrorState
+            headerTitle={t(
+              "errorFetchingbedInformation",
+              "Error fetching bed information"
+            )}
+            error={error}
+          />
+        </div>
+      );
+    }
+
+    if (locationUuid === undefined) {
+      return (
+        <div className={styles.errorContainer}>
+          <EmptyState
+            msg={t("noWardSelected", "No ward has been selected")}
+            helper=""
+          />
+        </div>
+      );
+    }
+    if (locationUuid !== undefined && !bedData?.length) {
+      return (
+        <div className={styles.errorContainer}>
+          <EmptyState
+            msg={t("noBedItems", "No bed to display in this ward")}
+            helper=""
+          />
+        </div>
+      );
+    }
+    return (
+      <>
+        <MinBedLayout />
+        <Grid>
+          {bedData?.map((bed) => (
+            <Column key={bed.bedNumber} lg={5} md={5} sm={5}>
+              <BedLayout
+                handleBedAssignment={() => {
+                  setSelectedBed(bed.bedId);
+                  handleClick(bed);
+                }}
+                bedPillowStyles={styles.pillow}
+                layOutStyles={`${styles.bed} ${getLayoutClass(bed.status)}`}
+                isBedSelected={selectedBed === bed.bedId}
+                patientDetails={patientDetails}
+                bedDetails={bed}
+              />
+            </Column>
+          ))}
+        </Grid>
+      </>
+    );
+  }
+);
+
+export default BedLayoutList;

package/src/bed-admission/bed-layout/bed-layout.component.tsx

@@ -0,0 +1,64 @@
+import React, { useRef } from "react";
+import classnames from "classnames";
+import styles from "./bed-layout.scss";
+import { patientDetailsProps } from "../types";
+import { BedDetails } from "../../types";
+
+interface BedProps {
+  handleBedAssignment?: () => void;
+  isBedSelected?: boolean;
+  layOutStyles?: string;
+  bedPillowStyles?: string;
+  patientDetails?: patientDetailsProps;
+  bedDetails?: BedDetails;
+}
+
+const BedLayout: React.FC<BedProps> = ({
+  layOutStyles,
+  bedPillowStyles,
+  handleBedAssignment,
+  isBedSelected,
+  bedDetails,
+  patientDetails,
+}) => {
+  const bedRef = useRef(null);
+
+  return (
+    <>
+      <div
+        ref={bedRef}
+        role="button"
+        tabIndex={0}
+        onClick={() => handleBedAssignment()}
+        className={classnames(styles.bedLayout, {
+          [layOutStyles]: layOutStyles,
+          [styles.bedLayoutSelected]:
+            isBedSelected ||
+            (bedDetails &&
+              bedDetails.patient &&
+              bedDetails.patient.uuid === patientDetails.patientUuid),
+        })}
+      >
+        <div
+          className={classnames(styles.bedPillow, {
+            [bedPillowStyles]: bedPillowStyles,
+          })}
+        ></div>
+        <div style={{ display: "grid" }}>
+          <span className={styles.bedNumber}>
+            {bedDetails && bedDetails.bedNumber}
+          </span>
+          <span className={styles.bedNumber}>
+            {bedDetails &&
+            bedDetails.patient &&
+            bedDetails.patient.uuid === patientDetails.patientUuid
+              ? bedDetails.patient.identifiers[0].identifier
+              : ""}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BedLayout;