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

package/src/summary/summary.resource.ts

@@ -0,0 +1,211 @@
+import useSWR from "swr";
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+import type { AdmissionLocation, Bed, MappedBedData } from "../types";
+
+export const useLocationsByTag = (locationUuid: string) => {
+  const locationsUrl = `/ws/rest/v1/location?tag=${locationUuid}&v=full`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data },
+    Error
+  >(locationUuid ? locationsUrl : null, openmrsFetch);
+
+  return {
+    data: data?.data?.results ?? [],
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+};
+
+export const getBedsForLocation = (locationUuid: string) => {
+  const locationsUrl = `/ws/rest/v1/bed?locationUuid=${locationUuid}`;
+
+  return openmrsFetch(locationsUrl, {
+    method: "GET",
+  }).then((res) => res?.data?.results ?? []);
+};
+
+export const useBedsForLocation = (locationUuid: string) => {
+  const apiUrl = `/ws/rest/v1/bed?locationUuid=${locationUuid}&v=full`;
+
+  const { data, isLoading, error } = useSWR<
+    { data: { results: Array<Bed> } },
+    Error
+  >(locationUuid ? apiUrl : null, openmrsFetch);
+
+  const mappedBedData: MappedBedData = (data?.data?.results ?? []).map(
+    (bed) => ({
+      id: bed.id,
+      number: bed.bedNumber,
+      name: bed.bedType?.displayName,
+      description: bed.bedType?.description,
+      status: bed.status,
+      uuid: bed.uuid,
+    })
+  );
+
+  return {
+    bedData: mappedBedData,
+    isLoading,
+    error,
+  };
+};
+
+export const useLocationName = (locationUuid: string) => {
+  const apiUrl = `/ws/rest/v1/location/${locationUuid}`;
+
+  const { data, isLoading } = useSWR<{ data }, Error>(
+    locationUuid ? apiUrl : null,
+    openmrsFetch
+  );
+
+  return {
+    name: data?.data?.display ?? null,
+    isLoadingLocationData: isLoading,
+  };
+};
+
+export const findBedByLocation = (locationUuid: string) => {
+  const locationsUrl = `/ws/rest/v1/bed?locationUuid=${locationUuid}`;
+  return openmrsFetch(locationsUrl, {
+    method: "GET",
+  });
+};
+
+export const useWards = (locationUuid: string) => {
+  const locationsUrl = `/ws/rest/v1/location?tag=${locationUuid}&v=full`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data },
+    Error
+  >(locationUuid ? locationsUrl : null, openmrsFetch);
+
+  return {
+    data,
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+};
+
+export const useAdmissionLocations = () => {
+  const locationsUrl = `/ws/rest/v1/admissionLocation?v=full`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data: { results: Array<AdmissionLocation> } },
+    Error
+  >(locationsUrl, openmrsFetch);
+
+  return {
+    data: data?.data?.results ?? [],
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+};
+
+export const useAdmissionLocationBedLayout = (locationUuid: string) => {
+  const locationsUrl = `/ws/rest/v1/admissionLocation/${locationUuid}?v=full`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data: AdmissionLocation },
+    Error
+  >(locationsUrl, openmrsFetch);
+
+  return {
+    data: data?.data?.bedLayouts ?? [],
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+};
+export const useBedType = () => {
+  const url = `/ws/rest/v1/bedtype/`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data },
+    Error
+  >(url, openmrsFetch);
+  const results = data?.data?.results ? data?.data?.results : [];
+  return {
+    bedTypeData: results,
+    isError: error,
+    loading: isLoading,
+    validate: isValidating,
+    mutate,
+  };
+};
+
+export const useBedTag = () => {
+  const url = `/ws/rest/v1/bedTag/`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<
+    { data },
+    Error
+  >(url, openmrsFetch);
+  const results = data?.data?.results ? data?.data?.results : [];
+  return {
+    bedTypeData: results,
+    isError: error,
+    loading: isLoading,
+    validate: isValidating,
+    mutate,
+  };
+};
+interface BedType {
+  name: string;
+  displayName: string;
+  description: string;
+}
+interface BedTag {
+  name: string;
+}
+export async function saveBedType({
+  bedPayload,
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: bedPayload,
+  });
+  return response;
+}
+
+export async function saveBedTag({
+  bedPayload,
+}): Promise<FetchResponse<BedTag>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: bedPayload,
+  });
+  return response;
+}
+export async function editBedType({
+  bedPayload,
+  bedTypeId,
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/bedtype/${bedTypeId}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: bedPayload,
+    }
+  );
+  return response;
+}
+export async function editBedTag({
+  bedPayload,
+  bedTagId,
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/bedTag/${bedTagId}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: bedPayload,
+    }
+  );
+  return response;
+}

