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

package/src/types.ts

@@ -0,0 +1,152 @@
+import type { KeyedMutator } from "swr";
+
+export type Tag = {
+  uuid: string;
+  display: string;
+  name: string;
+  description?: string;
+  retired: boolean;
+  links: Array<{
+    rel: string;
+    uri: string;
+    resourceAlias: string;
+  }>;
+  resourceVersion: string;
+};
+
+export type Location = {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string | null;
+  address1: string | null;
+  address2: string | null;
+  cityVillage: string | null;
+  stateProvince: string | null;
+  country: string | null;
+  postalCode: string | null;
+  latitude: string | null;
+  longitude: string | null;
+  countyDistrict: string | null;
+  address3: string | null;
+  address4: string | null;
+  address5: string | null;
+  address6: string | null;
+  tags: Tag[];
+  parentLocation: Location;
+  childLocations: Location[];
+  retired: boolean;
+  auditInfo: {
+    creator: {
+      uuid: string;
+      display: string;
+      links: Array<{
+        rel: string;
+        uri: string;
+        resourceAlias: string;
+      }>;
+    };
+    dateCreated: string;
+    changedBy: null;
+    dateChanged: null;
+  };
+  address7: string | null;
+  address8: string | null;
+  address9: string | null;
+  address10: string | null;
+  address11: string | null;
+  address12: string | null;
+  address13: string | null;
+  address14: string | null;
+  address15: string | null;
+  links: Array<{
+    rel: string;
+    uri: string;
+    resourceAlias: string;
+  }>;
+  resourceVersion: string;
+  beds: Bed[];
+};
+
+export interface Bed {
+  id: number;
+  bedId: number;
+  uuid: string;
+  bedNumber: string;
+  bedType: {
+    uuid: string;
+    name: string;
+    displayName: string;
+    description: string;
+    resourceVersion: string;
+  };
+  row: number;
+  column: number;
+  status: "AVAILABLE" | string;
+  location: string;
+}
+
+export interface BedType {
+  uuid: string;
+  name: string;
+  displayName: string;
+  description: string;
+}
+
+export interface InitialData {
+  uuid: string;
+  bedNumber: string;
+  status: string;
+  description: string;
+  row: number;
+  column: number;
+  location: {
+    display: string;
+    uuid: string;
+  };
+  bedType: {
+    name: string;
+  };
+}
+
+export type Mutator = KeyedMutator<{
+  data: {
+    results: Array<Location>;
+  };
+}>;
+
+export type AdmissionLocation = {
+  ward: {
+    uuid: string;
+    display: string;
+    name: string;
+    description: string;
+  };
+  totalBeds: number;
+  occupiedBeds: number;
+  bedLayouts: Array<BedDetails>;
+};
+
+export type MappedBedData = Array<{
+  id: number;
+  number: string;
+  name: string;
+  description: string;
+  status: string;
+  uuid: string;
+}>;
+
+export interface BedDetails extends Bed {
+  patient: null | {
+    uuid: string;
+    person: {
+      gender: string;
+      age: number;
+      preferredName: {
+        givenName: string;
+        familyName: string;
+      };
+    };
+    identifiers: Array<{ identifier: string }>;
+  };
+}

