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

package/src/bed-administration/bed-administration-types.ts

@@ -10,3 +10,11 @@ export interface BedAdministrationData {
   occupancyStatus: string;
   bedType: string;
 }
+export interface BedTypeDataAdministration {
+  name: string;
+  displayName: string;
+  description: string;
+}
+export interface BedTagDataAdministration {
+  name: string;
+}

package/src/bed-admission/active-patients/active-patients-table.component.tsx

@@ -29,21 +29,13 @@ import {
 } from "@openmrs/esm-framework";
 import React, { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  formatWaitTime,
-  getOriginFromPathName,
-  getTagColor,
-  getTagType,
-  trimVisitNumber,
-} from "../helpers/functions";
+import { getOriginFromPathName } from "../helpers/functions";
 import styles from "./styles.scss";
-import { usePatientQueuesList } from "./patient-queues.resource";
-import { useActiveVisits } from "./active-visits.resource";
 import EmptyState from "../../empty-state/empty-state.component";
 import AssignBedWorkSpace from "../../workspace/allocate-bed-workspace.component";
 import AdmissionActionButton from "./admission-action-button.component";
 import { patientDetailsProps } from "../types";
-import ViewActionsMenu from "./view-action-menu.component";
+import { useEligibleAdmissions } from "./eligible-admissions.resource";
 
 interface ActiveVisitsTableProps {
   status: string;
@@ -66,15 +58,15 @@ const ActivePatientsTable: React.FC<ActiveVisitsTableProps> = ({
 
   const layout = useLayoutType();
 
-  const { patientQueueEntries, isLoading } = useActiveVisits();
   const { restrictWardAdministrationToLoginLocation } = useConfig();
 
+  const { patientEntries, isLoading } = useEligibleAdmissions();
   const handleBedAssigmentModal = useCallback(
     (entry) => {
       setSelectedPatientDetails({
         name: entry.name,
         patientUuid: entry.patientUuid,
-        encounter: entry.encounter,
+        encounter: entry.admissionEncounterUuid,
         locationUuid: session?.sessionLocation?.uuid,
         locationTo: entry.locationTo,
         locationFrom: entry.locationFrom,
@@ -108,7 +100,7 @@ const ActivePatientsTable: React.FC<ActiveVisitsTableProps> = ({
     goTo,
     results: paginatedQueueEntries,
     currentPage,
-  } = usePagination(patientQueueEntries, currentPageSize);
+  } = usePagination(patientEntries, currentPageSize);
 
   const tableHeaders = useMemo(
     () => [
@@ -119,7 +111,7 @@ const ActivePatientsTable: React.FC<ActiveVisitsTableProps> = ({
       },
       {
         id: 1,
-        header: t("idNumber", "ID Number"),
+        header: t("idNumber", "Identifier"),
         key: "idNumber",
       },
       {
@@ -153,6 +145,7 @@ const ActivePatientsTable: React.FC<ActiveVisitsTableProps> = ({
 
   const tableRows = useMemo(() => {
     return paginatedQueueEntries?.map((entry) => ({
+      id: `${entry.idNumber}`,
       ...entry,
       actions: {
         content: (
@@ -160,21 +153,21 @@ const ActivePatientsTable: React.FC<ActiveVisitsTableProps> = ({
         ),
       },
     }));
-  }, [paginatedQueueEntries, status, t, renderActionButton, fromPage]);
+  }, [paginatedQueueEntries, renderActionButton]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
   }
 
   if (
-    (!isLoading && patientQueueEntries && status === "pending") ||
+    (!isLoading && patientEntries && status === "pending") ||
     status === "completed" ||
     status === ""
   ) {
-    setPatientCount(patientQueueEntries.length);
+    setPatientCount(patientEntries.length);
   }
 
-  if (patientQueueEntries?.length) {
+  if (patientEntries?.length) {
     return (
       <div className={styles.container}>
         <div className={styles.headerBtnContainer}></div>
@@ -258,7 +251,7 @@ const ActivePatientsTable: React.FC<ActiveVisitsTableProps> = ({
                 page={currentPage}
                 pageSize={currentPageSize}
                 pageSizes={pageSizes}
-                totalItems={patientQueueEntries?.length}
+                totalItems={patientEntries?.length}
                 className={styles.pagination}
                 onChange={({ pageSize, page }) => {
                   if (pageSize !== currentPageSize) {
@@ -291,7 +284,7 @@ const ActivePatientsTable: React.FC<ActiveVisitsTableProps> = ({
 
   return (
     <EmptyState
-      msg={t("noQueueItems", "No queue items to display")}
+      msg={t("noPatientForAdmission", "There are no patients for admission")}
       helper=""
     />
   );

package/src/bed-admission/active-patients/active-visits.resource.ts

@@ -16,7 +16,6 @@ import {
 dayjs.extend(isToday);
 
 export interface ActiveVisit {
-  age: string;
   id: string;
   idNumber: string;
   gender: string;
@@ -91,12 +90,11 @@ export function useActiveVisits() {
     ) {
       setSize((currentSize) => currentSize + 1);
     }
-  }, [data, pageNumber]);
+  }, [data, pageNumber, setSize]);
 
   const mapVisitProperties = (visit: Visit): ActiveVisit => {
     // create base object
     const activeVisits: ActiveVisit = {
-      age: visit?.patient?.person?.age,
       id: visit.uuid,
       idNumber: null,
       gender: visit?.patient?.person?.gender,

package/src/bed-admission/active-patients/eligible-admissions.resource.ts

@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import useSWR from "swr";
+import { openmrsFetch, useConfig } from "@openmrs/esm-framework";
+
+interface PatientAdmissionListResponse {
+  idNumber: string;
+  name: string;
+  age: number;
+  gender: string;
+  visitType: string;
+  visitStartTime: string;
+  admissionEncounterUuid: string;
+  patientUuid: string;
+}
+
+export function useEligibleAdmissions() {
+  const { patientListForAdmissionUrl } = useConfig();
+  const { data, error, isLoading } = useSWR<
+    { data: Array<PatientAdmissionListResponse> },
+    Error
+  >(patientListForAdmissionUrl ?? null, openmrsFetch);
+
+  const patientQueueEntries = useMemo(() => {
+    const rawData = data?.data ?? [];
+
+    return rawData.map((el) => ({
+      ...el,
+      visitStartTime: new Date(
+        parseInt(el.visitStartTime[0]),
+        parseInt(el.visitStartTime[1]),
+        parseInt(el.visitStartTime[2]),
+        parseInt(el.visitStartTime[3]),
+        parseInt(el.visitStartTime[4])
+      ).toUTCString(),
+    }));
+  }, [data?.data]);
+
+  return {
+    patientEntries: patientQueueEntries ? patientQueueEntries : [],
+    isLoading,
+    error,
+  };
+}

package/src/bed-admission/admitted-patients/active-admissions.resource.ts

@@ -18,6 +18,10 @@ interface VisitResponse {
   totalCount: number;
 }
 
+// interface SQLBedAssignmentResponse {
+
+// }
+
 export interface BedPatientAssignment {
   patientUuid: string;
   age: number;
@@ -71,7 +75,7 @@ export function useActiveAdmissions() {
     ) {
       setSize((currentSize) => currentSize + 1);
     }
-  }, [data, pageNumber]);
+  }, [data, pageNumber, setSize]);
 
   const formattedActiveVisits: any = (data: FetchResponse<VisitResponse>) => {
     const result = data

package/src/bed-admission/admitted-patients/admitted-patients-table.component.tsx

@@ -64,7 +64,7 @@ const AdmittedPatientsTable: React.FC<ActiveVisitsTableProps> = ({
       setSelectedPatientDetails({
         name: entry.name,
         patientUuid: entry.patientUuid,
-        encounter: entry.encounter,
+        encounter: entry.admissionEncounterUuid,
         locationUuid: session?.sessionLocation?.uuid,
         locationTo: entry.locationTo,
         locationFrom: entry.locationFrom,
@@ -91,7 +91,7 @@ const AdmittedPatientsTable: React.FC<ActiveVisitsTableProps> = ({
       //   />
       // );
     },
-    [handleBedAssigmentModal, status]
+    [status]
   );
 
   const {
@@ -148,7 +148,7 @@ const AdmittedPatientsTable: React.FC<ActiveVisitsTableProps> = ({
         ),
       },
     }));
-  }, [paginatedQueueEntries, status, t, renderActionButton, fromPage]);
+  }, [paginatedQueueEntries]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;

package/src/bed-admission/bed-admission-tabs.component.tsx

@@ -4,7 +4,6 @@ import styles from "./bed-admission-tabs-styles.scss";
 import { useTranslation } from "react-i18next";
 import ActivePatientsTable from "./active-patients/active-patients-table.component";
 import AdmittedPatientsList from "./admitted-patients/admitted-patients.component";
-import DischargedPatientsList from "./discharged-patients/discharged-patients.componet";
 import WardCard from "../ward-card/ward-card.component";
 
 const BedAdmissionTabs: React.FC = () => {

package/src/bed-admission/bed-admission.resource.ts

@@ -1,4 +1,4 @@
-import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+import { FetchResponse, openmrsFetch, useConfig } from "@openmrs/esm-framework";
 
 export async function assignPatientBed(
   requestPayload,

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

@@ -53,7 +53,7 @@ const BedLayoutList: React.FC<BedLayoutListProps> = React.memo(
       );
     }
 
-    if (locationUuid === undefined) {
+    if (locationUuid === "") {
       return (
         <div className={styles.errorContainer}>
           <EmptyState
@@ -63,7 +63,7 @@ const BedLayoutList: React.FC<BedLayoutListProps> = React.memo(
         </div>
       );
     }
-    if (locationUuid !== undefined && !bedData?.length) {
+    if (locationUuid !== "" && !bedData?.length) {
       return (
         <div className={styles.errorContainer}>
           <EmptyState

package/src/bed-admission/bed-tag/bed-tag-administration-table.component.tsx

@@ -0,0 +1,240 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from "@carbon/react";
+import { Add, Edit, Delete } from "@carbon/react/icons";
+import {
+  isDesktop as desktopLayout,
+  showNotification,
+  showToast,
+  useLayoutType,
+} from "@openmrs/esm-framework";
+import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
+import type { BedTagData } from "../../types";
+import { deleteBedTag, useBedTag } from "../../summary/summary.resource";
+import Header from "../../header/header.component";
+import styles from "../../bed-administration/bed-administration-table.scss";
+import BedTagForm from "./new-tag-form.component";
+import EditBedTagForm from "./edit-tag-form.component";
+import DeleteBedTag from "./delete-bed-tag.component";
+
+const BedTagAdministrationTable: React.FC = () => {
+  const { t } = useTranslation();
+  const headerTitle = t("bedTag", "Bed Tag");
+  const layout = useLayoutType();
+  const isTablet = layout === "tablet";
+  const responsiveSize = isTablet ? "lg" : "sm";
+  const isDesktop = desktopLayout(layout);
+  const [isBedDataLoading] = useState(false);
+  const [showBedTagsModal, setAddBedTagsModal] = useState(false);
+  const [showDeleteBedTagsModal, setDeleteBedTagsModal] = useState(false);
+  const [showEditBedModal, setShowEditBedModal] = useState(false);
+  const [editData, setEditData] = useState<BedTagData>();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize] = useState(10);
+  const { bedTypeData, isError, loading, validate, mutate } = useBedTag();
+  const tableHeaders = [
+    {
+      header: t("ids", "Id"),
+      key: "ids",
+    },
+    {
+      header: t("name", "Name"),
+      key: "name",
+    },
+    {
+      header: t("actions", "Actions"),
+      key: "actions",
+    },
+  ];
+  const tableRows = useMemo(() => {
+    return bedTypeData?.map((entry) => ({
+      id: entry.uuid,
+      ids: entry.id,
+      name: entry?.name,
+      actions: (
+        <>
+          <Button
+            enterDelayMs={300}
+            renderIcon={Edit}
+            onClick={(e) => {
+              e.preventDefault();
+              setEditData(entry);
+              setShowEditBedModal(true);
+              setAddBedTagsModal(false);
+              setDeleteBedTagsModal(false);
+            }}
+            kind={"ghost"}
+            iconDescription={t("editBedTag", "Edit Bed Tag")}
+            hasIconOnly
+            size={responsiveSize}
+            tooltipAlignment="start"
+          />
+          <Button
+            enterDelayMs={300}
+            renderIcon={Delete}
+            onClick={(e) => {
+              e.preventDefault();
+              setEditData(entry);
+              setShowEditBedModal(false);
+              setAddBedTagsModal(false);
+              setDeleteBedTagsModal(true);
+            }}
+            kind={"ghost"}
+            iconDescription={t("deleteBedTag", "Delete Bed Tag")}
+            hasIconOnly
+            size={responsiveSize}
+            tooltipAlignment="start"
+          />
+        </>
+      ),
+    }));
+  }, [responsiveSize, bedTypeData, t]);
+
+  if (isBedDataLoading || loading) {
+    return (
+      <>
+        <Header route="Bed Tag" />
+        <div className={styles.widgetCard}>
+          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
+        </div>
+      </>
+    );
+  }
+  if (isError) {
+    return (
+      <>
+        <Header route="Bed Tag" />
+        <div className={styles.widgetCard}>
+          <ErrorState error={isError} headerTitle={headerTitle} />
+        </div>
+      </>
+    );
+  }
+  return (
+    <>
+      <Header route="Bed Tag" />
+
+      <div className={styles.widgetCard}>
+        {showBedTagsModal ? (
+          <BedTagForm
+            onModalChange={setAddBedTagsModal}
+            showModal={showBedTagsModal}
+            mutate={mutate}
+          />
+        ) : null}
+        {showEditBedModal ? (
+          <EditBedTagForm
+            onModalChange={setShowEditBedModal}
+            showModal={showEditBedModal}
+            editData={editData}
+            mutate={mutate}
+          />
+        ) : null}
+        {showDeleteBedTagsModal ? (
+          <DeleteBedTag
+            onModalChange={setDeleteBedTagsModal}
+            showModal={showDeleteBedTagsModal}
+            editData={editData}
+            mutate={mutate}
+          />
+        ) : null}
+        <CardHeader title={headerTitle}>
+          <span className={styles.backgroundDataFetchingIndicator}>
+            <span>{validate ? <InlineLoading /> : null}</span>
+          </span>
+          {bedTypeData?.length ? (
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              onClick={() => setAddBedTagsModal(true)}
+            >
+              {t("addBedTag", "Add Bed Tag")}
+            </Button>
+          ) : null}
+        </CardHeader>
+        <DataTable
+          rows={tableRows}
+          headers={tableHeaders}
+          isSortable
+          size={isTablet ? "lg" : "sm"}
+          useZebraStyles
+        >
+          {({ rows, headers, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader>
+                        {header.header?.content ?? header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>
+                          {cell.value?.content ?? cell.value}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>
+                        {t("No data", "No data to display")}
+                      </p>
+                      <p className={styles.helper}>
+                        {t("checkFilters", "Check the filters above")}
+                      </p>
+                    </div>
+                    <p className={styles.separator}>{t("or", "or")}</p>
+                    <Button
+                      kind="ghost"
+                      size="sm"
+                      renderIcon={(props) => <Add size={16} {...props} />}
+                      onClick={() => setAddBedTagsModal(true)}
+                    >
+                      {t("bedTag", "Add Bed Tag")}
+                    </Button>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                page={currentPage}
+                pageSize={pageSize}
+                pageSizes={[10, 20, 30, 40, 50]}
+                totalItems={bedTypeData.length}
+                onChange={({ page, pageSize }) => {
+                  setCurrentPage(page);
+                  pageSize(pageSize);
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </>
+  );
+};
+export default BedTagAdministrationTable;

package/src/bed-admission/bed-tag/bed-tags-admin-form.component.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { z } from "zod";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Button,
+  ComposedModal,
+  Form,
+  FormGroup,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  TextInput,
+  InlineNotification,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { Location } from "@openmrs/esm-framework";
+import type { BedTagData } from "../../types";
+
+const BedTagAdministrationSchema = z.object({
+  name: z
+    .string()
+    .max(255)
+    .refine(
+      (value) => {
+        return (
+          typeof value === "string" &&
+          value.trim().length > 0 &&
+          !/\d/.test(value)
+        );
+      },
+      {
+        message: "Bed tag must not contain numbers",
+      }
+    ),
+});
+
+interface BedTagAdministrationFormProps {
+  showModal: boolean;
+  onModalChange: (showModal: boolean) => void;
+  availableBedTypes: Array<BedTagData>;
+  allLocations: Location[];
+  handleCreateQuestion?: (formData: BedTagData) => void;
+  handleDeleteBedTag?: () => void;
+  headerTitle: string;
+  initialData: BedTagData;
+}
+
+interface ErrorType {
+  message: string;
+}
+
+const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
+  showModal,
+  onModalChange,
+  handleCreateQuestion,
+  headerTitle,
+  initialData,
+}) => {
+  const { t } = useTranslation();
+
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [formStateError, setFormStateError] = useState("");
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isDirty },
+  } = useForm<BedTagData>({
+    mode: "all",
+    resolver: zodResolver(BedTagAdministrationSchema),
+    defaultValues: {
+      name: initialData.name || "",
+    },
+  });
+
+  const onSubmit = (formData: BedTagData) => {
+    const result = BedTagAdministrationSchema.safeParse(formData);
+    if (result.success) {
+      setShowErrorNotification(false);
+      handleCreateQuestion(formData);
+    }
+  };
+
+  const onError = (error: { [key: string]: ErrorType }) => {
+    setFormStateError(Object.entries(error)[0][1].message);
+    setShowErrorNotification(true);
+  };
+
+  return (
+    <ComposedModal
+      open={showModal}
+      onClose={() => onModalChange(false)}
+      preventCloseOnClickOutside
+    >
+      <ModalHeader title={headerTitle} />
+      <Form onSubmit={handleSubmit(onSubmit, onError)}>
+        <ModalBody hasScrollingContent>
+          <Stack gap={3}>
+            <FormGroup legendText={""}>
+              <Controller
+                name="name"
+                control={control}
+                rules={{ required: true }}
+                render={({ field, fieldState }) => (
+                  <>
+                    <TextInput
+                      id="bedTag"
+                      labelText={t("bedTag", "Bed Tag Name")}
+                      placeholder={t("bedTagPlaceholder", "")}
+                      invalidText={fieldState.error?.message}
+                      {...field}
+                    />
+                  </>
+                )}
+              />
+            </FormGroup>
+
+            {showErrorNotification && (
+              <InlineNotification
+                lowContrast
+                title={t("error", "Error")}
+                style={{ minWidth: "100%", margin: "0rem", padding: "0rem" }}
+                role="alert"
+                kind="error"
+                subtitle={t("pleaseFillField", formStateError) + "."}
+                onClose={() => setShowErrorNotification(false)}
+              />
+            )}
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={() => onModalChange(false)} kind="secondary">
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button disabled={!isDirty} type="submit">
+            <span>{t("save", "Save")}</span>
+          </Button>
+        </ModalFooter>
+      </Form>
+    </ComposedModal>
+  );
+};
+
+export default BedTagsAdministrationForm;