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

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}
+      //   />
+      // );
+    },
+    [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]);
+
+  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;

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;
+}