package/src/summary/summary.scss

@@ -0,0 +1,72 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.cardContainer {
+	background-color: colors.$white-0;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	justify-content: space-between;
+	padding: 1rem;
+}
+
+.buttonMain {
+	background-color: colors.$white-0;
+	color: colors.$teal-60;
+	cursor: text;
+}
+
+.sectionLoader {
+	text-align: center;
+}
+
+.buttonMain {
+	&:active, &:focus, &:hover {
+		color: colors.$teal-60 !important;
+		background-color: colors.$white-0 !important;
+	}
+}
+
+.inactiveMain {
+	margin-bottom: 4rem;
+}
+
+.buttonContainer {
+	display: flex;
+}
+
+.buttonItems {
+	flex: auto;
+}
+
+.pageHeaderContainer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: layout.$spacing-05;
+	background-color: #ededed;
+}
+
+.pageHeader {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	font-size: 1.25rem;
+	font-weight: 400;
+	line-height: 1.4;
+	letter-spacing: 0;
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: colors.$blue-60;
+
+  svg {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.loader {
+	margin: 2rem;
+}

package/src/types.ts

@@ -0,0 +1,163 @@
+import type { KeyedMutator } from "swr";
+
+export type Tag = {
+  uuid: string;
+  display: string;
+  name: string;
+  description?: string;
+  retired: boolean;
+  links: Array<{
+    rel: string;
+    uri: string;
+    resourceAlias: string;
+  }>;
+  resourceVersion: string;
+};
+
+export type Location = {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string | null;
+  address1: string | null;
+  address2: string | null;
+  cityVillage: string | null;
+  stateProvince: string | null;
+  country: string | null;
+  postalCode: string | null;
+  latitude: string | null;
+  longitude: string | null;
+  countyDistrict: string | null;
+  address3: string | null;
+  address4: string | null;
+  address5: string | null;
+  address6: string | null;
+  tags: Tag[];
+  parentLocation: Location;
+  childLocations: Location[];
+  retired: boolean;
+  auditInfo: {
+    creator: {
+      uuid: string;
+      display: string;
+      links: Array<{
+        rel: string;
+        uri: string;
+        resourceAlias: string;
+      }>;
+    };
+    dateCreated: string;
+    changedBy: null;
+    dateChanged: null;
+  };
+  address7: string | null;
+  address8: string | null;
+  address9: string | null;
+  address10: string | null;
+  address11: string | null;
+  address12: string | null;
+  address13: string | null;
+  address14: string | null;
+  address15: string | null;
+  links: Array<{
+    rel: string;
+    uri: string;
+    resourceAlias: string;
+  }>;
+  resourceVersion: string;
+  beds: Bed[];
+};
+
+export interface Bed {
+  id: number;
+  bedId: number;
+  uuid: string;
+  bedNumber: string;
+  bedType: {
+    uuid: string;
+    name: string;
+    displayName: string;
+    description: string;
+    resourceVersion: string;
+  };
+  row: number;
+  column: number;
+  status: "AVAILABLE" | string;
+  location: string;
+}
+
+export interface BedType {
+  uuid: string;
+  name: string;
+  displayName: string;
+  description: string;
+}
+
+export interface InitialData {
+  uuid: string;
+  bedNumber: string;
+  status: string;
+  description: string;
+  row: number;
+  column: number;
+  location: {
+    display: string;
+    uuid: string;
+  };
+  bedType: {
+    name: string;
+  };
+}
+
+export type Mutator = KeyedMutator<{
+  data: {
+    results: Array<Location>;
+  };
+}>;
+
+export type AdmissionLocation = {
+  ward: {
+    uuid: string;
+    display: string;
+    name: string;
+    description: string;
+  };
+  totalBeds: number;
+  occupiedBeds: number;
+  bedLayouts: Array<BedDetails>;
+};
+
+export type MappedBedData = Array<{
+  id: number;
+  number: string;
+  name: string;
+  description: string;
+  status: string;
+  uuid: string;
+}>;
+
+export interface BedDetails extends Bed {
+  patient: null | {
+    uuid: string;
+    person: {
+      gender: string;
+      age: number;
+      preferredName: {
+        givenName: string;
+        familyName: string;
+      };
+    };
+    identifiers: Array<{ identifier: string }>;
+  };
+}
+export interface BedTypeData {
+  uuid: string;
+  name: string;
+  displayName: string;
+  description: string;
+}
+
+export interface BedTagData {
+  uuid: string;
+  name: string;
+}

package/src/ward-card/ward-card.component.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Layer, Tile } from "@carbon/react";
+import styles from "./ward-card.scss";
+
+interface WardCardProps {
+  label: string;
+  value: number | string;
+  headerLabel: string;
+  children?: React.ReactNode;
+  service?: string;
+  serviceUuid?: string;
+  locationUuid?: string;
+}
+
+const WardCard: React.FC<WardCardProps> = ({
+  children,
+  headerLabel,
+  label,
+  value,
+}) => {
+  return (
+    <Layer
+      className={`${children && styles.cardWithChildren} ${styles.container}`}
+    >
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+          </div>
+          {children}
+        </div>
+        <div>
+          <label className={styles.totalsLabel}>{label}</label>
+          <p className={styles.totalsValue}>{value}</p>
+        </div>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default WardCard;

package/src/ward-card/ward-card.scss

@@ -0,0 +1,51 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use "@carbon/type";
+
+.container {
+  flex-grow: 1;
+}
+
+.tileContainer {
+  border: 1px solid colors.$gray-20;
+  height: 7.875rem;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-03;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: layout.$spacing-03;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+}
+
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: colors.$gray-100;
+}
+
+.headerLabelContainer {
+  margin-bottom: 1rem;
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: colors.$blue-60;
+
+  svg {
+    margin-left: layout.$spacing-03;
+  }
+}

package/src/ward-with-beds/ward-with-beds.component.tsx

@@ -0,0 +1,186 @@
+import React, { useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Tag,
+} from "@carbon/react";
+import { ArrowLeft } from "@carbon/react/icons";
+import { navigate, usePagination } from "@openmrs/esm-framework";
+import Header from "../header/header.component";
+import {
+  useBedsForLocation,
+  useLocationName,
+} from "../summary/summary.resource";
+import styles from "./ward-with-beds.scss";
+
+type RouteParams = { location: string };
+
+const WardWithBeds: React.FC = () => {
+  const { location } = useParams<RouteParams>();
+  const { isLoading, bedData } = useBedsForLocation(location);
+
+  const { name } = useLocationName(location);
+
+  const [pageSize, setPageSize] = useState(10);
+  const {
+    results: paginatedData,
+    goTo,
+    currentPage,
+  } = usePagination(bedData, pageSize);
+
+  if (isLoading) {
+    <p>Loading...</p>;
+  }
+
+  const tableHeaders = [
+    {
+      id: 0,
+      header: "ID",
+      key: "id",
+    },
+    {
+      id: 1,
+      header: "Number",
+      key: "number",
+    },
+    {
+      id: 2,
+      header: "Name",
+      key: "name",
+    },
+    {
+      id: 3,
+      header: "Description",
+      key: "description",
+    },
+    {
+      id: 4,
+      header: "Occupied",
+      key: "occupied",
+    },
+  ];
+
+  const CustomTag = ({ condition }: { condition: boolean }) => {
+    const { t } = useTranslation();
+
+    if (condition) {
+      return (
+        <Tag type="green" size="md">
+          {t("yes", "Yes")}
+        </Tag>
+      );
+    }
+
+    return (
+      <Tag type="red" size="md">
+        {t("no", "No")}
+      </Tag>
+    );
+  };
+
+  const tableRows = useMemo(() => {
+    return paginatedData?.map((bed) => ({
+      id: bed.id,
+      number: bed.number,
+      name: bed.name,
+      description: bed.description,
+      occupied: <CustomTag condition={bed?.status === "OCCUPIED"} />,
+    }));
+  }, [paginatedData]);
+
+  return (
+    <>
+      <Header route={name ? name : "--"} />
+      {isLoading && (
+        <div className={styles.container}>
+          <DataTableSkeleton role="progressbar" zebra />
+        </div>
+      )}
+
+      {bedData?.length ? (
+        <>
+          <div className={styles.backButton}>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+              iconDescription="Return to summary"
+              onClick={() =>
+                navigate({
+                  to: `${window.getOpenmrsSpaBase()}bed-management`,
+                })
+              }
+            >
+              <span>Return to summary</span>
+            </Button>
+          </div>
+          <div className={styles.container}>
+            <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>
+              {({
+                rows,
+                headers,
+                getHeaderProps,
+                getRowProps,
+                getTableProps,
+              }) => (
+                <TableContainer>
+                  <Table {...getTableProps()}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader
+                            key={header.key}
+                            {...getHeaderProps({ header })}
+                          >
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow key={row.id} {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.value?.content ?? cell.value}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            </DataTable>
+            <Pagination
+              backwardText="Previous page"
+              forwardText="Next page"
+              itemsPerPageText="Items per page:"
+              page={currentPage}
+              pageNumberText="Page Number"
+              pageSize={pageSize}
+              onChange={({ page, pageSize }) => {
+                goTo(page);
+                setPageSize(pageSize);
+              }}
+              pageSizes={[10, 20, 30, 40, 50]}
+              totalItems={paginatedData?.length}
+            />
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+};
+
+export default WardWithBeds;