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

package/src/bed-administration/new-bed-form.component.tsx

@@ -0,0 +1,112 @@
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
+
+import type { InitialData, Mutator } from "../types";
+import { useBedType, saveBed } from "./bed-administration.resource";
+import BedAdministrationForm from "./bed-administration-form.component";
+import { useLocationsByTag } from "../summary/summary.resource";
+import { BedAdministrationData } from "./bed-administration-types";
+
+interface NewBedFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  mutate: Mutator;
+}
+
+const NewBedForm: React.FC<NewBedFormProps> = ({
+  showModal,
+  onModalChange,
+  mutate,
+}) => {
+  const { t } = useTranslation();
+  const { admissionLocationTagUuid } = useConfig();
+  const { data: admissionLocations } = useLocationsByTag(
+    admissionLocationTagUuid
+  );
+  const headerTitle = t("createNewBed", "Create a new bed");
+  const occupancyStatuses = ["Available", "Occupied"];
+  const { bedTypes } = useBedType();
+  const availableBedTypes = bedTypes ? bedTypes : [];
+
+  const initialData: InitialData = {
+    uuid: "",
+    bedNumber: "",
+    status: "",
+    description: "",
+    row: 0,
+    column: 0,
+    location: {
+      display: "",
+      uuid: "",
+    },
+    bedType: {
+      name: "",
+    },
+  };
+
+  const handleCreateQuestion = useCallback(
+    (formData: BedAdministrationData) => {
+      const {
+        bedId,
+        description,
+        occupancyStatus,
+        bedRow,
+        bedColumn,
+        location,
+        bedType,
+      } = formData;
+
+      const bedObject = {
+        bedNumber: bedId,
+        bedType,
+        description,
+        status: occupancyStatus.toUpperCase(),
+        row: parseInt(bedRow.toString()),
+        column: parseInt(bedColumn.toString()),
+        locationUuid: location.uuid,
+      };
+
+      saveBed({ bedPayload: bedObject })
+        .then(() => {
+          showToast({
+            title: t("formCreated", "New bed created"),
+            kind: "success",
+            critical: true,
+            description: `Bed ${bedId} was created successfully.`,
+          });
+
+          mutate();
+          onModalChange(false);
+        })
+        .catch((error) => {
+          showNotification({
+            title: t("errorCreatingForm", "Error creating bed"),
+            kind: "error",
+            critical: true,
+            description: error?.message,
+          });
+          onModalChange(false);
+        });
+      onModalChange(false);
+    },
+    [onModalChange, mutate, t]
+  );
+
+  return (
+    <>
+      <BedAdministrationForm
+        onModalChange={onModalChange}
+        allLocations={admissionLocations}
+        availableBedTypes={availableBedTypes}
+        showModal={showModal}
+        handleCreateQuestion={handleCreateQuestion}
+        headerTitle={headerTitle}
+        occupancyStatuses={occupancyStatuses}
+        initialData={initialData}
+      />
+    </>
+  );
+};
+
+export default NewBedForm;

package/src/bed-admission/active-patients/active-patients-table.component.tsx