package/src/ward-card/ward-card.component.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Layer, Tile } from "@carbon/react";
+import styles from "./ward-card.scss";
+
+interface WardCardProps {
+  label: string;
+  value: number | string;
+  headerLabel: string;
+  children?: React.ReactNode;
+  service?: string;
+  serviceUuid?: string;
+  locationUuid?: string;
+}
+
+const WardCard: React.FC<WardCardProps> = ({
+  children,
+  headerLabel,
+  label,
+  value,
+}) => {
+  return (
+    <Layer
+      className={`${children && styles.cardWithChildren} ${styles.container}`}
+    >
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+          </div>
+          {children}
+        </div>
+        <div>
+          <label className={styles.totalsLabel}>{label}</label>
+          <p className={styles.totalsValue}>{value}</p>
+        </div>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default WardCard;

package/src/ward-card/ward-card.scss

@@ -0,0 +1,51 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use "@carbon/type";
+
+.container {
+  flex-grow: 1;
+}
+
+.tileContainer {
+  border: 1px solid colors.$gray-20;
+  height: 7.875rem;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-03;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: layout.$spacing-03;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+}
+
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: colors.$gray-100;
+}
+
+.headerLabelContainer {
+  margin-bottom: 1rem;
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: colors.$blue-60;
+
+  svg {
+    margin-left: layout.$spacing-03;
+  }
+}

package/src/ward-with-beds/ward-with-beds.component.tsx

@@ -0,0 +1,186 @@
+import React, { useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Tag,
+} from "@carbon/react";
+import { ArrowLeft } from "@carbon/react/icons";
+import { navigate, usePagination } from "@openmrs/esm-framework";
+import Header from "../header/header.component";
+import {
+  useBedsForLocation,
+  useLocationName,
+} from "../summary/summary.resource";
+import styles from "./ward-with-beds.scss";
+
+type RouteParams = { location: string };
+
+const WardWithBeds: React.FC = () => {
+  const { location } = useParams<RouteParams>();
+  const { isLoading, bedData } = useBedsForLocation(location);
+
+  const { name } = useLocationName(location);
+
+  const [pageSize, setPageSize] = useState(10);
+  const {
+    results: paginatedData,
+    goTo,
+    currentPage,
+  } = usePagination(bedData, pageSize);
+
+  if (isLoading) {
+    <p>Loading...</p>;
+  }
+
+  const tableHeaders = [
+    {
+      id: 0,
+      header: "ID",
+      key: "id",
+    },
+    {
+      id: 1,
+      header: "Number",
+      key: "number",
+    },
+    {
+      id: 2,
+      header: "Name",
+      key: "name",
+    },
+    {
+      id: 3,
+      header: "Description",
+      key: "description",
+    },
+    {
+      id: 4,
+      header: "Occupied",
+      key: "occupied",
+    },
+  ];
+
+  const CustomTag = ({ condition }: { condition: boolean }) => {
+    const { t } = useTranslation();
+
+    if (condition) {
+      return (
+        <Tag type="green" size="md">
+          {t("yes", "Yes")}
+        </Tag>
+      );
+    }
+
+    return (
+      <Tag type="red" size="md">
+        {t("no", "No")}
+      </Tag>
+    );
+  };
+
+  const tableRows = useMemo(() => {
+    return paginatedData?.map((bed) => ({
+      id: bed.id,
+      number: bed.number,
+      name: bed.name,
+      description: bed.description,
+      occupied: <CustomTag condition={bed?.status === "OCCUPIED"} />,
+    }));
+  }, [paginatedData]);
+
+  return (
+    <>
+      <Header route={name ? name : "--"} />
+      {isLoading && (
+        <div className={styles.container}>
+          <DataTableSkeleton role="progressbar" zebra />
+        </div>
+      )}
+
+      {bedData?.length ? (
+        <>
+          <div className={styles.backButton}>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+              iconDescription="Return to summary"
+              onClick={() =>
+                navigate({
+                  to: `${window.getOpenmrsSpaBase()}bed-management`,
+                })
+              }
+            >
+              <span>Return to summary</span>
+            </Button>
+          </div>
+          <div className={styles.container}>
+            <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>
+              {({
+                rows,
+                headers,
+                getHeaderProps,
+                getRowProps,
+                getTableProps,
+              }) => (
+                <TableContainer>
+                  <Table {...getTableProps()}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader
+                            key={header.key}
+                            {...getHeaderProps({ header })}
+                          >
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow key={row.id} {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.value?.content ?? cell.value}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            </DataTable>
+            <Pagination
+              backwardText="Previous page"
+              forwardText="Next page"
+              itemsPerPageText="Items per page:"
+              page={currentPage}
+              pageNumberText="Page Number"
+              pageSize={pageSize}
+              onChange={({ page, pageSize }) => {
+                goTo(page);
+                setPageSize(pageSize);
+              }}
+              pageSizes={[10, 20, 30, 40, 50]}
+              totalItems={paginatedData?.length}
+            />
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+};
+
+export default WardWithBeds;

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,141 @@
+import React, { useCallback, useState } from "react";
+import classNames from "classnames";
+import { Stack, ButtonSet, Button } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import {
+  showNotification,
+  showToast,
+  useConfig,
+  useLayoutType,
+} from "@openmrs/esm-framework";
+import styles from "./allocate-bed.scss";
+import Overlay from "./overlay.component";
+import {
+  assignPatientBed,
+  endPatientQueue,
+} 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";
+
+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 [selectedBed, setSelectedBed] = useState<Bed>();
+  const [isBedAssigned, setIsBedAssigned] = useState(false);
+  const [isQueueEnded, setIsQueueEnded] = useState(false);
+  const { restrictWardAdministrationToLoginLocation } = useConfig();
+  const [locationUuid, setLocation] = useState(
+    restrictWardAdministrationToLoginLocation ? patientDetails.locationUuid : ""
+  );
+
+  const handleClick = (bed) => {
+    setSelectedBed(bed);
+  };
+
+  const handleAssignBedToPatient = useCallback(() => {
+    const patientAndEncounterUuids = {
+      encounterUuid:
+        patientDetails?.encounter?.uuid ??
+        "84d26085-da4c-461a-8481-7c95ed3f4558",
+      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]);
+
+  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} />
+                </>
+              )}
+              <BedLayoutList
+                locationUuid={locationUuid}
+                handleClick={handleClick}
+                patientDetails={patientDetails}
+              />{" "}
+            </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]: !selectedBed,
+            })}
+            kind="primary"
+            type="submit"
+          >
+            {t("save", "Save")}
+          </Button>
+        </ButtonSet>
+      </Overlay>
+    </>
+  );
+};
+
+export default AllocateBedWorkSpace;

package/src/workspace/allocate-bed.scss

@@ -0,0 +1,117 @@
+@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;
+}