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

package/src/bed-admission/active-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/active-patients/view-action-menu.component.tsx

@@ -0,0 +1,33 @@
+import { Button, Tooltip } from "@carbon/react";
+import { Dashboard } from "@carbon/react/icons";
+import React, { AnchorHTMLAttributes } from "react";
+import { useTranslation } from "react-i18next";
+import { interpolateUrl, navigate } from "@openmrs/esm-framework";
+
+interface NameLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  to: string;
+  from: string;
+}
+
+const ViewActionsMenu: React.FC<NameLinkProps> = ({ from, to }) => {
+  const { t } = useTranslation();
+
+  const handleNameClick = (event: MouseEvent, to: string) => {
+    event.preventDefault();
+    navigate({ to });
+    localStorage.setItem("fromPage", from);
+  };
+
+  return (
+    <Tooltip align="bottom" label="View Patient">
+      <Button
+        kind="ghost"
+        onClick={(e) => handleNameClick(e, to)}
+        href={interpolateUrl(to)}
+        iconDescription={t("viewPatient", "View Patient")}
+        renderIcon={(props) => <Dashboard size={16} {...props} />}
+      />
+    </Tooltip>
+  );
+};
+export default ViewActionsMenu;

package/src/bed-admission/admitted-patients/active-admissions.resource.ts

@@ -0,0 +1,121 @@
+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,
+  useSession,
+  type FetchResponse,
+} from "@openmrs/esm-framework";
+import { AdmissionLocation } from "../../types";
+
+dayjs.extend(isToday);
+
+interface VisitResponse {
+  results: Array<AdmissionLocation>;
+  links: Array<{ rel: "prev" | "next" }>;
+  totalCount: number;
+}
+
+export interface BedPatientAssignment {
+  patientUuid: string;
+  age: number;
+  gender: string;
+  patientName: string;
+  ward: string;
+  bedNumber: string;
+}
+export function useActiveAdmissions() {
+  const session = useSession();
+  const sessionLocation = session?.sessionLocation?.uuid;
+
+  const getUrl = (
+    pageIndex,
+    previousPageData: FetchResponse<VisitResponse>
+  ) => {
+    if (
+      pageIndex &&
+      !previousPageData?.data?.links?.some((link) => link.rel === "next")
+    ) {
+      return null;
+    }
+
+    const url = `/ws/rest/v1/admissionLocation?v=full`;
+    const urlSearchParams = new URLSearchParams();
+
+    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]);
+
+  const formattedActiveVisits: any = (data: FetchResponse<VisitResponse>) => {
+    const result = data
+      ? data[0].data?.results?.map((wardEntry) => {
+          return wardEntry.bedLayouts;
+        })
+      : [];
+
+    const allBeds = [];
+
+    result?.forEach((elemnt) => {
+      elemnt.forEach((b) => {
+        allBeds.push(b);
+      });
+    });
+    const finalFinalList = allBeds
+      ?.filter((b) => b.status === "OCCUPIED")
+      .map((bedEntry) => {
+        const patient: BedPatientAssignment = {
+          patientUuid: bedEntry.patient.uuid,
+          age: bedEntry.patient.person.age,
+          gender: bedEntry.patient.person.gender,
+          patientName: bedEntry.patient.person.preferredName.givenName
+            .concat(" ")
+            .concat(bedEntry.patient.person.preferredName.familyName),
+          ward: bedEntry.location,
+          bedNumber: bedEntry.bedNumber,
+        };
+        return patient;
+      });
+    return finalFinalList;
+  };
+
+  return {
+    patientQueueEntries: formattedActiveVisits(data),
+    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/admitted-patients/admitted-patients-table.component.tsx

@@ -0,0 +1,280 @@
+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 { getOriginFromPathName } from "../helpers/functions";
+import styles from "../active-patients/styles.scss";
+import { useActiveAdmissions } from "./active-admissions.resource";
+import EmptyState from "../../empty-state/empty-state.component";
+import { patientDetailsProps } from "../types";
+
+interface ActiveVisitsTableProps {
+  status: string;
+  setPatientCount?: (value: number) => void;
+}
+
+const AdmittedPatientsTable: 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 } = useActiveAdmissions();
+  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: "patientName",
+      },
+      {
+        id: 1,
+        header: t("age", "Age"),
+        key: "age",
+      },
+      {
+        id: 2,
+        header: t("gender", "Gender"),
+        key: "gender",
+      },
+      {
+        id: 3,
+        header: t("ward", "Ward"),
+        key: "ward",
+      },
+      {
+        id: 4,
+        header: t("bedNumber", "Bed Number"),
+        key: "bedNumber",
+      },
+      {
+        id: 5,
+        header: t("actions", "Action"),
+        key: "actions",
+      },
+    ],
+    [t]
+  );
+
+  const tableRows = useMemo(() => {
+    return paginatedQueueEntries?.map((entry: any, index) => ({
+      ...(entry as object),
+      id: `${entry?.patientUuid}`,
+      actions: {
+        content: (
+          <div className={styles.displayFlex}>
+            {/* {renderActionButton(entry)} */}
+          </div>
+        ),
+      },
+    }));
+  }, [paginatedQueueEntries, status, t, renderActionButton, fromPage]);
+
+  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}
+                          ></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 admissions to display")} helper="" />
+  );
+};
+export default AdmittedPatientsTable;