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

package/src/bed-admission/active-patients/patient-queues.resource.ts

@@ -0,0 +1,136 @@
+import dayjs from "dayjs";
+import useSWR from "swr";
+
+import { formatDate, openmrsFetch, parseDate } from "@openmrs/esm-framework";
+import { PatientQueue, UuidDisplay } from "../types";
+
+export interface MappedPatientQueueEntry {
+  id: string;
+  name: string;
+  patientAge: number;
+  patientSex: string;
+  patientDob: string;
+  patientUuid: string;
+  priority: string;
+  priorityComment: string;
+  status: string;
+  waitTime: string;
+  locationFrom?: string;
+  locationToName?: string;
+  visitNumber: string;
+  identifiers: Array<UuidDisplay>;
+  dateCreated: string;
+  creatorUuid: string;
+  creatorUsername: string;
+  creatorDisplay: string;
+}
+
+export function usePatientQueuesList(
+  currentQueueRoomLocationUuid: string,
+  status: string
+) {
+  const apiUrl = `/ws/rest/v1/patientqueue?v=full&room=${currentQueueRoomLocationUuid}&status=${status}`;
+  return usePatientQueueRequest(apiUrl);
+}
+
+export function usePatientQueueRequest(apiUrl: string) {
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data: { results: Array<PatientQueue> } },
+    Error
+  >(apiUrl, openmrsFetch, { refreshInterval: 3000 });
+
+  const mapppedQueues = data?.data?.results.map((queue: PatientQueue) => {
+    return {
+      ...queue,
+      id: queue.uuid,
+      name: queue.patient?.person.display,
+      patientUuid: queue.patient?.uuid,
+      priorityComment: queue.priorityComment,
+      priority:
+        queue.priorityComment === "Urgent" ? "Priority" : queue.priorityComment,
+      priorityLevel: queue.priority,
+      waitTime: queue.dateCreated
+        ? `${dayjs().diff(dayjs(queue.dateCreated), "minutes")}`
+        : "--",
+      status: queue.status,
+      patientAge: queue.patient?.person?.age,
+      patientSex: queue.patient?.person?.gender === "M" ? "MALE" : "FEMALE",
+      patientDob: queue.patient?.person?.birthdate
+        ? formatDate(parseDate(queue.patient.person.birthdate), { time: false })
+        : "--",
+      identifiers: queue.patient?.identifiers,
+      locationFrom: queue.locationFrom?.uuid,
+      locationTo: queue.locationTo?.uuid,
+      locationFromName: queue.locationFrom?.name,
+      locationToName: queue.locationTo?.name,
+      queueRoom: queue.locationTo?.display,
+      visitNumber: queue.visitNumber,
+      dateCreated: queue.dateCreated
+        ? formatDate(parseDate(queue.dateCreated), { time: false })
+        : "--",
+      creatorUuid: queue.creator?.uuid,
+      creatorUsername: queue.creator?.username,
+      creatorDisplay: queue.creator?.display,
+    };
+  });
+
+  return {
+    patientQueueEntries: mapppedQueues || [],
+    patientQueueCount: mapppedQueues?.length,
+    isLoading,
+    isError: error,
+    isValidating,
+    mutate,
+  };
+}
+
+export function usePatientActiveListRequest(apiUrl: string) {
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data: { results: Array<PatientQueue> } },
+    Error
+  >(apiUrl, openmrsFetch, { refreshInterval: 3000 });
+
+  const mapppedQueues = data?.data?.results.map((queue: PatientQueue) => {
+    return {
+      ...queue,
+      id: queue.uuid,
+      name: queue.patient?.person.display,
+      patientUuid: queue.patient?.uuid,
+      priorityComment: queue.priorityComment,
+      priority:
+        queue.priorityComment === "Urgent" ? "Priority" : queue.priorityComment,
+      priorityLevel: queue.priority,
+      waitTime: queue.dateCreated
+        ? `${dayjs().diff(dayjs(queue.dateCreated), "minutes")}`
+        : "--",
+      status: queue.status,
+      patientAge: queue.patient?.person?.age,
+      patientSex: queue.patient?.person?.gender === "M" ? "MALE" : "FEMALE",
+      patientDob: queue.patient?.person?.birthdate
+        ? formatDate(parseDate(queue.patient.person.birthdate), { time: false })
+        : "--",
+      identifiers: queue.patient?.identifiers,
+      locationFrom: queue.locationFrom?.uuid,
+      locationTo: queue.locationTo?.uuid,
+      locationFromName: queue.locationFrom?.name,
+      locationToName: queue.locationTo?.name,
+      queueRoom: queue.locationTo?.display,
+      visitNumber: queue.visitNumber,
+      dateCreated: queue.dateCreated
+        ? formatDate(parseDate(queue.dateCreated), { time: false })
+        : "--",
+      creatorUuid: queue.creator?.uuid,
+      creatorUsername: queue.creator?.username,
+      creatorDisplay: queue.creator?.display,
+    };
+  });
+
+  return {
+    patientQueueEntries: mapppedQueues || [],
+    patientQueueCount: mapppedQueues?.length,
+    isLoading,
+    isError: error,
+    isValidating,
+    mutate,
+  };
+}

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,125 @@
+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;
+}
+
+// interface SQLBedAssignmentResponse {
+
+// }
+
+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, setSize]);
+
+  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);
+};