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

package/src/bed-admission/bed-layout/bed-layout.scss

@@ -0,0 +1,118 @@
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.bedLayout {
+  position: relative;
+  margin: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-radius: 8px;
+  border: 1px solid #42be65;
+
+  .bedPillow {
+    background-color: #fff;
+    border-radius: 3rem;
+    border: 1px solid #42be65;
+  }
+
+  .bedNumber {
+    font-weight: bold;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.bedLayoutSelected {
+  background-color: #42be65 !important;
+  color: #fff !important;
+  border: 5px solid #e4e1c9 !important;
+  opacity:1 !important;
+}
+
+;
+
+.bedInfoMain {
+  display: flex;
+  align-self: center;
+}
+
+.bedInfoContainer {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 4rem;
+  border-bottom: 1px solid #a8a8a8;
+}
+
+.bedInfoText {
+  align-self: center;
+}
+
+.disabled {
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.errorContainer {
+  width: 90%;
+  position: absolute;
+}
+
+.loadingContainer {
+  position: absolute;
+  margin: spacing.$spacing-02 spacing.$spacing-05 0;
+}
+
+.bed {
+  height: 60px;
+  width: 8rem;
+}
+
+.pillow {
+  width: 10px;
+  height: 40px;
+}
+
+.available {
+  background-color: #fff;
+  color: #525252;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.occupied {
+  background-color: #42be65;
+  color: #fff;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.minOccupied {
+  height: 1.5rem;
+  width: 2.5rem;
+  color: #fff;
+  background-color: rgb(66, 190, 101);
+  padding: 0 6px;
+  border-radius: 5px;
+  pointer-events: none;
+}
+
+.minAvailable {
+  height: 1.5rem;
+  width: 2.5rem;
+  color: none;
+  background-color: #fff;
+  padding: 0 6px;
+  border-radius: 5px;
+  pointer-events: none;
+}
+
+.minPillow {
+  width: 7px;
+  height: 1rem;
+}

package/src/bed-admission/bed-layout/min-bed-layout.component.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styles from "./bed-layout.scss";
+import BedLayout from "./bed-layout.component";
+
+const MinBedLayout: React.FC = () => {
+  return (
+    <div className={styles.bedInfoContainer}>
+      <div className={styles.bedInfoMain}>
+        <BedLayout
+          bedPillowStyles={styles.minPillow}
+          layOutStyles={styles.minOccupied}
+        />{" "}
+        <span className={styles.bedInfoText}>Occupied</span>
+      </div>
+      <div className={styles.bedInfoMain}>
+        <BedLayout
+          bedPillowStyles={styles.minPillow}
+          layOutStyles={styles.minAvailable}
+        />{" "}
+        <span className={styles.bedInfoText}>Available</span>
+      </div>
+    </div>
+  );
+};
+
+export default MinBedLayout;

package/src/bed-admission/createDashboardLink.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import last from "lodash-es/last";
+import { BrowserRouter, useLocation } from "react-router-dom";
+import { ConfigurableLink } from "@openmrs/esm-framework";
+
+export interface LinkConfig {
+  name: string;
+  title: string;
+}
+
+function LinkExtension({ config }: { config: LinkConfig }) {
+  const { name, title } = config;
+  const location = useLocation();
+
+  let urlSegment = useMemo(
+    () => decodeURIComponent(last(location.pathname.split("/"))),
+    [location.pathname]
+  );
+
+  const isUUID = (value) => {
+    const regex =
+      /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+    return regex.test(value);
+  };
+
+  if (isUUID(urlSegment)) {
+    urlSegment = "summary";
+  }
+
+  return (
+    <ConfigurableLink
+      to={`${window.getOpenmrsSpaBase()}home${name ? `/${name}` : ""}`}
+      className={`cds--side-nav__link ${
+        name === urlSegment && "active-left-nav-link"
+      }`}
+    >
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createDashboardLink = (config: LinkConfig) => () =>
+  (
+    <BrowserRouter>
+      <LinkExtension config={config} />
+    </BrowserRouter>
+  );

package/src/bed-admission/discharged-patients/discharged-patients.componet.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ActivePatientsTable from "../active-patients/active-patients-table.component";
+interface DischargedPatientsListProps {
+  status: string;
+  setPatientCount: (value: number) => void;
+}
+
+const DischargedPatientsList: React.FC<DischargedPatientsListProps> = ({
+  status,
+  setPatientCount,
+}) => {
+  return (
+    <>
+      <ActivePatientsTable status={status} setPatientCount={setPatientCount} />
+    </>
+  );
+};
+
+export default DischargedPatientsList;

package/src/bed-admission/helpers/functions.ts

@@ -0,0 +1,102 @@
+import { OpenmrsResource } from "@openmrs/esm-framework";
+import last from "lodash-es/last";
+
+export type QueuePriority = "Emergency" | "Not Urgent" | "Priority" | "Urgent";
+export type MappedQueuePriority = Omit<QueuePriority, "Urgent">;
+
+export const getTagType = (priority: string) => {
+  switch (priority as MappedQueuePriority) {
+    case "Emergency":
+      return "red";
+    case "Not Urgent":
+      return "green";
+    default:
+      return "gray";
+  }
+};
+
+export const buildStatusString = (status: string) => {
+  if (!status) {
+    return "";
+  }
+  if (status === "pending") {
+    return `${status}`;
+  } else if (status === "picked") {
+    return `Attending`;
+  } else if (status === "completed") {
+    return `Finished`;
+  }
+};
+
+export const trimVisitNumber = (visitNumber: string) => {
+  if (!visitNumber) {
+    return;
+  }
+  return visitNumber.substring(15);
+};
+
+export const formatWaitTime = (waitTime: string, t) => {
+  const num = parseInt(waitTime);
+  const hours = num / 60;
+  const rhours = Math.floor(hours);
+  const minutes = (hours - rhours) * 60;
+  const rminutes = Math.round(minutes);
+  if (rhours > 0) {
+    return (
+      rhours +
+      " " +
+      `${t("hoursAnd", "hours and ")}` +
+      rminutes +
+      " " +
+      `${t("minutes", "minutes")}`
+    );
+  } else {
+    return rminutes + " " + `${t("minutes", "minutes")}`;
+  }
+};
+
+export const getTagColor = (waitTime: string) => {
+  const num = parseInt(waitTime);
+  if (num <= 30) {
+    return "green";
+  } else if (num > 30 && num <= 45) {
+    return "orange";
+  } else {
+    return "red";
+  }
+};
+
+export const getGender = (gender, t) => {
+  switch (gender) {
+    case "M":
+      return t("male", "Male");
+    case "F":
+      return t("female", "Female");
+    case "O":
+      return t("other", "Other");
+    case "U":
+      return t("unknown", "Unknown");
+    default:
+      return gender;
+  }
+};
+
+export function findObsByConceptUUID(
+  arr: Array<OpenmrsResource>,
+  ids: Array<string>
+) {
+  for (const visit of arr) {
+    return visit.obs.filter((o) => {
+      return ids.includes(o.concept.uuid);
+    });
+  }
+}
+
+export function timeDiffInMinutes(date1: Date, date2: Date) {
+  return Math.round((date1.getTime() - date2.getTime()) / (1000 * 3600 * 24));
+}
+
+export const getOriginFromPathName = (pathname = "") => {
+  const from = pathname.split("/");
+  return last(from);
+};

package/src/bed-admission/types.ts

@@ -0,0 +1,133 @@
+export interface PatientQueueResponse {
+  results: Array<PatientQueue>;
+}
+
+export interface PatientQueue {
+  uuid: string;
+  creator: {
+    uuid: string;
+    display: string;
+    username: string;
+    systemId: string;
+    person: UuidDisplay;
+    privileges: [];
+    roles: Array<UuidDisplay>;
+    retired: boolean;
+  };
+  dateCreated: string;
+  changedBy?: string;
+  dateChanged?: string;
+  voided: boolean;
+  dateVoided: string;
+  voidedBy: string;
+  patient: {
+    uuid: string;
+    display: string;
+    identifiers: Array<UuidDisplay>;
+    person: {
+      uuid: string;
+      display: string;
+      gender: string;
+      age: number;
+      birthdate: string;
+      birthdateEstimated: boolean;
+      dead: boolean;
+      deathDate?: string;
+      causeOfDeath?: string;
+      preferredName: UuidDisplay;
+      preferredAddress: UuidDisplay;
+      attributes: [];
+      voided: boolean;
+      birthtime?: string;
+      deathdateEstimated: boolean;
+    };
+    voided: boolean;
+  };
+  provider: {
+    uuid: string;
+    display: string;
+    person: UuidDisplay;
+    identifier: string;
+    attributes: [];
+    retired: boolean;
+  };
+  locationFrom: QueueLocation;
+  locationTo: QueueLocation;
+  encounter: {
+    uuid: string;
+  };
+  status: string; // TODO add status enum
+  priority: number; // TODO add priority enum
+  priorityComment: string;
+  visitNumber: string;
+  comment: string;
+  queueRoom: QueueRoom;
+  datePicked: string;
+  dateCompleted: string;
+}
+
+export interface QueueLocation {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1?: string;
+  address2?: string;
+  cityVillage?: string;
+  stateProvince?: string;
+  country: string;
+  postalCode?: string;
+  latitude?: string;
+  longitude?: string;
+  countyDistrict?: string;
+  address3?: string;
+  address4?: string;
+  address5?: string;
+  address6?: string;
+  tags: Array<UuidDisplay>;
+  parentLocation: UuidDisplay;
+  childLocations: Array<UuidDisplay>;
+  retired: boolean;
+  attributes: [];
+}
+
+export interface QueueRoom {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1?: string;
+  address2?: string;
+  cityVillage?: string;
+  stateProvince?: string;
+  country?: string;
+  postalCode?: string;
+  latitude?: string;
+  longitude?: string;
+  countyDistrict?: string;
+  address3?: string;
+  address4?: string;
+  address5?: string;
+  address6?: string;
+  tags: Array<UuidDisplay>;
+  parentLocation: UuidDisplay;
+  childLocations: Array<QueueLocation>;
+  retired: boolean;
+}
+
+export interface UuidDisplay {
+  uuid: string;
+  display: string;
+}
+
+export interface patientDetailsProps {
+  name: string;
+  patientUuid: string;
+  encounter: {
+    uuid: string;
+  };
+  locationUuid: string;
+  locationTo: string;
+  locationFrom: string;
+  queueUuid: string;
+}

package/src/config-schema.ts

@@ -0,0 +1,21 @@
+import { Type } from "@openmrs/esm-framework";
+import { boolean } from "zod";
+
+export const configSchema = {
+  admissionLocationTagUuid: {
+    _type: Type.UUID,
+    _description:
+      "UUID for the location tag of the `Admission Location`. Patients may only be admitted to inpatient care in a location with this tag",
+    _default: "839c65c7-9998-4b90-b80b-39727dfe9fa2",
+  },
+  inpatientVisitUuid: {
+    _type: Type.UUID,
+    _description: "UUID for the inpatient visit",
+    _default: "a73e2ac6-263b-47fc-99fc-e0f2c09fc914",
+  },
+  restrictWardAdministrationToLoginLocation: {
+    _type: boolean,
+    _description: "UUID for the inpatient visit",
+    _default: false,
+  },
+};

package/src/declarations.d.ts

@@ -0,0 +1,7 @@
+declare module "@carbon/react";
+declare module "*.css";
+declare module "*.scss";
+declare module "*.png";
+declare module "*.svg";
+
+declare type SideNavProps = object;

package/src/empty-state/empty-state.component.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Layer, Tile } from "@carbon/react";
+import styles from "./empty-state.scss";
+
+type EmptyStateProps = {
+  msg: string;
+  helper: string;
+};
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+  msg,
+  helper,
+}: EmptyStateProps) => {
+  return (
+    <Layer className={styles.layer}>
+      <Tile className={styles.tile}>
+        <svg width={64} height={64} viewBox="0 0 64 64">
+          <title>Empty data illustration</title>
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+              fill="#F4F4F4"
+            />
+            <path
+              d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+              fill="#8D8D8D"
+            />
+            <path
+              d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+              fill="#C6C6C6"
+            />
+            <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+            <circle
+              fill="#FFF"
+              fillRule="nonzero"
+              cx={17.636}
+              cy={2.314}
+              r={1.175}
+            />
+            <path
+              d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+              fill="#F4F4F4"
+            />
+            <path
+              d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+              fill="#8D8D8D"
+            />
+            <path
+              d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+              fill="#C6C6C6"
+            />
+            <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+            <circle
+              fill="#FFF"
+              fillRule="nonzero"
+              cx={40.218}
+              cy={9.755}
+              r={1.13}
+            />
+          </g>
+        </svg>
+        <p className={styles.content}>{msg}</p>
+        <p className={styles.explainer}>{helper}</p>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default EmptyState;

package/src/empty-state/empty-state.scss

@@ -0,0 +1,62 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use "@carbon/type";
+
+.desktopHeading {
+  h4 {
+    @include type.type-style("heading-compact-02");
+    color: colors.$gray-70;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style("heading-03");
+    color: colors.$gray-70;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  padding: 2rem;
+  border: 1px solid colors.$gray-20;
+  margin: 1.5rem;
+}
+
+.layer {
+  text-align: center;
+}
+
+.content {
+  @include type.type-style("heading-compact-02");
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.explainer {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}

package/src/header/header.component.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  ConfigurableLink,
+  formatDate,
+  useSession,
+} from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import { Calendar, Location } from "@carbon/react/icons";
+import Illustration from "./illustration.component";
+import styles from "./header.scss";
+
+type HeaderProps = {
+  route: string;
+  headerTitle?: string;
+};
+
+const Header: React.FC<HeaderProps> = ({
+  route,
+  headerTitle = "Bed Management",
+}) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles["left-justified-items"]}>
+        <ConfigurableLink to={`${window.getOpenmrsSpaBase()}bed-management`}>
+          <Illustration />
+        </ConfigurableLink>
+        <div className={styles["page-labels"]}>
+          <p>{t("headerTitle", headerTitle)}</p>
+          <p className={styles["page-name"]}>{route}</p>
+        </div>
+      </div>
+      <div className={styles["right-justified-items"]}>
+        <div className={styles["date-and-location"]}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>
+            {formatDate(new Date(), { mode: "standard" })}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;