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

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,52 @@
+import { FetchResponse, openmrsFetch, useConfig } from "@openmrs/esm-framework";
+import { useMemo } from "react";
+import useSWR from "swr";
+
+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;
+}
+
+export function findLatestClinicalEncounter(
+  patientUuid: string,
+  encounterTypeUuid: string,
+  data,
+  admissionFormUuid
+) {
+  const clinicalEncounters =
+    data?.data?.results?.filter(
+      (enc) => enc?.form?.uuid === admissionFormUuid
+    ) ?? [];
+  const encounterUuid = clinicalEncounters?.[0]?.uuid ?? "";
+
+  return { data: encounterUuid };
+}

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 === "") {
+      return (
+        <div className={styles.errorContainer}>
+          <EmptyState
+            msg={t("noWardSelected", "No ward has been selected")}
+            helper=""
+          />
+        </div>
+      );
+    }
+    if (locationUuid !== "" && !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;

package/src/bed-admission/bed-layout/bed-layout.scss

@@ -0,0 +1,118 @@
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.bedLayout {
+  position: relative;
+  margin: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-radius: 8px;
+  border: 1px solid #42be65;
+
+  .bedPillow {
+    background-color: #fff;
+    border-radius: 3rem;
+    border: 1px solid #42be65;
+  }
+
+  .bedNumber {
+    font-weight: bold;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.bedLayoutSelected {
+  background-color: #42be65 !important;
+  color: #fff !important;
+  border: 5px solid #e4e1c9 !important;
+  opacity:1 !important;
+}
+
+;
+
+.bedInfoMain {
+  display: flex;
+  align-self: center;
+}
+
+.bedInfoContainer {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 4rem;
+  border-bottom: 1px solid #a8a8a8;
+}
+
+.bedInfoText {
+  align-self: center;
+}
+
+.disabled {
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.errorContainer {
+  width: 90%;
+  position: absolute;
+}
+
+.loadingContainer {
+  position: absolute;
+  margin: spacing.$spacing-02 spacing.$spacing-05 0;
+}
+
+.bed {
+  height: 60px;
+  width: 8rem;
+}
+
+.pillow {
+  width: 10px;
+  height: 40px;
+}
+
+.available {
+  background-color: #fff;
+  color: #525252;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.occupied {
+  background-color: #42be65;
+  color: #fff;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.minOccupied {
+  height: 1.5rem;
+  width: 2.5rem;
+  color: #fff;
+  background-color: rgb(66, 190, 101);
+  padding: 0 6px;
+  border-radius: 5px;
+  pointer-events: none;
+}
+
+.minAvailable {
+  height: 1.5rem;
+  width: 2.5rem;
+  color: none;
+  background-color: #fff;
+  padding: 0 6px;
+  border-radius: 5px;
+  pointer-events: none;
+}
+
+.minPillow {
+  width: 7px;
+  height: 1rem;
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import styles from "./bed-layout.scss";
+import BedLayout from "./bed-layout.component";
+
+const MinBedLayout: React.FC = () => {
+  return (
+    <div className={styles.bedInfoContainer}>
+      <div className={styles.bedInfoMain}>
+        <BedLayout
+          bedPillowStyles={styles.minPillow}
+          layOutStyles={styles.minOccupied}
+        />{" "}
+        <span className={styles.bedInfoText}>Occupied</span>
+      </div>
+      <div className={styles.bedInfoMain}>
+        <BedLayout
+          bedPillowStyles={styles.minPillow}
+          layOutStyles={styles.minAvailable}
+        />{" "}
+        <span className={styles.bedInfoText}>Available</span>
+      </div>
+    </div>
+  );
+};
+
+export default MinBedLayout;

package/src/bed-admission/bed-tag/bed-tag-administration-table.component.tsx

@@ -0,0 +1,217 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from "@carbon/react";
+import { Add, Edit } from "@carbon/react/icons";
+import {
+  isDesktop as desktopLayout,
+  useLayoutType,
+} from "@openmrs/esm-framework";
+import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
+import type { BedTagData } from "../../types";
+import { useBedTag } from "../../summary/summary.resource";
+import Header from "../../header/header.component";
+import styles from "../../bed-administration/bed-administration-table.scss";
+import BedTagForm from "./new-tag-form.component";
+import EditBedTagForm from "./edit-tag-form.component";
+
+const BedTagAdministrationTable: React.FC = () => {
+  const { t } = useTranslation();
+  const headerTitle = t("bedTag", "Bed Tag");
+  const layout = useLayoutType();
+  const isTablet = layout === "tablet";
+  const responsiveSize = isTablet ? "lg" : "sm";
+  const isDesktop = desktopLayout(layout);
+  const [isBedDataLoading] = useState(false);
+  const [showBedTagsModal, setAddBedTagsModal] = useState(false);
+  const [showEditBedModal, setShowEditBedModal] = useState(false);
+  const [editData, setEditData] = useState<BedTagData>();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize] = useState(10);
+  const { bedTypeData, isError, loading, validate, mutate } = useBedTag();
+  const [currentPageSize, setPageSize] = useState(10);
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const tableHeaders = [
+    {
+      header: t("ids", "Id"),
+      key: "ids",
+    },
+    {
+      header: t("name", "Name"),
+      key: "name",
+    },
+    {
+      header: t("actions", "Actions"),
+      key: "actions",
+    },
+  ];
+
+  const tableRows = useMemo(() => {
+    return bedTypeData?.map((entry) => ({
+      id: entry.uuid,
+      ids: entry.id,
+      name: entry?.name,
+      actions: (
+        <>
+          <Button
+            enterDelayMs={300}
+            renderIcon={Edit}
+            onClick={(e) => {
+              e.preventDefault();
+              setEditData(entry);
+              setShowEditBedModal(true);
+              setAddBedTagsModal(false);
+            }}
+            kind={"ghost"}
+            iconDescription={t("editBedTag", "Edit Bed Tag")}
+            hasIconOnly
+            size={responsiveSize}
+            tooltipAlignment="start"
+          />
+        </>
+      ),
+    }));
+  }, [responsiveSize, bedTypeData, t]);
+
+  if (isBedDataLoading || loading) {
+    return (
+      <>
+        <Header route="Bed Tag" />
+        <div className={styles.widgetCard}>
+          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
+        </div>
+      </>
+    );
+  }
+
+  if (isError) {
+    return (
+      <>
+        <Header route="Bed Tag" />
+        <div className={styles.widgetCard}>
+          <ErrorState error={isError} headerTitle={headerTitle} />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Header route="Bed Tag" />
+
+      <div className={styles.widgetCard}>
+        {showBedTagsModal ? (
+          <BedTagForm
+            onModalChange={setAddBedTagsModal}
+            showModal={showBedTagsModal}
+            mutate={mutate}
+          />
+        ) : null}
+        {showEditBedModal ? (
+          <EditBedTagForm
+            onModalChange={setShowEditBedModal}
+            showModal={showEditBedModal}
+            editData={editData}
+            mutate={mutate}
+          />
+        ) : null}
+        <CardHeader title={headerTitle}>
+          <span className={styles.backgroundDataFetchingIndicator}>
+            <span>{validate ? <InlineLoading /> : null}</span>
+          </span>
+          {bedTypeData?.length ? (
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              onClick={() => setAddBedTagsModal(true)}
+            >
+              {t("addBedTag", "Add Bed Tag")}
+            </Button>
+          ) : null}
+        </CardHeader>
+        <DataTable
+          rows={tableRows}
+          headers={tableHeaders}
+          isSortable
+          size={isTablet ? "lg" : "sm"}
+          useZebraStyles
+        >
+          {({ rows, headers, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader>
+                        {header.header?.content ?? header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>
+                          {cell.value?.content ?? cell.value}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>
+                        {t("No data", "No data to display")}
+                      </p>
+                      <p className={styles.helper}>
+                        {t("checkFilters", "Check the filters above")}
+                      </p>
+                    </div>
+                    <p className={styles.separator}>{t("or", "or")}</p>
+                    <Button
+                      kind="ghost"
+                      size="sm"
+                      renderIcon={(props) => <Add size={16} {...props} />}
+                      onClick={() => setAddBedTagsModal(true)}
+                    >
+                      {t("bedTag", "Add Bed Tag")}
+                    </Button>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                page={currentPage}
+                pageSize={pageSize}
+                pageSizes={[10, 20, 30, 40, 50]}
+                totalItems={bedTypeData.length}
+                onChange={({ page, pageSize }) => {
+                  setCurrentPage(page);
+                  setPageSize(pageSize);
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </>
+  );
+};
+export default BedTagAdministrationTable;