@openmrs/esm-bed-management-app 7.1.1-pre.3735

package/src/summary/summary.resource.ts

@@ -0,0 +1,232 @@
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import type {
+  AdmissionLocation,
+  Bed,
+  BedFetchResponse,
+  BedTagPayload,
+  BedTypePayload,
+  LocationFetchResponse,
+  MappedBedData,
+  Mutator,
+} from '../types';
+import { type BedManagementConfig } from '../config-schema';
+import { useCallback, useEffect, useState } from 'react';
+
+export const useLocationsWithAdmissionTag = () => {
+  const { admissionLocationTagName } = useConfig<BedManagementConfig>();
+  const locationsUrl = `/ws/rest/v1/location?tag=${admissionLocationTagName}&v=full`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<LocationFetchResponse, Error>(
+    admissionLocationTagName ? locationsUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    data: data?.data?.results ?? [],
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+};
+
+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 { data: allLocations, isLoading } = useLocationsWithAdmissionTag();
+
+  const location = allLocations.find((loc) => loc.uuid == locationUuid);
+  return {
+    name: location?.display ?? null,
+    isLoadingLocationData: isLoading,
+  };
+};
+
+export function useBedsGroupedByLocation() {
+  const { data: locations, isLoading: isLoadingLocations } = useLocationsWithAdmissionTag();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isValidating, setIsValidating] = useState(true);
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState([]);
+
+  useEffect(() => {
+    if (!isLoadingLocations && locations && isValidating) {
+      const fetchData = async () => {
+        const promises = locations.map(async (location) => {
+          const bedsUrl = `/ws/rest/v1/bed?locationUuid=${location.uuid}`;
+          const bedsFetchResult = await openmrsFetch<BedFetchResponse>(bedsUrl, {
+            method: 'GET',
+          });
+          if (bedsFetchResult.data.results.length) {
+            return bedsFetchResult.data.results.map((bed) => ({
+              ...bed,
+              location: location,
+            }));
+          }
+          return null;
+        });
+
+        const updatedWards = (await Promise.all(promises)).filter(Boolean);
+        setResult(updatedWards);
+      };
+      fetchData()
+        .catch((e) => {
+          setError(e);
+        })
+        .finally(() => {
+          setIsLoading(false);
+          setIsValidating(false);
+        });
+    }
+  }, [locations, isLoading]);
+
+  const mutate = useCallback(() => {
+    setIsValidating(true);
+  }, []);
+
+  return {
+    data: result,
+    error,
+    isLoading: isLoading || isLoadingLocations,
+    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({
+  bedTypePayload,
+}: {
+  bedTypePayload: BedTypePayload;
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTypePayload,
+  });
+  return response;
+}
+
+export async function saveBedTag({ bedTagPayload }: { bedTagPayload: BedTagPayload }): Promise<FetchResponse<BedTag>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTagPayload,
+  });
+  return response;
+}
+export async function editBedType({
+  bedTypePayload,
+  bedTypeId,
+}: {
+  bedTypePayload: BedTypePayload;
+  bedTypeId: string;
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedtype/${bedTypeId}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTypePayload,
+  });
+  return response;
+}
+export async function editBedTag({
+  bedTagPayload,
+  bedTagId,
+}: {
+  bedTagPayload: BedTagPayload;
+  bedTagId: string;
+}): Promise<FetchResponse<BedType>> {
+  const response: FetchResponse = await openmrsFetch(`/ws/rest/v1/bedTag/${bedTagId}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: bedTagPayload,
+  });
+  return response;
+}

package/src/summary/summary.scss

@@ -0,0 +1,74 @@
+@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,173 @@
+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 LocationFetchResponse = {
+  data: {
+    results: Array<Location>;
+  };
+};
+
+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 type BedFetchResponse = {
+  results: Array<Bed>;
+};
+
+export interface Bed {
+  id: number;
+  uuid: string;
+  bedNumber: string;
+  bedType?: BedType;
+  row: number;
+  column: number;
+  status: 'AVAILABLE' | 'OCCUPIED';
+}
+
+export interface BedWithLocation extends Bed {
+  location: {
+    display: string;
+    uuid: string;
+  };
+}
+
+export interface BedType {
+  uuid: string;
+  name: string;
+  displayName: string;
+  description: string;
+  resourceVersion: string;
+}
+
+export interface BedFormData extends BedWithLocation {
+  description: string;
+}
+
+export interface BedTypeData {
+  uuid: string;
+  name: string;
+  displayName: string;
+  description: string;
+}
+
+export interface BedTagData {
+  uuid: string;
+  name: string;
+}
+
+export interface BedPostPayload {
+  bedNumber: string;
+  bedType: string;
+  row: number;
+  column: number;
+  status: string;
+  locationUuid: string;
+}
+
+export interface BedTagPayload {
+  name: string;
+}
+
+export interface BedTypePayload {
+  name: string;
+  displayName: string;
+  description: 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;
+    identifiers: Array<{ identifier: string }>;
+  };
+}

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

@@ -0,0 +1,34 @@
+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;
+  }
+}