@@ -0,0 +1,299 @@
+import {
+  DataTable,
+  DataTableSkeleton,
+  DefinitionTooltip,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  Layer,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+} from "@carbon/react";
+
+import {
+  isDesktop,
+  useConfig,
+  useLayoutType,
+  usePagination,
+  useSession,
+} from "@openmrs/esm-framework";
+import React, { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  formatWaitTime,
+  getOriginFromPathName,
+  getTagColor,
+  getTagType,
+  trimVisitNumber,
+} from "../helpers/functions";
+import styles from "./styles.scss";
+import { usePatientQueuesList } from "./patient-queues.resource";
+import { useActiveVisits } from "./active-visits.resource";
+import EmptyState from "../../empty-state/empty-state.component";
+import AssignBedWorkSpace from "../../workspace/allocate-bed-workspace.component";
+import AdmissionActionButton from "./admission-action-button.component";
+import { patientDetailsProps } from "../types";
+import ViewActionsMenu from "./view-action-menu.component";
+
+interface ActiveVisitsTableProps {
+  status: string;
+  setPatientCount?: (value: number) => void;
+}
+
+const ActivePatientsTable: React.FC<ActiveVisitsTableProps> = ({
+  status,
+  setPatientCount,
+}) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const currentPathName: string = window.location.pathname;
+  const fromPage: string = getOriginFromPathName(currentPathName);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [selectedPatientDetails, setSelectedPatientDetails] =
+    useState<patientDetailsProps>();
+
+  const layout = useLayoutType();
+
+  const { patientQueueEntries, isLoading } = useActiveVisits();
+  const { restrictWardAdministrationToLoginLocation } = useConfig();
+
+  const handleBedAssigmentModal = useCallback(
+    (entry) => {
+      setSelectedPatientDetails({
+        name: entry.name,
+        patientUuid: entry.patientUuid,
+        encounter: entry.encounter,
+        locationUuid: session?.sessionLocation?.uuid,
+        locationTo: entry.locationTo,
+        locationFrom: entry.locationFrom,
+        queueUuid: entry.uuid,
+      });
+      setShowOverlay(true);
+    },
+    [session?.sessionLocation?.uuid]
+  );
+
+  const renderActionButton = useCallback(
+    (entry) => {
+      const buttonTexts = {
+        pending: "Assign Bed",
+        completed: "Transfer",
+      };
+      const buttonText = buttonTexts[status] || "Un-assign";
+
+      return (
+        <AdmissionActionButton
+          entry={entry}
+          handleBedAssigmentModal={handleBedAssigmentModal}
+          buttonText={buttonText}
+        />
+      );
+    },
+    [handleBedAssigmentModal, status]
+  );
+
+  const {
+    goTo,
+    results: paginatedQueueEntries,
+    currentPage,
+  } = usePagination(patientQueueEntries, currentPageSize);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t("name", "Name"),
+        key: "name",
+      },
+      {
+        id: 1,
+        header: t("idNumber", "Identifier"),
+        key: "idNumber",
+      },
+      {
+        id: 2,
+        header: t("gender", "Gender"),
+        key: "gender",
+      },
+      {
+        id: 3,
+        header: t("age", "Age"),
+        key: "age",
+      },
+      {
+        id: 4,
+        header: t("visitType", "Visit type"),
+        key: "visitType",
+      },
+      {
+        id: 5,
+        header: t("visitStartTime", "Visit start date/time"),
+        key: "visitStartTime",
+      },
+      {
+        id: 6,
+        header: t("action", "Action"),
+        key: "actions",
+      },
+    ],
+    [t]
+  );
+
+  const tableRows = useMemo(() => {
+    return paginatedQueueEntries?.map((entry) => ({
+      ...entry,
+      actions: {
+        content: (
+          <div className={styles.displayFlex}>{renderActionButton(entry)}</div>
+        ),
+      },
+    }));
+  }, [paginatedQueueEntries, renderActionButton]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (
+    (!isLoading && patientQueueEntries && status === "pending") ||
+    status === "completed" ||
+    status === ""
+  ) {
+    setPatientCount(patientQueueEntries.length);
+  }
+
+  if (patientQueueEntries?.length) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.headerBtnContainer}></div>
+
+        <DataTable
+          data-floating-menu-container
+          headers={tableHeaders}
+          overflowMenuOnHover={isDesktop(layout) ? true : false}
+          rows={tableRows}
+          isSortable
+          size="xs"
+          useZebraStyles
+        >
+          {({ rows, headers, getTableProps, getRowProps, onInputChange }) => (
+            <TableContainer className={styles.tableContainer}>
+              <TableToolbar
+                style={{
+                  position: "static",
+                  height: "3rem",
+                  overflow: "visible",
+                  backgroundColor: "color",
+                }}
+              >
+                <TableToolbarContent className={styles.toolbarContent}>
+                  <Layer>
+                    <TableToolbarSearch
+                      className={styles.search}
+                      onChange={onInputChange}
+                      placeholder={t("searchThisList", "Search this list")}
+                      size="sm"
+                    />
+                  </Layer>
+                </TableToolbarContent>
+              </TableToolbar>
+              <Table {...getTableProps()} className={styles.activeVisitsTable}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader />
+                    {headers.map((header) => (
+                      <TableHeader>
+                        {header.header?.content ?? header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => {
+                    return (
+                      <>
+                        <TableExpandRow {...getRowProps({ row })} key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.value?.content ?? cell.value}
+                            </TableCell>
+                          ))}
+                        </TableExpandRow>
+
+                        {row.isExpanded ? (
+                          <TableExpandedRow
+                            className={styles.expandedLabQueueVisitRow}
+                            colSpan={headers.length + 2}
+                          >
+                            <>
+                              {/* <span>{tableRows[index]?.comment ?? ""}</span> */}
+                            </>
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow
+                            className={styles.hiddenRow}
+                            colSpan={headers.length + 2}
+                          />
+                        )}
+                      </>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              <Pagination
+                forwardText="Next page"
+                backwardText="Previous page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={patientQueueEntries?.length}
+                className={styles.pagination}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+        {showOverlay && (
+          <AssignBedWorkSpace
+            patientDetails={selectedPatientDetails}
+            closePanel={() => setShowOverlay(false)}
+            queueStatus={status}
+            headerTitle={t(
+              "assignBedToPatient",
+              restrictWardAdministrationToLoginLocation === true
+                ? `Assign Bed to Patient  ${selectedPatientDetails.name} in the ${session?.sessionLocation?.display} Ward`
+                : `Assign Bed to Patient  ${selectedPatientDetails.name}`
+            )}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <EmptyState
+      msg={t("noQueueItems", "No queue items to display")}
+      helper=""
+    />
+  );
+};
+export default ActivePatientsTable;

package/src/bed-admission/active-patients/active-visits.resource.ts

@@ -0,0 +1,171 @@
+import { useEffect } from "react";
+import useSWRInfinite from "swr/infinite";
+import dayjs from "dayjs";
+import isToday from "dayjs/plugin/isToday";
+import last from "lodash-es/last";
+import {
+  openmrsFetch,
+  type Visit,
+  useSession,
+  type FetchResponse,
+  formatDatetime,
+  parseDate,
+  useConfig,
+} from "@openmrs/esm-framework";
+
+dayjs.extend(isToday);
+
+export interface ActiveVisit {
+  age: string;
+  id: string;
+  idNumber: string;
+  gender: string;
+  location: string;
+  name: string;
+  patientUuid: string;
+  visitStartTime: string;
+  visitType: string;
+  visitUuid: string;
+  [identifier: string]: string;
+}
+
+interface VisitResponse {
+  results: Array<Visit>;
+  links: Array<{ rel: "prev" | "next" }>;
+  totalCount: number;
+}
+
+export function useActiveVisits() {
+  const session = useSession();
+  const config = useConfig();
+  const { inpatientVisitUuid } = useConfig();
+  const sessionLocation = session?.sessionLocation?.uuid;
+
+  const customRepresentation =
+    "custom:(uuid,patient:(uuid,identifiers:(identifier,uuid,identifierType:(name,uuid)),person:(age,display,gender,uuid,attributes:(value,attributeType:(uuid,display))))," +
+    "visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,stopDatetime)";
+
+  const getUrl = (
+    pageIndex,
+    previousPageData: FetchResponse<VisitResponse>
+  ) => {
+    if (
+      pageIndex &&
+      !previousPageData?.data?.links?.some((link) => link.rel === "next")
+    ) {
+      return null;
+    }
+
+    const url = `/ws/rest/v1/visit?v=${customRepresentation}&`;
+    const urlSearchParams = new URLSearchParams();
+
+    urlSearchParams.append("includeInactive", "false");
+    urlSearchParams.append("visitType", `${inpatientVisitUuid}`);
+    urlSearchParams.append("totalCount", "true");
+    //urlSearchParams.append("location", `${sessionLocation}`);
+
+    if (pageIndex) {
+      urlSearchParams.append("startIndex", `${pageIndex * 50}`);
+    }
+
+    return url + urlSearchParams.toString();
+  };
+
+  const {
+    data,
+    error,
+    isLoading,
+    isValidating,
+    size: pageNumber,
+    setSize,
+    mutate,
+  } = useSWRInfinite<FetchResponse<VisitResponse>, Error>(
+    sessionLocation ? getUrl : null,
+    openmrsFetch
+  );
+
+  useEffect(() => {
+    if (
+      data &&
+      data?.[pageNumber - 1]?.data?.links?.some((link) => link.rel === "next")
+    ) {
+      setSize((currentSize) => currentSize + 1);
+    }
+  }, [data, pageNumber, setSize]);
+
+  const mapVisitProperties = (visit: Visit): ActiveVisit => {
+    // create base object
+    const activeVisits: ActiveVisit = {
+      age: visit?.patient?.person?.age,
+      id: visit.uuid,
+      idNumber: null,
+      gender: visit?.patient?.person?.gender,
+      location: visit?.location?.uuid,
+      name: visit?.patient?.person?.display,
+      patientUuid: visit?.patient?.uuid,
+      visitStartTime: formatDatetime(parseDate(visit?.startDatetime)),
+      visitType: visit?.visitType?.display,
+      visitUuid: visit.uuid,
+    };
+
+    // in case no configuration is given the previous behavior remains the same
+    if (!config?.activeVisits?.identifiers) {
+      activeVisits.idNumber =
+        visit?.patient?.identifiers[0]?.identifier ?? "--";
+    } else {
+      // map identifiers on config
+      config?.activeVisits?.identifiers?.map((configIdentifier) => {
+        // check if in the current visit the patient has in his identifiers the current identifierType name
+        const visitIdentifier = visit?.patient?.identifiers.find(
+          (visitIdentifier) =>
+            visitIdentifier?.identifierType?.name ===
+            configIdentifier?.identifierName
+        );
+
+        // add the new identifier or rewrite existing one to activeVisit object
+        // the parameter will corresponds to the name of the key value of the configuration
+        // and the respective value is the visit identifier
+        // If there isn't a identifier we display this default text '--'
+        activeVisits[configIdentifier.header?.key] =
+          visitIdentifier?.identifier ?? "--";
+      });
+    }
+
+    // map attributes on config
+    config?.activeVisits?.attributes?.map(({ display, header }) => {
+      // check if in the current visit the person has in his attributes the current display
+      const personAttributes = visit?.patient?.person?.attributes.find(
+        (personAttributes) =>
+          personAttributes?.attributeType?.display === display
+      );
+
+      // add the new attribute or rewrite existing one to activeVisit object
+      // the parameter will correspond to the name of the key value of the configuration
+      // and the respective value is the persons value
+      // If there isn't a attribute we display this default text '--'
+      activeVisits[header?.key] = personAttributes?.value ?? "--";
+    });
+
+    return activeVisits;
+  };
+
+  const formattedActiveVisits: Array<ActiveVisit> = data
+    ? [].concat(
+        ...data?.map((res) => res?.data?.results?.map(mapVisitProperties))
+      )
+    : [];
+
+  return {
+    patientQueueEntries: formattedActiveVisits,
+    isError: error,
+    isLoading,
+    isValidating,
+    patientQueueCount: data?.[0]?.data?.totalCount ?? 0,
+    mutate,
+  };
+}
+
+export const getOriginFromPathName = (pathname = "") => {
+  const from = pathname.split("/");
+  return last(from);
+};

package/src/bed-admission/active-patients/admission-action-button.component.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Button, Tooltip } from "@carbon/react";
+import { HospitalBed } from "@carbon/react/icons";
+import { useTranslation } from "react-i18next";
+import styles from "./admission-action-button-styles.scss";
+
+const AdmissionActionButton = ({
+  entry,
+  handleBedAssigmentModal,
+  buttonText,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip align="bottom" label={t("buttonTooltip", buttonText)}>
+      <Button
+        className={styles.actionButton}
+        kind="ghost"
+        renderIcon={HospitalBed}
+        onClick={() => handleBedAssigmentModal(entry)}
+        iconDescription={t("buttonText", buttonText)}
+      ></Button>
+    </Tooltip>
+  );
+};
+
+export default AdmissionActionButton;

package/src/bed-admission/active-patients/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Header from "../../header/header.component";
+import styles from "./styles.scss";
+import BedAdmissionTabs from "../bed-admission-tabs.component";
+
+const ActivePatientsHome: React.FC = () => {
+  return (
+    <section className={styles.section}>
+      <Header route="In Patient" headerTitle="" />
+      <BedAdmissionTabs />
+    </section>
+  );
+};
+
+export default ActivePatientsHome;